Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

Prctica BICICLETA: Interpolacin de movimiento en Flash

Objetivo: El alumno usar una herramienta que le permita el diseo y movimiento de objetos con la finalidad de crear pelculas animadas en el diseo web. TEMAS: Interpolacin de movimiento Uso de la barra de herramientas para crear objetos Uso de la barra de propiedades Uso de movimientos horarios y anti horarios Uso de barra de colores DESARROLLO: 1 Abrir un documento nuevo en Flash (INICIO PROGRAMAS ADOBE MASTER COLLECTION CS5 ADOBE FLASH CS5 ). 2 En la columna CREATE NEW seleccionar y dar un clic a la opcin Flash File (ActionScript 2.0).

3 En la barra de propiedades cambiar el tamao de la Scene a 900 de ancho por 400 de alto con una velocidad de 12 fps.

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

CLIC BOTON EDITAR O CTRL + J PARA OBTENER LAS PROPIEDADES DEL DOCUMENTO

Aparecer el cuadro de propiedades del documento y aqu podremos cambiar las propiedades especificadas en este punto (Document Properties). 1

4 Dar un clic en el Layer 1, fotograma 1 (frame 1)

5 Vamos a importar la imagen para que en este momento no tengas que dibujar. En la barra men selecciona la opcin de File Import Import to Library Selecciona el archvio bicicleta.gif. Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

6 En las ventanas de lado derecho da un clic en library para que puedas ver las imgenes importadas.

7 Primero vamos a crear el escenario correspondiente. Selecciona la herramienta rectngulo de la barra de herramientas y colcalo de la mitad hacia arriba para crear el cielo.

8 Vamos a cambiar el color del cielo, selecciona de la barra de men Windows Color y obtendrs una barra como la siguiente cambiale la opcin de solid a Linear Gradient.

e ntr oe c urs cli l c de el ble o a e tes do de erc bo and on Ac dos y cu lga c un Da bote para los tura te sa + da un al tura l re pin rsor o de regar dole pin bia azul cu sign a ag mbi cam a F un c par . Ca 99FF or col CF cli te m #00 9C bo color #9

Da doble c lic bote de pin al tura para cambia r el color a azu l #99CCFF

al

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

9 Checa que los tres colores que colocaste sean los siguientes:

Estos son los colores que debers tener. 10 Da un clic sostenido en el icono Free Transform Tool y selecciona la opcin de Gradient Transform Tool

11 Obtnedras un cuadro en escena que te permitir cambiar un poco de posicin los colores ya colocados. Acerca el cursor para que puedas girar la posici de los colores.

Ve como la posici de los tres colores se puede rotar para que puedas darle una vista diferente al cielo. Ralo a tu gusto. Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

12 Ahora vamos a realizar lo mismo pero para la parte inferior de la escena coloca un cuadro en la mitad de la escena hacia abajo.

13 Si te salen los colores que anteriormente habamos puesto para el cielo solamente los vamos a cambiar. Repite a partir del paso 8 para que puedas seleccionar los colores de tal manera que se vea como pasto. Quedando la imagen de la siguiente manera:

14 Da un clic en el fotograma 80 y presiona la tecla de F5 (Esta tecla se utiliza nicamente para insertar frame que te permite visualizar hasta este fotograma el fondo) 15 Vamos a insertar un nuevo layer para hacer la carrertera, primero de lado izquierdo donde dice Layer 1 da un clic al botn Nuevo Layer y ya estaramos en el layer 2.

New Layer

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

Da un clic al candado del Layer 1 para que ya no lo podamos mover.

Da un clic En el fotograma 1 del Layer 2 para dibujar la carretera.

16 Ahora s dibuja un nuevo recuadro en color gris o caf para hacer el efecto de la carretera. (Con herramienta rectngulo ).

17 Le vamos a dibujar una lnea punteada en medio de la carretera gris. Selecciona el botn Lnea de la barra de herramientas y en la barra de propiedades le cambias el tipo de lnea a punteada. Antes de colocar la lnea fjate que las propiedades de sta estn como sigue: Color de lnea Ancho de lnea blanco de 2.

