Practicas Flash

5/13/2018 Practicas Flash - slidepdf.com

http://slidepdf.com/reader/full/practicas-flash 1/39

1

PRÁCTICAS DE FLASH MODULO II, SUBMODULO II

MODULO II, CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DEL SOFTWAREDE DISEÑO.

SUBMODULO 2, GENERACIÓN DE ANIMACIÓN CON ELEMENTOS MULTIMEDIA.

2011

ELABORO:L.I. GERARDO DEL JESÚS SEGOVIA PACHECOL.I. SANTIAGO DANIEL CHI UHU

19/01/2010



2

GOBIERNO DEL ESTADO DE CAMPECHECOLEGIO DE ESTUDIOS CIENTÍFICOS Y

TECNOLÓGICOS DEL ESTADO DE CAMPECHE

ÍNDICE

PRIMER PARCIALPRACTICA 1, ELEMENTOS DE FLASH ............................................................... 3

PRACTICA 2, PANELES ......................................................................................... 4

PRACTICA 3, CAJA DE HERRAMIENTAS .......................................................... 5

PRACTICA 4.1, CAJA DE HERRAMIENTAS 2 .................................................... 7

PRACTICA 4.2, CAJA DE HERRAMIENTAS 2 .................................................... 9

PRACTICA 4.3, CAJA DE HERRAMIENTAS 2 ................................................... 11

PRACTICA 5, CONVERTIR OBJETOS A SÍMBOLOS ......................................... 13

PRACTICA 6, IMPORTAR ARCHIVOS ................................................................. 15

SEGUNDO PARCIAL

PRACTICA 7, ANIMACIÓN FOTOGRAMA A FOTOGRAMA ........................... 17

PRACTICA 8, CAPAS .............................................................................................. 19

PRACTICA 9, INTERPOLACIÓN ........................................................................... 21

PRACTICA 10, CAPA GUÍA ................................................................................... 24

PRACTICA 11, MASCARA ..................................................................................... 24

PRACTICA 12, BOTÓN ........................................................................................... 29

PRACTICA 13, BOTÓN ANIMADO ....................................................................... 31

PRACTICA 14, MENÚ ............................................................................................ 34

TERCER PARCIAL

PRACTICA 15, MOVIE CLIP .................................................................................. 37



3



Práctica # 1 Nombre de la Práctica: ELEMENTOS DE FLASHCarrera: TÉCNICO EN INFORMÁTICA

Módulo: II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑOSubmódulo: II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

RECURSOS MATERIALES DE APOYO

COMPUTADORA SOFTWARE FLASH 8

DESARROLLO DE LA PRÁCTICA

1. Abre el software flash 8

2. Localiza en el menú archivo la opción ventana 3. Selecciona la opción Barra de Herramientas .4. Ahora Selecciona Principal 5. Con esto quedará activada la barra de Herramientas Principal .

De esta misma forma podremos obtener la barra de Edición y la barra de Control.

Caja de herramientas1 Localizamos en el menú archivo la opción Ventana2 Luego seleccionamos herramientas3 Con esto queda activada la caja de herramientas en casa de haberse desactivado.

DOCENTES L.I. GERARDO DEL JESÚS SEGOVIA PACHECOL.I. SANTIAGO DANIEL CHI UHU

Barra de Edición



4

GOBIERNO DEL ESTADO DE CAMPECHECOLEGIO DE ESTUDIOS CIENTIFICOS Y


Práctica # 2 Nombre de la Práctica: PANELESCarrera: TECNICO EN INFORMATICAMódulo: II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑOSubmódulo: II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA


COMPUTADORAS MACROMEDIA FLASH 8


Activacion de los paneles.

1. Para activar los paneles hay que iniciar la aplicación2. Posteriormente localizar dentro de los elementos del menú la opción Ventana.3. Luego elegimos el panel en el que deseamos trabajar.4. De manera automática los paneles se activaran.

Podemos encontrar diferentes paneles como son: Acciones Comportamiento Mezclador de colores

Muestras de color Acciones Propiedades Etc…


Mezclador de color

Transformar

Alinear



5



Práctica # 3 Nombre de la Práctica: CAJA DE HERRAMIENTAS

Carrera: TECNICO EN INFORMÁTICA



COMPUTADORAS MACROMEDIA FLASH 8

DESARROLLO DE LA PRÁCTICA1. Aros Olímpicos

Dibujar los aros olímpicos.

1 Seleccionamos la Herramienta Óvalo.

2 Trazamos 5 óvalos, para que sean perfectamente circulares, mantenemos pulsada la tecla Shift.

3 Una vez estén dibujados, seleccionamos el relleno de cada óvalo y pulsamos la tecla Suprimir para eliminarlo. (Igualmente

podíamos haber seleccionado el color "ninguno" y posteriormente creado los óvalos que hubieran aparecido sin color defondo)

4 Ahora seleccionamos los bordes de cada aro y le damos el color que queramos seleccionándolo en el Panel Mezclador deColores.

5 Ahora mueve cada aro hasta la posición deseada. Para mover un objeto, selecciona la Herramienta Selección, haz clic en el aroque quieras mover y arrástralo.



6

2. SATURNO

Vamos a dibujar un planeta parecido a Saturno

1 Seleccionamos la Herramienta Óvalo.

2 Creamos un óvalo

3 Eliminamos el borde, para ello, hacemos clic en él y pulsamos la tecla Suprimir.

4 Seleccionamos el Relleno del óvalo y abrimos el Panel Relleno.

5 Seleccionamos la opción Degradado Radial.

6 Pulsamos en y seleccionamos los colores que deseemos, (podemos añadir tantos colores como queramos y probar su efecto).

7 Dibujamos el anillo de saturno, por ejemplo creando otro óvalo con la forma adecuada.

8 Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por ejemplo, borramos parte del planeta como enla imagen.

9 Solapamos los 2 objetos dibujados, de modo que formen el dibujo que queramos.

DOCENTES L.I. GERARDO DEL JESUS SEGOVIA PACHECOL.I. SANTIAGO DANIEL CHI UHU



7



Práctica # 4.1 Nombre de la Práctica: ABEJA

Carrera: TECNICO EN INFORMATICAMódulo: II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑOSubmódulo: II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA



DESARROLLO DE LA PRÁCTICAAbeja

Haremos uso de las herramientas de la caja para crear una graciosa abeja1. Abre la aplicación de Flash

2. Elige un documento de Flash

3. Para iniciar crearas dos óvalos sin bordes lo más semejante al ejemplo.

4. Selecciona los objetos y en el menú modificar elije combinar objetos/unión.

5. Con esto ambos objetos se unirán y ahora formaran uno solo.

6. Ahora con ayuda del bote de tinta le colocaremos a ese grafico un borde completoquedando de la siguiente manera.

7. Ahora para que lo que hayamos hecho no se baya mezcle con los demáselementos que vamos a crear necesitaras agrupar estos elementos con ctrl+g.

