Animación con Flash CS4 y CS5_profesor

Transcripción

Animación
con Flash
ISBN 978-607-7272-92-2
9 786077 272922
Carlos Zepeda Chehaibar
PROFESOR
Flash CS4 y CS5
LEGALES
Animación con Flash
Flash® CS4/CS5
Autor:
Apoyo en actualización:
Miguel Pérez Martínez
Guillermo Larios
Director del Libro:
Coordinación Editorial:
Abraham Lule Oyervides
Diseño Gráfico y editorial:
Héctor Mendoza Suárez
Abraham Lule Oyervides
Guillermo Larios
Revisión de edición:
Alfredo Salazar de la Vega
Ilustración de portada:
Ángel Gabriel Herrera Medina
Jesús Arteaga Duarte
Animación con Flash® CS4/CS5. Profesor
2ª Edición 1ª Reimpresión
Junio 2015
D.R. © Grupo Educare, S.A. de C.V., Cerro de Mesontepec, número 83, Colonia Colinas del Cimatario, Querétaro, Qro., CP. 76090, 2011.
Queda prohibida la reproducción total o parcial de esta obra por cualquier medio, sin autorización de los editores.
ISBN 978-607-7272-92-2
Impreso y hecho en México.
Esta es una obra protegida por las leyes internacionales de derechos de autor. Prohibida la reproducción total o parcial de esta obra y/o los
recursos que la acompañan, por cualquier medio, sin autorización escrita de Grupo Educare, S.A. de C.V.
Editado por Grupo Educare S.A. de C.V.
Impreso por: Grupo Formavi, S.A. de C.V.
Calz. Santo Tomás #139 Col. Santo Tomás Del. Azcapotzalco, C.P. 02020 México, D.F.
El logotipo de Grupo Educare es propiedad de Grupo Educare, S.A. de C.V.
El diseño editorial y contenidos gráficos son propiedad exclusiva de Grupo Educare, S.A. de C.V.
Todos los nombres de empresas, productos, direcciones y nombres propios contenidos en esta obra, forman parte de ejemplos ficticios, a menos que se indique lo
contrario. Las citas, imágenes y videogramas utilizados en esta obra se utilizan únicamente con fines didácticos y para la crítica e investigación científica o artística, por
lo que el autor y Grupo Educare, S.A. de C.V. no asumen ninguna responsabilidad por el uso que se dé a esta información, ni infringen derecho de marca alguno, en
conformidad al Artículo 148 de la Ley Federal del Derecho de Autor.
Microsoft Office, MS DOS, MS Windows, Word, PowerPoint, Excel, FrontPage y Access y sus logotipos son marcas comerciales de Microsoft Corporation. Microsoft y el
logo de Microsoft Office son marcas registradas de Microsoft Corporation en los Estados Unidos y/o en otros países. Microsoft no patrocina, endosa o aprueba esta
obra. Flash, Illustrator, Fireworks, Freehand, Dreamweaver, Photoshop y sus logotipos son marcas registradas de Adobe Inc. Adobe no patrocina o endosa esta obra.
CONTENIDO
Animación Flash CS4/CS5
Propuesta Pedagógica
¿Qué es Flash?
Lámina de apoyo 01. Evolución de Flash (Historia)?
Actividad 01. Evolución de Flash (Historia)
Derechos de Autor
Requisitos del proyecto
Imágenes vectoriales
Ventajas de los vectores / Formatos de archivo
Imágenes de mapas de bits
Actividad 02. Recordando e investigando
I
7
9
9
10
11
13
14
15
16
Entorno de trabajo
Escenario (Stage)
Línea de tiempo (Timeline)
Herramientas (Tools) / Propiedades (Properties)
Biblioteca de símbolos (Library) / Acciones (Actions)
Actividad 03. Reconociendo el entorno
MID 01. Entorno de trabajo de Flash
Cómo reorganizar los paneles
19
19
20
20
21
21
22
22
Dibujar y colorear vectores
MID 02. Herramientas de Flash
Actividad 04. Identificando herramientas
Cómo se comportan las formas en Flash
MID 03. Dibujando vectores
Actividad 05. Dibujando vectores
23
23
23
26
27
27
Texto (Text)
Texto Estátco (Static Text) / Texto Dinámico (Dinamic Text)
Texto de entrada (Imput Text)
MID 04. Trabajando con texto
Actividad 06. Creando formas
Trabajo con la Línea de tiempo (Timeline)
MID 05. Línea de tiempo
Actividad 07. Repaso de la línea de tiempo
Actividad 08. Animando con la línea de tiempo
29
30
30
30
31
31
33
33
34
Sonido (Sound)
MID 06. Biblioteca de símbolos
Event / Stream
35
35
35
CONTENIDO
MID 07. Trabajando con sonido
Actividad 09. Haciendo pruebas con sonido
Actividad 10. Conceptos clave
36
37
38
Símbolos, sus propiedades y líneas de tiempo
Tipos de símbolos
MID 08. Tipos de símbolo y sus líneas de tiempo
MID 09. Cómo crear un botón
MID 10. Cómo crear un MovieClip
Actividad 11. Tipos de símbolos
MID 11. Instancias y sus propiedades
Actividad 12. Creando instancias
Actividad 13. Creando botones para una tarjeta interactiva
40
40
42
42
42
42
44
44
45
Máscara (Mask)
MID 12. Máscaras
Actividad 14. Creando una máscara
48
49
49
Principios de Animación
Animación cuadro por cuadro (frame by frame)
Actividad 15. Animando cuadro por cuadro
MID 13. Animación cuadro por cuadro
Animación Interpolación Clásica
Animación Interpolación de Movimiento
MID 14. Motion Tween
Actividad 16. Animando con Motion Tween
Animación Interpolación de Forma
MID 15. Shape Tween
Actividad 17. Animando con Shape Tween
Actividad 18. Identificando Tweens
50
51
51
51
52
52
53
54
55
56
56
58
Guías de movimiento (MotionGuide)
MID 16. Guías de movimiento
Actividad 19. Siguiendo guías
58
59
59
Filtros (Filters)
MID 17. Filtros
Actividad 20. Utilizando filtros
Actividad 21. Publicidad para Internet
Actividad 22. Creacion de un banner
Actividad 23. Animación con Pivotes
Actividad 24. Tarjeta Electrónica
Actividad 25. Máscara ASV
61
62
63
64
67
73
79
85
RECURSOS
Material Impreso
Este material forma parte de un conjunto de recursos que conforman el Programa de Informática y Tecnología
(PIT). Está organizado en bloques integrales que incluyen todo lo necesario para aprender, practicar y evaluar
habilidades o competencias. Las explicaciones, imágenes, tablas, actividades, notas y tips, apoyadas con las
láminas y tutoriales, permiten integrar la experiencia de aprendizaje desde múltiples perspectivas. Así, podemos
afirmar que el PIT de Grupo Educare es la mejor manera de aprender haciendo.
Recursos Digitales
Los recursos digitales que acompaña al material impreso contienen videos que te ayudarán a comprender los
conceptos y a poner en práctica las habilidades adquiridas. Adicionalmente encontrarás los archivos que se
requieren para realizar las actividades, algunos documentos y aplicaciones útiles. No olvides que los recursos
digitales son parte integral del programa, por lo que es muy importante que lo conozcas y utilices en el curso.
ICONOGRAFÍA
Actividad
Este icono nos indica un ejercicio que refuerza de manera práctica e inmediata la
parte teórica de este material.
Nota
Las notas que verás dentro de tu texto, puntualizan la teoría o los aspectos más
importantes de un tema.
Tip
Es una sugerencia que complementa un tema del material impreso, dando un
panorama más amplio al alumno sobre cómo ejecutar una actividad de manera
más sencilla y práctica.
Video
Es el material digital de los recursos del programa. La representación en video de
la parte teórica de este volumen.
Lámina de apoyo
La lámina es un recurso del profesor, que sirve como refuerzo dinámico e
interactivo a un tema denso, que complementa la teoría del material impreso.
PROPUESTA DIDÁCTICA
ANIMACIÓN CON FLASH
Flash CS4 CS5
Flash CS4 CS5
TIEMPO EN
SEMANAS
1
II
TEMAS
¿Qué es Flash?
SUBTEMAS
COMPETENCIA
Derechos de Autor
Imágenes vectoriales
Ventajas de los vectores
Formatos de archivo
Imágenes de mapas de bits
Escoge la aplicación correcta al manipular
diferentes tipos de archivos.
Define derechos de autor su importancia y la
relación con su proyectos.
Distingue entre imágenes Vectoriales y Mapas
de Bits.
Lista los elementos que componen el Espacio de
Trabajo de Flash.
Usa el acomodo de paneles para organizar un
Espacio de Trabajo presonalizado.
Identifica los grupos de Herramientas, sus
opciones y aplicaciones.
1
Entorno de Trabajo
Escenario (Stage)
Herramientas (Tools)
Propiedades (Properties)
Biblioteca de símbolos (Library)
Acciones (Actions)
2
Dibujar y Colorear Vectores
Cómo se comportan las formas
en Flash
Compone formas compuestas a partir de la
combinación de formas simples.
1
Texto (Text)
Texto Estátco (Static Text)
Texto Dinámico (Dinamic Text)
Texto de entrada (Input Text)
Trabajo con la Línea de tiempo
(Timeline)
Escoge el tipo de texto adecuado para cada
proecto.
Emplea la linea de tiempo reconociendo los
elementos que la componen y organizando los
elementos del escenario para crear animaciones.
2
Sonido (Sound)
Event / Stream
Usa el panel de propiedades para aplicar
diferentes efectos a un archivo de sonido.
DISEÑO MULTIMEDIA
Propuesta Didáctica
OBJETIVOS
ACTIVIDADES SUGERIDAS PARA EL
ALUMNO (CONTENIDAS EN EL MATERIAL
DE TRABAJO)
TUTORIAL SUGERIDO
1.- Conocer los origenes de Flash y su evolución.
2.- Definir los Derechos de Autor identificando fuentes
de información de libre uso.
Actividad 01. Evolución de Flash
3.- Identificar las principales caracteristicas de las
(Historia)
imágenes de Mapa de Bits y Vectoriales, listando Actividad 02. Recordando e
sus ventajas, desventajas y usos.
investigando
4.- Analizar un proyecto y determinar las herramientas
necesarias para su desarrollo.
1.- Identificar diferentes usos de Flash y reconocer los
elementos que conforman el Espacio de Trabajo.
Actividad 03. Reconociendo el
2.- Localizar las Herramientas, explicar su uso y
entorno 21
distinguir propiedades y opciones disponibles para
cada una de ellas.
Lámina de apoyo 01.
Evolución de Flash (Historia)
Computadora.
Material de aopyo del alumno.
CD del alumno.
MID 01. Entorno de
trabajo de Flash
22
MID 02. Herramientas de
1.- Emplear las Herramientas de dibujo y pintura para Actividad 04. Identificando
Flash
crear formas complejas, disitinguiendo propiedades
herramientas
MID 03. Dibujando
de las formas.
Actividad 05. Dibujando vectores
vectores
1.- Definir los diferentes tipos de Texto que trabaja
Flash y sus caracteristicas.
2.- Usar la línea de tiempo para organizar símbolos
reconociendo los diferentes tipos de fotogramas
empleados en la animación.
RECURSOS
Actividad 06. Creando formas
Actividad 07. Repaso de la línea MID 04. Trabajando con
de tiempo
texto
Actividad 08. Animando con la MID 05. Línea de tiempo
línea de tiempo
MID 06. Biblioteca de
Actividad 09. Haciendo pruebas
1.- Incorporar sonidos en un documento de Fash
símbolos
con sonido
comparando los tipos de sincronía Event y Stream.
MID 07. Trabajando con
Actividad 10. Conceptos clave
sonido
Computadora.
CD del alumno.
Computadora.
CD del alumno.
Computadora.
CD del alumno.
Computadora.
CD del alumno.
III
Flash CS4 CS5
TIEMPO EN
SEMANAS
TEMAS
2
Símbolos, sus propiedades y líneas de
tiempo
SUBTEMAS
Tipos de símbolos
Guías de movimiento (MotionGuide)
IV
Localiza simbolos en la Biblioteca de símbolos y
crea animaciones con ellos.
Aplica mascaras a elementos en el Escenario
mejorando el impacto de su trabajo.
Máscara (Mask)
COMPETENCIA
Animación cuadro por cuadro
(frame by frame)
Animación Interpolación de
Movimiento
Animación Interpolación de
Forma
Nombra las formas de Animación que tiene
disponibles Flash reconociendo las caracteristicas
principales para cada una de ellas.
Ejemplifica las formas de Animación aplicando
estas para crear películas de Flash.
Prepara guías de movimiento para emplearlas
como base para animaciónes no líneales y que
sigan una ruta especifica.
DISEÑO MULTIMEDIA
OBJETIVOS
DE TRABAJO)
TUTORIAL SUGERIDO
MID 08. Tipos de símbolo
y sus líneas de
Actividad 11. Tipos de símbolos
tiempo
1.- Crear símbolos en un documento Flash
Actividad 12. Creando instancias MID 09. Cómo crear un
determinando líneas de tiempo para emplearlos en Actividad 13. Creando botones
botón
una película.
para una tarjeta MID 10. Cómo crear un
interactiva
MovieClip
MID 11. Instancias y sus
propiedades 44
1. Crear efectos de máscara e identificando como el
enmascaramiento puede emplearse para
mejorar un documento Flash.
RECURSOS
Computadora.
CD del alumno.
Computadora.
Actividad 14. Creando una
máscara
MID 12. Máscaras
CD del alumno.
Actividad 15. Animando cuadro
por cuadro
MID 13. Animación
1.- Crear diferentes animaciones aplicando los
Actividad 16. Animando con
cuadro por
conceptos de animación Cuadro por Cuadro,
Motion Tween
cuadro
Interpolación Clásica, Interpolación de Movimiento e Actividad 17. Animando con
MID 14. Motion Tween
Interpolación de Forma.
Shape Tween
MID 15. Shape Tween
Actividad 18. Identificando
Tweens
Computadora.
CD del alumno.
Computadora.
1.- Diseñar animaciónes no lineales empleando Guías
de Movimiento.
Actividad 19. Siguiendo guías
MID 16. Guías de
movimiento
CD del alumno.
V
Flash CS4 CS5
TIEMPO EN
SEMANAS
TEMAS
Filtros (Filters)
Total de
semanas
VI
9
SUBTEMAS
COMPETENCIA
Recuerda los filtros disponibles en Flash y los
aplica alos elementos dentro del proyecto.
DISEÑO MULTIMEDIA
OBJETIVOS
1.- Mejorar el impacto visual de los simbolos de un
documento Flash mediante la aplicación de los
efectos disponibles en la aplicación.
DE TRABAJO)
TUTORIAL SUGERIDO
Actividad 20. Utilizando filtros
Actividad 21. Publicidad para
Internet
Actividad 22. Creacion de un
banner
MID 17. Filtros
Actividad 23. Animación con
Pivotes
Actividad 24. Tarjeta Electrónica
Actividad 25. Máscara ASV
RECURSOS
Computadora.
CD del alumno.
VII
Flash CS4 CS5
VIII
Diseño Multimedia
¿Qué es Flash?
Flash se originó como un simple programa de dibujo para computadora llamado SuperPaint, creado por
un estudiante de ingeniería de nombre John Gay, a quien le gustaba diseñar y construir cosas. El programa funcionaba en las computadoras Apple II, en una época en la que los gráficos eran algo novedoso y
ni siquiera se había inventado el concepto de “deshacer” (undo).
La tecnología de SuperPaint fue desarrollada por varias compañías hasta crear un programa que se llamó
InetlliDraw. La característica única de IntelliDraw era que, además de poder dibujar cosas, era posible
agregar acciones a los dibujos. Por ejemplo, por primera vez fue posible dibujar una gráfica que cambiara
mientras el usuario tecleaba diferentes números. IntelliDraw tuvo poco éxito en el mercado, pero John
Gay nuevamente pensó que tenía que crear un producto novedoso.
Diseño Multimedia
7
7
Flash CS4 CS5
En 1995, la compañía Future Wave se interesaba por crear programas de animación, pero en ese
entonces, la única forma de distribuir animación era por medio de videos VHS o CD Rom, por lo que el
mercado para un software que facilitara la animación era muy reducido.
Pero justo en la misma época, el Internet surgía como una novedosa y creciente herramienta de
comunicación. En teoría, era posible que el Internet se volviera lo suficientemente popular como para
crecer y permitir transmitir gráficos e incluso animación. Si esto ocurría, Future Wave tendría una
oportunidad para vender su programa de animación.
Con esta esperanza en mente, empezaron a trabajar en un programa que permitiera dibujar, crear
animación y usar un lenguaje de programación para crear contenido para la Web. El programa se llamó
Future Splash Animator y empezó a crecer poco a poco.
En 1996, la compañía Macromedia compró el novedoso programa y lo rebautizó con el nombre de Flash
1.0. Diez años más tarde, Macromedia ya había lanzado al mercado 7 versiones de Flash, alcanzando a
millones de usuarios, convirtiéndose en la aplicación para Web con mayor penetración en el mundo.
8
8
En 2006, la compañía Adobe, líder mundial en aplicaciones para diseño gráfico, adquiere a Macromedia.
La fusión de los expertos en diseño Web y diseño gráfico, ha ofrecido desde entonces poderosas
herramientas de software para el diseño, la animación y la producción multimedia.
Pero entonces, ¿qué es Flash hoy día? Flash es una herramienta de edición con la que los diseñadores
y desarrolladores pueden crear presentaciones, aplicaciones y contenido que permite la interacción
del usuario. Los proyectos de Flash incluyen desde simples diseños hasta complejos sitios Web con
animaciones, contenido de video e interacciones complejas.
Dado el pequeño tamaño de sus archivos, Flash resulta ideal para crear contenido que se distribuye a través
de Internet. Para lograrlo, Flash utiliza en gran medida gráficos vectoriales. Este tipo de gráfico requiere
menos memoria y espacio de almacenamiento que las imágenes tradicionales de mapa de bits.
Lámina01
Evolución de Flash (historia)
Actividad 01
Evolución de Flash
1. En la red mundial de Internet hay miles de sitios con contenido creado en Flash, algunos de ellos
simples, pero otros muy complejos. La página www.thefwa.com (The Favourite Website Awards),
agrupa decenas de sitios reconocidos por su alta calidad. Visita este sitio y navega en algunas
páginas para que conozcas las posibilidades de Flash y te sirvan de inspiración creativa.
2. Elige tres de los sitios visitados (los que más te hayan gustado) y llena las siguientes formas:
Sitio 1
Análisis de diseño
Análisis de contenido
Análisis de interactividad
URL:
9
Flash CS4 CS5
Sitio 2
URL:
Sitio 3
URL:
Derechos de autor
Actualmente es posible encontrar una gran cantidad de información, imágenes fotográficas y de vectores,
archivos de audio y otros contenidos en Internet y no siempre es fácil evitar caer el la tentación de
utilizarlos para nuestros proyectos de Flash. Hacer esto conlleva el riesgo de usar información protegida
o con “derechos de autor” o Copyright ©.
El derecho de autor consiste en una seria de normas y derechos que la ley otorga al creador de una obra
literaria, científica, artística o didáctica para su uso y publicación. Estos derechos varían según el país,
pero el uso de este tipo de trabajos sin permiso de su creador, puede ser legalmente sancionado.
Algunas de las obras originales que pueden ser protegidas (cualquiera que sea su forma de expresión,
soporte o medio) son: entrevistas, libros, folletos, obras dramáticas o coreográficas, composiciones
musicales (con o sin letra), grabaciones sonoras, cinematográficas y/o audiovisuales, dibujos, pinturas,
esculturas, grabados, litografías, historietas, cómics, fotografias, gráficos, mapas, planos, maquetas y
diseños arquitectónicos, de ingeniería, programas informáticos y sitios web.
En México, la Ley Federal del Derecho de Autor otorga derechos patrimoniales que están vigentes
durante toda la vida del autor, más 100 años tras la fecha de su muerte o la fecha de publicación. Por
esto, es muy importante el correcto uso del material gráfico, de audio o video que puedes encontrar
circulando en Internet.
Y a pesar de que existen algunos sitios web que ofrecen archivos de uso “libre”, una buena recomendación
es que trates de generar tú mismo los diferentes elementos que utilizarás en tus proyectos.
10
10
En la mayoría de los casos, los proyectos de Flash requieren de la manipulación de los archivos gráficos
(ilustraciones y fotos), de audio y video por medio de otros programas, por lo que es conveniente que
cuentes con conocimientos básicos de otros programas tales como Photoshop o Ilustrator.
Adobe Photoshop:
Muchas veces los proyectos de Flash requieren el uso de imágenes fotográficas. Estas, a diferencia de un
archivo compuesto por vectores, poseen una mayor cantidad de información para definir cada punto de
la imagen, lo que les confiere un mayor peso.
Recuerda que la mayoría de las veces, los archivos de Flash estan destinados a Internet, por lo que es
aconsejable que todas las fotografías sean optimizadas para así tener películas más ágiles al momento
de publicarlas.
Algunos puntos básicos a considerar en el uso de fotografías en Flash son:
1. Las imágenes deben de tener el tamaño final al que serán publicadas. Si los archivos que utilizarás
no tienen el tamaño adecuado para los requerimientos de tu proyecto de Flash, se deberán redimencionar desde un programa de edición de imágenes fotográficas (generalmente Adobe Photoshop).
2. Es aconsejable que estas imágenes tengan una resolución adecuada; al no ser archivos que se
requieran imprimir, 72 dpi son suficientes.
3. Adobe Photoshop cuenta con una opción para guardar documentos (Salvar para Web y Dispositivos
o Save for Web & Devices), la cual nos permite obtener archivos de poco peso y buena calidad.
4. Aunque Flash CS4 reconoce varios formatos de imágenes, los archivos JPG son recomendables.
Adobe Illustrator:
A diferencia de Photoshop, los programas de generación de ilustraciones con base en vectores, crean
documentos de poco peso; estos tienen la desventaja de tener una apariencia poco real, pues no tienen
el nivel de detalle de una fotografía.
Para utilizar documentos de Illustrator en Flash, puedes guardarlos en formato Adobe Ilustrator (AI) e
importarlo dentro de Flash o simplemente copiar directamente de Illustrator y pegar en Flash. Algunas
opciones que te permiten estas maneras de trabajar son:
Diseño Multimedia
11
11
Flash CS4 CS5
1. Pegar como mapa de Bits. Es la manera más simple de pegar un archivo, este pasa como una
imagen de mapa de bits perdiendo las propiedades de los objetos vectoriales.
2. Mantener las capas (layers). Esta opción permite conservar las capas originales en Flash.
3. Convertir capas en... Al utilizar esta herramienta, Flash puede convertir las capas de Illustrator a
fotogramas clave en una capa en particular.
4. Colocar objetos en la posición original. Se conserva la misma ubicación del material al pasarlo
de Illustrator a Flash.
Adobe Fireworks:
A diferencia de los dos programas anteriores, al utilizar material de Fireworks en Flash es posible
conservar la mayoría de sus atributos originales, sin importar si estos son archivos PNG o materiales
gráficos. Esto se debe a que originalmente ambos programas eran propiedad de Macromedia.
Algunas opciones que podrás utilizar al momento de importar archivos de Fireworks son:
1. Impotar como un mapa de bits plano. Elementos como capas, vectores o textos de nuestro
archivo original son reducidos a pixeles dejando de ser editables.
2. Importar No. de página. Permite seleccionar de un documento con varias páginas una en particular.También es posible pegarlas todas. Al hacerlo, cada página se convertirá en un movieclip.
Otros archivos que Flash también reconoce son los de AutoCAD y FreeHand (del FH7 al FH11). En ambos
casos, una vez importados, los archivos son editables.
Sonido:
En cuanto a sonido, Flash no puede grabar ni crear sonidos. Para utilizar este recurso en tus proyectos
deberás grabarlos o utilizarlos por otros medios como un CD de sonidos o de un sitio web de libre
acceso. Siempre que quieras modificar la duración, calidad o volumen será necesario la utilización de un
programa de edición de audio.
Cuando hayas importado tus archivos de audio a Flash, podrás sincronizar el sonido con animaciones,
reproducir uno o varios sonidos al mismo tiempo o utilizar efectos como balances y desvanecimientos.
12
12
Flash sólo puede importar archivos de audio en los siguientes formatos:
1. MP3 (en plataformas Windows y Mac).
2. WAV (preferente en Windows).
3. AIFF (preferente en Mac).
Si tu equipo tiene instalado el QuickTime, podrás utilizar archivos WAV y AIFF en ambas plataformas.
Así mismo, en lo referente al uso de videos, deberás convertir los archivos a un formato que reconozca
Flash. La versión de CS4 es capaz de aceptar archivos de video compactados por el codec H.264. Este
codec (esquema de compresión/descompresión) está incluido en casi todos los programas de conversión
actuales, tales como Any Video Converter Free Version (de Anvsoft) o el QuickTimePro de Apple.
Un formato muy utilizado en Flash es Flash Video (FLV) obtenido por medio de Adobe Media Encorder,
programa que se instala en tu disco duro al instalar Flash. Este formato es compatible con las versiones
anteriores de Flash Player.
Imágenes Vectoriales
¿Recuerdas que en las clases de física se estudian los vectores? En diseño gráfico un vector esta constituido por una serie de puntos y líneas, rectas o curvas, definidas matemáticamente.
Las características de un vector son las siguientes:
a. Tienen una línea de contorno (también llamado trazo) y un color de relleno. Las
características del contorno y del relleno se pueden cambiar en cualquier momento.
b. Los vectores se pueden agrupar, separar, recortar, intersectar y relacionar con otros vectores
en el dibujo.
c. Cada vector se manipula por separado del resto de los objetos: se puede ordenar de
cualquier manera y modificar sin afectar otros vectores.
Para comprender mejor por qué a estos objetos se les llama vectores, primero recuerda que en geometría, un punto del plano se puede definir por sus coordenadas. Dos puntos cualesquiera se pueden unir
mediante una línea recta.
Si en lugar de unir dos puntos con una recta se hace con una curva, los puntos se denominan nodos o
puntos de anclaje. La forma de la curva (suave o pronunciada) se define por otros puntos invisibles en
el dibujo, llamados puntos de control, manejadores o manecillas.
13
Flash CS4 CS5
Nodo
Punto de control
Nodo
Punto de control
Nodo
Cualquier forma abierta o cerrada, como un polígono, rectángulo, elipse o una curva irregular, se basa
en nodos y puntos de control. Para rellenar un gráfico vectorial es necesario que los puntos estén unidos
formando una línea cerrada.
Los contornos o trazos pueden ser delgados o gruesos y tener una forma determinada. Esto permite crear
dibujos lineales o creaciones artísticas con un contorno caligráfico.
Ventajas de los Vectores
1. No importa el tamaño en el que se dibuje o despliegue un vector: siempre aparecerá con la misma
nitidez y calidad al escalarlo (hacerlo más pequeño o más grande), tanto en la pantalla como en la
impresión.
2. Cada objeto está definido por fórmulas matemáticas independientes al resto de los demás. Puede
escalarse, distorsionarse, cambiar de forma o resituarse sin afectar a los otros elementos del dibujo.
3. Se puede controlar con gran precisión la forma, orientación y orden de los elementos.
4. Las imágenes vectoriales no están limitadas a un área rectangular, como los mapas de bits.
5. Cualquier cambio que se aplique a los objetos puede modificarse en cualquier momento: el
dibujo siempre es editable.
6. Se puede reutilizar un dibujo vectorial o parte de él en otros proyectos.
7. El peso del archivo es muy reducido, dado que no se almacena información para definir cada punto de la
pantalla.
8. Permite trabajar con texto sin limitaciones.
14
14
Desventajas de los Vectores
Los gráficos vectoriales no pueden producir imágenes fotográficas realistas, ya que están hechos de áreas
de color sólido o degradado y no pueden representar los tonos continuos de una fotografía. Por eso la
mayoría de las imágenes vectoriales tienen una apariencia de caricatura. Los vectores son de aspecto
frío, con un contorno o trazo perfecto, sin naturalidad.
Un uso frecuente que se da a la conversión de mapas de bits a vectores, es la necesidad de publicarlos
en Web. Los formatos más comunes y aceptados para la imagen vectorial en Web son el Shockwave
Flash (SWF) y PNG.
Formatos de archivo
Existen diferentes aplicaciones que trabajan con archivos de tipo vectorial, como Adobe Illustrator ,
Corel Draw o Inkscape. Aunque cada aplicación maneja sus formatos de archivo nativos, en general es
posible abrir y modificar los gráficos creados en una aplicación, utilizando otra aplicación. Los formatos
de archivo nativos principales, reconocidos por otras aplicaciones son:
a. Adobe Illustrator (AI).
b. Corel Draw (CDR).
c. Corel Exchange (CMX).
d. Computer Graphics Metafile (CGM).
e. Inkscape (SVG).
f. Auto CAD (DXF).
Imágenes de Mapa de bits
Las imágenes de Mapa de bits o bitmaps, están compuestas por píxeles. Los píxeles son los elementos
mínimos de imagen. Un mapa de bits es una cuadrícula de esos pequeños puntos individuales de color,
que están ordenados de una forma determinada para definir un patrón y formar la imagen que observas
en pantalla.
Las imágenes bitmap dependen de la resolución, es decir del número de píxeles que existen en un área
determinada. La resolución se mide en dpi o puntos por pulgada.
15
Flash CS4 CS5
Debido a que los mapas de bits dependen de la resolución, es difícil incrementar o disminuir su tamaño
sin reducir la calidad de la imagen. Cuando se hace más pequeña una imagen bitmap, se eliminan
píxeles y cuando se hace más grande se crean nuevos píxeles. Cuando se crean nuevos píxeles, el
programa de edición que se esté utilizando, estima el valor del color de los nuevos píxeles basado en los
ya existentes. El resultado siempre es una calidad reducida.
Los bitmaps pueden modificarse con programas como Microsoft Paint, Adobe Photoshop, Corel PhotoPaint o Gimp, entre muchos otros.
Actividad 02
Recordando e investigando
Contesta las siguientes preguntas usando tus propias palabras:
1. ¿Qué es un vector?
2. ¿Qué es un píxel?
3. Dibuja un píxel.
4. ¿Qué es un Mapa de Bits?
5. En el espacio en blanco especifica si estamos hablando de un vector o de un mapa de bits.
a. No importa el tamaño al que se dibuje, siempre tendrá la misma nitidez y calidad
al escalarlo.
Vector
16
16
b. Se controla de forma precisa la forma, orientación y orden de los elementos.
Vector
c. Depende de la resolución y es difícil cambiar el tamaño sin perder calidad.
Mapa de bits
d. Pierde pixeles si se hace más pequeño.
Mapa de bits
e. El tamaño del archivo es muy compacto.
Vector
6. Haz una pequeña investigación de las similitudes y diferencias entre Adobe Illustrator y Adobe
Photoshop. Creen una mesa de discusión entre compañeros y profesor para defender puntos de
vista acerca de las ventajas o desventajas de cada uno. Anota en este espacio tus conclusiones:
17
Flash CS4 CS5
7. Crea un collage con recortes de revistas. Divide el área del collage en dos partes. En una mitad
pega solamenete imágenes que sean ilustraciones vectoriales. En la otra mitad pega imágenes
que sean mapas de bits o fotografías.
18
18
Entorno de trabajo
El entorno de trabajo de Flash se compone de seis paneles principales, que pueden mostrarse, ocultarse
o moverse según sea necesario. Si has utilizado Flash con anterioridad, podrás notar que en la versión
CS4, muchas tareas ahora se manejan de manera diferente, pues los desarrolladores de Adobe han
homologado la interfaz del programa con los demás productos de la Crative Suite tales como Photoshop
o Illustrator. Esto ha dado como resultado que el programa sea más fácil e intuitivo.
Al igual que en las versiones anteriores a la CS4, todos los paneles se pueden mostrar u ocultar por
medio del Menú Window.
Dependiendo de las necesidades de tu proyecto, estos paneles pueden organizarse de diferentes formas,
existiendo cuatro básicos: el panel de Herramientas (Tools), Línea de tiempo (Timeline), Escenario
(Stage) y Propiedades (Properties). Aunque estos páneles funcionan igual que las versiones anteriores,
su apariencia cambió en Flash CS4.
Te recomiendo que, mientras te familiarizas con el programa, utilices la distribución predeterminada del
modo Clásico (Clasic) de los páneles de trabajo. Para mostrar las diferentes distribuciónes predeterminadas
utiliza el Menú Ventana/Espacio de Trabajo/Clásico (Window/Workspace Layout/Clasic).
Tip
A los documentos de Flash se les llama películas debido a que tienen elementos
similares a los largometrajes. Por esta razón es más sencillo comprender algunos
conceptos si los relacionas con el séptimo arte.
Escenario (Stage)
Situado en la parte central del programa, el escenario es el área de trabajo rectangular donde se coloca
el contenido, ya sean gráficos vectoriales, cuadros de texto, botones, movie clips o imágenes de mapa
de bits. Sólo el contenido que esté dentro de este rectángulo será mostrado en la película terminada.
Puedes utilizar áreas fuera del rectángulo para situar objetos que después entrarán a escena o para
objetos temporales de trabajo.
19
Flash CS4 CS5
Muestra dos dimensiones de la película: el tiempo (horizontalmente a través de frames) y la profundidad
(verticalmente en layers o capas). Los componentes principales de la línea de tiempo son los layers,
los frames y la cabeza lectora. Dependiendo del tipo de organización que hayas escogido, la línea de
tiempo puede encontrarse en la parte superior o inferior de la pantalla; incluso, en el modo Depurar y
Desarrollador, no es visible.
1. Los layers son capas apiladas unas sobre otras, cada una de las cuales puede contener un gráfico
diferente que aparece en el escenario. Los layers de un documento aparecen de forma vertical a
la izquierda de la línea de tiempo. Todos los gráficos que se colocan en el escenario se ubican en
algún layer. Los tipos de layers que se pueden insertar en la línea de tiempo son: layers, guías, guías
para movimiento y máscaras. Al igual que la Línea de tiempo, los layers pueden no ser visibles,
dependiendo del tipo de organización de paneles que hayas seleccionado.
2. Similar a un largometraje, los documentos de Flash dividen el tiempo en cuadros o frames. Los
frames contenidos en cada layer aparecen de forma horizontal, a la derecha del nombre del layer.
Los tipos de frames que se pueden insertar son: Frame, Keyframe y Blank Keyframe.
3. La cabeza lectora indica el frame actual que se muestra en el escenario. Mientras se reproduce una
película de Flash, la cabeza lectora se desplaza de izquierda a derecha por la línea de tiempo. Es
posible hacer que la cabeza lectora avance hacia atrás o se mueva a diferentes lugares, pero para
ello es necesario apoyarnos con algo de programación.
Herramientas (Tools)
Las herramientas de este pánel permiten crear, editar, dibujar, pintar, seleccionar y modificar objetos,
así como cambiar la visualización del escenario. Si colocas tu puntero sobre las diferentes herramientas
podrás conocer el nombre y el atajo de teclado necesario para utilizarla.
Propiedades (Properties)
Desde este panel se pueden modificar los atributos mas utilizados de cualquier herramienta que esté
activa o cualquier objeto que tengamos seleccionado en el escenario. Por lo tanto, el aspecto de este
panel variará dependiendo de lo que se tenga seleccionado.
• Si seleccionas una herramienta del panel Tools, sin que se haya seleccionado ningún objeto
en el escenario, el panel de propiedades muestra y permite modificar las características de esa
herramienta, como el grosor o color.
•
Si seleccionas un objeto en el escenario, el panel de propiedades muestra y permite modificar
las propiedades de dicho objeto, como el color, la posición y las dimensiones.
• Si no hay ninguna herramienta ni objeto seleccionado, el panel de propiedades muestra las
características del documento, como el color de fondo, dimensiones y velocidad.
20
20
Para asegurarte que no hay nada seleccionado, puedes tomar la herramienta Arrow (flecha negra) y
hacer un clic sobre un área vacía del escenario.
Biblioteca de Símbolos (Library)
En este panel se guardan y organizan los símbolos creados en Flash, además de archivos importados
tales como gráficos, imágenes de mapa de bits, archivos de sonido y clips de vídeo. En este panel puedes
organizar los elementos creando carpetas.
Acciones (Actions)
El panel Acciones permite crear y editar código en Action Script (el lenguaje de programación de Flash)
para hacer la película interactiva.
La distribución de paneles se guarda cuando cierras el programa, de manera que al iniciarlo de nuevo, aparece
como lo dejaste la última vez. No olvides que siempre puedes regresar a la distribución de paneles predeterminada,
utilizando el Menú Ventana/Espacio de Trabajo/Clásico (Window/Workspace Layout/Clasic). En todas
las actividades de este curso, suponemos que estás trabajando con la distribución predeterminada.
Actividad 03
Reconociendo el entorno
Observa el Video Flash 01 Entorno de trabajo y coloca los nombres del entorno de trabajo de Flash en
el lugar que corresponde en la imagen siguiente.
Herramientas
Línea de tiempo
Biblioteca
de símbolos
Escenario
Propiedades
Acciones
21
Flash CS4 CS5
Video 01
Entorno de rabajo de Flash
Todos los paneles tienen 4 áreas de control para manejarlos como mejor te convenga. Analiza la
función de cada una de estas áreas.
Utiliza la barra gris obscura para
cambiar de posición el Marco de
Aplicación.
Utiliza el menú del control del panel para cerrarlo
y acceder a opciones relacionadas con la función
de cada panel.
Haz clic en el nombre del
panel para minimizarlo
(colapsarlo) o desplegarlo
normalmente.
Arrastra desde los puntos
para colocar el panel en
otro lugar.
Tip
22
22
En la nueva interfaz de Flash CS4, todos los paneles y herramientas se concentran en
una ventana única llamada Marco de Aplicación (Application Frame). Esto es común en
Windows, pero nuevo en esta versión asi como en otros programas de Mac.
Dibujar y colorear vectores
Flash trabaja primordialmente con gráficos vectoriales. Un grafico vectorial se compone de trazos que
tienen propiedades como color, tamaño, posición, etc. Un grafico vectorial puede ser rotado, escalado o
deformado sin perder sus propiedades ni disminuir su calidad.
Para crear gráficos vectoriales en Flash nos apoyamos del panel de herramientas, el cual está dividido
en cuatro secciones.
Herramientas vectoriales:
Se utilizan para dibujar, pintar, borrar, modificar formas, agregar texto, seleccionar, etc.
Herramientas de vistas:
Sirven para desplazarse por el área de trabajo o para ampliar o reducir la vista de la misma.
Color de relleno y color de contorno:
Al dibujar los gráficos vectoriales en Flash, se trabaja con dos elementos: el relleno y la línea.
Opciones:
Muestra las variantes de la herramienta seleccionada.
Video 02
Actividad 04
Herramientas de Flash
Identificando herramientas
Observa detenidamente el Video 02 Herramientas de Flash y relaciona la imagen con su función. Une
con una línea el icono con su descripción:
23
Flash CS4 CS5
Arrow. Sirve para seleccionar y manipular objetos en el escenario.
Subselection. Sirve para seleccionar los puntos que dan forma a un gráfico
vectorial.
Rotación 3D.
Lasso. Permite seleccionar áreas irregulares a mano alzada.
Pen. Se usa para crear polígonos, curvas y trazos controlados.
Text. Permite introducir textos.
Line. Permite crear líneas rectas.
Rectangle. Sirve para crear rectángulos o cuadrados. Si se mantiene presionada
la tecla <Shift> mientras utilizamos esta herramienta, se crearán cuadrados
perfectos. Al mantener presionado el botón de la herramienta Rectangle,
aparece la opción para seleccionar la herramienta PoliStar.
Oval. Sirve para crear óvalos o círculos. Si se mantiene presionada la tecla
<Shift> mientras utilizamos esta herramienta, se crearán círculos perfectos.
También existe Rectangle primitive (rectángulo simple) y Oval primitive (óvalo
simple), las diferencias entre los objetos creados con esta herramienta y los
creados con Rectangle y Oval radican en las opciones de Edición, Modificación
y Convertibilidad.
PoliStar. Sirve para crear polígonos o estrellas.
Pencil. Permite dibujar líneas o contornos a mano alzada.
Spray Brush. Este pincel puede hacer varias copias de cualquier símbolo.
Brush. Se emplea para aplicar rellenos. Se puede modificar su grosor y forma
de trazo.
Deco. Permite rellenar áreas grandes con patrones decorativos.
Bone. Permite animar el movimiento de un brazo o una pierna adjuntando las
diferentes partes como si fueran una sola extremidad. Esta técnica de animación
se denomina Cinemática inversa (IK).
24
PaintBucket. Se utiliza para rellenar gráficos o cambiar su color de relleno.
InkBottle. Se utiliza para modificar el color del contorno de los gráficos.
Eyedropper. Se utiliza para tomar una muestra del color de relleno o
contorno de un gráfico.
Eraser. Su función es eliminar gráficos.
Hand. Al seleccionar esta opción podemos mover el escenario arrastrando
con el ratón.
Zoom. Su función es aumentar la visión del escenario cada vez que
hagamos clic con esta herramienta.
Ajustar a objeto. Esta herramienta crea líneas magnéticas que intentarán
unirse automáticamente con otros objetos al momento de ser trazada.
Transform. Sirve para escalar, distorsionar y rotar gráficos.
Gradient transform. Sirve para escalar, rotar y distorsionar rellenos, sin
afectar el gráfico que los contiene.
Stroke Color. Establece el color del contorno de un gráfico o de una línea.
Al presionar este botón se despliega una paleta de colores disponibles.
Fill Color. Establece el color de relleno de un gráfico. Al presionar este
botón se despliega una paleta de colores disponibles.
Los paneles de color trabajan con los sistemas RGB (rojo, verde y azul) y HSB (matíz, saturación y
brillo).
El primero mezcla diferentes valores de los 3 colores primarios aditivos (rojo, verde y azul) que al
combinarse entre sí pueden formar cualquier color que despliega el monitor de la computadora.
Para seleccionar cualquier color mediante el segundo sistema, haz clic en cualquier parte del cuadro
multicolor y al moverte hacia arriba o hacia abajo modificarás el matíz o la saturación respectivamente.
En el rectángulo vertical lateral puedes variar el brillo del color seleccionado.
25
Flash CS4 CS5
Cómo se comportan las formas en Flash
En su mayoría, las herramientas de dibujo pueden crear trazos y rellenos al mismo tiempo. En objetos
como óvalos o rectángulos, Flash considera al trazo de manera independiente al relleno y ambos pueden
ser seleccionados o modificados por separado.
La forma en que el programa nos indica cuál de los dos está seleccionado es marcándolos con una
pantalla punteada.
1
4
2
5
3
6
1. Un clic con la Herramienta Arrow sobre una línea del contorno, seleccionará un segmento de línea.
En el caso de un rectángulo, un clic selecciona sólo un lado, pero como el contorno de un óvalo es
un solo segmento de línea continua, un clic selecciona todo el contorno.
2. Un doble clic sobre el contorno lo selecciona todo.
3. Un clic sobre el relleno seleccionará sólo el relleno. Podrías moverlo o eliminarlo sin modificar el contorno.
4. Un doble clic sobre el relleno selecciona tanto el relleno como el contorno.
5. Para seleccionar áreas mayores o sólo parte de algún objeto, utiliza la herramienta Arrow y arrastra
enmarcando los objetos o partes a seleccionar.
6. Con un clic de la Herramienta Subselección (Subselection) podrás seleccionar los puntos de ancla
de un trazo de manera independiente.
26
Algunos objetos, como las líneas creadas con las herramientas Line, Pen y Pencil, sólo tienen contorno y no
relleno. Otros objetos, como los creados con las herramientas Text y Brush, sólo tienen relleno y no contorno.
Para aplicar un color de relleno, selecciona la figura y utiliza el panel de propiedades. También puedes aplicar
rellenos con la herramienta Paint Bucket, haciendo clic con dicha herramienta sobre cualquier figura, esté o
no seleccionada. Similarmente, los colores de contorno se aplican con la herramienta Ink Bottle.
Video 03
Dibujando vectores
Actividad 05
Dibujando vectores
En esta actividad vas a dibujar y colorear vectores, además de conocer su comportamiento en Flash.
1. Abre un documento nuevo de Flash utilizando el Menú Archivo/Nuevo (Menú File/New) y selecciona
la opción Flash File (AS2.0) en la ventana Generales. Analiza la línea de tiempo. Todas las películas
nuevas de Flash tienen un layer y un frame en blanco.
2. Selecciona la herramienta Rectángulo (Rectangle) y dibuja un cuadrado perfecto en el centro del
escenario.
2
6
3
4
7
8
9
3. Selecciona el cuadrado con la herramienta Selección (Arrow) y cambia su color de relleno desde el
selector Color de relleno (Fill Color) en el panel de Propiedades.
27
Flash CS4 CS5
4. Selecciona la herramienta Oval y dibuja un círculo a un lado del cuadrado, dejando un espacio entre
las dos figuras. Es importante que el tamaño del círculo sea igual o un poco más grande que el del
cuadrado.
5. Selecciona el círculo con la herramienta Selección (Arrow) y cambia su color de relleno a uno
diferente al del cuadrado.
6. Selecciona el círculo y duplícalo con el Menú Edición/Duplicar (Menu Edit/Duplicate). Arrastra el
nuevo círculo al lado opuesto del cuadrado.
7. Acerca los dos círculos sobreponiéndolos al cuadrado.
8. Elimina los dos círculos. Observa como el cuadrado queda recortado.
9. Selecciona lo que quedó del cuadrado. Usa Menú Edición/Copiar (Menu Edit/Copy) para copiar
la selección al portapapeles. Luego usa Menú Edición/Pegar en sitio (Menu Edit/Paste in Place)
para pegar la copia en el lugar donde estaba el original. Por último, usa Menú Modificar/Transformar/Rotar 90° en sentido de las manecillas del reloj (Menu Modify/Transform/Rotate 90°
CW) y la nueva figura formará una cruz con la figura anterior.
10. Prueba la película con Menú Control/Probar película (Menu Control/TestMovie).
11. Guarda el archivo con Menú Archivo/Guardar (Menu File/Save) con el nombre actividad02.fla,
en la carpeta que tu profesor indique.
Tip
En Flash, si se sobreponen dos gráficos de diferente color, se cortan. Si se sobreponen dos
gráficos del mismo color, se agrupan. Si no quieres que unos gráficos afecten a otros, debes
agruparlos, colocarlos en diferentes layers, o bien convertirlos en símbolos como estudiaremos más adelante.
28
Texto (Text)
Para añadir texto a una película Flash, selecciona la herramienta Texto (Text) y da clic en el lugar donde lo
quieres situar en el escenario. Los textos están contenidos en un espacio de ancho determinado. Si al escribir
se sobrepasa este espacio, entonces el texto pasa a la siguiente línea. En el panel de propiedades podemos
modificar los atributos de color, tamaño, tipo de fuente, alineación del texto e interlineado. Es posible añadir
hipervínculos (URL link) y podemos decidir si el texto será seleccionable o no en la película publicada.
Además, puedes seleccionar si será un texto estático, texto dinámico o texto de entrada.
Panel de propiedades de los textos incluye opciones como textos dinámicos, tipo de letra, estilo, color, tamaño, entre otros.
Texto Estático (Static Text). Estos textos funcionan como si fueran imágenes: son textos que no se
modificarán al publicar la película. Un texto estático se puede usar para títulos, mensajes o etiquetas que
no van a cambiar durante la reproducción de la película.
29
Flash CS4 CS5
Texto Dinámico (Dynamic Text). El contenido de estos textos puede ser modificado durante la
reproducción de la película publicada, normalmente mediante programación. Mensajes como el
puntaje de un juego o la hora actual, son ejemplos de textos dinámicos.
Texto de Entrada (Input Text). Este tipo de texto se utiliza para que el usuario de la película
terminada pueda introducir información, que puede ser manipulada mediante programación. Cuando
una película pide información al usuario, como su nombre, correo electrónico o comentarios, esta
información se introduce por lo regular en un texto de entrada.
Un texto seleccionado puede convertirse en caracteres separados utilizando el Menú Modificar/
Separar (Modify/Break Apart) o la combinación de teclas <Ctrl+B>. Si se aplica por segunda vez
este mismo comando, los caracteres separados se convierten en gráficos vectoriales independientes,
que ya no pueden ser editados con la herramienta de texto.
Texto
editable
Letras
separadas
Gráfico vectorial
Video 04
30
Trabajando con texto
Actividad 06
Creando formas
Con el objetivo de que te familiarices con las herramientas de dibujo de Flash, debes crear, lo mejor
posible, los siguientes diseños. Incluye junto a cada uno un texto con su nombre.
1. Un teléfono móvil.
2. Un automóvil.
3. Una tortuga.
4. La silueta de una persona.
Trabajo con la línea de tiempo (TimeLine)
La línea de tiempo se utiliza para organizar las imágenes, gráficos, sonidos e instrucciones de
programación de una película. Imagina que una película Flash es como una película de cine o una obra
de teatro: diferentes actores, objetos, gráficos y secuencias sonoras pueden entrar o salir del escenario,
de acuerdo a las instrucciones que determine el director para cada momento.
De forma similar, Flash organiza los gráficos, sonidos e instrucciones a lo largo de la línea de tiempo
en cuadros o fotogramas consecutivos también llamados frames. De forma predeterminada, Flash
reproduce 12 cuadros (frames) cada segundo (frames per second o fps), pero es posible definir una
velocidad diferente, desde 0.01 hasta 120 fps.
Por otra parte, en una película de cine no todos los actores y objetos están en el mismo plano: hay
elementos de fondo mientras el resto se distribuyen unos delante o detrás de otros. En Flash esta
distribución se logra con capas o layers. Cada layer es independiente, así que pueden modificarse los
objetos de un layer sin que afecten a los objetos de otros layers. Cada layer dispone de su propia
secuencia de frames, aunque durante la reproducción todos corren en sincronía.
Cuando abres un nuevo documento de Flash, este tiene sólo un frame, en un solo layer. A partir de ahí, es
posible insertar tantos frames como sean necesarios y organizar el contenido en tantos Layers como quieras.
Para insertar un nuevo layer usa el Menú Insertar/Línea de Tiempo/Capa (Insert/TimeLine/
Layer) o bien con el botón Insertar capa (Insert Layer) de la Línea de tiempo. Para eliminar un layer,
selecciónalo en la Línea de tiempo y da clic en el botón Eliminar (Delete Layer).
31
Flash CS4 CS5
Cuando insertas nuevos frames, pueden ser de alguno de los siguientes tipos:
Keyframe (Fotograma clave): Marca un contenido nuevo en la película. Se identifican por tener dentro un
punto negro. Para insertar un Keyframe en el lugar seleccionado de un layer, usa el Menú Insertar/Línea
de tiempo/Fotoframa clave (Insert/TimeLine/Keyframe). Para eliminar un Keyframe seleccionado, usa
el Menú Edición/Línea de tiempo/Quitar Fotoframa (Edit/TimeLine/Clear Keyframe).
Frame (Fotograma normal): Son los frames que siguen a un Keyframe. No representan contenido
nuevo, ya que contienen exactamente lo mismo que el Keyframe que les precede. Se utilizan para
alargar la duración de un contenido que permanece sin cambios durante cierto tiempo en la película.
Para insertar un frame en el lugar seleccionado de un layer, ve al Menú Insertar/Línea de tiempo/
Fotograma (Insert/TimeLine/Frame). Para eliminar un frame utiliza Menú Edición/Línea de tiempo/
Borrar Fotoframa (Edit/TimeLine/Clear Keyframe).
Blank Keyframe (Fotograma clave vacío): Son Keyframes sin contenido. Se identifican por tener
un punto blanco. Para insertar un Keyframe vació ve al Menú Insertar/Línea de tiempo/Fotograma
clave vacío (Insert/TimeLine/Blank Keyframe). Para eliminar un Keyframe seleccionado, usa el Menú
Edición/Línea de tiempo/Borrar Fotogramas (Edit/TimeLine/Clear Keyframe).
Abre el archivo Actividad08 de tu carpeta de actividades. Este documento es la animación de un acróbata
organizada en diferentes Layers y frames. Analiza el documento y llena la siguiente tabla siguiendo el
mismo orden que tiene en la línea de tiempo:
Fotograma clave vacío
Fotograma clave
Fotograma
Tip
32
Los Keyframes en Flash pueden identificarse no sólo por número, sino también por
nombre. Para asignar un nombre a un Keyframe, selecciónalo en la línea de tiempo y
escribe una etiqueta en el cuadro Etiqueta (Frame label) que se encuentra en el panel
de propiedades. Un Keyframe con un nombre asignado se identifica con una pequeña
bandera roja en la línea de tiempo.
Video 05
Línea de tiempo
Actividad 07
Reconociendo la línea de tiempo
Observa detenidamente el Video 05 Línea de tiempo y coloca los nombres de cada parte en la imagen
siguiente.
Capas
Cabeza lectora
Fotogramas
Candado
Nueva carpeta
33
Flash CS4 CS5
Actividad 08
Animando con la línea de tiempo
1. ¿Por qué algunos layers tienen un solo Keyframe, mientras que otros tienen varios?
Porque las capas o layers son independientes, pueden modificarse sin que afecten
los objetos de otros layers. Cada layer dispone de su propia secuencia de frames,
aunque durante la reproducción todos corren en sincronía.
Layer
Nombre del Layer
Descripción
de contenido
Keyframes
en los cuadros
1
2
3
4
2. En la Línea de tiempo, utiliza los botones para ocultar todos los layers (primer punto a la derecha
del nombre de cada layer), excepto el que contiene el fondo.
3. Utiliza las herramientas para colorear los elementos del fondo. Cuando termines con el fondo,
bloquea este layer para que no pueda ser modificado (segundo punto a la derecha del nombre del
layer).
4. Muestra el layer siguiente y utiliza las herramientas para darle color. Bloquea el layer cuando termines.
5. Colorea así todos los layers. Observa que si en un layer hay más de un Keyframe, es necesario
colorear cada uno, pues un Keyframe representa contenido nuevo.
6. Prueba la película coloreada usando <Ctrl+Enter> y guarda tu trabajo con el nombre Acrobata08
en la carpeta que indique tu profesor.
34
Sonido (Sound)
Para hacer más atractiva una película o una animación, Flash permite incorporar sonidos, que se importan
en formatos comunes como Wav, Aiff y MP3, entre otros, usando el Menú Archivo/ Importar/Importar
a Biblioteca (File/Import/Import to library). Una vez importado, un sonido queda como un elemento
en la biblioteca de símbolos y puede usarse colocándolo en un frame o accediendo a él por medio de
programación.
Video 06
Biblioteca de símbolos
El sonido en un frame puede ejecutarse básicamente en dos modos de sincronía (Sync):
Evento (Event). El sonido se reproduce completo (de inicio a fin) en cuanto la reproducción de la película
llega al frame en el que se encuentra el sonido. Una vez iniciado, un evento de sonido continúa hasta
terminar, independientemente de si la reproducción de la película sigue, se detiene o salta a un lugar
diferente, a menos que sea silenciado mediante programación.
Flujo (Stream). Sincroniza el sonido con la Línea de Tiempo. Si la reproducción de la película se detiene el
sonido también se detiene, y si la reproducción salta a un lugar diferente, la secuencia del sonido también.
Cuando una película Flash se publica en Internet, un sonido del tipo Event (Evento) debe descargar
completamente antes de que pueda ser reproducido. Un sonido de tipo Stream (Flujo) puede comenzar
a reproducirse conforme va descargando, de modo que es más conveniente para uso en Web.
35
Flash CS4 CS5
A un sonido se le pueden incluir los siguientes efectos, directamente en el panel de propiedades:
1. Ninguno (None): el sonido no tiene ningún efecto y se reproduce tal como se importó.
2. Canal Izquierdo (Left Channel): el sonido se reproduce solamente por el altavoz izquierdo.
3. Canal Derecho (Right Channel): el sonido se reproduce solamente por el altavoz derecho.
4. Reducción progresiva a la Derecha (Fade left to right): el sonido comienza a escucharse por el
altavoz izquierdo y pasa a escucharse por el derecho.
5. Reducción progresiva a la Izquierda (Fade right to left): el sonido comienza a escucharse por el
altavoz derecho y pasa a escucharse por el izquierdo.
6. Aumento progresivo (Fade in): el sonido comienza a reproducirse con el volumen en 0 y comienza
a aumentar hasta llegar al nivel original con el que se importó.
7. Desvanecimiento (Fade out): el sonido comienza a reproducirse tal como se importó y comienza a
disminuir el volumen hasta llegar al nivel 0.
8. Personalizado (Custom): puede modificarse la forma en que se escuchará en los altavoces.
Panel de sonido mostrando los dos modos de sincronía.
Video 07
36
Trabajando con sonido
Actividad 09
Haciendo pruebas con sonido
1. Abre el documento de Flash Actividad09 que se encuentra en tu carpeta de actividades. Este
archivo tiene dos capas etiquetadas como Layer 1 y Layer 2. Ambas capas tienen una longitud de
50 cuadros.
2. Selecciona el Menú Archivo/Importar/Importar a biblioteca (File/Import/Import to library),
e importa los dos archivos de sonido que se encuentran en la misma carpeta. Los sonidos se guardan automáticamente en la biblioteca cuando los importas. Compruébalo.
3. En la línea de tiempo, selecciona el primer Keyframe del Layer 1.
4. Después, en el panel de propiedades, abre el menú colgante Sonido (Sound), que contiene todos
los archivos de sonido de la biblioteca. Selecciona el primer sonido (sound01). Con esto, el sonido
quedará asignado al Keyframe.
5. Cambia el modo de sincronía de este sonido (Sync) a Flujo (Stream). Observa que la forma de
onda del sonido se puede ver en la línea de tiempo.
6. Arrastra el puntero del ratón sobre la línea de tiempo. Debes hacer clic y arrastrar sobre la escala
que muestra los números de cuadros, en la parte superior de la línea de tiempo. Mientras arrastras
hacia atrás o hacia delante escucharás en sincronía el sonido asignado.
7. Prueba la película presionando Menú Control/Probar película (Control/Test Movie) o la combinación de teclas <Ctrl + Enter>.
Contesta:
a. ¿Con qué características se reproduce el sonido?
b. ¿Se escucha completo? ¿Por qué?
Sincroniza el sonido con la línea de tiempo. Si la reproducción de la película
se detiene el sonido también se detiene.
37
Flash CS4 CS5
8. Selecciona el Keyframe 40 del Layer 2.
9. Mediante el panel de propiedades, asigna a este frame el segundo sonido importado (sound02) con
el modo de sincronía Evento (Event).
Contesta las siguientes preguntas:
a. ¿Es posible escuchar el segundo sonido arrastrando el puntero del ratón sobre los cuadros
de la línea de tiempo?
No
b. Cuando ejecutas la película, ¿qué pasa si el evento de sonido es más largo que el rango
de frames donde está asignado?
Un evento de sonido continúa hasta terminar, independientemente de si la
reproducción de la película sigue, se detiene o salta a un lugar diferente.
10. Modifica los efectos de sonido para que el primer sonido sólo se escuche por el altavoz izquierdo,
y el segundo sonido sólo se escuche por el altavoz derecho.
11. Guarda el archivo con el nombre sonido09 en la carpeta que indique tu profesor.
Actividad 10
Conceptos clave
1. Para crear un gráfico vectorial en Flash, se dibuja sobre:
a. la línea de tiempo.
b. la biblioteca de símbolos.
c. el escenario.
d. el panel de propiedades.
38
2. Para crear la secuencia de una película, los objetos se animan a lo largo de:
a. La línea de tiempo.
b. La biblioteca de símbolos.
c. El escenario.
d. El panel de propiedades.
3. Los parámetros de los objetos se modifican en:
a. La línea de tiempo.
b. La biblioteca de símbolos.
c. El escenario.
d. El panel de propiedades.
4. Para extender el contenido de un cuadro, sin cambios, debes insertar un:
a. Frame.
b. Keyframe.
c. Blank Keyframe.
d. Symbol.
39
Flash CS4 CS5
Símbolos, sus propiedades y sus líneas de tiempo
Un símbolo es un objeto que se guarda en la biblioteca con el principal objetivo de usarlo más de una
vez durante la película, o asignarle código de programación. La ventaja de utilizar símbolos es que se
pueden reutilizar cuantas veces se desee, sin aumentar el peso final del archivo.
También se utilizan símbolos para crear animación, ya que todo símbolo cuenta con su propia línea de
tiempo, independiente de la línea de tiempo principal de la película, con sus propios layers y frames.
Así, cada símbolo es como una película de Flash completa, que está dentro de la película principal. Un
símbolo puede incluso contener mas símbolos, cada uno con su propia línea de tiempo.
Un símbolo se puede crear de varias maneras:
a. Se puede crear un símbolo vacío para después crear su contenido. Utiliza el Menú Insertar/
Nuevo símbolo (Insert/New Symbol) o la combinación de teclas <Ctrl+F8>.
b. Se puede crear un símbolo a partir de cualquier objeto que se seleccione en el escenario.
Selecciona primero los elementos que se convertirán a símbolo y utiliza el Menú
Modificar/Convertir a Símbolo (Modifiy/Convert to Symbol) o la tecla <F8>.
c. Se puede importar un archivo con el Menú Archivo/Importar/Importar a biblioteca (File/
Import/Import to Library).
Tipos de símbolos
Al crear un símbolo por cualquier método, debes elegir el tipo de símbolo que deseas crear. Los tres tipos
posibles son:
Movie clip. Se utiliza principalmente cuando el símbolo va a contener animación.
Cuenta con una línea de tiempo en la que podemos agregar los layers y los frames
que necesitemos. El comportamiento de un Movie Clip puede ser programado con
código escrito en el lenguaje Action script.
Button (Botón). Es un símbolo que reacciona al puntero del ratón como lo haría un
botón estándar de Windows. Se utiliza para agregar interactividad en una película
Flash. El comportamiento de un botón se programa con Action script.
Un símbolo de tipo botón, cuenta con una línea de tiempo especial de cuatro
frames, en los que se definen los cuatro estados posibles de un botón: Up, Over,
Down y Hit.
40
• Reposo (Up). Este frame contiene la imagen, sonido y acciones del botón en su estado
normal o apagado.
• Sobre (Over). Contiene la imagen, sonido y acciones del botón, que se despliegan cuando el
puntero del ratón está sobre él.
• Presionado (Down). Contiene la imagen, sonido y acciones del botón, que se despliegan
cuando se hace clic sobre él.
• Zona sensible (Hit). Contiene una imagen que delimita el área sensible del botón.
Cualquiera de los cuatro frames puede o no tener contenido y por lo general sólo
se utilizan los frames Up y Over. La línea de tiempo de un botón también puede
tener tantos layers como se necesite.
Gráfico (Graphic). Es un símbolo estático que comúnmente solo requiere un layer y un frame. No
puede ser programado con Action script.
Instancias y sus propiedades
Para utilizar un símbolo en algún frame de la película, simplemente selecciona el frame en cuestión
y arrastra el símbolo desde la biblioteca hasta el escenario. Esto crea una “instancia” del símbolo,
que es una imagen clon del símbolo original. Puedes crear todas las instancias que quieras de un
mismo símbolo, modificar cada instancia cambiando sus dimensiones o propiedades, o aplicar diferente
comportamiento a cada una mediante programación.
Cuando modificas cualquier instancia, el símbolo original no se ve afectado. En el caso opuesto, si
modificas el símbolo original, todas sus instancias son afectadas.
41
Flash CS4 CS5
Video 08
Tipos de símbolo y sus líneas de tiempo
Video 09
Cómo crear un botón
Video 10
Cómo crear un MovieClip
Actividad 11
Tipos de símbolos
Flash identifica los diferentes tipos de simbolo con un icono. Obseva las imágenes y escribe el nombre
de símbolo que corrresponde.
Clip de película
Gráfico
Botón
42
Una vez en el escenario, se pueden establecer los parámetros de una instancia usando el panel de
propiedades y de transformar.
• Nombre del símbolo (Instance Name). Se utiliza para identificar la instancia de un símbolo. Es
muy recomendable asignar un nombre en cuanto se crea una instancia, ya que es necesario
para la programación.
• X. indica o asigna la posición horizontal en el escenario.
• Y. indica o asigna la posición vertical en el escenario.
• Ancho (Width). Muestra o determina el ancho de la instancia.
• Alto (Heigh). Muestra o determina el alto de la instancia.
• Rotación (Rotate). Indica o asigna un ángulo de giro.
• Sesgo (Skew). Indica o determina la deformación oblicua de la instancia.
• Color: Permite asignar un aspecto especial como:
a. Brillo (Brightness). Ajusta el color a más blanco o negro.
b. Tinta (Tint). Pintar una instancia con un tono de la paleta de colores.
c. Avanzadas (Advanced). Ajusta con detalle los colores (tinte) y transparencia (alpha).
d. Alfa (Alpha). Aplica un porcentaje de transparencia a una instancia.
1. Abre el documento de Flash Actividad11 que se encuentra en tu carpeta de actividades.
2. Si no está visible, muestra la biblioteca de símbolos con Menú Ventana/Biblioteca (Window/
Library) o las teclas <Ctrl+L>. Observa que la biblioteca tiene dos símbolos llamados bici y rueda.
3. Crea un segundo layer y selecciona en la línea de tiempo el frame 1 del Layer 2.
4. Arrastra el símbolo bici de la biblioteca al escenario para crear una instancia.
5. Crea dos instancias del símbolo rueda en el escenario, acomodando cada una en el lugar apropiado
para formar la bicicleta.
43
Flash CS4 CS5
Nombre asignado
a la instancia.
Nombre del
símbolo original.
Opciones de apariencia.
Flash te permite hacer modificaciones a un símbolo o instancia al cambiar, por ejemplo, sus dimensiones, tamaño, color o aplicar filtros.
Video 11
Actividad 12
Instancias y sus propiedades
Creando instancias
1. De forma similar a la actividad anterior y basándote en el mismo archivo, crea instancias para armar
4 bicicletas más distribuidas en el escenario.
2. Utiliza el panel de propiedades, o bien la herramienta Menú Transformación/Transformación
Libre (Transform/Free Transform), para modificar el tamaño de las bicicletas, de manera que
parezca que unas están más cerca y otras más lejos en la escena.
44
3. Seleccionando directamente en el escenario cada una de las instancias, utiliza el panel de propiedades para aplicar un color diferente a cada bicicleta usando la opción Tinta (Tint). Observa el
símbolo original en la biblioteca. ¿Qué le ocurrió?, ¿por qué?
No le ocurrió nada porque cuando modificas cualquier instancia, el símbolo original no
se ve afectado.
4. Por último, haz esta prueba: En la biblioteca de símbolos da doble clic al símbolo bici. Se abrirá la
línea de tiempo del símbolo y el gráfico original. Haz una pequeña modificación, como agregar unas
líneas decorativas o un texto sobre alguno de los tubos de la bicicleta.
5. Regresa a la línea de tiempo principal haciendo clic sobre el botón Scene 1. Describe lo que ha
ocurrido y por qué ocurrió:
El símbolo se modificó porque si modificas el símbolo original, todas sus instancias
son afectadas.
6. Guarda el archivo con el nombre bici12 en la carpeta que indique tu profesor.
Actividad 13
Creando botones para una tarjeta interactiva
1. Abre en Flash la película Actividad13, que se encuentra en tu carpeta de actividades.
2. Para poder realizar la actividad, antes de continuar, guarda el archivo en la carpeta que indique tu
profesor, con el nombre tarjeta13.
3. Abre la biblioteca y revisa su contenido. Consérvala abierta.
4. En el escenario hay 4 personajes en dos posiciones, que en esta actividad llamaremos normal y
feliz, respectivamente. Obsérvalos.
45
Flash CS4 CS5
5. Para poder trabajar mejor con los personajes, es conveniente convertirlos en símbolos. Selecciona
cada uno de forma independiente y conviértelo en un símbolo gráfico. Al final debes tener 8
nuevos símbolos gráficos en la biblioteca.
6. Una vez que los personajes están como símbolos, bórralos del escenario para que quede vacío.
Selecciona cada uno de los personajes y
conviértelos en símbolos gráficos.
7. Con el Menú Insert/New Symbol, crea un nuevo símbolo del tipo Button y dale el nombre persona
1. Verás la línea de tiempo del botón, que por ahora está vacía.
8. De la biblioteca de símbolos, arrastra al área de trabajo el primer personaje, en su posición normal.
Ubícalo en medio, auxiliándote de la pequeña cruz que aparece al centro. Dale color al personaje.
Observa que el personaje ha quedado en el frame Up de la línea de tiempo del botón.
9. Selecciona el frame Over de la línea de tiempo del botón, e inserta un keyframe en blanco con el
Menú Insert/Timeline/Blank Keyframe.
10. Arrastra al escenario el símbolo del primer personaje, en su posición feliz. Ubícalo en el área de
trabajo, auxiliándote de la pequeña cruz que aparece al centro. Dale color al personaje.
46
11. Haz clics alternadamente en el frame Up y en el frame Over, para que preveas el comportamiento del botón, y ajustes la posición de los personajes si es necesario.
12. Regresa a la línea de tiempo principal, presionando el botón Scene 1 en la parte superior de la
línea de tiempo.
Arrastra los símbolos en las diferentes casillas de la linea de tiempo del botón.
13. Ahora repite los pasos 7 a 12 para crear un nuevo botón para cada uno de los personajes restantes, utilizando su posición normal para el frame Up y su posición feliz para el frame Over. Dale
color a todos los personajes.
14. Cuando termines de crear los 4 nuevos botones, arma una tarjeta de felicitación con las siguientes características:
a. Crea un fondo en un layer independiente.
b. En otro layer arrastra de la biblioteca algunos símbolos para mejorar la escena.
c. En un terecer layer encima de los anteriores, arrastra a la escena los botones que has
creado. No utilices los símbolos originales de los personajes, sino los botones que los
contienen, para que tengan interactividad.
d. Agrega en un layer diferente un texto apropiado.
15. Prueba la película con el Menú Control/Test Movie. Pasa el puntero del ratón sobre los botones
para ver cómo se comportan.
47
Flash CS4 CS5
16. De regreso a la película principal, realiza las siguientes mejoras:
a. En la línea de tiempo de cada botón, duplica el personaje feliz del frame Over al frame
Down, pero además agrega en el frame Down un texto. Recuerda que al correr la película,
el contenido del frame Down se verá cuando se haga clic sobre el botón.
b. Aplica al frame Over y/o Down de cada botón un sonido del tipo Event.
17. Prueba la película y guarda los cambios.
Máscara (Mask)
Las máscaras tradicionales que se usan en fiestas o carnavales son objetos que cubren parcialmente la
cara de quien las usa. Se puede ver a través de los agujeros que tiene, mientras el resto queda oculto
por la máscara misma.
En Flash se puede crear una capa máscara, que oculta lo que está en el layer que se encuentra debajo
de ella. Los “agujeros” a través de los cuales se puede ver, se dibujan en la capa máscara o se crean
colocando símbolos vectoriales en ella.
Layer con círculo (máscara) y Layer con fotografía (enmascarado).
48
Para convertir cualquier capa seleccionada en máscara, da clic en el ícono a la izquierda del nombre de
la capa y selecciona del menú contextual la opción Mask (Máscara) o da un clic con el botón secundario
del ratón sobre el nombre del Layer 2 y selecciona la opción Mask del menú contextual.
Para convertir cualquier capa en enmascarado, da clic en el mismo ícono y selecciona la opción
Masked (Con Máscara). Los layers que arrastres a niveles inferiores al designado como máscara, serán
enmascarados de manera automática.
Video 12
Actividad 14
Máscaras
Creando una máscara
1. Abre un documento nuevo de Flash y selecciona el frame 1 del Layer 1.
2. Importa una fotografía directamente al escenario usando Menú File/Import/Import to Stage.
Puedes importar alguna de las fotografías de la carpeta de la actividad 14 de tu carpeta de trabajo.
3. Inserta un nuevo layer (Layer 2) asegurándote que queda encima del existente.
4. Dibuja en el Layer 2 una figura simple, como un círculo o una estrella, usando las herramientas. El
color no es importante.
5. Haz un clic con el botón secundario del ratón sobre el nombre del Layer 2, y selecciona la opción
Mask del menú contextual. Después, selecciona el layer 1 y activa la opción Masked del menú
contextual.
6. Describe lo que ocurre:
49
Flash CS4 CS5
a. Con la imagen en el Layer 1:
b. Con la imagen en el Layer 2:
c. Con las opciones de bloqueo de layers:
Si quieres modificar la figura en la máscara, basta desbloquear el layer correspondiente. Una vez
terminadas las modificaciones, vuelve a bloquear el layer para ver la máscara en acción.
7. Prueba la película y guarda el archivo con el nombre máscara 14 en la carpeta de costumbre.
Tip
Un gráfico vectorial o un Movie clip puede enmascarar cualquier objeto en el escenario,
pero una imagen no puede funcionar como máscara, sólo puede ser enmascarada.
En Flash se pueden utilizar tres técnicas de animación a lo largo de la línea de tiempo de cualquier layer:
Animación cuadro por cuadro (frame by frame)
En esta técnica de animación se utiliza un Keyframe para cada movimiento o cambio, tal y como fue
animado el acróbata que salta de la actividad 08. La técnica también se conoce como animación tradicional,
ya que cuadro por cuadro era la única forma en que podían hacerse los dibujos animados antes de las
computadoras. Este tipo de animación funciona muy bien a una velocidad de 12 frames por segundo.
50
Para crear animación frame to frame, coloca la imagen original en un Keyframe. Inserta delante de
él un segundo Keyframe y haz alguna modificación a la imagen. Inserta otro Keyframe y continúa la
modificación. Continúa cuadro por cuadro hasta terminar la animación.
Actividad 15
Animando cuadro por cuadro
1. En un nuevo documento de Flash utiliza las herramientas de dibujo para crear una animación cuadro
por cuadro de un deportista en acción, con las siguientes características:
a. La película debe ejecutarse a 10 fps.
b. Debes utilizar al menos 30 Keyframes, para lograr una animación de 3 segundos.
c. Debe mostrar al menos un personaje, pero puede incluir otros elementos.
2. Conforme vas avanzando, puedes ir probando la ejecución presionando la tecla <Enter>.
3. Guarda tu trabajo con el nombre frame 15 en la carpeta que indique tu profesor.
Video 13
Animación cuadro por cuadro
Esta técnica de animación es la única que puede ser usada en versiones anteriores de Flash. Usa
solamente dos Keyframes: uno para la posición inicial y otro para lo posición final. Este tipo de animación
tiene algunas particularidades:
a. Para que este tipo de animación funcione, debes usar instancias del mismo símbolo en el
frame inicial y en el final.
b. Para crear una interpolación clásica, inserta un Keyframe, que llamaremos Keyframe
inicial. Toma de la biblioteca una instancia del símbolo a animar y colócala en este primer
Keyframe.
51
Flash CS4 CS5
c. Después, en la línea de tiempo y en el mismo layer, rellena las celdas con fotogramas
regulares (tantos como quieras que dure la animación). Al final de tu secuencia de
fotogramas, inserta un último keyframe que llamaremos Keyframe final.
Fotogramas con pantalla azul en la línea de tiempo los cuáles marcan una Interpolación Clásica.
d. Modifica la instancia de este último cuadro, cambiando su posición, tamaño y/o color.
e. Para aplicar la interpolación clásica, selecciona el Keyframe inicial y aplica la opción
Menú Insertar/Interpolación clásica.
f. Los fotogramas intermedios se volverán azules y aparecerá una flecha continua negra del
fotograma inicial al fotograma final.
g. Otra característica es que el editor de movimiento no funciona con interpolaciónes clásicas,
por lo que, al animar un objeto para que se traslade de un punto a otro en el escenario,
éste lo hará en línea recta. Si necesitas que tu objeto siga una trayectoria en particular,
tendrás que crear una guía de movimiento (motion guide).
Animación Interpolación de movimiento
Se utiliza principalmente para mover símbolos. En este tipo de interpolación Flash CS4 crea animaciones
de un segundo a partir de un primer keyframe. Los frames subsecuentes al keyframe inicial aparecen de
forma automática. El número de cuadros que usará en este segundo de animación dependera del valor
que hallamos determinado al configurar el documento (fps).
Para crear una Interpolación de Movimiento o Motion Tween debe existir una instancia de un símbolo
sobre el escenario. Esta instancia está en un Keyframe, que llamaremos Keyframe inicial.
a. Para aplicar el Motion Tween selecciona el Keyframe inicial y aplica la opción Menú
Insertar/Interpolación de movimiento. Automáticamente apareceran frames que
abarquen un segundo de animación. Puedes modificar esta duración arrastrando el último
frame hacia delante o hacia atrás en la línea de tiempo.
52
Fotogramas con una Interpolación de movimiento donde aparece el Property Keyframe como un rombo negro.
b. En cualquier punto intermedio haz alguna modificación a tu instancia.
c. Aparecerá un pequeño rombo negro en el frame seleccionado. A este frame lo llamaremos
Property keyframe (fotograma clave de propiedad).
d. Si modificas la posición de un objeto, Flash CS4 “conecta” la posición original y la final con
una línea de color punteada a la que llamaremos motion path (ruta de movimiento).
e. De manera predeterminada el motion path se genera como una línea recta, si quieres que
el movimiento de tu objeto sea diferente, por ejemplo, siguiendo una línea curva, con la
herramienta de selección (Arrow) modifica el Motion path según tus necesidades.
Video 14
Animación con Interpolación
53
Flash CS4 CS5
Actividad 16
Animando con Motion Tween
1. En un nuevo documento de Flash, cambia la velocidad de reproducción (frame rate) a 30 fps. Lo
puedes hacer en el panel de propiedades o bien con el Menú Modify/Document.
2. Dibuja sobre el escenario un rectángulo de 120 px de ancho por 20 px de largo. Para que las
dimensiones sean exactas puedes modificar las propiedades W y H del rectángulo seleccionado
usando el panel de propiedades.
3. Selecciona la figura y conviértela en un símbolo del tipo Movie Clip. La animación Motion Tween
no funciona en objetos que no son símbolos. Una vez convertido, tendrás el símbolo en la biblioteca
y una instancia en el escenario.
4. Centra horizontalmente el rectángulo en el escenario, y pégalo al borde superior.
5. Selecciona el frame 1 y asígnale un Motion Tween. Lo puedes hacer en Menú Insertar/Interpolación de
Movimiento. Deben aparecer frames hasta la casilla 30 marcados con color azul.
6. Selecciona el frame 30 y muévelo al borde inferior del escenario. Aparecerá un pequeño rombo negro en esta casilla de la línea de tiempo.
7. Ahora selecciona la casilla 60 y inserta un nuevo keyframe. En esta casilla mueve de nuevo tu
objeto a la esquina superior derecha entintando esta instancia con otro color; utiliza el panel de
propiedades.
8. Con la herramienta selección (Arrow) transforma el último recorrido del motion path para hacerlo
una curva.
9. Prueba la película. También puedes arrastrar el puntero del ratón sobre la escala de la línea de
tiempo, para ver cada paso de la animación.
10. Selecciona el Keyframe 1 y prueba las opciones Aceleracion (Ease) y Rotación (Rotate) del panel
de propiedades.
54
11. Contesta:
a. ¿Qué efecto tiene agregar un valor Ease positivo?
Da el efecto de una aceleración rápida.
b. ¿Qué efecto tiene agregar un valor Ease negativo?
Da el efecto de una aceleración lenta.
c. ¿Para qué sirve la opción Rotate CW?
Rotará en el sentido de las manecillas del reloj.
d. ¿Para qué sirve la opción Rotate CCW?
Rotará en el sentido contrario a las manecillas del reloj.
e. ¿Qué función tiene el parámetro times?
Indica el número de rotaciones del símbolo.
13. Guarda el archivo con el nombre motion 15 en la carpeta de costumbre.
Interpolación de forma (ShapeTween)
Esta técnica de animación usa también sólo dos Keyframes: uno inicial y otro final. Todos los pasos
intermedios son calculados automáticamente por Flash durante la ejecución de la película. La única
diferencia es que el Shape Tween funciona sólo con gráficos que no son símbolos. Se utiliza principalmente
para deformar vectores.
a. Para crear un Shape Tween debe existir un gráfico sobre el escenario, que no sea un
símbolo, que no sea un grupo ni un objeto compuesto. Este gráfico está en un Keyframe,
que llamaremos Keyframe inicial.
b. Después, en la línea de tiempo y en el mismo layer, se inserta un Keyframe final,
que normalmente estará varios cuadros adelante del Keyframe inicial (tan lejos como
quieras que dure la animación). Recuerda que al insertar un Keyframe, Flash duplica
automáticamente el contenido del Keyframe anterior, es decir crea una copia del gráfico
inicial.
55
Flash CS4 CS5
c. Modifica este segundo gráfico, cambiando su forma o color. Con esto, ya están definidos
los Keyframes inicial y final.
Fotogramas con una pantalla verde aparecen al aplicar una Interpolación de forma.
d. Para aplicar el Shape Tween selecciona el Keyframe inicial y en Menú Insertar/
Interpolación de Forma.
Este tipo de animación también se ve mejor a velocidades entre 15 y 30 frames por segundo. En la
línea de tiempo una Interpolación de Forma (Shape Tween) se identifica con un punto negro, seguido
de una flecha que llega hasta el Keyframe final. El fondo es verde claro. Una línea punteada indica que
se ha definido un Tweening, pero falta el Keyframe final.
Video 15
Actividad 17
Shape Tween
Animando con Shape Tween
1. En un nuevo documento de Flash, cambia la velocidad de reproducción (frame rate) a 30 fps.
Selecciona el cuadro 1 del layer 1.
2. Escribe sobre el escenario una letra A mayúscula y cambia su alto y ancho a 300 X 300 px. Centra
perfectamente la letra en el escenario.
3. Como el Shape Tween no funciona con objetos compuestos, separa la letra para convertirla en
gráfico, con el Menú Modificar/Separar (MenuModify/Break Apart).
56
4. Inserta un Keyframe en el cuadro 30 y otro en el cuadro 60 del layer 1.
5. Selecciona el Keyframe 30 y borra su contenido (una copia de la letra A). Quedará vacío el
espacio entre los frames 30 y 60.
6. Escribe sobre el escenario la letra B mayúscula. Céntrala perfectamente en el escenario y ponle
un color diferente. Separa también esta letra en un gráfico, con el Menú Modificar/Separar
(MenuModify/Break Apart).
7. Selecciona el frame 1 del layer 1 y asígnale una Interpolación de forma (Shape Tween), en
Menú Insertar/Interpolación de Forma. Debes ver una flecha continua que va del Keyframe
1 al Keyframe 30.
8. Asigna otra Interpolación de forma (Shape Tween) entre el Keyframe 30 y el Keyframe 60.
9. Prueba la película. También puedes arrastrar el puntero del ratón sobre la escala de la línea de
tiempo, para ver cada paso de la animación.
10. Selecciona el Keyframe 1 y prueba las opciones Fusión (Blend) del panel de propiedades.
Contesta:
a. ¿Para qué sirve el Blend Distributivo?
Crea una animación en la que las formas intermedias son más suaves y más
irregulares.
b. ¿Para qué sirve el Blend Angular?
Crea una animación que mantiene las esquinas y las líneas rectas en las
formas intermedias.
11. Guarda el archivo con el nombre shape 16 en la carpeta de costumbre.
Observa las tres líneas de tiempo y escribe sobre la línea cuál es interpolación de movimiento,
interpolación clásica o interpolación de forma.
57
Flash CS4 CS5
Actividad 18
Identificando Tweens
1. Observa las líneas de tiempo y escribe sobre la línea de qué tipo de Tween se trata.
a.
b.
c.
Interpolación clásica
Interpolación de forma
Interpolación de movimiento
Guías de movimiento (Motion Guide)
En un Motion Tween, cuando un objeto se mueve de una posición inicial a una final, normalmente lo hace
en una trayectoria de línea recta. Si se agrega una guía de movimiento se puede hacer que el movimiento
siga una línea dibujada en una capa especial llamada Guía de Movimiento (Motion Guide).
1. Para crearle una guía de movimiento a un capa seleccionada, primero debes crear una nueva “capa
guía” en el nivel inmediato superior.
2. Después, da clic en el ícono a la izquierda del nombre de la nueva capa y selecciona del menú
contextual la opción Guide (Guía). Dibuja la trayectoria que deseas que siga tu objeto utilizando las
herramientas (normalmente el lápiz, la pluma o un pincel delgado) en el escenario.
3. Ahora regresa a la capa que contiene el objeto que moverás y da clic en el ícono a la izquierda del
nombre de la capa, selecciona del menú contextual la opción Guided (Con Guía).
4. Esta capa quedará subordinada a la información que tenga la Capa guía. Para realizar la animación
de tu objeto, crea un Fotograma clave al inicio y otro al final de tu secuencia de movimiento.
5. Posiciona el centro de tu objeto en los extremos de la línea guía (donde empezará el recorrido y
donde terminará). Al exportar la película, la trayectoria dibujada será invisible.
58
Video 16
Actividad 19
Guías de movimiento
Siguiendo guías
Importante: Para realizar esta actividad es preciso haber comprendido bien las técnicas para crear
animación cuadro por cuadro y animación con interpolación clásica.
1. Abre en Flash la película Actividad19.fla que se encuentra en tu CD de trabajo o carpeta de actividades.
2. Localiza en la biblioteca de símbolos el Movie clip llamado mariposa. Ábrelo haciendo doble clic sobre
él. Puedes verificar que estás viendo la línea de tiempo del símbolo y no la línea de tiempo principal,
comprobando los botones de la esquina superior izquierda de la sub-ventana del documento. Este Movie clip cuenta con tres layers: en uno se encuentra el cuerpo y en los otros dos las alas de la mariposa.
3. Para simular el movimiento de las alas de la mariposa usarás la técnica de animación cuadro por
cuadro. Localiza el layer donde está una de las alas e inserta un Keyframe en el cuadro 2.
4. Selecciona el ala en el cuadro 2 y modifica un poco su tamaño. También puedes deformarla para
simular el aleteo. Recuerda ir probando con la tecla <Enter> hasta lograr el efecto más natural.
5. Haz lo mismo para animar el movimiento de la otra ala del insecto.
6. Regresa a la línea de tiempo principal presionando el botón Scene 1.
Puedes deformar el ala para simular un efecto más natural.
59
Flash CS4 CS5
7. Crea en el escenario una instancia del símbolo mariposa, que se encuentra en la biblioteca de símbolos.
8. Prueba la película. Aunque la línea de tiempo principal tiene un solo cuadro, el símbolo que contiene
se reproduce continuamente.
9. En la línea de tiempo principal utiliza la técnica de animación con Interpolación clásica para que la
mariposa se desplace en línea recta por el escenario, desde la esquina inferior izquierda hasta la
esquina superior derecha. Utiliza al menos 30 cuadros para el movimiento.
10. Prueba la película y revisa que la animación funciona correctamente.
11. Ahora agrega al layer actual una guía de movimiento dando clic en el ícono a la izquierda del
nombre de la nueva capa y selecciona del menú contextual la opción Guide (Guía).
12. En el nuevo layer, utiliza la herramienta lápiz para dibujar una trayectoria con curvas que deberá
seguir la mariposa. Puedes usar la opción de suavizar (Smooth) en la parte inferior de la barra de
herramientas, para que la trayectoria sea más natural.
Con la herramieta lápiz dibuja la trayectoria que seguirá la mariposa.
Capas Guía y Guiada en la línea
de tiempo.
Debes anclar la instancia “mariposa” al punto Snap.
60
13. Selecciona la instancia de la mariposa en el Keyframe inicial del movimiento y muévela al punto
inicial de la trayectoria. Mientras la mueves se ve un pequeño círculo llamado snap, que se debe
anclar con la trayectoria.
14. De forma similar, selecciona la mariposa en el Keyframe final y muévela hasta que el snap se
ancle en el extremo final de la trayectoria.
15. Prueba la película y guarda el archivo con el nombre trayectoria 18 en la carpeta de costumbre.
Filtros (Filters)
Los filtros permiten añadir atractivos efectos visuales a texto, botones y Movie Clips. No es posible
aplicar filtros a gráficos que no son instancias de símbolos.
Flash cuenta con las siguientes opciones de filtros:
• Drop Shadow (sombra).
• Blur (desenfocar).
• Glow (Iluminación).
• Bevel (Bisel).
• Gradient Glow (Iluminación degradada).
• Gradient Bevel (Bisel degradado).
• Adjust Color (Ajuste de color).
61
Flash CS4 CS5
Sombra
Iluminado
Desenfoque
Bisel
Ajuste
de color
De estos, los utilizados más frecuentemente son las sombras, los desenfoques y los biseles. Una característica
exclusiva de las nuevas versiones de Flash es que permite animar los filtros utilizando un Motion Tween.
Para aplicar un filtro a un objeto seleccionado en el escenario, utiliza el panel Filters que se encuentra la
ventana de propiedades, pulsa el icono Add Filter y selecciona uno de los filtros disponibles. Al hacerlo,
aparecerán algunas propiedades que puedes ajustar de acuerdo a tus necesidades como:
• Strength (Intensidad)
•
Quality (Calidad)
• Angle (Angulo)
• Knockout (Extractor)
• Outer/Inner (Exterior/Interior)
Es posible añadir uno o varios filtros a un objeto, que se aplican en el mismo orden en que son agregados.
Video 17
62
Filtros
Actividad 20
Utilizando filtros
1. Abre en Flash la película Actividad20 que se encuentra en la carpeta de actividades.
2. Desde la biblioteca de símbolos arrastra el Movie Clip “acróbata” al escenario.
3. Duplica 5 veces la instancia en el escenario, seleccionándola y usando el Menú Edit/Duplicate o
bien la combinación de teclas <Ctrl+D>.
4. Utiliza el panel de filtros para aplicar un efecto diferente a cada una de las instancias en el escenario.
5. Debajo de cada instancia, utiliza la herramienta de texto para escribir el nombre del filtro aplicado
y las propiedades o parámetros usados.
6. Prueba la película y guarda el archivo en la carpeta que indique tu profesor.
63
Flash CS4 CS5
Actividad 21
Publicidad para Internet
Actualmente el medio publicitario más utilizado en Internet es el banner, que es un recuadro que aparece
dentro del área de un sitio o página Web y que contiene algún mensaje comercial. La mayoría de los
banners aparecen horizontalmente en la parte superior de las páginas, pero también los hay verticales o
cuadrados, y pueden mostrarse en otras áreas.
Algunos tipos de banner y sus dimensiones son:
a. Full banner: 480 X 60 pixeles
b. Leaderboard: 728 X 90 pixeles
c. Skyscrapper: 120 X 600 pixeles
d. Banner Botón: 120 X 60 pixeles
e. Robapágina 300 X 250 pixeles
1. Elige 5 temas publicitarios distintos y anótalos aquí. Pueden referirse a productos, eventos escolares, espectáculos, servicios u otros.
a.
b.
c.
d.
e.
2. Crea un banner para cada tema, usando cada uno de los 5 tipos y dimensiones especificados arriba.
64
Utiliza un documento diferente para cada banner. Cada uno debe cumplir los siguientes requisitos
mínimos:
a. Velocidad de la película de 30 fps.
b. Elementos que se muestran en diferentes momentos de la película.
c. Incluir Motion Tween (además al menos uno de los banners debe seguir una guía de
movimiento).
d. Incluir texto.
e. Incluir uso de filtros.
f. Al menos uno de los banners debe tener animación cuadro por cuadro.
3. Prueba y guarda cada archivo con el nombre que consideres adecuado.
65
Flash CS4 CS5
Para la creación de banners para internet, podemos básicamente usar cualquier tamaño según nuestro
diseño nos lo permita, pero hay tamaños estándar como en muchas otras cosas.
Leaderboard (728 x 90)
Full Banner (468 x 60)
Micro Bar
(88 x 31)
Half Banner (234 x 60)
Rectangle (180 x 150)
Square Button
(125 x 125)
Large Rectangle (336 x 280)
Medium Rectangle (300 x 250)
66
Skyscaper
Wide Skyscraper
(120 x 600)
(160 x 600)
Actividad 22
Creación de un banner para un cliente
Aprenderás como hacer un banner, en este caso para la “Mueblería Ordaz”, en un tamaño estándar:
Medium Rectangle 300 x 250 pixeles.
1. Inicia un documento nuevo de Flash (Actionscript 2.0). Ve al Panel de Propiedades (Properties) y
presiona en el botón Tamaño (Size) para ajustar las medidas de la escena e ingresa en el apartado
Dimensiones (Dimensions) introduce 300 en el parámetro que indica la medida horizontal (width)
y 250 en la que indica la vertical (height). En la velocidad de fotogramas (Frame rate) introduce
el valor de 30. Presiona OK.
2. Tenemos ahora nuestro documento para banner con las dimensiones y la velocidad establecida. Es hora
de importar lo que será el fondo. Renombra la Capa1 (Layer 1) por fondo. Después, selecciona el único
Keyframe, que se encuentra en blanco, y ve al menú Archivo/Importar/Importar a Escenario (File /
Import /Import to Stage). Busca en tu carpeta de actividades la carpeta Actividad22 y de ahí, importa el archivo bg.png. Asegúrate que el archivo se haya importado con las medidas correctas: 300x250
píxeles, además de que se encuentre en la coordenada 0 en X y 0 en Y. Con esto ya tenemos nuestro
fondo, es hora de incluir los objetos que animaremos así como el logo de la mueblería.
67
Flash CS4 CS5
3. Ve al frame 280 de la capa Fondo, da clic derecho y presiona en Insertar Fotograma (Insert Frame), con
esto estamos haciendo visible el grafico del fondo durante todos los frames que durará nuestro banner.
Bloquea la capa Fondo y crea una nueva, renómbrala lámpara. Ahora importa el archivo lámpara.png
de la carpeta de este proyecto. Este archivo tiene 127 x 250 pixeles de ancho; verifica que tenga estas
dimensiones seleccionándolo y revisando sus propiedades en el panel Propiedades (Properties). Colócalo
en la posición 0 en X y 0 en Y, y dando clic derecho sobre la lámpara conviértela en Clip de Película
(MovieClip); nómbralo lámpara_mc.3c.png
4. Enseguida haz lo mismo con el archivo sillón.png y logo.png, impórtalos, verifica que el sillón
tenga una dimensión de 246 de ancho por 138 de alto, y el logo de 173 de ancho por 112 de
alto. Convierte ambos a Clip de Película (MovieClip) y ponles por nombre sillón_mc y logo_mc
respectivamente. Enseguida, crea dos capas nuevas y nómbralas sillón y logo, coloca en ellas los
Movieclips que correspondan a cada una. Ordena tus capas de tal manera que quede como se
muestra en la siguiente imagen:
68
5. Ahora es cuando comenzamos a planear la animación que tendrá nuestro banner y en cómo se presentará el logotipo de nuestra mueblería. Es importante que acomodes los MovieClips como se muestra en
la imagen siguiente, de esta manera será más fácil que sigas las instrucciones para animarlo.
6. Empuja <Shift + Flecha Izquierda> la lámpara a la izquierda, hasta que veas que sale de la escena.
Empuja ahora el sillón hacia la derecha y colócalo fuera de la escena también. Realiza lo mismo con
el logo, empújalo hasta la parte derecha, fuera de escena.
Hasta aquí hemos terminado de colocar todos los elementos necesarios para comenzar a animar
nuestro banner. A partir de ahora con la ayuda de Motion Tween moveremos los diferentes elementos
para crear una animación de entrada y salida de todos nuestros MovieClips.
7. Selecciona el Keyframe de la de la capa Lámpara, ve al frame 10 y da clic derecho para acceder al
menú contextual y presiona en Insertar Fotograma Clave (Insert Keyframe), hemos indicado que
el MovieClip lámpara_mc deberá estar en el mismo lugar durante esos 10 frames.
69
Flash CS4 CS5
Ahora ve al frame 18 de la misma capa y nuevamente inserta un Keyframe, mueve el MovieClip
al lugar en donde colocamos la lámpara dentro de la escena; con esto le estamos indicando que el
movimiento de la lámpara deberá tomar 8 frames. Presiona botón derecho sobre la línea de tiempo
entre el frame 10 y 18 de esta misma capa y selecciona Crear Interpolación Clásica de Movimiento
(Create Classic Tween).
8. Realiza lo mismo con el sillón, únicamente asegúrate que la animación le tome los mismos 8 frames
pero a partir del frame 24, es decir, del 24 al 32.
9. Para poder visualizar la animación que llevamos hasta ahora, presiona <Enter>. Como ves, tenemos el movimiento de la lámpara y del sillón. Es hora de animar el logotipo.
10. Inserta un keyframe sobre la capa logo en el frame 40, con ello indicamos que el logo debe estar
inmóvil hasta llegado el frame 40.
11. Agrega un keyframe más en la capa logo, pero ahora en el frame 52 para que nuestra animación
de entrada del logo dure 12 frames.
70
12. Selecciona la imagen del logo estando en el frame 40 toma la herramienta de Transformación
Libre (Free Transform) y escálalo presionando
<Shift> un 160%, revisa este dato en el Panel
Transformación (Transform).
13. Ve al frame 52 y mueve el logotipo en la escena
hasta que lo coloques en la posición que habíamos planeado al principio. Agrega la Interpolación
ClassicTween entre los frames 40 y 52.
14. Listo, ya tenemos la mitad de lo que será nuestro banner. Es importante que dejemos por unos
instantes las imágenes sin movimiento, después de todo, lo que quiere el cliente es que su marca
sea expuesta.
15. Es hora de retirar los elemento de escena, excepto el logo. Agrega un Keyframe en las capas de
Lámpara y Sillón en el frame 120, a partir de ahí comenzarán su movimiento de salida; agrega un
par mas de Keyframes en las mismas capas pero ahora en los frames 128, ahí deberán terminar
su animación.
16. En el frame 128 empuja los símbolos lámpara_mc y sillón_mc a la izquierda y derecha respectivamente fuera del escenario. Crea el ClassicTween para ambas capas entre los frames 120 y 128.
71
Flash CS4 CS5
17. Para darle mejor presentación al logo lo dejamos al final y lo situaremos al centro del banner, realiza
esa animación del frame 132 al 148, recuerda poner entre estos frames el ClassicTween.
18. Agrega un Keyframe sobre la capa logo en el frame 188 y uno más en el 200. Crea un ClassicTween
entre ellos y selecciona el gráfico del logo que se encuentra en el frame 200.
Ve al panel Propiedades (Properties) y abre la opción Efecto-Alfa (Color – Alpha).
Asegúrate que se encuentre el valor al 0%, con esto se efectuará un desvanecimiento del logotipo
dejándonos de nuevo el escenario limpio para que comience de nuevo la animación.
13. Publica la película <Control + Enter> y observa el resultado.
Tip
Puedes agregar un efecto de aceleración o desaceleración en tus Interpolaciones de Movimiento
Clásicas para obtener un movimiento más fluido. Selecciona un frame entre dos Keyframes que
contengan una interpolación y ve al Panel de Propiedades e ingresa en el indicador Ease un valor
de +100 cuando el gráfico vaya entrando a escena y -100 para cuando este vaya saliendo.
72
Actividad 23
Animación con Pivotes
Flash nos permite animar objetos tomando como eje de movimiento un pivote que por default
encontramos en el centro de cada símbolo.
El pivote es representado por un pequeño círculo blanco y puede estar dentro o fuera del área del
símbolo. Es visible únicamente cuando seleccionas el objeto, y es editable sólo cuando es seleccionado
con la herramienta de Transformación Libre (Free Transform).
Al girar el objeto, este girará usando como eje el lugar en donde hayamos colocado el pivote. Al
realizar el siguiente ejercicio comprenderás el uso de los pivotes, además de la animación concatenada
en símbolos y distintas líneas de tiempo.
Abre de la carpeta Actividad23,
dentro de ella encontrarás el
archivo Péndulos.fla, ábrelo.
En escena se encuentran 4 grupos: el soporte (a1), un brazo (a2) y dos péndulos (a3 y a4), todos
ellos en una sola capa: Péndulos. Realizaremos una animación con ellos de manera que cada péndulo
se encuentre dentro del símbolo del brazo, y este a su vez, dentro del símbolo del soporte.
73
Flash CS4 CS5
1. Selecciona todos los elementos en el escenario encerrándolos dentro de un cuadro con la herramienta de selección. Presiona el botón derecho de tu ratón sobre ellos y en el menú contextual presiona
Convertir a símbolo (Convert to Symbol) nombra el símbolo como aparato_mc.
2. Ingresa dentro de este símbolo con doble clic sobre él. Ahora te encuentras en la línea de tiempo de
aparato_mc y nuevamente los gráficos son mostrados como grupos.
3. Crea una nueva capa y llámala Brazo. También renombra la Capa 1, ponle Soporte.
4. Selecciona el brazo (a2) y los dos péndulos (a3 y a4) de los extremos, córtalos <Control + X> y
pégalos en la misma coordenada donde se encontraban: Editar/Pegar In situ (Edit/Paste in Place),
pero en la capa Brazo. En apariencia tendrás lo mismo, pero ordenado ahora en 2 capas.
5. Selecciona todo lo que tenga la capa Brazo, deben ser tres grupos (a2, a3 y a4). Conviértelos en
un símbolo MovieClip y nómbralo: brazo_mc; ingresa con doble clic sobre este último para acceder
a su línea de tiempo.
74
6. Dentro, ahora deberás crear dos capas más y renombrar las 3 que se encuentran en esta línea
de tiempo. A continuación, cortarás y pegarás en sitio los siguientes grupos, es importante que
queden en el mismo lugar exacto en donde se encuentran ahora. En una capa que llamarás
Brazo Img, debes colocar el grupo a2, en otra con el nombre de Péndulo 1 coloca el a3 y por
último en una capa con el nombre Péndulo 2, el grupo a4. El resultado de esto debe verse
de la siguiente manera.
7. El paso siguiente es convertir a MovieClip cada uno de los grupos a3 y a4 nómbralos péndulo1_mc
y pendulo2_mc respectivamente. Con esto lo que queda es animar nuestros péndulos, así como el
brazo posteriormente.
8. Selecciona el MovieClip pendulo1_mc (a3) con la herramienta de Transformación Libre (Free Transform) y asegúrate que el pivote (representado
por un círculo blanco) esté justo en el centro del eje gráfico, para que al girar
parezca hacerlo por dicho eje. Haz lo mismo con el péndulo2_mc (a4). A
continuación, un ejemplo del lugar en donde deben quedar los pivotes en los
dos MovieClips.
9. Con los pivotes en su lugar, ahora agrega Keyframes en la capa Pivote 1 en los frames 40 y 80. Ve
al Keyframe del frame 40 de la misma capa y gira el Péndulo 160º en el sentido de las manecillas
del reloj, puedes ayudarte del panel de transformación o calcular los grados.
75
Flash CS4 CS5
10. Agrega interpolación ClassicTween entre los Keyframes 1 y 40, también entre los 40 y 80. Como
la instancia de péndulo1_mc en el frame 80 no la movimos, está igual que la del frame 1; por lo
que nuestra animación será un ciclo perfecto.
11. Para agregar un efecto de aceleración y desaceleración como en estos movimientos sucede, selecciona un frame entre el 1 y 40 y en el panel de propiedades modifica el valor de Aceleración
(Ease) por 100, haz lo mismo seleccionando un frame entre el 40 y el 80 ingresa ahora un valor
en Aceleración (Ease) de -100.
12. Realiza lo mismo con el MovieClip péndulo2_mc (a4); pero en este caso el movimiento debe ser
más irregular usando el mismo número de frames. Primero, con la Herramienta de Transformación
Libre (Free Transform), modifica el pivote asegurándote que este se encuentre en el eje gráfico;
hecho esto, inserta Keyframes en los frames 20, 50, 65 y 80; recuerda que los Keyframes 1 y 80
deben quedar iguales para que nuestra animación sea un ciclo, por lo tanto, sólo modificaremos los
Keyframes 20, 50 y 65.
76
13. Ve al Keyframe 20 y gira el símbolo péndulo2_mc 160º en el sentido de las manecillas del reloj,
después ve al Keyframe 50 y gíralo 100º en sentido contrario, por último, colócate en el frame 65
y gira de nuevo el objeto 160º en sentido de las manecillas del reloj.
14. Selecciona un frame entre cada Keyframe que contenga un Classic Tween para que en el panel de
Propiedades (Properties) a todos les cambies el valor a 100 en el indicador Ease. En el frame 80
de la capa brazo img inserta un Keyframe para que puedan verse los tres elementos durante todo
el ciclo de la animación.
15. Hasta aquí hemos terminado con la animación de los péndulos. Ahora comenzaremos con la animación de brazo_mc, da doble clic en un área en blanco para saltar a la línea de tiempo superior.
Ahora tenemos la vista con las capas brazo y soporte.
16. Asegurate que el pivote del MovieClip brazo_mc esté en el centro del pivote gráfico, como se
muestra en la siguiente imagen.
17. Ahora en el frame 1, gira brazo_mc 25º en contra del sentido de las manecillas del reloj. Esta será la
posición inicial y final de esta animación. Agrega Keyframes en la capa brazo en los frames 60 y 100; en el
frame 60 gira el brazo_mc 55º en el sentido de las manecillas del reloj, hasta que lo veas de esta manera.
77
Flash CS4 CS5
18. Selecciona un frame entre el 1 y el 60 y agrega un Classic Tween, repite esta operación entre el frame
60 y 100. Al terminar asegúrate de insertar un frame en la posición 100 de la capa Soporte, con ello
el gráfico del soporte estará presente en toda la animación. Puedes agregar en el campo Aceleración
(Ease) en las dos interpolaciones del brazo el valor 100, para lograr un efecto más natural.
19. Presiona nuevamente doble clic en algún espacio en blanco dentro del escenario para saltar a
la línea de tiempo superior, que es la línea de tiempo principal. Publica la película presionando
<Control + Enter>.
Como puedes observar, las animaciones concatenadas van una dentro de otra y se mueven según su
instancia superior, tal es el caso de los péndulos, que se mueven según se mueve el brazo.
78
Tip
Cuando se hace girar un objeto con programación ActionScript el programa ignora el pivote que
se edita con la herramienta de transformación y en cambio, usa como pivote el punto de registro
de los MovieClips.
Actividad 24
Tarjeta Electrónica
Flash nos permite hacer animaciones muy sencillas de realizar, pero que a su vez con un buen diseño
pueden lucir muy profesionales.
Crearemos una tarjeta electrónica. Con un poco de creatividad y planeación será sumamente fácil
realizarla, veremos que las animaciones son realmente sencillas y nos basaremos en gran parte al uso
de guías de movimiento.
Las guías de movimiento (guide) son trazos que nos sirven para definir una ruta a seguir por un
símbolo, este último se desliza por el trazo tomando como eje el pivote del objeto.
Entra a la carpeta Actividad24 en tu carpeta de actividades. Dentro de ella encontrarás el archivo Feliz
viaje.fla, ábrelo.
79
Flash CS4 CS5
En este archivo encontramos 7 capas: ola3, ballena, ola2, pez, ola1, barco y fondo. Convierte a Clip
de película (MovieClip) todos los gráficos, excepto fondo, ya que es lo único que no vamos a mover y
recuerda nombrarlos usando el mismo nombre de la capa, pero añadiendo al final “_mc”, el resultado
deberá ser: ola3_mc, ballena_mc, ola2_mc, pez_mc, ola1_mc y barco_mc. Sigue los pasos a
continuación.
1. Esconde todas las capas, excepto ola1, crearemos una guía de movimiento para hacer una animación circular de esta ola, y que de igual manera nos servirá para las dos restantes.
2. Toma la herramienta Óvalo (Oval) y asegúrate que el trazo sea negro y que no tenga relleno, crea
una nueva capa, nómbrala guía_ola1 y colócala arriba de la capa ola1; hecho esto deberás trazar
un óvalo sobre la capa que acabas de crear, cerciórate que tenga el tamaño en X de 50 y en Y de
20, esto lo podrás hacer desde el Panel de Propiedades (Properties).
3. Coloca el pequeño óvalo en el centro del gráfico ola1; la parte superior del óvalo debe coincidir con
el pivote (círculo blanco que aparece al seleccionar el objeto) con la herramienta de Transformación Libre (Free transform tool).
4. Bloquea la capa ola1 y realiza un zoom al 400%, esto lo puedes hacer en el indicador activo del zoom.
5. Con la herramienta de Selección (Selection tool) realiza una pequeña incisión en
la parte superior del óvalo, y elimina lo que
seleccionaste presionando la tecla <Supr>.
Este corte se hace debido a que toda Guía
de Movimiento debe tener un principio y un
final, así el programa realizará la animación
del objeto que correrá a través de esa línea,
que en este caso es un óvalo sin cerrar.
80
6. Da clic con el botón derecho sobre la capa guía_ola1 y selecciona la opción Guía (Guide) del menú
contextual. Con esto la capa queda configurada como una guía de Movimiento, pero aún no tiene
asignada ninguna capa ni símbolo para que éste se desplace por la guía. Recuerda que la vista en
el escenario aún esta en 400%.
7. Desbloquea y arrastra la capa ola1 y suéltala justo encima de la capa guía_ola1, como si quisieras
ponerla dentro de la capa guía. Como ves, la capa ola1 se ha “enlazado” a la capa guía_ola1 y
esta, a su vez, ha cambiado su icono indicándonos que ya tiene un símbolo a mover.
8. Hasta este punto no tenemos ninguna animación en nuestro archivo. Ve a la capa fondo y muéstrala, pero no la desbloquees, en ella, inserta un frame en el cuadro 36 para que durante 36 frames
nuestro fondo esté visible; haz lo mismo con la capa guía_ola1, ahora inserta un Keyframe en el
frame 36 de la capa ola1.
9. Ve al frame 1 de la capa ola1 y nuevamente con el zoom a 400%, toma la herramienta de Transformación Libre (Free Transform) y empuja con ayuda de las <Flechas de dirección> el gráfico de
ola1_mc hasta que el pivote (círculo blanco central del objeto seleccionado) se encuentre con
el extremo derecho de la curva que forma el óvalo sin cerrar.
81
Flash CS4 CS5
10. Ve al frame 36 y haz lo mismo, empuja el gráfico hasta que el pivote se encuentre con el
extremo opuesto.
11. Crea una Interpolación de Movimiento Clásico (Create Classic Tween) entre el frame 1 y el 36.
Presiona <Control + Enter>.
Como verás, las olas se mueven de manera circular, este tipo movimiento con interpolación es
únicamente posible con la ayuda de guías de movimiento. Realiza lo mismo con las otras dos capas
de olas: crea una capa para la guía de cada una y nómbralas guía_ola2 y guía_ola3. Para crear
una animación más de acuerdo con lo que es el movimiento del mar, coloca como guía en cada capa
óvalos con cortes como se muestra en la siguiente imagen para que tengan un movimiento cíclico
desfasado:
Es importante que bloquees las demás capas con las que no estés trabajando para que no muevas los
elementos que en ellas se encuentran al crear los óvalos o hacer selecciones.
Para la guía de la ola2 procura que el óvalo sea un poco más pequeño que el de la ola1 y el de la
ola3, a su vez más chico que el de la ola2. Agrega sus fotogramas clave (Keyframes) y realiza las
Interpolaciones de Movimiento Clásicas (Create Classic Tween); al término de esto, asigna cada capa
de olas a su correspondiente guía (Paso 7).
82
12. Una vez que hayas terminado con estos pasos, prueba la película con <Control + Enter>, deben
verse las 3 olas moverse en círculos; mientras tanto, el barco, el pez y la ballena aparecerán sólo en
el primer fotograma (frame) por lo que sólo en un pequeño instante serán visibles.
13. Cierra el visor de la película y regresa a la línea de tiempo (time line), muestra la capa “pez” y selecciona el gráfico que ahí se encuentra, modifica el pivote del pez arrastrando el círculo blanco que
se encuentra en el centro, llevándolo al centro del escenario pero un poco hacia la parte de abajo.
14. Inserta un fotograma clave (Keyframe) en el cuadro 36 y en este frame gira el pez de manera
que quede en el lado opuesto y llegue hasta la parte contraria del escenario, notarás que el pez
gira en torno a un eje por debajo de él, y con esto, su trayectoria dibuja una curva. Agrega una
Interpolación de Movimiento Clásico (Create Classic Tween) seleccionando un frame entre el 1 y
el 36 y seleccionando la opción del menú contextual.
15. Realiza lo mismo con la ballena, inserta un fotograma clave (Keyframe) en el cuadro 36, ahí,
llévalo a el extremo opuesto del escenario empujándolo las flechas de tu teclado de forma completamente horizontal, coloca una Interpolación de Movimiento Clásica (Create Classic Tween)
entre el frame 1 y 36. Para hacer que la ballena se asome un poco, ingresa un fotograma clave
(Keyframe) en el cuadro 20 y con <Flecha Hacia Arriba> empuja la ballena sólo un poco hacia
arriba, lo suficiente para que su sonrisa sea visible.
Publica la película. Ahora sólo falta la animación del barco. Bloquea todas las capas excepto la que
contiene el navio.
16. Selecciona el barco y modifica su pivote, colócalo
en la parte trasera inferior de la embarcación.
83
Flash CS4 CS5
17. Agrega dos fotogramas clave (Keyframes), uno en el cuadro 15 y otro en el 36. Selecciona el
barco en el frame 15, gíralo en el sentido de las manecillas del reloj levemente y muévelo hacia
abajo, sólo un poco, al ejecutar la animación verás si lo que lo moviste es suficiente o quizás
necesite un poco más. Crea una interpolación de movimiento entre los frames 1 al 15 y otra
entre el 16 y el 36.
18. Publica la película <Control + Enter>, ahora
tienes una atractiva tarjeta virtual, sólo debes
colocarle en una capa superior con texto un
emotivo mensaje: “Feliz Viaje” no estaría mal.
Tip
84
Las guías de movimiento pueden seguir casi cualquier trazo, siempre y cuando éste no se
cruce consigo mismo.
Actividad 25
Máscaras
Las máscaras funcionan como “ventanas” que nos permiten ver o esconder el contenido de una o más
capas. Puedes usar varias en el mismo archivo, en la misma línea de tiempo y al mismo tiempo. Con
ellas podrás enmascarar contenidos de diferentes tipos tales como trazos, rellenos, mapas de bits y hasta
videos que hayas importado. Es importante recordar que el uso de máscaras requiere de un pequeño
esfuerzo de nuestro equipo al momento de presentar la película, por lo que el uso de varias de ellas
debe ser bien justificado.
A continuación, aprenderás como esconder
parte de un escenario haciendo una animación
del fondo del mar. En tu carpeta de actividades
encontraras la carpeta Actividad25, dentro de
ella encontrarás el archivo “Fondo del mar”,
ábrelo.
Como puedes ver, en este archivo se encuentran ya algunas capas y objetos necesarios para este ejercicio.
De abajo hacia arriba: la capa fondo, pez y tiburón, las dos últimas vacías. Comenzaremos colocando
tanto el pez como el tiburón, seguiremos con la animación y al final vamos a enmascarar.
1. Selecciona el Keyframe vacío de la capa pez y abre el Panel Biblioteca (Library), ahí se encuentra
el MovieClip “pez_mc“, arrástralo al escenario y colócalo a la derecha del fondo del mar que se encuentra al centro del área de trabajo. Para este
ejercicio hemos dejado más grande el escenario
para que al momento de publicar la película podamos observar mejor el efecto de la máscara.
85
Flash CS4 CS5
2. Realiza la misma operación con el símbolo tiburón_mc, colócalo en la capa tiburón, pero éste al
lado izquierdo de la imagen de fondo.
3. Inserta en ambas capas, tiburón y pez, Keyframes en el frame 50 seleccionando de manera simultánea los dos frames, haciendo clic derecho y presionando en el menú contextual Insertar Keyframe
(Insert Keyframe). Esta es una manera muy sencilla de agregar dos o más frames o Keyframes
al mismo tiempo.
4. Presiona con el botón derecho en el frame 81 de la capa fondo e inserta un frame (Insert Frame),
este frame será el último de nuestra animación del movimiento tanto del pez como del tiburón.
5. Selecciona el Keyframe 50 de la capa pez y arrastra el símbolo del pez a la parte izquierda del
escenario, es decir, debe quedar fuera del gráfico de fondo, sobre el área blanca.
6. Realiza lo mismo con el tiburón; en el frame 50, llévalo al lado opuesto del escenario de manera
que lo veamos en la parte blanca.
7. Nuevamente selecciona un frame de cada capa, cualquiera entre el 1 y el 50, haciendo clic y
arrastrando para seleccionar hacia la otra capa, presiona sobre la selección de dos frames el botón
derecho de tu mouse y haz clic en Crear Interpolación Clásica de Movimiento (Classic Tween),
con esto queda hecha la interpolación en ambas capas.
8. A continuación, inserta un Keyframe vacio (Blank Keyframe) en las capas pez y tiburón en el
frame 51 utilizando la misma técnica de selección de frames.
9. Selecciona todos los frames que hemos utilizado de la capa tiburón (del 1 al 51) y arrástralos hasta
que el primer frame se encuentre en la posición 30, con ello el Keyframe en blanco de esta capa
se sitúa en el frame 81.
86
10. Presiona <Control + Enter> y observa lo que sucede. El pez como el tiburón pasan por el fondo,
salen de este y repentinamente desaparecen, ya que el Keyframe en blanco al final de las interpolaciones evita que el símbolo siga en el escenario. Cierra la reproducción de la película.
11. Agrega una capa nueva y nómbrala: “máscara”, es importante que esta se encuentre por encima
de las otras tres.
12. Selecciona el Keyframe en blanco que se encuentra en la capa máscara y toma la herramienta Rectángulo (Rectangle), con ella traza un rectángulo procurando que este sea del mismo tamaño que
el gráfico del fondo del mar; no importa el color de relleno ni del trazo. En este punto es importante
entender que lo que estamos colocando en la capa máscara nos servirá como “ventana”.
13. Da clic derecho sobre el nombre de la capa mascara; selecciona la opción Máscara (Mask) del
menú contextual. Con esto le has asignado la
función de máscara a esta capa. Nota como su
icono cambió.
14. Como último paso, toma cada una de las capas pez y fondo, de una en una y arrástralas hasta la
capa máscara, sin soltar, observa cómo interactúa el indicador de la posición en la que se colocará
la capa que arrastras. Si lo hiciste correctamente la capa que soltaste se verá en un orden jerárquico
diferente, esto lo puedes ver en la alineación de los mismos nombres de las capas. Si no lo logras
a la primera, vuelve a intentarlo.
15. Ya que tengas las dos capas colocadas “dentro” de la capa máscara, bloquéalas todas excepto la
capa fondo. Publica la película, <Control + Enter>
87
Flash CS4 CS5
Como puedes notar, tanto el pez como el tiburón se ocultan mientras que van saliendo del área del
rectángulo que contiene la capa máscara. Ahora experimenta un poco con esa capa, desbloquéala y
escala al 50% el rectángulo. Observa qué sucede si pones otra figura en lugar del rectángulo como una
estrella o un círculo.
Tip
88
El aspecto en que lucirá el efecto de la capa máscara sólo es visible cuando esta y las capas
que contiene “dentro” están bloqueadas. La capa máscara no funciona con trazos, sólo
admite rellenos y símbolos.

Animación con Flash CS4 y CS5_profesor

Transcripción

Documentos relacionados

El nuevo Flash Cat 43 es el primer Trawler multicasco de nueva

COMO ACTUALIZAR AZ