1.

Curso Básico De Flash 8 (Conceptos

Básicos De Flash)
Macromedia Flash es un programa de animación en dos dimensiones y
edición multimedia, desarrollado por la empresa Macromedia. Este
programa permite tanto la utilización de gráficos vectoriales como de imágenes
de mapa de bits, sonido, video y un lenguaje de programación propio llamado
Actionscript. Con todos estos elementos se producen animaciones. Además
del programa de edición, Macromedia desarrolló un programa de visualización
llamado Flash Player.

Ésas son las dos grandes bazas del programa: Animación + Interactividad. Esto multiplica
las posibilidades del programa: desde crear una animación para la presentación de un
producto, a crear un CD interactivo o un juego on-line.

¿CÓMO SURGIÓ FLASH?

En 1996 salió la primera versión de Flash, conocida como Macromedia Flash 1.0. Este proyecto surgió
a partir del programa de animación en 2D Future Splash Animator, creado por el arquitecto Jonathan
Gay y adquirido por Macromedia. adquirida por Adobe en el 2005, él hace referencia a la inspiración
que le significó su afición a los juegos de ladrillos Lego en el desarrollo de este programa.
Su pasión por el diseño comenzaba por el planteo de un problema. Su resolución le servía como camino
de aprendizaje para futuros rediseños y otros desafíos más complicados.
Flash fue evolucionando en sus diferentes versiones tanto en características intrínsecas del programa
como en popularidadde uso. En las primeras versiones, la atención se centraba sobre la animación y las
herramientas de dibujo; y a partir de la versión 5, se mejoró la programación (Actionscript), que llega
a su máxima expresión en la versión actual con gran cantidad de mejoras gráficas y de novedades en el
manejo de elementos multimedia. Desde su aparición en 1996, Flash ha penetrado en el mercado de los
internautas hasta convertirse en un estándar, a partir de sus versiones 4 y 5.
En la actualidad, según información del sitio de Macromedia, un 97% de los usuarios que navegan con
computadora propia tienen el plug-in Flash Player versión 2.0, o superior, instalado en su PC.

¿QUÉ ES UN PLUG-IN?
Un plug-in es un programa que se añade a otro para habilitar ciertas opciones no previstas en el diseño original del
programa. En el caso de Flash Player, éste se incorpora al navegador y habilita la lectura de otros archivos que
normalmente no serían reconocidos por esta utilidad. Los plug-in del navegador pueden alterar
su nivel de seguridad, habilitando la interacción del sitio remoto con nuestra computadora para intercambiar contenidos.
El plug-in de Flash, Flash Player, permite la lectura de los archivos con extensión SWF, utilizados en las páginas web
para mostrar las animaciones realizadas con Flash.

APLICACIONES DE FLASH
Flash nos permite dibujar en dos dimensiones y animar nuestros dibujos incorporándoles sonido, video y
la posibilidad de que el usuario interaccione con los contenidos desarrollados en este programa.
Macromedia Flash es muy útil en muchas aplicaciones, como animaciones y otros elementos para la
Web (éstas son las más populares), presentaciones multimedia en CD, juegos para Internet o para
dispositivos móviles, y tiene un gran futuro, principalmente por su característica de crear gráficos de alta
calidad y de poco peso (entre otras).

CREACIÓN DE IMÁGENES Una de las aplicaciones que vamos a destacar, es la posibilidad de exportar
cualquier parte de una animación como imagen estática. Las extensiones que se pueden exportar desde
Flash son: JPEG, GIF, PNG, PICT (Macintosh) y BMP (Windows).

Un pixel es la unidad mínima que compone las imágenes de

mapa de bits, también llamadas bitmaps.
Cada pixel contiene la información acerca del color y su posición en la pantalla. Un mapa de bits es una
matriz (como un entramado) compuesto por la ubicación de los pixeles mediante coordenadas artesianas
(x, y) y su color. Al agrandar una imagen de este tipo, veremos una grilla compuesta por cuadrados de
color. Éstos son los pixeles. Cuantos más pixeles tengamos por unidad de espacio (por lo general,
pulgada), mayor será la calidad de la imagen y, consiguientemente, el tamaño del archivo.

EL DOCUMENTO DE FLASH
El documento creado por el programa Flash está compuesto por un documento maestro, donde dibujará y compondrá la
escena y la animación, y por la película propiamente dicha, exportada en algún formato que le
permita reproducirla mediante el reproductor de Flash (Flash Player) o un reproductor de video. La extensión del
documento maestro, reeditable, es FLA. La película para ver con Flash Player tiene la extensión SWF.
Los documentos que tienen incorporado el reproductor son ejecutables (extensión EXE).

Algunos formatos de imágenes de mapa de bits son: BMP (Windows), PSD (Photoshop), JPEG, GIF,
TIF, PNG. Un vector es un objeto definido de manera matemática, mediante una fórmula. Los vectores
se agrupan formando líneas y formas independientes. Este tipo de gráfico se caracteriza por ser muy
moldeable y escalable, ya que no se ajusta a un número determinado de unidades fijas, sino a fórmulas
matemáticas. Por ende, se puede agrandar una imagen sin que aumente el tamaño del archivo y sin
perder definición. Algunos formatos de imágenes de vectores son: SWF (película Flash), AI
(Illustrator), CDR (Corel Draw). Algunos formatos de imágenes con información de vectores y pixeles
son: PICT (Macintosh), WMF (Windows), EPS (Encapsulated Postcript), PDF (Adobe Acrobat
Reader), FLA (Flash), PSP (Paint Shop Pro).

"Vectorial"?
Quiere decir que los dibujos están formados por vectores: fórmulas matemáticas que
describen curvas, rectas, formas, etc. Estos gráficos vectoriales al ampliarse no pierden
definición (el vector es multiplicado y el resultado sigue siendo exacto).

Esto es totalmente diferente a los gráficos de mapa de bits, imágenes mediante puntos de
color, los famosos “píxeles”, que están organizados en una cuadrícula, de tal forma que
todo ese conjunto de puntos forman la imagen.

ANIMACIONES
Una animación se compone de varias imágenes que tienen pequeños cambios y están dispuestas en una
secuencia, en un lapso determinado de tiempo.

PRESENTACIONES MULTIMEDIA
Las presentaciones multimedia son aplicaciones con sonido y video, y pueden tener animación o no. Las
más populares son las tarjetas que circulan en la Web. Incluso, hay muchas que están especialmente
preparadas para enviar por correo electrónico. Además de Internet, Macromedia Flash nos permite hacer
CD multimedia y es muy útil, por ejemplo, para armar catálogos de productos, ya que Flash es
capaz de guardar el archivo incorporando un reproductor a fin de poder ver el contenido de la animación
sin necesidad de poseer el programa (aquí funciona en forma similar a los archivos que nos llegan por e-
mail). Más adelante veremos cómo hacer una tarjeta con animación y sonido.

SITIOS WEB
Si bien, en la actualidad, Flash es ampliamente utilizado para desarrollar sitios enteros o partes de ellos,
hay controversias desde el punto de vista de la usabilidad (grado de uso de un determinado
producto en forma efectiva). La mayoría de los usuarios de Internet que encargan el desarrollo de un
sitio web con Flash desconocen este término, por lo que se puede caer en un abuso de contenidos Flash.
Los sitios y las presentaciones desarrollados con Flash son visualmente muy atractivos, pero pueden ser
muy pesados o innecesarios (en el caso delas presentaciones) para los usuarios. Por eso, cuando
planeamos un sitio con desarrollos Flash, tenemos que teneren cuenta principalmente el público
al que va dirigido, ya que no todoslos usuarios tienen la última versión de Flash Player o conexión de
banda ancha. De todos modos, una de las ventajas que popularizó Flash, es que los archivos generados
para la Web son más livianos que otro tipo de animaciones(por ejemplo, GIF).

JUEGOS
Gracias a su lenguaje Actionscript, Flash nos proporciona una amplia gama de alternativas en el
momento de realizar un juego o una aplicación interactiva. Sólo es necesario un conocimiento
básico de programación. La versión 8 de Flash aporta varias mejoras al panel de escritura y edición
de Actionscript, así como la incorporación de algunas acciones automatizadas (comportamientos).

Descripción De Flash

Macromedia Flash Professional 8, le proporciona todas las herramientas necesarias para

crear y publicar diseños y animaciones en la web en forma profesional. Con Flash puedes
llegara crear desde aplicaciones básicas de animación hasta complejas aplicaciones con
contenido Web (paginas web). Macromedia Flash Professional 8 es un programa
esencialmente para hacer animaciones vectoriales, sin embargo, también se pueden crear
aplicaciones de Flash con una amplia variedad de contenido multimedia que incluye
imágenes, sonido, vídeo y efectos especiales. Si solo son incluidas animaciones
vectoriales, puedes utilizar las herramientas de Flash como son (línea, óvalo, rectángulo
polígono, etc.), si son utilizadas este tipo de herramientas vectoriales el peso (kbs) del
archivo será mas ligero a la hora de que este sea publicarlo en la web, sin embargo, si son
incluidas animaciones con imágenes las cuales tengan extensión jpg, gif, png, mapa de bits,
etc. el peso (kbs) de los archivos resultara ser mas pesado y por lo tanto tardara más tiempo
en ser visualizado en la web. Flash Professional 8 es una poderosa herramienta de con la
que podrás diseñar y desarrollar grandes presentaciones (Animaciones, Juegos,
InterfacesdeNavegación.), Los proyectos de Flash pueden abarcar desde simples
animaciones hasta contenido de vídeo.

Creación De Documentos

Para comenzar a trabajar con Macromedia Flash Professional 8, lo primero que debes de
tomar en cuenta es la creación del documento en cual vas a desarrollar la presentación, los
pasos a seguir son los siguientes, primero te mostrare una ruta larga en la cual se describen
los tipos de documentos que contiene Macromedia Flash Professional 8.
 Seccionar Archivo >> Nuevo

 Una vez que das enter (clic) en el paso dos, se te presentara una nueva ventana en la
cual te pedirá que selecciones el tipo de documento flash que quieras utilizar.
 Los tipos de documentos son: Documento de Flash, Presentación de Flash,
Aplicación de formularios Flash, Archivo Action Script, Archivo comunic. Action
Script, archivo JavaScript de Flash y Proyecto de Flash.
 Cada uno de estos documentos tiene una finalidad específica. Sin embargo, en esta
ocasión solamente nos enfocaremos al Documento de Flash.
 Haga clic en Aceptar y aparecerá la forma del documento predeterminada por
