Accesso rapido:  

Forum: Spanish Forum

Topic: mi primer skin

Questo argomento è obsoleto e potrebbe contenere informazioni obsolete o errate.

fer14PRO InfinityMember since 2007
 

Inviato Thu 11 Sep 08 @ 5:14 pm
Disculpa man, pero me encantaria aprender un poco de eso; como hago para empezar???

Tu ayuda sera muyvaliosa para mi..
 

Inviato Thu 11 Sep 08 @ 5:16 pm
fer14PRO InfinityMember since 2007
este tutorial me sirvio a mi para comenzar, espero te sirva
un saludo


Referencia para la creación de Skins
Esta pequeña documentación debería servirte de ayuda para que entiendas como crear o modificar una skin.
Primero, cada skin está hecha por dos archivos, llamodos:
el_nombre_de_tu_skin.bmp
el_nombre_de_tu_skin.xml

El archivo BMP
El archivo .bmp contiene todos los gráficos necesarios para tu skin.
Puedes usar cualquier editos de bitmap (desde Paint hasta Photoshop) para modificar o crear la skin.
El bitmap (o mapa de bits) debe tener un ancho de 800, y una altura de por lo menos 600 (pero usualmente más).
En las primeras 600 filas vas a encontrar el fondo usado para tu skin.
Las próximas filas son usadas para guardar gráficos adicionales, como botones apretados o seleccionados.
El archivo XML
El archivo .xml describe cada elemento de tu skin.
Para cada elemento, se define que va a ser usado, donde los gráficos usados van a estar situados (in cordinación con el archivo .bmp), y varias cosas más.
El archivo xml puede ser editado por un simple editor de texto (como notepad), pero es conveniente si instalas un editor específico de xml(por default, Windows va a abrir el archivo .xml con internet explorer donde vas a poder leerlo pero no modificarlo).
El archivo xml es el archivo raiz (AtomixSkin), el cual contiene todos los elementos de tu skin.
Hay 7 diferentes tipos de elementos:
botón
deslizador
zona de texto
dropzone
beattap
ritmo
navegador

