Animación Simple en Flash

Adobe Illustrator CS CS3 Prctica 1
Animacin Simple Flash

1. Creamos un Nuevo Documento.

2. Dibuja una forma cualquiera, es este caso fue un simple circulo verde sin borde. Todo el el
frame nmero 1.

3. Inserta un nuevo Fotograma clave en el frame 25 en la lnea de tiempo. Presiona F6 o te vas a:
Insertar >> Fotograma Clave.

Luego la forma de posicin, en este caso fue de izquierda a derecha.

4. En la lnea de tiempo, regresa al fotograma nmero 1 de manera que regreses a la posicin
inicial, a la izquierda.

En ese momento en la barra de propiedades selecciona Animar >> Forma para concluir la
animacin.
LDG. Paola Marfil Lara Universidad Tecnolgica Metropolitana



5. La imagen muestra como debe quedar tu pantalla si has seguido correctamente los pasos, antes
mencionados.


Animacin Simple Retorno
Tcnica Bsica Flash que muestra como se logra hacer una animacin con ida y retorno.
1. Para logar que la animacin sea de ida y vuelta Inserta un fotograma clave en el frame 40 de la
lnea de tiempo presionando F6 o te vas a:
Insertar >> Fotograma Clave

2. Selecciona el crculo y colcalo a su posicin inicial, al lado izquierdo.

3. Ahora haz clic en cualquier punto entre el fotograma 20 - 39 y cambia a Animar a Forma.



4. La imagen muestra como debe quedar tu pantalla si has seguido correctamente los pasos, antes
mencionados.


Transfomacin Flash
1. Creamos un Nuevo Documento y dibujamos una forma cualquiera, es este caso un Pentgono
Naranja.

2. Luego insertamos un fotograma clave en el frame 20 para la segunda posicin de la forma, solo
basta con selecciones en fotograma 20 y presiones F6. Ahora viene la Transformacin, con a
herramienta de Seleccin (V) y si tener seleccionado al pentgono, haz clic sobre la orilla y sin
soltar el botn del ratn mueve la lnea a donde quieras; en este caso he convertido la forma
original a un triangulo. En tu caso puedes hacer lo que quieras, la idea es probar solo la
animacin.

3. Antes de animar, inserta el tercer estado de la animacin. Sobre el frame 40 Inserta un
fotograma clave presionando F6. Ahora, para regresar a la forma original hay que retomar el
pentgono usado en el frame 1. Haz clic sobre este frame y presiona el botn derecho de tu
ratn; del men emergente usa la opcin Copiar Fotogramas; entonces selecciona el fotograma
40 y haz clic sobre el botn derecho del ratn para usar la opcin pegar fotogramas.
En este momento debes tener lo mismo que hay en la imagen.



4. Finalmente hay que crear las animaciones: seleccionas cualquier frame entre los fotogramas
clave 1 - 20 y sobre la barra de propiedades aplica Animar >> Forma.
Lo mismo tambin se hace con la segunda animacin pero esta entre los frames 20 y 40. Y eso
debe ser todo.
Debajo encontrars la descarga del flash que tiene tres tipos distintos de transformaciones.


Desvanecimiento de Formas
1. Creamos un Nuevo Documento.

2. Luego abre la paleta de Mezclador de Colores Presionando Shift + F9 o Ventana >> Paneles de
Diseo >> Mezclador de Colores.

3. Dibuja una forma, en este caso fue un Rectngulo. Inserta ahora un fotograma clave
presionando la tecla F6. En este caso lo insertamos en el frame 20 de la lnea de tiempo.

4. Sobre el fotograma 20 modifica el valor Alfa de 100 que tiene a un 0%.

Nota: Algunas veces la casilla del Alfa no esta activada, en esos casos basta con dar clic sobre
el bote de relleno en el mismo mezclador de colores y luego Escape.

5. Ahora lo llevaremos el Alfa de 0 a 100% para lograr una animacin cclica. Inserta otro
fotograma clave (F6) en el frame 40 de la lnea de tiempo.
En este momento tenemos los dos segmentos de la futura animacin slo falta animarlos.



6. Haz clic sobre la lnea del tiempo en cualquier frame sobre el 1 y el 20, despus, sobre la
paleta de propiedades en la opcin Animar Usamos Forma, como se seala con un circulo rojo
en la imagen. Repetimos el proceso entre el frame 20 y 40.


Botn Bsico con Sonido
1. Antes de comenzar importaremos el botn bsico (que se hizo en clase).

2. Presiona F11 o sigue la ruta: Ventana > Biblioteca.

