SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

ADOBE® FLASH ® CS5

mireyaisela@hotmail.com

Apuntes y T...
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.

Introducción
Flash CS5 es una potente herramienta que no...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Tabla de contenido
Bloque I : Manipular las funciones de...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Pincel. ....................................................
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Creación de símbolos........................................
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque I : Manipular las funciones de las barras y panel...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Identifica la barra de herramientas principal.
Pero la i...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Barra de Menús.
Como en cualquier otro programa, en la p...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

El Escenario
Una película de Flash, se divide en frames....
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 ti...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Propiedades de la película
Antes de comenzar a realizar ...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Dimensiones de la película
En este campo se establecen l...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Utilizar la ventana de herramientas principal.

mireyais...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

TRUCO: CON LOS PANELES
Podemos crearnos nuevos Paneles e...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Para guardar una configuración de pantalla seguimos esto...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

TRUCO: ¡OCULTOS!
En algunos momentos es interesante ocul...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Acerca de las imágenes de vectores y mapas de bits
Los s...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Diferentes tipos de Archivos .fla y .swf
En el proceso d...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Abrir un documento.
Como en cualquier otro programa, par...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Pre visualización y prueba de películas
Cuando estemos t...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
• La pantalla de Flash es mejor verla en resoluciones amp...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque II : Utilizar la ventana de herramientas principa...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Línea
Vamos a ver primero las herramientas para crear SÓ...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
El método para dibujar con el lápiz sería éste:
Activamos...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Se añadieron nuevas propiedades que vienen de editores de...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Elegimos las características del pincel pulsando
sobre l...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Ejercicio
Realiza las siguientes Imágenes.

mireyaisela@...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

La herramienta Pluma
Hasta ahora hemos visto cómo realiz...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
4. (Debemos tener en consideración que los trazados curvo...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

El primer selector de color

determina el color del cont...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Del mismo modo, podemos dibujar óvalos sin relleno eligi...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Rectángulos
La herramienta de dibujar Rectángulos funcio...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

CUIDADO: EL REDONDEO Y SUS COSAS




Una vez hayamos e...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Selector de color
Anteriormente hemos visto que es muy f...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Crear un color personalizado.
1. Abriremos la paleta pre...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Crear un color desde el Mezclador de color
Flash nos ofr...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

2.- A partir de ese momento el color formará parte de la...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
En la siguiente imagen se aprecia cómo el color verde de ...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Se dibujó un contorno con el lápiz y lo he suavizado par...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

El bote de Tinta aplicará las propiedades que determinem...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Crear un degradado.
Para crearnos uno deberemos ir a nue...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Aplicar un degradado.
Aquí vamos a explicar cómo pintar ...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
En el caso de que el Degradado, en vez de lineal, sea Rad...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Por ejemplo:
1. Hemos movido el punto focal
del degradad...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

RESUMEN
Ésta es una lección larga, con mucho contenido. ...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.


En cuanto a los colores recuerda:
o La opacidad (Alfa)...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Ejercicio 1.- Dibujo
Es muy importante que vayas realiza...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

... y, ¿este otro modelo?
Ayuda:
1. De nuevo empezamos d...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Capas
Las capas (Layers) son como hojas de acetato trans...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Edición de capas
En la capa activa se puede dibujar y pi...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Animación
La animación se crea mediante el cambio del co...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Una capa de máscara oculta todo aquello que está vinculad...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Practica sugerida 1
En los programas de animación, así c...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

PRACTICA 1
Objetivo
Esta primer práctica tiene como obje...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Desarrollo
Para realizar esta práctica, es necesario segu...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
2. Tienes que crear un cielo, un sol, unas nubes y olas e...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Para realizar las olas, tendrás que crearlas en tres dife...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
3.2 Una vez realizado el paso anterior, posiciónate en el...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Una vez terminada la animación, la puedes pre visualizar...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B2IEM1
Módulo II: Software de dise...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B2/IEM/2
Evidencia por desempeño: ...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque III: Crear símbolos y bibliotecas.
Los símbolos
L...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Una vez hecho esto nos aparecerá una ventana como la most...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

EJERCICIO:
1. Abre el archivo trabajo.fla con el que ven...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Para acceder a la líbrería de símbolos de la película que...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Ejercicio paso a paso.
1 Vamos al menú Ventana → Bibliot...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B3IEM1
Evidencia por desempeño: Lo...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

GUÍA DE OBSERVACIÓN M2B3IEM2
Evidencia por producto: Los...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
Prueba Tema 9: Símbolos
Solo una respuesta es válida por ...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Bloque IV: Aplicar animación al dibujo.

Aspectos básico...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Ejercicios
Interpolación de movimiento I : el vuelo de u...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.
5. También puedes reducir su tamaño. Utiliza la herramien...
SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

Interpolación de de forma (cambio de color):
El fantasma...
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Manual flash 6to semestre 1ra version publicar
Upcoming SlideShare
Loading in …5
×

Manual flash 6to semestre 1ra version publicar

1,070 views
1,022 views

Published on

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

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,070
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
66
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Manual flash 6to semestre 1ra version publicar

  1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. mireyaisela@hotmail.com Página 11
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Utilizar la ventana de herramientas principal. mireyaisela@hotmail.com Página 15
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Ejercicio Realiza las siguientes Imágenes. mireyaisela@hotmail.com Página 29
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. 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
  72. 72. 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
  73. 73. 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
  74. 74. 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
  75. 75. 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

×