1 - the <button> element
La sintaxis del botón es <button action="" chan="">.
chan puede tomar valores entre "1", "2" or "both" (default).
action puede tomar valores entre:
nothing : Util para hacer que esa zona reaccione al mouse (con over por ejemplo) sin acción
close : Cierra el software y retorna a Windows
minimize : Minimiza el software
maximize : Situa al programa al modo de pantalla completa
play : Toca la canción de la bandeja "chan"
pause : Pausa la canción de la bandeja "chan"
stop : Frena la canción de la bandeja "chan"
magic : toca y sincroniza la canción en la bandeja "chan"
cue : Establece el punto cue principal de la canción (memoriza la posicion actual como de inicio de la canción) en la bandeja "chan"
select : Establece la bandeja "chan" como la bandeja activa
pitch_reset : Resetea el pitch a 100% (despacio si lo pulsas una vez, inmediatamente si lo pulsas dos veces) de la bandeja "chan"
play_pause : Toca la canción de la bandeja "chan" ai esta en pause, o la pone en pause si está sonando
cue_stop : Pone en cue la canción de la bandeja "chan" si está en pause, o la frena si está sonando
sync_pitch : Sincroniza el pitch en la bandeja "chan"
sync_level : Sincroniza el nivel en la bandeja "chan"
sync_beat : Sincroniza el golpe en la bandeja "chan"
mix : Empieza auto-mix
loop4th : Entrar o sacar un loop en un cuarto de golpe (para v2.1 solamente)
loop2th : Entrar o sacar un loop en un medio de golpe (para v2.1 solamente)
loop1 : Entrar o sacar un loop en 1 golpe (para v2.1 solamente)
loop2 : Entrar o sacar un loop en 2 golpes (para v2.1 solamente)
loop4 : Entrar o sacar un loop en 4 golpes (para v2.1 solamente)
loop8 : Entrar o sacar un loop en 8 golpes (para v2.1 solamente)
effect1 : Activa el primer efecto (para v2.1 solamente)
effect2 : Activa el segundo efecto (para v2.1 solamente)
effect3 : Activa el tercer efecto (para v2.1 solamente)
eqreset : Resetea bass, medios y altos a 0db (para v2.1 solamente)
killbass : mata el bass (para v2.1 solamente)
killmedium : Mata los medios (para v2.1 solamente)
killhigh : Mata los altos (para v2.1 solamente)
gotocue1 : Revobina al punto cue 1 (para v2.1 solamente)
gotocue2 : Revobina al punto cue 2 (para v2.1 solamente)
gotocue3 : Revobina al punto cue 3 (para v2.1 solamente)
gotocue4 : Revobina al punto cue 4 (para v2.1 solamente)
gotocue5 : Revobina al punto cue 5 (para v2.1 solamente)
setcue1 : Guarda la actual posición como punto cue 1 (para v2.1 solamente)
setcue2 : Guarda la actual posición como punto cue 2 (para v2.1 solamente)
setcue3 : Guarda la actual posición como punto cue 3 (para v2.1 solamente)
setcue4 : Guarda la actual posición como punto cue 4 (para v2.1 solamente)
setcue5 : Guarda la actual posición como punto cue 5 (para v2.1 solamente)
menu_files : Establece el página de archivos sobre el browser elemento
menu_search : Establece la página de busca sobre el browser elemento
menu_samples : Establece la página de samples sobre el browser elemento
menu_effects : Establece la página de efectos sobre el browser elemento
menu_record : Establece la página de grabación browser elemento
menu_config : Establece la página de configuración sobre el browser elemento
Después, como elementos simples de los <botones>, vas a encontrar estas definiciones.
Las definiciones disponibles para los botones son:
<size width="" height=""> : Dan el ancho y la altura al botón
<pos x="" y=""> : Da la posición del botón en la pantalla
<up x="" y=""> : Da las cordinadas del gráfico para usar cuando el botón está normal
<down x="" y=""> : Da las cordinadas del gráfico para usar cuando el botón está apretado
<selected x="" y=""> : Da las cordinadas del gráfico para usar cuando el botón está seleccionado
<over x="" y=""> : Da las cordinadas del gráfico para usar cuando el mouse está sobre el botón
<overselected x="" y=""> : Da las cordinadas del gráfico para usar cuando el mouse está sobre el botón y el botón está seleccionado
<downselected x="" y=""> : Da las cordinadas del gráfico para usar cuando el mouse está sobre el botón y el botón está apretado
<clipmask x="" y=""> : Da las cordinados del gráfico Blanco y Negro que deben ser usadas como un máscar del clip cuando dibujas el botón
<mousemask x="" y=""> : Da las cordinados del gráfico Blanco y Negro que deben ser usadas como una máscara para decidir si el mouse está sobre el botón
<mouserect x="" y="" width="" height=""> : Establece una simple zona recta como una máscara del mouse
<mousecircle x="" y="" r=""> : Establece una simple zona circular como una máscara del mouse
Excepto paar el tamaño y posición, todas las otras definiciones son opcionales
2 - El <deslizador> .
La sintáxis del deslizador es <slider action="" chan="" orientation="" dblclick="" rightclick="" direction="">.
Los valores de característica son:
action : Posibles valores:
crossfader: no chan es requerido para éste
pitch : Establece el pitch
level : Establece el level
bass : Establece el ecualizador bass
medium : Establece el ecualizador medio
high : Establece el ecualizador alto
gain : establece la ganancia
song_pos : establece (y muestra) la posición de la canción
preview : crossfade el preview del auricular(para v2.1 solamente)
bassfader : crossfade solo el bass(para v2.1 solamente)
mediumfader : crossfade solo los medios(para v2.1 solamente)
highfader : crossfade solo los altos(para v2.1 solamente)
chan : Posibles valores: "1", "2" or "both"
orientation : Posibles valores:
horizontal, Para un simple deslizador (slider) horizontal
vertical, Para un simple deslizador (slider) vertical
circle, para un deslizador circular
round, para un botón perilla
dblclick : define la acción a tomar cuando el usuario hace doble click sobre el deslizador:
cut : Establecer el deslizador a cero
boost : Establecer el deslizador al máximo
reset : Establecer el deslizador a su valor de default
auto : Establecer al deslizador a un valor automático (para el deslizador del pitch o de la ganancia, va a cuadrar los bpm o el nivel)
rightclick : define la acción a tomar cuando el usuario hace un click derecho sobre el deslizador:
bend : Establece el valor real cuando el botón del ratón está apretado
cut : curva al deslizador a cero
boost : curva al deslizador al máximo
reset : Establece al deslizador a su valor por default
auto : Establecer al deslizador a un valor automático (para el deslizador del pitch o de la ganancia, va a cuadrar los bpm o el nivel)
direction (horizontal y vertical para los deslizadores solamente) : valores posibles: "up" (default) or "down"
Y estas definiciones son:
<size width="" height=""> : Da el ancho y el largo del deslizador
<pos x="" y=""> : Da la posición del deslizador en la pantalla
<up x="" y=""> : Da las cordinadas en el gráfico a usar cuando deslizador es normal
<selected x="" y=""> : Da las cordinadas en el gráfico a usar cuando deslizador está seleccionado
<clipmask x="" y=""> : Da las cordinadas del gráfico en Blanco y Negro que deben ser usadas como una máscara Clip cuando dibujas los deslizadores
<mousemask x="" y=""> : Da las cordinadas del gráfico en Blanco y Negro que deben ser usadas como una máscara para decidir si el mouse está sobre el deslizador
<mouserect x="" y="" width="" height=""> : Establece una simple zona recta como máscara del mouse
<mousecircle x="" y="" r=""> : Establece una simple zona circular como máscara del mouse
<fader> (horizontal y vertical solamente para los deslizadores) : Las definiciones son las mismas que el <botón>, y va a actuar como fader para el deslizador
<circle x="" y="" anglemin="" anglemax="" sectsize="" direction=""> (deslizadores circulares solamente) : define la geometria de los deslizadores circulares con estas propiedades:
x : centro del ciruclo
y : centro del ciruclo
anglemin : ángulo (en grado) para la posición cero del deslizador
anglemax : ángulo (en grado) para la posición máxima del deslizador
sectsize : si no es cero (valor por default), el deslizador va a tener un "fader" de sectsize de ancho
direction : valores posibles: "cw" (default) o "ccw"
<fader move="" sensibility=""> (deslizadores circulares solamente) : El movimiento posibles valores son "full", "horz", "vert" o "v".
El <fader> puede contener estas definiciones:
<pos x="" y="" nb="" nbx="">> : da la cordinada de los gráficos a usar por los deslizadores (dependiendo del valor de los deslizadores). Si nbx está especificado, el gráfico se separará un muchas filas
<over x="" y="" nb="" nbx="">> : da la cordinada de los gráficos a usar cuando el mouse está sobre el deslizador

