Producción de animaciones con elementos multimedia. Capacitación en Informática.

Presentación del tema: "Producción de animaciones con elementos multimedia. Capacitación en Informática."— Transcripción de la presentación:

1 Producción de animaciones con elementos multimedia. Capacitación en Informática

2 Contenido Aplicar animación al dibujo. Manipular botones. Manipular sonido. Manipular video. Publicar película.

3 Objetivo Este módulo tiene como fin permitir al alumno desarrollar las competencias de diseño, animaciones, creación de páginas Web utilizando gráficos y elementos multimedia, posibilita la inserción laboral en empresas de publicidad, de comunicación, imprentas, oficinas de servicios públicos y privados e instituciones educativas y autoempleo.

4 Bloque I. Aplicar animación al dibujo Aplicar movimiento al dibujo. Modificar tamaño al dibujo. Manipular formas del dibujo.

5 RECORDANDO …

6 ¿Qué es FLASH? Inicialmente Flash fue creado por Macromedia (Adobe) con el objeto de realizar animaciones vistosas para la web, así como para crear GIFs animados. Los motivos que han convertido a Flash CS3 en el programa elegido por la mayoría de los diseñadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash CS3.

7 La Interfaz de Flash Flash CS3 cuenta con un entorno o interfaz de trabajo renovada de lo más manejable e intuitiva. Además, tiene la ventaja de que es similar a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS3 por primera vez:

8 La Línea de Tiempo La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes. 1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos) 2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película. Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (12.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen). A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo

9 Fotogramas Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son sus rasgos.

10 Los objetos en Flash Podremos considerar un objeto todo aquello que aparezca en nuestra película y sea visible, de modo que podamos trabajar con él, por ejemplo, cualquier imagen que creemos o importemos, un botón, un dibujo creado por nosotros mismos

11 Los objetos de dibujo Tienen 2 partes fundamentales El Borde: Consiste en una delgada línea que separa el objeto del exterior, del escenario. Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz, Línea o Pluma y si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el borde y suprimirlo (ver siguiente punto). El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia también es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vio en el tema de Dibujar, y por tanto, parecerá que dicho objeto no tiene relleno, aunque en realidad sí que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como el Pincel o el Cubo de Pintura.

12 Seleccionar

13 La animación en Flash Una animación no es más que una secuencia de fotogramas reproducidos a una velocidad tan alta que el ojo humano no es capaz de darse cuenta del cambio de una imagen a otra. Aunque el límite en el que el ojo humano detecta estos cambios en el monitor de un ordenador ronda los 18 fotogramas por segundo, Flash coloca por defecto sus líneas de tiempo a 24 fps. Por esto, aunque Flash CS5 incorpore técnicas que aparentemente no utilicen secuencias sucesivas de fotogramas, como las interpolaciones de movimiento, esto no es así. En estos casos, simplemente no vemos los fotogramas "físicamente", esto es, si la animación ocupa 20 fotogramas en la línea de tiempos, el hecho de que no todos sean fotogramas clave indica simplemente una mejora en la capacidad de almacenamiento porque Flash no necesita saber cuáles son los pasos intermedios de la animación. Si todos fueran claves, el tamaño del archivo aumentaría considerablemente.

14 Fotograma Clave Fotograma Clave (KeyFrame) : Son fotogramas con un contenido específico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la película. Se identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por una línea negra vertical.

15 Investigar Fotograma Fotograma Clave Interpolación en movimiento Interpolación de formas Capas Tipos de capas Símbolos Clip de película Botón Grafico Mascara Velocidad de fotogramas Texto estático Texto dinámico Introducción de texto

16 Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de clor gris. El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misión es prolongar la duración de un fotograma clave o keyframe. Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la película. En la imagen anterior, son fotogramas contenedor todos los fotogramas a partir del 12 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos.

17 Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco. En la imagen, los fotogramas del 6 al 11 (incluidos) son fotogramas vacíos. No debemos confundirlos con los fotogramas contenedor, pues estos últimos vienen delimitados por líneas verticales grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser Keyframes. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrará una imagen en blanco. (no dará por terminada la animación). De modo que si queremos que un objeto aparezca en el fotograma 1 y después otra vez en el fotograma 10. Los fotogramas del 2 al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá" y volverá a aparecer. Fotograma Etiquetado. Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel "Frame". Si la duración del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas. Fotograma con Acciones asociadas: Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una acción asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la película. En la imagen, la acción existente en el fotograma 1 afecta también al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y sí las tiene el 5.

18 Fotogramas Animados: Pueden ser de 2 tipos: 1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyframe inicial al final. Para representar esta animación aparece una flecha entre estos Keyframes. Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash representará el movimiento entre ambas posiciones en la película final) y del 6 al 11. Otro movimiento. 2) Fotogramas de animación de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tenía en el Keyframe inicial a la del final. Para representar esta animación aparece una flecha entre estos Keyframes. Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame 1 tendría la forma original, en el frame 5, forma de cuadrado (por ejemplo) y en el 11, otra forma distinta.