Tipo de lnea punteada 18 Y ahora si traza la lnea como se muestra en la figura:

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

19 Vamos a bloquear la capa para que ya no la podamos modificar dndole un clic al candado del Layer 2.

20 Ahora si vamos a realizar la animacin de la bicicleta. Inserta un nuevo Layer.

New Layer

21 Arrastra la bicicleta Para que la coloques al inicio de la carretera estando en el fotograma 1 layer 3.

22 En el fotograma 1 de Layer 3 donde est la bicicleta presiona clic derecho y selecciona la opcin de Create Classic Tween.

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

23 Da un clic en el fotograma 80 y presiona la tecla F6 (Esta tecla es para copiar el objeto que est en el fotograma 1 al fotograma 80). 24 Estando en el fotograma 80 con el cursor de seleccin extremo de la carretera. mueve la bicicleta del otro

25 Presiona CTRL + ENTER para que puedas ver como quedo tu animacin. Regresa nuevamente al archivo de flash para continuar con la animacin. 26 Antes de iniciar la nueva animacin en el mismo archivo vamos a poner el candado al Layer 3.

27 Inserta un nuevo Layer.

New Layer

28 Vamos a importar a biblioteca un objeto para no dibujarlo. En la barra de Men Archivo(File) Importar (Import) Importar a biblioteca(Import to library) Seleccionas la imagen Avin.

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

29 Da un clic en el Layer 4, fotograma 1 y en el panel de lado derecho deber estar en biblioteca (Library) el avin, arrstralo y djalo en la parte superior de la escena. En la parte del cielo.

30 Da clic derecho en el fotograma 1 y selecciona la opcin de Crear Interpolacin Clsica. (Create Classic Tween).

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

31 Da un clic en el fotograma 80 y presiona la tecla F6.

32 Da un clic derecho en donde dice Layer 4 y selecciona la opcin Aadir gua de movimiento clsica. (Add Classic Motion Guide).

33 Se coloca una capa mas con la guia da un clic en el fotograma 1 del Layer de la Gua de movimiento. Checa como el Layer 4 se disminuy un nivel ya que va con la gua.

34 Posteriormente da un clic en el icono del lpiz que est en la barra de herramientas. Y cambia el tipo de lnea con el icono que se encuentra al final de la barra de herramientas. 35 En la barra de propiedades asegrate de tener el tipo de lnea normal (HairLine)

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

36 Ahora si vamos a dibujar la lnea que seguir el avin como se muestra en la figura.

37 Da un clic en el fotograma 1 del Layer 4 y coloca el avin al inicio de la lnea, da un clic en el fotograma 80 del Layer 4 y mueve el avin al final de la lnea.

38 Presiona CTRL + ENTER para que veas como va tu animacin. Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

39 Vamos a ponerle el candado al layer 4 y al layer de la guia.

401Inserta un nuevo Layer.

New Layer

40 Arrastra la imagen de perro.gif al layer 5 fotograma 1 y colocalo en la parte del pasto.

41 Presiona clic derecho en el layer 5 y selecciona la opcin de Create Motion Tween. Como se ve en la figura:

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

42 Presiona Ok al mensaje que se te muestre.

42 Da un clic en el fotograma 20 del layer 5 y presiona F6. Estando en este fotograma 20 mueve el perro a otra posicin. 43 Aparecera una linea que podras mover por medio de los puntos para que tome el movimiento que tu quieras.

Profa: Juanita Bauelos Rivera

Fecha de Elaboracin:__________ Fecha de Revisin: ____________ Responsable:_________________

44 Da un clic en el fotograma 40 y presiona F6 y vuelve a mover el perro de posicin, dandole a la linea la orientacin deseada.

45 46 47 48

Da un clic en el fotograma 60 y presiona F6 y vuelve a mover el perro de posicion. Da un clic en el fotograma 80 y presiona F6 y vuelve a mover el perro de poscin. Presiona CTRL + ENTER para que puedas ver la animacin completa Por ultimo Inserta un nuevo layer y dibuja un sol en la parte superior izquierda a dos colores. 49 Inserta un nuevo layer y dibuja unas nubes.

Profa: Juanita Bauelos Rivera