8. Para la creación de los ojos de la abeja realizaras el mismo procedimientoque realizamos para la creación del cuerpo y al termino agrupa los elementosque componen al ojo. Posteriormente únelos al resto del cuerpo. Ahora tu figura debe de quedarde la siguiente manera.

9. Ahora crearemos las antenas del de la abeja para ello harás uso de laherramienta lápiz y de la herramienta ovalo para crear unas sencillas antenastrata de darle el color que tiene su cuerpo para obtener una buenacombinación, no olvides agrupar cada una de las antenas y posteriormente launes al resto del cuerpo. Deberá quedar así.

10. Bien nuestra abeja va tomando forma ahora le haremos su boca, para esta parte podrás haceruso del lápiz y luego darle curva a la línea, o puedes también utilizar la pluma.

11. Ahora vamos a crearle las franjas que distinguen a la abeja para ello utilizaras la herramienta



8

lápiz y le crearas la curva únicamente que la línea le tendrás que dar en supropiedad grosor de línea un tamaño más grande para que se visualice de lasiguiente manera.12. Bien nuestra abeja esta casi lista, le falta el aguijón, las alas y unas manos.

13. Para el aguijón dibuja un triangulo y modifícalo hasta obtener la forma

deseada, para las manos puedes usar el lápiz para darle la forma y usar suavizado.

14. Bien nos quedan únicamente las alas para ello necesitaremos dibujar unovalo, primero dibujaremos una sola ala y posteriormente mediante unacopia obtendremos la otra.

15. Dentro de ese ovalo ahora con ayuda del lápiz dibujaras unas líneas paradarle un toque final a esta ala.16. Ahora solo duplicaremos el ala para crear una copia, selecciona la copianueva del ala y dirígete al menú modificar/transformar/horizontalmente.

17. con esto el ala quedara en otra dirección agrupa las alas por separado yagrégalas al cuerpo.

18. Ahora ya tienes una abeja hecha en flash.




9



Práctica # 4.2 Nombre de la Práctica: MARIPOSA




DESARROLLO DE LA PRÁCTICALa mariposa

Haremos uso de las herramientas de la caja para crear unagraciosa abeja

1. Abre la aplicación de Flash


3. Para iniciar este grafico empezaras por crear un círculo sinborde con un relleno.

4. Agrupo el circulo para evitar que los gráficos se sobrepongas, y borres accidentalmente partedel dibujo.

5. Seguidamente crea clones y modifica el tamaño de cada unode ellos para obtener lo siguiente. Si lo requieres vete al finalpara ver la mariposa.

6. Bien coloquemos al grafico ojos boca y nariz para que bayateniendo forma.

7. para los ojos necesitaremos óvalos, para la boca una línea recta y para lanariz otro ovalo. Convierte la línea en una curva para formar la boca.

8. Bien a crear las antenas dos líneas curvas y dos óvalos en la partesuperior.

9. Para crear las sus alas lo harás con la ayuda del pincel elige un colorsemejante para dibujar con el pincel delinea una figura parecida al de lasalas únicamente te quedara la silueta. Con ayuda del bote de pinturarellenaras la figura resultante. Es importante que agrupes después de crearel ala.9. ahora le colocaremos algunos detalles al ala, para ello con ayuda delpincel crearas unas siluetas y las rellenaras y les quitaras su borde. Crearas

dos duplicados los ajustaras a los tamaños mostrados en el siguienteejemplo obteniendo lo siguiente.



10

10. Integra las alas al resto del cuerpo de la mariposa, trata de colocar las alas detrás del cuerpopara darle un buen efecto. Para ello utiliza organizar.

DOCENTES L.I. GERARDO DEL JESÚS SEGOVIA PACHECOL.I. DANIEL SANTIAGO CHI UHU



11



Práctica # 4.3 Nombre de la Práctica: GUACAMAYA





La guacamaya

Haremos uso de las herramientas de la caja para crear una guacamaya.1. Abre la aplicación de Flash


3. Para iniciar insertaremos un ovalo que será la cabeza de la guacamaya. Colócaleun fondo radial como muestra la siguiente figura. Agrupa este elemento.

4. Ahora para crear su pico crearemos un ovalo de nuevo pero mas pequeño. Y con

ayuda de la herramienta envoltura le iremos dando forma al pico de la guacamaya.No se te olvide agrupar este elemento.

5. Ahora nuestra guacamaya debe de tener el siguiente aspecto.

6. Seguimos con la creación de ojos de nuestra guacamaya, para ellonecesitaremos óvalos y líneas.

7. Como habrás notado nuestro dibujo esta tomando forma.

8. Bien toma el elemento del pico y crea un duplicado, hazlo mas pequeño a escalacomo muestra la siguiente figura.

9. crea un rectángulo grande guíate del ejemplo. Este será una vara en lacual esta sostenida la guacamaya.



12

10. agrégale el duplicado de la figura que reducimos anteriormente perotendrás que crear cinco duplicados más. Guíate del ejemplo.

11. Bien solo nos resta por hacer la cola, para ello solo haremos una yluego duplicaremos las otras dos, y les cambiaremos el color.

12. Crea dos círculos y sobreponlos de tal manera que queden de cómo elejemplo.

13. Solo tomaremos la parte intersectada de ambos circulos para elloretiraremos los bordes sobrantes, recuerda que aun no se han agrupadolos elementos asi que las lineas se pueden mover de maneraindependiente. Quedando de la siguiente manera.

14. al dibujo resultante lo adaptaremos para crear las plumas y previamentele colocaremos relleno. Dando como resultado.

15. Ahora agrupa cada una de las plumas y colócalas detrás de la

guacamaya quedándote una imagen de la siguiente manera.




13



Práctica # 5 Nombre de la Práctica: CONVERTIR OBJETOS A SIMBOLOS

Carrera: TECNICO EN INFORMÁTICA


RECURSOS MATERIALES DE APOYO Computadora Software Macromedia Flash 8


CREAR UN SIMBOLO Y ALMACENARLO EN LA BIBLIOTECA

Crear un símbolo de gráfico que nos permitirá destreza en una acción que será básica en la creación de animaciones.

1 Pulsamos en la barra de herramientas y selecciona la Herramienta Óvalo.

2 Dibujamos un óvalo en cualquier lugar del escritorio.

3 Seleccionamos la figura creada.

4 Abrimos el menú Insertar → Nuevo Símbolo... de la barra de menús.

Se desplegará una ventana como la de la figura.

5 En el campo Nombre introducimos el nombre de nuestro gráfico, por ejemplo "Mi Primer Símbolo ".

6 Seleccionamos la opción Gráfico en el apartado Comportamiento . Con esto le decimos a Flash que el nuevo símbolo será ungráfico.

7 Pulsamos Aceptar y ya tenemos nuestro primer símbolo gráfico creado.

Crear Símbolo

1 Crea una película con 1 fotograma con Archivo → Nuevo.

2 Para que el círculo no salga ovalado, selecciona la herramienta óvalo y mientras lo dibujas, mantén pulsada la tecla Shift.



14

