Practicas Flash

2011
PRCTICAS DE FLASH
MODULO II, SUBMODULO II
MODULO II, CREACIN DE PRODUCTOS MULTIMEDIA A TRAVS DEL SOFTWARE DE DISEO. SUBMODULO 2, GENERACIN DE ANIMACIN CON ELEMENTOS MULTIMEDIA.
ELABORO: L.I. GERARDO DEL JESS SEGOVIA PACHECO L.I. SANTIAGO DANIEL CHI UHU
19/01/2010
GOBIERNO DEL ESTADO DE CAMPECHE COLEGIO DE ESTUDIOS CIENTFICOS Y TECNOLGICOS DEL ESTADO DE CAMPECHE
NDICE
PRIMER PARCIAL
PRACTICA 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 SMBOLOS ......................................... 13 PRACTICA 6, IMPORTAR ARCHIVOS ................................................................. 15
SEGUNDO PARCIAL
PRACTICA 7, ANIMACIN FOTOGRAMA A FOTOGRAMA ........................... 17 PRACTICA 8, CAPAS .............................................................................................. 19 PRACTICA 9, INTERPOLACIN ........................................................................... 21 PRACTICA 10, CAPA GUA ................................................................................... 24 PRACTICA 11, MASCARA ..................................................................................... 24 PRACTICA 12, BOTN ........................................................................................... 29 PRACTICA 13, BOTN ANIMADO ....................................................................... 31 PRACTICA 14, MEN ............................................................................................ 34
TERCER PARCIAL
PRACTICA 15, MOVIE CLIP .................................................................................. 37
Prctica # 1 Carrera: Mdulo: Submdulo:
Nombre de la Prctica: TCNICO EN INFORMTICA
ELEMENTOS DE FLASH
II CREACIN DE PRODUCTOS MULTIMEDIA A TRAVS DE SOFTWARE DE DISEO
II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORA SOFTWARE FLASH 8
DESARROLLO DE LA PRCTICA 1. Abre el software flash 8 2. Localiza en el men archivo la opcin ventana 3. Selecciona la opcin 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 Edicin y la barra de Control.
Barra de Edicin
Caja de herramientas 1 Localizamos en el men archivo la opcin Ventana 2 Luego seleccionamos herramientas 3 Con esto queda activada la caja de herramientas en casa de haberse desactivado.
DOCENTES
L.I. GERARDO DEL JESS SEGOVIA PACHECO L.I. SANTIAGO DANIEL CHI UHU
GOBIERNO DEL ESTADO DE CAMPECHE COLEGIO DE ESTUDIOS CIENTIFICOS Y TECNOLGICOS DEL ESTADO DE CAMPECHE
Nombre de la Prctica: PANELES TECNICO EN INFORMATICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO
COMPUTADORAS MACROMEDIA FLASH 8
DESARROLLO DE LA PRCTICA Activacion de los paneles. 1. Para activar los paneles hay que iniciar la aplicacin 2. Posteriormente localizar dentro de los elementos del men la opcin Ventana. 3. Luego elegimos el panel en el que deseamos trabajar. 4. De manera automtica 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
DOCENTES
Nombre de la Prctica: CAJA DE HERRAMIENTAS TECNICO EN INFORMTICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO
COMPUTADORAS MACROMEDIA FLASH 8
DESARROLLO DE LA PRCTICA
1. Aros Olmpicos
Dibujar los aros olmpicos. 1 Seleccionamos la Herramienta valo. 2 Trazamos 5 valos, para que sean perfectamente circulares, mantenemos pulsada la tecla Shift. 3 Una vez estn dibujados, seleccionamos el relleno de cada valo y pulsamos la tecla Suprimir para eliminarlo. (Igualmente podamos haber seleccionado el color "ninguno" fondo) y posteriormente creado los valos que hubieran aparecido sin color de
4 Ahora seleccionamos los bordes de cada aro y le damos el color que queramos seleccionndolo en el Panel Mezclador de Colores. 5 Ahora mueve cada aro hasta la posicin deseada. Para mover un objeto, selecciona la Herramienta Seleccin, haz clic en el aro que quieras mover y arrstralo.
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 opcin Degradado Radial. 6 Pulsamos en y seleccionamos los colores que deseemos, (podemos aadir 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 en la imagen. 9 Solapamos los 2 objetos dibujados, de modo que formen el dibujo que queramos.
DOCENTES
L.I. GERARDO DEL JESUS SEGOVIA PACHECO L.I. SANTIAGO DANIEL CHI UHU
Prctica # 4.1 Carrera: Mdulo: Submdulo:
Nombre de la Prctica: ABEJA TECNICO EN INFORMATICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORA SOFTWARE FLASH 8 DESARROLLO DE LA PRCTICA
Abeja Haremos uso de las herramientas de la caja para crear una graciosa abeja 1. Abre la aplicacin de Flash 2. Elige un documento de Flash 3. Para iniciar crearas dos valos sin bordes lo ms semejante al ejemplo. 4. Selecciona los objetos y en el men modificar elije combinar objetos/ unin. 5. Con esto ambos objetos se unirn y ahora formaran uno solo. 6. Ahora con ayuda del bote de tinta quedando de la siguiente manera. le colocaremos a ese grafico un borde completo
7. Ahora para que lo que hayamos hecho no se baya mezcle con los dems elementos que vamos a crear necesitaras agrupar estos elementos con ctrl+g. 8. Para la creacin de los ojos de la abeja realizaras el mismo procedimiento que realizamos para la creacin del cuerpo y al termino agrupa los elementos que componen al ojo. Posteriormente nelos al resto del cuerpo. Ahora tu figura debe de quedar de la siguiente manera. 9. Ahora crearemos las antenas del de la abeja para ello hars uso de la herramienta lpiz y de la herramienta ovalo para crear unas sencillas antenas trata de darle el color que tiene su cuerpo para obtener una buena combinacin, no olvides agrupar cada una de las antenas y posteriormente la unes al resto del cuerpo. Deber quedar as. 10. Bien nuestra abeja va tomando forma ahora le haremos su boca, para esta parte podrs hacer uso del lpiz y luego darle curva a la lnea, o puedes tambin utilizar la pluma.
11. Ahora vamos a crearle las franjas que distinguen a la abeja para ello utilizaras la herramienta 7
lpiz y le crearas la curva nicamente que la lnea le tendrs que dar en su propiedad grosor de lnea un tamao ms grande para que se visualice de la siguiente manera. 12. Bien nuestra abeja esta casi lista, le falta el aguijn, las alas y unas manos. 13. Para el aguijn dibuja un triangulo y modifcalo hasta obtener la forma deseada, para las manos puedes usar el lpiz para darle la forma y usar suavizado. 14. Bien nos quedan nicamente las alas para ello necesitaremos dibujar un ovalo, primero dibujaremos una sola ala y posteriormente mediante una copia obtendremos la otra. 15. Dentro de ese ovalo ahora con ayuda del lpiz dibujaras unas lneas para darle un toque final a esta ala. 16. Ahora solo duplicaremos el ala para crear una copia, selecciona la copia nueva del ala y dirgete al men modificar/transformar/horizontalmente. 17. con esto el ala quedara en otra direccin agrupa las alas por separado y agrgalas al cuerpo. 18. Ahora ya tienes una abeja hecha en flash.
DOCENTES
Nombre de la Prctica: MARIPOSA TECNICO EN INFORMATICA

La mariposa Haremos uso de las herramientas de la caja para crear una graciosa abeja 1. Abre la aplicacin de Flash 2. Elige un documento de Flash 3. Para iniciar este grafico empezaras por crear un crculo sin borde con un relleno. 4. Agrupo el circulo para evitar que los grficos se sobrepongas, y borres accidentalmente parte del dibujo. 5. Seguidamente crea clones y modifica el tamao de cada uno de ellos para obtener lo siguiente. Si lo requieres vete al final para ver la mariposa. 6. Bien coloquemos al grafico ojos boca y nariz para que baya teniendo forma. 7. para los ojos necesitaremos valos, para la boca una lnea recta y para la nariz otro ovalo. Convierte la lnea en una curva para formar la boca. 8. Bien a crear las antenas dos lneas curvas y dos valos en la parte superior. 9. Para crear las sus alas lo hars con la ayuda del pincel elige un color semejante para dibujar con el pincel delinea una figura parecida al de las alas nicamente te quedara la silueta. Con ayuda del bote de pintura rellenaras la figura resultante. Es importante que agrupes despus de crear el ala. 9. ahora le colocaremos algunos detalles al ala, para ello con ayuda del pincel crearas unas siluetas y las rellenaras y les quitaras su borde. Crearas dos duplicados los ajustaras a los tamaos mostrados en el siguiente ejemplo obteniendo lo siguiente. 9
10. Integra las alas al resto del cuerpo de la mariposa, trata de colocar las alas detrs del cuerpo para darle un buen efecto. Para ello utiliza organizar.
DOCENTES
L.I. GERARDO DEL JESS SEGOVIA PACHECO L.I. DANIEL SANTIAGO CHI UHU
10
Nombre de la Prctica: GUACAMAYA TECNICO EN INFORMATICA

La guacamaya
Haremos uso de las herramientas de la caja para crear una guacamaya. 1. Abre la aplicacin de Flash 2. Elige un documento de Flash 3. Para iniciar insertaremos un ovalo que ser la cabeza de la guacamaya. Colcale un fondo radial como muestra la siguiente figura. Agrupa este elemento. 4. Ahora para crear su pico crearemos un ovalo de nuevo pero mas pequeo. 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 creacin de ojos de nuestra guacamaya, para ello necesitaremos valos y lneas. 7. Como habrs notado nuestro dibujo esta tomando forma. 8. Bien toma el elemento del pico y crea un duplicado, hazlo mas pequeo a escala como muestra la siguiente figura.
9. crea un rectngulo grande guate del ejemplo. Este ser una vara en la cual esta sostenida la guacamaya.
11
10. agrgale el duplicado de la figura que reducimos anteriormente pero tendrs que crear cinco duplicados ms. Guate del ejemplo.
11. Bien solo nos resta por hacer la cola, para ello solo haremos una y luego duplicaremos las otras dos, y les cambiaremos el color.
12. Crea dos crculos y sobreponlos de tal manera que queden de cmo el ejemplo. 13. Solo tomaremos la parte intersectada de ambos circulos para ello retiraremos los bordes sobrantes, recuerda que aun no se han agrupado los elementos asi que las lineas se pueden mover de manera independiente. Quedando de la siguiente manera.
14. al dibujo resultante lo adaptaremos para crear las plumas y previamente le colocaremos relleno. Dando como resultado. 15. Ahora agrupa cada una de las plumas y colcalas detrs de la guacamaya quedndote una imagen de la siguiente manera.
DOCENTES
12
Nombre de la Prctica: CONVERTIR OBJETOS A SIMBOLOS TECNICO EN INFORMTICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO Computadora Software Macromedia Flash 8
CREAR UN SIMBOLO Y ALMACENARLO EN LA BIBLIOTECA
Crear un smbolo de grfico que nos permitir destreza en una accin que ser bsica en la creacin 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 Smbolo... de la barra de mens. Se desplegar una ventana como la de la figura. 5 En el campo Nombre introducimos el nombre de nuestro grfico, por ejemplo "Mi Primer Smbolo".
6 Seleccionamos la opcin Grfico en el apartado Comportamiento. Con esto le decimos a Flash que el nuevo smbolo ser un grfico. 7 Pulsamos Aceptar y ya tenemos nuestro primer smbolo grfico creado.
Crear Smbolo
1 Crea una pelcula con 1 fotograma con Archivo Nuevo. 2 Para que el crculo no salga ovalado, selecciona la herramienta valo y mientras lo dibujas, mantn pulsada la tecla Shift.
13
3 Accede a Insertar Nuevo Smbolo... o bien pulsa F8. 4 crea el smbolo 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 opcin Archivo Nuevo. 2 Ve a Ventana Bibliotecas Comunes Botones y selecciona un botn cualquiera (para expandir las carpetas, haz clic con el botn derecho sobre una de ellas y selecciona "Expandir Carpeta"). Arrastra el botn elegido hasta el escenario
3 Selecciona el smbolo, luego la herramienta
y arrastra alguno de los puntos que aparecern alrededor del botn.
4 Debes ver que has modificado slo una instancia del smbolo, y no el smbolo en s.
Duplicar Instancia
1 Haz clic con el botn derecho sobre la instancia que quieras duplicar y selecciona "Duplicar Instancia". Dale un nombre al duplicado (tambin puedes duplicar una instancia desde el panel Intercambiar Smbolo). 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. Arrstralo al escenario. 2 Abre el Panel Propiedades y selecciona en la pestaa 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 botn situado bajo l se vea.
DOCENTES
14
Nombre de la Prctica: IMPORTAR ARCHIVOS TECNICO EN INFORMATICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORA SOFTWARE MACROMEDIA FLASH 8
IMPORTAR MAPA DE BITS Para importar un archivo de Mapa de Bits al escenario haz clic en el men Archivo Importar Importar a escenario. Se abrir el cuadro de dilogo de Importar, all debers seleccionar el formato de imagen que quieres importar seleccionndolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Seleccinalo haciendo clic sobre l y pulsa el botn Abrir. La imagen se incluir en el escenario y estar lista para trabajar con ella.
15
IMPORTAR GRAFICO VECTORIAL. Al igual que los mapas de bits, hay otros programas que trabajan con grficos vectoriales como tambin hace Flash 8. Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand, podemos hacerlo de manera muy sencilla. Simplemente accedemos al men Archivo Importar Importar a escenario. A continuacin, seleccionamos el tipo de archivo correspondiente al grfico vectorial que queramos importar. Por ejemplo FH11 del Freehand MX (11). Pulsamos Abrir, y ya tenemos nuestro archivo vectorial. Este archivo s lo podremos modificar internamente ya que Flash es capaz de hacer grficos de este tipo. Concretamente, el Freehand pertenece tambin a Macromedia, al igual que Flash, con lo que la compatibilidad en este caso es total.
DOCENTES
16
Nombre de la Prctica: ANIMACION FOTOGRAMA POR FOTOGRAMA TECNICO EN INFORMATICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORAS SOFTWARE MACROMEDIA FLASH 8
DIBUJO DEL MUECO 1. cree un documento nuevo vaco. 2. Dibuje el cuerpo de un mueco 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 unirs. 3. Selecciona de manera individual cada valo y pulse Ctrl + G para que queden agrupados pero independientes el uno del otro. Eso permitir dibujar sobre ellos y superponerlos sin que se vean afectados. Site cada elemento en el lugar correspondiente segn la figura. 4. Configura la herramienta valo para crear crculos rellenos de color blanco y sin contorno. Dibuja un crculo para simular uno de los ojos del mueco y agrpalo pulsando ctrl + G. Copia y pega el crculo blanco para crear otro junto al anterior. 5. Con el mismo procedimiento crea dos pequeos crculos negros para situarlos como pupilas para los ojos del mueco. No olvides agrupar cada crculo para que queden por encima de los otros objetos.
6. Con la herramienta lpiz junto con el modificador y ayudndote del panel trazo, crea una especie de antena de color rojo y trazo grueso para colocar en la cabeza de nuestro amigo. Puedes dibujar una y luego copiar, pegar y reflejar horizontalmente para crear la otra. No las agrupes an. 7. Finalmente, completa las antenas con crculos 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. Haga lo mismo en la otra antena.
17
Bien ahora sitate en el fotograma 2. 8. Ahora pulsa F6 para crear un nuevo fotograma clave que contendr automticamente lo mismo que el fotograma anterior. 9. Selecciona a la vez las dos pupilas de los ojos y llvalas hacia la derecha para simular que el mueco mira hacia ese lado. Utiliza las teclas para hacerlo con mayor precisin. 10. Seleccione el grupo correspondiente a la antena de la izquierda y elija la opcin Rotar en el men contextual para visualizar los tiradores de rotacin. Arrastre hacia abajo del tirador central izquierdo para deformar la antena hacia abajo. 11. Haga lo mismo con la antena de la derecha. 12. sitate en el fotograma 3 y pulsa F6 para crear un fotograma clave. 13. Selecciona de nuevo las dos pupilas y llvalas al centro para simular que el mueco vuelve a mirarnos a nosotros. 14. Selecciona cada antena por separado y mediante la opcin rotar arrastra hacia arriba del mismo tirador que antes para devolver las antenas a su estado inicial. 15. Sitate y pulsa F6 en el cuarto y ltimo fotograma clave. 16. Selecciona las dos pupilas y llvalas a la izquierda para simular que ahora el mueco mira hacia la izquierda. 17. Vuelve a deformar las antenas del mismo modo que hiciste en el paso 10 pero procura que queden ligeramente diferentes par que la animacin no resulte repetitiva. 18. Bien, ya esta acabada la animacin. Ahora solo falta ponerla en marcha y observar lo que sucede. Para ello, pulsa ctrl + Intro y se reproducir la pelcula.
DOCENTES
18
Nombre de la Prctica: CAPAS TECNICO EN INFORMATICA

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 rectngulo con relleno azul de tal forma que simule el cielo, como fondo de nuestra animacin. 4. Crea una nueva capa a la cual le asignars el nombre mar, de igual manera dibujaras un rectngulo con un color azul. 5. ahora crea una tercera capa a la cual le pondrs como nombre olas, bien, ahora activa la herramienta pincel y dibuja una lnea que te de el aspecto de una ola, tu asgnale el degradado de lineal.
6. Crea de nuevo una capa nueva esta vez asgnale el nombre sol, aqu dibujaras un circulo en la parte superior derecha a la cual le asignaras un color de relleno utilizando algn degradado., y le eliminaras el borde al circulo. 7. Ahora bien crea una capa mas con el nombre Gaviotas, aqu dibujaremos unas gaviotas, como veras estamos dibujando un mar con sol e implementaremos las gaviotas para complementar el paisaje y posteriormente animarlo. Para crear las gaviotas utilizaremos la herramienta pincel, seleccinala y dentro de sus propiedades elige la opcin ms pequea del pincel y elige del tipo de pincel el biselado que es en diagonal, la ltima opcin, con esto iras creando las gaviotas dibuja un numero de gaviotas en el horizonte, para terminar esta parte.
19
8. Crea una capa mas y colcale el nombre barco, aqu dibujaras un barco con las herramientas bsicas, utilizando la herramienta lnea dibuja la figura del barco ahora que has creado la figura rellnalo de color caf o algn otro color de tu preferencia, ahora crea el mstil donde se colocar la bandera, para crear la bandera utilizars la herramienta polystar, una vez que hallas creado la bandera le colocaras un relleno con degrado lineal.
9. Ahora una vez creadas las capas con sus respectivos grficos el fotograma deber quedar de la siguiente manera. De igual forma tus capas se visualizaran como se muestra en el ejemplo, checa que el orden de tus capas sea como se muestran en la figura, esto para que no se traslapen tus grficos.
10. Ahora bien una vez terminado el fotograma con sus respectivas capas procederemos a la animacin de nuestros grficos, sitate en el fotograma nmero 10 para crear fotogramas clave o en su defecto fotogramas intermedios. Una vez situado en el fotograma 10 a las capas cielo, mar y olas, les crearas fotogramas intermedios debido a que no queremos que estos grficos cambien. Para las capas gaviotas y barco crearemos fotogramas claves ya que estos grficos sufrirn cambios durante la pelcula.
11. Una vez creado el fotograma clave en las capas gaviotas y barco modificaremos estos grficos para su posterior animacin. Mueve el barco que se encuentra en la capa barco, un poco hacia delante e inclnalo, de igual manera mueve las gaviotas de la capa gaviotas en otras posiciones.
12. Repite la operacin en el fotograma 20 y 30, de tal manera que tu lnea del tiempo quede como se muestra en el ejemplo de la figura. 13. A continuacin vamos a realizar la animacin, para ello vas a darle clic derecho sobre el fotograma 1 de la capa barco y seleccionaras crear interpolacin de movimiento, lo mismo realizaras para el fotograma 1 de la capa gaviotas. Los fotogramas sol, olas mar y cielo quedan sin modificacin alguna. 14. Seguidamente crearemos las interpolaciones para los fotogramas 10 y 20, seguirs las instrucciones del paso 13. 15. Despus de haber hecho todos los pasos indicados tu lnea del tiempo debi haber quedado de la siguiente manera.
16. Nada mas nos queda probar nuestra animacin creada en capas y con la herramienta interpolacin de movimiento.
DOCENTES
20
Nombre de la Prctica: INTERPOLACION TECNICO EN INFORMATICA

CREACIN DE LAS BOLAS. 1. Cree documento nuevo con las dimensiones por defecto y una velocidad de reproduccin de 25 fps. 2. Con la orden insertar/nuevo smbolo cree un smbolo grfico denominado bola.
3. Selecciona la herramienta relleno degradado de color gris.
y prepare los selectores de color para dibujar sin contorno y con un
4. Dibuja en el centro de la pantalla una circunferencia de unos 30 punto de dimetro.
5. Con la herramienta
haga clic en el cuadrante superior izquierdo del crculo para descentrar el brillo del relleno.
CREACIN DE LA SOMBRA. 6. Con la orden Insertar/ Nuevo smbolo cree un smbolo grfico 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 relleno de color negro.
y prepara los selectores de color para dibujar sin contorno y con un
9. Dibuja una elipse horizontal de 35 x 7 puntos y sitala por debajo de la bola como si fuera su sombra proyectada en el suelo.
21
CREACIN DE LA PRIMERA INTERPOLACIN. Vas a crear una interpolacin en la que una instancia de la bolla aparecer por la parte superior izquierda de la escena y se desplazar hasta el centro a la vez que aumenta de tamao para simular que se acerca. 10. Renombra la capa actual de la escena como bola izquierda. 11. Selecciona el primer fotograma y desde la biblioteca arrastra una instancia del smbolo bola sombra que has creado antes. Sitala en el extremo superior izquierdo de la escena pero por fuera de esta. 12. Selecciona el primer fotograma y crea una interpolacin de movimiento. 13. Selecciona el fotograma 30 y pulsa F6 para acabar de definir la interpolacin. 14. Con el fotograma 30 seleccionado arrastra la bola hacia el centro de la escena. 15. Escala con el ratn Escalar el contenido del fotograma 30 hasta que tenga un tamao de unos 115 puntos de altura.
CREACIN DE LA SEGUNDA INTERPOLACIN. Ahora vamos a crear la interpolacin que simular que las bolas salen rebotadas tras colisionar. 16. Selecciona el fotograma 30 y crea una nueva interpolacin de movimiento a partir de ah. 17. Selecciona el fotograma 60 y pulsa F6 para concluir esta segunda interpolacin. 18. Con el foto grama 60 seleccionado arrastra la bolla hacia el borde inferior izquierdo de la escena y escala su tamao hasta que ocupe unos 170 puntos de anchura. Si es necesario recoloque la bola para evitar que se salga de la escena. 19. Reproduce la animacin y observa cmo la bola se acerca al centro de la pantalla a gran velocidad pero luego, cuando se supone que ha rebotado, recorre el camino lentamente. Como ya debes imaginar, eso sucede porque la segunda interpolacin utiliza 30 fotogramas igual que la primera pero la bola recorre aqu menos distancia.
22
CREACIN DEL CHOQUE DE LAS BOLAS La simulacin del choque de las bolas consiste en crear otra capa en la que se ubicarn las dos interpolaciones creadas pero de forma simtrica. 20. Pulsa en bola derecha. para crear una nueva capa y denomnala
21. Selecciona todas las interpolaciones de la otra capa, cpialas con la orden copiar fotogramas y pgalas en la nueva capa a partir de su primer fotograma. 22. como habrn aparecido fotogramas indeseados mostrando una lnea discontinua. Arrastra del ltimo de estos fotogramas hacia la izquierda hasta depositarlo sobre el primer fotograma clave que encuentre. Ahora dispones de dos capas con las mismas interpolaciones superpuestas, con lo cual, si se reproduce la pelcula no se observar ninguna diferencia. Se trata, pues, de crear la versin simtrica de la interpolacin de la segunda capa. 23. Selecciona el primer fotograma de la segunda interpolacin y arrastra la bola hasta el extremo derecho de la escena por fuera de sta para que las bolas queden simtricas n su comienzo. 24. Selecciona ahora el fotograma 30 de la segunda capa y mueve un poco hacia la derecha la bola para visualizar 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 cntralas en la escena horizontalmente. 26 Finalmente, selecciona el fotograma 60 de la segunda interpolacin y arrastra la bola que contiene hasta el extremo derecho de la escena para que las bolas queden simtricas en su fase final. 27 Reproduce la pelcula pulsando Ctrl + intro y observe el efecto conseguido.
DOCENTE
23
Nombre de la Prctica: CAPA GUA TECNICO EN INFORMATICA

DESARROLLO DE LA PRCTICA 1. Inicia Flash Creacin de la pelota. 2. Dibuja un crculo con contorno y, mediante la herramienta lpiz y con el modificador suavizar, traza unas lneas verticales dentro del crculo para dividirlo en tres partes. 3. Selecciona todo el dibujo y en el panel propiedades cambia el tamao de la lnea a numero 2. 4. Selecciona por separado cada uno de los tres rellenos que han quedado en la pelota y aplcales relleno a cada uno con un color diferente para darle un aspecto de pelota de playa. 5. Ahora agrupa todos los elementos de la pelota.
Creacin de movimiento 6. sitate en el fotograma 40 y crea un fotograma clave. 7. A continuacin colcate en el fotograma 1 y crea una interpolacin de movimiento.
24
Creacin de la Trayectoria. 8. Haz clic en el icono de gua de movimiento. 9. Mediante la herramienta lpiz o lnea y el modificador suavizar traza un camino que intente reproducir el que deber seguir la pelota cuando aparezca en escena, es decir una serie de botes, cada uno de los cuales debe ser menor que el anterior hasta que ya no bote ms. 10. No importa que el trazo rebase los lmites de la escena, ya que, de ese modo, la pelota aparecer y desaparecer de la escena. 11. Tampoco importa el tamao del trazo pero es preferible que no sea tan ancho. 12. Bloquea la capa de gua para que no se pueda editar, sitate en el fotograma 40 y crea un fotograma clave.
Colocacin de la pelota en los lugares adecuados. 13. Activa la orden Ver/Ajuste/Ajustar objetos. 14. Selecciona el primer fotograma y con la herramienta seleccin arrastra la pelota hasta que su punto central se encaje con el principio de la lnea. 15. Selecciona el ltimo fotograma y arrastra igualmente la pelota hasta que su centro coincida con el final de la lnea trazada. 16. Reproduce la pelcula pulsando ctrl+Intro vers como la pelota recorre el camino descrito simulando una serie de botes. Simulacin de rotacin de la pelota. 17. Ahora selecciona el primer fotograma de la capa pelota y en el panel propiedades localiza la opcin y elige horario colcale 6 veces. Esto es para crear una simulacin de vueltas sobre si misma durante la animacin.
DOCENTES
25
Prctica # 11 Carrera: Mdulo: Submdulo: Nombre de la Prctica: MASCARA. TECNICO EN INFORMATICA
DESARROLLO DE LA PRCTICA 1. Inicia Flash 2. Empezaremos por crear un fondo base para nuestra siguiente animacin, bien, selecciona la herramienta rectngulo y dibuja un rectngulo de tal forma que abarque lo largo de el fotograma checa el ejemplo. 3. A continuacin insertars sobre el grafico tu nombre pero tendrs que realizarlo de la siguiente manera. 4. Primero insertars la primera letra y le asignaras el color de tu preferencia. Bien una vez colocada la letra colcale una lnea gua para que las dems letras estn alineadas. 5. una vez creada la primera letra realiza el mismo proceso para las posteriores letras de tu nombre. 6. Al terminar tu nombre deber de quedar de la siguiente manera. 7. Ahora crearemos una capa mscara, para lo cual hars lo siguiente, crea una mscara normal y posteriormente haz clic derecho sobre ella y selecciona la opcin mscara.
8. Cuando se cree la capa mscara aparecern bloqueadas ambas capas, desbloqualas para que puedas trabajar con ellas. 9. Tus capas debern quedar de la siguiente manera:
10. Selecciona nicamente la capa mascara para crear el siguiente efecto.
26
11. Dibuja un crculo que logre cubrir el alto de las letras, y colcalo fuera del rea del fotograma como se detalla a continuacin.
12. Bien ahora ya tenemos objetos en ambas capas, lo siguiente ser la creacin de fotogramas, bien para la capa donde se encuentra tu nombre solo se crear fotograma intermedio en el fotograma 40, y para la capa mscara crears un fotograma clave en el fotograma 40 respectivamente.
13. En la capa mscara haremos lo siguiente una vez creado el fotograma clave tendrs que situar el circulo al extremo opuesto del primer Fotograma como se muestra a continuacin.
14. Como siguiente paso crearas una interpolacin de movimiento en la capa mscara para crear un efecto de mscara. 15. Para lo cual te tendrs que situar en el fotograma 1 de la capa mscara y clic derecho y elegir crear interpolacin de movimiento. Ahora tus capas y la lnea del tiempo se vern de la siguiente manera.
16. Ahora si ejecuta la pelcula.
17. A continuacin vamos agregarle un efecto ms a la animacin. Localiza la lnea de tiempo y arrstrala hasta que tu crculo haya pasado la primera letra como se muestra en la siguiente figura. 18. Sitate en el fotograma 1 de la capa nueva y selecciona el fotograma uno y arrstralo hasta que el punto que aparece en el fotograma se corra hasta donde se encuentra tu lnea de tiempo.
27
19. Una vez ubicados ah inserta una nueva letra en este caso la N y sobreponla sobre la que ya existe. Cmbiele el color a uno diferente del original.
20. Mueve la lnea de tiempo y veras que el crculo se mueve de nuevo, cuando haya sobrepasado la segunda letra hars lo siguiente, en el fotograma en el que te encuentras crea un fotograma clave para la capa 3. Esto para conservar la letra anterior e insertar una nueva. 21. Realizaras ese proceso hasta que se acabe tu nombre de tal forma que tu animacin quedara de la siguiente manera. 22. Y tu lnea de tiempo se vera de la siguiente manera.
23. Ahora ya tienes una animacin con mscara sencilla y con un buen efecto.
DOCENTES
28
Nombre de la Prctica: BOTON TECNICO EN INFORMATICA

CREAR UN BOTN
Vamos a comenzar creando el botn que provocar la transformacin del objeto en texto. 1. Selecciona la opcin insertar/Nuevo smbolo. En la ventana que se abrir introduzca botn en la casilla Nombre y seleccione botn. Eso te llevar a una pantalla dedicada exclusivamente a la creacin del botn.
2. con la herramienta
dibuja un crculo en el centro de la pantalla. Selecciona el contorno del crculo y elimnalo. Selecciona el de la paleta lateral de herramientas.
crculo y asgnale color azul mediante la herramienta relleno
3. Con el circulo seleccionado, activa el panel informacin ubicado en el men ventana/informacin. 4. La zona superior derecha del panel informacin muestra unos pequeos cuadritos pequeos. Marca el cuadrito del centro e introduce el valor 0 en cada una de las casillas X y Y. con esta operacin 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 crculo de una tamao de 100 pxeles de dimetro.
5. Deselecciona el crculo 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 tamao a 25 y el tipo de letra Arial Black.
7. Con la herramienta de seleccin arrastra el texto hasta depositarlo centrado sobre el circulo. Bien ya esta definido el botn cuando esta en reposo.
29
8. Ahora haz clic sobre el segundo fotograma para seleccionarlo y pulsa F6 para crear un nuevo fotograma clave. Deselecciona el crculo haciendo clic en un lugar libre de la pantalla. 9. Este segundo fotograma del botn es el que contendr el aspecto del botn cuando se pase el cursor del ratn por encima. Aumenta el tamao del texto en 32, centra el texto en el crculo arrastrndolo con el ratn o movindolo con las teclas de cursor. 10. Ahora crearemos el tercer fotograma, que mostrar el aspecto del botn cuando se haga clic sobre l. Para ello, selecciona y pulsa F6 para convertirlo en un nuevo fotograma clave. 11. Selecciona nicamente el crculo y cambia el color mediante el panel mezclador, haz clic en el icono de relleno y elige el color, por ejemplo rojo. 12. Vamos a agrandar el crculo con objeto de que al hacer clic sobre el botn. Adems de que cambie de color se haga ms grande. Para eso selecciona el crculo y en el panel informacin asgnale un tamao de 120. 13. Ahora cambiaremos el texto pulsa por un O.K. 14. Selecciona el texto y cambia las propiedades como: color, tamao y tipo de letra. 15. Bien con esto se ha concluido el botn. Pulsa en la pestaa Escena para volver a la escena principal y arrastre a ella desde la biblioteca el botn recin creado.
DOCENTES
30
Nombre de la Prctica: BOTON ANIMADO TECNICO EN INFORMATICA

CREAR UN BOTN ANIMADO.
En esta ocasin crearemos un botn animado, para lo cual tendremos que elaborar previamente 3 clips de pelcula para lo cual desarrollaremos a continuacin. 1. Abre la aplicacin de Flash 2. Elije un documento de flash. 3. Ahora para iniciar elige men insertar/smbolo y selecciones la opcin clip de pelcula y le asignas el nombre Reposo, que ser el clip para el primer estado del botn. 4. Ya en la biblioteca inserta un crculo sin borde y de color rojo, ajusta sus propiedades para que quede con un dimetro de 120 pxeles. 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 ajstalo manualmente de tal forma que el centro del circulo quede alineado con la cruz. 5. Bien ahora crea un fotograma clave f6 en el fotograma 10 y cambia de color el relleno del crculo por uno verde. 6. Seguidamente selecciona el fotograma 1 y te vas a propiedades del fotograma y seleccionas la opcin animar/forma, debe de quedar tu lnea de tiempo con un sombreado verde con una fecha indicando la trayectoria. 7. Ahora crea un fotograma clave nuevo en el fotograma 20, cambia de nuevo de color de relleno por un rojo. 8. regresa al fotograma 10 y seleccinalo, elige propiedades y selecciona en la opcin animar forma. 9. tu lnea 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 pelcula, el clip lo que hace es cambiar de color. 11. Bien hemos acabado con lo que ser nuestro primer estado del botn. 12. Ahora iniciaremos con el siguiente clip para el segundo estado del botn, aqu crearemos una especie de ondas alrededor del circulo. 13. Para ello volvemos a seleccionar men/insertar/smbolo y eliges la opcin clip de pelcula, asgnale el nombre sobre.
31
14. Bien inserta un crculo sin contorno y con relleno en color verde, ajusta las propiedades para que el crculo quede de 120 pxeles de dimetro y que quede alineado justo con la cruz. 16. crea una capa nueva con el nombre ondas. 15. Vas a crear un crculo en la capa nueva pero en esta ocasin sin relleno y con contorno en color negro. 16. El crculo nuevo ajusta sus propiedades para que quede de un dimetro de 130 pxeles de dimetro, y que quede alineado con la cruz. Se vera de la siguiente forma. 17. Ahora procederemos a la animacin de este elemento. De la capa ondas crea un fotograma clave en el fotograma 20, estando en el fotograma 20 cambia las propiedades del crculo que solo tiene contorno para ajustarlo a un tamao de 160 pxeles de dimetro. 18. Bien selecciona el fotograma 1 de la capa ondas, y en propiedades ajusta en la opcin animar a forma, tu lnea de tiempo debi haber quedado sombreado en color verde y con la flecha indicando la trayectoria. 19. Con la capa del crculo con relleno solo nos resta crearle un fotograma intermedio en el fotograma 20. 20. configura la animacin del clip a 25 fotogramas por segundo. 21. Aqu hemos terminado con el segundo clip que nos servir para el segundo estado del botn. 22. Ahora regresa a la escena 1 y inserta el clip de sobre en el fotograma y prueba la pelcula. El clip debe funcionar como una onda.
23. El siguiente clip es para el tercer estado del botn, para ello vuelve a seleccionar men/insertar/smbolo y elige clip de pelcula, asgnale en nombre presionado. 24. inserta un circulo sin borde y con relleno en color gris con degradado. Ajusta sus propiedades para que tenga un dimetro de 120 pxeles de dimetro y se alinea con la cruz. 25. Bien crea un fotograma clave en el fotograma 20. 26. Seleccionado el fotograma 20 elimina el crculo 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 un dimetro de 130 pxeles y alineado con la cruz. 27. Ahora selecciona el fotograma 1 y ajusta las propiedades en animar y selecciona forma, tu lnea de tiempo quedara 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 al fotograma y prubalo, la animacin que se creo es una interpolacin de forma que hace que cambie de crculo a una estrella. 29. Despus de haber creado los tres clipes de pelcula ahora crearemos el botn. 30. Actualmente tu biblioteca debe contener los siguientes clipes.
32
31. Bien ahora crearemos el botn para ello selecciona men/insertar/smbolo y elige botn asgnale el nombre botn animado. 32. Ahora ubica la biblioteca pues de ah tomaremos los elementos para generar el botn animado. 33. En el botn de reposo realizaras lo siguiente: arrastra de la biblioteca el clip reposo y ajstalo para que quede alineado con la cruz. 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 presionado ubicado de igual forma en la biblioteca. 36. Ya tenemos el botn creado ahora regresa a la escena 1 37. Y corrobora que en tu biblioteca se encuentren los siguientes elementos. clip
40. Bien ya que estamos en la escena principal, borra cualquier elemento que halla en l e inserta el elemento botn que se encuentra ubicado en la biblioteca. 41. Ya hemos creado el botn, animado, como habrs apreciado tuvimos que crear tres clip de pelcula para llegar a este elemento, esto quiere decir que podemos realizar mltiples combinaciones para crear diferentes elementos en flash la nica limitante es tu imaginacin. 42. Prueba la pelcula y corrobora que realmente el botn esta animado.
DOCENTES
33
Nombre de la Prctica: MENU TECNICO EN INFORMATICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORAS BOCINAS SOFTWARE MACROMEDIA FLASH 8 DESARROLLO DE LA PRCTICA
Men en flash
1. Abre la aplicacin de flash. 2. Bien en esta ocasin crearemos un men que nos de tres opciones de animacin de flash como son: interpolacin de movimiento, Interpolacin de Forma y Capa gua. 3. Para iniciar crea tres botones con sus respectivos estados, agrgale a cada botn en la parte inferior la opcin a la que corresponde. 4. Cuando crees los botones agrgale 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 pasaras tus botones al fotograma. 5. Tu fotograma 1 deber tener el siguiente aspecto, inserta el titulo Macromedia Flash8 y en la parte inferior t nombre.
34
6. Nombra a tu capa Men. 7. Ahora inserta una nueva capa y nmbrala Marco1. 8. Bien en esta capa sitate en el fotograma 2 y da clic derecho para insertar un fotograma clave vacio. 9. En el crea un marco para la animacin que vamos a crear. 10. Ahora inserta una nueva capa que llamaras I. Movimiento. 11. Inserta un crculo y colcale el color de fondo que desees. Tu capas marco1 y I. de movimiento quedaran de la siguiente manera en el fotograma 2. 12. Ahora vamos a crear la interpolacin de movimiento de este objeto. 13. Para iniciar crearemos un fotograma intermedio del marco hasta el fotograma 30, ya que no tendr un cambio alguno. 14. En la capa Movimiento crea un fotograma clave en el fotograma 15 y cambia de posicin el crculo hacia la parte media inferior. 15. Seguidamente crea la interpolacin de movimiento dando clic derecho al primer 2 de la capa movimiento y elige interpolacin de movimiento. 16. Ahora crea un fotograma clave sobre la misma capa en el fotograma 30 y sita el crculo en la esquina superior derecha. 17. Ahora repite el proceso del paso 15 para crear la interpolacin de movimiento. 18. Tu lnea de tiempo deber quedar con el siguiente aspecto. 19. Para continuar crea una nueva capa con el Nombre I. Forma en la que crearemos la siguiente animacin. 20. Inserta un fotograma clave vacio en el fotograma 31 de esta capa para crear nuestra interpolacin de forma. 21. Inserta un polgono en forma de estrella de 5 lados, colcale un relleno radial rojo, y el borde en tamao 4 y el estilo curveado. 22. Bien ya terminaste de realizar el trazo, ahora crea un fotograma clave de esta capa en el fotograma 50. 23. Estamos en el fotograma 50, bien elimina la estrella que aparece en el y en su lugar inserta un texto INFORMATICA, Tratando de que quede al centro asgnale el color que desees y a un tamao no mayor al de la estrella. 24. Ahora en la capa marco vas a insertar un fotograma intermedio en el fotograma 50, esto para repetir el marco en la siguiente animacin. 25. Regresamos a la capa I. forma y vamos a crear la interpolacin de forma para ello hay que separar el texto, que se encuentra en el fotograma 50, bien la opcin se encuentra realizando clic derecho sobre el texto, pero si te percatas separamos en letras, ahora vuelve a dar clic derecho para que se conviertan en grficos, con esto queda listo. 26. Ahora regresa al fotograma 31 seleccinalo y visualiza las propiedades y elige en la opcin animacin, forma. De manera automtica se genera la animacin, queda en color verde con una fecha como se detalla a continuacin. 27. Hasta aqu tenemos listo dos animaciones nos falta una mas. 28. A continuacin crea una capa con el nombre Animacin gua. 29. Inserta un fotograma clave vacio en el fotograma 51.
30. Bien crearemos una capa gua para la capa animacin gua dando clic en este icono
35
31. Tambin inserta un fotograma calve vacio en la capa gua. 32. Selecciona la capa gua y en el fotograma 51 crea una lnea que servir de gua para la animacin. 33. Ahora sitate en la capa Animacin gua, dibuja un polgono Estrella e ilumnalo a tu gusto y verifica que el centro del polgono coincida con el inicio de nuestra lnea gua. 34. Bien continuamos, ahora vas a crear un fotograma clave para ambas capas la Gua y Animacin Gua en el fotograma 70. 35. Regresa al fotograma 51 de la capa animacin gua y da clic derecho para crear una interpolacin de movimiento. 36. regresa al fotograma 70 de la capa animacin gua y mueve el polgono hacia el extremo de la lnea gua. 37. Listo tenemos nuestras tres animaciones bsicas, ahora nos resta realizar las aplicaciones pertinentes para utilizar el men. 38. Tu lnea del tiempo debe estar de la siguiente manera.
39. Selecciona el fotograma 1 de la capa men y ve a acciones y coloca el cdigo stop(); para detener la pelcula justo en el men. 40. Selecciona el fotograma 30 de la capa I. movimiento, ve a acciones y coloca el cdigo para detener la pelcula como en el paso anterior. 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 animacin gua. 42. Bien prueba la pelcula y veras que se detiene en el men principal. 43. El siguiente paso es asignarle a los botones el cdigo correspondiente para que nos lleven a una determinada parte de la pelcula. 44. Regresa al fotograma 1 en la capa men y haz clic derecho sobre el primer botn elije acciones y escribe el siguiente cdigo en el rea. on (press) { gotoAndPlay(2); } 45. Repite el procedimiento del paso 44 para el segundo botn, la nica diferencia es que en gotoandplay le asignaras hacia el fotograma 31. Y lo mismo hars para el tercer botn, pero a este le asignaras el fotograma 51. 46. Con este cdigo nuestro men nos lleva hacia una parte de la pelcula y se detiene, ahora necesitaremos crear botones de regreso al men principal. 47. Inserta una capa nueva y nmbrala Regreso. 48. selecciona el fotograma 2 de esta capa y crea un fotograma clave vacio posteriormente crea un botn que nos servir de regreso al fotograma1, utiliza el cdigo del paso 44. Una vez asignado el cdigo crea un fotograma intermedio hasta la el fotograma 70 49. Bien con estas acciones nuestra animacin debi haber quedado lista. 50. esta es la parte final de la lnea del tiempo.
DOCENTES
36
Nombre de la Prctica: MOVIE CLIP TECNICO EN INFORMATICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORAS BOCINAS SOFTWARE MACROMEDIA FLASH 8
Creacin del primer Clip de Pelcula 1 Crea una nueva escena 2 Pulsa Ctrl+ F8 para crear un nuevo smbolo de clip de pelcula. Asgnale el nombre coche1 3 En la pantalla de edicin del clip, dibuja el elemento a animar. En este caso dibuja este gracioso cochecito de ambulancia.
4 Sita el objeto en el lado izquierdo de la pantalla. 5 Crea una interpolacin de movimiento. 6 Selecciona el fotograma 40 y pulsa F6 para completar la interpolacin. 7 Con el fotograma 40 seleccionado, use el cursor derecho junto con la tecla Mays para llevar el objero hasta el lado derecho de la pantalla para que el objeto quede ms o menos simtricamente ubicado con respecto al fotograma numero 1 8 Selecciona el fotograma 1 e inserta una accin stop() para evitar que el clip se reproduzca automticamente. 9 Regresa a la escena principal pulsando en la pestaa Escena 1.
Creacin del segundo clip de pelcula 10 Pulsa Ctrl+ F8 para crear otro smbolo de clip de pelcula. Asgnale el nombre coche 2 11 En la pantalla de edicin del clip, dibuja el elemento a animar. Ahora importa el mismo dibujo pero reflejado hacia la izquierda para que el cochecito mire hacia el otro lado y cambiado de color.
12 Sita el objeto en el lado derecho de la pantalla. 13 Crea una interpolacin de movimiento. 14 Seleccione el fotograma 40 y pulse F6 para completar la interpolacin. 15 Con el fotograma 40 seleccionado, usa el cursor izquierdo junto con la tecla Mays para llevar el objeto hasta el borde izquierdo de la escena.
37
16 Selecciona el fotograma 1 e inserta una accin stop() para evitar que el clip se reproduzca automticamente. 17 Regresa a la escena principal pulsando en la pestaa Escena 1.
Ubicacin 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 la escena. Seguidamente, arrastre el clip coche 2 y llvalo al borde superior derecho de la escena. 19 Selecciona a la vez las dos instancias de los dos clips y alinelas horizontalmente. Si es necesario, utiliza la orden Escalar-Scale para aumentar o reducir el tamao delas instancias con objeto de adecuarlas al tamao de la escena, es decir, que los coches no sean ni demasiado grandes ni demasiado pequeos.
20 Selecciona la instancia de la izquierda y pulsa en propiedades para abrir el panel instancia. Asgnale el nombre coche1. Haz lo mismo con la instancia de la derecha y asgnale el coche2. nombre
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.
Asignacin de las acciones al botn Play Ahora se trata de asignar a cada botn las acciones necesarias para que cumplan su cometido. Para asignar las acciones al botn de reproduccin play haga lo siguiente: 24 Haz clic sobre l con el botn y selecciona Acciones para abrir el panel. 25 Haz doble clic sobre la accin 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 accin Play, con eso le indicar el tipo de accin a aplicar al clip elegido, es decir, arrancarlo. 28 Sita el cursor en la ltima lnea de expresiones, es decir, la que muestra el carcter} y haga doble clic de nuevo sobre la accin Tell Target para agregar otra accin de este tipo que deber ser ejecutada con el mismo botn. 29. En el campo destino escriba el nombre de instancia del clip a activar ahora, es decir,
38
coche 2. 30. Haz doble clic sobre la accin Play; con eso le indicar el tipo de accin a aplicar al segundo clip elegido, es decir, arrancarlo. 31 Pulsa Ctrl + Intro y comprueba que al hacer clic sobre el botn play se inicia la reproduccin de los dos clips.
Asignacin 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 nico que cambia es el tipo de accin que aparece a continuacin de las expresiones Tell Target. Recuerda que antes hemos colocado Play porque es lo que queramos que sucediera con los dos clips al pulsar en el botn play. As pues, programa cada botn segn estas caractersticas: Botn Stop: Debe detener la reproduccin, as que la accin ser Stop para los dos clips. Botn Regresar: Debe hacer retroceder la reproduccin fotograma a fotograma, as que la accin ser Go to y con parmetro tipo = Fotograma anterior. Botn Adelantar: Debe hacer avanzar la reproduccin fotograma a fotograma, as que la accin ser Go to y con el parmetro tipo= fotograma siguiente.
En la siguiente figura puedes ver el programa para cada uno de los botones mencionados.
32 Reproduce la pelcula y observa como puedes controlar tanto el arranque como la parada de los clips y puedes reproducirlos paso a paso en ambos sentidos. Si lo deseas, puedes agregar otros botones para, por ejemplo, llevar los clips directamente al principio o al final de la pelcula.
DOCENTES
39

