Flash 8
- 1. MACROMEDIA FLASH Ing. Fabián Guerrero Medina PROFESOR: ALUMNO: Miguel Angel Cari Champi
- 2. ENTORNO DE TRABAJO DE FLASH:
- 3. TIPOS DE ANIMACIONES EN FLASH
- 4. TIPOS DE ANIMACIONES: En Flash existen tres tipos de animación: Fotograma a fotograma Interpolación de movimiento Interpolación de forma LA ANIMACIÓN FOTOGRAMA A FOTOGRAMA : (frame by frame) debemos dibujar cada uno de los fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Además, el archivo debe almacenar los cambios de cada fotograma.
- 5. LA ANIMACIÓN POR INTERPOLACIÓN: Consiste en crear dos objetos diferentes, cada uno de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automáticamente los pasos intermedios. En este caso, el archivo sólo almacena los estados inicial y final. Esta a su vez puede ser
- 6. La animación por interpolación de forma ; (shape tween) ese diferencia en que gradúa el cambio de la forma del objeto, realizada a través de la manipulación de sus puntos de control bezier. También permite cambiar el color. La animación por interpolación de movimiento ; (motion tween) es que la debemos elegir cuando los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o rotación.
- 7. BOTONES
- 8. Para crear un botón podemos primero dibujarlo, por ejemplo en el estado de reposo, y después convertirlo en símbolo; para ello, una vez seleccionado, elegimos el menú: "Insertar-Convertir en símbolo". Debemos escribirle un nombre, y elegir el comportamiento de Botón . Los botones de flash son objetos gráficos a los que podemos asignar diferentes estados (normal, sobre, presionado...) y que cuando los pulsemos (o pasemos por encima), se ejecuten determinadas acciones. De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente
- 9. Los botones tienen su propia línea de tiempos. Esta es independiente pero, sin embargo, esta formada únicamente por cuatro fotogramas, uno para cada estado posible del botón. Up (Reposo). Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él. Over (Sobre). Aspecto del botón cuando situamos el puntero sobre él. Down (Presionado). Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado. Hit (Zona activa). Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante
- 10. Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo click con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Edit. Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (Up, Over, Down y Hit) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.
- 11. Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es ver botones rectangulares, cuadrados y circulares, cuya creación es inmediata, también hay otros muchos tipos de botones que, entre estos están los creados mediante formas poligonales, aquellos que están formados por texto únicamente, dibujos con diferentes motivos, botones en relieve, etc. Es interesante su uso para dar más vistosidad ya que algunos resultan más expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creación de botones que sus herramientas de dibujo nos ofrece.
- 12. GUÍA DE MOVIMIENTO: CREACIÓN DE GUÍA DE MOVIMIENTO: Tener, previamente realizada, una interpolación de movimiento. Seleccionar la opción del menú INSERTAR > GUÍA DE MOVIMIENTO ó botón inferior añade guía de movimiento En esta nueva capa, crear la línea -curva, recta o con cualquier otra forma- que hará las veces de guía, (utilizando el lápiz y/o cualquiera de las herramientas de dibujo) (Un extremo de la línea marcará el punto de partida y el extremo contrario será el punto de destino para el elemento animado)
- 13. Seleccionar el elemento, o imagen, en el fotograma origen y ajustarlo (circulito) al extremo inicial de la guía. (Para facilitar el proceso de "ajuste" es preferible tener activada la opción del menú VER > AJUSTAR A OBJETO) Seleccionar el elemento, o imagen, en el fotograma destino y ajustarlo (circulito) al otro extremo de la guía. Para comprobar visualmente el resultado de la animación, se puede utilizar la opción de pulsar Intro (no olvidar, para visualizarlo mejor, desactivar el icono de mostrar capa), o la del menú CONTROL > PROBAR
- 14. Automáticamente, Flash añade una nueva capa en la Línea de Tiempo justo encima de la que tiene la animación interpolada. Capa de guia
- 15. Ejemplos de guía de movimiento :
- 16. ANIMACION CON CAPAS
- 17. Con la Animación con Capas Máscara, cualquier forma que dibujemos en la capa máscara, será la forma a través de las que se muestre el contenido de las capas enmascaradas En otras palabras, quedará visible sólo lo que quede dentro de esta forma - a modo de agujero a través del cual se puedan ver las capas situadas por debajo-. e invisible lo que quede fuera CREACIÓN DE CAPAS DE MÁSCARA (con la capa activada) hacer clic con botón izquierdo sobre ella y elegir máscara.
- 18. Dibujamos -o escribimos- en el escenario la imagen -o el texto- que queremos sea mostrado a través de la máscara (p.e: el texto: "Realización Multimedia") e identificamos esta capa (p.e.: "texto", o "RealMulti", o similar) Insertar una nueva capa, por encima de la del texto (la identificamos como "máscara") En la capa máscara dibujar el objeto máscara través del cual queremos que se muestre el contenido de la capa texto "realización multimedia"(por ejemplo un círculo ovalado que rellenamos de color rojo), y lo agrupamos (modificar>agrupar). Situamos el objeto máscara dibujado en el punto inicial de la trayectoria a seguir. (p.e.: parte izquierda del escenario sin que tape al texto) PASOS PARA HACER UN TRABAJO EN FLASH
- 19. En la Línea de Tiempo colocamos un fotograma clave (F6) en el final de la trayectoria (fotograma 25), del objeto máscara (que hemos agrupado), y otro en el mismo fotograma de la capa del texto (fotograma 25). En el fotograma final de la capa "máscara" (fotograma 25), disponemos al objeto máscara en la situación final de su trayectoria. En la misma capa "máscara" volvemos al primer fotograma para Interpolar el movimiento del objeto máscara Transformamos la capa "máscara" que, hasta el momento es una capa normal (que en el ejemplo tiene el texto: "Realización Multimedia") en una capa máscara .
- 20. Transformación de una capa normal a una capa máscara Clic con el botón derecho del ratón sobre el nombre de la capa a transformar (que en el ejemplo tiene el círculo ovalado rojo, esto es el "objeto máscara") y escoger la opción "máscara". Observamos : - como la capa "máscara" obtiene, delante de su nombre, un icono cuadrado negro con un círculo azul en su interior como la capa "texto:RealMulti" obtiene, delante de su nombre, un icono cuadrado azul con una esquina medio doblada y se coloca ligeramente deslazada hacia el interior indicando su dependencia de la "capa máscara ". Por último Pulsar Intro - o la opción del menú CONTROL > PROBAR PELÍCULA- para ver el resultado
- 21. Para hacer un hipervinculo primero debes crear un boton, pasa hacerlo estos son los paso : 1.Selecciona una imagen o crea una figura. (circulo, cuadrado, etc) 2.Presiona F8, despues elije boton y da clic en Aceptar 3.Selecciona de nuevo el boton y presiona F9, te saldra un cuadro, debes copiar este texto: on (release) { getURL("http://www.google.com", "_blank"); } Nota: Debes de cambiar la URL por la que gustes. Dale click al objeto o capa que quieres que tenga el vinculo y despues en acciones le das doble click a geturl, ahi ingresas el vinculo y debajo el destino. CREACION DE HIPERVINCULOS :
- 22. VISITEN LA SIGUIENTE PAGINA WEB DONDE LES EXPLICARA TODO DETALLADAMENTE LO QUE SE DESEA APRENDER EN FLASH 8 MACROMEDIA: (HACER CLIC EN LA IMGEN)
- 23. GRACIAS POR SU ATENCION