I.E.S.T.

“UNITEK” Animación de Gráficos: Flash

ROLLO DE IMAGEN TRANSICIÓN DE

EFECTO EN FLASH
En este tutorial aprenderemos a crear un hermoso rollo de página de la imagen usa el
enmascaramiento del efecto de transición en Adobe Flash.

Detalles del Programa Tutorial: Flash CS5

Abra un nuevo documento de Flash con Action Script 2.0.

Paso 1: Configuración de las propiedades del documento

Ahora Seleccione Modificar en la barra de menú y seleccione
Documento o directamente puede pulsar Ctrl + J para abrir las
propiedades del documento.

Ahora cambia las dimensiones del escenario de hasta 700 × 438, FPS
= 30 y color de fondo = Negro, como se muestra en la figura
siguiente. Para empezar con los tutoriales de descargar el
archivoSource.zip que le proporcionará los archivos necesarios para
ser utilizados en el tutorial.

Docente: Mgr. Juan VARGAS LIMACHI 1

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

Paso 2: Importación de imágenes necesarias

Primero importar las imágenes descargadas se utilizan de la
fuente. Para hacerlo, vaya al menú Archivo> Importar
Seleccionar> Seleccionar Importar a biblioteca.

Paso 3: Colocación de imágenes a la etapa

Antes de comenzar ya tenemos la capa 1, ahora el nombre de la capa
como 1. Arrastre la imagen img1de la biblioteca al escenario.

Alineación de la imagen hasta el centro de la etapa mediante el panel

de alinear. Tenga en cuenta que para alinear cualquier elemento para
el centro del escenario, comprobar el "Alinear a la etapa" casilla
de verificación.

Docente: Mgr. Juan VARGAS LIMACHI 2

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

Paso 4: Creación de Transition1

Presione CTRL + F8 a crear un nuevo símbolo. Escriba el nombre y
la Transition1 seleccionar tipo Clip de película.

Va a entrar en el clip de película Transition1 y cambiar el nombre de

la capa como img1. A continuación, seleccione la imagen y pulse F8.

Arrastre img2 imagen de la biblioteca y presione F8 para crear un

nuevo símbolo. Nombre este símbolo como img2. Sin embargo, no
conservan este símbolo en el escenario a partir de ahora. Tenga esto
en la biblioteca.
Paso 5: Creación de Transition1 - Organizar elementos
Inserte una nueva capa y el nombre como img1_mask.

Docente: Mgr. Juan VARGAS LIMACHI 3

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

A continuación, cree un rectángulo con las dimensiones son las

siguientes.
Abra el panel de propietaria. Para abrir el panel Propiedades, vaya
al menú Ventana> Seleccione las propiedades.

W = 40
H = 450
X = -390
Y = -225

Ahora inserte una nueva capa de nuevo y el nombre

como img1_flip.

Ahora copia img1 imagen pulsando Ctrl + C y pegar en la

capa img1_flip usando CTRL + SHIFT + V. A continuación, vaya al
menú Modificar> Transformar> Voltear horizontal.

Docente: Mgr. Juan VARGAS LIMACHI 4

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

Ahora mover la imagen volteada a la izquierda hasta que se sale de la

etapa. No deje ningún espacio entre los dos un solo píxel de las
imágenes tal como aparece en la imagen de referencia a continuación.

Ahora inserte una nueva capa y el nombre como img1_flip_mask.

A continuación, cree un rectángulo con las dimensiones son las

siguientes.
Abra el panel de propietaria. Para abrir el panel Propiedades, vaya
al menú Ventana> Seleccione las propiedades.

Docente: Mgr. Juan VARGAS LIMACHI 5

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

W = 61
H = 438
X = -411
Y = -219

Ahora copiar este rectángulo pulsando Ctrl + C e inserte una nueva

capa y el nombre comogradient_effect. A continuación, pegar la
imagen copiada presionando CTRL + SHIFT + V.
Ahora aplica color degradado al rectángulo. Para hacerlo, vaya al
menú Ventana> Color o presione ALT + SHIFT + F9 para abrir el
panel de color.