19 El Escenario Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento: Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px. Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados) Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película. Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película. Unidades de Regla: Unidad que se empleará para medir las cantidades

20 Textos Flash distingue entre 3 tipos de texto, texto estático o normal, texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), también se puede crear texto que soporte formato HTML etc

21 Texto Estático El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es importante que no confundamos la palabra "estático" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animación".

22 Texto Dinámico El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Su uso es bastante más complejo que el del Texto Estático, ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programación, lo que nos saca del objetivo de este curso. Un uso común que suelen tener es el de representar los textos introducidos mediante Textos de Entrada

23 Texto de Entrada El Texto de Entrada tiene básicamente las mismas propiedades que el Texto Dinámico, junto con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario, como por ejemplo el número máximo de líneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos

24 Capas las Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus distintos fotogramas se reproducirán simultáneamente.

25 Capas normales Son las capas por defecto de Flash.Son las más usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas...

26 Capas Guía Son capas especiales de contenido específico. Se emplean en las animaciones de movimiento de objetos y su único fin es marcar la trayectoria que debe seguir dicho objeto. Debido a que su misión es representar la trayectoria de un objeto animado, su contenido suele ser una línea (recta, curva o con cualquier forma). Capas con Guía (Guided Layers) : Cuando definimos una capa como capa guía, es necesario definir después una capa guiada. Esto es, una capa que quedará afectada por la guía definida en la Capa guía.

27 Capas Máscara Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo complejo (tampoco demasiado) y se analizará en temas posteriores. Capas Enmascaradas : Estas capas funcionan conjuntamente con las Capas máscaras. Al igual que las capas guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto.

28 símbolos Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS3 Un símbolo es el molde del que se sacarán las copias a utilizar en la animación. El uso de estos elementos reduce drásticamente el peso final del archivo, pues las copias del símbolo, llamadas instancias, son sólo una referencia y no un duplicado del símbolo. Existen tres tipos de símbolos en Flash: Gráfico, Movie Clip y Botón.

29 Gráfico Gráfico es un símbolo estático, cuyas instancias pueden ser animadas en el Escenario. Usar instancias nos permite modificar características tales como desplazamiento, escala, rotación, tinte y transparencia, con la opción Tweening Motion (interpolación de movimiento).

30 Movie Clip Movie Clip (clip de película). es un símbolo que contiene una animación, y que a su vez puede ser animado en el Escenario. Como ejemplo, teniendo el Movie Clip de una mariposa batiendo las alas, al colocarlo en un Escenario con flores, podemos desplazarla para que pase de una flor a otra mientras aletea.

31 Botón Botón es el tercer tipo de símbolo, con el cual se generan imágenes que reaccionan al cursor del mouse, y a los que se agregan comportamientos por medio del lenguaje de programación de Flash, ActionScript, para obtener interactividad en las animaciones.

32 biblioteca Una biblioteca no es más que un almacén de objetos (gráficos o sonidos) que podrán ser utilizados en una misma animación en una o más ocasiones. Dependiendo del rango que presente esta biblioteca, ésta puede ser propia a la animación, compartida por varias animaciones, o bien permanente (empleada por la totalidad de animaciones).

33 Cómo crear un símbolo 1.Seleccionamos el objeto que queramos convertir en símbolo. Abrimos el panel de Propiedades del Símbolo, accediendo al menú Insertar → Nuevo Símbolo o simplemente pulsando Ctrl + F8 o F8. 2.Una vez hecho esto nos aparecerá una ventana donde Introducimos el nombre del símbolo que vamos a crear. 3.Sólo nos queda seleccionar el tipo de símbolo 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. 4.Bastará con pulsar Aceptar para tener nuestro símbolo creado.

34 Gráficos Los Gráficos son símbolos que nos permiten representar objetos estáticos y animaciones sencillas. Los gráficos pueden ser: a) Estáticos: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos son los típicos en los fondos y en los objetos que no desempeñan ninguna función especial. Su tamaño y por tanto, el tiempo de carga de este tipo de gráficos, aunque siempre dependerá de la resolución, de sus dimensiones y de la forma en la que estén creados *, será en general reducido. b) Animaciones: este tipo de gráfico varía su forma, posición u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animación se deben usar varios gráficos más además del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamaño de esta clase de gráficos, para las mismas dimensiones y forma de creación, será mucho mayor que uno estático.

35 ¿Qué es un botón? 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 las está visualizando. Un botón, en Flash, es igual que un botón de cualquier entorno informático, sea web o cualquier otro.

36 Fotogramas de botones los botones tienen su propia línea de tiempo. 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.