3 Accede a Insertar → Nuevo Símbolo... o bien pulsa F8.

4 crea el símbolo y regresa al la escena principal.

5 Accede a Ventana → Biblioteca y busca el nombre que le diste al crearlo.

Insertar Instancia

1 Selecciona la opción Archivo → Nuevo.

2 Ve a Ventana → Bibliotecas Comunes → Botones y selecciona un botón cualquiera (para expandir las carpetas, haz clic con elbotón derecho sobre una de ellas y selecciona "Expandir Carpeta"). Arrastra el botón elegido hasta el escenario

3 Selecciona el símbolo, luego la herramienta y arrastra alguno de los puntos que aparecerán alrededor del botón.

4 Debes ver que has modificado sólo una instancia del símbolo, y no el símbolo en sí.

Duplicar Instancia

1 Haz clic con el botón derecho sobre la instancia que quieras duplicar y selecciona "Duplicar Instancia". Dale un nombre al duplicado(también puedes duplicar una instancia desde el panel Intercambiar Símbolo).

2 Accede a Ventana → Biblioteca y busca el nombre que le diste al duplicarlo.

Efectos sobre Instancias

1 Ve a Ventana → Biblioteca para abrir la Biblioteca y busca el nombre del duplicado. Arrástralo al escenario.

2 Abre el Panel Propiedades y selecciona en la pestaña Color Alfa e introduce en la casilla donde pone 100% un 40%

3 Como el de arriba tiene un efecto Alfa (Transparencia) permite que el botón situado bajo él se vea.




15



Práctica # 6 Nombre de la Práctica: IMPORTAR ARCHIVOS


RECURSOS MATERIALES DE APOYO COMPUTADORA SOFTWARE MACROMEDIA FLASH 8


IMPORTAR MAPA DE BITS

Para importar un archivo de Mapa de Bits alescenario haz clic en el menú Archivo → Importar → Importar a escenario.

Se abrirá el cuadro de diálogo de Importar, allídeberás seleccionar el formato de imagen quequieres importar seleccionándolo en el desplegable

Tipo. Luego navega por las carpetas hastaencontrarlo. Selecciónalo haciendo clic sobre él ypulsa el botón Abrir.

La imagen se incluirá en el escenario y estará listapara trabajar con ella.



16

IMPORTAR GRAFICO VECTORIAL.

Al igual que los mapas de bits, hay otros programasque trabajan con gráficos vectoriales como tambiénhace Flash 8.

Si queremos traer un archivo vectorial creado en otroprograma, por ejemplo Freehand, podemos hacerlode manera muy sencilla.

Simplemente accedemos al menú Archivo →Importar → Importar a escenario. A continuación,seleccionamos el tipo de archivo correspondienteal gráfico vectorial que queramos importar. Porejemplo FH11 del Freehand MX (11).

Pulsamos Abrir, y ya tenemos nuestro archivovectorial.

Este archivo sí lo podremos modificar internamenteya que Flash es capaz de hacer gráficos de estetipo.

Concretamente, el Freehand pertenece también aMacromedia, al igual que Flash, con lo que lacompatibilidad en este caso es total.




17



Práctica # 7 Nombre de la Práctica: ANIMACION FOTOGRAMA POR FOTOGRAMACarrera: TECNICO EN INFORMATICAMódulo: II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑOSubmódulo: II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

RECURSOS MATERIALES DE APOYO COMPUTADORAS SOFTWARE MACROMEDIA FLASH 8


DIBUJO DEL MUÑECO

1. cree un documento nuevo vacío.

2. Dibuje el cuerpo de un muñeco con pies parecido al de la figura a base de óvalos sin contorno rellenos con

un degradado de color azul utiliza la herramienta para las formas y para el relleno degradado

. Dibuja el cuerpo y los pies por separados. Luego los unirás.

3. Selecciona de manera individual cada óvalo y pulse Ctrl + G para que queden agrupados peroindependientes el uno del otro. Eso permitirá dibujar sobre ellos y superponerlos sin que se vean afectados.Sitúe cada elemento en el lugar correspondiente según la figura.

4. Configura la herramienta óvalo para crear círculos rellenos de color blanco y sin contorno. Dibuja uncírculo para simular uno de los ojos del muñeco y agrúpalo pulsando ctrl + G. Copia y pega el círculoblanco para crear otro junto al anterior.

5. Con el mismo procedimiento crea dos pequeños círculos negros para situarlos como pupilas para los ojosdel muñeco. No olvides agrupar cada círculo para que queden por encima de los otros objetos.

6. Con la herramienta lápiz junto con el modificador y ayudándote del panel trazo, crea unaespecie de antena de color rojo y trazo grueso para colocar en la cabeza de nuestro amigo. Puedes dibujar unay luego copiar, pegar y reflejar horizontalmente para crear la otra. No las agrupes aún.

7. Finalmente, completa las antenas con círculos rellenos con un degradado a tu gusto para simular una bola.Selecciona a la vez una bola y su antena y pulsa ctrl + G para crear un grupo con esos dos elementos. Hagalo mismo en la otra antena.



18

Bien ahora sitúate en el fotograma 2.

8. Ahora pulsa F6 para crear un nuevo fotograma clave que contendrá automáticamente lo mismo que elfotograma anterior.

9. Selecciona a la vez las dos pupilas de los ojos y llévalas hacia la derecha para simular que el muñecomira hacia ese lado. Utiliza las teclas para hacerlo con mayor precisión.

10. Seleccione el grupo correspondiente a la antena de la izquierda y elija la opción Rotar en el menúcontextual para visualizar los tiradores de rotación. Arrastre hacia abajo del tirador central izquierdo paradeformar la antena hacia abajo.

11. Haga lo mismo con la antena de la derecha.

12. sitúate en el fotograma 3 y pulsa F6 para crear un fotograma clave.

13. Selecciona de nuevo las dos pupilas y llévalas al centro para simular que el muñeco vuelve a mirarnosa nosotros.

14. Selecciona cada antena por separado y mediante la opción rotar arrastra hacia arriba del mismotirador que antes para devolver las antenas a su estado inicial.

15. Sitúate y pulsa F6 en el cuarto y último fotograma clave.

16. Selecciona las dos pupilas y llévalas a la izquierda para simular que ahora el muñeco mira hacia laizquierda.

17. Vuelve a deformar las antenas del mismo modo que hiciste en el paso 10 pero procura que quedenligeramente diferentes par que la animación no resulte repetitiva.

18. Bien, ya esta acabada la animación. Ahora solo falta ponerla en marcha y observar lo que sucede. Para ello, pulsa ctrl + Intro yse reproducirá la película.




19



Práctica # 8 Nombre de la Práctica: CAPASCarrera: TECNICO EN INFORMATICAMódulo: II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑOSubmódulo: II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA



CREAR UNA CAPA

1. Abre la herramienta flash

2. Crea un nuevo documento de flash

3. Nombra la capa con el nombre cielo, en esta capa crearas un rectángulo conrelleno azul de tal forma que simule el cielo, como fondo de nuestra animación.

