Page 1

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

ADOBE® FLASH ® CS5

mireyaisela@hotmail.com

Apuntes y Trabajos M en NTI Mireya Isela Rodríguez Orozco M en I. Juan Alfonso Guzmán Zavala.

Nombre del Alumno:

Plantel:

Grado/Grupo/Turno.

Página 1


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Avisos leg ales

Apuntes y Trabajos Para la Capacitación

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

M en NTI Mireya Isela Rodríguez Orozco M en I. Juan Alfonso Guzmán Zavala.

Documentos seleccionados solo con fines educativos.

mireyaisela@hotmail.com

Página 2


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Introducción Flash CS5 es una potente herramienta que nos permite crear diferente tipo de contenido, como por ejemplo gráficos vectoriales, animaciones, recursos interactivos, aplicaciones multimedia, juegos, etc. En esta guía comenzaremos conociendo las herramientas de edición gráfica, para después adentrarnos en las diferentes herramientas de animación que ofrece Flash CS5, como por ejemplo el editor de movimiento, la animación de huesos y las herramientas 3D. También añadiremos sonido a nuestras animaciones. Objetivo El alumno al finalizar será capaz de realizar películas flash de uso cotidiano en el diseño web: banners, presentaciones animadas, películas interactivas, etc. Además de incluir utilidades multimedia como sonido y vídeo.

mireyaisela@hotmail.com

Página 3


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Tabla de contenido Bloque I : Manipular las funciones de las barras y paneles. ............................................................................. 7 Entorno de trabajo ........................................................................................................................................ 7 1.

Identifica la barra de herramientas principal. .................................................................................................... 8 Barra de Menús. ..................................................................................................................................... 9 El Escenario ...........................................................................................................................................10 La ventana de Línea de Tiempo..............................................................................................................12 Propiedades de la película .....................................................................................................................13 Dimensiones de la película ....................................................................................................................14

2.- Utilizar la ventana de herramientas principal. ......................................................................................................15 Guardar el espacio de trabajo ................................................................................................................16 Para guardar una configuración de pantalla seguimos estos pasos. ........................................................17 3.- Utiliza barra de herramientas, de control y de edición y maneja los diferentes paneles. .......................17 Cuadrícula .............................................................................................................................................18 Encajar ..................................................................................................................................................18 Acerca de las imágenes de vectores y mapas de bits ..............................................................................19 Imágenes de vectores ............................................................................................................................19 Imágenes de mapa de bits .....................................................................................................................19 Diferentes tipos de Archivos .fla y .swf ...................................................................................................20 Abrir un documento. .............................................................................................................................21 Trabajar con varios documentos. ...........................................................................................................21 Pre visualización y prueba de películas ..................................................................................................22 Resumen ...............................................................................................................................................22 Bloque II : Utilizar la ventana de herramientas principal. ...............................................................................24 1.

Desarrollar habilidades y destrezas en el uso de herramientas principales: ........................................24 Introducción ..........................................................................................................................................24 Línea .....................................................................................................................................................25 Lápiz ......................................................................................................................................................25 Propiedades del contorno .....................................................................................................................26

mireyaisela@hotmail.com

Página 4


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Pincel. ...................................................................................................................................................27 La herramienta Pluma ...........................................................................................................................30 Óvalos ...................................................................................................................................................31 Rectángulos ...........................................................................................................................................34 Polígonos/Estrellas ................................................................................................................................35 Selector de color ...................................................................................................................................36 Crear un color personalizado. ................................................................................................................37 Crear un color desde el Mezclador de color ...........................................................................................38 Colores alfa, Colores transparentes .......................................................................................................39 Bote de pintura. ....................................................................................................................................40 Bote de Tinta. ........................................................................................................................................41 Ayudas: Cuentagotas, lupa y mano. .......................................................................................................42 Cuentagotas. .........................................................................................................................................42 Lupa. .....................................................................................................................................................42 Crear un degradado. ..............................................................................................................................43 Aplicar un degradado. ...........................................................................................................................44 Transformar un degradado. ...................................................................................................................45 RESUMEN ..............................................................................................................................................47 Capas ....................................................................................................................................................51 Creación de capas..................................................................................................................................51 Para crear una capa: ..............................................................................................................................51 Representación de animaciones en la línea de tiempo ...........................................................................51 Edición de capas ....................................................................................................................................52 Animación .............................................................................................................................................53 Distinción de las animaciones en la línea de tiempo ..................................................................................53 Previsualización y prueba de películas ...........................................................................................................53 Para crear una capa de mascarilla ..........................................................................................................54 Uso de capas de guías............................................................................................................................54 Guías de movimiento.............................................................................................................................54 Bloque III: Crear símbolos y bibliotecas. ........................................................................................................64 Los símbolos ..........................................................................................................................................64 mireyaisela@hotmail.com

Página 5


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Creación de símbolos.............................................................................................................................64 Para crear un símbolo nuevo con elementos seleccionados: ..................................................................64 Las Bibliotecas .......................................................................................................................................66 Diferencia entre símbolo e instancia ......................................................................................................67 Bloque IV: Aplicar animación al dibujo...........................................................................................................72 Aspectos básicos de animaciones ..........................................................................................................72 Ejercicios ...............................................................................................................................................73 Interpolación de movimiento I : el vuelo de un águila ............................................................................73 Interpolación de de forma (cambio de color): ........................................................................................75 Animaciones fotograma a fotograma .....................................................................................................76 Interpolación de movimiento utilizando capa guía (clásica) ...................................................................76 Bloque V: Manipular botones. .......................................................................................................................85 Crear y manipula los aspectos del botón (reposo, sobre, presionado, zona activa). .............................................................85 Aplicar acciones y eventos del ratón y el teclado........................................................................................88 Botones de texto. La importancia de la zona activa ................................................................................89 Incluir un clip en un botón .....................................................................................................................89 Crear botones invisibles y de varias capas..................................................................................................90 Bitmaps y Botones .................................................................................................................................90 Auto Evaluación del Bloque. ..................................................................................................................92 Bloque VI: Manipular sonido. ........................................................................................................................95 Editar Sonidos .......................................................................................................................................99 Auto Evaluación:..................................................................................................................................103 Bloque VII: Manipular vídeo. .......................................................................................................................106 Ejercicio...............................................................................................................................................109 AUTO EVALUACIÓN .............................................................................................................................115 Bloque VIII: Publicar película. ......................................................................................................................119 AUTO EVALUACIÓN. ............................................................................................................................122

mireyaisela@hotmail.com

Página 6


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque I : Manipular las funciones de las barras y paneles. Entorno de trabajo Al iniciar el programa aparece en el centro de la pantalla una ventana de bienvenida. Esta ventana siempre va a aparecer al iniciar el programa. Ofrece información sobre el programa y posibilidades de inicio ya predeterminadas. Los espacios de trabajo de las distintas aplicaciones de Adobe® Creative Suite® 5 tienen la misma apariencia para facilitar e l cambio de una a otra. Además, si lo prefiere, puede adaptar cada aplicación a su modo de trabajar seleccionando uno de los varios espacios de trabajo preestablecidos o creando otro personalizado. Aunque el diseño del espacio de trabajo predeterminado varía en función del producto, los elementos se manipulan de manera muy parecida en todos los casos.

mireyaisela@hotmail.com

Página 7


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Identifica la barra de herramientas principal. Pero la interfaz de Flash s贸lo se activa al abrir un documento:

mireyaisela@hotmail.com

P谩gina 8


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Barra de Menús. Como en cualquier otro programa, en la parte superior de la pantalla se desarrolla la Barra de Menús:

ARCHIVO: Junto con el menú de Edición, es un menú común en cualquier programa. Nos permite manejar el flujo de trabajo con los diferentes archivos. Desde menú abriremos los documentos de trabajo, los guardaremos y los publicaremos. EDICIÓN: Al igual que en otros programas, desde este menú podremos realizar acciones de gestión y desplazamiento (Copiar, Cortar, Pegar...). VER: Se facilita el trabajo en la creación de una película Flash desde el punto de vista de cómo ver el área de trabajo. Incluye las opciones de ayuda al dibujo, como son las Reglas o la Cuadrícula. INSERTAR: hace referencia a todos los componentes que se pueden ir incluyendo en una película Flash; desde los símbolos, los fotogramas con diferentes cualidades o las escenas de que se compone la película final (es uno de los más usados). MODIFICAR: Desde este menú podremos alterar cualquier componente de la película... incluso la película en sí misma (es uno de los más usados). TEXTO: Nos permitirá controlar los diversos atributos aplicados al texto (no lo usaremos mucho). COMANDOS: Este nuevo menú administra la ejecución de acciones preprogramadas llamadas comandos. (En este curso no lo usaremos). CONTROL: Rige la reproducción de la animación. Más que este menú usaremos la barra de herramientas de mismo nombre que veremos más adelante. VENTANA: Este menú gobierna la visualización y organización de toda la interfaz del programa. Desde aquí puedes visualizar y ocultar cualquier panel o barra de herramientas que desees. AYUDA: Como cualquier otro por grama flash incluye un menú de ayuda.

Al contrario de lo que ocurre en otros programas, la ayuda de Flash es realmente una ayuda muy útil cuando estamos perdidos o queremos introducirnos en el conocimiento de alguna parcela del programa.

mireyaisela@hotmail.com

Página 9


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

El Escenario Una película de Flash, se divide en frames. Es en el escenario donde se visualizan y componen los frames individuales de la película, mediante su dibujo o con la organización de ilustraciones importadas.

mireyaisela@hotmail.com

Página 10


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

mireyaisela@hotmail.com

Pรกgina 11


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

La ventana de Línea de Tiempo Es donde se coordina el tiempo de la animación y se ensambla la ilustración en distintas capas. La ventana de línea de tiempo muestra todos los frames de la película. Las capas actúan como una pila de acetato transparente; mantienen la ilustración por separado, de forma que puedan combinarse distintos elementos en una imagen.

mireyaisela@hotmail.com

Página 12


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Propiedades de la película Antes de comenzar a realizar una película tenemos que acostumbrarnos a determinar sus características generales. Para ello vamos al menú MODIFICAR > DOCUMENTO, mostrándose un cuadro con las "propiedades " de la película.

d) e)

f) g)

a) Para la velocidad de frame´s, introduce en Frame Rate el número de frames de animación que deben mostrarse cada segundo. La mayoría de las animaciones que se visualizan en los sistemas locales, especialmente las que se reproducen desde un sitio Web, no necesitan una velocidad mayor de 8 a 12 fps (frames por segundo). b) Para el tamaño, usa una de las siguientes opciones: c) Para especificar el tamaño en pixeles, introduce en Dimensions valores de anchura y altura. El tamaño de película predeterminado es de 550 por 400 pixeles. El tamaño mínimo es de 18 por 18 pixeles; el máximo es de 2880 por 2880 pixeles. Para establecer el tamaño del escenario de forma que el espacio que rodea el contenido sea igual en todos los lados, haz Click en Match: Contents. Para establecer el tamaño del escenario con la mayor área de impresión posible, haz Click en Match: Printer. El área de impresión la determina el tamaño de papel que esté seleccionado en el área de Márgenes del cuadro de diálogo Configurar página, menos los márgenes establecidos. Para establecer el color de fondo de la película, escoge un color en la muestra de colores de Fondo. Selecciona la unidad de medida en la opción Ruler Units.

Estas propiedades se pueden variar también en cualquier momento a lo largo del trabajo con la película... y de una forma más rápida desde el Panel de Propiedades. Basta con hacer clic en una zona vacía del área de trabajo, es decir, no tener ningún objeto seleccionado:

NOTA: Un Frame es una unidad gráfica que almacena en un instante por, una porción de una escena, o bien el cuadro por segundo de una película.

mireyaisela@hotmail.com

Página 13


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Dimensiones de la película En este campo se establecen las dimensiones de la película en anchura y altura de la ventana escenario. Podemos hacer películas que ocupen desde toda la pantalla del ordenador hasta pequeños "banners" de publicidad para colocar en las páginas Web, o aplicaciones para pantallas de móviles. En la parte inferior del cuadro hay una opción en la que podemos elegir en qué unidades de regla queremos establecer el tamaño de la película. Es importante acostumbrarse a trabajar en píxeles, ya que afectará a varias opciones del programa (la unidad estándar en multimedia y páginas Web es el píxel). Las dimensiones de la película son, rigurosamente hablando, las dimensiones del escenario.

EL TAMAÑO NO IMPORTA ... IMPORTA EL INTERIOR Una película flash no ocupará más bytes por tener un gran tamaño en píxel, sino por la complejidad de los elementos que coloquemos en la animación. Es posible que ocupe más un pequeño banner con sonido que una gran animación a pantalla completa con vectores simples.

mireyaisela@hotmail.com

Página 14


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Utilizar la ventana de herramientas principal.

mireyaisela@hotmail.com

Pรกgina 15


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

TRUCO: CON LOS PANELES Podemos crearnos nuevos Paneles e incluso agrupar unas determinadas solapas en un panel u otro. Para incluir una solapa en un determinado panel actuaremos como sigue: 1.

Seleccionamos la solapa que queremos incluir en otro panel.

2. 3.

Pulsamos sobre el icono que aparece en la esquina superior derecha de cada panel. Del menú que se despliega elegimos la opción Agrupar "nombre de solapa"con... y elegimos el panel en el cual se agrupará. Si queremos crear un panel elegiremos la opción Nuevo grupo de paneles.

4.

Haciendo clic sobre el icono configuración del mismo.

de la esquina superior derecha del panel, aparecen todas las opciones de

Guardar el espacio de trabajo Por último, cuando ya nos hemos configurado la pantalla a nuestro gusto; visibles los paneles y barras que nos interesan, colocados en el lugar que nos es más cómodo... Podemos guardar esta configuración para usarla cuando deseemos. O podemos guardarnos varias configuraciones de pantalla según el trabajo que hagamos: edición de gráficos, Configuración de componentes o programación actionscript.

mireyaisela@hotmail.com

Página 16


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Para guardar una configuración de pantalla seguimos estos pasos. 1. Elegimos la opción de menú Ventana > Conjunto de Paneles > Guardar disposición de paneles 2. En el cuadro que aparece le damos un nombre a esa configuración de pantalla... y pulsamos Aceptar. 3. Desde esa opción del menú ventana podemos gestionar estas configuraciones de pantalla:

Utiliza barra de herramientas, de control y de edición y maneja los diferentes paneles. Uso de la paleta de herramientas

Las herramientas de la paleta de herramientas permiten dibujar, seleccionar, pintar y modificar ilustraciones. Otras herramientas permiten cambiar la visualización del escenario. La mayoría de las herramientas cuentan con modificadores auxiliares para las tareas de pintado o edición. Dentro de este Panel las herramientas se organizan por grupos:

1. El primer grupo nos ofrece las diferentes herramientas con que contamos para crear y modificar cualquier dibujo en el área de trabajo. En este caso se ve activada la herramienta de Selección y Movimiento (esquina superior izquierda). 2. Éstas son las herramientas de ayuda para la visualización del área de trabajo. 3. Éste es el controlador de color de Flash. Dividido en el color de Contorno y de Relleno.

4. Al final del panel aparecerán las opciones de la herramienta que tengamos activada. En este caso las opciones de la herramienta de Selección y Movimiento. NOTA: Para utilizar cualquiera de las herramientas del panel seguiremos los pasos siguientes: 1. Picamos en la herramienta que queremos utilizar o bien tecleamos el carácter del teclado de la herramienta. 2. Movemos el cursor a la escena y utilizamos la herramienta.

mireyaisela@hotmail.com

Página 17


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

TRUCO: ¡OCULTOS! En algunos momentos es interesante ocultar todos los paneles momentáneamente para ver mejor lo que estamos dibujando en el escenario. Pulsando la tecla F4 podemos ocular y volver a visualizar todos los paneles de un plumazo.

Cuadrícula Para visualizar la cuadrícula en la escena, debemos dirigirnos al menú Ver>Cuadrícula>Mostrar cuadrícula.

Desde la misma opción de menú podemos Editar la cuadrícula para que sea del tamaño que nosotros deseemos.

Encajar

Localizada en la barra de herramientas principal, la herramienta Encajar (...Imán para los amigos) funciona de dos formas: En primer lugar, si está activada la cuadrícula y ejecutamos la opción de menú Ver > Ajustar a cuadrícula... actuará como un imán de manera que al dibujar o editar, el cursor saltará forzándose a tomar puntos de esa cuadrícula. En segundo lugar, también actúa sobre los objetos de forma que al dibujar rectas se bloquean sobre los puntos finales o medios de las rectas. Cuando deseemos dibujar de forma libre desactivamos esta opción, ya que en ocasiones también puede dificultar el dibujo libre de siluetas. Otra herramienta de ayuda al dibujo son las "reglas", que también se pueden habilitar desde el menú ver. El uso de las reglas es sólo una ayuda visual para controlar las dimensiones en píxeles de nuestro dibujo. mireyaisela@hotmail.com

Página 18


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Acerca de las imágenes de vectores y mapas de bits Los sistemas muestran imágenes en formato de vectores o de mapa de bits. Es muy importante comprender la diferencia entre ambos formatos para poder utilizarlos de la forma más eficaz. Flash permite crear y animar imágenes de vectores compactas. También permite importar y manipular imágenes de mapa de bits creadas en otras aplicaciones.

Imágenes de vectores Los elementos gráficos de vectores representan imágenes mediante líneas y curvas, denominadas vectores, y tienen propiedades de color y posición. Cuando se edita una imagen de vectores, se modifican las propiedades de las líneas y curvas que definen su forma. La posición, el tamaño, la forma y el color de las imágenes de vectores puede cambiarse sin que por ello pierdan calidad. Las imágenes de vectores no dependen de la resolución, de pantalla, es decir se trabajan a cualquier resolución; sin embargo si dependen de la resolución del periférico de salida.

