Practicas Flash

2011

PRÁCTICAS DE FLASH MODULO II, SUBMODULO II MODULO II, CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DEL SOFTWARE DE DISEÑO. SUBMODULO 2, GENERACIÓN DE ANIMACIÓN CON ELEMENTOS MULTIMEDIA.

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

1

19/01/2010

GOBIERNO DEL ESTADO DE CAMPECHE COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE C AMPECHE

Í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 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 29 PRACTICA 13, BOTÓN ANIMADO ........................................... ................................................................. ............................ ...... 31 PRACTICA 14, MENÚ ...................................... ............................................................ ............................................. ................................ .........34

TERCER PARCIAL PRACTICA 15, MOVIE CLIP ............................................... ..................................................................... ................................... .............37

2


Í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 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 29 PRACTICA 13, BOTÓN ANIMADO ........................................... ................................................................. ............................ ...... 31 PRACTICA 14, MENÚ ...................................... ............................................................ ............................................. ................................ .........34

TERCER PARCIAL PRACTICA 15, MOVIE CLIP ............................................... ..................................................................... ................................... .............37

2


Práctica # 1 Carrera: Módulo: Submódulo:  

Nombre de la Práctica: TÉCNICO EN INFORMÁTICA

ELEMENTOS DE FLASH

II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

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. Barra de Edición

Caja de herramientas 1 Localizamos en el menú archivo la opción Ventana 2 Luego seleccionamos herramientas 3 Con esto queda activada la caja de herramientas en casa de haberse desactivado.

DOCENTES

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

3

GOBIERNO DEL ESTADO DE CAMPECHE COLEGIO DE ESTUDIOS CIENTIFICOS Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE

Práctica # 2 Carrera: Módulo: Submódulo:





Nombre de la Práctica: PANELES TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO

COMPUTADORAS MACROMEDIA FLASH 8

DESARROLLO DE LA PRÁCTICA Activacion de los paneles. 1. Para activar los paneles hay que iniciar la aplicación 2. 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

Mezclador de color

      

Etc…

Transformar

Alinear

DOCENTES


4

GOBIERNO DEL ESTADO DE CAMPECHE COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE Práctica # 3 Carrera: Módulo: Submódulo:





Nombre de la Práctica: CAJA DE HERRAMIENTAS TECNICO EN INFORMÁTICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO

COMPUTADORAS MACROMEDIA FLASH 8

DESARROLLO DE LA PRÁCTICA

1. 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" 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 seleccionándolo en el Panel Mezclador de Colores. 5 Ahora mueve cada aro hasta la posición deseada. Para mover un objeto, selecciona la Herramienta Selección, haz clic en el aro que quieras mover y arrástralo.

5

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 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

6

GOBIERNO DEL ESTADO DE CAMPECHE COLEGIO DE ESTUDIOS CIENTIFICOS Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE Práctica # 4.1 Carrera: Módulo: Submódulo:  

Nombre de la Práctica: ABEJA TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORA SOFTWARE FLASH 8

DESARROLLO DE LA PRÁCTICA Abeja Haremos uso de las herramientas de la caja para crear una graciosa abeja 1. 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 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 demás elementos 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 procedimiento que realizamos para la creación 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 harás uso de la herramienta lápiz y de la herramienta ovalo para crear unas sencillas antenas trata de darle el color que tiene su cuerpo para obtener una buena combinación, 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 podrás hacer uso 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

7

lápiz y le crearas la curva únicamente que la línea le tendrás que dar en su propiedad grosor de línea un tamaño más grande para que se visualice de la siguiente 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 un ovalo, primero dibujaremos una sola ala y posteriormente mediante una copia obtendremos la otra. 15. Dentro de ese ovalo ahora con ayuda del lápiz dibujaras unas líneas 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 dirígete al menú modificar/transformar/horizontalmente. 17. con esto el ala quedara en otra dirección agrupa las alas por separado y agrégalas al cuerpo. 18. Ahora ya tienes una abeja hecha en flash.

DOCENTES


8


Nombre de la Práctica: MARIPOSA TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORA SOFTWARE FLASH 8