3. Presiona Ctrl + R o sigue la ruta: Archivo > Importar > Importar a Biblioteca.

4. Navega hasta la direccin de tu Archivo de sonido e importalo. En este caso el archivo se
llamara "bip.mp3"

5. Colcate en el frame sobre del botn, luego desde la biblioteca arrastra el archivo de sonido o
sobre la barra de propiedades, en el apartado de sonido selecciona el sonido Bip.

6. As queda tu botn despus de agregar el sonido.
Presiona Ctrl + Enter para probar el botn, pasando el cursor sobre el botn.



7. Tambin es posible agregar el sonido en el estado Presionado o en ambos a la vez.

Simulacin de Movimiento de Alta Velocidad en Flash 8
1. El tutorial se enfocar principalmente en realizar una animacin sobre una imagen a la cual se
le aplicar un filtro de desenfoque.

2. Primero hacer el documento (ctrl. + J) de dimensiones 350 * 129 pxeles de ancho y alto
respectivamente.
a)-. Utilizar como color de fondo #FFFFFF.
b)-. Velocidad de fotogramas 18 fps.

3. Crear el nico smbolo (ctrl. + F8)
a)-. Nombrarlo automvil.
b)-. Dar como Tipo Clip de pelcula.

4. Ubcalos en el smbolo dibujar un objeto lo ms parecido a un automvil
a)-. Colocar el dibujo en coordenadas X = 0.0 y Y = 0.0.
Nota si no eres muy ducho con lo de el dibujo se recomienda que se importe una imagen al
smbolo.



5. Regresar a la escena, y cambiar el nombre de la capa por del de carretera.
a)-. Dibujar unas lneas paralelas simulando una carretera.
b)-. Seleccionar esta lneas y colocarlas en coordenadas X = 0.0 y Y = 80.0.

6. Insertar una segunda capa y nombrarla animacin.
a)-. Arrastrar desde la biblioteca el smbolo automvil.
b)-. Colocar el smbolo en coordenadas X = 200.0 y Y = 16.5.


7. Hacer visible el panel de Alinear & Informacin & Transformar (ctrl. + T).
a)-. Seleccionar la opcin Transformar.
b)-. Seleccionar la opcin Sesgar, en la casilla sesgar horizontalmente escribir 15.0 .
c)-. En la barra de Propiedades seleccionar la opcin Filtros.
d)-. Agregar un filtro en el smbolo (+) Desenfocar.
e)-. Escribir 20 nicamente en la casilla de desenfocar en direccin X.

8. Seleccionar el frame # 15 y en este insertar un fotograma clave (F6).
a)-. Colocar el smbolo de este fotograma en coordenadas X = 70.0 y Y = 19.3.


9. Insertar un fotograma clave (F6) en el frame # 17.
a)-. En el panel de Alinear & Informacin & Transformar (ctrl. + T).
b)-. Seleccin la opcin Transformar.
c)-. Escribir 8.0 en la casilla sesgar horizontalmente.

10. Insertar un fotograma clave (F6) en el frame # 18.
a)-. En le panel Alinerar & Informacin & Transformar (ctrl. + T).
b)-. Seleccionar la casilla Restablecer.
c)-. En la barra de Propiedades seleccionar la opcin filtros.
d)-. Hacer clic en el smbolo (-) para quitar el filtro de desenfoque.


11. Seleccionar el fotograma clave # 18.
a)-. Hacer clic con el botn derecho del ratn y en el men desplegado seleccionar la opcin
de Copiar fotogramas, tambin se puede segur la siguiente ruta (ctrl.+Alt.+ C).

12. Seleccionar el frame # 25.
a)-. Hacer clic con el botn derecho del ratn y seleccionar la opcin de Pegar fotogramas, en
lo personal la opcin ms fcil para pegar fotogramas es (ctrl.+Alt.+V)


13. Insertar los ltimos fotogramas.
a)-. Primero insertar un fotograma clave (F6) en el frame # 40.
b)-. Colocar este smbolo en coordenadas X = 365.0 y Y = 19.3.
c)-. Luego insertar un fotograma (F5) en el frame # 40 de la capa carretera.

14. El siguiente paso es realizar las animaciones correspondientes.
a)-. Seleccionar fotogramas entere el 1 y el 16.
b)-. En la barra de propiedades seleccionar la opcin Animar Movimiento.


15. Hacer la segunda animacin seleccionar fotogramas entre el 25 y el 39.
a)-. En la barra de propiedades seleccionar la opcin Animar Movimiento.