Imágenes de mapa de bits Los elementos gráficos de mapa de bits representan imágenes mediante puntos de color, denominados pixeles, que están organizados en una cuadrícula. Un mapa de bits que representa una imagen bitmap se representa mediante el valor específico de posición y color de cada píxel en la cuadrícula, que crea una imagen similar a la de un mosaico. La visualización de un mapa de bits depende de la resolución de pantalla; es decir que si se escala o visualiza a una resolución mayor de la estipulada, nuestra imagen se verá distorsionada y por consiguiente perderá calidad visual.

mireyaisela@hotmail.com

Página 19


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Diferentes tipos de Archivos .fla y .swf En el proceso de trabajo con Flash se ven involucrados diferentes tipos de archivos, pero explicar aquí todos ellos puede resultar un poco confuso. Nos centraremos principalmente en dos de ellos:

.Fla: Archivo de trabajo Este archivo es el que necesitamos para trabajar, dibujar, animar, hacer modificaciones... en la película. Es la extensión con la que se guarda el archivo cuando estamos trabajando. Así, podemos abrirlo, editarlo y trabajar con él, y restaurar con él los demás tipos de archivo. No es el archivo que se publica en Internet.

.Swf: archivo resultante Se caracteriza porque sólo es la visualización resultante de la película. No nos permitirá modificarla. Por eso tiene un tamaño muy reducido; motivo por el que Flash ha alcanzado tanta popularidad en la creación de animaciones dirigidas para Internet. Es el archivo que genera la película optimizada preparada para ser reproducida, y puede ser visto por cualquier persona que cuente con un Navegador de Internet y el plug-in Reproductor Flash (o Flash Player). El público no puede editar este tipo de archivo, sólo puede verlo. En resumen, el archivo .FLA es el ORIGEN y el archivo .SWF es el RESULTADO. Más adelante veremos que este archivo flash puede producir muchos tipos de archivo, lo que da versatilidad a este programa. Teniendo el .fla de una película podemos hacer con ella lo que deseemos.

mireyaisela@hotmail.com

Página 20


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Abrir un documento. Como en cualquier otro programa, para abrir un archivo los pasos son los siguientes: Elegimos la opción de menú Archivo > Abrir... (o pulsamos el icono de la barra de Herramientas principal) En el cuadro que aparece localizamos en la estructura de nuestro ordenador el archivo .fla en el que queremos trabajar. Lo seleccionamos y pulsamos Abrir.

Trabajar con varios documentos. Flash tiene la posibilidad de trabajar al mismo tiempo con más de un archivo abierto. Para organizarnos nos ofrece una fácil navegación por solapas por encima del panel de Línea de tiempo. Ejemplo, aquí vemos que están abiertos 3 documentos. Se está trabajando en el archivo WESTERN.fla (la solapa está activada). El documento Sin título-4 es un documento que se ha creado nuevo, por eso no tiene nombre.

TRUCO: MÁS RÁPIDO Y CÓMODO Si pulsamos con el botón derecho del ratón sobre estas solapas de los documentos abiertos podemos acceder a opciones rápidas:

Las opciones de Guardar todo..., Cerrar todo... son interesantes para guardar y cerrar todos los archivos abiertos de un plumazo¡¡¡

mireyaisela@hotmail.com

Página 21


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Pre visualización y prueba de películas Cuando estemos trabajando en un archivo .FLA nos interesará probar periódicamente la película y ver el resultado de lo que vamos consiguiendo. Hay dos formas de probar la película:

1. Desde el mismo programa Para ello basta con elegir la opción de menú Control > Probar Película... o mucho más rápido, con el comando de teclado Control+Intro. En este caso no salimos del programa para ver el resultado, es decir, el archivo .SWF que se abre en una ventana flotante (en versiones anteriores se abre la ventana a pantalla completa):

2. Probarla en el navegador Ya que un gran volumen de trabajo de Flash va dirigido a la web se nos da la posibilidad de ver la película resultante inscrita en una página web que reproducirá el navegador que tengamos predeterminado. Para ver la película en el navegador basta elegir la opción de menú Archivo > Vista previa de la publicación > Predeterminado, o, lo que es más rápido, pulsar la tecla F12. En los dos casos, lo que ha hecho Flash es producir a partir del documento .FLA los archivos necesarios para visualizar el resultado:.

Resumen Esta primera lección es un poco teórica pero es necesaria para asentar conceptos que por lo básicos que son tienen mucha importancia. Además, al utilizarlos repetidamente a lo largo de las lecciones nos acostumbraremos a ellos rápidamente. • Flash combina la creación de animaciones en 2D con aplicaciones para la interactividad con el espectador. • Esta interactividad se basa en la programación Actionscript, que veremos, pero en menor medida que las utilidades de animación.

mireyaisela@hotmail.com

Página 22


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. • La pantalla de Flash es mejor verla en resoluciones amplias... y se compone de Paneles que contienen Solapas. • El área de trabajo se compone del ESCENARIO (la zona visible y real de la película) y el área de trabajo (fuera del escenario, que no se ve pero puede albergar objetos). • El archivo de trabajo de flash son los .fla • Para probar el resultado de nuestro trabajo con el .FLA podemos: 1. Pulsar Control+Intro: se produce el archivo resultante .SWF 2. Pulsar F12: se produce el archivo resultante .SWF y la página web para que la reproduzca el navegador.

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por desempeño: Las funciones de las barras y paneles manipuladas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: En un software de animación manipula las funciones de las barras y paneles siguiendo las instrucciones planteadas por el docente

OBSERVACIONES

SI

NO

1. ¿Utilizó la barra de herramientas principal para el diseño de objetos? 2. ¿Empleó los elementos de la caja de herramientas? 3. ¿Aplicó comandos de la barra de control? 4. ¿Utilizó las opciones de la barra de edición? 5. ¿Empleó el panel de propiedades para establecer parámetros de los objetos dibujados? 6. ¿Manejó los elementos del panel de pantallas? 7. ¿Alineó las formas dibujadas mediante el panel alineación permitiendo la claridad y compresión del diseño de la animación (orden)? 8. ¿Aplicó los rellenos de color a las formas dibujadas con el panel mezclador de colores permitiendo la distinción clara de cada objeto de la película (orden)? 9. ¿Igualó colores utilizando las opciones del panel muestra de color? 10. ¿Modificó la ubicación de los objetos en el escenario mediante el panel información clarificando el diseño general de la animación (orden)? 11. ¿Manipuló la película a través de las opciones del panel escenas para obtener claridad en la presentación del diseño de la animación (orden)?

EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 23


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque II : Utilizar la ventana de herramientas principal. 1. Desarrollar habilidades y destrezas en el uso de herramientas principales:

Introducción En el tema anterior ya comentamos que, Macromedia Flash es un programa de animación de gráficos (aunque no debemos olvidarnos de las imágenes de mapa de bits). En este capítulo estudiaremos las diferentes herramientas de dibujo a partir de las cuales generaremos nuestras películas. Junto con el tema siguiente "Edición de formas" completaremos las posibilidades de dibujo y su modificación en flash. Al empezar a dibujar es mejor que nos restrinjamos a las formas geométricas simples y podremos conseguir composiciones elegantes. Para los que ya hayan usado otro programa de dibujo vectorial (Freehand, Illustrator, etc.): Veremos que la base es la misma, incluso tenemos la posibilidad de trabajar el trazado de forma detallada para hacer dibujos muy elaborados. También se notará como Flash concibe las opciones de dibujo como algo más intuitivo y rápido, pero con unas breves nociones podremos controlar lo que al principio puede parece un despropósito. Debemos quedarnos con la idea según la cual cuando dibujamos objetos en Flash se generan vectores (también llamados formas) correspondientes a las curvas y rectas que trazamos. Las formas que dibujamos con Flash se clasifican en dos tipos, los contornos que forman las siluetas de los objetos y los rellenos de color con los que pintamos el interior de dichas siluetas.

El tamaño (en bytes) de una película de flash aumentará a medida que la complejidad de las curvas que trazamos sea mayor (tenga mayor número de puntos y líneas), no por el tamaño que dichas curvas ocupen dentro de nuestra película. Por lo tanto si dibujamos un círculo esa película ocupará lo mismo tanto si ese círculo es pequeño o grande.

mireyaisela@hotmail.com

Página 24


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Línea Vamos a ver primero las herramientas para crear SÓLO CONTORNOS. Empezaremos con la herramienta de línea Para dibujar rectas realizamos los siguientes pasos: Picamos en la herramienta Línea del panel de Herramientas. ANTES DE DIBUJAR: Definimos los atributos del trazo del lápiz en el panel Propiedades. Pulsamos y arrastramos en la dirección que debería seguir la línea. Soltamos el botón del ratón donde queramos que ésta termine.

Si activamos esta opción de la barra Principal, el IMÁN, al dibujar líneas el punto inicial o el final se nos ajustará, se nos imantará, a cualquier referencia que haya en el área de trabajo: la cuadrícula, una guía o cualquier otra línea o forma que haya dibujado antes.

¡¡¡ÁNGULOS PERFECTOS!!!

Si mientras arrastramos se mantiene presionada la TECLA MAYÚSCULA se dibujan rectas horizontales, verticales y oblicuas de 45°.

Lápiz La herramienta lápiz permite dibujar SÓLO CONTORNOS a partir de trazos realizados a mano alzada. Además del color grosor y tipo de línea con que dibujamos (desde el panel Propiedades), podemos elegir el método de ajuste de los trazos dibujados.

mireyaisela@hotmail.com

Página 25


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. El método para dibujar con el lápiz sería éste: Activamos la herramienta Lápiz en el panel Herramientas. Especificamos los valores del dibujo en el panel Propiedades. Elegimos un MODO de LÁPIZ y dibujamos en el área de trabajo. ¿Qué es eso del Modo de Lápiz? Son diferentes opciones de la herramienta de Lápiz para facilitarnos el dibujo a los que no tenemos manos de artista... y a los demás también. Están localizados al final del panel de Herramientas. Al activar la herramienta Lápiz.

Enderezar: terminado el trazado a mano alzada, ajusta el trazado definitivo a tramos de línea y arcos (se aproxima poco al trazado original en el caso de emplear pocos trazos rectos). Es útil cuando queremos que el resultado de nuestro dibujo sea recto. Suavizar: terminado el trazado a mano alzada, ajusta el trazado definitivo con curvas blandas, lo que da al dibujo un resultado más suavizado. Parece que perfecciona nuestro dibujo. Ésta es una opción adecuada cuando queremos dibujar cualquier objeto o figura que no sea geométrico. Tinta: es el método más fiel al dibujo que hagamos arrastrando el Lápiz, por lo que depende mucho de la destreza que tengamos con el ratón o el Lápiz gráfico. Por esta razón quizás sea el método menos usado de los tres.

Propiedades del contorno Ya sea usando la herramienta de Línea o el del Lápiz estamos consiguiendo contornos. Al activar cualquiera de las dos herramientas podemos seleccionar las características de ese contorno desde el panel de Propiedades. Éstas son las más importantes:

mireyaisela@hotmail.com

Página 26


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Se añadieron nuevas propiedades que vienen de editores de dibujos vectoriales más potentes como Freehand: Extremo y Unión. Estas propiedades serán más visibles cuanto más grosor tenga el contorno al que se refieren. Extremo: determina el aspecto de los vértices finales del contorno.

Pincel. Si la herramienta de Lápiz SÓLO dibuja contornos... la herramienta de PINCEL SÓLO DIBUJA RELLENOS.

Para pintar con el pincel actuamos como sigue:

Seleccionamos la herramienta Pincel en el panel Herramientas Elegimos el color del relleno con el que queremos pintar.

mireyaisela@hotmail.com

Página 27


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Elegimos las características del pincel pulsando sobre los botones de la paleta que se despliega en la parte inferior del panel de herramientas, dentro del campo Opciones. Picamos sobre el escenario y arrastramos. En la siguiente imagen se ven varios trazos realizados con el pincel, donde hemos elegido el color rojo y cambiado el tamaño y tipo del pincel.

Modo Modo por defecto, pinta sobre los objetos existentes.

Pintar normal:

Modo relleno de pintura: Respeta los bordes de los vectores de los objetos dónde se dibuja. Modo pintar detrás: Pinta por detrás de lo que tenemos ya dibujado. Modo pintar selección: Pinta sólo sobre los objetos seleccionados... podemos seleccionar con la herramienta Flecha. Modo pintar dentro: Pinta dentro del contorno sobre el cual se empieza a pintar

mireyaisela@hotmail.com

Página 28


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Ejercicio Realiza las siguientes Imรกgenes.

mireyaisela@hotmail.com

Pรกgina 29


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

La herramienta Pluma Hasta ahora hemos visto cómo realizar objetos con las herramientas de dibujo básico. La herramienta de Pluma que ahora vamos a ver es más recomendada para usuarios que ya tienen cierta experiencia en la creación de dibujos vectoriales en otros programas como Freehand, Illustrator o Photoshop (con sus trazados). Si dominamos su relativa complejidad nos da la posibilidad de crear dibujos y formas más elaboradas.

1. Activamos la herramienta Pluma en el panel Herramientas. 2. Colocamos el cursor donde queramos que comience nuestro trazado y picamos. Aparecerá un punto de vértice (o primer nodo) con forma de círculo vacío. 3. Colocamos el cursor en el siguiente punto y de nuevo hacemos clic. Tendremos una línea que va de un punto a otro. 4. Continuamos picando hasta conseguir nuestro primer objeto (recuerda que con cada nuevo clic definiremos un nuevo punto de vértice que se unirá al anterior a través de los segmentos). 5. Si queremos que nuestra figura o trazado sea una figura cerrada, solo debemos picar de nuevo sobre el primer punto de vértice. Junto a la herramienta aparecerá un círculo blanco pequeño que nos indica que la forma será cerrada

La herramienta Pluma y los segmentos curvos Como vemos la pluma crea CONTORNOS de una forma simple, creando clic a clic los vértices o nodos de la forma y los segmentos que unen esos puntos. Por defecto la pluma crea segmentos rectos entre cada uno de los vértices o nodos... pero con un poco de detalle podemos conseguir segmentos curvos a medida que vamos dibujando con la pluma: 1. Activamos la herramienta Pluma . 2. Hacemos clic en el primer punto que definamos y estiramos ligeramente. 3. No debemos soltar el botón del ratón hasta que hayamos creado un selector que se extienda al menos un tercio de la longitud de la curva que queramos definir.

mireyaisela@hotmail.com

Página 30


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 4. (Debemos tener en consideración que los trazados curvos siempre serán tangentes a los selectores o vectores propios). 5. Seguimos haciendo clic para determinar el siguiente nodo o punto de nuestra forma. Si estamos realizando un elemento con segmentos curvos, deberemos ubicar cada uno de los nodos allá donde el segmento o trazado cambie la dirección de su curva, estirando a cada nuevo punto para extender los correspondientes selectores.

Óvalos Ahora vamos a ver las herramientas de dibujo que crean de una sola vez CONTORNO Y SU RELLENO, es decir, dos vectores de un plumazo. Se basan en formas geométricas simples, así que es muy sencillo. La primera, la herramienta Óvalo podemos pintar óvalos o círculos (si mantenemos pulsada la tecla Mayúsculas). Para dibujar un óvalo actuamos como sigue: Seleccionamos la herramienta óvalo . Especificaremos los valores de la herramienta desde el panel Propiedades.

mireyaisela@hotmail.com

Página 31


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

El primer selector de color

determina el color del contorno. El selector inferior, permite elegir el color

del relleno . Si bien lo veremos con más detalle unos puntos más abajo, también tenemos la posibilidad de elegir los colores de relleno y contorno de los objetos desde la parte inferior del panel Herramientas. Arrastramos la herramienta en el área de trabajo.

En este caso se ha dibujado un óvalo con un contorno de color azul oscuro, grosor 2 y estilo Sólido, y el relleno de color azul claro. Para dibujar el círculo se ha mantenido la tecla MAYÚSCULAS pulsada mientras se arrastra. Se han usado las mismas propiedades que en el anterior. Podemos dibujar óvalos (y otros objetos) sin contorno eligiendo en el primer selector (selector de color de contorno), la opción sin color. Tenemos dos opciones: Desde la parte inferior del panel Herramientas, una vez hemos pulsado sobre el icono "color de contorno" picaremos sobre el icono Ninguno.

Desde el panel Propiedades, desplegaremos la paleta de colores y elegiremos la opción Ninguno de la parte superior de la misma.

mireyaisela@hotmail.com

Página 32


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Del mismo modo, podemos dibujar 贸valos sin relleno eligiendo la opci贸n sin color en el selector de color de relleno.

Ejercicio Realiza las siguientes Im谩genes.

mireyaisela@hotmail.com

P谩gina 33


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Rectángulos La herramienta de dibujar Rectángulos funciona de la misma forma que la del óvalo Al activar la herramienta el panel de Propiedades nos ofrece las mismas posibilidades de contorno y relleno, ya que también dibuja a la vez el contorno y el relleno de una vez.

Una vez creados los rectángulos, o un cuadrado (manteniendo la tecla Mayúsculas pulsada) podemos seleccionarlos y volver a manipular sus propiedades: contorno, relleno, ancho, alto, coordenadas, etc. Igual que sucedía con el óvalo. La única propiedad diferenciada de esta herramienta de rectángulo es la posibilidad de determinar un redondeo a las esquinas del rectángulo o cuadrado que dibujemos. ¿Cómo? Sigue estos pasos: Antes de dibujar el rectángulo pulsa en el siguiente icono de opciones de Rectángulo (en la parte inferior del panel de herramientas):

Aparecerá un cuadro como éste, donde podrás estipular el Radio de ese redondeo de las esquinas:

Pulsamos Aceptar y arrastramos el cursor para dibujar: Conseguiremos un rectángulo o cuadrado con las esquinas redondeadas según el radio que nosotros hayamos estipulado.

mireyaisela@hotmail.com

Página 34


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

CUIDADO: EL REDONDEO Y SUS COSAS 

Una vez hayamos estipulado un redondeo, éste se aplicará a TODOS los rectángulos que dibujemos con esa herramienta. Si queremos rectángulos normales debemos poner ese Radio a 0. El Radio del redondeo de esquinas no es una propiedad del rectángulo dibujado, sino de la herramienta. Es decir, que una vez dibujado no se puede manipular desde el panel de Propiedades.