DESARROLLO DE LA PRÁCTICA La mariposa Haremos uso de las herramientas de la caja para crear una graciosa abeja 1. Abre la aplicación de Flash

2. Elige un documento de Flash 3. Para iniciar este grafico empezaras por crear un círculo sin borde con un relleno. 4. Agrupo el circulo para evitar que los gráficos se sobrepongas, y borres accidentalmente parte del dibujo. 5. Seguidamente crea clones y modifica el tamaño 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 línea recta y para la nariz 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 parte superior. 9. Para crear las sus alas lo harás 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 después 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 tamaños 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 detrás del cuerpo para darle un buen efecto. Para ello utiliza organizar.

DOCENTES

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

10


Nombre de la Práctica: GUACAMAYA TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORA SOFTWARE FLASH 8 DESARROLLO DE LA PRÁCTICA

La guacamaya

Haremos uso de las herramientas de la caja para crear una guacamaya. 1. Abre la aplicación de Flash 2. Elige un documento de Flash 3. Para iniciar insertaremos un ovalo que será la cabeza de la guacamaya. Colócale un 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 ello necesitaremos ó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 escala como muestra la siguiente figura.

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

11

10. agrégale el duplicado de la figura que reducimos anteriormente pero tendrá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 y luego duplicaremos las otras dos, y les cambiaremos el color.

12. Crea dos círculos y sobreponlos de tal manera que queden de cómo 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 colócalas detrás de la guacamaya quedándote una imagen de la siguiente manera.

DOCENTES


12

GOBIERNO DEL ESTADO DE CAMPECHE COLEGIO DE ESTUDIOS CIENTIFICOS Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE Práctica # 5 Carrera: Módulo: Submódulo:  

Nombre de la Práctica: CONVERTIR OBJETOS A SIMBOLOS TECNICO EN INFORMÁTICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO Computadora Software Macromedia Flash 8

DESARROLLO DE LA PRÁCTICA 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á un grá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.

13

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 el botó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 (T ransparencia) permite que el botón situado bajo él se vea.

DOCENTES


14


Nombre de la Práctica: IMPORTAR ARCHIVOS TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORA SOFTWARE MACROMEDIA FLASH 8

DESARROLLO DE LA PRÁCTICA 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 diálogo de Importar, allí deberás seleccionar el formato de imagen que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón 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 gráficos vectoriales como también 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 continuación, seleccionamos el tipo de archivo correspondiente al gráfico 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 gráficos de este tipo. Concretamente, el Freehand pertenece también a Macromedia, al igual que Flash, con lo que la compatibilidad en este caso es total.

DOCENTES


16



Nombre de la Práctica: ANIMACION FOTOGRAMA POR FOTOGRAMA TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO

II PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA RECURSOS MATERIALES DE APOYO COMPUTADORAS SOFTWARE MACROMEDIA FLASH 8

DESARROLLO DE LA PRÁCTICA 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 pero independientes 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 un círculo para simular uno de los ojos del muñeco y agrúpalo pulsando ctrl + G. Copia y pega el círculo blanco para crear otro junto al anterior. 5. Con el mismo procedimiento crea dos pequeños círculos negros para situarlos como pupilas para los ojos del 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 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 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. Haga lo mismo en la otra antena.

17

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 el fotograma anterior. 9. Selecciona a la vez las dos pupilas de los ojos y llévalas hacia la derecha para simular que el muñeco mira 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 para deformar 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 mirarnos a nosotros. 14. Selecciona cada antena por separado y mediante la opción rotar arrastra hacia arriba del mismo tirador 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 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 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 y se reproducirá la película.

DOCENTES


18



Nombre de la Práctica: CAPAS TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO


DESARROLLO DE LA PRÁCTICA 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 con relleno 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 manera dibujaras 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 color de relleno utilizando algún 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, selecciónala y dentro de sus propiedades elige la opción más pequeña del pincel y elige del tipo 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, para terminar esta parte.

19

8. Crea una capa mas y colócale el nombre barco, aquí dibujaras un barco con las herramientas básicas, utilizando la herramienta línea dibuja la figura del barco ahora que has creado la figura rellénalo de color café o algún otro color 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 hallas creado la bandera le colocaras un relleno con degrado lineal.