Después de aplicar el degradado, seleccione el cubo de color de la

izquierda y 7E7E7E en el cuadro código de color resaltado en el
panel de color como se indica a continuación.

Docente: Mgr. Juan VARGAS LIMACHI 6

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

A continuación, pulse entre los cubos de los dos y escriba # FFFFFF en

el cuadro de código de colorresaltado en el panel de color. A
continuación, establezca alfa a 0%.

Paso 6: Creación de Transition1 - La aplicación de forma

clásica y Tween
Ahora seleccione el fotograma 99, de todas las capas excepto la capa
de img1 como se indica en la referencia abajo indicada. A
continuación, pulse F6 para insertar fotograma clave. Después de
esemarco de selección de 100 de img1 única capa y pulse F5 para
insertar fotograma.

Ahora aplica la animación. Para ello, seleccione un fotograma entre los

fotogramas del 1 al 99 y no el botón derecho y seleccione Crear
interpolación de forma Aplicar interpolación de forma en
Docente: Mgr. Juan VARGAS LIMACHI 7
I.E.S.T. “UNITEK” Animación de Gráficos: Flash

el,.Gradient_effect capa, la capa de img1_flip_mask, y la capa

de img1_mask.

Ahora seleccione un fotograma entre el bastidor 1 y 99 de la capa

de img1_flip y crear Tween clásico.Para ello, haga clic derecho>
seleccione Crear interpolación clásica.

Paso 7: Creación de Transition1 - Creación de animaciones

Ahora seleccione la capa gradient_effect, la capa de
img1_flip_mask, y elementos img1_flip capay la izquierda
encendida cada una de ellas pulsando el botón resaltado dado en la
imagen de referencia a continuación.

A continuación, moverlos a la derecha hasta que se sale de la etapa

tal como figura en la imagen de referencia a continuación.

Docente: Mgr. Juan VARGAS LIMACHI 8

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

Seleccione el rectángulo situado en la capa img1_mask y luego

aumentar el ancho del rectángulo utilizando herramienta de
transformación libre para cubrir la imagen.

Paso 8: Creación de Transition1 - La aplicación de la máscara

Ahora seleccione la capa img1_mask y hacer clic derecho, a
continuación, seleccione la máscara.Haga lo mismo con la
capa img1_flip_mask.

Paso 9: Preparación de la transición en la línea de tiempo

principal
Haga clic en la escena para salir de la imagen en movimiento
transition1.

Docente: Mgr. Juan VARGAS LIMACHI 9

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

Ahora ve al panel de propiedades y seleccione el gráfico que figura en

la imagen de referencia a continuación.

Luego vienen abajo en el panel de propiedades y seleccione el juego

una vez en el bucle como se indica en la imagen de referencia a
continuación.

Ahora inserte una nueva capa y el nombre como 2. A continuación,

seleccione el marco 225 de las dos capas y pulse F5 para insertar
fotograma.

Ahora copia el transition1 de layer1 pulsando Ctrl + C. Inserte un

nuevo fotograma clave pulsando F6 y luego pegar el transition1 copiar
presionando CTRL + SHIFT + V. Seleccionar el clip y haga click
derecho y luego seleccione Duplicar símbolo ...

Docente: Mgr. Juan VARGAS LIMACHI 10

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

Escriba el nombre de Transition2.

Ahora haga doble clic en el transition2 para entrar en el clip.

Ahora ve al panel de propiedades y seleccione la imagen en el primer
cuadro y pulse intercambio.

Un cuadro de símbolo de intercambio aparece a continuación,

seleccione img2 y pulse Aceptar. Se reemplazará el símbolo de img1
img2 símbolo.
¿Es este método en cada símbolo img1 sustituirla con la img2.

Docente: Mgr. Juan VARGAS LIMACHI 11

I.E.S.T. “UNITEK” Animación de Gráficos: Flash

Presione Ctrl + Intro. Usted verá el efecto de algo así.

Docente: Mgr. Juan VARGAS LIMACHI 12