3 - La <zona de texto>.
La sintáxis de la zona de texto es <textzone chan="" geterrormessage="" resetcounter="">.
Las propiedades de valores son:
chan : puede ser establecido a "1" o "2" si la información especifíca del canal está mostrada
geterrormessage :Si se establece "true", esta zona de texto va a mostrar algún mensaje de error
resetcounter : Si se establece como "true", el contador va a ser reseteado si esta zona de texto es cliqueada
Las definiciones de la zona de texto son:
<size width="" height=""> : Da el ancho y la altura de la zona de texto
<pos x="" y=""> : Da la posición de la zona de texto en la pantalla
<mousemask x="" y=""> : Da las coordinadas del gráfico en Blanco y Negro que deben ser usadas como máscara para decidir si el mouse está sobre la zona de texto
<mouserect x="" y="" width="" height=""> : Establece una simple zona recta como una máscara del mouse
<mousecircle x="" y="" r=""> : Establece una simple zona circular como una máscara del mouse
<text font="" weight="" size="" color="" align="" format=""> : Especifíca el texto que va ser mostrado con estas propiedades:
font : select el tipo de letra a usar (default: arial)
weight : posibles valores: "normal" (default) o "bold"
size : le da el tamaño al tipo de letra (default: 12)
color : le da el tamaño al tipo de letra (default: white). El color puede ser escrito en formato numérico (#0000FF) o con el nombre del color ("blue")
align : posibles valores: "left", "right", "center" (o "middle")
format : esta secuencia define qué será escrito (ver el formato exacto abajo)
<text2 font="" weight="" size="" color="" align="" format=""> : Especifíca un texto alternativo que va a ser mostrado si el usuario cliquea sobre la zona de texto.
El formato es una secuencia que describe como el texto va a ser mostrado.
Puede contener una cantidad pequeña de comandos incorporados:
\\ : imprimir un simple \ caracter
\n : imprimir una linea
\r : print a carriage return
\t : imprimir un caracter tab
\xx : imprimir un caracter xx ascii
%% : imprimir un simple % caracter
%yy : ir a la linea yy
%xx,yy : ir a la posición xx,yy
%title : imprimir el titulo de la canción
%author : imprimir el autor de la canción
%fullhour : mostrar el tiempo en formato hh:mm:ss
%hour : mostrar el tiempo en formato hh:mm
%counter : mostrar el contador (cronómetro)
%pitch : imprimir el valor del pitch
%time : imprimir el tiempo de la canción (puede usar modificantes - vea abajo)
%spent : imprimir el tiempo gastado de la canción (puede usar modificantes)
%left : imprimir el tiempo que se fue de la canción (puede usar modificantes)
%cue : imprimir el tiempo desde el punto cue (puede usar modificantes)
%first : imprimir el tiempo desde el primer golpe (puede usar modificantes)
%end : imprimir el tiempo desde el último golpe (puede usar modificantes)
%bpm : imprimir los bpm de la canción (puede usar modificantes)
%level : imprimir el nivel de la canción en dB (puede usar modificantes)
%comment : imprimir el comentario de la canción si tiene
Algunos de los comandos % pueden ser usados con modicaciones. Las modificaciones son cartas capitalizadas que instertas entre el % y el comando. Podes usar:
P : modifica el valor para reflejar el cambio del pitch
L : usa el valor local en lugar del valor global
B : muestra el valor como un número de golpe en lugar del tiempo

4 - the <dropzone> element
La dropzone es la zona donde los archivos (canciones) pueden ser introducidos para ser cargados
La sintáxis de la dropzone es <dropzone chan="">.
Los valores de propiedad son:
chan : valores posibles: "1", "2", "active" (default) o "playlist"
Las definiciones de la dropzone son:
<size width="" height=""> : Da el ancho y el largo de la dropzone
<pos x="" y=""> : Da la posición de la dropzone en la pantalla
<mousemask x="" y=""> :
<mousemask x="" y=""> : Da las coordinadas del gráfico en Blanco y Negro que deben ser usadas como máscara para decidir si el mouse está sobre la dropzone
<mouserect x="" y="" width="" height=""> : Establece una simple zona recta como una máscara del mouse
<mousecircle x="" y="" r=""> : Establece una simple zona circular como una máscara del mouse

5 - los elementos <beattap>.
La beattap es la zona donde los cambios son mostrados para reflejar el ritmo en la música
La sintáxis de la beattap es <beattap chan="" transparent="">.
Los valores de propiedad son:
chan : valores posibles: "1", "2" o "both" (default)
transparent : Si se establece como "true", el mostrador es una supermosición lisa del gráfico hacia arriba y hacia abajo. Además es el uno u el otro.
Las definiciones de beattap son:
<size width="" height=""> : Da el ancho y el largo de la beattap
<pos x="" y=""> : Da la posición del beattap en la pantalla
<up x="" y=""> : Da las cordinadas a usar del gráfico cuando el beattap está bajo
<down x="" y=""> : Da las cordinadas a usar del gráfico cuando el beattap está alto
<clipmask x="" y=""> : Da las cordinadas del gráfico en blanco y negro que deben ser usadas como una máscar cuando se está dibujando el beattap

6 - El <ritmo> .
El ritmo define donde y como las curvas del ritmo va a ser mostradas.
La sintáxis del ritmo es <rhythm>.

Las definiciones del ritmo son:
<size width="" height=""> : Da el ancho y el largo de la ventana de ritmo
<pos x="" y=""> : Da la posición de la ventana de ritmo en la pantalla
<color back="" chan1="" chan2="" both=""> : Simplemente da los colores a las curvas. Los colores deben ser una tecla en el standard VGA palette. Este puede hacer más rápido o lento el sistema que usar definiciones chan1, chan2 y both (vea abajo)
<up x="" y=""> : da el gráfico de fondo que va a ser usado
<chan1 x="" y=""> : da el gráfico que va a ser usado cuando dibujes las curvas para la primera bandeja
<chan2 x="" y=""> : da el gráfico que va a ser usado cuando dibujes las curvas para la segunda bandeja
<both x="" y=""> : da el gráfico que va a ser usado cuando dibujes un punto que pertenezca a ambas curvas

7 - El <navegadorr> .
El navegador establece el espacio que va a ser usado para dibujar la ventana (búsqueda, archivos, ...).
Podés solo tener un navegador por skin, pero tenes que definirlo.
La sintáxis del navegador es <browser>.

Las definiciones del navegador son:
<size width="" height=""> : Da el ancho y el largo de la ventana del navegador
<pos x="" y=""> : Da la posición de la ventana del navegador en la pantalla
<text font="" size="" weight="" color="" over="" selected=""> : Da el tipo de letra principal, tamaño y colores
<options font="" size="" weight="" color="" over="" selected=""> : Da la opción de tipo de letra. tamaña y colores
<widgets font="" size="" weight="" color="" facecolor="" lightcolor="" shadowcolor="" highlightcolor="" darkshadowcolor="" stripescolor="" trackcolor1="" trackcolor2=""> : Da los colores y tipo de letra para los widgets (scrollbars, ...)
<colormatrix rr="" rg="" rb="" gr="" gg="" gb="" br="" bg="" bb=""> : Establece una matriz de transformación del color que sea aplicada en los gráficos incorporados (íconos, ...)

 

Inviato Thu 11 Sep 08 @ 5:39 pm
WOWwwww...........jejejeje...........ahora si tienes mucha tarea Ricardoperez.........tendras que leer un buen y ponerlo en practica....SALUDOTES!!!!!!!!! ;)
 