9. Ahora una vez creadas las capas con sus respectivos gráficos 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 gráficos.

10. Ahora bien una vez terminado el fotograma con sus respectivas capas procederemos a la animación de nuestros gráficos, sitúate en el fotograma número 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 gráficos cambien. Para las capas gaviotas y barco crearemos fotogramas claves ya que estos gráficos sufrirán cambios durante la película.

11. Una vez creado el fotograma clave en las capas gaviotas y barco modificaremos estos gráficos para su posterior animación. Mueve el barco que se encuentra en la capa barco, un poco hacia delante 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 tu lí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 seleccionaras crear interpolación de movimiento, lo mismo realizaras para el fotograma 1 de la capa gaviotas. Los fotogramas sol, olas mar y cielo quedan sin modificación alguna. 14. Seguidamente crearemos las interpolaciones para los fotogramas 10 y 20, seguirás las instrucciones del paso 13. 15. Después de haber hecho todos los pasos indicados tu línea del tiempo 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.

DOCENTES


20


Nombre de la Práctica: INTERPOLACION TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO


DESARROLLO DE LA PRÁCTICA 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 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 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 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 sitúala por debajo de la bola como si fuera su sombra proyectada en el suelo.

21

CREACIÓN DE LA PRIMERA INTERPOLACIÓN. Vas a crear una interpolación 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 tamaño 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 símbolo bola sombra que has creado antes. Sitúala en el extremo superior izquierdo de la escena pero por fuera de esta. 12. Selecciona el primer fotograma y crea una interpolación de movimiento. 13. Selecciona el fotograma 30 y pulsa F6 para acabar de definir la interpolación. 14. Con el fotograma 30 seleccionado arrastra la bola hacia el centro de la escena. 15. Escala con el ratón Escalar el contenido del fotograma 30 hasta que tenga un tamaño de unos 115 puntos 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 nueva interpolación de movimiento a partir de ahí. 17. Selecciona el fotograma 60 y pulsa F6 para concluir esta segunda interpolación. 18. Con el foto grama 60 seleccionado arrastra la bolla hacia el borde inferior izquierdo de la escena y escala su tamaño 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 animación y observa cómo 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 interpolación utiliza 30 fotogramas igual que la primera pero la bola recorre aquí menos distancia.

22

CREACIÓN DEL CHOQUE DE LAS BOLAS La simulación del choque de las bolas consiste en crear otra capa en la que se ubicarán las dos interpolaciones creadas pero de forma simétrica. 20. Pulsa en bola derecha.

para crear una nueva capa y denomínala

21. Selecciona todas las interpolaciones de la otra capa, cópialas con la orden copiar fotogramas y pégalas en la nueva capa a partir de su primer fotograma. 22. como habrán aparecido fotogramas indeseados mostrando una línea discontinua. Arrastra del último de estos fotogramas hacia la izquierda hasta depositarlo sobre el primer f otograma clave que encuentre. Ahora dispones de dos capas con las mismas interpolaciones superpuestas, con lo cual, si se reproduce la película no se observará ninguna diferencia. Se trata, pues, de crear la versió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 derecho de 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 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 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 la escena 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


23


Nombre de la Práctica: CAPA GUÍA TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO


DESARROLLO DE LA PRÁCTICA 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 unas lí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 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.

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.

24

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 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 más. 10. No importa que el trazo rebase los límites de la escena, ya que, de ese modo, la pelota aparecerá y desaparecerá de la escena. 11. Tampoco importa el tamaño del trazo pero es preferible que no sea tan ancho. 12. Bloquea la capa de guía para que no se pueda editar, sitúate en el fotograma 40 y crea un fotograma clave.

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 punto central 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 final de la línea trazada. 16. Reproduce la película pulsando ctrl+Intro verás como la pelota recorre el camino descrito simulando una 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 y elige horario colócale 6 veces. Esto es para crear una simulación de vueltas sobre si misma durante la animación.

DOCENTES


25

GOBIERNO DEL ESTADO DE CAMPECHE COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE Práctica # 11 Carrera: Módulo: Submódulo:  

Nombre de la Práctica: MASCARA. TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO


DESARROLLO DE LA PRÁCTICA 1. Inicia Flash 2. Empezaremos por crear un fondo base para nuestra siguiente animación, bien, selecciona la herramienta rectángulo y dibuja un rectángulo de tal forma que abarque lo largo de el fotograma checa el ejemplo. 3. A continuación insertarás sobre el grafico tu nombre pero tendrás que realizarlo de la siguiente manera. 4. Primero insertarás la primera letra y le asignaras el color de tu preferencia. Bien una vez colocada la letra colócale una línea guía para que las demás letras estén 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 máscara, para lo cual harás lo siguiente, 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 bloqueadas ambas 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.

26

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

12. Bien ahora ya tenemos objetos en ambas capas, lo siguiente será la creación de fotogramas, bien para la capa donde se encuentra tu nombre solo se creará fotograma intermedio en el fotograma 40, y para la capa máscara crearás un fotograma clave en el fotograma 40 respectivamente.

13. En la capa máscara haremos lo siguiente una vez creado el fotograma clave tendrás que situar el circulo al extremo opuesto del primer Fotograma como se muestra a continuación.

14. Como siguiente paso crearas una interpolación de movimiento en la capa máscara para crear un efecto de máscara. 15. Para lo cual te tendrás que situar en el fotograma 1 de la capa máscara y clic derecho y elegir crear interpolación de movimiento. Ahora tus capas y la línea del tiempo se verán de la siguiente manera.

16. Ahora si ejecuta la película.

17. A continuación vamos agregarle un efecto más a la animación. Localiza la línea de tiempo y arrástrala hasta que tu círculo haya pasado la primera letra como se muestra en la siguiente figura. 18. Sitúate en el fotograma 1 de la capa nueva y selecciona el fotograma uno y arrástralo hasta que el punto que aparece en el fotograma se corra hasta donde se encuentra tu línea de tiempo.

27

19. Una vez ubicados ahí inserta una nueva letra en este caso la N y sobreponla sobre la que ya existe. Cámbiele el color a uno diferente del original.

20. Mueve la línea de tiempo y veras que el círculo se mueve de nuevo, cuando haya sobrepasado la segunda letra harás 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 animación quedara de la siguiente manera. 22. Y tu línea de tiempo se vera de la siguiente manera.

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

DOCENTES


28


Nombre de la Práctica: BOTON TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO


DESARROLLO DE LA PRÁCTICA 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 seleccione botó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 e introduce 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 de diá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.

29

8. Ahora haz clic sobre el segundo fotograma para seleccionarlo y pulsa F6 para crear un nuevo fotograma clave. 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 l ratón por encima. Aumenta el tamaño del texto en 32, centra el texto en el círculo arrastrándolo con el ratón o movié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. Para ello, 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 de relleno 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 color se 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 la biblioteca el botón recién creado.

DOCENTES


30


Nombre de la Práctica: BOTON ANIMADO TECNICO EN INFORMATICA II CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO


DESARROLLO DE LA PRÁCTICA 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 cual desarrollaremos 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á el clip 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 un diá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 con la cruz. 5. Bien ahora crea un fotograma clave f6 en el fotograma 10 y cambia de color el relleno del círculo por uno verde. 6. Seguidamente selecciona el fotograma 1 y te vas a propiedades del fotograma y seleccionas la opción animar/forma, debe de quedar tu línea 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 selecciónalo, elige propiedades y selecciona en la opció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 es cambiar 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 especie de 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 el nombre sobre.

31

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íxeles de 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, y que 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 en el fotograma 20, estando en el fotograma 20 cambia las propiedades del círculo que solo tiene contorno para 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 a forma, tu línea de tiempo debió haber quedado sombreado en color verde y con la flecha indicando la trayectoria. 19. Con la capa del círculo con relleno solo nos resta crearle un fotograma intermedio en 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 la pelí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 y elige 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 que tenga 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 un diá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 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 pruébalo, la animación que se creo es una interpolación de forma que hace que cambie de círculo a 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.

32

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 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.

clip

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 e inserta 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 tu imaginación. 42. Prueba la película y corrobora que realmente el botón esta animado.

DOCENTES


33

Practicas Flash

Recommend Documents