Practica Bicicleta

 

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 2

3

Abri Abrirr un un docu docume mento nto nuevo nuevo en Flas Flash h (INICIO → PROGRAMAS → ADOBE MASTER  COLLECTION CS5 → ADOBE FLASH CS5 ). En la columna CREATE NEW seleccionar y dar un clic a la opción Flash File (ActionScript 2.0).

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

Profa: Juanita Bañuelos Rivera

 

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

2

4

Dar un clic clic en eell Layer Layer 1, fotog fotogram ramaa 1 (fra (frame me 1) 1)

  5

Vamos a importar importar la imagen imagen para para que que en este momento momento no tengas tengas que dibujar. dibujar. En la la barra barra menú selecciona la opción de File – Import – Import to Library – Selecciona el archvio bicicleta.gif.

Profa: Juanita Bañuelos Rivera

3

 

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

6

En las las ventanas ventanas de lado lado derecho derecho da un un clic en library library para para que puedas ver las las imágenes imágenes importadas.

7

Primero Primero vamos vamos a crear crear el escenario escenario corresp correspondiente. ondiente. Selecciona Selecciona la la herrami herramienta enta rectángulo rectángulo de la barra de herramientas

8

y colócalo de la mitad hacia arriba para crear el cielo.

Vamos Vamos a cambiar cambiar el color color del cielo, cielo, selecci selecciona ona de la barr barraa de menú menú Windows – Color y obtendrás una barra como la siguiente cambiale la opción de solid a Linear Gradient.

               l           a           a                l      r      e                             lic                    tu           r            c           n                      ia                 l                      le                     pi                      b                zu                 F                 b           e                 am           a                 F           o                d      a                d           e           c           r                 C           a           a                   ot           r                      lo                       9 C                 D                 b                p a               o                9           c                #

Profa: Juanita Bañuelos Rivera

D     a   l      a       p     b     d      c   a    i     n    o   t     o   b     c   o    m    t     u   r    e     l      e     #      a     d      l      b     c    o    9     e    i       p   a      l      i     a    r    9     c       r    C      a      e    r    a    C      a   z    l          F      F      u   l       

A    l      c      p   i     o   s     e   r   c    c    n    d      a    u   n    u   r   s    t     u    o      c   l       s    o    r   a    s    b     e   l        o   t      c   u    b     i     r       y    i     c     g    o    a   l      t       e      c   u    e   s     r   s   o     c    e       p   a   r    n   o     t     o    m    a    d      s   a    a   n    d      e     e    � l      o   r    #      .  C      a     g   r   e   e    +    d     l       g   a    c    d      o    e     n   t     r   e     0     a    l      o     g    a      m    a     u    n    0     9     r    u    n      b     9     i       F      � d      F      o    n     l      e    

 

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

9

Checa Checa que los los tres tres colore coloress que coloca colocaste ste sean sean los sigui siguiente entes: s:

Estos son los colores que deberás tener.

10 Da un clic sostenido sostenido en el icono Free Transfor Transform m Tool y selecciona selecciona la opción de Gradient Gradient Transform Tool

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

Ve como como la posici posici de los tres colores se puede rotar para que  puedas darle una vista diferente al cielo. ciel o. R alo a tu gusto. gusto. Profa: Juanita Bañuelos Rivera

 

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

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

13 Si te salen los colores colores que anteriorment anteriormentee habíamos puesto puesto para el cielo cielo solamente los vamos 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 en el fotograma fotograma 80 y presiona presiona la tecla tecla de F5 (Esta tecla tecla se utiliza utiliza únicamente únicamente  para insertar frame que te permite visualizar hasta este fotograma el fondo) 15 Vamos a insert insertar ar un nuevo layer layer para hacer hacer la carrertera, carrertera, primero primero de lado izquierdo 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

 

Fecha de Elaboración:__________  Fecha de Revisión: ____________  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 dibuja un nuevo recuadro recuadro en color gris o café para para hacer el efecto efecto de la carretera. carretera. (Con herramienta rectángulo

).

17 Le vamos vamos a dibujar dibujar una línea línea punteada punteada en medio medio de la carrete carretera ra gris. Selecciona Selecciona el botón botón Línea de la barra de herramientas y en la barra de propiedades le cambias el tipo de línea a punteada. Antes de colocar la línea fíjate que las propiedades propiedades de ésta estén como sigue: Color de línea Ancho de línea  blanco de 2.