Inviato Fri 12 Sep 08 @ 7:15 am
ja ja ja que gran explicacion para ese chaval!! je je je
djmarcodemty yo creo que debemos aportar a esos chavales que quieren aprender a realixar skins!! si fueras tan amable de reembiarme los archivos de mis turoriales (los mios no los encuentro!!!)
 

Inviato Fri 12 Sep 08 @ 9:05 am
fer, baje el skin pero no me carga, alguien lo probo .
 

Inviato Fri 12 Sep 08 @ 10:56 pm
si yo lo probé
respuesta solo debes de descomprimirlo!! y si deseas lo buelves a comprimir!! y no da errores!!!
saludotes!!
 

Inviato Sat 13 Sep 08 @ 5:03 pm
No sabia que debia, poner los arch., sueltos. ya lo lee, pero mi Res, es 1024x768. esta bueno igual felicitaciones Fer!!
 

Inviato Sun 14 Sep 08 @ 12:03 pm
fer14PRO InfinityMember since 2007
gracias gracias, pronto pondre el 2.0, le estoy agregando un boton de key, tap bpm y play inteligente
saludos
 

Inviato Sun 14 Sep 08 @ 5:59 pm
fer14PRO InfinityMember since 2007
 

Inviato Wed 17 Sep 08 @ 11:03 pm
ALGUEN ME PODRIA PASAR EL SKIN CREATOR QUE YA SE QUE E SGRATIS PERO NO PUEDO POR QUE TENGO OTRA LICENSIA SI ME LO PASAN GRASIAS
 

Inviato Sat 26 Sep 09 @ 2:32 am
acw_djPRO InfinitySenior staffMember since 2005
El skin creator pide una donación, no es gratis gratis. Además es una herramienta para los usuarios Pro, o sea, uno de los beneficios de ser pro.

Saludos

 

Inviato Sat 26 Sep 09 @ 2:52 am
Saludos desde Ecua el Skins: dj_garret inspirado en DEMO esta liviano me agrada por esa razón, entiendo algo del lenguaje C++ por hay e intentado crear efectos de Sound, pero no logro serlos compatibles con Virtual Dj v6.0.2...?
 

Inviato Sat 26 Sep 09 @ 11:30 am


(Vecchi argomenti e forum sono automaticamente chiusi)