El Efecto Mariposa en Flash
1. Hacer un documento (ctrl. + J) con las siguientes propiedades.
a)-. Las dimensiones del documento son 150 * 150 pxeles de ancho y alto.
b)-. Color de fondo #FFFFFF.
c)-. Colocar como velocidad de fotogramas 8 fps.

2. Crear el nico smbolo (ctrl. + F8) de que consta la pelcula.
a)-. Nombrar al smbolo animacin de mariposa.
b)-. Dar como Comportamiento Clip de pelcula.

3. Importar (ctrl. + R) la serie de imgenes. Aqu presento un pequeo truco, nombrar a las
imgenes con el mismo nombre y un nmero consecutivo. Luego seleccionar solamente la
primera imagen para importarla.

4. Una vez que se acepta importar la primera imagen Flash MX preguntara que la imagen forma
parte de una secuencia de imgenes, luego aceptar importar la secuencia de imgenes



5. Al aceptar importar la secuencia de imgenes Flash MX automticamente colocara cada imagen
en cada frame y en las mismas coordenadas X = 0.0 y Y = 0.0.
Nota si se importan las imgenes una por una se tendr que insertar manualmente cada uno de
los frames vacos (F7) y luego acomodar las imgenes una por una en coordenadas X = 0.0 y Y
= 0.0 que prefieres de forma manual o de forma automtica.

6. Regresar a la Escena y arrastrar de la biblioteca el smbolo animacin de mariposa.
a)-. Colocar el smbolo en coordenadas X = 40.0 y Y = 40.0.




Cielo en Movimiento
1-. Comenzar por realizar un documento (ctrl. + J) de dimensiones 290 * 169 pxeles de ancho y alto
respectivamente.
a)-. Color de fondo #FFFFFF.
b)-. Velocidad de fotogramas 40 fps.

2-. Crear el nico smbolo (ctrl. + F8) de que consta la pelcula flash.
a)-. Nombrarlo animacin de nube.
b)-. Dar como Comportamiento Clip de pelcula.

3-. Hacer una serie de imgenes que simulen la transicin de las nubes.
a)-. Luego Importar (ctrl. + R) Archivo >> Importar >> Importar a escenario.
b)-. Colocar a cada una de las imgenes un nombre con nmeros sucesivos por ejemplo nube_1, nube_2
etc. Y con este procedimiento solamente importamos la primera imagen y flash preguntara si se desea
importa a secuencia de imgenes.

4-. Al aceptar Importar la secuencia de imgenesflash las pondr en forma automtica en cada frame y
en coordenadas X = 0.0 y Y = 0.0.
a)-. La animacin que a continuacin se presenta consta de una secuencia de 60 imgenes.



5-. Y por ltimo regresar a la Escena.
a)-. Arrastrar de la biblioteca el smbolo animacin de nube.


Cmo hacer botones en Flash

1- Primero crearemos un nuevo smbolo, haciendo la siguiente combinacin de teclas: ALT+F8.

Aparecer el siguiente cuadro:

2- En Nombre (Name), escribe "botn 1", en Comportamiento (Behavior) selecciona la opcin Botn
(Button), finalmente haz click en Aceptar (OK).

Automticamente, seremos enviado desde la Escena 1 al escenario del smbolo "botn 1"; ah es donde
crearemos un botn que ser incluido en nuestra biblioteca.

El escenario nicamente para la creacin de botones, ser parecido a la siguiente imagen:

Mira hacia la lnea del tiempo (Timeline), como puedes notarlo es diferente a la lnea del tiempo de la
Escena 1.

La lnea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:

4- Haz click sobre la Herramienta de Rectngulo (Rectangle Tool), que se encuentra en el Panel de



Herramientas.

5- Dibuja un rectngulo en el centro del rea de trabajo, y ponle el color azul.

6- Despus presiona la tecla F6; sto har que la cabeza lectora en la lnea del tiempo pase al estado
Sobre.

Como podrs notarlo, el botn se copia, as que no necesitars hacer un nuevo dibujo.

7- An estamos en el estado Sobre, si no tienes seleccionado el botn, hazlo (con la Herramienta Flecha
y haz doble click sobre nuestro dibujo), luego dirgete a Color de Relleno que se encuentra en la seccin
colores del Panel de Herramientas, y escoge el color rojo, como se muestra a continuacin:

8- Despus presiona nuevamente la tecla F6, para que la cabeza lectora pase al estado Presionado, y
cambia el color de relleno de la misma forma que lo hicimos en el paso 7; y escoge un color verde.
Finalmente presiona por ultima vez F6 para pasar al estado Zona activa, sto har que se copie el
botn. Para este ltimo estado, no es realmente necesario cambiar el color de fondo.

