Iniciar sesión

Ver la versión completa : [TUTORIAL]Creacion de skins walkman 2.0 , en flash con luces y animados con luces !!!



DJ freaks
25/09/2008, 03:42:50
Hola:

He decidido hacer un tutorial , para que puedan hacer skin en flash macromedia y animados.:a39::a39::a01::a01::a01:

PARTE 1: Skins base flash con luces cambiadas.

MATERIALES:
-Imagen .png , resolucion 240x320 , la pueden redimencionar con este programa:
paint.net.
-Plantillas del skin (gracias tuchile)skins aqui (http://www.topsony.com/forum_es/showthread.php?t=68646)
-Adobe flash CS3 Professional descarga (http://www.topsony.com/forum_es/showthread.php?t=83313)
-archivo .fla , da las luces :a35: , adjunto abajo.

bueno comenzemos :
Basicamente nos vamos a enfocar a el PlayView_Background.png que es el que se convertira a flash .( Nota tambien puedes ocupar esto para celulares con walkman 2.0 que no son w580 , pero tienen resolucion 240x320 , solo hay que borrar el actionscript.:a15:

1.Descargamos el programa:a04:
2.Abrimos el archivo .fla con el Adobe CS3 , adjunto abajo.
http://i312.photobucket.com/albums/ll336/ivahnx/1s.png

3.Seleccionamos la imagen que queremos como fondo , ojo debe ser 240x320 ok:a01:
http://i312.photobucket.com/albums/ll336/ivahnx/2s.png


4.Presionamos Ctrl+R en flash , para seleccionarla de los documentos e importarla.
ojo nos posicionamos en donde dice Actionscript , con darle click a el nombre basta.
http://i312.photobucket.com/albums/ll336/ivahnx/3s.png

5.-Damos click en el icono "insertar capa" , y nos posicionamos en el primer fotograma de la nueva capa creada.
http://i312.photobucket.com/albums/ll336/ivahnx/4s.png

6.-Volvemos a presionar Ctrl+R , e insertamos la mascara del skin , la base transparente.
http://i312.photobucket.com/albums/ll336/ivahnx/5s.png

7.-Nos sale un recuadro donde pregunta que si queremos remplazar o no remplazar.
clikeamos en no remplazar y se importa la mascara.( adicionalmente podemos insertar mas "adornos":a26: como el logo de walkman etc.... repitiendo los pasos del 4 al 7 jeje.:a37:
http://i312.photobucket.com/albums/ll336/ivahnx/6s.png

8.-Nos posicionamos en el layer de ActionScript , damos click de lado derecho en el panel de opciones en Acciones/Fotogramas.
http://i312.photobucket.com/albums/ll336/ivahnx/7s.png

9.-Tabla de valores de las luces .(gracias sebas9010):a01:



Fuxsia: FF007F R: 100 G: 0 B: 50
violeta oscuro: 7F00FF R: 50 G: 0 B: 100
Rojo: FF0000 R: 100 G: 0 B: 0
Azul oscuro: 0000FF R: 0 G: 0 B: 100
Verde: 007F00 R: 0 G: 50 B: 0
Celeste: 00CCFF R: 0 G: 80 B: 100
Turquesa: 007FFF R: 0 G: 50 B: 100
Verde lima: 496300 R: 29 G: 39 B: 0
Naranja: FF0D00 R: 100 G: 5 B: 0

10.-Damos click en archivo/Configuración de la publicación.
11.-Seleccionamos en formato flash , y damos click en publicar.
http://i312.photobucket.com/albums/ll336/ivahnx/8s.png

12.-Vamos a donde tenemos guardado el archivo .fla y cambiamos el nombre que tiene el archivo swf por el de PlayView_Background.swf

13.-Terminamos el skin siguiendo este tutorial. skins walkman 2.0 (http://www.topsony.com/forum_es/showpost.php?p=390283&postcount=1)

PARTE 2 . Skins animados flash con luces cambiadas.(gracias perro 1976)

MATERIALES :
-Imagen gif o flash.
-flash CS3.
-Easy gif animator , por si deceamos hacer una animación propia.:a01:

1.-Seleccionamos la imagen gif ,con tamaño 240x320.
http://i312.photobucket.com/albums/ll336/ivahnx/matrix240x320.gif

2.-Abrimos el flash CS3 y clickeamos en archivo de flash movil , posteriormente cuando se abre el asistente , seleccionamos como reproductor flash 1.1 , ActionScript1.0 y como papel tapiz.
http://i312.photobucket.com/albums/ll336/ivahnx/1f.png

http://i312.photobucket.com/albums/ll336/ivahnx/2f.png

3.-Presionamos Ctrl+R e importamos nuestro gif.
http://i312.photobucket.com/albums/ll336/ivahnx/3f.png

4.-Ahi mismo minimizamos el documento actual y creamos uno nuevo con las mismas caracterizticas.
http://i312.photobucket.com/albums/ll336/ivahnx/4f.png

5.-Vamos al documento anterior y en la zona donde estan los fotogramas , seleccionamos los primeros 3 con Ctrl+click izquierdo y con click derecho les damos copiar fotogramas.
http://i312.photobucket.com/albums/ll336/ivahnx/5f.png

6.-Vamos al otro documento y en el primer fotograma de damos quitar fotograma actual.
http://i312.photobucket.com/albums/ll336/ivahnx/6f.png
7.-En el fotograma vacio de damos click derecho , pegar fotogramas y de esta manera se copian los primeros tres fotogramas de la animacion:a01:,insertamos una nueva capa, presionamos Ctrl+R e importamos la mascara del skin.
http://i312.photobucket.com/albums/ll336/ivahnx/7f.png

8.-Posteriormente nos vamos a insertar/nueva esena y copiamos el cuarto fotograma de la animacion y lo pegamos ahi.De igual manera colocamos la mascara presionando Ctrl+R e insertando la nueva capa.
http://i312.photobucket.com/albums/ll336/ivahnx/8f.jpg


9.- Asi se continua con cada uno de los fotogramas:a34: , posteriormente despues de haber puesto cada fotograma en una esena y que cada uno tenga su mascara. , se continua posicionandose en el fotograma y copiando en el panel derecho en acciones/fotogramas el siguente codigo.NOTA:Antes de copiar cualquier cosa a cada fotograma de debe borrar el de fondo dandole en la opcion quitar fotogramas:a12:


fscommand2("SetQuality", "low");
ill_param = "R=0&G=20&B=100";
getURL("FSCommand:illumination", "rgbon?ledid=1&" add ill_param add ";rgbon?ledid=2&" add ill_param add ";setGlobalRGBValue?" add ill_param add ";");http://i312.photobucket.com/albums/ll336/ivahnx/9f.png
10.-Se guarda el documento y posteriormente como el skin base flash se publica y se exporta

Como notaran es laborioso pero asi no marcara errores ni bugs en sus skins..:a01:
http://i312.photobucket.com/albums/ll336/ivahnx/TM.gif

Gracias a todos los que colaboraron!!!!

+++++TUTORIAL CREADO POR+++++++
++++DJ IVÄHNX TOP MODERATOR++++
ACEPTO SUGERENCIAS Y DUDAS POR MP:a35:

PD: SI NO ERES DE ESTA WEB Y TE FUSILAS ESTE TUTORIAL DE MENOS DA CREDITOS AL AUTOR:a25:
http://i312.photobucket.com/albums/ll336/ivahnx/EXPLOTA.gif