4. Crea una nueva capa a la cual le asignarás el nombre mar, de igual maneradibujaras un rectángulo con un color azul.

5. ahora crea una tercera capa a la cual le pondrás como nombre olas, bien,ahora activa la herramienta pincel y dibuja una línea que te de el aspecto de una

ola, tu asígnale el degradado de lineal.

6. Crea de nuevo una capa nueva esta vez asígnale el nombre sol, aquídibujaras un circulo en la parte superior derecha a la cual le asignaras un colorde relleno utilizando algún degradado., y le eliminaras el borde al circulo.

7. Ahora bien crea una capa mas con el nombre Gaviotas, aquí dibujaremosunas gaviotas, como veras estamos dibujando un mar con sol eimplementaremos las gaviotas para complementar el paisaje y posteriormenteanimarlo. Para crear las gaviotas utilizaremos la herramienta pincel, selecciónalay dentro de sus propiedades elige la opción más pequeña del pincel y elige deltipo de pincel el biselado que es en diagonal, la última opción, con esto iras

creando las gaviotas dibuja un numero de gaviotas en el horizonte, paraterminar esta parte.



20

8. Crea una capa mas y colócale el nombre barco, aquí dibujaras un barcocon las herramientas básicas, utilizando la herramienta línea dibuja la figuradel barco ahora que has creado la figura rellénalo de color café o algún otrocolor de tu preferencia, ahora crea el mástil donde se colocará la bandera,para crear la bandera utilizarás la herramienta polystar, una vez que hallascreado la bandera le colocaras un relleno con degrado lineal.

9. Ahora una vez creadas las capas con sus respectivos gráficos el fotogramadeberá quedar de la siguiente manera. De igual forma tus capas se visualizarancomo se muestra en el ejemplo, checa que el orden de tus capas sea como semuestran en la figura, esto para que no se traslapen tus gráficos.

10. Ahora bien una vez terminado el fotograma con sus respectivascapas procederemos a la animación de nuestros gráficos, sitúateen el fotograma número 10 para crear fotogramas clave o en sudefecto fotogramas intermedios. Una vez situado en el fotograma 10a las capas cielo, mar y olas, les crearas fotogramas intermediosdebido a que no queremos que estos gráficos cambien. Para lascapas gaviotas y barco crearemos fotogramas claves ya que estosgráficos sufrirán cambios durante la película.

11. Una vez creado el fotograma clave en las capas gaviotas ybarco modificaremos estos gráficos para su posterior animación.Mueve el barco que se encuentra en la capa barco, un poco haciadelante e inclínalo, de igual manera mueve las gaviotas de la capa gaviotas en otras posiciones.

12. Repite la operación en el fotograma 20 y 30, de tal manera que tulínea del tiempo quede como se muestra en el ejemplo de la figura.

13. A continuación vamos a realizar la animación, para ello vas a darle

clic derecho sobre el fotograma 1 de la capa barco y seleccionarascrear interpolación de movimiento, lo mismo realizaras para elfotograma 1 de la capa gaviotas. Los fotogramas sol, olas mar ycielo quedan sin modificación alguna.

14. Seguidamente crearemos las interpolaciones para los fotogramas10 y 20, seguirás las instrucciones del paso 13.

15. Después de haber hecho todos los pasos indicados tu línea deltiempo debió haber quedado de la siguiente manera.

16. Nada mas nos queda probar nuestra animación creada en capas y con la herramienta interpolación de movimiento.




21



Práctica # 9 Nombre de la Práctica: INTERPOLACION




CREACIÓN DE LAS BOLAS.

1. Cree documento nuevo con las dimensiones por defecto y una velocidad de reproducción de 25 fps.

2. Con la orden insertar/nuevo símbolo cree un símbolo gráfico denominado “bola”.

3. Selecciona la herramienta y prepare los selectores de color para dibujar sin contorno y con un

relleno degradado de color gris.4. Dibuja en el centro de la pantalla una circunferencia de unos 30 punto de diámetro.

5. Con la herramienta haga clic en el cuadrante superior izquierdo del círculo para descentrar el brillo del relleno.

CREACIÓN DE LA SOMBRA.

6. Con la orden Insertar/ Nuevo símbolo cree un símbolo gráfico denominado “bola sombra”.

7. Abre la biblioteca y arrastre al centro de la pantalla una instancia de la bola. Centre las dos crucecillas.

8. Selecciona la herramienta y prepara los selectores de color para dibujar sin contorno y con unrelleno de color negro.

9. Dibuja una elipse horizontal de 35 x 7 puntos y sitúala por debajo de la bola como si fuera su sombra proyectada en el suelo.



22

CREACIÓN DE LA PRIMERA INTERPOLACIÓN.

Vas a crear una interpolación en la que una instancia dela bolla aparecerá por la parte superior izquierda de laescena y se desplazará hasta el centro a la vez queaumenta de tamaño para simular que se acerca.

10. Renombra la capa actual de la escena como “bolaizquierda”.

11. Selecciona el primer fotograma y desde la bibliotecaarrastra una instancia del símbolo bola sombra que hascreado antes. Sitúala en el extremo superior izquierdo dela escena pero por fuera de esta.

12. Selecciona el primer fotograma y crea unainterpolación de movimiento.

13. Selecciona el fotograma 30 y pulsa F6 para acabar dedefinir la interpolación.

14. Con el fotograma 30 seleccionado arrastra la bolahacia el centro de la escena.

15. Escala con el ratón Escalar el contenido delfotograma 30 hasta que tenga un tamaño de unos 115puntos de altura.

CREACIÓN DE LA SEGUNDA INTERPOLACIÓN.

Ahora vamos a crear la interpolación que simularáque las bolas salen rebotadas tras colisionar.

16. Selecciona el fotograma 30 y crea una nuevainterpolación de movimiento a partir de ahí.

17. Selecciona el fotograma 60 y pulsa F6 paraconcluir esta segunda interpolación.

18. Con el foto grama 60 seleccionado arrastra labolla hacia el borde inferior izquierdo de la escena yescala su tamaño hasta que ocupe unos 170puntos de anchura. Si es necesario recoloque labola para evitar que se salga de la escena.

19. Reproduce la animación y observa cómo la bolase acerca al centro de la pantalla a gran velocidadpero luego, cuando se supone que ha rebotado,recorre el camino lentamente. Como ya debesimaginar, eso sucede porque la segundainterpolación utiliza 30 fotogramas igual que laprimera pero la bola recorre aquí menos distancia.



23

CREACIÓN DEL CHOQUE DE LAS BOLAS

La simulación del choque de las bolas consiste en crear otracapa en la que se ubicarán las dos interpolaciones creadaspero de forma simétrica.

20. Pulsa en para crear una nueva capa y denomínalabola derecha.

21. Selecciona todas las interpolaciones de la otra capa, cópialas con la orden copiar fotogramas y pégalas en la nueva capa a partirde su primer fotograma.