Polígonos/Estrellas Para activar esta herramienta basta mantener pulsada el icono de la herramienta de rectángulo y aparecerá la de Polígonos.

Su funcionamiento es muy similar al de las otras herramientas de forma (Óvalo y Rectángulo). Su peculiaridad es la opción de poder determinar el nº de lados del polígono y otras características de éste: 1. Activamos la herramienta de Polígonos y estrellas. 2. ANTES DE DIBUJAR nos dirigimos al panel de Propiedades y pulsamos en el botón de Opciones (sólo aparece con esta herramienta)

mireyaisela@hotmail.com

Página 35


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Selector de color Anteriormente hemos visto que es muy fรกcil elegir un color de los selectores de color (ya sea para relleno o contorno) que hay en el panel de Propiedades (al seleccionar una forma) o en el grupo de Opciones (al activar una herramienta de dibujo)

Desde este Selector de color podremos Elegir un color establecido Crear un color personalizado Crear un color con canal Alfa (grado de transparencia) Esta misma paleta de colores la podemos encontrar en la Muestras de color

solapa de

mireyaisela@hotmail.com

Pรกgina 36


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Crear un color personalizado. 1. Abriremos la paleta predeterminada de colores picando sobre el Selector de color (el de relleno o contorno) 2. Con el cursor nos dirigiremos sobre el botón Editor de Color. 3. Se abrirá el correspondiente cuadro de diálogo Color. 4. Editar un color desde este cuadro es muy intuitivo. Podemos partir del color que ya tenía el selector o elegir uno de los Colores Básicos de la izquierda... y después: Variar su tono y saturación picando en el campo de Gamas de color. Finalmente variar su luminosidad en la Barra de la derecha. 5. Para los más "sibaritas" del color también tenemos la posibilidad de editar un color numéricamente por dos parámetros diferentes: a. Matiz (tono) / Saturación / Luz: las tres características del color. Valor entre 0 - 240 b. Rojo / Verde / Azul: los tres canales de color en pantalla. Valor entre 0 - 255. 6. Una vez hayamos definido nuestro color podemos pulsar Aceptar y empezar a trabajar con él en el escenario, o podemos picar sobre el botón Agregar a los colores personalizados de la parte inferior. Y el color pasará a formar parte de la galería de Colores personalizados de este cuadro.

mireyaisela@hotmail.com

Página 37


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Crear un color desde el Mezclador de color Flash nos ofrece en la solapa/panel del Mezclador de colores el completo laboratorio que necesitamos para fabricar cualquier color. Nos debemos acostumbrar a su uso. Abrimos dicha solapa desde la opción de menú Ventana > Mezclador de colores ATENCIÓN: Debemos tener muy claro que el color con que estamos trabajando, del relleno o el contorno... activándolo en la casilla correspondiente. En este caso trabajamos sobre el color del relleno.

Tenemos el campo de la gama de colores, la barra de luminosidad y los valores numéricos de RVA (Rojo, Verde y azul) y el hexadecimal. ¡¡todo a mano en un mismo panel!!!

Y más posibilidades que tiene este panel que iremos viendo en esta lección.

Añadir un color a la Muestra El color que hayamos construido con el Mezclador de colores podemos insertarlo dentro de la muestra predeterminada de colores, para que aparezca ya directamente en el selector de colores de relleno y contorno. 1.- Una vez elegido el color pulsamos sobre el botón de Opciones de panel (en la esquina superior derecha del mismo) ... y elegimos la opción Añadir Muestra

mireyaisela@hotmail.com

Página 38


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

2.- A partir de ese momento el color formará parte de la lista predeterminada del Selector de colores y del Panel de Muestra de Color.

Para eliminar un color del panel de Muestra basta seleccionarlo y pulsar el botón de Opciones de ese panel (esquina superior derecha) y elegir la opción Eliminar muestra.

Colores alfa, Colores transparentes En Flash la transparencia es una propiedad más del color como la luz o la saturación. Por defecto la opacidad de los colores que seleccionemos será total... pero si queremos variar esa propiedad seguiremos estos pasos:

1. Seleccionamos el color que queramos aplicarle una transparencia. 2. En el panel Mezclador de colores, abriremos el selector de transparencia que se encuentra junto al campo Alfa o bien entraremos el valor, en porcentaje, directamente en el campo... el valor 100% es completamente opaco y 0% es totalmente transparente. En la mitad superior del cuadro Muestra se visualiza el porcentaje de transparencia tomando como referencia una cuadrícula.

mireyaisela@hotmail.com

Página 39


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. En la siguiente imagen se aprecia cómo el color verde de la copa del árbol de la derecha es 50% más transparente. Atención: en este caso las formas se han agrupado para poder superponerlas. Si quieres ver la propiedad de transparencia puedes visualizar la cuadrícula o mover la forma fuera del escenario.

Bote de pintura. Permite rellenar de un color un contorno cerrado. 1. Escogemos el color con el que queremos rellenar nuestro gráfico. 2. Activamos la herramienta Cubo de pintura en el panel Herramientas. 3. ANTES DE PINTAR... Elegiremos una de las opciones del Bote de pintura. De forma predeterminada el Bote de pintura sólo rellena contornos que estén perfectamente cerrados. Pero puede que el contorno que hemos dibujado no esté cerrado del todo y haya saltos en la línea... en ese caso deberemos elegir un Modo de Bote de pintura que tolere esas aberturas en el contorno. 4.- Una vez elegido la opción hacemos clic dentro del contorno que deseamos rellenar.

mireyaisela@hotmail.com

Página 40


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Se dibujó un contorno con el lápiz y lo he suavizado para que sea más sintético. No es completamente cerrado así que el botón de pintura tiene activada la opción de relleno más tolerante:

Cerrar huecos grandes. (Es el más recomendable)

En el caso de que el la abertura del contorno sea tan grande que el Modo más tolerante no lo rellene no nos quedara otra opción que editar el contorno y cerrarlo un poco más moviendo su vértice final para que se acerque más al inicial.

Bote de Tinta. Permite dar contorno a los rellenos que no lo tengan, y también puede aplicar las características activas del contorno (color tamaño, estilo...) en el panel de Propiedades a cualquier otro contorno que sea diferente. Por así decirlo, el Bote de tinta es a los contornos lo que el Bote de pintura a los rellenos. 1. Activamos la herramienta Bote de Tinta en el panel Herramientas. 2. Establecemos los atributos específicos de Contorno: el color, el grosor y el tipo de línea. 3. Pulsamos el borde de un gráfico. En el ejemplo cambiamos los bordes del tronco y de la copa.

mireyaisela@hotmail.com

Página 41


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

El bote de Tinta aplicará las propiedades que determinemos allí donde hagamos clic: ya sea para modificar un contorno que ya existe (derecha), como para dar contorno a un Relleno que no lo tiene (izquierda: con estilo punteado)

Ayudas: Cuentagotas, lupa y mano. Explicamos tres herramientas de la paleta de herramientas muy útiles a la hora de movernos por el escenario.

Cuentagotas. Permite poner como color actual el color seleccionado. Si queremos poner como actual un color ya empleado en el escenario, pulsamos sobre el cuentagotas y picamos en cualquier zona que tenga el color deseado.

Lupa. La opción Lupa permite ampliar o reducir la visualización de los gráficos o imágenes de nuestro escenario. Podemos cambiar de (+ a -) pulsando la tecla Alt. Zoom ventana. Con esta herramienta podemos ver una determinada zona del escenario, basta con arrastrar la Lupa englobando la parte que queremos ver.

Con la herramienta Mano podemos encuadrar la visualización dentro del escenario. Podemos acceder de una manera rápida al encuadre pulsando la barra espaciadora.

mireyaisela@hotmail.com

Página 42


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Crear un degradado. Para crearnos uno deberemos ir a nuestro laboratorio: el Mezclador de color (Ventana > Mezclador de colores) Seleccionamos Lineal o Radial en el cuadro desplegable : En el mismo panel Mezclador de colores especificaremos los atributos, en este caso de un degradado Lineal. La clave para editar nuestros propios colores en el degradado son las muestras de los colores que lo construyen: los cuadraditos Antes hay que tener bien claro cuál es el degradado que deseamos. Por ejemplo: vamos a conseguir uno de Amarillo a Verde. Para variar el color de esas muestras, y así el degradado, basta picar doble clic sobre la muestra del color que deseamos variar. Primero... la del color inicial:

De esta forma ya tenemos un degradado de Amarillo (inicial) a Verde (final). Lo vemos en el mezclador de colores y en el Selector de color en las opciones del panel de Herramientas.

mireyaisela@hotmail.com

Página 43


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Aplicar un degradado. Aquí vamos a explicar cómo pintar una forma con un degradado. No tiene mucho misterio; al igual que al pintar con un color sólido basta seleccionar el Bote de pintura y hacer clic sobre la forma. Pero lo interesante es que en los degradados juegan dos colores, eso implica dirección... por lo que os recomiendo que lo apliquéis ARRASTRANDO el ratón... Vamos a verlo:

Activamos el Bote de pintura en el panel Herramientas... y nos aseguramos de que el relleno tiene es degradado que deseamos. En este caso seguimos con el anterior: Lineal de Amarillo a Verde Arrastra el bote de pintura sobre la forma que quieres pintar con degradado:

La dirección y amplitud del arrastre son las que toma el Degradado El punto inicial del arrastre corresponde al color inicial del degradado... y lo mismo con el final.

mireyaisela@hotmail.com

Página 44


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. En el caso de que el Degradado, en vez de lineal, sea Radial...

basta hacer Clic, sin arrastre, ya que ese clic determina el centro del radio del degradado, que es el color inicial..

Transformar un degradado. Muchas veces al aplicar el degradado, lineal o radial, no estaremos de acuerdo con la dirección o amplitud del mismo. No es necesario volver a aplicarlo. Podemos variar los parámetros del degradado aplicado de una forma más detallada:

Activamos la herramienta Transformación de relleno en el panel Herramientas. Picamos en el área de relleno de degradado de nuestro gráfico. Aparecerán los controladores de extensión y rotación de degradado, en este caso del degradado Radial.

mireyaisela@hotmail.com

Página 45


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Por ejemplo: 1. Hemos movido el punto focal del degradado a la izq. 2. Lo hemos girado con el selector de Girar 3. Encogemos la anchura desde el cursor de Estirar 4. Aumentamos su tamaño con el selector de Amplitud 5. Finalmente movemos el punto central de referencia y con el todo el degradado

Por supuesto también podemos transformar un degradado Lineal, sus modificadores son similares mireyaisela@hotmail.com

Página 46


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

RESUMEN Ésta es una lección larga, con mucho contenido. Pero lo que hemos visto es de uso muy intuitivo y se irá practicando a lo largo de todo el curso. Con la práctica nos iremos haciendo a cada herramienta y sus opciones. Nos podemos tomar esta lección como glosario de las herramientas de pintura y volver a ella cada vez que tengamos una duda respecto a cómo dibujar tal cosa o cómo se usaba tal opción.  Al usar las herramientas de contorno, relleno o formas geométricas acostúmbrate a seleccionar las propiedades de la herramienta ANTES de ir al escenario para dibujar. 

Recuerda que sea lo que sea (relleno o contorno) siempre se puede variar una vez dibujado si lo seleccionamos y elegimos otras propiedades (en el panel de Propiedades). Tiende a dibujar figuras sintéticas, basadas en formas geométricas. Ayúdate de las opciones de Suavizar. Acuérdate del Imán para que las líneas de tu dibujo de ajusten entre ellas. Cuidado porque a veces tener activado el Imán es un problema. Para variar la forma de un vector: Selección

Edición rápida directamente sobre la forma.

Subselección

Edición detallada sobre los vértices y sus curvaturas.

 

Usa el Mezclador de colores para todo lo que tenga que ver con la fabricación y selección de un color.

mireyaisela@hotmail.com

Página 47


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 

En cuanto a los colores recuerda: o La opacidad (Alfa) es una característica más de cualquier color. o

Antes de seleccionar un color asegúrate de para quién lo estás seleccionando: ¿Para un relleno o para un contorno? Tienen selectores diferentes.

En cuanto a Degradados: o o

Da igual que sea Lineal o Radial, lo importante son los colores que lo forman. Procura aplicarlo arrastrando... Así determinarás ya de entrada la dirección.

o

Acostúmbrate a usar la herr. de Transformar degradados te guste cómo lo has aplicado.

o

Cuidado con el Bloqueador de relleno del Bote de pintura. A veces puede ser la solución pero otras muchas el problema.

mireyaisela@hotmail.com

siempre que no

Página 48


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Ejercicio 1.- Dibujo Es muy importante que vayas realizando los ejercicios propuestos. Ya que lo que ahora hagamos lo vamos a utilizar en ejercicios posteriores. Dibuja este árbol. Como hemos dicho puedes conseguir dibujos atractivos centrándonos en formas simples. Si no tienes experiencia en el dibujo vectorial te aconsejo que sigas los pasos de la ayuda y del vídeo. Ayuda: 1. Dibuja primero las formas SIN RELLENO, SÓLO CONTORNOS. 2. Parte de las herramientas de Forma. 3. Para dibujar las sobras, la del tronco, por ejemplo, usa la Línea... así cerramos un relleno que podemos colorear de otro color (un marrón más oscuro) Ayúdate del Imán.

mireyaisela@hotmail.com

Página 49


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

... y, ¿este otro modelo? Ayuda: 1. De nuevo empezamos dibujando formas geométricas pero SOLO CON CONTORNOS. 2. Como ves, el truco consiste en conseguir un área cerrada con contornos y después rellenarla del color elegido. 3. Las ramas están dibujadas con Líneas... con grosores diferentes (propiedades del contorno). Ayúdate del Imán.

A partir de estos modelos puedes hacer varias versiones... cambiando las propiedades del relleno y los contornos con

y

.

Guarda el archivo resultante como ARBOLES. fla

mireyaisela@hotmail.com

Página 50


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Capas Las capas (Layers) son como hojas de acetato transparente apiladas. Cuando una capa está vacía, las capas situadas debajo pueden verse a través de ésta. Una película creada con Flash contiene una capa. Añade más capas para organizar las ilustraciones y la animación de las películas. El número de capas que pueden crearse sólo está limitado por la memoria del sistema. Las capas no aumentan el tamaño del archivo de la película publicada. Los objetos de una capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. Además, las capas de guías pueden utilizarse para facilitar el dibujo y la edición y, las capas de máscara para facilitar la creación de efectos sofisticados. Utiliza capas separadas para los archivos de sonido y de acciones. De este modo encontrarás las acciones y los sonidos con mayor facilidad cuando tenga que editarlos.

Creación de capas Cuando se crea una capa nueva, ésta aparece encima de la capa seleccionada. La última capa creada es la capa activa.

Para crear una capa: Selecciona Insert > Layer ó da Click en el botón Add Layer que se encuentra en la parte inferior de la línea de tiempo.

Representación de animaciones en la línea de tiempo

mireyaisela@hotmail.com

Página 51


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Edición de capas En la capa activa se puede dibujar y pintar. Selecciona una capa para activarla. El icono de lápiz situado junto al nombre de la capa indica que es la capa activa. Sólo puede estar activa una capa. Los objetos pueden editarse en las capas desbloqueadas y visibles. Las capas pueden bloquearse para protegerlas de posibles cambios y ocultarse para mantener el área de trabajo despejado. Los objetos pueden verse como contornos en cualquier capa, puede determinarse el color del contorno y cambiar la posición de la capa.

mireyaisela@hotmail.com

Página 52


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Animación La animación se crea mediante el cambio del contenido de frames sucesivos. Puede hacer que un objeto se desplace a lo largo del escenario, aumente o disminuya de tamaño, gire, cambie de color, aparezca o desaparezca, o cambie de forma. Los cambios pueden ocurrir por separado o combinados entre sí. Por ejemplo, puede hacer que un objeto gire a medida que aparece y se desplaza por el escenario. Flash ofrece dos maneras de crear secuencias de animación: frame a frame y por interpolación (Tweening). En la primera, debe crear la imagen de cada frame, y en la segunda, sólo crea los frames inicial y final y Flash crea los intermedios. Cada frame en el que cambia algo en el escenario es un frame clave (Keyframe) . La animación frame a frame aumenta el tamaño del archivo de forma mucho más rápida que la interpolada. Distinción de las animaciones en la línea de tiempo Flash distingue la animación frame a frame de la interpolada en la línea de tiempo de la siguiente forma: Los frames clave de interpolación de movimiento (Keyframes) tienen un punto negro; los frames intermedios muestran una flecha negra sobre fondo azul claro. Los frames clave de la interpolación de forma tienen un punto negro; los frames intermedios muestran una flecha negra sobre fondo verde claro.  Una línea discontinua indica un problema en la interpolación. Los frames clave simples tienen un punto negro; los frames de color gris claro situados tras ellos tienen el mismo contenido. Los frames clave vacíos tienen un punto negro hueco. Una “a” pequeña indica que al frame se le asignó una acción de frame con el cuadro de diálogo Propiedades de frame.

Previsualización y prueba de películas Conforme vayas creando una película, necesitarás reproducirla para ver la animación y probar los controles interactivos. Las opciones disponibles son las siguientes: Para probar la animación sencilla, los controles interactivos básicos y el sonido, utiliza el controlador o el comando Reproducir, para realizar una visualización previa de la película dentro del entorno de creación de Flash. (Window > Controler ó Control >Play) Para probar toda la animación y todos los controles interactivos, usa los comandos Probar película (Control > Text Movie o Ctrl + Enter ) y Probar escena (Control > Text Scene o Ctrl. + Alt + Enter) para crear películas de Reproductor Flash que se reproduzcan en otra ventana. Para probar la película en un navegador Web, utiliza el comando File > Publish Preview > HTML.

Uso de Máscaras

mireyaisela@hotmail.com

Página 53


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Una capa de máscara oculta todo aquello que está vinculado a dicha capa, excepto el lugar donde se sitúa el objeto con relleno. Un objeto de tipos en la capa de máscara crea un agujero a través del cual se ve el contenido de las capas situadas debajo. Las capas de máscara pueden contener una sola forma, instancia u objeto de tipo.