Con los colores que hemos aplicado, haremos que el botn cambie de color, cuando se lleven a cabo los
Estados de los botones anteriormente descritos.


Little sunshine animation

1. Primero copia la fotografa.

2. Crea una Nuevo documento en flash e importa al escenario la imagen.

3. Selecciona Modify > Document. Cambia el ancho del documento a 450 pixels and por 381
pixels de ancho. Selecciona cualquier color de fondo y elige 36 fps.



4. Selecciona la imagen y alineala al centro del escenario.

5. Renombra la layer como fotografa y copiala hasta el frame 30 utilizando F5.

6. Crea una nueva layer y nombrala, efecto de luz.

7. Bloque la layer fotografa, selecciona la layer efecto de luz y realiza una figura circular de
color blanco de relleno sin lnea

8. Seleccionado el crculo conviertlo en sumbolo de movie clip. Y nmbralo circle_mc

9. Click sobre el frame 15 despus del frame 30 en la layer efecto de luz.

10. Regresa al frame 15 agarra la gerramienta de seleccin y haz un clic para seleccionar el frane,
ve al panel de propiedades del escenario y da clic en la seleccin del filtro, ajusta el color con
los siguientes valores.

1.Brightness: 84
2.Contrast : 37
3.Saturation:52
4.Hue:160



11. Despus de eso haz clic en el filtro Blur y pon los siguientes valores:

12. Regresa al primer frame con la herramienta de seleccin y selecciona el crculo. Depus en el
Panel de Propiedades en el men color adapta el Alfa hasta 0%.

13. Con un clic derecho en cualquier area de la parte gris entre el frame 1 y el 15 y el 15 y el 30
selecciona Motion Tween.


Circle animation
1. En un documento Nuevo, redimensiona el scenario con los siguientes valores.

2. Con la herramienta de crculo realize la siguiente forma.

3. Presiona la tecla de escape y selecciona un solo crculo, despus convierte el crculo
en un Movie Clip.



4. Convierte cada crculo en un movie clip.

5. Presiona Ctrl+A y se seleccionaran todos los crculos

6. Luego ve al menu Modify > Timeline > Distribute to Layers Para que cada cruclo
ocupe una layer diferente.

7. Con la herramienta seleccin selecciona la layer 1 y elimnala. Dndo un clic sobre el
frame 3 y 5 de la layer marcada como cirlce1_mc y presiona F6 key.




8. Regresa al frame 3 y con la herramienta de seleccin da un clic sobre el crculo para
seleccionarlo. Despus en el panel de propiedades modifica el alfa hasta un 34%.

9. Con un clic derecho sobre el area fris entre el frame 1 y 3, as como entre el 3 y el 5
crea Motion Tween.

ame 5 y 11.

10. Clic sobre el frame 3 y 5 en la layer circle2_mc y presiona F6. Haz lo mismo en el
fr

Y repite por cada crculo.




Quick mask animation
Step 1
Create a new flash document. Set the dimensions at whatever you want. Set the background color as
whatever you like, but for flash movies frame rate set 32 and click ok.

Step 2

Find any picture somewhere which you want to animate, and import it (Shortcut key: Ctrl+R) into a
flash. You can also if you like, download my picture.

Step 3
After you have imported a picture, click on frame 70 and press F5 key. Then, double click on layer 1 to
rename its name in picture.
Step 4


Create a new layer above the picture layer and name it mask.
Step 5
Lock picture layer, select mask layer and take the Oval Tool (O). In the Colors portion of the Tool panel,
block the Stroke color by clicking on the little pencil icon and then on the small square with the red
diagonal line. For Fill color choose any color and draw a circle like it is shown on the picture below.

Step 6
While the circle is still selected, press F8 key (Convert to Symbol) to convert this circle into a Movie Clip
Symbol.

Step 7
Click on frame 10 and press F6 key. After that, move the circle a little left top using the arrows key or
by mouse. See the picture below.



Step 8
Click on frame 15 and press F6 key. After that, move the circle a little top and enlarge it a little, using
the Free Transform Tool (Q).

Step 9
Click on frame 25 and press again F6 key. Then, move the circle a little left down.


Step 10
Click on frame 40 and press again F6 key. Then, move the circle a little right.

Step 11
Click on frame 65 and press F6 key. After that, move the circle a little top and enlarge it a little more.
See the picture below.


Step 12
Click on frame 65 and press again F6 key. After that, move the circle a little left and decrease it a
little.