22. como habrán aparecido fotogramas indeseados mostrando una línea discontinua. Arrastra del último de estos fotogramas hacia laizquierda hasta depositarlo sobre el primer fotograma clave que encuentre. Ahora dispones de dos capas con las mismasinterpolaciones superpuestas, con lo cual, si se reproduce la película no se observará ninguna diferencia. Se trata, pues, de crear laversión simétrica de la interpolación de la segunda capa.

23. Selecciona el primer fotograma de la segunda interpolación y arrastra la bola hasta el extremo derechode la escena por fuera de ésta para que las bolas queden simétricas n su comienzo.

24. Selecciona ahora el fotograma 30 de la segunda capa y mueve un poco hacia la derecha la bola paravisualizar la de la otra capa. Vaya arrastrando con los cursores hasta que ambas bolas queden en contacto.

25 Seguidamente, selecciona las dos bolas a la vez y céntralas en la escena horizontalmente.

26 Finalmente, selecciona el fotograma 60 de la segunda interpolación y arrastra la bola que contiene hasta el extremo derecho de laescena para que las bolas queden simétricas en su fase final.

27 Reproduce la película pulsando Ctrl + intro y observe el efecto conseguido.

DOCENTE L.I. GERARDO DEL JESÚS SEGOVIA PACHECOL.I. SANTIAGO DANIEL CHI UHU



24



Práctica # 10 Nombre de la Práctica: CAPA GUÍA




1. Inicia Flash

Creación de la pelota.

2. Dibuja un círculo con contorno y, mediante la herramienta lápiz y con el modificador suavizar, traza unaslíneas verticales dentro del círculo para dividirlo en tres partes.

3. Selecciona todo el dibujo y en el panel propiedades cambia el tamaño de la línea a numero 2.

4. Selecciona por separado cada uno de los tres rellenos que han quedado en la pelota y aplícales rellenoa cada uno con un color diferente para darle un aspecto de pelota de playa.

5. Ahora agrupa todos los elementos de la pelota.

Creación de movimiento

6. sitúate en el fotograma 40 y crea un fotograma clave.

7. A continuación colócate en el fotograma 1 y crea una interpolación de movimiento.



25

Creación de la Trayectoria.

8. Haz clic en el icono de guía de movimiento.

9. Mediante la herramienta lápiz o línea y el modificador suavizartraza un camino que intente reproducir el que deberá seguir lapelota cuando aparezca en escena, es decir una serie de botes,

cada uno de los cuales debe ser menor que el anterior hasta queya no bote más.

10. No importa que el trazo rebase los límites de la escena, yaque, de ese modo, la pelota aparecerá y desaparecerá de laescena.

11. Tampoco importa el tamaño del trazo pero es preferible que nosea tan ancho.

12. Bloquea la capa de guía para que no se pueda editar, sitúate en el fotograma 40 y crea un fotogramaclave.

Colocación de la pelota en los lugares adecuados.

13. Activa la orden Ver/Ajuste/Ajustar objetos.

14. Selecciona el primer fotograma y con la herramienta selección arrastra la pelota hasta que su puntocentral se encaje con el principio de la línea.

15. Selecciona el último fotograma y arrastra igualmente la pelota hasta que su centro coincida con el finalde la línea trazada.

16. Reproduce la película pulsando ctrl+Intro verás como la pelota recorre el camino descrito simulandouna serie de botes.

Simulación de rotación de la pelota.

17. Ahora selecciona el primer fotograma de la capa pelota y en el panel propiedades localiza la opción yelige horario colócale 6 veces. Esto es para crear una simulación de vueltas sobre si misma durante laanimación.




26



Práctica # 11 Nombre de la Práctica: MASCARA.Carrera: TECNICO EN INFORMATICAMódulo: II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑOSubmódulo: II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA



1. Inicia Flash

2. Empezaremos por crear un fondo base para nuestrasiguiente animación, bien, selecciona la herramientarectángulo y dibuja un rectángulo de tal forma que abarquelo largo de el fotograma checa el ejemplo.

3. A continuación insertarás sobre el grafico tu nombre perotendrás que realizarlo de la siguiente manera.

4. Primero insertarás la primera letra y le asignaras el colorde tu preferencia. Bien una vez colocada la letra colócaleuna línea guía para que las demás letras estén alineadas.

5. una vez creada la primera letra realiza el mismo procesopara las posteriores letras de tu nombre.

6. Al terminar tu nombre deberá de quedar de la siguientemanera.

7. Ahora crearemos una capa máscara, para lo cual harás losiguiente, crea una máscara normal y posteriormente haz

clic derecho sobre ella y selecciona la opción máscara.

8. Cuando se cree la capa máscara aparecerán bloqueadasambas capas, desbloquéalas para que puedas trabajar con ellas.

9. Tus capas deberán quedar de la siguiente manera:

10. Selecciona únicamente la capa mascara para crear el

siguiente efecto.



27

11. Dibuja un círculo que logre cubrir el alto de lasletras, y colócalo fuera del área del fotograma como sedetalla a continuación.

12. Bien ahora ya tenemos objetos en ambas capas, lo

siguiente será la creación de fotogramas, bien para lacapa donde se encuentra tu nombre solo se crearáfotograma intermedio en el fotograma 40, y para lacapa máscara crearás un fotograma clave en elfotograma 40 respectivamente.

13. En la capa máscara haremos lo siguiente una vezcreado el fotograma clave tendrás que situar el circuloal extremo opuesto del primer Fotograma como semuestra a continuación.

14. Como siguiente paso crearas unainterpolación de movimiento en la capa máscarapara crear un efecto de máscara.

15. Para lo cual te tendrás que situar en elfotograma 1 de la capa máscara y clic derecho yelegir crear interpolación de movimiento. Ahoratus capas y la línea del tiempo se verán de lasiguiente manera.

16. Ahora si ejecuta la película.

17. A continuación vamos agregarleun efecto más a la animación.Localiza la línea de tiempo yarrástrala hasta que tu círculo hayapasado la primera letra como semuestra en la siguiente figura.

18. Sitúate en el fotograma 1 de lacapa nueva y selecciona el fotogramauno y arrástralo hasta que el puntoque aparece en el fotograma se corrahasta donde se encuentra tu línea detiempo.



28

19. Una vez ubicados ahí inserta una nueva letraen este caso la N y sobreponla sobre la que yaexiste. Cámbiele el color a uno diferente deloriginal.

20. Mueve la línea de tiempo y veras que elcírculo se mueve de nuevo, cuando hayasobrepasado la segunda letra harás lo siguiente,en el fotograma en el que te encuentras crea unfotograma clave para la capa 3. Esto paraconservar la letra anterior e insertar una nueva.

21. Realizaras ese proceso hasta que se acabe tunombre de tal forma que tu animación quedara dela siguiente manera.

22. Y tu línea de tiempo se vera de la siguientemanera.

23. Ahora ya tienes una animación con máscarasencilla y con un buen efecto.




29



Práctica # 12 Nombre de la Práctica: BOTON