Practicas Flash

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practicas Flash

Uploaded by

Copyright:

Available Formats

2011

Prctica # 1 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: TCNICO EN INFORMTICA

II CREACIN DE PRODUCTOS MULTIMEDIA A TRAVS DE SOFTWARE DE DISEO

De esta misma forma podremos obtener la barra de Edicin y la barra de Control.

Prctica # 2 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: PANELES TECNICO EN INFORMATICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO

COMPUTADORAS MACROMEDIA FLASH 8

Prctica # 3 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: CAJA DE HERRAMIENTAS TECNICO EN INFORMTICA

II PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO

COMPUTADORAS MACROMEDIA FLASH 8

Prctica # 4.1 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: ABEJA TECNICO EN INFORMATICA

Prctica # 4.2 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: MARIPOSA TECNICO EN INFORMATICA

Prctica # 4.3 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: GUACAMAYA TECNICO EN INFORMATICA

Prctica # 5 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: CONVERTIR OBJETOS A SIMBOLOS TECNICO EN INFORMTICA

3 Selecciona el smbolo, luego la herramienta

y arrastra alguno de los puntos que aparecern alrededor del botn.

Efectos sobre Instancias

Prctica # 6 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: IMPORTAR ARCHIVOS TECNICO EN INFORMATICA

Prctica # 7 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: ANIMACION FOTOGRAMA POR FOTOGRAMA TECNICO EN INFORMATICA

Prctica # 8 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: CAPAS TECNICO EN INFORMATICA

Prctica # 9 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: INTERPOLACION TECNICO EN INFORMATICA

3. Selecciona la herramienta relleno degradado de color gris.

y prepare los selectores de color para dibujar sin contorno y con un

4. Dibuja en el centro de la pantalla una circunferencia de unos 30 punto de dimetro.

8. Selecciona la herramienta relleno de color negro.

y prepara los selectores de color para dibujar sin contorno y con un

Prctica # 10 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: CAPA GUA TECNICO EN INFORMATICA

10. Selecciona nicamente la capa mascara para crear el siguiente efecto.

16. Ahora si ejecuta la pelcula.

Prctica # 12 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: BOTON TECNICO EN INFORMATICA

crculo y asgnale color azul mediante la herramienta relleno

Prctica # 13 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: BOTON ANIMADO TECNICO EN INFORMATICA

Prctica # 14 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: MENU TECNICO EN INFORMATICA

Prctica # 15 Carrera: Mdulo: Submdulo:

Nombre de la Prctica: MOVIE CLIP TECNICO EN INFORMATICA

You might also like