Para crear una capa de mascarilla 1. Crea una capa que incluya el contenido que desea mostrar a través de los agujeros de la máscara. 2. Asegúrate de que la capa creada está seleccionada y elige Insertar > Capa para crear una capa nueva encima. Una capa de máscara siempre cubre la capa situada debajo, por tanto asegúrate de crear la capa en el lugar correcto. 3. Dibuja una forma rellena, coloca un tipo o crea una instancia de un símbolo en la capa de máscara. Flash ignora los mapas de bits, degradados, transparencias, colores y estilos de línea en una capa de máscara. Todas las áreas rellenas de una máscara son transparentes; y las áreas no rellenas son opacas.

Uso de capas de guías Para facilitar el dibujo, utiliza capas de guías. Puede visualizarse una cuadrícula de fondo en todas las escenas o crear una ayuda personalizada en una capa y designarla como la capa de guías. La capa de guías se señalan con un emblema de guía que se muestra delante del nombre de la capa. La capa de guías no se ve en las películas del Reproductor Flash publicadas. Para designar una capa como capa de guía: Haga Click en el botón derecho del ratón (Windows) y elija Guía en el menú contextual. Para cambiar la capa de guías a capa normal: Seleccione la capa y elige Guía en el menú contextual de esa capa. Nota: Sitúa todas las capas de guías en la última posición de la serie de las capas. De este modo se evita arrastrar de forma accidental una capa normal sobre una capa de guías y convertirla en una capa de guía de movimiento.

Guías de movimiento Las capas de guía de movimiento permiten dibujar trazados a lo largo de los cuales se animan instancias, grupos y bloques de tipos interpolados. Puedes vincular varias capas a una capa de guía de movimiento para hacer que varios objetos sigan el mismo trazado. Al vincular una capa normal a una capa de guía de movimiento se convierte en una capa con guía. Los trazados flexibilizan la animación, obligando a un símbolo a seguir un camino determinado sin necesidad de crear más key frames que el inicial y el final. Para crear un trazado debes de seleccionar la capa que contendrá la animación y pulsamos el botón Añadir Capa guía.

mireyaisela@hotmail.com

Página 54


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Practica sugerida 1 En los programas de animación, así como en cualquier otro programa de dibujo, es importante tomar en cuenta que existen muchas herramientas que permiten que el objeto sea cada vez más complejo y que siempre se tiene que empezar de lo más sencillo a lo más complejo. Se sugiere realizar esta práctica en donde el docente guie al alumno. 1.- Película en blanco, obsérvese la selección de la herramienta óvalo. 2.- Óvalo dibujado, relleno con los colores por defecto. 3.- Selección del objeto con la 8herramienta Flecha 4.- Selección del objeto ya realizada. 5.- Panel Alineación utilizado para centrar en la escena el objeto. 6.- Relleno con degradado lineal aplicado al objeto. 7.- Modificación de la orientación del relleno utilizando la herramienta transformación de relleno. 8.- Copiado del objeto dibujado (una vez seleccionado). 9.- Inserción de una nueva capa. 10.- Pegado del objeto en la nueva capa y alineación mediante el panel Alineación. 11.- Modificación del relleno y su orientación. 12.- Eliminación del borde del segundo objeto e inserción de una nueva capa. 13.- Copiado y pegado del objeto en la nueva capa. 14.- Modificación del relleno a relleno radial 15.- Selección del nuevo objeto y activación del panel transformar. 16.- Reducción del nuevo objeto (rojos) con el panel transformar. 17.- Inserción de una nueva capa. 18.- Inserción de un letrero mediante la herramienta texto. 19.- Modificación del tamaño del objeto texto con la herramienta transformación libre. 20.- Objeto modificado en su tamaño. 21.- Modificación del relleno del texto con la herramienta Color de relleno. 22.- Objeto finalizado.

mireyaisela@hotmail.com

Página 55


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

PRACTICA 1 Objetivo Esta primer práctica tiene como objetivo familiarizarse con la interfaz de Flash, así como aprender a crear una animación usando elementos básicos utilizando las herramientas de la paleta de dibujo, y como parte final se aplicarán movimientos y efectos sencillos a objetos de la película. Al final de la práctica se obtendrá una imagen como la que se muestra a continuación (figura 1), logrando que el barco se desplace de izquierda a derecha al movimiento de la olas.

mireyaisela@hotmail.com

Página 56


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Desarrollo Para realizar esta práctica, es necesario seguir los siguientes pasos: 1. Crea una nueva película con dimensiones de 550 x 400 pixeles con fondo blanco. 1.1 Selecciona del menú Archivo nuevo. En la versión en Ingles.

1.2 Selecciona Modify > Movie y cambia las propiedades modificando las dimensiones y color del fondo del escenario.

mireyaisela@hotmail.com

Página 57


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 2. Tienes que crear un cielo, un sol, unas nubes y olas en el escenario, para esto haz lo siguiente: 2.1 Selecciona el primer keyframe vacío de la línea de tiempo. Utiliza en la paleta de herramientas la opción del rectángulo y traza un cuadrado que abarque todo el escenario, esto hará la función de cielo. 2.2 Cambia el color del rectángulo utilizando la paleta de color, y crea un degradado que se difumine de un azul con coordenadas RGB (53,96,223) a un tono con coordenadas RGB (121,223,224).

2.3 Crea otra capa o layer, y de igual forma utiliza la paleta de herramientas para crear un sol, selecciona la opción “elipse” para crear un círculo y dibújalo con un gradiente, esto se lo indicas en las opciones de degradado. 2.4 Para crear las nubes usaras la brocha ubicada también en la paleta de herramientas, esto lo tendrás que realizar en otra capa o layer. Nota. Utilizando los diferentes estilos de brocha podrás darle mejor efecto a las nubes.

mireyaisela@hotmail.com

Página 58


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Para realizar las olas, tendrás que crearlas en tres diferentes capas o layers debido a que les daremos diferentes movimientos. Para dibujar las olas utiliza la herramienta del lápiz , selecciona un estilo de línea para mayor facilidad en el trazo del dibujo. ( figura 2 )

3. Anima las olas que vayan en sentidos distintos unas de otras. 3.1 Posiciona el puntero en el keyframe donde se encuentra la “ola” que quieras animar, en seguida arrastra el keyframe al frame 20, notaras que los frames intermedios están en blanco, para corregir esto tendrás que regresar el keyframe a la posición original. Ahora podrás mover la cabeza lectora a cualquier frame de la capa y se encontrará el dibujo de la “ola” en todos los frames.

mireyaisela@hotmail.com

Página 59


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 3.2 Una vez realizado el paso anterior, posiciónate en el keyframe y da click derecho , observa que aparece un menú, escoge la opción Create Motion Tween ( figura 3 ). En seguida, tendrás que insertar un keyframe en el frame 20; para esto debes de dar click derecho en el frame y seleccionar Insert keyframe ó la llave corta ( F6 ). ( figura 4 ) Realiza la misma operación para las demás olas que deseas animar.

3.3 Una vez creado el keyframe en el frame 20, tendrás que mover el objeto (la “ola”) a la posición que deseas que se desplace. Mueve la cabeza lectora y observa la animación que creaste. 3.4 Ahora, tendrás que crear (dibujar) un barco y animarlo como se muestra en la figura siguiente (figura 5). Todo lo podrás hacer con los conceptos y conocimientos que obtuviste en los pasos 3.1 – 3.3

mireyaisela@hotmail.com

Página 60


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Una vez terminada la animaci贸n, la puedes pre visualizar y probar.

mireyaisela@hotmail.com

P谩gina 61


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B2IEM1 Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia Evidencia por desempeño: Las funciones de las barras y paneles manipuladas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: En un software de animación manipula las funciones de las barras y paneles siguiendo las instrucciones planteadas por el docente

OBSERVACIONES

SI

NO

1. ¿Utilizó la barra de herramientas principal para el diseño de objetos? 2. ¿Empleó los elementos de la caja de herramientas? 3. ¿Aplicó comandos de la barra de control? 4. ¿Utilizó las opciones de la barra de edición? 5. ¿Empleó el panel de propiedades para establecer parámetros de los objetos dibujados? 6. ¿Manejó los elementos del panel de pantallas? 7. ¿Alineó las formas dibujadas mediante el panel alineación permitiendo la claridad y compresión del diseño de la animación (orden)? 8. ¿Aplicó los rellenos de color a las formas dibujadas con el panel mezclador de colores permitiendo la distinción clara de cada objeto de la película (orden)? 9. ¿Igualó colores utilizando las opciones del panel muestra de color? 10. ¿Modificó la ubicación de los objetos en el escenario mediante el panel información clarificando el diseño general de la animación (orden)? 11. ¿Manipuló la película a través de las opciones del panel escenas para obtener claridad en la presentación del diseño de la animación (orden)? 12. ¿Modificó los objetos del escenario mediante el panel transformar? 13. ¿Manipuló las acciones de los objetos a través del panel de acciones? 14. ¿Controló la instancia de los símbolos mediante el panel comportamiento? 15. ¿Modificó el contenido de la película a través de las opciones del panel componentes? 16. ¿Manipuló los objetos de la película mediante el panel inspector de componentes? EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 62


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B2/IEM/2 Evidencia por desempeño: El uso de la caja de herramientas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Utiliza la caja de herramientas de un programa de animación para crear una película, siguiendo las instrucciones planteadas por el docente.

SI

NO

1. ¿Utilizó la herramienta flecha en los elementos del espacio de trabajo cuidando la claridad del concepto de diseño general de la animación (orden)? 2. ¿Usó la herramienta línea? 3. ¿Dibujó vectores mediante la herramienta pluma? 4. ¿Dibujó forma óvalo en el escenario de trabajo? 5. ¿Aplicó la herramienta transformación libre? 6. ¿Dibujó formas en el escenario mediante la herramienta lápiz contribuyendo con ello a la claridad del concepto de diseño general de la animación (orden)? 7. ¿Manipuló los rellenos mediante las herramientas bote y cubo de pintura? 8. ¿Aplicó la herramienta cuentagotas? 9. ¿Manipuló las vistas del escenario a través de la herramienta mano? 10. ¿Utilizó la herramienta color de trazo para los objetos dibujados en el escenario? 11. ¿Aplicó la herramienta blanco y negro? 12. ¿Aplicó la herramienta de subselección en las formas dibujadas en el escenario? 13. ¿Seleccionó fracciones de los objetos del escenario a través de la herramienta lazo? EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 63


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque III: Crear símbolos y bibliotecas. Los símbolos Los símbolos son imágenes reutilizables que se crean con las herramientas de dibujo. Cuando se coloca un símbolo en el escenario o dentro de otro símbolo, se está creando una instancia del símbolo. Los símbolos reducen el tamaño de los archivos, ya que Flash, sin considerar el número de instancias creadas, sólo guarda una copia en el archivo. Los símbolos también son parte esencial en la creación de películas interactivas. Por ejemplo, los botones sobre los que puede hacer Click y que cambian en respuesta al puntero del ratón son un tipo de símbolos. Otro tipo de símbolo, el clip de película, también se utiliza para crear películas interactivas más elaboradas.

Creación de símbolos Puede crear un símbolo a partir de los objetos seleccionados en el escenario o crear un símbolo vacío y llenarlo en modo de edición de símbolos. Los símbolos pueden tener toda la funcionalidad disponible en Flash, incluida la animación. Mediante los símbolos con animación pueden crearse películas con mucho movimiento al mismo tiempo que se reduce al mínimo el tamaño del archivo. Considera la posibilidad de crear animación en un símbolo cuando exista una acción repetitiva o cíclica, por ejemplo el movimiento hacia arriba y hacia debajo de las alas de un pájaro.

Para crear un símbolo nuevo con elementos seleccionados: Seleccionamos el o los objetos que queramos convertir en un símbolo. Lo más habitual es partir de una forma. Abrimos a la ventana Convertir en símbolo, accediendo al menú Insertar → Nuevo Símbolo, desde el menú contextual eligiendo Convertir en símbolo, o directamente con las teclas Ctrl + F8 o F8.

mireyaisela@hotmail.com

Página 64


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos el nombre del símbolo que vamos a crear, y que nos permitirá identificarlo en la biblioteca, lo que se hará imprescindible cuando tengamos muchos símbolos.

Sólo nos queda seleccionar el tipo de símbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico. Sus características y las diferencias entre ellos las veremos en temas posteriores. Lo más habitual es Clips de película para los objetos que queremos mostrar en el escenario, y Botón si queremos que actúe como tal. Bastará con pulsar Aceptar para tener nuestro símbolo creado.

Para crear un nuevo símbolo vacío: 1 Asegúrate de que no hay nada seleccionado en el escenario y realiza uno de los siguientes pasos: Selecciona Insertar > Nuevo Símbolo o bien, Haz Click en el botón Nuevo símbolo en la parte inferior de la ventana de biblioteca o bien, Elige New Symbol, en el menú Opciones en la ventana de biblioteca. 2 En el cuadro de diálogo Propiedades de símbolo, escribe el nombre del símbolo y elige Clip de película , Botón, o Gráfico en Comportamiento. 3 Para crear el contenido del símbolo, utiliza la línea de tiempo, dibuja con las herramientas de dibujo, importa medios o crea instancias de otros símbolos. 4 Cuando hayas terminado de crear el contenido del símbolo, selecciona Editar > Editar Pelicula o (Ctrl+E) para salir del modo de edición de símbolos. Ventana de edición de Símbolos

mireyaisela@hotmail.com

Página 65


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

EJERCICIO: 1. Abre el archivo trabajo.fla con el que venimos probando cosas a lo largo del curso. 2. Seleccionamos el óvalo haciendo doble clic sobre él. 3. Abrimos el menú Insertar → Nuevo Símbolo... de la barra de menús. Se desplegará una ventana como la de la figura. 4. En el campo Nombre introducimos el nombre de nuestro gráfico, por ejemplo "Mi Primer Símbolo". 5. Seleccionamos la opción Gráfico en el apartado Tipo. Con esto le decimos a Flash que el nuevo símbolo será un gráfico. 6. Pulsamos Aceptar y ya tenemos nuestro primer símbolo gráfico creado.

Las Bibliotecas En Flash podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las películas que hemos creado. Todas ellas las tenemos a nuestra disposición para utilizar los símbolos que contienen. Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a la Barra de Menús, Ventana → Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de símbolos: botones, clips o gráficos.

mireyaisela@hotmail.com

Página 66


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Para acceder a la líbrería de símbolos de la película que estamos creando de nuevo vamos a la Barra de Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos los símbolos que hemos creado hasta el momento. Podemos comprobar cómo el nuevo símbolo que hemos creado en el ejercicio anterior (Ejercicio Crear Símbolo) se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar.

Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan: Clip Botón Gráfico

Diferencia entre símbolo e instancia Como hemos comentado anteriormente, cuando creamos un símbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una película, éste se convierte en una instancia. Aunque parece que sean lo mismo, la importancia de esta distinción es que cuando utilicemos un símbolo que hayamos creado previamente en una película, al modificarlo se modificará la instancia, mientras que el objeto seguirá intacto, tal y como era en el momento de su creación, de manera que podremos volverlo a utilizar en otro momento. A la derecha tenéis un ejemplo de una biblioteca, en este caso una biblioteca estándar de Flash. Cada elemento de la biblioteca es un símbolo.

mireyaisela@hotmail.com

Página 67


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Ejercicio paso a paso. 1 Vamos al menú Ventana → Bibliotecas Comunes. 2 Seleccionamos la primera opción del submenú que aparecerá (Botones). Aparecerá la librería de botones predefinidos de Flash 8. 3 Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera carpeta que aparece en la lista (Arcade buttons). Se abrirá una lista con todos los símbolos contenidos en la carpeta. 4 Arrastramos el primer símbolo (arcade button - blue) a nuestra área de trabajo. Aparecerá en el papel el símbolo que habíamos arrastrado. Esto es una instancia del símbolo llamado arcade button blue. Comprobémoslo. 5 Seleccionamos nuestra nueva instancia. 6 Seleccionamos la herramienta Transformación Libre y modificamos el tamaño de la instancia arrastrando los extremos del objeto. 7 Bien, ahora hemos modificado la instancia. Comprobemos que el símbolo sigue intacto. Repitamos lo que hicimos en el paso 5. Como vemos, el botón ha aparecido de nuevo, pero no con el tamaño que le acabamos de dar, sino con su tamaño original. Esto sucede porque lo que hemos reducido de tamaño era tan sólo una instancia del símbolo, no el símbolo mismo, y esto es lo que se ha modificado. Por tanto podemos seguir insertando y modificando ese símbolo y cualquier otro en esta u otra película ya que estaremos insertando instancias.

mireyaisela@hotmail.com

Página 68


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B3IEM1 Evidencia por desempeño: Los símbolos y bibliotecas creadas en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Crea una película que contenga símbolos y biblioteca en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI

NO

1. ¿Insertó símbolos en blanco en el escenario? 2. ¿Convirtió objetos en símbolos siguiendo los procedimientos marcados por el software de animación (orden)? 3. ¿Organizó los símbolos en la biblioteca a través de carpetas facilitando la presentación clara y comprensible de la película (orden)? 4. ¿Insertó en el escenario los símbolos almacenados en la biblioteca para contribuir a la claridad del concepto de diseño de la animación (orden)? 5. ¿Duplicó símbolos? 6. ¿Editó los símbolos almacenados en la biblioteca para clarificar el concepto de diseño general de la animación (orden)? 7. ¿Eliminó los símbolos almacenados en la biblioteca que no permitían la comprensión del concepto de diseño general de la animación (orden)? EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 69


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B3IEM2 Evidencia por producto: Los símbolos y bibliotecas creadas en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Crea una película que contenga símbolos y biblioteca en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI

NO

1. La Película contiene símbolos y bibliotecas creados y organizados claramente (orden) en: - Símbolos gráficos. - Símbolos clip de película. - Símbolos botón. - Carpetas de símbolos. - Objetos importados. EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 70


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Prueba Tema 9: Símbolos Solo una respuesta es válida por pregunta. Selecciona la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución. Si pulsas Restablecer podrás repetir la evaluación. 1. Darle un nombre concreto a los símbolos no es importante. a) Verdadero.