CREAR UN BOTÓN

Vamos a comenzar creando el botón que provocará la transformación del objeto en texto.

1. Selecciona la opción insertar/Nuevo símbolo. En la ventana que se abrirá introduzca botón en la casilla Nombre y seleccionebotón. Eso te llevará a una pantalla dedicada exclusivamente a la creación del botón.

2. con la herramienta dibuja un círculo en el centro de la pantalla. Selecciona el contorno del círculo y elimínalo. Selecciona el

círculo y asígnale color azul mediante la herramienta relleno de la paleta lateral de herramientas.

3. Con el circulo seleccionado, activa el panel información ubicado en el menú ventana/información.

4. La zona superior derecha del panel información muestra unos pequeños cuadritos pequeños. Marca el cuadrito del centro eintroduce el valor 0 en cada una de las casillas X y Y. con esta operación habrá centrado el circulo justo en el eje de coordenadas(0,0). Igualmente, las casillas Ancho –w- y alto H ajusta un valor de 100 para dotar al círculo de una tamaño de 100 píxeles dediámetro.

5. Deselecciona el círculo y selecciona la herramienta texto . Seguidamente pulsa color de relleno en la barra lateral de

herramientas y selecciona un color que resalte sobre el azul, por ejemplo el color amarillo.6. Escribe la palabra PULSA en cualquier lugar de la pantalla. Haga clic sobre el texto para seleccionarlo y

abre el panel de caracteres de texto pulsando . Cambia el tamaño a 25 y el tipo de letra Arial Black.

7. Con la herramienta de selección arrastra el texto hasta depositarlo centrado sobre el circulo.

Bien ya esta definido el botón cuando esta en reposo.



30

8. Ahora haz clic sobre el segundo fotograma para seleccionarlo y pulsa F6 para crear un nuevo fotogramaclave. Deselecciona el círculo haciendo clic en un lugar libre de la pantalla.

9. Este segundo fotograma del botón es el que contendrá el aspecto del botón cuando se pase el cursor de lratón por encima. Aumenta el tamaño del texto en 32, centra el texto en el círculo arrastrándolo con el ratón omoviéndolo con las teclas de cursor.

10. Ahora crearemos el tercer fotograma, que mostrará el aspecto del botón cuando se haga clic sobre él. Paraello, selecciona y pulsa F6 para convertirlo en un nuevo fotograma clave.

11. Selecciona únicamente el círculo y cambia el color mediante el panel mezclador, haz clic en el icono derelleno y elige el color, por ejemplo rojo.

12. Vamos a agrandar el círculo con objeto de que al hacer clic sobre el botón. Además de que cambie de colorse haga más grande. Para eso selecciona el círculo y en el panel información asígnale un tamaño de 120.

13. Ahora cambiaremos el texto pulsa por un O.K.

14. Selecciona el texto y cambia las propiedades como: color, tamaño y tipo de letra.

15. Bien con esto se ha concluido el botón. Pulsa en la pestaña Escena para volver a la escena principal y arrastre a ella desde labiblioteca el botón recién creado.




31



Práctica # 13 Nombre de la Práctica: BOTON ANIMADO




CREAR UN BOTÓN ANIMADO.

En esta ocasión crearemos un botón animado, para lo cual tendremos que elaborar previamente 3 clips de película para lo cualdesarrollaremos a continuación.

1. Abre la aplicación de Flash

2. Elije un documento de flash.

3. Ahora para iniciar elige menú insertar/símbolo y selecciones la opción clip de película y le asignas el nombre Reposo, que será elclip para el primer estado del botón.

4. Ya en la biblioteca inserta un círculo sin borde y de color rojo, ajusta sus propiedades para que quede con undiámetro de 120 píxeles. Ahora ajusta en las propiedades X y Y para que quede con los datos 0 para que quede justo en el centro ó en su defecto ajústalo manualmente de tal forma que el centro del circulo quede alineado conla cruz.

5. Bien ahora crea un fotograma clave f6 en el fotograma 10 y cambia de color el relleno del círculo por unoverde.

6. Seguidamente selecciona el fotograma 1 y te vas a propiedades del fotograma y seleccionas la opción animar/forma, debe dequedar tu línea de tiempo con un sombreado verde con una fecha indicando latrayectoria.

7. Ahora crea un fotograma clave nuevo en el fotograma 20, cambia de nuevo decolor de relleno por un rojo.

8. regresa al fotograma 10 y selecciónalo, elige propiedades y selecciona en laopción animar forma.

9. tu línea de tiempo debió haber quedado de la siguiente manera.

10. para comprobar el clip, regresa a la escena 1 e inserta el clip en el fotograma, ahora ejecuta la película, el clip lo que hace escambiar de color.

11. Bien hemos acabado con lo que será nuestro primer estado del botón.

12. Ahora iniciaremos con el siguiente clip para el segundo estado del botón, aquí crearemos una especiede ondas alrededor del circulo.

13. Para ello volvemos a seleccionar menú/insertar/símbolo y eliges la opción clip de película, asígnale elnombre sobre.



32

14. Bien inserta un círculo sin contorno y con relleno en color verde, ajusta las propiedades para que el círculo quede de 120 píxelesde diámetro y que quede alineado justo con la cruz.

16. crea una capa nueva con el nombre ondas.

15. Vas a crear un círculo en la capa nueva pero en esta ocasión sin relleno y con contorno en color negro.

16. El círculo nuevo ajusta sus propiedades para que quede de un diámetro de 130 píxeles de diámetro, yque quede alineado con la cruz. Se vera de la siguiente forma.

17. Ahora procederemos a la animación de este elemento. De la capa ondas crea un fotograma clave enel fotograma 20, estando en el fotograma 20 cambia las propiedades del círculo que solo tiene contornopara ajustarlo a un tamaño de 160 píxeles de diámetro.

18. Bien selecciona el fotograma 1 de la capa ondas, y en propiedades ajusta en la opción animar aforma, tu línea de tiempo debió haber quedado sombreado en color verde y con la flecha indicando latrayectoria.

19. Con la capa del círculo con relleno solo nos resta crearle un fotograma intermedioen el fotograma 20.

20. configura la animación del clip a 25 fotogramas por segundo.

21. Aquí hemos terminado con el segundo clip que nos servirá para el segundo

estado del botón.22. Ahora regresa a la escena 1 y inserta el clip de sobre en el fotograma y prueba lapelícula. El clip debe funcionar como una onda.

23. El siguiente clip es para el tercer estado del botón, para ello vuelve a seleccionar menú/insertar/símbolo yelige clip de película, asígnale en nombre presionado.

24. inserta un circulo sin borde y con relleno en color gris con degradado. Ajusta sus propiedades para quetenga un diámetro de 120 píxeles de diámetro y se alinea con la cruz.

25. Bien crea un fotograma clave en el fotograma 20.

26. Seleccionado el fotograma 20 elimina el círculo del fotograma e inserta en su lugar una estrella de 5 lados

