Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________

Práctica BICICLETA: Interpolación de movimiento en Flash
Objetivo: El alumno usará una herramienta que le permita el diseño y movimiento de objetos con la finalidad de crear películas animadas en el diseño web. TEMAS: Interpolación 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 opción Flash File (ActionScript 2.0).

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

Profa: Juanita Bañuelos Rivera

Profa: Juanita Bañuelos Rivera .gif. fotograma 1 (frame 1) 5 Vamos a importar la imagen para que en este momento no tengas que dibujar.Fecha de Elaboración:__________ Fecha de Revisión: ____________ 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 3 2 4 Dar un clic en el Layer 1. En la barra menú selecciona la opción de File – Import – Import to Library – Selecciona el archvio bicicleta.

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 Bañuelos Rivera . 7 Primero vamos a crear el escenario correspondiente. 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 �. 8 Vamos a cambiar el color del cielo.Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 6 En las ventanas de lado derecho da un clic en library para que puedas ver las imágenes importadas. Selecciona la herramienta rectángulo de la barra de herramientas y colócalo de la mitad hacia arriba para crear el cielo. selecciona de la barra de menú Windows – Color y obtendrás una barra como la siguiente cambiale la opción de solid a Linear Gradient.

Ve como la posici� de los tres colores se puede rotar para que puedas darle una vista diferente al cielo. Acerca el cursor para que puedas girar la posici� de los colores.Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 9 Checa que los tres colores que colocaste sean los siguientes: Estos son los colores que deberás tener. Profa: Juanita Bañuelos Rivera . 10 Da un clic sostenido en el icono Free Transform Tool y selecciona la opción de Gradient Transform Tool 11 Obtnedras un cuadro en escena que te permitirá cambiar un poco de posición los colores ya colocados. R�alo a tu gusto.

Fecha de Elaboración:__________ Fecha de Revisión: ____________ 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. primero de lado izquierdo donde dice Layer 1 da un clic al botón Nuevo Layer y ya estaríamos en el layer 2. New Layer Profa: Juanita Bañuelos Rivera . 13 Si te salen los colores que anteriormente habíamos 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.

Antes de colocar la línea fíjate que las propiedades de ésta estén como sigue: Color de línea Ancho de línea blanco de 2.Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ Da un clic al candado del Layer 1 para que ya no lo podamos mover. Selecciona el botón Línea de la barra de herramientas y en la barra de propiedades le cambias el tipo de línea a punteada. 17 Le vamos a dibujar una línea punteada en medio de la carretera gris. (Con herramienta rectángulo ). Da un clic En el fotograma 1 del Layer 2 para dibujar la carretera. Tipo de línea punteada 18 Y ahora si traza la línea como se muestra en la figura: Profa: Juanita Bañuelos Rivera . 16 Ahora sí dibuja un nuevo recuadro en color gris o café para hacer el efecto de la carretera.

22 En el fotograma 1 de Layer 3 donde está la bicicleta presiona clic derecho y selecciona la opción de Create Classic Tween.Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 19 Vamos a bloquear la capa para que ya no la podamos modificar dándole un clic al candado del Layer 2. New Layer 21 Arrastra la bicicleta Para que la coloques al inicio de la carretera estando en el fotograma 1 layer 3. 20 Ahora si vamos a realizar la animación de la bicicleta. Inserta un nuevo Layer. Profa: Juanita Bañuelos Rivera .

24 Estando en el fotograma 80 con el cursor de selección extremo de la carretera. En la barra de Menú → Archivo(File) → Importar (Import)→ Importar a biblioteca(Import to library) → Seleccionas la imagen Avión. Regresa nuevamente al archivo de flash para continuar con la animación. New Layer 28 Vamos a importar a biblioteca un objeto para no dibujarlo.Fecha de Elaboración:__________ Fecha de Revisión: ____________ 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). 27 Inserta un nuevo Layer. mueve la bicicleta del otro 25 Presiona CTRL + ENTER para que puedas ver como quedo tu animación. 26 Antes de iniciar la nueva animación en el mismo archivo vamos a poner el candado al Layer 3. Profa: Juanita Bañuelos Rivera .

Profa: Juanita Bañuelos Rivera . arrástralo y déjalo en la parte superior de la escena. En la parte del cielo.Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 29 Da un clic en el Layer 4. (Create Classic Tween). 30 Da clic derecho en el fotograma 1 y selecciona la opción de Crear Interpolación Clásica. fotograma 1 y en el panel de lado derecho deberá estar en biblioteca (Library) el avión.

34 Posteriormente da un clic en el icono del lápiz que está en la barra de herramientas. 35 En la barra de propiedades asegúrate de tener el tipo de línea normal (HairLine) Profa: Juanita Bañuelos Rivera .Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 31 Da un clic en el fotograma 80 y presiona la tecla F6. (Add Classic Motion Guide). 33 Se coloca una capa mas con la guia da un clic en el fotograma 1 del Layer de la Guía de movimiento. Y cambia el tipo de línea con el icono que se encuentra al final de la barra de herramientas. Checa como el Layer 4 se disminuyó un nivel ya que va con la guía. 32 Da un clic derecho en donde dice Layer 4 y selecciona la opción Añadir guía de movimiento clásica.

Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 36 Ahora si vamos a dibujar la línea que seguirá el avión como se muestra en la figura. da un clic en el fotograma 80 del Layer 4 y mueve el avión al final de la línea. 37 Da un clic en el fotograma 1 del Layer 4 y coloca el avión al inicio de la línea. 38 Presiona CTRL + ENTER para que veas como va tu animación. Profa: Juanita Bañuelos Rivera .

401Inserta un nuevo Layer.gif al layer 5 fotograma 1 y colocalo en la parte del pasto. 41 Presiona clic derecho en el layer 5 y selecciona la opción de Create Motion Tween. New Layer 40 Arrastra la imagen de perro. Como se ve en la figura: Profa: Juanita Bañuelos Rivera .Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 39 Vamos a ponerle el candado al layer 4 y al layer de la guia.

Estando en este fotograma 20 mueve el perro a otra posición.Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 42 Presiona Ok al mensaje que se te muestre. 43 Aparecera una linea que podras mover por medio de los puntos para que tome el movimiento que tu quieras. 42 Da un clic en el fotograma 20 del layer 5 y presiona F6. Profa: Juanita Bañuelos Rivera .

Presiona CTRL + ENTER para que puedas ver la animación 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. dandole a la linea la orientación deseada. Da un clic en el fotograma 80 y presiona F6 y vuelve a mover el perro de posción. Profa: Juanita Bañuelos Rivera .Fecha de Elaboración:__________ Fecha de Revisión: ____________ Responsable:_________________ 44 Da un clic en el fotograma 40 y presiona F6 y vuelve a mover el perro de posición. 45 46 47 48 Da un clic en el fotograma 60 y presiona F6 y vuelve a mover el perro de posicion.

Sign up to vote on this title
UsefulNot useful