Queda ignaugurado el blog con un tutorial básico que muestra una de las nuevas opciones de la nueva version de Flash CS3 que es la importación de archivos .PSD desde Photoshop con todas sus capas.

Resultado final:

[SWF]http://www.miguelpuig.com/blog2/wp-content/uploads/2007/05/miguelpuigcom_flash_mascara_final.swf, 400, 262[/SWF]

Imagen de partida:

Archivo .PSD: imagenpsd.zip

Vemos que el archivo contiene tres capas (tuberia, layer1 y fondo):

1º. Abrimos el Adobe Flash CS3 y creamos un nuevo documento de 1024 x 623:

2º. Importamos (cmnd+r) el archivo PSD descargado seleccionando las capas que necesitemos:

3º. Una vez cargada la imágen con sus capas podemos ver como Flash ordena la imágen en capas propias de flash. Con lo cual vamos a seleccionar la tubería que se encuentra en la capa “tuberia” y vamos a convertirla en un símbolo de clip de película (F8).

4º. El siguiente paso consiste en editar el clip de película, para ello hacemos doble clic sobra la instancia que acabamos de crear del clip de película y creamos una nueva capa encima de la que tenemos por defecto dentro de ese clip, a esa capa la renombras como “mascara” que será donde iremos dibujando fotograma a fotograma la máscara que dejará ver el contenido de la capa de abajo.

Hacemos clic derecho sobre la capa máscara y le damos a la opción “mask”, desbloqueamos las dos capas y procedemos a editar poco a poco la máscara. Te debería de quedar algo como esto:

5º. Alargamos la capa “layer 1″ hasta el fotograma 25 y empezamos a dibujar sobre el primer fotograma de la capa “mascara” con un pincel del color que queramos y un grosor considerable, no pasa nada si nos salimos de la tubería ya que estamos editando solamente ese clip.

6º. Creamos un nuevo fotograma clave “F6″ en el fotograma 2 de la capa “máscara” y rellenamos un poco más:

7º. Repetimos el anterior paso las veces que necesitemos hasta que nos quede algo así:

8º. Bien este es el final ahora pruebas la película (cmnd+ENTER) y te debería salir algo así:

[SWF]http://www.miguelpuig.com/blog2/wp-content/uploads/2007/05/miguelpuigcom_flash_mascara_final.swf, 400, 262[/SWF]

Yo lo modifiqué un poco más con pinceles de Photoshop y demás y me quedó así:

final_retocado_tuberias.swf

blogmiguelpuigcom_tutorial_flash_psd_layers.zip

El archivo del ejemplo es un extracto modificado del tutorial Vector Effects de Abduzeedo

Espero que este tutorial básico sobre Flash os haya ayudado a comprender el uso de capas importadas desde Photoshop. Cualquier dudo ponedla en los comentarios.

Filed under: Diseño Gráfico, Flash, Photoshop, Tutoriales