con contorno en color negro y relleno en color rojo con degradado, ajusta sus propiedades para que tenga undiámetro de 130 píxeles y alineado con la cruz.

27. Ahora selecciona el fotograma 1 y ajusta las propiedades en animar y selecciona forma, tu línea de tiempoquedara sombreado en color verde con una flecha indicando la trayectoria.

28. Bien ya finalizado este clip solo resta probarlo, para ello regresa a la escena 1 y arrastra tu clip alfotograma y pruébalo, la animación que se creo es una interpolación de forma que hace que cambie de círculoa una estrella.

29. Después de haber creado los tres clipes de película ahora crearemos el botón.

30. Actualmente tu biblioteca debe contener los siguientes clipes.



33

31. Bien ahora crearemos el botón para ello selecciona menú/insertar/símbolo y elige botón asígnale el nombre botón animado.

32. Ahora ubica la biblioteca pues de ahí tomaremos los elementos para generar el botón animado.

33. En el botón de reposo realizaras lo siguiente: arrastra de la biblioteca el clip reposo y ajústalo para que quede alineado con lacruz.

34. Ahora crea un fotograma clave para el estado sobre y arrastra en él el clip sobre solo checa que quede alineado con la cruz.

35. Seguidamente crea un fotograma clave para el estado Presionado, y arrastra en él el clippresionado ubicado de igual forma en la biblioteca.

36. Ya tenemos el botón creado ahora regresa a la escena 1

37. Y corrobora que en tu biblioteca se encuentren los siguientes elementos.

40. Bien ya que estamos en la escena principal, borra cualquier elemento que halla en él einserta el elemento botón que se encuentra ubicado en la biblioteca.

41. Ya hemos creado el botón, animado, como habrás apreciado tuvimos que crear tres clip de película para llegar a este elemento,esto quiere decir que podemos realizar múltiples combinaciones para crear diferentes elementos en flash la única limitante es tuimaginación.

42. Prueba la película y corrobora que realmente el botón esta animado.




34



Práctica # 14 Nombre de la Práctica: MENUCarrera: TECNICO EN INFORMATICAMódulo: II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑOSubmódulo: II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

RECURSOS MATERIALES DE APOYO COMPUTADORAS BOCINAS SOFTWARE MACROMEDIA FLASH 8


Menú en flash

1. Abre la aplicación de flash.

2. Bien en esta ocasión crearemos un menú que nos de tres opciones de animación de flash como son: interpolación de movimiento,Interpolación de Forma y Capa guía.

3. Para iniciar crea tres botones con sus respectivos estados, agrégale a cada botón en la parte inferior la opción a la quecorresponde.

4. Cuando crees los botones agrégale un efecto de cambio de color entre el estado de reposo y el estado de sobre.

4. Una vez creados los botones, en el fotograma 1 vas a crear una especie de pantalla para crear tu menú, y posteriormente pasarastus botones al fotograma.

5. Tu fotograma 1 deberá tener el siguiente aspecto, inserta el titulo Macromedia Flash8 y en la parte inferior tú nombre.



35

6. Nombra a tu capa Menú.

7. Ahora inserta una nueva capa y nómbrala Marco1.

8. Bien en esta capa sitúate en el fotograma 2 y da clic derecho para insertar un fotograma clave vacio.

9. En el crea un marco para la animación que vamos a crear.

10. Ahora inserta una nueva capa que llamaras I. Movimiento.

11. Inserta un círculo y colócale el color de fondo que desees. Tu capasmarco1 y I. de movimiento quedaran de la siguiente manera en el fotograma 2.

12. Ahora vamos a crear la interpolación de movimiento de este objeto.

13. Para iniciar crearemos un fotograma intermedio del marco hasta elfotograma 30, ya que no tendrá un cambio alguno.

14. En la capa Movimiento crea un fotograma clave en el fotograma 15 ycambia de posición el círculo hacia la parte media inferior.

15. Seguidamente crea la interpolación de movimiento dando clic derecho alprimer 2 de la capa movimiento y elige interpolación de movimiento.

16. Ahora crea un fotograma clave sobre la misma capa en el fotograma 30 ysitúa el círculo en la esquina superior derecha.

17. Ahora repite el proceso del paso 15 para crear la interpolación de movimiento.

18. Tu línea de tiempo deberá quedar con el siguiente aspecto.

19. Para continuar crea una nueva capa con el Nombre I. Forma enla que crearemos la siguiente animación.

20. Inserta un fotograma clave vacio en el fotograma 31 de esta capapara crear nuestra interpolación de forma.

21. Inserta un polígono en forma de estrella de 5 lados, colócale un relleno radialrojo, y el borde en tamaño 4 y el estilo curveado.

22. Bien ya terminaste de realizar el trazo, ahora crea un fotograma clave deesta capa en el fotograma 50.

23. Estamos en el fotograma 50, bien elimina la estrella que aparece en el y ensu lugar inserta un texto INFORMATICA, Tratando de que quede al centroasígnale el color que desees y a un tamaño no mayor al de la estrella.

24. Ahora en la capa marco vas a insertar un fotograma intermedio en elfotograma 50, esto para repetir el marco en la siguiente animación.

25. Regresamos a la capa I. forma y vamos a crear la interpolación de formapara ello hay que separar el texto, que se encuentra en el fotograma 50, bien la opción se encuentra realizando clic derecho sobre eltexto, pero si te percatas separamos en letras, ahora vuelve a dar clic derecho para que se conviertan en gráficos, con esto quedalisto.

26. Ahora regresa al fotograma 31 selecciónalo y visualiza las

propiedades y elige en la opción animación, forma. De maneraautomática se genera la animación, queda en color verde con unafecha como se detalla a continuación.

27. Hasta aquí tenemos listo dos animaciones nos falta una mas.

28. A continuación crea una capa con el nombre Animación guía.

29. Inserta un fotograma clave vacio en el fotograma 51.

30. Bien crearemos una capa guía para la capa animación guía dando clic en este icono



36

31. También inserta un fotograma calve vacio en la capa guía.

32. Selecciona la capa guía y en el fotograma 51 crea una línea que servirá de guía para laanimación.

33. Ahora sitúate en la capa Animación guía, dibuja un polígono Estrella e ilumínalo a tu gusto yverifica que el centro del polígono coincida con el inicio de nuestra línea guía.

34. Bien continuamos, ahora vas a crear un fotograma clave para ambas capas la Guía yAnimación Guía en el fotograma 70.

35. Regresa al fotograma 51 de la capa animación guía y da clic derecho para crear unainterpolación de movimiento.

36. regresa al fotograma 70 de la capa animación guía y mueve el polígono hacia el extremo dela línea guía.

37. Listo tenemos nuestras tres animaciones básicas, ahora nos resta realizar las aplicacionespertinentes para utilizar el menú.

38. Tu línea del tiempo debe estar de la siguiente manera.

39. Selecciona el fotograma 1 de la capa menú y ve a acciones y coloca el código stop(); para detener la película justo en el menú.