b) Falso.

2. Las Bibliotecas Comunes de Flash aparecen desde la primera vez que abrimos el programa. a) Verdadero.

b) Falso.

3. Para insertar un símbolo de biblioteca en una película abrimos la biblioteca y hacemos doble clic sobre el símbolo. a) Verdadero.

b) Falso.

4. Para cambiar el tamaño de un símbolo, lo insertamos en nuestro documento y utilizamos la herramienta "escalar". a) Verdadero.

b) Falso.

5. ¿Cuál es cierta?. a) La Biblioteca nos permite guardar copias de todas las instancias que tengamos, lo que nos ayuda en la organización de nuestra película. b) Con el panel Propiedades podemos modificar internamente la instancia seleccionada. c) Con el panel Propiedades podemos modificar externamente la instancia seleccionada. 6. ¿Cuál de las siguientes afirmaciones es falsa?. a) El efecto Alfa permite ver objetos situados en capas inferiores cuando su valor es distinto del 100%. b) El efecto Tinta permite modificar cada uno de los colores presentes en la instancia. c) El efecto Avanzado combina varios de los efectos sobre instancias que ofrece Flash. 7. Por razones de copyright no podemos utilizar más de un símbolo de las bibliotecas comunes por película. a) Verdadero.

b) Falso.

8. Todos los símbolos que incluyamos o podamos encontrar en nuestras películas serán de estos tres tipos: Clip de película, Gráfico y Botón. a) Verdadero.

b) Falso.

mireyaisela@hotmail.com

Página 71


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque IV: Aplicar animación al dibujo.

Aspectos básicos de animaciones Tipos de animaciones Adobe® Flash® ofrece varias formas de crear animación y efectos especiales. Cada método proporciona distintas posibilidades para crear contenido animado. Flash admite los siguientes tipos de animación: Interpolaciones de movimiento Las interpolaciones de movimiento se utilizan para establecer las propiedades de un objeto, por ejemplo, la posición y la transparencia alfa de un fotograma y, de nuevo, de otro fotograma. Flash interpola los valores de las propiedades de los fotogramas intermedios. Las interpolaciones de movimiento resultan útiles para animaciones con movimiento continuo o para la transformación de objetos. Las interpolaciones de movimiento aparecen en la línea de tiempo como grupos de fotogramas contiguos y se pueden seleccionar como un solo objeto de forma predeterminada. Las interpolaciones de movimiento son realmente potentes y fáciles de crear. Interpolaciones clásicas Las interpolaciones clásicas son como las interpolaciones de movimiento, aunque más difíciles de crear. Las interpolaciones clásicas permiten agregar efectos de animación específicos que no son posibles en interpolaciones basadas en el tamaño. Poses de cinemática inversa: Las poses de cinemática inversa permiten estirar y doblar objetos de forma, así como vincular grupos de instancias de símbolos para que se muevan al mismo tiempo y con naturalidad. Puede colocar el objeto de forma o instancias vinculadas de distinto modo y en fotogramas diferentes; Flash interpola las posiciones de los fotogramas intermedios. Interpolaciones de forma: En la interpolación de forma, se dibuja una forma en un fotograma concreto de la línea de tiempo y se modifica o se dibuja otra forma en otro fotograma específico. Seguidamente, Flash interpola las formas intermedias de los fotogramas intermedios y crea la animación de una forma cambiante. Fotograma a fotograma animación: Esta técnica de animación permite especificar distintas ilustraciones para cada fotograma de la línea de tiempo. Utilice esta técnica para crear efectos como el de fotogramas de una película que se suceden rápidamente. Esta técnica resulta útil en animaciones complejas donde es preciso que los elementos gráficos de cada fotograma sean distintos.

mireyaisela@hotmail.com

Página 72


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Ejercicios Interpolación de movimiento I : el vuelo de un águila En la interpolación de movimiento, el diseñador define la posición, el tamaño y la rotación de un objeto sobre el escenario en un fotograma clave inicial. Estas propiedades las modifica en el fotograma clave final. Flash generará sobre el escenario la secuencia de transición de un estado a otro.

En este ejemplo vamos a diseñar el vuelo de un águila. 1. Cuando se abre un archivo de película nueva mediante Archivo > Nuevo, Flash se sitúa en la capa actual Capa 1 y en ella sitúa en la posición nº 1 un fotograma clave (rectángulo con punto hueco en su base) a la espera de rellenarlo con alguna imagen. 2. Arrastra una instancia del símbolo gráfico Águila desde la carpeta Gráficos en Ventana > Otros paneles > Bibliotecas comunes > Curso. Sitúa el águila en la esquina inferior izquierda del escenario. Observa que el fotograma clave ahora muestra un punto negro indicando que ya contiene una imagen. 3. Crea un segundo fotograma clave (fotograma clave final) donde desees que concluya la animación. Por ejemplo, haz clic sobre el fotograma nº 30 de esa capa. Una vez seleccionado, elige la opción Insertar > Línea de tiempo > Fotograma Clave. Otra opción es hacer directamente clic derecho sobre el fotograma nº 30 y seleccionar Insertar fotograma clave en el menú contextual que se despliega. Flash automáticamente rellena ese nuevo fotograma clave con el contenido del anterior. 4. Asegúrate que está seleccionado el fotograma nº 30. Ahora pincha y arrastra el águila para moverlo hasta la esquina superior derecha del escenario.

mireyaisela@hotmail.com

Página 73


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 5. También puedes reducir su tamaño. Utiliza la herramienta Transformación libre (Q) y su opción Escalar. Arrastra el selector de la esquina superior derecha del águila. 6. Advierte que los cambios de posición y tamaño sólo afectan al fotograma clave nº 30. Al hacer clic en la línea de tiempo sobre el fotograma clave nº 1, se observa la posición y tamaño inicial del objeto. 7. Clic sobre el fotograma clave nº1. Si el Inspector de Propiedades no está visible, selecciona Ventana > propiedades. 8. En la lista desplegable Animar del Inspector de propiedades selecciona Movimiento. Éste es el tipo de interpolación que vamos a utilizar.

Figura Inspector de propiedades del fotograma inicial 9. Activa la casilla Escalar para interpolar el cambio de tamaño del elemento seleccionado. 10. En la lista desplegable Aceleración arrastra el deslizador o se introduce un valor para ajustar la velocidad del cambio entre fotogramas interpolados: • Para empezar la interpolación de movimiento lentamente y acelerar hacia el final de la animación, arrastra el deslizador hacia abajo o introduce un valor entre -1 y -100. Nota que aparece la etiqueta Dentro. • Para empezar la interpolación de movimiento rápidamente y ralentizar hacia el final de la animación, arrastra el deslizador hacia arriba o introduce un valor entre 1 y 100. Aparece la etiqueta Fuera. La velocidad de cambio predeterminada entre los fotogramas interpolados es constante. La opción Aceleración crea una apariencia más natural de aceleración o ralentización ajustando gradualmente la velocidad de cambio. 11. Al concluir estas tareas en la capa actual los fotogramas clave están indicados por un punto negro mientras que los fotogramas intermedios muestran una flecha negra sobre fondo azul claro. Representación de una animación de movimiento por interpolación en la línea de tiempo Si se elimina el fotograma clave final esta flecha se transforma en una línea discontinua. No hay interpolación porque falta fotograma final 12. Para visualizar la animación resultante selecciona Control > Reproducir o bien Control > Probar Película.

mireyaisela@hotmail.com

Página 74


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Interpolación de de forma (cambio de color): El fantasma En este ejemplo, diseñaremos una animación en la cual un fantasma desaparece o cambia de color. El punto de registro se sitúa en el centro del símbolo 1. Arrastra una instancia de un símbolo desde Bibliotecas Comunes-Curso: Ventana > Otros paneles > Bibliotecas comunes > Curso > Gráficos. Por ejemplo el símbolo gráfico Fantasma. Sitúalo en el centro del escenario. 2. Crea un segundo fotograma clave donde desees que termine la animación. Clic sobre el fotograma nº 30, por ejemplo, de esa capa. Una vez seleccionado elegir la opción Insertar > Línea de tiempo > Fotograma clave o bien clic derecho para seleccionar Insertar fotograma clave. Advierte que este fotograma está seleccionado. En el Inspector de Propiedades aparece la información relativa al Fotograma seleccionado. 3. Haz clic sobre la instancia del fantasma en el fotograma nº30. El Inspector de propiedades ahora muestra la información de la instancia seleccionada y no del fotograma.

4. En el menú desplegable Color selecciona la opción Alfa .Pincha y arrastra el deslizador hasta el 0% . Nota que el fantasma se ha hecho invisible. Otro efecto distinto puede ser con la opción Tinta, 50% y tinta de color rojo. 5. Clic para volver a seleccionar el fotograma inicial en la Línea de Tiempo. Selecciona Insertar > Línea de tiempo > Crear interpolación de movimiento. 6. Para visualizar la animación seleccionar Control > Reproducir o bien Control > Probar Película.

mireyaisela@hotmail.com

Página 75


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Animaciones fotograma a fotograma En la animación fotograma a fotograma se cambia el contenido del escenario en cada fotograma. Es idóneo para las animaciones complejas en las que la imagen cambia en cada fotograma además de moverse. Este tipo de animación genera archivos más grandes que por interpolación.

Arrastra una instancia del símbolo dance01 desde la carpeta Gráficos/Baile en Ventana > Otros paneles > Bibliotecas comunes > Curso hasta el escenario. Con la instancia de dance1 seleccionada en el escenario, introduce 50 como valores en las casillas X e Y del Inspector de propiedades. De esta forma este elemento se situará en un mismo sitio del escenario.

Clic en el siguiente fotograma hacia la derecha de la misma capa. Selecciona Insertar > Línea de tiempo > Fotograma clave vacío o bien clic derecho sobre el fotograma para seleccionar la opción Insertar fotograma clave vacío en el menú contextual. Repite los pasos 1 y 2 para ir insertando en cada nuevo fotograma clave un nuevo símbolo de la carpeta Baile: dance02, dance03, etc. hasta crear el movimiento completo. Para visualizar la animación completa seleccionar Control > Reproducir o bien Control > Probar Película.

Interpolación de movimiento utilizando capa guía (clásica) Las capas de guía de movimiento permiten dibujar trazados no visibles al usuario a lo largo de los cuales se mueven objetos en el escenario. Se pueden vincular varias capas a una capa de guía de movimiento para hacer que varios objetos sigan el mismo trazado. Al vincular una capa normal a una capa de guía de movimiento se convierte en un tipo de capa con guía. 1. Doble clic sobre el nombre de la Capa 1 para cambiar su nombre: Escribe Fondo y luego pulsa <enter>

mireyaisela@hotmail.com

Página 76


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 2. Abre la Biblioteca común Curso: Ventana > Otros paneles > Bibliotecas comunes> Curso. Desde la carpeta Gráficos, arrastra una instancia del símbolo colmena hasta el borde izquierdo del escenario y una instancia del símbolo flor hasta el extremo derecho. 3.Añade una nueva capa siguiendo uno de estos métodos: • Clic derecho sobre el nombre de la Capa Fondo y seleccionar Insertar capa en el menú contextual • Clic en el botón Nueva Capa en la esquina inferior derecha de la Línea de tiempo. • Insertar > Línea de tiempo > Capa 4. Doble clic sobre el nombre de la Capa 2 para cambiar su nombre: Escribe Abeja y luego pulsa <enter>. Arrastra una instancia del símbolo Abeja hasta el centro del escenario en esta capa.

5. En la capa Abeja crea un fotograma clave en la posición nº 30. Clic en este fotograma y seleccionar Insertar > Línea de tiempo > Fotograma clave. 6. En la capa Fondo crea un fotograma en la posición nº30. Clic en este fotograma y seleccionar Insertar > Línea de tiempo > Fotograma. 7. Clic para seleccionar el fotograma 1 de la capa Abeja. Selecciona la herramienta Flecha, pincha y arrastra la abeja para situarla sobre la flor. 8. Clic para seleccionar el fotograma 30 de la capa Abeja. Selecciona la herramienta Flecha, pincha y arrastra la abeja para situarla sobre la colmena. 9. Para crear una capa guía asociada a la capa "Abeja", puedes optar por uno de los siguientes procedimientos: • Selecciona la capa que contiene la animación y eliges Insertar > Guía de movimiento • Clic con el botón derecho del ratón en la capa que contiene la animación y elige Añadir Guía de Movimiento en el menú contextual que se despliega. • Clic en el botón Añadir guía de movimiento Flash crea una nueva capa sobre la seleccionada con el icono de guía de movimiento a la izquierda del nombre de la capa.

mireyaisela@hotmail.com

Página 77


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 10. Selecciona el fotograma 1 de la capa guía. Utilizando la herramienta Lápiz dibuja una trayectoria curva desde la flor a la colmena. Elige previamente la opción Suavizar del Lápiz en la caja de herramientas para conseguir bordes más suaves en la trayectoria dibujada. 11. En la capa Abeja haz clic sobre el fotograma 1. Selecciona la herramienta Flecha, clic en la abeja y haz clic en el modificador Ajustar a objetos. 12. Arrastra el símbolo por su punto de registro hasta ajustar el centro del símbolo animado al comienzo de la línea en este primer fotograma. 13. Repite esta operación para ajustar el centro del símbolo al final de la línea en el último fotograma de la capa Abeja. El centro del símbolo adquiere la apariencia de un anillo negro cuando está correctamente ajustado. Nota: La operación de enganchar el objeto con el principio y final de la trayectoria requiere bastante pericia con el ratón. A veces el anillo negro no se consigue ver porque no se arrastra el objeto precisamente por su punto de registro. Si tienes bien cogido el objeto, observa cómo éste efectúa un pequeño saltito, como si fuese un imán, para pegarse al acercarlo a la línea trayectoria. Esto es un indicio de que la operación se ha realizado con éxito. 14. Crea una secuencia de animación interpolada de movimiento mediante: Selecciona el fotograma nº 1 de la capa Abeja y a continuación clic derecho y Crear interpolación de movimiento o bien Insertar > Línea de tiempo > Crear interpolación de movimiento. 15. En el Inspector de Propiedades activa la casilla Orientar según trazado para que la línea base del símbolo interpolado se oriente hacia el trazado de movimiento. Activa también la casilla Ajustar, para que el punto de registro del elemento interpolado se ajuste al trazado de movimiento. 16. Para visualizar la animación completa selecciona Control > Reproducir o bien Control > Probar Película.

Interpolación de cambio de forma I: del círculo al cuadrado Flash puede realizar por interpolación la animación de una silueta que cambia de forma en el transcurso del tiempo.

mireyaisela@hotmail.com

Página 78


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 1. Crea la imagen del primer fotograma de la secuencia. Para crear la forma, utiliza una de las herramientas de dibujo. Traza, por ejemplo, un círculo con relleno. 2. Doble clic sobre el círculo para seleccionar su trazo y su relleno. En el Inspector de propiedades define los siguientes parámetros: An (anchura) 100 y de Al (altura) 100 y situado en la posición X e Y (200,200) del escenario. 3. Crea otro fotograma clave a una distancia de tantos fotogramas hacia la derecha como desees agregar: Insertar > Línea de tiempo > Fotograma Clave Vacío en la posición nº 20, por ejemplo. 4. Crea la imagen del último fotograma de la secuencia. Puede ser otra imagen distinta, por ejemplo, un cuadrado con relleno. También puede ser la imagen original pero modificada. 5. Doble clic sobre el cuadrado para seleccionar su trazo y su relleno. En el Inspector de propiedades puedes definir los siguientes parámetros: anchura 100 y de altura 100 y situado en la posición (200,200) del escenario. Con ello se consigue que la silueta cambie de forma pero que no desplace su posición sobre el escenario. 6. Clic para seleccionar el primer fotograma clave. 7. En la lista desplegable Animar selecciona la opción de interpolación Forma. Observa que al realizar esta selección en la línea de tiempo la interpolación de forma aparece representada por una flecha del fotograma inicial al final sobre fondo verde claro. 8. Ajusta el valor en la casilla Aceleración. 9. Elige una opción para Mezcla: • Distributivo: crea una animación con formas intermedias suaves y regulares. • Angular: crea una animación que mantiene las esquinas y líneas rectas en las formas intermedias. 10. Para visualizar la animación completa seleccionar Control > Reproducir o bien Control > Probar Película.

mireyaisela@hotmail.com

Página 79


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Interpolación de cambio de forma II: del uno al dos Una capa máscara es un tipo de capa donde los elementos que contiene: formas, instancias de símbolos, etc definen áreas o agujeros a través de los cuales es visible el contenido de la capa situada debajo. Las formas y símbolos de una capa máscara admiten animación. Por ello las capas máscara se suelen utilizar para obtener el efecto de foco y de transiciones. Vamos a diseñar una animación que muestre un efecto de foco luminoso sobre la palabra Bienvenidos. 1. Mediante Modificar > Documento despliega el cuadro de diálogo Propiedades del documento. En el menú desplegable Color de fondo selecciona el color negro.

2. Selecciona la herramienta Texto. En el Inspector de propiedades define como Color de relleno de caracteres el color blanco y como tamaño de la fuente 60 puntos. Clic en el centro del escenario y escribe

“Bienvenidos”. 3. Elige la herramienta Flecha, pincha y arrastra este cuadro de texto para situarlo en el centro del escenario. 4. Con la capa seleccionada, elige Insertar > Línea de tiempo > Capa para crear una capa nueva encima. Esta nueva capa será la máscara. 5. Haz clic derecho sobre el nombre de la capa de máscara en la Línea de Tiempo y elige Máscara en el menú contextual. La capa se convierte en una capa de máscara, señalada por un icono de capa máscara. La capa situada inmediatamente debajo está vinculada a la capa de máscara y se muestra su contenido a través del área rellena en la máscara. El nombre de capa de máscara aparece con sangría y su icono cambia. 6. Desbloquea la capa máscara antes de editarla. 7. En la capa máscara, dibuja un círculo seleccionando previamente la herramienta Óvalo. Una capa de máscara siempre cubre la capa situada debajo, por tanto asegúrate de crear la capa de máscara en el lugar correcto. Puedes dibujar una forma rellena, colocar un texto o crear una instancia de un símbolo en la capa de máscara. Flash ignora los mapas de bits, degradados, transparencias, colores y estilos de línea en una capa de máscara. Todas las áreas rellenas de una máscara son transparentes; y las áreas no rellenas son opacas mireyaisela@hotmail.com