Tipo de línea  punteada 18 Y ahora si traza traza la línea como se muestra muestra en la figura: figura:

Profa: Juanita Bañuelos Rivera

 

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

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

20 Ahora si si vamos a realizar realizar la animación animación de la bicicleta. bicicleta. Inserta Inserta un nuevo Layer. Layer.

 New Layer 

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

22 En el fotograma fotograma 1 de Layer 3 donde está la bicicleta bicicleta pres presiona iona clic derecho derecho y selecciona la opción de Create Classic Tween.

Profa: Juanita Bañuelos Rivera

 

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

23 Da un clic en en el fotograma fotograma 80 y presiona presiona la tecla tecla F6 (Esta tecla tecla es para copiar copiar el objeto objeto que está en el fotograma 1 al fotograma 80). 24 Estando Estando en el fotograma fotograma 80 con el cursor de selección selección extremo de la carretera.

mueve la bicicleta bicicleta del otro

25 Pres Presio iona na CTRL + ENTER  para que puedas puedas ver como quedo tu animación. Regresa nuevamente al archivo de flash para continuar con la animación. 26 Antes de iniciar iniciar la nueva animación animación en el mism mismo o archivo vamos vamos a poner el candado al Layer  Layer  3.

27 Insert Insertaa un nuevo nuevo Layer Layer..

 New Layer 

28 Vamos a importar importar a bibliote biblioteca ca un objeto objeto para no dibujarlo. dibujarlo. En la barra barra de Menú → Archivo(File) → Importar (Import)→ Importar a biblioteca(Import to library) → Seleccionas la la imagen Avión.

Profa: Juanita Bañuelos Rivera

 

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

29 Da un clic en el Layer 4, fotograma 1 y en el panel de lado derecho deberá estar en  biblioteca (Library) el avión, arrástralo y déjalo en la parte superior de la escena. escena. En la  parte del cielo.

30 Da clic derecho en el fotograma 1 y selecciona la opción de Crear Interpolación Clásica. (Create Classic Tween).

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.

32 Da un clic clic dere derecho cho en en donde dice Layer 4 y selecciona la opción Añadir guía de movimiento clásica. (Add Classic Motion Guide).

33 Se coloca una capa capa mas con la la guia da un clic en en el fotograma fotograma 1 del Layer Layer de la Guía de movimiento.

Checa como el Layer 4 se disminuyó un nivel ya ue va con la uía.   34 Posteriormente Posteriormente da un clic en el icono del lápiz que está en la barra de herramientas. Y cambia el tipo de línea con el icono que se encuentra al final de la barra de herramientas.

35 En la barra de propiedades propiedades as asegúrate egúrate de tener tener el tipo de línea normal normal (HairLine) (HairLine)

Profa: Juanita Bañuelos Rivera

 

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

36 Ahora si vamos vamos a dibujar dibujar la línea línea que seguirá seguirá el avión como como se muestra muestra en la figura. figura.

37 Da un clic clic en el fotograma fotograma 1 del Layer Layer 4 y coloca el el avión al inicio de la línea, línea, da un clic en el fotograma 80 del Layer 4 y mueve el avión al final de la línea.

38 Presiona Presiona CTRL CTRL + ENTER para que veas veas como como va tu animación. animación. Profa: Juanita Bañuelos Rivera

 

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

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

401Inserta un nuevo Layer.

 New Layer 

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

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

Profa: Juanita Bañuelos Rivera

 

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

42 Presiona Ok al mensaje que se te muestre.

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

Profa: Juanita Bañuelos Rivera

 

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

44 Da un clic en el fotogra fotograma ma 40 y presiona presiona F6 y vuelve vuelve a mover el perro perro de posición, posición, dandole a la linea la orientación deseada.

45 Da un clic en el fotogra fotograma ma 60 y presiona presiona F6 y vuelve vuelve a mover mover el perro perro de posicion. posicion. 46 Da un clic en el fotogra fotograma ma 80 y presiona presiona F6 y vuelve vuelve a mover el el perro de posción. posción. 47 Presiona Presiona CTRL + ENTER ENTER para para que puedas puedas ver la animación animación completa completa 48 Por ultimo ultimo Inserta Inserta un nuevo nuevo layer y dibuja un sol en en la parte parte superior superior izquierda izquierda a dos colores. 49 Inserta Inserta un nuevo nuevo layer layer y dibuja unas nubes.

Profa: Juanita Bañuelos Rivera