40. Selecciona el fotograma 30 de la capa I. movimiento, ve a acciones y coloca el código para detener la película como en el pasoanterior.

41. Repetimos el procedimiento pero para el fotograma 50 de la capa I. forma.

42. Repite de nuevo el paso 39 para el fotograma 70 de la capa animación guía.

42. Bien prueba la película y veras que se detiene en el menú principal.

43. El siguiente paso es asignarle a los botones el código correspondiente para que nos lleven a una determinada parte de lapelícula.

44. Regresa al fotograma 1 en la capa menú y haz clic derecho sobre el primer botón elije acciones y escribe el siguiente código en elárea.

on (press)

{ gotoAndPlay(2); }

45. Repite el procedimiento del paso 44 para el segundo botón, la única diferencia es que en gotoandplay le asignaras hacia elfotograma 31. Y lo mismo harás para el tercer botón, pero a este le asignaras el fotograma 51.

46. Con este código nuestro menú nos lleva hacia una parte de la película y se detiene, ahora necesitaremos crear botones deregreso al menú principal.

47. Inserta una capa nueva y nómbrala Regreso.

48. selecciona el fotograma 2 de esta capa y crea un fotograma clave vacio posteriormente crea un botón que nos servirá de regresoal fotograma1, utiliza el código del paso 44. Una vez asignado el código crea un fotograma intermedio hasta la el fotograma 70

49. Bien con estas accionesnuestra animación debióhaber quedado lista.

50. esta es la parte final dela línea del tiempo.




37



Práctica # 15 Nombre de la Práctica: MOVIE CLIP


RECURSOS MATERIALES DE APOYO COMPUTADORAS BOCINAS SOFTWARE MACROMEDIA FLASH 8


Creación del primer Clip de Película

1 Crea una nueva escena

2 Pulsa Ctrl+ F8 para crear un nuevo símbolo de clip de película.Asígnale el nombre “coche1”

3 En la pantalla de edición del clip, dibuja el elemento aanimar. En este caso dibuja este gracioso cochecito de

ambulancia.

4 Sitúa el objeto en el lado izquierdo de la pantalla.

5 Crea una interpolación de movimiento.

6 Selecciona el fotograma 40 y pulsa F6 para completar la interpolación.

7 Con el fotograma 40 seleccionado, use el cursor derecho junto con la tecla Mayús para llevar el objero hasta el lado derecho de lapantalla para que el objeto quede más o menos simétricamente ubicado con respecto al fotograma numero 1

8 Selecciona el fotograma 1 e inserta una acción stop() para evitar que el clip se reproduzca automáticamente.

9 Regresa a la escena principal pulsando en la pestaña Escena 1.

Creación del segundo clip de película

10 Pulsa Ctrl+ F8 para crear otro símbolo de clip de película. Asígnale el nombre “coche 2”

11 En la pantalla de edición del clip, dibuja el elemento a animar. Ahora importa el mismo dibujo pero reflejadohacia la izquierda para que el cochecito mire hacia el otro lado y cambiado de color.

12 Sitúa el objeto en el lado derecho de la pantalla.

13 Crea una interpolación de movimiento.

14 Seleccione el fotograma 40 y pulse F6 para completar la interpolación.

15 Con el fotograma 40 seleccionado, usa el cursor izquierdo junto con la tecla Mayús para llevar el objeto hasta el borde izquierdode la escena.



38

16 Selecciona el fotograma 1 e inserta una acción stop() para evitar que el clip se reproduzca automáticamente.

17 Regresa a la escena principal pulsando en la pestaña Escena 1.

Ubicación de las instancias en la escena y nombrado de las mismas

18 desde la escena principal, abra la biblioteca y arrastre el clip coche1 hasta depositarlo en el extremo superior izquierdo de laescena. Seguidamente, arrastre el clip coche 2 y llévalo al borde superior derecho de la escena.

19 Selecciona a la vez las dos instancias de los dos clips y alinéelas horizontalmente. Si es necesario, utiliza la orden Escalar-Scale para aumentar o reducir el tamaño delas instancias con objeto de adecuarlas al tamaño de la escena, es decir, que los coches nosean ni demasiado grandes ni demasiado pequeños.

20 Selecciona la instancia de la izquierda y pulsa enpropiedades para abrir el panel instancia. Asígnale el nombre coche1. Haz lo mismo con la instancia de la derecha y asígnale elnombre coche2.

21 Abre la biblioteca de elementos comunes con la orden Ventana/Bibliotecas comunes/Botones.

22 Abre la carpeta Playback Flat y arrastra a la escena los botones siguientes flat blue back, flat blue forward, flat blue play y flat blue

stop.

23 Alinee y distribuya los botones en la parte central de la escena.

Asignación de las acciones al botón Play

Ahora se trata de asignar a cada botón las acciones necesarias para que cumplan su cometido. Para asignar las acciones al botón dereproducción play haga lo siguiente:

24 Haz clic sobre él con el botón y selecciona Acciones para abrir el panel.

25 Haz doble clic sobre la acción Tell Target

26 En el campo destino escriba el nombre de instancia del clip a activar, es decir,coche1.

27 Haz doble clic sobre la acción Play, con eso le indicará el tipo de acción a aplicar alclip elegido, es decir, arrancarlo.

28 Sitúa el cursor en la última línea de expresiones, es decir, la que muestra el carácter}

y haga doble clic de nuevo sobre la acción Tell Target para agregar otra acción de estetipo que deberá ser ejecutada con el mismo botón.

29. En el campo destino escriba el nombre de instancia del clip a activar ahora, es decir,



39

coche 2.

30. Haz doble clic sobre la acción Play; con eso le indicará el tipo de acción a aplicar al segundo clip elegido, es decir, a rrancarlo.

31 Pulsa Ctrl + Intro y comprueba que al hacer clic sobre el botón play se inicia la reproducción de los dos clips.

Asignación de las acciones al resto de botones

El procedimiento para asignar las acciones las acciones al resto de botones es exactamente el mismo que se ha descrito. Lo únicoque cambia es el tipo de acción que aparece a continuación de las expresiones Tell Target. Recuerda que antes hemos colocadoPlay porque es lo que queríamos que sucediera con los dos clips al pulsar en el botón play. Así pues, programa cada botón segúnestas características:

Botón Stop: Debe detener la reproducción, así que la acción será Stop para los dos clips.

Botón Regresar: Debe hacer retroceder la reproducción fotograma a fotograma, así que la acción será Go to y con parámetro tipo =Fotograma anterior.

Botón Adelantar: Debe hacer avanzar la reproducción fotograma a fotograma, así que la acción será Go to y con el parámetro tipo=fotograma siguiente.

En la siguiente figura puedes ver el programa para cada uno de los botones mencionados.

32 Reproduce la película y observa como puedes controlar tanto el arranque como la parada de los clips y puedes reproducirlos pasoa paso en ambos sentidos. Si lo deseas, puedes agregar otros botones para, por ejemplo, llevar los clips directamente al principio o alfinal de la película.


Documents

Practicas Flash