Anmelden:     

Forum: Spanish Forum

Topic: mi primer skin

Dieses Thema ist veraltet und kann veraltete oder falsche Informationen enthalten.

 
geposted 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..
 
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, ...)
 
WOWwwww...........jejejeje...........ahora si tienes mucha tarea Ricardoperez.........tendras que leer un buen y ponerlo en practica....SALUDOTES!!!!!!!!! ;)
 
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!!!)
 
fer, baje el skin pero no me carga, alguien lo probo .
 
si yo lo probé
respuesta solo debes de descomprimirlo!! y si deseas lo buelves a comprimir!! y no da errores!!!
saludotes!!
 
No sabia que debia, poner los arch., sueltos. ya lo lee, pero mi Res, es 1024x768. esta bueno igual felicitaciones Fer!!
 
gracias gracias, pronto pondre el 2.0, le estoy agregando un boton de key, tap bpm y play inteligente
saludos
 
 
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
 
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
 
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...?
 


(Alte Themen und Foren werden automatisch geschlossen)