Página 80


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 8. Selecciona la herramienta Flecha y haz doble clic sobre el óvalo dibujado. A continuación selecciona Modificar > Convertir en símbolo. En el cuadro de diálogo Convertir en símbolo define como nombre del símbolo: Foco y como comportamiento Gráfico. Clic en Aceptar. La animación de movimiento por interpolación sólo se puede aplicar a instancias de símbolos luego es necesario convertir esta forma circular sobre el escenario en un símbolo. 9. Arrastra este nuevo símbolo para situarlo a la izquierda y a la misma altura del rótulo que dice Bienvenidos. 10. Desbloquea la capa que contiene el rótulo de texto y para que el texto se visualice hasta el fotograma nº 20, clic sobre este fotograma en esta capa y selecciona Insertar > Línea de tiempo > Fotograma (no es necesario insertar un fotograma clave puesto que el contenido en esta capa no cambia). 11. Ahora vamos a crear por interpolación la animación de movimiento del foco. Mediante Insertar > Línea de tiempo > Fotograma Clave, crea un fotograma clave en el fotograma nº 20 de la capa máscara. Clic sobre este fotograma. Una vez situado en él desplazar la instancia del Foco al lado derecho del rótulo Bienvenidos manteniendo su altura. 12. Clic derecho sobre el fotograma 1 de la capa máscara y selecciona Crear interpolación de movimiento. Con esta operación hemos dotado de movimiento por interpolación a la instancia foco dentro de la capa máscara. 13. Control > Probar película para comprobar el efecto foco diseñado.

mireyaisela@hotmail.com

Página 81


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

LISTA DE COTEJO M2B4IEM1 Submódulo II: Generar animación con aplicaciones multimedia Evidencia por producto: Las capas y animación aplicadas en una película.

SI

NO

Evidencia de actitud asociada: Orden Instrucciones para el alumno: Elabora una película en un programa de animación aplicando las capas y animación de acuerdo a las instrucciones planteadas por el docente.

1. Las capas y animación de la película contienen claramente diseñados (orden): - Animación interpolada. - Animación fotograma por fotograma. - Animación interpolación de forma. - Animación guía de movimiento. - Animación alfa. - Animación tinta. - Animación de máscaras. - Gifs animados. - Capas guía. - Capas objetos guiados. - Capas máscaras. - Capas con objetos enmascarados. - Capas con vista normal. EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 82


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B4IEM1 Submódulo II: Generar animación con aplicaciones multimedia Evidencia por desempeño: Las capas y animación aplicadas en una película. Evidencia de actitud asociada: Orden Instrucciones para el alumno: Elabora una película en un programa de

SI

NO

animación aplicando las capas y animación de acuerdo a las instrucciones planteadas por el docente.

1. ¿Manipuló los objetos del escenario para dar claridad al concepto de diseño general de la animación (orden)? 2. ¿Definió fotogramas clave para animación interpolada? 3. ¿Aplicó la animación interpolada a símbolos gráficos en el escenario siguiendo la secuencia de instrucciones del software de animación? 4. ¿Utilizó la animación fotograma a fotograma en la película? 5. ¿Aplicó animación interpolación de forma para las formas dibujadas en el escenario sin afectar la claridad del concepto de animación? 6. ¿Manipuló las capas en la línea de tiempo? 7. ¿Definió capas máscaras para animación en el escenario con orden? 8. ¿Aplicó animación máscara con los símbolos definidos en el escenario? 9. ¿Definió capas guía para animación guía de movimiento? 10. ¿Aplicó animación guía de movimiento a símbolos del escenario? 11. ¿Aplicó la herramienta papel cebolla en los elementos de la línea del tiempo? 12. ¿Aplicó animaciones predefinidas a los objetos y símbolos de la película? 13. ¿Importó gráficos vectoriales que permitan hacer comprensible el concepto de diseño a la película (orden)? 14. ¿Importó gráficos en mapas de bits que permitan clarificar el concepto general de diseño a la película (orden)? 15. ¿Importó video a la película respetando la secuencia en el procedimiento marcado por el software de animación (orden)? 16. ¿Importó sonido a la película respetando la secuencia en el procedimiento marcado por el software de animación (orden)? 17. ¿Importó Gif animados a la película? 18. ¿Importó archivos PostScript a la película? mireyaisela@hotmail.com

Página 83


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 19. ¿Generó películas con animaciones claras y comprensibles (orden)? 20. ¿Exportó imágenes siguiendo la secuencia en el procedimiento marcado por el software de animación (orden)? 21. ¿Exportó películas respetando la secuencia en el procedimiento marcado por el software de animación (orden)?

EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 84


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque V: Manipular botones. Antes de comenzar Al comenzar el trabajo con botones, es importante conocer los siguientes aspectos básicos de Flash Pro: Existen distintos tipos de creación de botones en Flash Pro. Existen dos partes en el comportamiento del botón. La primera es el modo en que el propio botón reacciona cuando se hace clic o se pasa sobre el mismo. La segunda es lo que sucede en el archivo de Flash Pro cuando se hace clic en el botón. La mayor parte de los botones están diseñados con diferentes estados de Arriba, Presionado y Sobre. Estos estados permiten al botón tener diferentes aspectos cuando el cursor está sobre el mismo y si se hace clic en el botón. Los botones de Flash Pro siempre requieren ActionScript para llevar a cabo operaciones. El código pre programado de ActionScript 3.0 para muchos botones habituales está disponible en el panel Fragmentos de código. Consulte Cómo añadir interactividad mediante fragmentos de código. Existen dos versiones de ActionScript, 2.0 y 3.0. Estas versiones no son compatibles entre sí. Solo se debe seleccionar una versión para utilizar con todos los botones en un solo archivo de Flash Pro. El código ActionScript de los botones debe existir en los mismos fotogramas que los botones. Es importante estar seguro de entender bien el procedimiento de trabajo con la línea de tiempo en Flash. Es importante para crear botones que quiere que aparezcan en más de un fotograma de la línea de tiempo. Consulte Trabajo con líneas de tiempo. Para probar la funcionalidad del botón, utilice el comando Control > Probar película > Probar. Es posible pre visualizar los estados de un símbolo de botón en el escenario, seleccionado Control > Habilitar botones simples. Este comando permite ver los estados de un símbolo de botón sin utilizar Control > Probar película > Probar.

Crear y manipula los aspectos del botón (reposo, sobre, presionado, zona activa). Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que cualquier botón de cualquier entorno informático, sea web o cualquier otro.

mireyaisela@hotmail.com

Página 85


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se les está pulsando, por ejemplo. Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a la web, que es el caso que nos ocupa, debemos crear programas relativamente grandes. Esto es un inconveniente bastante grande ya que el uso de los botones es una práctica muy habitual en el diseño en Internet. Sin embargo, en Flash no ocurre así. Su interfaz está diseñada de manera especial para la creación de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla. Al igual que los otros símbolos de Flash, los botones tienen su propia línea de tiempos. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón.

Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él. Sobre. Aspecto del botón cuando situamos el puntero sobre él. Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado. 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. Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad de estos símbolos, pero no es así. Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos dota a los botones de gran espectacularidad. En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente, lo que nos ayudará a entender mejor dicha estructura. Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash. Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos el comportamiento Botón y asignaremos un nombre a nuestro nuevo símbolo.

mireyaisela@hotmail.com

Página 86


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente. Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar. 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 (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.

Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentirá aludido" nuestro botón.

Aquí podemos ver una muestra de creación de un botón ovalado. Como resultado obtenemos el botón que continuación mostramos. http://www.aulaclic.com.es/flash8/secuencias/crear_boton.htm

Este es un botón muy básico, como veremos se pueden complicar mucho, pero para empezar nos servirá con este. Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos terminado la película entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra película y seleccionando el botón creado. Para ver lo que comentábamos bastará con pulsar la tecla situada a la derecha de la vista previa del símbolo. 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 como vimos en el punto anterior, también hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de páginas web.

mireyaisela@hotmail.com

Página 87


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Entre estos están los creados mediante formas poligonales, aquellos que están formados por texto únicamente, dibujos con diferentes motivos, 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. Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo o los botones en forma de píldora. Puesto que existen muchas formas de conseguir estos efectos, a continuación tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botón circular. En un botón puede utilizarse un clip de película o un símbolo gráfico, pero no puede utilizarse otro botón. Utilice símbolos de clips de película si desea crear un botón animado.

(a)

(b)

(c)

(d)

(a) Imagen con la que iniciará tu botón (up). (b) Imagen que se mostrará cuando el ratón pase por arriba del botón (over). (c) Imagen que se mostrará cuando des Click al botón (down). (d) Área sensible al ratón (hit).

Aplicar acciones y eventos del ratón y el teclado .

mireyaisela@hotmail.com

Página 88


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Botones de texto. La importancia de la zona activa Los botones, como hemos visto, poseen un fotograma en el que indicamos la zona activa. En los ejemplos vistos hasta el momento esto parecía poco útil, ya que es común pensar que obviamente la zona activa que queremos que tenga nuestro botón es el área que comprenden los límites de dicho botón. Veamos como esto no es siempre tan trivial. Aquí se muestran dos botones creados en Flash 8. Comprobemos lo que sucede al pasar el ratón por encima de uno y de otro.

CLIC AQUÍ

CLIC AQUÍ

Aunque parezcan iguales, la diferencia está en el momento en el que situamos el ratón en uno de los huecos que existe entre letra y letra o, en general, todos aquellos lugares que no pertenezcan al texto propiamente dicho. En el texto de la izquierda el botón se activa sólo cuando situamos el puntero del ratón sobre la letra. Esto puede ser incómodo y puede llevar a confusión, ya que aquel que navegue por nuestras páginas simplemente querrá hacer uso del botón y no tener que intentar apuntar concretamente a unas letras que quizá sean muy estrechas. Esto es debido al mal uso de la zona activa. Para solucionar este problema sigue los siguientes pasos: Haz doble clic sobre el botón para entrar en su modo de edición. Haz clic sobre el fotograma de Zona Activa, si no hubiese ningún fotograma clave creado haz clic sobre él y pulsa la tecla F6 para crear uno. Una vez en el estado Zona Activa seleccionamos la herramienta Rectángulo y dibujamos un rectángulo sobre el texto tapándolo en su totalidad. Así definiremos toda el área del rectángulo como zona activa al ratón. Vuelve al modo de edición normal pulsando el enlace a Escena 1 sobre la Línea de tiempos. http://www.aulaclic.com.es/flash8/secuencias/boton_texto.htm

Incluir un clip en un botón La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad.

mireyaisela@hotmail.com

Página 89


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información extra o una animación para ir más allá de un cambio de color. También es común ver un clip de película actuando como un botón. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo. Veamos por ejemplo el botón siguiente:

Comprueba todos los estados del ratón. Por lo que nos dice el botón podemos intuir que empieza algo, pero quizá no tengamos claro qué. Si nosotros en determinado momento no queremos que esto ocurra en nuestras páginas web, podemos recurrir a la introducción de un Clip en el botón, que explique un poco más acerca de lo que pasará si pulsamos. Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, sólo tendrás que, primero, hacer doble clic sobre el botón para entrar en su modo de edición. Haz clic en el estado Sobre para modificarlo. Selecciona el texto y pulsa la tecla SUPRIMIR para eliminarlo. Ahora abre la Biblioteca desde el menú Ventana → Biblioteca donde se encontrará el clip que habremos creado previamente. Selecciónalo y arrástralo sobre el botón. Ya esta listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a reproducirse. Aquí puedes seguir el proceso que acabamos de comentar http://www.aulaclic.com.es/flash8/secuencias/clip_boton.htm Y este es el resultado.

Crear botones invisibles y de varias capas.

Bitmaps y Botones Además de clips, los botones también pueden contener símbolos de tipo Gráfico. mireyaisela@hotmail.com

Página 90


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que están muy extendidos como forma de expresión gráfica a lo largo y ancho de la Red. Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante hacer uso de ellos en la creación de botones, pero no es así. Básicamente podemos hacer dos cosas: 1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un efecto como el que se consigue con lenguajes como javascript (siempre considerando la mayor sencillez de Flash). 2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos importar primero el Bitmap y después convertirlo a símbolo botón. Posteriormente lo editaríamos y, después de insertar cada fotograma clave, convertiríamos su contenido a símbolo Gráfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos. He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo hemos convertido en un botón gráfico aplicándole un efecto Alfa (Transparencia) al estado de reposo, lo que da la sensación de estar apagado (también podríamos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original para que al pasar sobre el botón de la sensación de encenderse. Finalmente le hemos aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.

mireyaisela@hotmail.com

Página 91


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Auto Evaluación del Bloque. Solo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución. Si pulsas Restablecer podrás repetir la evaluación. 1. Es posible determinar en qué zona del botón queremos que sean aplicables las acciones. a) Verdadero.

b) Falso.

2. Los botones pueden contener cualquier otro símbolo en su interior. a) Verdadero.

b) Falso.

3. La línea de tiempos de un botón sólo puede tener una capa y cuatro fotogramas. a) Verdadero.

b) Falso.

4. ¿Cuál de las siguientes afirmaciones es falsa?. a) Un botón es capaz de controlar la reproducción de toda una película. b) Si en un botón no definimos la Zona Activa el no reaccionará ante ninguna acción. c) Los botones son la base de la interactividad de Flash. 5. Podemos asociar acciones a un botón para que, por ejemplo, abra una ventana nueva y la direccione a aulaclic.com. a) Verdadero.

b) Falso.

6. Es posible incluir un Clip de película en un botón. a) Verdadero.

b) Falso.

mireyaisela@hotmail.com

Página 92


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B5IEM1 Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia Evidencia por desempeño: Los botones creados en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: En una película en un programa de animación crea los botones siguiendo las instrucciones planteadas por el docente.

OBSERVACION ES

SI

NO

1. ¿Estructuró y creó botones para dar claridad al concepto de diseño de animación (orden)? 2. ¿Manipuló los fotogramas del botón? - Fotograma reposo. - Fotograma Sobre. - Fotograma Presionado. - Fotograma Zona activa. 3. ¿Creó botones estáticos? 4. ¿Creó botones dinámicos? 5. ¿Aplicó animaciones a los botones sin alterar la claridad de su concepto de diseño de animación (orden)? 6. ¿Agregó acciones al botón facilitando la comprensión del concepto de diseño de la película (orden)? 7. ¿Agregó acciones al botón asociadas al ratón y el teclado permitiendo claridad para la navegación de la película (orden)? 8. ¿Estableció atributos de invisibilidad a los botones? 9. ¿Aplicó contenido de los botones en múltiples capas permitiendo comprender el concepto de diseño y animación del botón (orden)? EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 93


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

LISTA DE COTEJO M2B5IEM2

OBSERVACIONES

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por producto: Los botones creados en una película. videncia de actitud asociada: Orden. Instrucciones para el alumno: En una película en un programa de animación crea los botones siguiendo las instrucciones planteadas por el docente.

SI

NO

1. La película contiene claramente organizados (orden): - Botones con fotogramas reposo, sobre, presionado, zona activa. - Botones estáticos. - Botones con acciones. - Botones animados. - Botones con símbolos anidados. - Botones Invisibles. - Botones de varias capas.

EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 94


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque VI: Manipular sonido. Comenzando Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos "midis", de escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos musicales sin voz, de ahí su pequeño tamaño (y calidad). Aún así, siempre existía algún creador de páginas web que se aventuraba a poner algún sonido complejo (.wav o .mp3) en su página web, por desgracia, su carga es tan lenta, que la mayoría de los visitantes se irían de la página sin llegar a escucharla. Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a las páginas web es un poco más fácil, ¿qué aporta FLASH? Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff y .mp3) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra película. Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle conjuntamente con una música (si bien esto último necesitaría que toda la película estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la animación). En definitiva, Flash nos lo vuelve a poner fácil. Importar Sonidos http://www.aulaclic.com.es/flash8/secuencias/sonidos.htm

"Importar" y se puede hacer con sonidos, gráficos, e incluso con otras películas Flash. Importar por tanto, no es más que decirle a Flash que añada un determinado archivo a nuestra película, para que podamos usarlo cuando queramos. En realidad, lo añade a nuestra Biblioteca, que es el Panel en el que están todos los objetos que participan en la película (este Panel se verá más adelante). Así pues si queremos manejar un sonido en nuestra película, deberemos importarlo previamente. Una vez esté importado, podremos usarlo con total libertad.

Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.

mireyaisela@hotmail.com

Página 95


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo de archivo Todos los formatos de sonido. Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película. Seleccionalo haciendo clic sobre él y haz pulsa el botón Aceptar. El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca (menú Ventana → Biblioteca). Propiedades de los Sonidos En Flash, todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Aquí tenemos todo lo necesario para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado ningún sonido, nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlo para que esto cambie. Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en algún fotograma de nuestra película, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:

mireyaisela@hotmail.com

Página 96


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Veamos las partes que tiene este panel. Sonido: En esta pestaña nos aparecerán las canciones que tenemos importadas, deberemos seleccionar la canción que pretendamos añadir a nuestra película (en el siguiente punto veremos cómo insertarlo). Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensación de que el sonido te envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Si deseamos añadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algún programa creado específicamente para este propósito antes de importarlo.