Step 13
Click on frame 70 and press again F6 key. Then, enlarge the circle above the all picture using the Free
Transform Tool (Q). See the picture below.


Step 14
Take the Selection Tool (V) and select the mask layer. Then, go to the Align Panel (Ctrl+F3) and for
Tween choose Motion. See the picture below.

Step 15
Select mask area layer and convert it to a mask by right-clicking on the mask area layer and selecting
Mask. See the picture below.

Step 16
Click on frame 100 of layer mask and picture and press F5 key.


Mscara e Insertar Imagen
1. Crea un Nuevo Documento Flash, luego importa la imagen que usaras de fondo. Presiona Ctrl +
R o: Archvo > Importar > Importar a Escenario
Selecciona el archivo y d clic en Abrir

2. Inserta una Nueva Capa haciendo clic sobre el icono con circulo rojo. Acomoda la imagen donde
desees que inicie la animacin.

3. Selecciona la capa 2, Frame 1, e inserta el texto.



4. Sobre la capa 1 que es la imagen inserta un fotograma clave en el frame 30, presionando F6 o:
Insertar > Lnea de Tiempo > Fotograma Clave
Y mueve tu imagen a la segunda posicin de la animacin; en esta caso mov de derecha a
izquierda.

5. Selecciona cualquier frame entre el 1 y el 30 de la capa 1 y en la barra de Propiedades haz clic
en Animar > Movimiento.


6. Sobre la capa 2, en el frame 30 Inserta un fotograma presionando F5 o:
Insertar > Lnea de Tiempo > Fotograma

7. Selecciona la capa 2 y haz clic sobre esta con el botn derecho del ratn. A continuacin
aparecer un men de opciones, de donde selecciona Mscara y en automtico notars el
cambio y la aparicin de la mscara.




Crear un Efecto de Nieve en Flash
1. Primero empezaremos abriendo un documento nuevo y cambiando el color del fondo a un color
oscuro para que la nieve se vea (te recomiendo este #2F82FF)

2. Luego creamos un MoviClip, seleccionando en el men: Insertar > Nuevo smbolo(o ctrl.+ f8)
y nombrarlo SnowFlake



3. Dentro de el MoviClip dibujaremos un ovalo blanco y sin bordes de unos 4 de ancho y 4 de alto

4. Luego de haber creado el MoviClip regresamos a la Escena 1, nos vamos a la biblioteca y
damos clic derecho sobre el MoviClip creado (SnowFlake) y le damos a vinculacin o Linkage


5. Y seleccionamos la opcin Exportar para ActionScript. Este sera nuestro copo de nieve al
que daremos animacin mediante un cdigo

6. Crearemos otro MoviClip de la misma forma que el anterior (SnowFlake) pero envs de dibujar
un copo de nieve lo dejaremos en blanco, luego regresaremos a la escena 1 y crearemos otra
capa y en esa capa creada introduciremos nuestro MoviClip creado a un lado fuera de el
documento

NOTA: EL MOVICLIP QUE INSERTAREMOS SERA EL QUE ACABAMOS DE CREAR (EL QUE ESTA EN BLANCO) NO
EL MOVICLIP SnowFlake

7. Luego a es MoviClip le daremos el nombre de instancia control_mc

8. Luego y por ultimo nos iremos a la capa vaca y seleccionaremos el fotograma uno y ah
escribiremos el siguiente codigo:
//////////////////////////////////////////////////////////////////
function randRange(min:Number, max:Number):Number {


var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}
//////////////////////////////////////////////////////////////////
function moveSnow() {
if (this.moving) {
this._y += this.speed;
this._x += Math.cos(this._y / 10);
if (this.hitTest(_root.rect_mc.Ice_mc)) {
this.moving = false;
this.stopCounter = 0;
}

if (this._y > 327){
removeMovieClip(this);

}
}
else {
this.stopCounter++;
if (this.stopCounter > 500) {
this.onEnterFrame = null;
this.removeMovieClip();
}
}
}
//////////////////////////////////////////////////////////////////
function createSnow(){
i = _root.getNextHighestDepth();
tmp = _root.attachMovie("SnowFlake","snowflake_mc" +i,i);
tmp._x = randRange(1,550);
tmp._y = -1;
tmp._alpha = randRange(50, 100);
tmp.speed = randRange(1,10);
tmp._xscale = randRange(70,110);
tmp._yscale = tmp._xscale;
tmp.moving = true;
tmp.onEnterFrame = moveSnow;
}
//////////////////////////////////////////////////////////////////
control_mc.onEnterFrame = function() {
createSnow();
}
//////////////////////////////////////////////////////////////////




Animacin de Nubes para Cartoon
1-. El primer paso es crear un documento (ctrl. + J), con las siguientes propiedades.
a)-. Dimensiones 300 * 250 pxeles de ancho y alto.
b)-. Utilizar como Color de fondo #33CCFF.
c)-. Para que la pelcula tenga con un poco ms de realismo usar en Velocidad de fotogramas 20 fps.

