Manual flash 6to semestre 1ra version publicar

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

ADOBE® FLASH ® CS5

mireyaisela@hotmail.com

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

Nombre del Alumno:

Plantel:

Grado/Grupo/Turno.

Página 1


Avisos leg ales

Apuntes y Trabajos
Para la Capacitación

SUBMODULO II PRODUCCION DE ANIMACIONES
CON ELEMENTOS MULTIMEDIA.

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

Documentos seleccionados solo con fines educativos.


Página 2


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


Página 3


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

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

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

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


Página 4

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

Página 5

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


Página 6


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


Página 7


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


Página 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.


Página 9


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


Página 10



Página 11


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


Página 12


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

d)
e)

f)
g)

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

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

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


Página 13


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

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


Página 14


Utilizar la ventana de herramientas principal.


Página 15


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

Seleccionamos la solapa que queremos incluir en otro panel.

2.
3.

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

4.

Haciendo clic sobre el icono
configuración del mismo.

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

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


Página 16


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

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

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

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

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


Página 17


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

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

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

Encajar

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

Página 18


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

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

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


Página 19


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

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

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


Página 20


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

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

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

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


Página 21


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

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

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

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


Página 22

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

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

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

OBSERVACIONES

SI

NO

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

EVALUÓ (NOMBRE Y FIRMA)


LUGAR Y FECHA DE
APLICACIÓN

Página 23


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

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

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


Página 24


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

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

¡¡¡ÁNGULOS PERFECTOS!!!

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

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


Página 25

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

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

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


Página 26

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

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

Para pintar con el pincel actuamos como sigue:

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


Página 27


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

Modo
Modo por defecto, pinta sobre los objetos existentes.

Pintar normal:

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


Página 28


Ejercicio
Realiza las siguientes Imágenes.


Página 29


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

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

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


Página 30

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

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


Página 31


El primer selector de color

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

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

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

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


Página 32


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

Ejercicio
Realiza las siguientes Imágenes.


Página 33


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

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

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

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


Página 34


CUIDADO: EL REDONDEO Y SUS COSAS




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

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

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


Página 35


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

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

solapa de


Página 36


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


Página 37


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

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

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

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


Página 38


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

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

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

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


Página 39

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

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


Página 40


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

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

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

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


Página 41


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

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

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

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

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


Página 42


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

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


Página 43


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

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

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


Página 44

En el caso de que el Degradado, en vez de lineal, sea Radial...

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

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

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


Página 45


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

Por supuesto también podemos transformar un degradado Lineal, sus modificadores son similares

Página 46


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







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

Edición rápida directamente sobre la forma.

Subselección

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




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


Página 47



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



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

En cuanto a Degradados:
o
o

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

o

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

o

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


siempre que no

Página 48


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


Página 49


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

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

y

.

Guarda el archivo resultante como ARBOLES. fla


Página 50


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

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

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

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


Página 51


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


Página 52


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

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

Uso de Máscaras


Página 53

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

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

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

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


Página 54


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


Página 55


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


Página 56

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

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


Página 57

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

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


Página 58

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

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


Página 59

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

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


Página 60


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


Página 61


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

OBSERVACIONES

SI

NO

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


LUGAR Y FECHA DE APLICACIÓN

Página 62


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

SI

NO

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


LUGAR Y FECHA DE
APLICACIÓN

Página 63


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

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

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


Página 64

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

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

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


Página 65


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

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


Página 66

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

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

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


Página 67


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


Página 68


Evidencia por desempeño: Los símbolos y bibliotecas creadas en una
película.
Instrucciones para el alumno: Crea una película que contenga símbolos y
biblioteca en un programa de animación siguiendo las instrucciones
planteadas por el docente.

SI

NO

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



Página 69


Evidencia por producto: Los símbolos y bibliotecas creadas en una película.
Instrucciones para el alumno: Crea una película que contenga símbolos y
biblioteca en un programa de animación siguiendo las instrucciones
planteadas por el docente.

SI

NO

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



Página 70

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

b) Falso.

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

b) Falso.

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

b) Falso.

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

b) Falso.

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

b) Falso.

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

b) Falso.


Página 71


Bloque IV: Aplicar animación al dibujo.

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


Página 72


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

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


Página 73

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

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


Página 74


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

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


Página 75

Manual flash 6to semestre 1ra version publicar

Manual flash 6to semestre 1ra version publicar

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Similar a Manual flash 6to semestre 1ra version publicar

Similar a Manual flash 6to semestre 1ra version publicar (20)

Último

Último (20)

Manual flash 6to semestre 1ra version publicar