Flash pone valores predeterminados, si deseas editarlos cambia los valores de Efectos y/o Sincronización. Opciones de Efectos: Nosotros podemos dar diferentes efectos a nuestro sonido, como por ejemplo: cambios a los distintos canales y descenso o ascenso de volumen. Opciones de sincronización: • Evento.- Sincroniza el sonido con un evento. Un evento de sonido no comienza a sonar hasta que aparece el fotograma clave inicial y suena por completo, independientemente de la línea de tiempo, aunque la película se detenga. Al reproducir la película publicada los eventos de sonido se mezclan. • Inicio.- Es igual que Evento, pero si el sonido ya se está reproduciendo, inicia una nueva instancia. • Detener.- Detiene el sonido especificado. • Flujo.- Sincroniza el sonido para reproducirlo en un sitio Web, Flash hace que la animación vaya a la misma velocidad que los flujos de sonido. En los eventos de sonido, si la animación se detiene también lo hacen flujos de sonido. Al igual que con los símbolos, sólo es necesaria una copia de archivo de sonido para utilizar el sonido de varias formas en la película. Las características o propiedades que tenemos en nuestra consola de sonido son las que se muestran en la imagen que a continuación se presenta: Sinc: Esta opción nos permite determinar en qué momento comenzará a actuar nuestro sonido, estas son las opciones que tenemos: Evento: Sincroniza nuestro sonido con un evento determinado. Es la opción por defecto y provoca que el sonido se empiece a reproducir al pasar la película por el fotograma en el que está situado. También se puede sincronizar el sonido con botones y los demás tipos de símbolos. mireyaisela@hotmail.com

Página 97


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si está seleccionado Inicio en vez de Evento y se reproduce otra vez el mismo sonido u otro distinto, lo hace "encima" del sonido actual. Puede ser un efecto muy atractivo, o puede provocar que se forme "ruido" en nuestra película. Detener: Detiene el sonido seleccionado. Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté asociado, por tanto, si la carga de la película es lenta y las imágenes no fluyen adecuadamente, el sonido se detendrá para sincronizarse con ellas. Este efecto puede dar la sensación de que la película se corta de un modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una reacción muy negativa en los que pueden estar viendo nuestra película). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una película. En esta situación, es muy recomendable que el sonido y las imágenes estén sincronizadas. Repetir: Determina el número de veces que se reproducirá el sonido según lo que escribas en la caja de texto de la derecha. También puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bluce hasta llegar al siguiente fotograma clave. No recomendamos insertar sonidos con la opción Flujo y a la vez la de Repetir, ya que al estar sincronizados los sonidos con las imágenes, provocaríamos que las imágenes (y los fotogramas que las contengan) se dupliquen también, aumentando considerablemente el tamaño de la película. Ahora que ya sabemos importar un sonido, qué opciones podemos modificar y para qué sirve cada una. Veamos lo más importante, cómo insertarlos en nuestra película. Supongamos que queremos insertar un sonido en un fotograma determinado, de modo que cuando la película Flash llegue a este fotograma comience a reproducirse el sonido. Para que un sonido se reproduzca al llegar a un fotograma, deberemos seleccionar el fotograma en el que queremos que empiece a reproducirse el sonido. Una vez allí, abriremos el Panel Propiedades e importaremos el sonido que queramos del modo visto en el punto anterior. Otro modo más rápido aún consistiría en seleccionar dicho sonido en la Biblioteca y arrastrarlo al fotograma en el que queramos que se empiece a reproducir el sonido (al fotograma, no a la línea de tiempo).

De este modo insertamos un sonido, pero ¿suena tal y cómo queremos que suene? ... Depende de lo que busquemos. Por defecto Flash entiende que quieres reproducir el sonido en su totalidad, sino ¿para qué insertarlo entero?, de modo que Flash reproducirá el sonido todas las veces que le hayas indicado en Repetir y el sonido sonará aunque el fotograma en el que esté no sea el que se está ejecutando en ese instante. Si quisiéramos que el sonido pare

mireyaisela@hotmail.com

Página 98


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. cuando entremos en otro fotograma, lo podemos hacer de 2 formas distintas, ambas combinando las opciones que nos ofrece el Panel Propiedades. La primera de ellas es seleccionarlo en la Biblioteca y arrastrarlo directamente sobre el escenario. El sonido se añadirá al fotograma en el que nos encontramos. Otra opción sería la de seleccionar el sonido (ya importado a nuestra biblioteca) desde el panel Propiedades del fotograma seleccionado:

En la opción Sonido seleccionaríamos el audio que queremos añadir al fotograma. Luego modificaríamos la opción Sinc. del siguiente modo: Si seleccionamos Flujo, el sonido se reproducirá hasta llegar al primer fotograma que no lo contenga. Podemos seleccionar Stop para marcar un fotograma de modo que el sonido se detenga al llegar a él. http://www.aulaclic.com.es/flash8/secuencias/insertar_sonidos.htm http://www.aulaclic.com.es/flash8/secuencias/trabajar_sonidos.htm

Editar Sonidos Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es limitada. Aún así, los efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animación que queramos realizar. Disponemos de estos efectos: Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo. Canal Derecho: El sonido tan sólo se escuchará por el altavoz derecho. Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el altavoz izquierdo para luego pasar al derecho. Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el altavoz derecho para luego pasar al izquierdo. Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente. mireyaisela@hotmail.com

Página 99


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente. Personalizado: Esta opción nos permite "editar" el sonido de un modo rápido y sencillo. Desde este editor podemos decidir qué volumen tendrá nuestro sonido y en qué altavoz. Podemos crear los efectos anteriores ajustándolos a nuestro gusto y podemos crear efectos más complejos a nuestra medida.

Esta es la apariencia del Panel Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una línea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto. Las líneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen. En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen está al máximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldría a un Aumento Progresivo en el canal derecho). Como ya se ha comentado, los sonidos que Flash 8 puede importar deben tener las extensiones .wav o .mp3. Si no sabes las diferencias entre estos tipos de archivos, puedes consultar nuestro tema básico. Por tanto, cuando queramos añadir un sonido a nuestra película, deberemos decantarnos por uno de estos 2 formatos. Lo normal es que el sonido que pretendamos insertar ya esté en uno de ellos, pero no debemos olvidar que existen multitud de programas que convierten un sonido con extensión .mp3 a uno .wav y viceversa, por lo que no debe ser inconveniente el formato que tenga el sonido en un principio. La pregunta surge en seguida ¿Cuál es mejor? ... Esta pregunta es más importante de lo que parece, ya que si decidimos que nuestra película tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamaño de la película y en consecuencia en cuanto a

mireyaisela@hotmail.com

Página 100


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. tiempo de descarga. Lo habitual es que los sonidos ocupen más de la mitad del espacio total y muchas veces no valdrá la pena insertarlos... Una vez decididos a insertar el sonido, la lógica nos dice que insertemos el sonido que ocupe un espacio menor en el disco duro, ya que este espacio es el que ocupará en nuestra película. Esto es una aproximación, ya que Flash comprime todo aquello que insertamos en nuestras películas. Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos .wav (10 veces menos o más), por lo que parece recomendable insertar .mp3 en lugar de .wav, ahora bien ¿Puede Flash comprimir un sonido ya comprimido? Es decir, si un sonido .wav ha sido comprimido y ahora tiene extensión .mp3, ¿podrá Flash volver a comprimirlo? La respuesta es NO. Flash comprime los sonidos que insertamos en nuestras películas, pero si el sonido resulta estar ya comprimido, no podrá volver a comprimirlo (en realidad si que consigue comprimirlo, pero el sonido final es el mismo que el inicial). Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav más de lo que comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios ejemplos... Ejemplo: Contamos con una película con un único frame que está vacío. Esta película, una vez lista para ser vista (.swf) ocupa 1KB. Tenemos 1 sonido .wav que ocupa 1596 KB Comprimimos dicho sonido con un programa compresor de audio y obtenemos el mismo sonido en formato .mp3, ocupa 145 KB. (La calidad de sonido es prácticamente idéntica). Ahora insertamos el sonido .wav en la película original y la exportamos (esto se trata en el último tema). Resultado: Una película con sonido (película 1) que ocupa 37KB. Insertamos después el sonido .mp3 en la película original. Resultado: Una película con sonido (película 2) que ocupa 145 KB Conclusión: La película con un sonido .wav ocupa casi 5 veces menos que la que tiene el mismo sonido en .mp3, por tanto parece recomendable insertar sonidos .wav (la compresión de audio que logra Flash es muy grande). Como contrapartida, podría apreciarse pérdida de calidad en el sonido que se escucha en la película 1. Esta pérdida será importante según el tipo de sonido que sea. Si es una voz, por ejemplo, deberíamos insertar .mp3 ya que necesariamente deberá escucharse bien, si es música de fondo, es probable que aunque se pierda calidad, el resultado final sea aceptable y sea conveniente quedarnos con la película de menor tamaño. Lo mejor es probar ambas versiones y evaluar el resultado. Al igual que con los símbolos, sólo es necesaria una copia de archivo de sonido para utilizar el sonido de varias formas en la película.

mireyaisela@hotmail.com

Página 101


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Las características o propiedades que tenemos en nuestra consola de sonido son las que se muestran en la imagen que a continuación se presenta:

mireyaisela@hotmail.com

Página 102


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Auto Evaluación: Solo una respuesta es válida por pregunta. 1. Desde un principio podemos trabajar con cualquier sonido que se encuentre en nuestro disco duro. a) Verdadero.

b) Falso.

2. Importar un sonido es lo mismo que insertarlo en un fotograma. a) Verdadero.

b) Falso.

3. Desde el Panel Propiedades, si tenemos seleccionado un fotograma se puede seleccionar qué sonido queremos reproducir, cuántas veces y qué efectos queremos darle. a) Verdadero.

b) Falso.

4. La calidad del sonido es importante a la hora de importarlo en nuestra película. a) Verdadero.

b) Falso.

5. ¿Cuál de estas 3 afirmaciones es correcta?. a) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, importaremos y usaremos siempre el MP3. b) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, importaremos y usaremos siempre el WAV. c) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, usaremos uno u otro en función de ciertos parámetros tales como el tamaño, la calidad y el tipo de sonido que sea. 6. ¿Cuál de las siguientes afirmaciones es falsa? a) El efecto Canal Izquierdo aumenta la calidad del sonido, ya que lo concentra todo en un único altavoz, evitando la pérdida de calidad. b) El efecto Aumento Progresivo puede ser una buena forma de introducir un sonido, ya que provoca que el sonido aumente de volumen progresivamente. c) El efecto Desvanecimiento de izquierda a derecha crea una sensación de movimiento, ya que el sonido pasa de un altavoz a otro. 7. Si configuramos un sonido para que se reproduzca 9999 veces... a) Se reproducirá indefinidamente. b) La respuesta anterior es falsa. 8. Para efectos de voz en nuestras películas es mejor utilizar el método... a) Flujo.

b) Inicio - Detener.

mireyaisela@hotmail.com

Página 103


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B6IEM1

OBSERVACIONES

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por desempeño: El sonido editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita el sonido de la película en un programa de animación siguiendo las instrucciones planteadas por el docente..

SI

NO

1. ¿Importó sonidos MP3 y WAV a la biblioteca de la película siguiendo la secuencia en el procedimiento marcado por el software de animación (orden)? 2. ¿Editó la calidad del sonido a parámetros ADPCM de la película? 3. ¿Manipuló los sonidos en la biblioteca? 4. ¿Insertó sonido en las capas de la película facilitando la comprensión de la animación final (orden)? 5. ¿Insertó sonido en los botones de la película facilitando la comprensión y claridad de la animación final (orden)? 6. ¿Aplicó efectos de reproducción simultánea a los sonidos incluidos en la película? 7. ¿Sincronizó el sonido con los objetos de la película? 8. ¿Trasladó sonidos entre bibliotecas de diferentes películas sin alterar el concepto general de diseño de cada animación (orden)? EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 104


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

LISTA DE COTEJO M2B6IEM2

OBSERVACIONES

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por producto: El sonido editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita el sonido en película en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI

NO

1. La película para facilitar la comprensión de la animación final, contiene (orden): - Sonido con calidad de CD. - Sonido sincronizado con la animación. - Sonido con bucles de reproducción. - Sonido asignado a fotogramas. - Sonido asignado a botones.

EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 105


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque VII: Manipular vídeo. Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. En particular Flash 8 incorpora una serie de características que facilitan la tarea al máximo y permiten el uso de vídeos como si se tratase de cualquier otro objeto en pantalla. A continuación explicaremos cómo hacerlo y cuales son las mejores alternativas. Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos realizar.

Importando Vídeos

Lo primero que deberemos hacer es transformar nuestro vídeo de formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv. Este formato, además de crear archivos de vídeo de buena calidad muy comprimidos, te permitirá introducir puntos de referencia desde donde controlaremos la interacción del entorno de la película con el vídeo. Haz clic en Archivo → Importar → Importar vídeo para empezar a configurar el archivo .flv que crearemos. Se abrirá una pantalla como esta:

mireyaisela@hotmail.com

Página 106


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película. Haz clic en el botón Examinar y búscalo en tus carpetas. Cuando lo hayas encontrado pulsa el botón Aceptar y estarás listo para seguir pulsando el botón Siguiente. También es posible marcar la opción Ya se ha implementado en un servidor Web, Flash Vídeo Streaming Service o Flash Communication Server. En este caso deberás introducir la URL del archivo, que previamente habrá sido preparado para poder utilizarlo en Flash. La siguiente pantalla te permitirá seleccionar el modo en el que se implementará el vídeo:

Puedes elegir entre varias opciones, si seleccionas cualquiera de ellas verás su descripción en la derecha de la pantalla. Te adelantamos que para la implementación de vídeo para Streaming deberás disponer de un servidor (de pago) que transmita tu vídeo al usuario de una forma óptima. La opción Descarga progresiva, a pesar de no ser la más aconsejada para conexiones de baja velocidad (sobre todo para archivos muy grandes) es la más utilizada por aquellos que no disponen de los recursos necesarios para contratar los servicios de un servidor de vídeo en formato Stream. Así que seleccionaremos la primera opción y pulsaremos Siguiente. mireyaisela@hotmail.com

Página 107


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Ahora es cuando realmente configuraremos el archivo de salida. Antes que nada pulsa el botón Mostrar configuración avanzada. Verás 3 pestañas. La primera te servirá para ajustar la compresión y calidad del vídeo. Puedes seleccionarla directamente en el desplegable de arriba del todo o cambiar alguna de las opciones que te aparecen en la pestaña Codificación. Nosotros haremos hincapié en la pestaña Puntos de referencia.

Existen dos tipos de puntos de referencia diferentes: el de Navegación y el de Evento. Creando puntos de Navegación podremos referenciarnos más tarde a ellos para saltar en la película. Sería algo así como crear capítulos sobre los que podremos navegar utilizando botones y ActionScript. El punto de Referencia de Evento nos permitirá crear interacciones con el resto de objetos en la película. Estos puntos nos permitirán pasar parámetros que podremos recuperar mediante ActionScript. En el ejemplo hemos creado los siguientes puntos de referencia:

mireyaisela@hotmail.com

Página 108


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Como ves hay 3 de Navegación, a los cuales acudiremos pulsando los botones para saltar entre los capítulos de la película. Luego hemos añadido 4 puntos de Evento desde los que pasaremos un parámetro que hará que se muestre determinado fotograma de un clip que se encontrará en el Escenario. Puedes realizar el ejercicio paso a paso de Puntos de Referencia para ver cómo lo hacerlo.

Ejercicio Haz clic en Archivo → Importar → Importar vídeo. En la pantalla que aparecerá pulsa el botón Examinar y busca el archivo tux.avi dentro de la carpeta ejercicios/puntos referencia del curso. Selecciónalo y pulsa Abrir. Haz clic en el botón Siguiente. En la nueva pantalla, asegúrate de que la opción Descarga progresiva desde un servidor web está marcada y pulsa Siguiente. Ahora pulsa el botón Mostrar configuración avanzada y haz clic sobre la pestaña Puntos de referencia. Añadiremos un punto de referencia al principio del vídeo. Haz clic en el botón +. Dale el nombre de inicio y selecciona Navegación en el desplegable Tipo. Ahora arrastraremos el cabezal hasta el principio de la primera carrera: Desde la pestaña Recortar y Ajustar podrás modificar el tamaño del vídeo y su duración. Cuando hayas terminado pulsa el botón Siguiente.

Será en el segundo 07.359, puedes utilizar las flechas izquierda y derecha para ajustar el tiempo.

mireyaisela@hotmail.com

Página 109


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Pulsa el botón + de nuevo para crear otro punto de referencia, le daremos el nombre de carrera1 y seleccionaremos Navegación. Desplaza el cabezal al segundo 07.360. Crea un punto de referencia pulsando el botón + y dale el nombre de carrera1inicio y selecciona Evento en Tipo. Ahora añadiremos un parámetro, haz clic en el botón + de la lista de la derecha (Parámetros). Dale el nombre de fotograma y el valor ready. Desplázate hasta el segundo 42.280 y crea otro punto de referencia llamado carrera1fin de Tipo Evento. Dale un parámetro pulsando el botón + en la lista de la derecha, dale el nombre fotograma y el valor win. Desplázate hasta el segundo 58.159 e inserta otro punto de referencia. Llámalo carrera2 y dale Tipo Navegación. Cambia el cabezal a la posición 58.160 y crea un punto de referencia llamado carrera2inicio de Tipo Evento. Dale un parámetro llamado fotograma y con valor ready. Desplaza el cabezal al segundo 1:34.600, crea allí un último punto de referencia. Dale el nombre carrera2fin y el Tipo Evento. Crea un parámetro para este punto de referencia (pulsando el botón + ), llámalo fotograma y dale el valor lose. Ya hemos terminado, haz clic en el botón Siguiente hasta que llegue al final y empiece la importación. Desde la pestaña Recortar y Ajustar podrás modificar el tamaño del vídeo y su duración. Cuando hayas terminado pulsa el botón Siguiente.

mireyaisela@hotmail.com