2-. Crear el primero de dos smbolos (ctrl. + F8).
a)-. Nombrarlo nube.
b)-. Seleccionar como Tipo Clip de pelcula.

3-. En este smbolo dibujar una forma la cual simule una nube. El Color de trazo #000000 y Color de
relleno #FFFFFF.
a)-. Tener cuidado de no hacer la forma de la nube muy grande esto con el fin de no modificarla
despus.
b)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0.



4-. Crear el segundo smbolos (ctrl. + F8).
a)-. Nombrarlo nube componente.
b)-. Seleccionar como Tipo Clip de pelcula.

5-. Abrir el panel de la Biblioteca (F11).
a)-. En la biblioteca hacer clic con el botn derecho del ratn sobre el smbolo nube componente.
b)-. Seleccionar en el men desplegado Definicin de componente


6-. Al aceptar el paso anterior se abrir el siguiente panel Definicin de componente, agregar 3
Parmetros presionando el signo +.
a)-. Cambiar el Nombre de cada uno de los parmetros por vel, alfa y x_max.
b)-. Cambiar el Valor de los parmetros 10, 100 y -900. el panel tiene ms complementos pero por el
momento solamente nos ocuparemos de estas dos variables Nombre y Valor

7-. Una ves que se cambio el tipo Clip de pelcula por del de Componente, tambien cambiara el icono
como lo podrs apreciar en la biblioteca.
a)-. Arrastrar desde la biblioteca el smbolo nube hasta el Componente o smbolo nube componente.
c)-. Abrir la barra de Acciones clip de pelcula e insertar el siguiente cdigo action script.
onClipEvent (load) {
_alpha = _parent.alfa;
}
onClipEvent (enterFrame) {

(_x>_parent.x_max) ? (_x -= _parent.vel) : (_x=0);
}

8-. Regresar a la Escena y arrastrar desde la biblioteca 2 veces el Componente nube componente.
a)-. Colocarlos fuera de la Escena coordenadas X = 350.0 y Y = 40.0 (pare superior derecha).

9-. Seleccionar alguno de los dos Componentes (smbolos) arrastrados a la Escena y abrir el panel de
Parmetros.
a)-. Modificar los valores de cada uno de los Parmetros 10, 50 y -750.
Nota si agregas varias veces el componente y modificas los parmetros adecuadamente simularas que la
transicin de la animacin puede resultar al asar.



Con este paso queda concluido el tutorial espero que sea de ayuda para trabajos futuros well done!!.

P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado. Como puedes observar en el archivo SWF
realice una pequea animacin de un avioncito, con el fin de tener otra perspectiva del alcance que
pude tener esta animacin en particular. :)Hasta muy pronto:)


Botn roll over con efecto cortina
1. Crearemos un documento de dimensiones 300 x 112 pxeles el cual llevara como fondo el color
blanco, todo esto lo hacemos desde la barra de propiedades en la opcin tamao. Si siguen los
pasos como se muestran esto es 1, 2, 3, etc: talvez concluyan con mayor rapidez el tutorial.

2. El siguiente paso es crear un smbolo nombrarlo animacin y de comportamiento clip de
pelcula, la ruta es ctrl. + F8 o Insertar >> Nuevo smbolo.

3. Una vez posesionados en el smbolo crear un rectngulo el cual deber tener algunas
caractersticas las cuales explicare imagen por imagen la primera de ellas es esta el rectngulo
no tendr borde

4. Hacer visible el mezclador de colores presionando shift + F9 o va Ventana >> Paneles de
Diseo Mezclador de colores. Seleccionar color de relleno y escribir en la parte correspondiente
el nmero de color en esta ocasin ser #BFBFBF.



5. En este mismo panel seleccionar un porcentaje de alfa el cual ser 65 %. Resulta fcil perder
los colores y los porcentajes de alfa asignados, el lo particular recomiendo guardar los colores,
en esta imagen siguiendo los pasos 2 y 3 podrs guardar los colores que desees.

6. Ya con las caractersticas del rectngulo de borde y color de relleno, este tendr que medir 150
ancho x 112 alto y en coordenadas X=0 yY=0