Macromedia Flash Professional 8.
 El documento predeterminado incluye el nombre del documento (Sin título-1).
 El tamaño del documento (550 x 400 píxeles).
 El color de Fono del documento (blanco “#FFFFFF”).
 Los colores se representa por el símbolo # y luego una secuencia de de seis letras y
números alternados Ej. para el color rojo la secuencia es #FF0000.
 Una forma más rápida para crear un documento Flash es simplemente presionar las
teclas de ctrl. + N.
 Propiedades Del Documento

En escasas ocasiones se trabaja con documentos con características de tamaño, color de

fondo, velocidad de fotogramas etc. predeterminadas por Macromedia Flash
Professional 8. Así que tendrás que aprender a editar las características del diseño
preestablecido por Macromedia Flash Professional 8. Para modificar las características
del documento se siguen los uno de los procedimientos siguientes.

 El primero de los procedimientos es Modificar >> Documento.

 Este procedimiento tal vez resulte el más largo, pero nunca esta demás conocer más
de una forma para obtener un fin.
 La segunda opción es simplemente hacer clic en el espacio de Tamaño de la barra
de Propiedades, si colocas el cursor sobre el espacio señalado en la imagen
aparecerá la leyenda (Propiedades del documento).
 La tercera opción es la más fácil porque solamente tienes que presionar ctrl. + J.
esta opción también puede resultar la más complicada de seguir ya que tienes que
recordar el comando.

 Una vez que utilices una de las opciones antes mencionadas aparecerá el cuadro de
dialogo Propiedades del documento, en el cual modificaras propiamente el
documento. Este cuadro de Propiedades de documento tiene varias opciones.
 Este cuadro de Propiedades de documento tiene varias opciones a modificar, la
primera de ellas es que puedes incluir un Titulo (nombre) para el archivo swf, con
este nombre será más fácil de localizar tu archivo por los buscadores web.
 También puedes incluir una breve descripción del archivo, esto hará que el archivo
contenga más datos y de esta forma serás más popular en la web.
 En las casillas de Dimensiones de (ancho y alto), podrás modificar el tamaño del
documento. Por el momento trabajaras con un documento de dimensiones 300 px X
300 px de ancho y alto.
 Para cambiar el Color de fondo del archivo, solamente hacer clic en el recuadro del
color y de esta forma cambiaras el color. En este caso usar como color de fondo
(azul o bien #0000FF).
 La velocidad de fotogramas es de suma importancia para animaciones las cuales
están programadas con código ActionScript en las cuales la transición tiene que
avanzar rápido o disminuir la velocidad. Este concepto se describirá con más detalle
en capítulos siguientes.
 Por ultimo podrás modificar la opción de Unidades de regla, en las cuales se
incluyen: Pulgadas, Pulgadas (decimales), Puntos, Centímetros, Milímetros y
Píxeles. Las Unidades de regla que se recomiendan usar son los Píxeles.

 Al aceptar las propiedades del documento antes descritas se te presentara de forma

inmediata la siguiente imagen en la cual se te describen las propiedades del
documento.
 Estas son Tamaño del documento (dimensiones), Fondo (color de fondo), Velocidad
de fotogramas (fps), nombre del documento, así también se te presenta la barra de
herramientas.
Hasta este punto cuantas con la información necesaria para crear y modificar las diferentes
características de un documento de Macromedia Flash Professional 8, en el siguiente
punto de este capitulo veras la descripción de las herramientas de trabajo más utilizadas en
Macromedia Flash Professional 8.

Barra de Menús.

Como en cualquier otro programa, en la parte superior de la pantalla se desarrolla la Barra

de Menús:

 ARCHIVO: Junto con el menú de Edición, es un menú común en cualquier

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

Panel y barras de herramientas

Una de las partes más importantes de Flash es el panel de Herramientas

(Ventana>Herramientas).
Dentro de este Panel las herramientas se organizan por grupos:
 1. El primer grupo nos ofrece las
diferentes herramientas con que
contamos para crear y modificar
cualquier dibujo en el área de trabajo.

En este caso se ve activada la

herramienta de Selección y
Movimiento (esquina superior
izquierda).

2. Éstas son las herramientas de ayuda

para la visualización del área de trabajo

3. Éste es el controlador de color de

Flash. Dividido en el color de Contorno
y de Relleno.
Muy similar al de otros programas
vectoriales como Freehand.

4. Al final del panel aparecerán las

opciones de la herramienta que
tengamos activada.
En este caso las opciones de la
herramienta de Selección y
Movimiento.

2. Herramientas De Trabajo
Las herramientas de Macromedia Flash Professional 8 proporcionan una gran variedad de
ayuda cuando se trabaja en animaciones con vectores líneas, textos, óvalos, rectángulos.
Flash también incorpora herramientas con las cuales puedes editar los vectores dibujados en
cuanto a Color de relleno o Color de degradado. Con el fin de hacer más práctico la
utilización de las herramientas de flash te menciono como invocar las diferentes
herramientas desde el teclado. A continuación te presento una descripción de las
herramientas más usadas en flash.
 1. El primer grupo nos ofrece las
diferentes herramientas con que
contamos para crear y modificar
cualquier dibujo en el área de trabajo.

2. Éstas son las herramientas de ayuda

para la visualización del área de trabajo

3. Éste es el controlador de color de

Flash. Dividido en el color de Contorno
y de Relleno.
Muy similar al de otros programas
vectoriales como Freehand.

4. Al final del panel aparecerán las

opciones de la herramienta que
tengamos activada.
En este caso las opciones de la
herramienta de Selección y
Movimiento.

 La primera herramienta que se describirá es l

 a Herramienta De Selección, ya que es la que aparece seleccionada por defaul. Esta
herramienta es de gran ayuda por que es la que mueve a los objetos dibujados o imágenes
a través del escenario, te ayuda a editar las formas que selecciones en cuanto a color
tamaño etc, también mueve los objetos de la biblioteca a la escena. Cuando tengas
seleccionada otra herramienta por ejemplo la Herramienta De Texto y quieras la
Herramienta De Selección para que no te desplaces hasta el panel de herramientas vasta
con que presiones la letra V en el teclado.
 La segunda herramienta que se describirá es la Herramienta De Línea. Como el nombre lo
menciona sirve para dibujar líneas rectas las cuales puedes modificar a líneas curvas con la
ayuda de la Herramienta De Selección. La forma rápida para invocar la Herramienta Línea
es la letra N en el teclado.
 Herramienta Texto con ella podrás introducir 3 clases de campos de texto, el más común
es el campo de Texto extático con este tipo de texto podrás realizar animaciones en la
línea de tiempo. Los otros dos tipos de campos de textos son el Texto dinámico e
Introducción de texto estos tipos de texto siempre van acompañados de código
ActionScript por la complejidad para trabajar con este tipo de texto, solamente se
 realizaran animaciones con campos de Texto estático. Forma rápida para invocar la
herramienta de texto es la letra T en el teclado.
 La Herramienta De Óvalo sirve para dibujar círculos perfecto (10×10 píxeles), u óvalos
(10×30 píxeles). Para invocar la Herramienta De Óvalo en forma rápida es la letra O en el
teclado.
 Herramienta De Rectángulo, con ella podrás dibujar cuadrados perfectos (10×10 píxeles)
o bien rectángulos (10×30 píxeles), con la ayuda de una Herramienta Para El Rectángulo
te ayudara a dar bordes redondeados, en su momento se explicara a detalle el manejo de
esta sub herramienta. Si dejas presionado la herramienta de rectángulo aparecerá una
herramienta diferente la cual es PolyStar y te ayudara a dibujar formas de Estrellas o
formas de Polígonos (pentágonos, hexágonos, etc.). forma rápida de invocar la
Herramienta De Rectángulo es presionar la letra R.
 Las Herramientas De Bote De Tinta letra S en el teclado y Cubo De Pintura letra K en el
teclado, sirven para modificar el color del borde y el color de relleno de la forma dibujada
respectivamente. No es muy recomendable usar estas herramientas desde este panel, en
lo particular modifico los colores de relleno y borde desde el panel de propiedades en su
momento lo explicare a detalle.
 Por ultimo te daré una descripción de la Herramienta De Transformación De Relleno. Esta
herramienta muy útil cuando se usan colores degradados ya que modifica la perspectiva
del degradado. La forma rápida para invocar esta herramienta es la letra F en el teclado.

Paneles más utilizados

Macromedia Flash Professional 8 dispone de una serie de paneles los cuales hacen que el
trabajo para realizar animaciones sea más fácil y rápido de aprender. Estos paneles están
agrupados en diferentes secciones, los diferentes paneles de los que dispone Macromedia
Flash Professional 8 los podrás visualizar si haces clic en la Herramienta De Ventana.
Los paneles más utilizados son: Propiedades, Biblioteca, Acciones, Mezclador de colores y
Transformación. En el siguiente punto te daré una descripción de cada uno de estos paneles
así como también una forma rápida para invocarlos.
  Panel De Propiedades

En el Panel De Propiedades Se muestran las diferentes opciones que puedes llegar a

editarle a una forma vectorial antes de dibujarla. Para invocar el panel de propiedades
presionar ctrl. + F3. En el Panel De Propiedades están incluidos el panel de Filtros y
Parámetros. Estos paneles son de mucha ayuda, sin embargo, estas herramientas no serán
expuestas en la explicación.

 Por ejemplo; cuando tienes seleccionada la Herramienta De Selección (V) en el Panel De

Propiedades se te muestra el tamaño del escenario (dimensiones de documento), color de
fondo y velocidad de fotogramas 12 fps, también se te muestra el tipo de versión que
estas usado (Reproductor: 8 en este caso y la versión de ActionScript: 2).
 Cuando seleccionas la Herramienta Línea (N) el panel te presenta el nombre de la
herramienta, el color de línea y el tamaño de la línea.

 Las propiedades que se presentan para la Herramienta Texto (T) son el tipo de texto
(estático, dinámico e introducción de texto), color, tamaño, tipo de alineación, etc.

 Las propiedades que presentan para la Herramientas Óvalo (O),

 Herraminta Rectángulo (R)

  y la Herramienta PolyStar

son similares ya que te muestran el color de línea (trazo), color de relleno, tamaño de trazo,
tipo de trazo. En particular cada una de estas herramientas tiene una finalidad específica, en
puntos subsecuentes se profundizara con más detalle cada una de estas herramientas, al
hacer un ejercicio para cada una de ellas.

 Panel Biblioteca

El Panel Biblioteca es donde se guardan y organizan los símbolos creados en Flash, El

Panel De Biblioteca muestra en nombre del Documento, en este caso como aun no se a
nombrado con un nombre especifico, flash le coloca el nombre de Sin título-1. también te
muestra los diferentes tipos de símbolos estos son Clip de película, Botón y Gráfico, flash
nombra a los diferentes símbolos como Símbolo 1, Símbolo 2, Símbolo 3…n, sin embargo
resulta más practico nombrar a cada uno de los símbolos con nombres especifico que
describa o que esta colocado en cada uno de ellos. En su momento en el punto
incorporación de símbolos se explicara con más detalle cual es la propiedad que tienen cada
uno de los símbolos. Se pueden colocar tantos símbolos de cada tipo como sean necesarios
para la realización de una animación. El Panel De Biblioteca también cuenta con la opción
de Bote De Basura (eliminar) es de suma importancia para eliminar símbolos que no nos
sean útiles solo basta con seleccionar el símbolo y luego presionar el Bote De Basura. La
forma más rápida para invocar el panel de biblioteca es presionando ctrl. + L ó F11.
  Panel De Acciones

En el Panel De Acciones se presentan las diferentes funciones de código ActionScript con

las cuales puedes controlar la línea de tiempo, se puede agregar cogido ActionScript a
símbolos tipo Botón, Clips de película y a Fotogramas. Hay dos formas para obtener las
funciones de código la primera es presionar el signo de y de esta forma aparecerán las
diferentes funciones. La segunda opción es presionar y luego hacer doble clic en los
diferentes libros mostrados, las funciones de código ActionScript son las mismas en
cualquiera de los dos casos. El título del panel Acciones cambia a Acciones – Botón,
Acciones – Clip de película o Acciones – Fotograma, según el elemento que esté
seleccionado. Para mostrar el Panel Acciones presionar F9.
  Panel De Mezclador De Colores

El Panel De Mezclador De Colores es de gran utilidad cuando se trabaja con formas

vectoriales (Óvalos o Rectángulos) los cuales tengan por color de relleno o color de trazo
(borde) un degradado Lineal o Radial. Este panel además del los Tipos de Relleno
(Ninguno, Sólido, Lineal, Radial y Mapa de bits) también incluye la opción del Color Alfa
con cual te puedes ayudar para hacer opacos los diferentes colores aplicados. Las
opacidades Color Alfa van desde 0 % hasta 100 %. El Panel De Mezclador De Colores
esta acompañado por el Panel De Muestras De Colores. Para la invocación del El Panel
De Mezclador De Colores basta con presionar en el teclado shift + F9.
  Panel Transformar

Cuando se tiene que editar una forma vectorial o una Imagen Importada ya sea que la
tengas que hacer más grande o la tengas que girar (rotar) una cierta cantidad de grados, este
panel es el conveniente para tal efecto. Ya que el Panel De Transformar te proporciona
las opciones de agrandar una forma cualesquiera que esta sea con la opción de agrandar
solamente a lo Ancho o a lo Alto y si seleccionas la Casilla De Restringir la forma a editar
mantendrá las proporciones tanto a lo ancho y alo alto. Con este panel también puedes
Rotar una forma o Sesgarla horizontal o verticalmente según sean las necesidades. Para la
invocación del Panel Transformar presionar la secuencia de teclas ctrl. + T.
En este punto has obtenido los conocimientos suficientes para saber que función tienen los
diferentes paneles diseño web en Macromedia Flash 8. Si cuentas con alguna duda en los
puntos aquí expuestos no dudes en dejar tu comentario y con gustos serán atendidos a la
menor brevedad.

3. Espacio De Trabajo
Cuando se trabaja con Macromedia Flash Professional 8 establecer el área de trabajo es
de mucha importancia ya que te permitirá tener un panorama más amplio de tu área de
trabajo, y de esta forma no amontonaras paneles innecesarios en el espacio de trabajo. Si se
colocan los diferentes paneles en posiciones estratégicas tendrás una mejor perspectiva de
todo el escenario.

 Una primera recomendación para establecer el espacio de trabajo es colocar la

Barra de Herramientas en la parte izquierda de la pantalla, el Panel de Acciones
en la parte inferior y el Panel de Propiedades por encima del Panel de Acciones.
 Los Paneles de Mezclador de Colores, Transformar y el Panel de Biblioteca los
puedes colocar en la parte derecha de la pantalla, tal y como se muestra en la
imagen. Recuerda que estos son los paneles más utilizados para la realización de
animaciones en Macromedia Flash.

 Una segunda opción para agrupar los paneles más usados es colocarlos en una sola
barra, esta acción se realiza: Primero hacer visibles cada uno de los paneles (ctrl. +
L = Panel Biblioteca, ctrl. + T = Panel de Transformar, shift + F9 = Panel
Mezclador de Colores), luego arrastrando uno a uno arrastrándolos por la parte
marcada (como se muestra en # 1 en la imagen), cuando el panel es insertado en
 otro panel se coloca una franja de color negro como lo marca el paso # 3 de la
imagen. La parte marcada con el # 2 de la imagen indica que esta oculto el menú de
cada uno de los paneles. Y con la pare marcada con el # 4 podrás desplazar los
paneles a cualquier parte del documento Flash.

Establecer el espacio de trabajo

Las herramientas de selección, borrador y cambio de color también son de mucha

importancia cuando se esta trabajando con presentaciones Flash, ya que como el nombre de
cada herramienta lo indica, la Herramienta de Selección sirve para; seleccionar símbolos,
colores, fotogramas en la línea de tiempo, propiedades del documento, etc. y la
Herramienta de Borrador perite borrar partes del relleno de alguna forma dibujada, quitar
bordes.

En esta sección incluiré como dar color de relleno y color al borde sin la necesidad de que
tengas que trabajar con el panel de mezclador de colores shift + F9. Las herramientas con
las que se trabajaran en este punto son las Herramientas de Selección, Bote de Tinta, Cubo
de Pintura, Borrador, Borrador Grifo, las herramientas 3 y 4 están incorporadas a las
herramientas 5 y 6 respectivamente.

4. Herramienta De Borrador
Herramienta de Borrador (E) Tipo de borrador & Opciones de
borrador.

La Herramienta de Borrador posee dos opciones de borrar, la primera opción es

seleccionar el (tamaño y forma de borrador), y la segunda opción es seleccionar que es lo
que se quiere eliminar de una forma vectorial dibujada. Una forma rápida para invocar la
herramienta de borrador es presionar en el teclado la letra E.
 Cuando se selecciona la herramienta borrador te da la opción de que escojas el
tamaño y forma del borrador, según sean las necesidades de borrado. Puedes elegir
entere 5 diferentes tamaños de óvalos, la segunda opción que tienes para elegir el
tamaño y forma, son entre 5 diferentes tamaños de cuadrado.
 Las opciones más comunes para eliminar (borrar) formas vectoriales son: borrado
normar, borrar rellenos, borrar líneas. Cada una de estas opciones son específicas
para cada necesidad que se tenga.
 En la siguiente imagen se muestran los tres diferentes tipos de borrado. Los cuadros
marcados con el # 1 están borrados con la opción de barrar normal, este tipo de
opción permite borrar tanto color de relleno como el color de borde sin hacer
distinciones entre estos.
 Los cuadros marcados con el # 2 están borrados con la opción de borrar rellenos,
este tipo de borrador no elimina nada de contorno (borde) por más que pases el
borrador por encima del contorno.
 Las formas vectoriales marcadas con el # 3 están borradas con el borrador de líneas,
con esta opción no borraras nada de relleno, y solo podrás borrar los contornos
(bordes) de las formas vectoriales dibujadas. La opción de borrar rellenos es lo
contrario a borrar líneas.
 Herramienta de borrador Grifo.

Además de las opciones de tamaño, forma y tipos de borrado de las cuales te puedes ayudar
para eliminar formas dibujadas. Flash incluye una herramienta (Grifo) con la cual se
eliminan de un solo clic los bordes o rellenos seleccionados, para hacer visible la
herramienta de (Grifo), primero seleccionar la herramienta de borrador y luego el Icono De
Grifo tal y como se muestra en la imagen.
 Para eliminar bordes o rellenos solamente tendrás que situarte en la posición a
borrar y luego simplemente hacer clic. Esta herramienta es de lo más fácil de
manejar como lo podrás constatar.
 En las imágenes marcadas como 1,1 el icono de borrador se situó sobre el borde del
cuadrado y luego se elimino.
 En la imagen marcada con 1,2 lo que se elimino de la forma vectorial fue el relleno.
 La imagen marcada con 1,3 se elimino en la parte superior el color de relleno y en la
parte inferior se elimino el color de borde.
En este punto has obtenido los conocimientos para poder editar una forma vectorial en
cuanto al borrado de trazo y relleno. En capítulos posteriores te mostrare como cambiar el
color de trazo y de relleno de diferentes formas geométricas.
 Herramienta de Selección (V)

La primera herramienta a definir es la herramienta de selección la cual aparece

seleccionada de forma automática cada vez que se inicia (abre) el programa de Flash, para
invocarla de forma rápida es presionando la tecla (V) en el teclado.

 Esta herramienta te ayudara a editar (dibujos) formas vectoriales como son:

rectángulos, óvalos, líneas, o sea podrás seleccionar parte o formas completas de
algún dibujo para luego modificarlas.
  La imagen muestra 3 diferentes cuadros, el cuadro 1 muestra que no posee ninguna
selección.
 El cuadrado 2 esta seleccionada parcialmente.
 El cuadrado 3 esta seleccionado completamente.
 El cuadrado 4 esta modificado por uno de sus extremos mientras que el cuadrado 6
esta modificado tanto en la parte superior como inferior. Esto se logra tomando por
uno de los extremos la parte que se quiera modificar.
 En el cuadrado 5 se presenta una forma de dos colores tanto en el borde como en el
relleno, aquí solamente se selecciono parte del dibujo y luego se modifico tanto el
color de borde como el de relleno.

Curso Básico De Flash 8 (Herramientas

Edición de Color) Parte 5
La herramienta de Botote de tinta tiene por finalidad cambiar de color de trazo (color de
borde). La herramienta de bote de tinta se puede seleccionar difracta mente en la barra de
herramientas o presionando la letra S en el teclado.

Una vez realzada la invocación de la herramienta, aparecerá en el panel de Propiedades

una serie de completos tales como; Color, Altura y Estilo de trazo. Por el momento
solamente te enfocaras en el Color de trazo.
 Cuado se selecciona la herramienta de Color de trazo aprese sobre el documento un
jarro de pintura.
 Para cambiar de Color de trazo basta con presionar el recuadro que corresponde a el
Color de trazo, tal y como se marca en la figura.

 Puedes seleccionar el Color de trazo de dos formas, la primera es desde la barra de

Herramientas opción Colores y luego hacer clic en el recuadro que corresponde a
color de trazo en la imagen esta marcado con el # 1.
 La segunda opción para cambiar el Color de trazo es desde del panel de
Propiedades. Es más recomendable trabajar desde esta opción ya que también
puedes manipular las opciones de altura y estilo de trazo.
 Cuando se tiene seleccionado el color que será aplicado al borde tendrás que colocar
el jarro de pintura sobre la figura dibujada como se muestra en el cuadro marcado
con la letra (a)
 En el caso de de la figura marcada con la letra (b), colocar el jarro de pintura pero
sobre el borde esto es porque la figura esa dividida en dos partes y cada una de ellas
reconoce a un diferente color.
 Altura y tipo del trazo.

Como ya se tiene definido como cambiar el color al trazo (borde), solamente falta por
aclarar como es que se cambian la altura y estilo de trazo. La altura del trazo (grosor de
borde) se define por números a un mayor número más grueso aparecerá el borde y a un
menor número se tendrá un borde mas delgado. Recuerda que para activar estas
propiedades tienes que invocar la herramienta de Bote de tinta S.

 La altura de trazo aparece de forma automática marcada con el número 1, para

cambiar la altura hay dos formas, la primera es hacer clic sobre la posición marcada
con el # 1 y luego deslizar la barra hasta un número apropiado, la segunda forma es
talvez la más recomendable, esto es hacerlo de forma manual, colocar el cursor
sobre la casilla de la altura de trazo y escribir el número apropiado. Flash acepta
como altura mínima 0.1 y como altura máxima 200.
 En cuanto a los estilos de trazo flash esta un poco limitado ya que solamente cuenta
con 6 diferentes estilos, sin embargo con estos basta para lograr diseños vectoriales
buenos. Los estilos de trazo se hacen visibles cuando se hace clic sobre la marca que
indica el # 2 en la imagen.
 Y para aplicar los cambios a las formas vectoriales, seleccionar el color de trazo
#000000, la altura de trazo y el estilo de trazo.
 Herramienta Cubo De Pintura (K) Color De Relleno.

El uso de la herramienta de Cubo de pintura (color de relleno), es mucho más simple de

usar que la herramienta de (Bote de pintura), para la invocación de la herramienta Cubo de
pintura basta con presionar la letra k en el teclado.

 Cuando es seleccionada esta herramienta aprese sobre el documento una tina de

pintura.
 En el Panel de Propiedades se encuentra el nombre de la herramienta y un cubo de
pintura el cual contiene la gama de colores que se pueden usar como relleno.
 Para color el color de relleno solamente basta con seleccionar el color ya sea desde
la posición marcada con el número 1 o desde la posición marcada con el número 2
las dos indican color de relleno.
 Cuando se tiene seleccionado el color de relleno colocar la tina de pintura sobre la
forma vectorial y hacer clic sobre ella, este procedimiento se realizo en las figuras
marcadas con la letra (a), en la figura marcada con la letra (b) primero se cambio de
color a una de las parte y luego a la otra.
Curso Básico De Flash 8 (Herramientas
Comunes) Parte 6
Antes de comenzar con conceptos de animación, fotogramas, símbolos, etc. es necesario
primero aprender a dibujar simples formas vectoriales (líneas, óvalos, rectángulos, etc.),
porque de ello depende en gran parte la animación. En este punto aprenderás a usar las
herramientas de línea, óvalo, rectángulo, polígono y texto.

Herramienta de Línea

La primera de las herramientas que será descrita es la Herramienta De Línea, con ella te
podrás ayudar para hacer línea rectas o curvas según sean las necesidades del proyecto
(diseño web, animación, botón etc.). Para comenzar a trabajar con la herramienta de Línea
basta con seleccionarla en el panel de herramientas, o bien invocándola presionando la
latera N en el teclado.

 Cuando esta selecciona la Herramienta De Línea, aparece en la barra de propiedades

el nombre de la herramienta así como el icono que la representa, también apresen
las opciones de color altura y tipo de trazo, las cuales ya fueron tomadas en cuenta
en el capitulo anterior.
 Una vez que es seleccionada la Herramienta De Línea aparece sobre el área de
trabajo (documento) una cruz como tal y como se muestra en la figura marcada con
la letra (a).
 La figura marcada con la letra (b) te indica que la línea esta siendo trazada con
cierto grado de inclinación (línea diagonal).
 La figura marcada con la letra (c) indica que la línea esta siendo trazada ya sea en
forma horizontal o vertical, en este caso la línea siempre aparecerá de forma recta.

 Con la herramienta de Línea se pueden hacer trazos diagonales tal y como se

muestra en la figura marcada con la letra (a).
 Si se mantiene presionada la tecla de shift en el teclado, las líneas que harás son
rectas. Estas pueden ser horizontales o verticales, la figura de la letra (b) muestra
este tipo de línea (horizontal).
 Un buen truco para hacer líneas con un grado inclinación de 45º es mantener
presionada la tecla shift en el teclado y luego mover el cursor hacia arriba o abajo
cuando se este dibujando la línea. La figura marcada con la letra (c) representa una
línea a 45º.
 Para hacer que una línea incremente de tamaño hay dos métodos, este es el primero
y el más fácil de aplicar. Colocar el cursor sobre uno de los extremos de la línea, en
la parte inferior del cursor aparecerá la mitad de un cuadrado (esto indica que es una
línea recta). Después solamente arrastrar el cursor en la dirección deseada y de esta
forma crecerá la línea. Las figuras marcadas con las letras (a y a´) son un ejemplo
de lo antes descrito.
 Cuando se quiere obtener una línea curva a partir de una línea recta, basta con
colocar el cursor sobre un punto de en medio (nunca en los extremos), aparecerá
en la parte inferir del cursor una pequeña línea curva. Después solamente arrastrar el
cursor hacia abajo o arriba. La figura de la letra (b) indica una línea recta y la figura
(b´) indica que se transformo a una línea curva.
 El segundo método para hacer que incremente de tamaño una línea es, primero
seleccionar la línea y en el Panel de Propiedades aparecerán las casillas que
representan lo ancho y alto (An.: y Al.:) así como también las casillas que
representan las coordenadas X: y Y: en las que se encuentra situada la línea (forma).
 Cambiar las dimensiones en la casilla a lo ancho (An.:), en este caso se incremento
el tamaño de la línea a 150.0 píxeles. Las coordenadas no fueron modificadas.
 Herramienta de Óvalo (O).

La segunda herramienta a describir es igual de importante que la herramienta de (Línea).

Cuando se hacen diseños Web o animaciones con formas vectoriales, a menudo se recurre a
esta herramienta (Óvalo). Una de las ventajas de trabajar con la herramienta de Óvalo es
que se pueden dibujar tanto formas (ovaladas) como formas totalmente (circulares). Para
trabajar con la herramienta de Óvalo basta con presionar en la barra de herramientas la
forma (icono) que representa al Circulo o presionar en el teclado la letra O.

 Una vez que es seleccionada la herramienta de Óvalo aparecerá en el Panel de

Propiedades en nombre de la herramienta que esta siendo seleccionada, así como
también los diferentes parámetros de que esta como puesto el óvalo: color de trazo
(borde), color de relleno, altura de trazo y estilo de trazo.
 Cuando se hayan seleccionado las propiedades del Óvalo en cuanto a color de
borde, color de relleno y altura de trazo, trasladar el cursor a la Escena cuando este
sobre el escenario un signo de (+) estarás listo para comenzar a trazar el Óvalo o
Círculo según sean las necesidades.
 Los óvalos y círculos se pueden deformar en otras formas. Este punto se vera con
mayor profundidad en otro capítulo (edición de formas vectoriales para la
animación).
 Cuando se dibuja con la herramienta de Óvalo se pueden visualizar dos diferentes
formas de círculos pequeños en la parte inferior derecha.
 En la primera forma marcada con el número 1 aparece un circulo pequeño en la
parte inferior derecha, esto indica que se esta dibujando un Óvalo.
 En la forma marcada con el número 2 aparece un círculo de mayor tamaño, lo cual
te indica que se esta dibujando un círculo perfecto.
 Cuando se trabajes con la herramienta de Óvalo es muy recomendable primero
seleccionar: el color de trazo (borde), color de relleno y altura de trazo. Si
seleccionas primero estos parámetros te ahorraras mucho tiempo en la realización
de tus trabajos.
 En la figura número 1 esta representado un óvalo el cual cuenta con un color de
relleno #00FF00, color de trazo #FF0000 y altura de trazo 3.
 Practica como ejercicio la figura marcada con el número 3 para que se visualice un
círculo perfecto con color de trazo (borde) #000000, color de relleno #FFFF00 y
altura de trazo 1.
 Herramientas Rectángulo & PolyStar
Herramienta de Rectángulo (R).

La herramienta de Rectángulo al igual que las herramientas de Línea y Óvalo, es de mucha

utilidad en los trabajos de Flash, ya que gracias a ella puedes hacer figuras vectoriales de
rectángulos o cuadros. Para comenzar a trabajar con esta herramienta solamente presionar
en la barra de herramientas el icono que representa al Rectángulo, o en el teclado presionar
la letra R.

 Cuando es invocada la herramienta de Rectángulo aparece sobre el Panel de

Propiedades el nombre de la herramienta así como también el icono que la
representa.
 Los parámetros de edición son los mismos que en el caso de la herramienta de
Óvalo: color de trazo, color de relleno y altura de trazo.
 Las formas vectoriales dibujadas con la herramienta de rectángulo pueden
deformarse en otras (metamorfosis), este punto será tocado en otro capitulo (edición
de formas vectoriales para la animación).
 Como se menciono anteriormente, se pueden dibujar tanto formas vectoriales de
rectángulos como de cuadrados.
 Cuando es el caso que se dibujan rectángulos aparece un círculo pequeño en el
extremo inferir derecho, tal y como se muestra en la figura marcada con el # 1.
 Por el contrario cuando se dibuja un cuadrado, aparece sobre el extremo inferior
derecho un círculo te tamaño más grande, la figura # 2 representa a un cuadrado.
 En la figura marcada con el # 1 se dibujo un rectángulo de propiedades: color de
trazo #FF0000, color de relleno #00FF00 y de altura de trazo 3. Nota: Antes de
comenzar a trazar las diferentes formas vectoriales, nuevamente se te recomienda
que primero selecciones los distintos parámetros.
 La figura marcada con el # 3 representa un cuadrado al cual se le modificaron las
propiedades: color de trazo #000000, color de relleno #FFFF00 y altura de trazo
1. Practica esto como un ejercicio y veras que es muy sencillo de realizar.
 Herramienta de PolyStar (Polígono).

La herramienta que a continuación se describe esta contenida dentro de la herramienta de

Rectángulo, una vez que selecciones la herramienta de PolyStar puedes hacer dos variantes
una para dibujar Polígonos y la segunda para dibujar Estrellas.

 Primero tienes que tienes que mantener presionado el icono de la herramienta del
Rectángulo, hasta que aparezca el menú emergente el cual indica que está presente
la herramienta PolyStar.
 Seleccionar la segunda herramienta (PolyStar) y de esta forma cambiara en el panel
de herramientas el icono de rectángulo por un icono de hexágono.
 Nota: no puede ser posible la invocación de la herramienta PolyStar desde el
teclado, así que tienes que seguir el método descrito.
 Como ya fue mencionado puedes dibujar tanto Polígonos como Estrellas. Una vez
que fue seleccionada la herramienta de PolyStar en el Panel de Propiedades
seleccionar la casilla de Opciones…
 De esta forma aparecerá un segundo panel (Configuración de herramientas).
 Hacer clic sobre el espacio que despliega el Estilo. Aquí es en donde están
contenidos los Estilos de Polígono y de Estrella

 Hacer un primer ejercicio con la herramienta Polígono. Seleccionar la herramienta

de PolyStar, hacer clic en la casilla de Opciones…
 Seleccionar el Estilo de Polígono y en el Número de lados escribir 5.
 Es esta forma la herramienta esta configurada para dibujar un Polígono de 5 lados
(pentágono). El pentágono posee color de trazo #000000, color de relleno
#00FF00 y altura de trazo 1
 Nota: Para con figurar los parámetros de color de relleno, color de trazo y altura de
trazo, se manejan igual que en el caso del Óvalo y Rectángulo.
 Practica la figura mancada con ** la cual es una forma vectorial de 6 lados color de
relleno #FFFF00, color de trazo #FF0000 y altura de trazo 3.

 En el segundo ejercicio, proceder a trabajar con la herramienta de Estrella, en el

panel de Propiedades hacer clic sobre la casilla de Opciones…
 Luego en el panel de Configuración de herramienta seleccionar en Estilo Estrella
y Número de lados 5.
 En la figura marcada con el #1 esta representada la Estrella de 5 lados Color de
trazo #000000, Color de relleno #00FF00 y Altura de trazo 1.
 Practicar la figura #2 que representa una estrella de 10 lasos, Color de relleno
#00FFFF, Color de trazo #FF00FF y Altura de trazo 3.
Conceptos Básicos Línea De Tiempo &
Fotogramas
En el Programa Macromedia Flash 8 el manejo de la Línea de tiempo es esencial que la
conozcas, ya que de ello depende en gran parte que una animación tenga un buen fin, en
esta Línea de tiempo están dispuestos las diferentes formas vectoriales, animaciones,
imágenes (jpeg, gif, png), etc. La Línea de tiempo esta constituida por: capas, fotogramas,
fotogramas vacíos, fotogramas clave, fotogramas clave vacíos, velocidad de fotogramas, y
tiempo transcurrido (tiempo que dura la animación). Recordar que Macromedia Flash 8 es
como una obra de teatro en donde todo se tiene que representar en La Escena, y haciendo
esta comparación las animaciones que se dispongan en los símbolos de clips de película,
botones y gráficos en algún momento se tienen que arrastrar hacia la Escena para que
puedan ser visualizados en el archivo SWF.

a Línea de tiempo, b numero de capas insertadas, c insertar capas, d ocultar todas las
capas o mostrar todas las capas, e bloquear todas las capas o desbloquear todas las
capas, f fotogramas claves vacíos, g fotogramas vacíos, h fotogramas, i fotogramas clave, j
cabeza lectora de fotogramas, k muestra el número de fotograma en donde se encuentra la
cabeza lectora, l velocidad de fotogramas por segundo (fps), m muestra el tiempo que ha
transcurrido según en donde se encuentre la cabeza lectora, en este ejemplo a transcurrido
1.3 segundos hasta el fotograma 20, a una velocidad de 15 fps. n representa que ahí se
puede insertar cualquier tipo de fotograma.
Diferencias Entere Fotograma y Fotograma Clave.

Cuando se hace una animación de cualquier tipo, siempre se empieza a partir de un

fotograma clave vacío el cual se convierte en un fotograma clave cuando en el se inserta
alguna forma vectorial o imagen.

 Los fotogramas son de interés en la Línea de tiempo por que con ello se prolonga
la animación, esto es a mayor número de fotogramas la animación será más lenta, y
por el contrario a menor número de fotogramas en la línea de tiempo la animación
será más rápida.
 En la siguiente imagen están representados 14 fotogramas, ya que el primer
fotograma es un fotograma clave.

 Solamente los fotogramas clave pueden ser modificados y una vez editados las
diferentes formas vectoriales, imágenes, etc. de cada uno de los fotogramas clave,
estos quedaran listos para poder establecida una animación.
 Los fotogramas clave están insertados en la Línea de tiempo en la posición número
1 y número 15.
 La forma b (óvalo) esta dibujada sobre el fotograma clave # 1.
 La forma c esta dibujada sobre el fotograma clave #15.
Insertar Fotogramas, Fotogramas Vacíos, Fotogramas Clave, Fotogramas Clave
Vacíos y Borrar Fotogramas de Cualquier Tipo.

En esta sección se te mostrara como insertar los diferentes tipos de fotogramas con el fin de
que logres colocar estos fotogramas en los frames adecuados y así las animaciones queden
estupendas en cuanto a dinamismo. Hay dos formas de insertar los diferentes tipos de
fotogramas, una es asiendo uso del teclado y la segunda mediante los menús emergentes
después de hacer clic con el ratón.

 Primero se trabajara con la inserción de fotogramas mediante el método de los

menús emergentes, para insertar fotogramas, fotogramas vacíos, fotogramas
clave y fotogramas clave vacíos, Solamente basta con seleccionar el fotograma en
donde se quiere insertar cualquier tipo de fotograma. Luego hacer clic con el botón
derecho del ratón, y en el menú emergente seleccionar el tipo de fotograma a
colocar en la Línea de tiempo.
 Si por alguna razón insertaste fotogramas de más, no preocuparte la solución a este
tipo de problemas es usar la opción de quitar fotogramas. Seleccionar en la Línea
de tiempo los fotogramas a eliminar, hacer clic con el botón derecho del ratón y
seleccionar en el menú emergente la opción de Quitar fotogramas. Esta opción
elimina cualquier tipo de fotogramas.
Sin embargo, es recomendable que te aprendas las diferentes abreviaciones en el teclado
para cada una de los fotogramas. F6 insertar fotograma clave, F7 insertar fotograma clave
vacío, F5 insertar fotograma y fotograma vacío, para borrar cualquier tipo de fotograma
presionar shift + F5.

Interpolación De Movimiento
Interpolación de Movimiento con Formas Vectoriales.

Ahora es el tiempo de comenzar a practicar una pequeña animación mediante el método de

Interpolación de movimiento, y de esta forma comenzaras a poner en practica los
conocimientos adquiridos hasta este punto. En el método para hacer interpolaciones de
movimiento, solo basta con dibujar cualquier tipo de forma vectorial.

 Hay tres tipos de animaciones que se pueden crear con este método de
Interpolación de movimiento: la primera es cambiar el color gradualmente de una
forma vectorial, la segunda es mover una forma vectorial a través del Escenario y la
tercera es una combinación de las dos anteriores en donde se cambia de color
gradualmente y al mismo tiempo la forma vectorial se va moviendo a través del
Escenario.
 A continuación te mostrare como hacer una animación en la cual cambie de color
gradualmente una forma vectorial.
 Crear un documento de Propiedades ctrl. + J dimensionases de la película 300 *
300 píxeles de ancho y alto, usar como Color de fondo #FF9900 y velocidad de
fotogramas 15 fps.

 El total de la animación se trabajara en la Escena. En el primer fotograma dibujar

un Óvalo O, sin borde y color de relleno #000000, las dimensiones del óvalo son
200.0 * 200.0 píxeles de ancho y alto, colocar la forma vectorial en coordenadas
X: 50.0 y Y: 50.0.
 Luego insertar un fotograma clave F6 en otro frame, por ejemplo, en el frame
número 30.

 Hacer clic con el botón derecho del ratón sobre la línea de tiempo en un punto entre
el fotograma número 1 y el fotograma número 29, En el menú emergente
seleccionar la opción de Crear interpolación de movimiento.
  Seleccionar la forma dibujada del fotograma número 30 y en el Panel de
Propiedades en la opción Color seleccionar Tinta y seleccionar otro color
#00FFFF. Presionar ctrl. + Enter para ver la animación creada.

Espero que este ejemplo de cómo hacer que una forma vectorial cambie de color quede lo
suficientemente bien explicada, en caso de que no ayas entendido alguno de estos pasos
simple mente ponte en contacto y daremos la mejor solución a tu inquietud.
Movimiento De Formas Vectoriales
Animación De Movimiento De Formas Vectoriales

Para el caso en la que se quiere que la forma vectorial se traslade de un lugar a otro por el
Escenario, te tengo el siguiente ejemplo.

 Crear un documento de Propiedades ctrl. + J dimensionases de la película 500 *

150 píxeles de ancho y alto, usar como Color de fondo #0099CC y velocidad de
fotogramas 15 fps.
 Fotograma = Frame

 Primero dibujar el Óvalo O en el Fotograma número 1, de Propiedades Color de

borde #000000 y Color de relleno #FFFFFF, las dimensiones son 100.0 * 100.0
píxeles de ancho y alto. Colocar la forma vectorial dibujada en Coordenadas X: –
100.0 y Y: 25.0.
 Después insertar un Fotograma clave F6 en el frame número 30.

 Seleccionar la forma vectorial del Fotograma número 30 y moverla a

Coordenadas X: 00.0 y Y: 00.0.
 Después simplemente seleccionar en la línea de tiempo un Fotograma entre el
número 1 y el Fotograma número 29 y hacer clic con el botón derecho del ratón, en
el menú emergente seleccionar la opción de Crear interpolación de movimiento.
Presionar ctrl. + Enter y ver es como se mueve el Óvalo.

 Hacer una tercera variante de interpolación de movimiento en donde forma vectorial

cambia gradualmente de color y al mismo tiempo se mueve. Aquí partiremos de la
animación anterior. Seleccionar la forma vectorial del fotograma 30, en el panel de
 Propiedades seleccionar la opción de Color Tinta y cambiar el color #FFFF00.
presionar ctrl. + Enter y ver el cambio que a sufrido la animación.

Edicón de Formas Vectoriales

Edición de Formas Vectoriales para la Animación.

Con frecuencia es necesario modificar las formas vectoriales y así obtener animaciones
diferentes que salgan de los clásicos óvalos y rectángulo, y de esta forma imprimirle a cada
una de las animaciones un toque muy personal.

 A continuación te mostrare como hacer una estrella como las que usan los Nijas a
partir de dibujar una Estrella de 5 picos. Trabajar en un documento de Propiedades
ctrl. + J, dimensiones de la película 200 * 200 píxeles de ancho y alto, Color de
fondo #FFFFFF y velocidad de fotogramas 12 fps.
 Primero dibujar la Estrella de 5 picos con la herramienta PolyStar este ejercicio ya
fue practicado. Las propiedades de la estrella son: Color de borde #000000, Color
de relleno #006633, dimensiones 185.0 * 175.0 píxeles colocar la estrella en
coordenadas X: 7.5 y Y: 12.5.
 Luego tomar uno a uno cada extremo de los lados de la estrella (cuando se toma
alguno de los extremos el cursor aparecerá con una pequeña línea inclinada, cuando
se toma algún extremo de que forme un ángulo en el cursor aparecerá una línea que
forma una ángulo de 90 grados), inclinar estos lados un poco hasta obtener la forma
más apropiada.
 Cuando tengas bien definidas las curvas de la estrella, puedes hacer una animación
de cambio de color. Insertar un fotograma clave F6 en el fotograma número 20.

 Seleccionar un fotograma entre el número 1 el fotograma número 19, hacer clic

con el botón derecho del ratón y en el menú emergente optar por la opción de Crear
interpolación de movimiento.

 En el Panel de Propiedades queda establecida automáticamente la animación de

movimiento, ahora hacer que la estrella cambie de color. Seleccionar la estrella del
fotograma número 1 y en la opción de Color: Tinta cambiar el color a #FFFF00.
Presionar ctrl. + Enter y de esta forma queda establecida una nueva animación.
 Dibujar una cabeza caricaturesca. Este ejercicio te servirá de mucho ya que
involucra varios elementos tales como invocar las herramientas por medio del
teclado, rellenar con colores sólidos, dibujar círculos y líneas etc. Trabajar este
ejercicio en un documento de Propiedades ctrl. + J. dimensiones 300 * 300 píxeles,
Color de fondo #FFFFFF y velocidad de fotogramas 12 fps.
 Edicón De Movimiento
Edición De Los Parámetros De Movimiento

Las formas vectoriales que involucran movimiento pueden animarse de

diferente forma después de haberse creado la Interpolación de movimiento: la primera
animación que se puede hacer, es que la forma vectorial gire en sentido de las agujas del
reloj (Horario) y la segunda opción es que la forma vectorial gire en sentido opuesto a las
agujas del reloj (Antihorario).

 En el siguiente ejemplo se trabajara sobre una Interpolación de movimiento de un

óvalo y hacer que esta forma vectorial gire en sentido de las agujas del reloj.
 Crear un documento de propiedades ctrl. J, dimensiones 250 * 250 píxeles, color de
fondo #FFFFFF y velocidad de fotogramas 12 fps.
 Lo primero que tienes que hacer, es dibujar alguna forma por ejemplo un Óvalo (O).
y crear una Interpolación de movimiento desde el fotograma número 1 hasta el
fotograma número 20, así quedara insertada una animación de movimiento.
 En al capitulo anterior esta destallada la técnica para insertar una Interpolación de
movimiento.
 Luego de que se haya creado la animación seleccionar algún fotograma entre el 1 y
el 19.
 En el panel de Propiedades seleccionar la opción de Girar:Horario. También
puedes manipular el número de giros en la casilla de veces (Número de rotaciones)
que de la forma vectorial a lo largo de la animación, el número de vueltas va desde
1 giro hasta 65535 giros.

 Practicar la animación de Interpolación de movimiento, en la que se involucra que

la rotación sea en sentido Antihorario, con un Número de rotaciones de 3 y una
línea de tiempo de 35 fotogramas.
Múltiples Animaciones
Incorporar Múltiples Animadas A Una Película Flash

Cuando se realiza una animación en la cual se involucre por lo menos dos animaciones, es
recomendable que estas animaciones se trabajen en capas separadas, con el fin de que si es
necesario editar elementos esta sea más fácil de hacer.

 A continuación aprenderás hacer una animación de una carita feliz, con movimiento
de los dos ojos por separado, esto es, que cada ojo este en una capa con una
Interpolación de movimiento en cada una de ellas. aquí pondrás en práctica todos
los conocimientos adquiridos tales como: dibujar formas vectoriales, usar
coordenadas, insertar fotogramas, modificar formas vectoriales, hacer animaciones
de interpolación de movimiento. Crear el documento en que estará la animación.
 Este documento tiene de Propiedades ctrl. + J, dimanaciones 200 * 200 píxeles,
color de fondo #FFFFFF y velocidad de fotogramas 12 fps.
 La animación estará realizada en su totalidad en la Escena. En la Capa 1
seleccionar el fotograma número 1 y en el dibujar un círculo (herramienta Óvalo
“letra O en el teclado”), las Propiedades del círculo son: Dimensiones 150.0 * 150.0
píxeles de ancho y alto, Coordenadas X: 25.0 y Y: 25.0, Color de Trazo (borde)
#000000, Altura de Trazo (borde) 2, Estilo de Trazo Sólido y Color de Relleno
#FFFF00.
 Una vez dibujado el círculo, seleccionar el frame número 20 e insertar un
fotograma F5. Insertar una segunda Capa, automáticamente se insertaran un total
de 20 fotogramas, en el fotograma número 1 de esta nueva capa dibujar una Línea
recta (herramienta Línea “letra N en el teclado”), las propiedades de la línea son:
Dimensiones 100.0 * 0.0 píxeles de ancho y alto, Coordenadas X: 50.0 y Y: 135.0,
Color de Trazo (borde) #000000, Altura de Trazo (borde) 2 y Estilo de Trazo
Sólido.
 La línea dibujada representara la boca de la carita feliz. Tomar la herramienta de
selección, luego colocar el cursor en el centro la línea y arrastrarla un poco hacia
abajo.
 Insertar una tercera Capa en ella dibujar dos círculos (herramienta Óvalo “letra O
en el teclado”), las Propiedades del círculo son: Dimensiones 30.0 * 30.0 píxeles de
ancho y alto, uno de los círculos colocarlo en Coordenadas X: 50.0 y Y: 70.0.
 No colocar Color de Trazo al círculo y usar como Color de Relleno #000000.
 Para hacer el segundo círculo basta con seleccionar el que se dibujo y Copiarlo
(ctrl. + C) y después Pegarlo (ctrl. +V).
 Una vez que se halla pegado colocar este segundo círculo en Coordenadas X:
120.0 y Y: 70.0.
 Ahora hacer las animaciones que corresponden al movimiento de los ojos. Primero
hacer la animación que corresponde al ojo izquierdo.
 Insertar una Capa 4, dibujar en el fotograma número 1 un círculo (herramienta
Óvalo “letra O en el teclado”).
 Las Propiedades del círculo son: Dimensiones 10.0 * 10.0 píxeles de ancho y alto,
Coordenadas X: 50.0 y Y: 80.0.
 No colocar Color de Trazo al círculo y usar como Color de Relleno #FFFFFF.
 Seleccionar el fotograma número 20 y convertirlo en fotograma clave con solo
presionar F6. Hacer clic sobre el círculo del fotograma número 20 y colocarlo en
Coordenadas X: 70.0 y Y: 80.0.
 Seleccionar un fotograma entre el número 1 y el número 19 de la Capa 4, hacer clic
con el botón derecho del ratón, y en el menú emergente seleccionar la opción Crear
interpolación de movimiento. De esta forma el círculo en color blanco se moverá
de izquierda a derecha.
 Ahora hacer la animación que corresponde al ojo derecho. Insertar una quinta
Capa, en el fotograma número 1 dibujar un círculo (herramienta Óvalo “letra O en
el teclado”), las propiedades del círculo son:
 Dimensiones 10.0 * 10.0 píxeles de ancho y alto, Coordenadas X: 120.0 y Y: 80.0.
 No colocar Color de Trazo al círculo y usar como Color de Relleno #FFFFFF.
 Seleccionar el fotograma número 20 y convertirlo en fotograma clave con solo
presionar F6. Hacer clic sobre el círculo del fotograma número 20 y colocarlo en
Coordenadas X: 140.0 y Y: 80.0.
 Seleccionar un fotograma entre el número 1 y el número 19 de la Capa 5, hacer clic
con el botón derecho del ratón, y en el menú emergente seleccionar la opción Crear
interpolación de movimiento. De esta forma el círculo en color blanco se moverá
de izquierda a derecha.
 Presionar ctrl. + Enter y podrás observar la animación en todo su esplendor
 Como te puedes dar cuanta la animación de los ojos tiene un salto que no la hace
ver profesional, sin embargo, este problema se soluciona:
 Primero seleccionar el frame 40 de las Capas 1, 2, y 3, luego insertar un fotograma
F5.

 Después en las Capas 4 y 5 insertar un fotograma clave F6 en el frame 40.

 Seleccionar el círculo de la Capa 4 el fotograma número 40 y cambiarlo a

Coordenadas X: 50.0 y Y: 80.0.
 Ahora seleccionar el círculo de la capa ojo derecho del fotograma número 40 y
cambiarlo a Coordenadas X: 120.0 y Y: 80.0.
 Para finalizar con las animaciones de los ojos, seleccionar un fotograma entre el
número 20 y el fotograma número 39 de las Capas 4 y 5, hacer clic con el botón
derecho del ratón, y en el menú emergente seleccionar la opción Crear
interpolación de movimiento. Presionar ctrl. + Enter y podrás observar que existe
una diferencia entre las dos animaciones.
Hasta este momento has adquirido los conocimientos para trabajar con distintas
herramientas. También has trabajado con un buen número de animaciones (interpolación de
movimiento), ya es tiempo de intentar hacer una animación pero esta vez incorporando los
paneles que fueron descritos en los primeros capítulos (capítulos 1 – 2 – 3).

Edición De Capas, Símbolos E

Incorporación De Paneles
Cuando se trabaja con múltiples Capas es muy frecuente que puedas batallar para encontrar
las formas que están dispuestas en una u otra Capa, por ello se te aconseja que cambies de
nombre a cada una de las Capas y así puedas ubicar cada uno de las formas vectoriales con
una mayor facilidad.

 En el ejemplo anterior se trabajo con 5 Capas, pero no sabes con exactitud en donde
se encuentra cada una de las formas. La solución a este conflicto es hacer doble clic
sobre el nombre de la Capa y después cambiárselo por uno que describa el
contenido de la Capa. Por ejemplo en la Capa 1 del trabajo anterior esta dibujado la
base de la carita feliz, sustituir el nombre de Capa 1 por el de fondo amarrillo. En
la Capa 2 esta dibujada la línea de la boca, sustituir el nombre de Capa 2 por el de
boca. Cambiar el nombre de la Capa 3 por el de fondo de ojos, el de la Capa 4 por
el de ojo izquierdo y cambiar el nombre de la Capa 5 por de ojo derecho.

Aplicación de símbolos e incorporación de paneles

Cuando se trabaja con animaciones un poco más elaboradas forzosamente tienes que
incorporar los diferentes símbolos de Flash (Clip de película , Botón y Gráfico) así como
también diferentes paneles de herramientas con los cuales te ayudaras para la realización de
las animaciones, los paneles más utilizados son: Panel de Propiedades del Documento
(ctrl. + J), Panel de Biblioteca (ctrl. + L o F11), Panel de Mezclador de Colores (shift +
F9), Panel de Transformar (ctrl. + T). Estos símbolos y paneles ya fueron descritos con
anterioridad y ahora solamente te enfocaras en su aplicación.

Creación de símbolos de Tipo Clip de película

Cuando se diseña una animación en la que se involucre la participación de varias capas, es

más recomendable hacer las animaciones en diferentes símbolos y después solamente
colocar cada uno de los símbolos en la Escena para la visualización en aun archivo SWF.

 La animación que a continuación se te presenta esta realizada en un documento de

Propiedades ctrl. + J, dimensiones del documento 250 * 250 píxeles, color de fondo
#FFFFFF y velocidad de fotogramas 12 fps.

 En el siguiente ejemplo trabajaras con animaciones de interpolación de movimiento

en clips de película. En esta animación estarán involucrados parámetros tales como:
movimiento girar, número de giros, color alfa, color tinta.
 Para crear un símbolo tienes tres opciones la primera es, seguir la siguiente ruta
Insertar >> Nuevo símbolo, la segunda es mediante el Panel de Biblioteca
haciendo clic en el icono correspondiente y la tercera es presionando en el teclado
ctrl. + F8.
 Cuando aparece el panel de Crear un nuevo símbolo, cambiar las propiedades,
colocar un nombre que describa la acción que se estará llevando acabo en el
símbolo. Luego seleccionar el Tipo de símbolo con el cual se va a trabajar. En este
caso colocar como nombre cuadrado girando y seleccionar la opción Clip de
película.

 Una vez que te encuentres ubicado en el símbolo, dibujar un cuadrado (R) de

dimensiones 200.0 *200.0, colocar el cuadrado en coordenadas X: 0.0 y Y: 0.0,
no usar color de borde y colocar como color de relleno #00FF00. Así comenzaras
a crear una animación de Interpolación de movimiento.
 Luego seleccionar el frame número 20 e insertar un fotograma clave F6, una vez
que el fotograma clave haya sido insertado seleccionar un punto entre el fotograma
número 1 y el fotograma número 19 y hacer clic sobre este fotograma con el botón
derecho del ratón, en el menú emergente seleccionar la opción Interpolación de
movimiento.
 Seleccionar la forma vectorial del fotograma número 20 y hacer visible el Panel de
Transformar ctrl. + T, seleccionar la casilla de Restringir, reajustar el porcentaje
en alguna de las casillas Anchura o Altura al 10.0 %. Así el tamaño del cuadrado
se vera reducido.

 Ahora seleccionar el cuadro reducido del fotograma número 20, en el Panel de

Propiedades seleccionar la opción de Color: Alfa y reducir el Porcentaje de 100%
a 0%. Con esta modificación la animación del cuadrado se disminuirá de tamaño y
al mismo tiempo se estará desvaneciendo.
 Hacer una variante más a la animación, seleccionar el cuadrado del fotograma
número 1, y en el Panel de Propiedades seleccionar la casilla de Giro: Horario.
Interpolación De Movimiento
Practicar otro ejemplo de animación que esté contenida en la misma película FLA. En esta
animación queda establecida una interpolación de movimiento de zoom, en la animación
también se involucra el cambio de color alfa.

 Primero debes crear un nuevo símbolo ctrl. + F8, nombrar al símbolo óvalo
girando y seleccionar la opción de Clip de película.

 En este símbolo hacer una animación de un Óvalo (O), de dimensiones 40.0 * 70.0
píxeles de ancho y alto, colocarlo en coordenadas X: 0.0 y Y: 0.0, no usar color de
borde y colocar como color de relleno #00FFFF.
 Seleccionar el frame número 20 e insertar un fotograma clave F6, después
seleccionar un punto entre el fotograma número 1 y el fotograma número 19 y
hacer clic sobre este fotograma con el botón derecho del ratón, en el menú
emergente seleccionar la opción Interpolación de movimiento.
 Seleccionar la forma vectorial del fotograma número 1 y en el Panel de
Transformar ctrl. + T, seleccionar la casilla de Restringir, reajustar el porcentaje
en alguna de las casillas Anchura o Altura al 10.0 %.

 Ahora seleccionar la forma vectorial del fotograma número 1, en el Panel de

Propiedades seleccionar la opción de Color: Alfa y reducir el Porcentaje de 100%
a 0%.
 Para hacer la variante de movimiento en esta animación, seleccionar el fotograma
número 1, y en el Panel de Propiedades seleccionar la casilla de Giro: AntiHorario
y en la casilla de Número de rotaciones escribir el número 4 veces.
 Para conseguir que el óvalo cambie de su color original #00FFFF a otro cualquiera,
simplemente seleccionar el óvalo del fotograma número 20 y en el Panel de
Propiedades seleccionar la opción Color: Tinta luego seleccionar un color
diferente.
 Regresar a la Escena, hacer visible el Panel de la Biblioteca ctrl. + L y luego
arrastrar desde esta el símbolo cuadrado girando y colocarlo en coordenadas X:
25.0 y Y: 25.0.

 Ahora arrastrar el símbolo óvalo girando hacia la Escena y colocarlo en

coordenadas X: 144.4 y Y: 140.4. Cuando se hace una animación de interpolación
de movimiento automáticamente se crean símbolos del Tipo Gráfico no borrar
estos símbolos porque la animación se perderá irremediablemente. Presionar ctrl.
+ Enter y observar la animación que se ha creado.
Símbolos De Tipo Botón2
Creación de símbolos de Tipo Botón

Los símbolos del Tipo Botón son de mucha importancia en las animaciones Flash, con
estos botones se puede controlar las animaciones a lo largo de la Línea de tiempo, también
puedes enlazar los botones a ubicaciones web, o controlar una pagina web 100 % Flash. En
este punto solamente te enfocare en conocer la Línea de tiempo del símbolo Botón, así
también se trabajara en el diseño básico de un botón de tres estados Reposo, Sobre y
Presionado.

 El símbolo de Tipo Botón se crea igual que el símbolo Clip de película y

símbolo Tipo Gráfico, esto es siguiendo la ruta Insertar >> Nuevo símbolo
o presionando en el teclado ctrl. + F8 o haciendo clic en el icono que
corresponde para crear un nuevo símbolo en el Panel de Biblioteca.
 Luego de haber seguido uno de estos métodos en el Panel de Crear un nuevo
símbolo colocar un Nombre que describa al símbolo, después simplemente
seleccionar en la opción Tipo Botón. En este caso nombrar al símbolo
botón redondo y en la opción Tipo seleccionar Botón.

 Al Aceptar el paso anterior te colocara en el símbolo de Tipo Botón. La

Línea de tiempo de este símbolo difiere en comparación a la del símbolo
Clip de película y Gráfico.
 La Línea de tiempo del símbolo Botón cuanta con cuatro frames, sin
embargo, en esta ocasión solamente se utilizan tres de los cuatro frames
estos son; Reposo, Sobre y Presionado.
 En el primer fotograma Reposo, indica que el botón permanecerá en una
sola posición y solamente tendrá la propiedad de ser botón en el archivo
SWF.
 El fotograma de Sobre indica que cuando se pasa el cursor sobre el botón
este cambiara de posición o color según haya sido diseñado.
 Y el estado de Presionado te indica que cuando presiones el botón este
cambiara también de color o de posición. Estas tres acciones solo son
 visualizadas cuando el símbolo botón es puesto en la Escena y es publicado
en un archivo SWF.

 A continuación se diseñara un botón con borde redondeado en el símbolo

que ya creaste. Presionar la herramienta rectángulo (R), luego seleccionar la
herramienta de establecer Radio de esquina en el Panel emergente de
Configuración de rectángulo escribir 10 como Radio de esquina.

 Una vez que se estableció el Radio de esquina, colocar las propiedades al

rectángulo de color. Hacer visible el Panel de Mezclador de colores shift +
F9, anular el color de borde, seleccionar como color de relleno un estilo
degradado de Tipo Lineal, los colores a usar son #FFFFFF y #000000.
 Dibujar un rectángulo de dimensiones 100.0 * 20.0 píxeles de ancho y alto y
colocarlo en coordenadas X: 0.0 y Y: 0.0.
 Insertar un fotograma clave F6 en el segundo Estado de la línea de tiempo
(Sobre), seleccionar la forma vectorial de este fotograma y con el Panel de
Mezclador de clores aun visible cambiar el Estilo de relleno a Tipo Radial,
los colores seguirán siendo #FFFFFF y #000000.
 Insertar el tercer fotograma clave F6 en el fotograma Presionado,
seleccionar la forma vectorial de este fotograma y con ayuda del Panel de
Mezclador cambiar nuevamente el Estilo de relleno a Tipo Lineal.
 Insertar una segunda capa en la cual se colocara un Campo de texto estático
(T) con la palabra botón prueba, tipo de fuente Arial, tamaño de fuente 14
y color de fuente #FFFFFF, mover este texto a Coordenadas X: 6.6 y Y:
0.2.
  Regresar a la Escena y arrastrar desde el Panel de Biblioteca ctrl. + L el
símbolo botón redondo, presionar ctrl. + Enter y ver como trabaja el botón
de tres estados.

Importación De Imágenes
 Importación de imágenes a símbolos

Las imágenes tipo gif, jpg o png son muy complicados o simplemente imposible de
generar en Flash, porque el programa de Flash es básicamente para generar animaciones.
Cuando se quiere trabajar con animaciones que contengan algún tipo de imágenes. Puedes
ayudarte de la herramienta Importar imágenes, es muy recomendable primero crear un
símbolo de tipo Gráfico y luego sobre este símbolo Importar la imagen en cuestión. Para
hacer una animación que involucre movimiento, desvanecimiento, etc, después es necesario
crear un nuevo símbolo de tipo Clip de película e insertar en este el símbolo tipo Grafico.

 Hay dos métodos con los cuales te puedes ayudar para importar imágenes la primera
es seguir la ruta Archivo >> Importar y luego seleccionar una de las dos opciones
presentadas Importar a escenario o Importar a biblioteca, una recomendación es
que no importes a biblioteca, es mejor importar directamente al símbolo en el cual
se va a trabajar la ruta es Archivo >> Importar >> Importar a escenario o
simplemente presionar en el teclado ctrl. + R.

 Luego de haber presionada la opción de Importar, navegar hasta la carpeta en la

cual este contenida la imagen que quieras importar.
 Después seleccionar la imagen deseada y Acepar, con esto la imagen será
trasladada hasta el símbolo creado.
Animación Con Imágenes Importadas
Animación Con Imanes Importadas

 En este ejemplo se trabajara en la animación de una imagen con color Alfa para
simular el desvanecimiento de imagen.
 La animación estará insertada en un documento con las siguientes Propiedades ctrl.
J, dimensiones del documento 300 * 300 píxeles de ancho y alto, color de fondo
#FFFFFF y velocidad de fotogramas 15 fps
 La animación no se trabajara con Interpolación de movimiento porque este tipo de
interpolación genera automáticamente dos símbolos de Tipo Gráfico y hace un poco
pesado el archivo FLA, mejor se trabajara con una animación de Movimiento en el
Panel de Propiedades. Esta animación será descrita a continuación. Primero crear
un símbolo ctrl. + F8 llamarlo imagen seleccionar la opción de Tipo Gráfico.

 Ubicado en el símbolo presionar ctrl. + R en el menú emergente de Importar

navegar hasta la carpeta de la imagen. Cuando la imagen haya sido insertada en el
símbolo imagen clocarla en coordenadas X: 0.0 y Y: 0.0. Importar una imagen que
tenga de dimensiones 300.0 * 300.0 píxeles de ancho y alto.

 Ahora crear un nuevo símbolo ctrl. F8 y nombrarlo animación de imagen, en la

opción Tipo seleccionar la opción de Clip de película.
 Una vez que te encuentres en el símbolo de Clip de película hacer visible el Panel
de Biblioteca ctrl. + L y arrastrar desde esta el símbolo imagen hacia el Clip de
película, color la imagen en coordenadas X: 0.0 y Y: 0.0.

 Seleccionar el frame número 25 e insertar un fotograma clave F6. Seleccionar la

imagen de este fotograma y en el Panel de Propiedades seleccionar la opción Color
Alfa y después reducir el porcentaje de 100% a 0%.
 Seleccionar un fotograma entre el número 1 y el número 24, en el Panel de
Propiedades seleccionar la opción Animar Movimiento, y de esta forma quedara
insertada la animación.
 Regresar a la Escena y arrastrar desde la Biblioteca ctrl. + L el símbolo animación
de imagen, colocar el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. +
Enter y visualizar el trabajo realizado.
 Como veras la animación tiene un pequeño salto, para solucionar este problema
regresar al símbolo animación de imagen y colocar un fotograma clave F6 en el
frame número 50, seleccionar la imanen de este fotograma en el Panel de
Propiedades seleccionar Color Ninguno.
 Seleccionar un fotograma entre el número 25 y el número 49, en el Panel de
Propiedades seleccionar la opción Animar Movimiento, y de esta forma quedara
insertada una animación más.
 Volver a presionar ctrl. + Enter y notaras una significativa diferencia en la
animación.
Animación De Formas Vectoriales
No siempre animar formas vectoriales con Interpolación de movimiento es la técnica más
apropiada, la primera de las razones es porque tienes que trabajar con dos símbolos de Tipo
Gráfico por cada animación que se realiza, y a estas animaciones solamente se puede
trabajar con el cambio de color en cualquiera de sus modalidades. Por otro lado cuando
quieres hacer una animación en la que se involucre una deformación y al mismo tiempo un
cambio de color de una forma vectorial es imposible hacerla con una animación de
Interpolación de movimiento, para este tipo de animaciones se utiliza una Animación de
Forma en el Panel de Propiedades.

 A continuación se te guiara paso a paso hasta llegar a conseguir una animación en la

se involucre el cambio de color, la deformación de la forma vectorial y después
hacer que la forma vectorial se traslade de un lugar a otro.
 Crear un documento de Propiedades ctrl. + J, dimensiones 500 * 200 píxeles de
ancho y alto, color de fondo #CCFFFF y velocidad de fotogramas 15 fps.
 Luego de que hayas colocado las propiedades del documento, crear un símbolo ctrl.
+ F8, nombrarlo animación de forma, en la opción de Tipo seleccionar Clip de
película.

 Ubicado en el símbolo dibujar un Óvalo (O) que no tenga borde y usar como color
de relleno #000066 las dimensiones 98.0 * 198.0 píxeles de ancho y alto, colocar la
forma dibujada en coordenadas X: 0.0 y Y: 0.0.
 Insertar un fotograma clave F6 en el frame número 25. seleccionar el óvalo de este
nuevo fotograma y cambiar el color de relleno a #FF0000.
 Seleccionar un fotograma entre el número 1 y el número 24. En el Panel de
Propiedades seleccionar la opción de Animar: Forma.
 Regresar a la Escena y arrastrar desde el Panel de Biblioteca ctrl. + L el símbolo
animación de forma, después colocar el símbolo en coordenadas X: 0.0 y Y: 0.0.
Presionar ctrl. + Enter y observar como cambia de color gradualmente el óvalo.
 Regresar al símbolo animación de forma asiendo doble clic sobre el icono que
representa al símbolo en el Panel de la Biblioteca.
 Nuevamente ubicado en el símbolo animación de forma, seleccionar la forma
vectorial del fotograma número 25, tomar por uno de los extremos a la forma y
deformarla un poco. Las coordenadas cambiaran al deformar el óvalo, si deseas
puedes colocar nuevamente la forma vectorial en coordenadas X: 0.0 y Y: 0.0.
Presionar una vez más ctrl. + Enter y ahora se observara que el óvalo cambia de
color y al mismo tiempo este se va deformado en otra cosa.

 Para concluir con este objetivo regresar otra vez al símbolo animación de forma
luego seleccionar el la forma vectorial del fotograma número 25 y cambiarla de
coordenadas en el eje X, la nueva coordenada será X: 500.0. Con esta coordenada
te aseguraras que la animación se trasladara hasta a fuera del Escenario.
 Presionar ctrl. + Enter y ver como queda la animación final en la cual están
incluidas tres tipos de animaciones.
 Guías De Movimiento
Otro tipo de animación que se puede obtener con el programa de Flash, es una animación
que siga un patrón que sirva de guía a una forma vectorial o una imagen. En el siguiente
ejemplo aprenderás a crear una animación introduciendo una capa de Guía de movimiento,
además aprenderás a usar la Herramienta de Dibujo de objeto que es una forma diferente
de agrupar una forma vectorial en sus partes de borde y color de relleno.

 Crear un documento de Propiedades ctrl. + J, las dimensiones son 500 * 200

píxeles de ancho y alto, colocar como color de fondo #000000 y velocidad de
fotogramas 12 fps.
 Esta animación es llevara acabo en su totalidad en la Escena. Primero, presionar por
dos segundos la herramienta de Rectángulo hasta obtener el submenú de la
Herramienta de PolyStar.

 En el Panel de Propiedades seleccionar el color de borde #0000FF y color de

relleno #FFFF00. Hacer clic en la casilla de Opciones, y después en el Panel de
Configuración de herramientas seleccionar el Estilo de Estrella y Número de lados
5.
 Después de haber seleccionado las propiedades de la forma vectorial a dibujar,
presionar el icono de Dibujo de objeto en el panel de herramientas o simplemente
presionar la letra J en el teclado, así la forma vectorial quedara automáticamente
agrupada. Si el dibujo no esta agrupado o insertado en un símbolo de cualquier Tipo
la animación con Guía de movimiento no tendrá éxito.
 Ahora dibujar la estrella de 5 lados, de dimensiones 90.0 * 85.5 píxeles de ancho y
alto, colocar la estrella en cualquier lugar por el momento las coordenadas no
tienen importancia. Una vez que hayas terminado de dibujar la estrella aparecerá
alrededor de esta un margen en color azul esto indica que el dibujo esta agrupado.
En el Panel de Propiedades aparecerá la leyenda de Objeto de dibujo esta leyenda
confirma también que la forma vectorial a sido agrupada.
 Seleccionar el frame número 65 en la Línea de tiempo y en el insertar un fotograma
clave F6. Seleccionar la estrella de este fotograma y moverla a un punto de
coordenadas diferente al original.
 Seleccionar un fotograma entre el número 1 y el número 64, en el panel de
Propiedades seleccionar las opciones de Animar Movimiento, Girar Horario y 10
veces. Hasta este punto esta creada una animación de una forma vectorial que se
trasladara girando de un punto a otro dependiendo de donde hayas colocado la
estrella del fotograma número 1 y la estrella del fotograma número 65. En los pasos
siguientes trazaras una ruta por donde se trasladará la forma vectorial.
 A continuación inserta una Capa de Guía de movimiento, en esta capa
automáticamente se insertaran 65 fotogramas.

 Recuerda que tienes seleccionada la opción de Dibujo de objeto, lo más

recomendable es que quites esta selección presionando en el teclado la letra J. Con
ayuda de la herramienta de Lápiz Y, Pincel B o Pluma P, trazar una guía por toda la
Escena.
 Seleccionar la herramienta de Ajustar a objetos para que cuanto acerques un poco
la estrella al inicio de la guía esta tengan una atracción magnética.
 Cuando termines de trazar la guía seleccionar la estrella del fotograma número 1,
tomar esta estrella por el centro y en ella aparecerá automáticamente un círculo en
el centro. Luego que tienes tomada por el centro a la estrella, moverla hasta la parte
en donde inicia la guía.
 Ahora seleccionar la estrella del fotograma número 65, tomarla por el centro y
moverla hasta la parte en donde finaliza la guía. Presionar ctrl. + Enter y ver como
la estrella hace el recorrido que trazaste por toda la Escena.
Animación Con Máscaras
Animación con máscaras convertidas

Las animaciones que involucran la intervención de capas convertidas en máscaras, son de

suma importancia en animaciones básicas tanto de forma como de movimiento. Las
animaciones de máscaras muestran solamente una parte de una imagen, texto o forma
vectorial. En el ejemplo que a continuación se te presenta trabajaras con una combinación
de animaciones de movimiento y forma en una misma capa, posteriormente esta capa será
transformada en una capa de máscara. La capa máscara estará aplicara a una imagen
importada a la Escena.

 El total de la animación como en el caso anterior se trabajara en la Escena. Crear un

documento de Propiedades ctrl. + J, las dimensiones son 500 * 400 píxeles de
ancho y alto, color de fondo #FFFFFF, velocidad de fotogramas 12 fps.

 A la primera capa de la Escena cambiarle el nombre por el de imagen. Después

importar ctrl. + R una imagen de dimensiones 500 * 400 píxeles de ancho y alto,
colocar la imagen importada en coordinadas X: 0.0 y Y: 0.0.
 Insertar una segunda capa y cambiarle el nombre a esta por el de máscara. Aquí es
en donde se trabajara propiamente con la combinación animada de movimiento y
forma. Dibujar en el primer fotograma un Rectángulo R, presionar el icono de
Dibujo de objeto o simplemente la letra J en el teclado. El rectángulo carecerá de
borde y no importa el color de relleno porque este no se observara en la
presentación del archivo swf final. Las dimensiones son 40 * 400 píxeles de ancho
y alto. Colocar esta forma vectorial en coordenada X: -40.0 y Y: 0.0.
 Seleccionar el frame número 20 e insertar un fotograma clave F6. Seleccionar el
rectángulo de este fotograma y cambiarlo a nuevas coordenadas X: 500.0 y Y: 0.0.
 Seleccionar un fotograma entre el número 1 y el número 19, en el Panel de
Propiedades seleccionar la opción Animar Movimiento.
 Insertar un fotograma clave F6 en el frame número 40, seleccionar el rectángulo de
este fotograma y luego cambiar las dimensiones a 500.0 * 400.0 píxeles y las
nuevas coordenadas son X: 0.0 y Y: 0.0.
 Crear ahora la animación de tipo Forma, seleccionar un fotograma entre el
número 20 y el número 39. en el panel de Propiedades seleccionar la opción de
Animar Forma. De esta forma el rectángulo crecerá hasta cubrir por completo la
imagen.
 Para finalizar la animación insertar un fotograma clave F6 pero ahora en el frame
número 60. Seleccionar el rectángulo del fotograma 60 y cambiarlo a coordenadas
X: -500.0 y Y: 0.0.
 Seleccionar un fotograma entre el número 40 y el número 59. En el Panel de
Propiedades optar por la opción Animar Movimiento, con esta animación el
rectángulo se desplazara al lado izquierdo y al mismo tiempo la imagen se estará
ocultando.
 Lo único que falta por hacer es transformar la capa en donde esta insertada la
animación a Capa de tipo máscara. Hacer clic con el botón derecho del ratón sobre
la capa máscara, en el menú emergente seleccionar la opción de Máscara.
 Cuando cambias una capa a la opción de máscara los iconos de estas cambian a un
color y de aspecto. Finalmente insertar un fotograma F5 en el frame número 60 de
la capa imagen. Ahora ya esta lista la animación y puedes presionar sin ningún
inconveniente ctrl. + Enter y ver como trabaja la animación final.