Página 110


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Desde aquí podrás seleccionar un estilo de controles predeterminado, elige uno o selecciona Ninguno para crear tú mismo los controles (como veremos a continuación) y pulsa el botón Siguiente. El sistema te avisará de que el vídeo está debidamente configurado y pasará a importarlo. Cuando haya terminado lo añadirá directamente sobre el Escenario. El Componente FLVPlayback Si ya tuvieses el archivo importado a flv no haría falta que realizases las acciones anteriores, sólo deberás insertar en el escenario un componente que incorpora Flash para la reproducción de éste. Abre el Panel Componentes desde Ventana → Componentes y haz clic sobre FLV Playback - Player 8. Arrastra un componente FLVPlayBack al Escenario. Desde el Panel Parámetros podrás configurarlo. Allí encontrarás las siguientes opciones: autoPlay: puede tomar los valores true o false. Indican si el vídeo debe reproducirse nada más abrir el archivo o esperar a una orden para empezar a reproducirse. autoRewind: puede tomar los valores true o false. Indica si el vídeo deberá volver a la posición inicial despés de haberse reproducido completamente. autoSize: puede tomar los valores true o false. Indica si el control deberá ajustarse al tamaño del vídeo, o por el contrario deberá ser el vídeo el que se ajuste al tamaño del control. bufferTime: especifica el número de segundos que se almacenarán en la memoria antes de que se inicie la reproducción del vídeo. contentPath: indica la ruta del archivo que se deberá reproducir. cuePoints: indica los puntos de referencia que están incluidos en la película. Una vez importada la película a formato flv no pueden ser modificados. isLive: puede tomar los valores true o false. Este campo se utilizará para la transmisión de vídeo en vivo y sólo podrá utilizarse a través de un servidor de Streaming. skin: desde aquí puedes modificar la apariencia de los controles de la película y seleccionar uno entre los predefinidos. skinAutoHide: puede tomar los valores true o false. Indicará si los controles se pueden esconder para volver a aprecer cuando el cursor se sitúe sobre la película. totalTime: indica el tiempo total del vídeo. volume: de 0 a 100. Indica el volumen máximo del vídeo.

mireyaisela@hotmail.com

Página 111


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Una vez insertada la película mediante la adición de este componente o por importación deberemos darle un nombre de instancia para poder referirnos a él. Hazlo desde este mismo panel o desde el Panel Propiedades. Uso de Componentes para la Reproducción Usar componentes para controlar la película es muy sencillo, sólo deberás arrastrarlos desde el Panel Componentes al Escenario y escribir unas pocas líneas en el Panel Acciones. Para añadir estos componentes haz clic en el elemento FLV Playback Custom UI y arrastra el que tu quieras al Escenario, veamos cuales son sus funciones. BackButton: retrocede el flujo del vídeo al punto de referencia inmediatamente anterior o en su defecto al inicio de éste. BufferingBar: muestra el progreso de descarga del vídeo. ForwardButton: avanza el flujo del vídeo al punto de referencia inmediatamente posterior o en su defecto al final de éste. MuteButton: establece el volumen de la película directamente a 0. Actuaría de forma similar a la línea: miVideo.volume = 0; PauseButton: pausa la película en el momento en el que se pulse el botón. PlayButton: reaunda (o comienza) la reproducción a partir de donde se encuentre el cabezal de reproducción de vídeo. PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar la reproducción desde un mismo control. SeekBar: desde esta barra avanzar y retroceder manualmente por la línea de flujo de la película. StopButton: detiene la reproducción y posiciona el cabezal de reproducción al principio del vídeo. VolumeBar: permite el aumento o disminución del volumen del vídeo mediante una barra de volumen. Una vez añadidos los componentes necesarios al Escenario tendrás que darle un nombrede instancia y luego escribir lo siguiente (dependiendo de los controles que hayas arrastrado) en el Panel Acciones del fotograma 1: miVideo.playButton = miBotonPlay; miVideo.pauseButton = miBotonPausa; miVideo.playPauseButton = miBotonPausaPlay; miVideo.stopButton = miBotonStop;

mireyaisela@hotmail.com

Página 112


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. mVideo.backButton = miBotonAtras; miVideo.forwardButton = miBotonAdelante; miVideo.muteButton = miBotonSilencio; miVideo.volumeBar = miBarraVolumen; miVideo.seekBar = miBarraDeslizadora; miVideo.bufferinBar = miBarraProgreso; El componente se asociará al vídeo y funcionará por sí solo. Fácil, ¿verdad? Puedes modificar los componentes que añadas al Escenario haciendo doble clic sobre ellos y cambiando su forma, tamaño o color. Crear Controles Propios Crear controles propios no es muy complicado en Flash 8. Sólo tienes que crear los botones que consideres necesarios y utilizar las propiedades del componente FLVPlayback. play(): reproduce el vídeo. miVideo.play(); stop(): detiene el vídeo y vuelve al inicio. miVideo.stop(); pause(): detiene el vídeo conservando su posición actual. miVideo.pause(); seek(segundo:Number): permite el avance o retroceso de la película de vídeo. miVideo.seek(5); Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a partir de ahí. volume: define el volumen del vídeo. Puedes introducir un valor entre 0 y 100. miVideo.volume = 50; Un ejemplo de cómo crear un botón de Play/Pause sería asociando el código siguiente a un botón: on (release) { if (miVideo.state == miVideo.PAUSED) { mireyaisela@hotmail.com

Página 113


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. miVideo.play(); } else { miVideo.pause(); } } La propiedad state devuelve el estado en el que se encuentra nuestro vídeo en el momento, puede tomar los siguientes valores: miVideo.PAUSED: el vídeo se encuentra pausado. miVideo.PLAYING: el vídeo se está reproduciendo. miVideo.REWINDING: el vídeo está en estdo de rebobinado. miVideo.SEEKING: el vídeo está en estado de búsqueda. miVideo.STOPPED: el vídeo se encuentra detenido. miVideo.BUFFERING: el vídeo todavía se está almacenando en el buffer. miVideo.CONNECTION_ERROR: se ha producido un error de conexión y el vídeo no podrá visualizarse. miVideo.DISCONNECTED: el vídeo está en estado de desconexión. Este estado se producirá hasta que se le asigne una ruta a la propiedad contentPath. miVideo.LOADING: el vídeo está en estado de carga. Ahora veremos como interactuar con los puntos de referencia que hayamos creado. En el ejemplo hemos creado 3 botones que deberán saltar a los tres puntos diferentes que hemos creado: inicio, carrera1 y carrera2. El código asociado al botón sería el siguiente: on (release) { miVideo.seekToNavCuePoint("inicio"); miVideo.play(); }

mireyaisela@hotmail.com

Página 114


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Este trozo de código utiliza la función seekToNavCuePoint para buscar el punto de referencia que se le indique, luego tendremos que decirle que reanude la reproducción. También puedes utilizar las funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los diferentes puntos de referencia de navegación creados. miVideo.seekToNextNavCuePoint(); miVideo.seekToPrevNavCuePoint();

AUTO EVALUACIÓN Solo una respuesta es válida por pregunta. 1.Flash puede importar los siguientes tipos de archivo: a) avi y mpeg.

b) mov, wmv y dv.

c) Todos los anteriores.

2. Podemos utilizar la función seekToNavCuePoint("puntoRef") para saltar a puntos de referencia de tipo... a) de Evento.

b) de Navegación.

3. ¿A qué valor cambiaremos la propiedad autoPlay si queremos que se reproduzca el vídeo nada más cargarse?. a) True.

b) False.

4. Podemos utilizar la función seek() para saltar a un segundo determinado del vídeo. a) Verdadero.

b) Falso.

5. Si el vídeo esta en estado de DISCONNECTED... a) Es que no se ha producido un error de conexión y no podrá visualizarse. b) Es que aun no se le ha asignado una ruta a la propiedad contentPath . 6. La función seekToNavCuePoint("puntoREF") se sitúa en un punto de referencia ya definido y comienza la reproducción a partir de ahí. a) Verdadero.

b) Falso.

7. Podemos asignar un número indeterminado de parámetros a los puntos de referencia para consultarlos más tarde a través de ActionScript. a) Verdadero.

b) Falso.

mireyaisela@hotmail.com

Página 115


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

8. El componente SeekBar muestra el porcentaje de vídeo almacenado en el buffer. a) Verdadero.

b) Falso.

9. Además de elegir el aspecto de los controles antes de importar el vídeo, también es posible editarlo cuando ya está importado y se encuentra en el Escenario . a) Verdadero.

b) Falso.

10. La propiedad skinAutoHide sirve para: a) Esconder los controles del vídeo si no se tiene el foco sobre ellos. b) Hacer que los controles no puedan taparse por ningún otro objeto en el Escenario.

mireyaisela@hotmail.com

Página 116


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B7IEM1

OBSERVACIONES

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por desempeño: El video editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita un video en una película en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI

NO

1. ¿Importó sonidos MP3 y WAV a la biblioteca de la película siguiendo la secuencia en el procedimiento marcado por el software de animación (orden)? 2. ¿Editó la calidad del sonido a parámetros ADPCM de la película? 3. ¿Manipuló los sonidos en la biblioteca? 4. ¿Insertó sonido en las capas de la película facilitando la comprensión de la animación final (orden)? 5. ¿Insertó sonido en los botones de la película facilitando la comprensión y claridad de la animación final (orden)? 6. ¿Aplicó efectos de reproducción simultánea a los sonidos incluidos en la película? 7. ¿Sincronizó el sonido con los objetos de la película? 8. ¿Trasladó sonidos entre bibliotecas de diferentes películas sin alterar el concepto general de diseño de cada animación (orden)? EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 117


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

LISTA DE COTEJO M2B7IEM2

OBSERVACIONES

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por producto: El video editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita un video en una película en un programa de animación siguiendo las instrucciones planteadas por el docente..

SI

NO

1. La película para facilitar la comprensión de la animación final, contiene (orden): - Clips de video. - Video editado. - Video con efectos. - Video comprimido.

EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 118


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque VIII: Publicar película. Distribución para Páginas Web Esta es una parte importante, ya que normalmente las películas de Flash están orientadas a la publicación vía Web. Para publicar una película Flash en Internet de manera que forme parte de una página web deberemos insertarla en un archivo típico de páginas web cuyo lenguaje de programación sea del estilo del HTML. Para ello debemos atender a las opciones de publicación HTML que nos ofrece Flash, y que nos ayudarán a que nuestra película se visualice como realmente queremos. Las opciones de este tipo de publicación están en Archivo → Configuración de Publicación... (Pestaña HTML). Plantilla: Para incrustar una película Flash en un documento HTML, hay que escribir una serie de códigos de programa algo complejos y laboriosos de hacer a mano. Para facilitarnos esta tarea Flash hace esto automáticamente pero, puesto que cada web es distinta y nuestras necesidades van a ser muy distintas, los codigos también serán muchos y distintos, por esto Flash incluye lantillas, que crean este código automáticamente según el tipo de publicación que deseemos: En el botón Información que está a la derecha de la pestaña "Plantilla" se nos muestra información muy útil sobre cada tipo de plantilla. Estas son las plantillas más comunes: Sólo Flash: Esta es la opción predeterminada y utiliza el reproductor Flash. Flash con FSCommand: Imprescindible cuando se usen FSCommands. Mapa de Imágenes: Si hemos incluido una Image Map (imágenes completas que ejecutan distintas acciones según la coordenada que se pulse) debemos activar esta opción. Pocket PC 2003: Especialmente diseñado para Pocket Internet Explorer en Pocket PC 2003. QuickTime: Permite incluir una película QuickTime. Etc ... Detectar Versión de Flash: Desde aquí podemos seleccionar si queremos que nuestra película detecte la existencia o no existencia del plugin de Flash en el ordenador del usuario, así como las páginas web donde se insertará el código encargado de comprobarlo y las páginas web a las que se irá en caso de disponer del Plugin o no disponer de él. Dimensiones: Especifica la unidad en la que mediremos las dimensiones del Documento. Anchura X Altura: Aquí introduciremos la anchura y altura, teniendo en cuenta que a veces un objeto más grande que estas dimensiones provocará un cambio en éstas. Reproducción: Permite realizar determinados cambios en cuanto a la reproducción de la película:

mireyaisela@hotmail.com

Página 119


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la reproducción, que inicialmente aparecerá detenida. Reproducción Indefinida: Cuando la película termine, volverá a empezar desde el principio. Esto lo hará infinitamente. Visualizar Menú: Permite que al hacer el usuario clic con el botón derecho del ratón sobre la película, el menú emergente tenga todas las opciones por defecto. Si la desactivamos sólo aparecerá la opción "Acerca de Flash". Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animación de la película por las fuentes predeterminadas en la máquina de quien la visualice. Calidad: Aquí podemos modificar la calidad de visualización de la película, que depende del suavizado de la imagen y el tiempo de reproducción. Las opciones son: Baja No hay suavizado. El tiempo de reproducción es el de máxima velocidad. Baja Automática: El reproductor detecta si la máquina soporta en cada instante un ligero suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rápido. Alta Automática: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna limitación, siempre dará preferencia a la velocidad. Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps. Alta: Usa siempre el suavizado, los mapas de bits se suavizan sólo si no hay animación. Da preferencia a la buena visualización. Óptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total preferencia de la apariencia frente a la velocidad. Modo de Ventana: Opciones para la reproducción dentro de las ventanas de Windows: Ventana: Se reproduce la película en la ventana de la web en la que está insertada. Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrás de la película no se vean (en páginas DHTML). Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos situados detrás se vean. Alineación HTML: Posición relativa de la película dentro de la página web HTML. Tenemos varias opciones: Predeterminada: Centra la película en la página. Si no cabe se cortan los extremos. Izquierda: Alineación a la izquierda. También se recortan los bordes si no cabe.

mireyaisela@hotmail.com

Página 120


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Derecha: Alineación a la derecha. Superior: Alineación en el borde superior de la página. Inferior: Alineación en el borde inferior de la página. Escala: Si hemos especificado el tamaño en píxeles o en tanto por ciento, podemos decirle a Flash cómo distribuir la película en el rectángulo que hemos decidido que la contenga: Predeterminada: Se ve toda la película guardando las proporciones originales. Sin Borde: Recorta (en caso de que la película sea más grande que el rectángulo) todo lo que sobre con el fin de mantener las proporciones. Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la película ocupe el rectángulo completo. Alineación Flash: Se hace necesario alinear la película cuando esta no tiene las mismas dimensiones que el rectángulo definido. Las opciones son: Alineación Horizontal: Podemos escoger entre Centro, Izquierda o Derecha. Alineación Vertical: Podemos escoger entre Centro, Superior o Inferior.

Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes de error de código Action Script.

http://www.aulaclic.com.es/flash8/secuencias/publicacion.htm

mireyaisela@hotmail.com

Página 121


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

AUTO EVALUACIÓN. Solo una respuesta es válida por pregunta. 1. Flash nos permite trabajar con total libertad, sin preocuparnos por el tamaño de los objetos que dibujemos. a) Verdadero.

b) Falso.

2. Agrupar los objetos o convertirlos en símbolos suelen conllevar un ahorro en espacio, pues Flash reutilizará los objetos en lugar de crear otros nuevos desde cero. a) Verdadero.

b) Falso.

3. Los mapas de bits, al estar formados por bits individuales, consumen menos espacio que una imagen vectorial, con complejos cálculos matemáticos. a) Verdadero.

b) Falso.

4. Si a pesar de todo, nuestra película supera los 80 KB, situar un cargador o preloader puede ser una buena solución para evitar los retardos y la mala reproducción de la película. a) Verdadero.

b) Falso.

5. ¿Cuál de estas 3 afirmaciones es correcta?. a) Flash permite publicar películas para sus distintas versiones (desde la versión 1, pasando por la versión de Flash 5, hasta la actual Flash 8 . b) Los ficheros de Flash son públicos y resulta muy complejo evitar que otros puedan importar nuestras películas, ya que Flash no incluye ningún mecanismo de seguridad. c) Las imágenes JPG insertadas en nuestra película se insertan con una calidad determinada y ésta no puede modificarse desde Flash. 6. ¿Cuál de las siguientes afirmaciones es falsa?. a) Flash sólo es capaz de utilizar las fuentes (tipografías) existentes en el servidor, pues no puede acceder a las del disco duro del usuario. b) Flash nos permite ocultar al usuario determinadas propiedades de la película accesibles por los usuarios una vez esté ésta publicada, tales como la opción de imprimir o modificar su calidad (accesibles mediante el botón derecho). c) Flash 8 nos ayuda considerablemente en la tarea de publicar nuestra película, pues nos permite crear automáticamente un fichero HTML en el que esté contenida la película. También nos permite modificar distintas

mireyaisela@hotmail.com

Página 122


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. propiedades de esta publicación, tales como la alineación de la película dentro de la página web, el tamaño, la escala etc.

7. Desde el cuadro de diálogo de Configuración de Publicación podemos determinar los metadatos del archivo. a) Verdadero.

b) Falso.

8. Desde el cuadro de diálogo de Configuración de Publicación es posible Publicar directamente el archivo sin necesidad de ejecutar el comando Archivo → Publicar. a) Verdadero.

b) Falso.

GUIA DE OBSERVACION M2B8IEM1

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por desempeño: El video editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita un video en una película en un programa de animación siguiendo las instrucciones planteadas por el docente.

OBSERVACIONES

SI

NO

1. ¿Importó videos a la biblioteca de la película respetando la secuencia en el procedimiento establecido por el software de animación (orden)? 2. ¿Editó la calidad de video de la película cuidando la claridad de la animación final (orden)? 3. ¿Creó clips de video? 4. ¿Importó archivos de video Flash a la película de acuerdo a la secuencia en el procedimiento establecido por el software de animación (orden)? 5. ¿Aplicó efectos al video cuidando la claridad y comprensión del la animación final (orden)? 6. ¿Controló los clips de video en la película?

EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 123


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

mireyaisela@hotmail.com

Pรกgina 124


SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

LISTA DE COTEJO M2B8IEM2

OBSERVACIONES

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por producto: Las películas publicadas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Publica las películas en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI

NO

1. Las películas publicadas contienen claridad y comprensión de (orden): - Sonido. - Video. - Símbolos. - Animaciones. - Gifs animados. - Reproductor independiente. EVALUÓ (NOMBRE Y FIRMA)

mireyaisela@hotmail.com

LUGAR Y FECHA DE APLICACIÓN

Página 125


Manual flash 6to semestre  

Apuntes y trabajos para la Capacitación Producción de animaciones con elementos Multimedia

Advertisement
Read more
Read more
Similar to
Popular now
Just for you