7. Seleccionar el frame nmero 12 e insertar un fotograma clave la forma ms rpida es
presionando F6 o seleccionar el nmero de frame indicado y hacer clic con el botn derecho
del ratn y dar insertar fotograma clave otra va es Insertar >> Lnea de tiempo >> Fotograma
clave.

8. Ahora insertar otro fotograma clave en el frame nmero 6 ya saben seleccionar el frame
indicado y presionar F6, seleccionar el rectngulo y dar una altura de 1.0.

9. Insertar un nuevo fotograma clave en el frame nmero 7.



10. En esta capa y con los fotogramas insertados crear dos pequeas animaciones, la primera es del
frame 1 al frame 6. Seleccionar el primer fotograma y en la barra de propiedades en la parte
animar seleccionar forma.

11. La segunda animacin va del fotograma 7 al fotograma 12. Repetir el paso anterior pero ahora
para el fotograma 7, seleccionar el fotograma y animar forma la imagen resulta explicita para
tal propsito.

12. Insertar una segunda capa, y para no repetir los pasos anteriores de dibujar el rectngulo y
crear la animacin, resulta ms practico seleccionar la capa 1 y dar clic con el botn derecho
del ratn en cualquier parte de la animacin, y seleccionar copiar fotogramas



13. Al insertar la segunda capa valga la redundancia se insertan automticamente los 12
fotogramas, que es de lo que consta el total de la animacin. Y como ya lo imaginan la idea es
pegar los fotogramas copiados con anterioridad, sin embargo, es necesario primero eliminar los
fotogramas del 2 al 12. Seleccionar dichos fotogramas y presionar shift F5.

14. Una vez eliminados los fotogramas, seleccionar el primero y hacer clic con el botn derecho del
ratn y seleccionar pegar fotogramas.


15. En este paso crear una mascara, primero seleccionar la capa 2 hacer clic con el botn derecho
del ratn y seleccionar mascara.

16. Insertar una tercera capa, y dibujar una lnea en ella, es necesario ocultar la capa 1 y 2 para
solo ver la lnea con la cual se va a trabajar. Las caractersticas de la lnea son 150 ancho x 0.0
alto en coordenadas X=0 y Y=112, de color negro, grosor 3 y tipo de lnea slido.


17. Presionando F6 insertar un fotograma clave en el frame nmero 6 y cambiarle las coordenadas
a X=0 y Y=0.

18. Insertar otro fotograma clave en el frame nmero 7 presionar F6 para tal propsito.


19. Insertar nuevamente un fotograma clave en el frame nmero 12. Cambiar las coordenadas X=0
y Y=112

20. En esta capa tambin es necesario crear una animacin de forma. Para recordar como hacerlo
revisar los pasos 10 y 11.

21. Solamente faltan unos cuantos pasos censillos para concluir con el tutorial, en este punto crear
un nuevo smbolo presionando ctrl. + F8, nombrarlo zona_activa con un comportamiento de
botn.



22. Seleccionar en la lnea de tiempo el cuarto estado del botn el cual es Zona activa insertar un
fotograma clave presionando F6 y despus dibujar en este fotograma un rectngulo sin borde el
color de relleno no importa, las dimensiones deben de ser 150x112 y en coordenadas X=0 y
Y=0.

23. Insertar una cuarta capa en el smbolo clip de pelcula animacin, y arrastrar el smbolo botn
zona_activa y colocarlo en coordenadas X=0 yY=0.



24. Seleccionar el smbolo abrir el panel de acciones e insertar el siguiente cdigo:
on (rollOver) {
gotoAndPlay(2);
}
on (rollOut, releaseOutside) {
gotoAndPlay(7);
}


25. Insertar una quinta capa prometo que ser la ltima, insertar un fotograma clave en el frame
nmero 6 presionar F6, espero que hasta este punto todava no tengan ningn contratiempo.

26. Seleccionar el primer fotograma de esta quinta capa y en el panel de acciones escribir:
stop();


27. Ahora es turno de seleccionar el fotograma que insertamos en el frame 6 e insertar el panel de
acciones nuevamente un:
stop();
28. Es decisin de cada quien si eliminan los frames adicionales en esta capa (del frame 7 al
frame12), si los quitan o no esto no repercutir en la animacin final.

1. Importar dos imgenes a la biblioteca la ruta es Archivo >> Importar >> Importar a biblioteca, si
ya tienen un poco de experiencia entonces trasladarse a la escena e importar la imgenes a
escenario presionando ctrl. + R


2. Una vez en la escena colocar las imgenes en las coordenadas correspondiente la primera en
X=0 y Y=0 y la segunda en X=150 y Y=0. Si no importaron a la escena entonces es necesario
arrastrar las imgenes desde la biblioteca.

3. Y por fin terminamos, insertar una segunda capa, ocultar la primera capa, arrastrar dos veces
el clip de pelcula animacin, al igual que en el paso anterior colocar el smbolo en las
coordenadas apropiadas. El primer smbolo en coordenadas X=0 y Y=0 y el segundo smbolo en
X=150 y Y=0.


Cargador flash basado en tiempo
1. Comenzamos adaptando el tamao del documento (pelcula) en este caso la pelcula ser de
250*242. Esto se hace desde la barra de propiedades hacer clic en tamao y escribir las
dimensiones deseadas, tal como lo muestra la imagen.

2. El siguiente paso es presionar Ctrl. F8 para crear un nuevo smbolo de nombre cargador y el
comportamiento ser Clip de pelcula

3. Una vez en el smbolo dibujar un rectngulo sin borde y con las siguientes dimensiones 120 de
ancho por 10 de alto, y en las coordenadas X=0 y Y=0



4. Este paso es de suma importancia pues de esta maniobra depende el xito del cargador.
Primero seleccionar el rectngulo (la forma), despus presionar F8 para convertir el smbolo,
nombrarlo barra y en la parte en donde dice registro seleccionar la casilla central izquierda, de
esta forma nos aseguramos que la barra del cargador se desplace de izquierda a derecha. Si
por alguna razn seleccionas otra casilla el comportamiento de la barra ser igual al
seleccionado.

5. Cuando el smbolo a sido convertido el rectngulo se mirara como se muestra en la imagen.
Seleccionar el rectngulo y aqu le damos un (Nombre de instancia) el cual ser barra.


6. Es necesario agregar dos campos de texto uno esttico y uno dinmico. Es recomendable
primero agregar el texto esttico y escribir tiempo restante las coordenadas es lo de menos.

7. Ahora, agregar el segundo campo de texto, el cual va a ser texto dinmico. Hacerlo lo
suficientemente ancho, en el espacio variable (Var.) escribir mx.


8. Primero regresamos a la escena, y a la primera capa hay que llamarla cargador Luego abrir
la biblioteca si es que no la tienes abierta presionando F11, para despus arrastrar el clip de
pelcula llamado cargador.

9. Seleccionar el clip de pelcula que fue arrastrado, abrir el panel de acciones y escribir el
siguiente cdigo:
onClipEvent (load) {
b_total=_root.getBytesTotal();
}
onClipEvent (enterFrame){
b_loaded=_root.getBytesLoaded();
if(b_loaded >= b_total){
_root.gotoAndPlay("inicio");
}else{

porcentaje=(b_loaded/b_total)*100;
barra._xscale=porcentaje;
time=getTimer()/1000;
bps=Math.round(b_loaded/time);
bytes_left= b_total-b_loaded;
seg_left= Math.ceil(bytes_left/bps);
min_left= Math.floor(seg_left/60);
hrs_left=Math.floor(min_left/60);
min_left-=(hrs_left*60);
seg_left-=((hrs_left * 60) + min_left) * 60;
(length(min_left) == 1)?(min_left="0"+min_left):0;
(length(seg_left) == 1)?(seg_left="0"+seg_left):0;
mx= hrs_left+" hrs. " + min_left +" min. "+seg_left+" seg. ";
}
}

10. Insertar una segunda capa y nombrarla acciones, seleccionar el primer fotograma y en el panel
de acciones insertar
stop();



11. Insertar un nuevo fotograma clave vaco en el frame nmero 3. Seleccionar el fotograma 3 y en
el panel de acciones agregar:
gotoAndPlay("inicio");

12. Importar una imagen a la biblioteca si ya tienes experiencia simplemente presionar ctrl.+R.


13. Insertar una nueva capa, llamarla imagen, insertar un fotograma clave vaci y en este insertar
la imagen que esta en la biblioteca, colocarla en las coordenadas X=0 y Y=0


14. Y por fin terminamos solamente falta etiquetar el fotograma. Primero seleccionar el fotograma
y darle el nombre de inicio y el tipo de etiqueta va hacer de nombre. Con esto queda concluido
el super tutorial, para ver el funcionamiento del cargador tienes que presionar dos veces ctrl.
Enter.


Animación Simple en Flash

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Animación Simple en Flash

Cargado por

Copyright:

Formatos disponibles

Adobe Illustrator CS CS3 Prctica 1

Animacin Simple Flash

También podría gustarte