Académique Documents
Professionnel Documents
Culture Documents
Introduccin
Flash CS5 es una aplicacin que permite crear animaciones para pginas web con alto
contenido interactivo y multimedia. Flash dispone de mltiples herramientas con las que
podemos crear pelculas a base de animaciones, botones estticos o dinmicos, sonidos y
msica, vdeo,etc..y dotar de acciones a las distintas animaciones.
Caractersticas:
2.- Trabaja fundamentalmente con grficos vectoriales en lugar de manejar bitmaps, lo que
posibilita que la resolucin de la imagen sea fija y no se distorsione una vez ampliada o
reducida.
a) Abrir un elemento reciente: lista de los ltimos archivos abiertos con este programa (al
iniciar por primera vez el programa estar vaca)
b) Crear nuevo: Crear nueva pelcula desde cero
1
Lic. Hctor Vidaln Jorge
c) Crear con plantilla: Crear una nueva pelcula a partir de plantillas para comenzar
trabajos de animacin, anuncios, presentaciones, etc..
d) Aprendizaje: Ayuda sobre la aplicacin
Al seleccionar ActionScript 2.0 o 3.0 se abre una nueva ventana donde se muestra el entorno
de trabajo
2.- Botn. Es un grfico al que se le podrn aadir acciones para que al pasar el cursor
por encima o hacer clic sobre l, suceda algo.
c) Los smbolos.- Son objetos que se pueden reutilizar todas las veces que deseemos ya que
formarn parte de la biblioteca de donde lo seleccionaremos y arrastraremos a la escena.
2
Lic. Hctor Vidaln Jorge
Podemos colocar pelculas en capas diferentes de tal manera que al activar la reproduccin se
proyectarn las pelculas de todas las capas a la vez. Al activar la reproduccin de una escena, se
pondr en marcha la lnea de tiempo a la velocidad que le asignemos e ir apareciendo en la
pantalla todo aquello que contengan los fotogramas segn vaya avanzando el cursor del tiempo.
Cuando lleguemos al ltimo fotograma o al que deseemos, podemos decidir si debe detenerse
todo, comenzar de nuevo la reproduccin, saltar a un determinado fotograma, abrir otra escena,
etc..
e) Las capas.- la zona izquierda del panel de la lnea de tiempo se destina al control de las
capas. Por defecto aparece una capa creada, pero se pueden aadir ms capas. El ubicar
cada elemento en una capa diferente nos permite un mayor control sobre el desarrollo
de la pelcula. Un tipo especial de capa es la capa llamada gua de movimiento que
permite definir una trayectoria invisible para que los objetos sigan
esa direccin.
f) Los mens.- A travs de los mens se obtiene acceso a muchas de las opciones que
pueden realizarse desde los paneles, pero permiten llevar a cabo otras operaciones que
nos son accesibles desde ah. Adems de los mens clsicos tenemos los mens
contextuales que flexibilizan las acciones en funcin de la situacin en al que nos
encontremos, para ello seleccionar con el botn derecho del ratn sobre el elemento
deseado y se mostrarn todas las acciones posibles.
g) Las barras de herramientas.- Activar el men Ventana>Herramientas si
no estuviese visible. En esta barra se encuentran las herramientas
principales para el dibujo.
La parte superior contiene las herramientas de dibujo y seleccin.
La parte central muestra las herramientas de visualizacin junto
con los selectores de color.
La parte inferior est dedicada a los modificadores de cada
herramienta (si los tuviese)
3
Lic. Hctor Vidaln Jorge
Panel Propiedades
Desde esta ventana se pueden examinar y editar las propiedades de cada elemento que
seleccionemos en la escena, es decir, su contenido vara en funcin del tipo de elemento
seleccionado. Activar el men Ventana>Propiedades. En esta ilustracin se muestran las
propiedades correspondientes a dos tipos de objeto seleccionados previamente.
Panel Alinear
4
Lic. Hctor Vidaln Jorge
Panel Color
Panel Muestras
Aplica los colores y rellenos correspondientes a una pelcula de Flash. Mediante esta paleta
se puede aplicar, importar, exportar, aadir, quitar y clasificar colores. Activar
Ventana>Muestras
Panel Informacin
Panel Transformar
5
Lic. Hctor Vidaln Jorge
Panel Acciones
Podemos activar este panel con la tecla F9 o men Ventana>Acciones. Se utiliza para
asignar acciones a los fotogramas, los botones, los clip de pelcula, etc..
Panel Biblioteca
Panel Historial
Con objeto de ganar espacio en la ventana de trabajo, podemos contraer los paneles sin
cerrarlos, para ello pulsar en las flechas (expandir) o (contraer). Si queremos
cerrar un panel pulsar en X. Si necesitamos cerrar temporalmente todos los paneles
pulsar F4.
7
Lic. Hctor Vidaln Jorge
Cada vez que se crea un nuevo documento, aparece una escena vaca preparada para trabajar
en ella. Lo que ubiquemos en esta escena pasar a ser una pelcula de Flash tan pronto como
pulsemos la tecla Intro. Flash genera archivos vectoriales, esto quiere decir que el tamao de la
pelcula no importa demasiado ya que puede expandirse o contraerse sin que se vea afectada
su calidad.
Si queremos variar las caractersticas generales de una pelcula, como por ejemplo el fondo,
velocidad de reproduccin, etc.. tenemos que hacer clic previamente en la escena (de este
modo sabe que los cambios afectan a la misma)
Tamao de la pelcula
Men Modificar>Documento
Seleccionar el icono escenario del panel propiedades para que uestre los colores y hacer clic en
uno de ellos. No se pueden asignar colores de fondo diferentes para escenas diferentes de la
misma pelcula ( se puede recubrir con un rectngulo de relleno del color deseado).
Las pelculas sde Flash se basan en el mismo sistema que las pelculas de cine, a travs de
fotogramas que reproducidos uno tras otro proporcionan la sensacin de movimiento.
8
Lic. Hctor Vidaln Jorge
El rea de trabajo comprende la zona correspondiente a la escena y todos los alrededores, que
se muestran en color gris. Si el comando rtea de trabajo est activo, cualquier objeto que est
parcial o totalmente fuera del marco de la escena se ver, en caso contrario no se podr visualizar
cualquier elemento que est fuera de la escena. Para activar esta opcin ir al men Ver>rea de
trabajo.
Configuracin de la publicacin
Para reproducir la pelcula, una vez dispuestos todos los elemntos que conforman la escena,
basta con pulsar la tecla Intro. Si queremos ver cmo se reproducira en en un navegador
pulsar la tecla F12.
Adems de guardar las pelculas con la extensin .FLA se puede almacenar de modo
automtico con otras extensiones dependiendo del fin ltimo de las mismas.
9
Lic. Hctor Vidaln Jorge
2. Activar las casillas de las opciones Otros formatos (que ms abajo se detallan)para
indicarlos tipos de archivos que se deseen crear cada vez que se publique la pelcula.
Asignar un nombre en el cuadro de texto Archivo de salida: e indicar la unidad y
carpeta de destino en el icono
3. Seleccionar men Archivo>Publicar o las teclas Ctrl + Mayscula + F12 para que se
generen de modo automtico todos los archivos marcados.
Tipos de archivos
10
Lic. Hctor Vidaln Jorge
Exportacin de pelculas
La diferencia entre publicar y exportar consiste en que, cuando se utiliza Publicar, es posible
crear varios formatos de exportacin a la vez, mientras que al utilizar la orden Exportar slo se
puede exportar un formato cada vez. La publicacin memoriza las configuraciones y la
exportacin no.
Si queremos guardar una pelcula de Flash como un GiF animado seleccionar tipo .GIF
animado
Los formatos que pueden exportarse desde flash como pelcula son:
Pelcula flash(.swf)
AVI de windows (.avi).- Este formato exporta la pelicula como un vdeo de Windows y
es un buen formato para abrir una animacin Flash en una aplicacin de vdeo.
QuickTime (.mov)
GIF animado (.gif)
Una vez creada la pelcula y sin salir de la aplicacin,Flash permite reproducirla de las
siguientes maneras:
11
Lic. Hctor Vidaln Jorge
Mediante el reproductor de Flash de forma individual. Una vez creado un archivo .swf
de la pelcula, se puede reproducir en cualquier ordenador que tenga instalado el
reproductor de Flash.
Mediante un navegador de Internet compatible con el reproductor de Flash pulsando
Alt + Mayscula + F12
La mayora de los navegadores modernos son compatibles con el reproductor de Flash
y permiten visualizar las pelculas en formato .swf.
Flash permite exportar la pelcula en mltiples formatos que pueden ser visualizados
mediante otras aplicaciones o, incluso, de forma autnoma:
Cuando se lleva un smbolo grfico a la escena, lo que realmente se coloca en ella no es el objeto
en s sino una representacin visual de ese objeto a la que se denomina Instancia. El archivo
final que contiene una pelcula que trabaja con smbolos reduce considerablemente el tamao
del mismo.
Tipos de smbolos
Grfico
Clip de pelcula
Botn
12
Lic. Hctor Vidaln Jorge
13
Lic. Hctor Vidaln Jorge
Si aadimos a la escena
varios smbolos grficos
de un fotograma, cada
uno en una capa, al
reproducir la pelcula
pulsando Ctrl + Intro,
aparecern a la vez
todos los objetos y
permanecern en
pantalla porque la
pelcula empieza y acaba
en el mismo fotograma.
Supongamos que la
escena contiene una
animacin desde el fotograma 1 al 10, si aadimos una nueva capa y llevamos a ella una
instancia de un smbolo grfico compuesta por un solo fotograma y reproducimos la pelcula,
solo veremos el smbolo grfico durante el primer fotograma.
1.- En la lnea de tiempo del smbolo grfico seleccionar el fotograma hasta donde deseemos
que sea visible.
2.- Pulsar la tecla F5 par insertar un nuevo fotograma, de este modo el smbolo estar visible
en todos los fotogramas.
Este tipo de comportamiento nos permitir crear pelculas en las que la visualizacin de los
objetos comience y acabe donde queramos. Para ello, basta con ubicar cada smbolo grfico en
una capa diferente y situar los fotogramas de inicio y final de la visualizacin de cada objeto en
lugares diferentes en la lnea de tiempo.
Cada botn tiene su propia lnea de tiempo independiente, la cual contiene cuatro
fotogramas.
b) Sobre.- Aspecto del botn cuando tenga encima el cursor del ratn.
c) Presionado.- Aspecto del botn cuando se hace clic sobre l con el ratn
14
Lic. Hctor Vidaln Jorge
d) Zona activa
Hacer doble clic sobre el smbolo para trabajar en la lnea de tiempo para cada estado
Cambiar el color, tamao, aadir texto, etc.. Para cada estado, pero pulsar previamente F6 en
cada estado del fotograma
El smbolo clip de pelcula contiene una animacin con ms de un fotograma pero con una
lnea de tiempo independiente de la pelcula principal.
Esto quiere decir que se reproducir de principio a fin y de forma independiente a la lnea de
tiempo de la escena principal. Si arrastramos un clip de pelcula desde la biblioteca a la escena,
ocupar nicamente un fotograma, pero contendr la totalidad de fotogramas del clip y la
animacin no se detendr aunque se asigne una accin de Stop de pelcula.
15
Lic. Hctor Vidaln Jorge
Grfico
Clip de pelcula
Botn
Biblioteca de smbolos
Cada pelcula tiene su propia biblioteca en la que se guardan los elementos propios de esa
pelcula aunque es posible importar elementos de otras bibliotecas a la biblioteca del
documento activo.
Las bibliotecas que vienen predeterminadas en Flash y que contienen botones, sonidos y
clases que podemos utilizar en cualquier momento para nuestros trabajos se encuentran en el
men Ventana>Bibliotecas comunes.
16
Lic. Hctor Vidaln Jorge
Elementos de la biblioteca
Nombre del documento
Opciones
Nombres de los
smbolos
Nuevo smbolo
Nueva carpeta
Propiedades
Eliminar
17
Lic. Hctor Vidaln Jorge
A travs del botn Opciones que se encuentra en la parte superior derecha del panel
bibliotecas, podemos llevar a cabo distintas acciones como:
Crear carpetas
1. Crear una carpeta, pulsar en el icono Nueva carpeta situado en la parte inferior del
panel biblioteca. Asignar un nombre a la carpeta.
2. Arrastrar los smbolos de la biblioteca a la carpeta recin creada.
Dentro de las carpetas se pueden crear nuevas subcarpetas, siguiendo el sistema jerrquico
de estructura en rbol de Windows.
Para mover un elemento de una carpeta a otra, basta con abrir la carpeta que contiene el
smbolo deseado y arrastrar hasta llevarlo a la carpeta destino.
En resumen:
Un smbolo es un elemento ubicado en la biblioteca que puede ser utilizado las veces
que se desee.
Una instancia es una representacin del smbolo ubicada en la escena
Si se modifica un smbolo, todas las instancias del smbolo se actualizan
automticamente
18
Lic. Hctor Vidaln Jorge
icono Seleccin ).
4) Seleccionar el objeto y aplicar color de trazo y color de relleno.
Nota: para crear un smbolo tambin podemos arrastrar el objeto de la escena al panel
Biblioteca (men ventana>biblioteca) y asignar el nombre y Tipo.
Cada documento de Flash posee su propia biblioteca conteniendo los elementos utilizados en
esa pelcula. Si queremos utilizar la biblioteca de una pelcula en otra pelcula diferente,
seleccionar Archivo>Importar>Abrir biblioteca externa.
19
Lic. Hctor Vidaln Jorge
Aunque existen aplicaciones como FireWorks, illustrator o corelDraw para el dibujo vectorial,
Flash proporciona herramientas de dibujo que nos van a permitir realizar gran parte de nuestro
trabajo. Siempre podremos importar a Flash trabajos realizados en otros programas
En este tema vamos a trabajar con las principales herramientas que nos facilita Flash en su
barra de herramientas.
Contornos y rellenos
herramienta Seleccin .
Para seleccionar o cambiar el color de contorno,
relleno
20
Lic. Hctor Vidaln Jorge
Los atributos caractersticos son el color, grosor y el estilo de lnea y pueden asignarse a priori
o despus de realizado el trazo
21
Lic. Hctor Vidaln Jorge
Para devolver el valo a su estado normal, pulsar el botn Restablecer del panel Propiedades.
22
Lic. Hctor Vidaln Jorge
23
Lic. Hctor Vidaln Jorge
La herramienta Lpiz
El lpiz permite trazos a mano alzada como si realmente dibujasemos en el papel, para ello:
Opciones:
.- Los trazos rpidos los sustituye por segmentos de lnea curvados y por lo
tanto los trazos son ms suaves.
Relacionado con las opciones de trazo de los lpices, se pueden dibujar rectngulos y valos
perfectos sin necesidad de cerrar la forma, haciendo uso de la opcin de Enderezar.
24
Lic. Hctor Vidaln Jorge
Herramienta Pluma
25
Lic. Hctor Vidaln Jorge
Herramienta Pincel
Traza brochazos a mano alzada como si estuviramos pintando con una brocha. Pinta con el
.- Pinta sobre rellenos y lneas que se encuentren en la misma capa, esto es,
pinta lo que se encuentre por debajo.
.- Pinta nicamente los rellenos y las reas vacas, es decir, slo cubrir las
zonas con color sin afectar a los contornos y lneas sueltas.
.- Pinta nicamente las reas vacas, quedando la pintura por detrs de los
rellenos y los contornos.
26
Lic. Hctor Vidaln Jorge
Tamao
Forma de pincel
pintura .
Proporciona un mtodo ms rpido para cambiar el color, grosor, estilo de lneas y contornos
sin necesidad de seleccionarlos previamente. Acta lgicamente sobre el color de contorno
seleccionado .
Permite rellenar de color reas cerradas o casi cerradas que estn vacas o rellenas de otro
color. Podemos rellenar con colores slidos, degradados o bitmaps.
27
Lic. Hctor Vidaln Jorge
Pasos:
La herramienta Texto
El texto introducido es tratado por defecto como un grupo, esto implica que si necesitamos
considerar lo como formas independientes es necesario aplicar la opcin del men Modificar
>Separar. En Flash disponemos de dos tipos de texto:
28
Lic. Hctor Vidaln Jorge
Crear primero el marco para alojar una lnea horizontal de texto. Posteriormente, a medida
que vayamos escribiendo, el salto de lnea se producir automticamente.
En posible que el texto insertado desborde el marco de texto, en ese caso se visualizar un
signo + en color rojo , en este supuesto tenemos varias opciones:
3. Una vez escrito el texto hacer clic en un lugar vaco de la escena para abandonar la
escritura y visualizar el texto.
Seleccionar texto
1. Activar la herramienta de texto y hacer clic sobre el texto para que se muestre el
cursor y el marco de texto.
2. Situar el cursor en un extremo del texto y arrastrar para seleccionarlo. Si se trata de
una palabra podemos hacer doble clic sobre la misma.
29
Lic. Hctor Vidaln Jorge
desplegable
30
Lic. Hctor Vidaln Jorge
Cuando se activa la herramienta Texto, y hemos elegido modo de texto clsico, la parte
superior del panel Propiedades ofrece las opciones:
- Texto esttico
- Texto dinmico
- Introduccin de texto
El texto dinmico es un tipo de texto que se puede actualizar de forma dinmica en funcin de
determinadas acciones y condiciones. Este tipo de texto resulta tiil para mostrar valores de
bolsa, eventos deportivos, etc.. No se escribe texto en la escena, sino que se indica el lugar en
el que sencuentra el texto para que al reproducir la pelcula aparezca, esto facilita la edicin
para cambiar el texto al no tener que actuar directamente en Flash, sino que hay que cambiar
el archivo de texto en el lugar donde se encuentre.
El texto TLF dispone de ms estilos de caracteres entre los que se incluyen interlineado,
ligaduras, color de resaltado, subrayado, tachado,caja de dgitos, etc..
El texto, al igual que ocurre en aplicaciones de maquetacin como Adobe InDesign, se puede
extender en varios conteneedores de texto, tambin llamado texto enlazado o vinculado.
Compatbilidad para texto bidireccional, donde el texto de derecha a izquierda puede contener
elementos de texto de izquierda a derecha.
31
Lic. Hctor Vidaln Jorge
Podemos vincular texto horizonatl a una URL para permitir que los usuarios puedan enlazar
con otros sitios o archivos haciendo clic en el texto.
Dos mtodos:
Una vez realizado uno de los dos pasos, en el panel Propiedades y dentro de la seccion
Opciones si se trata de texto Clsico o bien en la seccin Carcter avanzado si se trata de
texto TLF, introducir en la casilla vnculo la URL a la que deseamos vincular el bloque de texto.
32
Lic. Hctor Vidaln Jorge
En Flash es preciso seleccionar,casi siempre, los objetos a los cuales se les desea aplicar alguna
modificacin.La herramienta para la seleccin de objetos es y dependiendo del tipo de
seleccin que deseemos conseguir, habr que utilizar la herramienta de un modo u otro.
Seleccionar lneas
Utlizar la herramienta Seleccin , haciendo clic sobre un lugar del trazo para selecccionar
el egmento que corresponda.
Mantener la tecla Mayscula pulsada y hacer clic en cada segmento que deseemos
seleccionar.
Con la herramienta Seleccin , arrastrar para enmarcar los segmentos de lnea que
queramos seleccionar. Utilizar esta tcnica para la mayora de objetos (rectngulos,
valos,etc..)
Seleccionar rellenos
Herramienta Lazo
33
Lic. Hctor Vidaln Jorge
Deseleccionar objetos
La herramienta Zoom
Para visualizar y editar los objetos con mayor precisin, pulsar la herramienta Zoom de la caja
de herramientas. Cada vez que vamos clicando va aumentando el tamao a visualizar.Tambin
se puede arrastrar para definir el rea a ampliar.
34
Lic. Hctor Vidaln Jorge
La herramienta Mano
Mover objetos
Para colocar una gua horizontal, arrastar del margen superior, hasta llevarlo a la escena en la
posicin deseada. Repetir este proceso arrastrando de la regla izquierda para ubicar los
objetos en sentido vertical. Podemos ubicar tantas guas como necesitemos.
1 Seleccionar objeto
1 Seleccionar objeto
35
Lic. Hctor Vidaln Jorge
1 Seleccionar objeto
Duplicar objetos
Dos mtodos:
Alineacin de objetos
Adems de las reglas y guas podemos alinear y distribuir objetos de forma automtica a travs
del panel Alinearmen Ventana>Alinear.
Con las opciones de Alinear podemos recolocar los objetos seleccionados para que se alineen
en funcin de sus bordes.
36
Lic. Hctor Vidaln Jorge
2. Utilizar los iconos para distribuir con referencia al eje horizontal o al eje
vertical
Permite modificar los tamaos de los objetos seleccionados para que se igualen entre s.
anchura del mayor, o bien ,si pulsamos el icono los objetos objetos se
ensancharn verticalmente para igualar la altura del mayor.
Los objetos seleccionados se distribuyen entre s para igualar sus espacios de separacin..
37
Lic. Hctor Vidaln Jorge
Se pueden aadir nuevos puntos de curva o esquina con objeto de insertar puntos de esquina
o puntos de curva.
37
Lic. Hctor Vidaln Jorge
Utilizar las opciones de rotar, inclinar, volteado horizontal o vertical, etc. , para cambiar el
aspecto y tamao de los objetos
Para crear nuevos colores, en cualquiera de las opciones a las que se accede a colorear en la
barra de herramientas o en el panel Color, hacer clic en el icono
- Elegir un color bsico haciendo clic en uno de los recuadros de colores bsicos
- Aumentar o disminuir el brillo mediante el cursor vertical deslizante
- Introducir los valores de Matiz, Saturacin y Luminosidad o bien los valores Rojo,
Verde y Azul
- Agregar el color a la lista de colores personalizados
Para crear y guardar conjuntos de colores y rellenos y poder abrirlos en otros documentos
diferentes, es preciso activar el panel Muestras de color.
38
Lic. Hctor Vidaln Jorge
Se muestran toda la gama de colores uniformes y rellenos por defecto. Desde este panel
Guaradr colores.- Permite guardar la paleta actual. Indicar la unidad, carpeta y nombre de
archivo para la paleta cuya extensin puede ser .clr (Juego de color, formato de flash) o bien,
.act (Tabla de color, ptimo para Photoshop o Fireworks).
Degradados
Estn formados por una transicin entre varios colores o niveles de gris. Esta transicin puede
realizarse a travs de un trayecto lineal o radial. Este efecto permite dotar a los objetos de
profundidad y aspecto de objetos reales, como por ejemplo tubos de nen, superificies
cilndicas, botones 3D, etc..
39
Lic. Hctor Vidaln Jorge
Crear degradados
Se muestra una barra horizontal que indica el degradado entre dos colores. Cada color est
sealado con un puntero. Arrastrar los punteros para variara el punto de comienzo y final de la
mezcla entre dos colores.
- Para aadir un nuevo puntero de color hacer clic debajo de la barra horizontal
estrecha del degradado. Se pueden aadir hasta 13 punteros ms
- Para cambiar el color de un puntero hacer clic sobre l y luego pulsar el
recuadro selector de color.
- Para eliminar un puntero, hacer clic sobre l y arrastrarlo hacia la parte inferior
del panel.
4. Pulsar en el icono Opciones para abrir el men del panel y seleccionar la opcin
Aadir muestra para aadir el nuevo degradado a la lista de degradados.
Para aplicar rellenos degradados se puede utilizar la herramienta Cubo de pintura y para
aplicar brochazos de degradado utilizar la herrramienta Pincel
40
Lic. Hctor Vidaln Jorge
Herramienta Borrador
Permite:
Permite:
- Borrar una lnea entera. Situar la gota del grifo y hacer clic en la lnea.
- Borrar directamente un relleno, para ello hacer clic en el rellleno
- Borrar todos los objetos de la escena, hacer doble clic sobre la herramienta Borrador
La creacin de grupos es muy til cuando queremos mantener juntos distintos objetos para
trabajar con ellos y con otros objetos de la escena.
41
Lic. Hctor Vidaln Jorge
Editar grupos
Para cambiar el color del grupo es preciso llevar a cabo los siguientes pasos:
herramientas
3. Cuando hayamos terminado de editar cada objeto podemos volver a la escena
Los objetos no agrupados que se dibujan en una misma capa se cortan unos a otros cuando se
superponen. Sim embargo los grupos y los smbolos de una misma capa van ocupando niveles
diferentes dentro de la misma capa de tal modo que los ltimos estn en niveles superiores a
los primeros.
42
Lic. Hctor Vidaln Jorge
Las capas en Flash al igual que en todas las aplicaciones que la utilizan, son como hojas
transparentes superpuestas que contienen distintos elementos, una vez combinadas todas la
hojas obtenemos el dibujo final que contiene a todos los elementos reunificados.la creacin de
capas permite entre otras acciones, trabajar con cada capa por independiete para poder
modificarla, sin alterar el contenido de otras capas.
La creacin de una pelcula de Flash incluye una capa inicial, todo lo que dibujamos en la
escena queda incluido en esa capa. Si creamos varias capas es como proyectar varias pelculas
de cine a la vez sobre la misma pantalla.
Cada capa pueda contener aquellos objetos que deseemos, pudiendo actuar sobre
cada capa por independiente sin afectar al resto de capas.
Activar o desactivar la visualizacin de la capa(s)
Organizar el trabajo colocando en cada capa una animacin, grfico, sonido o
elemento diferente.
Crear capas especiales de gua que permiten que los objetos sigan una trayectora.
Crear capas de mscara que muestran u ocultan objetos selectivamente.
El tamao del archivo no depende del nmero de capas definidas y se pueden crear tantas
capas como deseemos. El programa representa cada capa en una lnea horizontal en la
ventana de tiempo.
Crear capas
Por defecto al arrancar el programa aparece por defecto una capa llamada Capa 1. Para crear
una nueva capa, en la parte inferior de la ventana de la lnea de tiempo pulsar el icono Nueva
capa o bien Insertar>Lnea de tiempo>Capa.
La nueva capa se llamar Capa 2 y as sucesivamente con cada nueva capa. Si eliminamos
capas con el botn de la papelera , el n de orden se ir incrementando secuencialmente.
Para renombrar las capas, hacer doble clic en la capa y editar el nombre
43
Lic. Hctor Vidaln Jorge
Las nuevas capas que vayamos creando se irn colocando de abajo a arriba en
la ventana de capas, de tal manera que la capa cuyo nombre aparezca por
encima de otros nombres de capas quedar ms cerca del usuario y al revs. La nueva capa se
sita siempre por encima de la capa que estuviera activa.
Para seleccionar varias capas a la vez, hacer clic en una capa y posteriormente manteniendo
pulsada la tecla Mayscula hacer clic en otra capa para seleccionar el rango.
Si queremos capas alternas, pulsar la tecla Ctrl y hacer clic en las capas deseadas.
Para activar o desactivar la visualizacin de las capas sin riesgo de confusin con otros objetos,
pulsar en el punto de la capa a ocultar, debajo del indicador
se mostrar el smbolo
Para bloquear y desbloquear capas con objeto de que los objetos que contengan en la escena
no puedan ser seleccionados ni editados., hacer clic sobre el punto de la columna
Para cambiar el orden de las capas y que stas se muestren por encima o debajo de otras
capas, es preciso arrastrar cada capa y arrastrar hacia arriba o hacia abajo.. Podemos copiar el
objeto(s) de una capa y utilizar las herramientas del men Edicin>Copiar, Cortar y Pegar
para situarlas en otra capa distinta.
44
Lic. Hctor Vidaln Jorge
El nombre de la capa
Activar o desactivar su visualizacin
Indicar el tipo de capa
La creacin de carpetas permite agrupar y ordenar las capas. Es similar a la estructura en rbol
de las carpetas de windows.
Pulsar en el icono o bien hacer clic con el botn derecho sobre una capa y elegir Insertar
carpeta. Editar un nombre para la capa
Para mover capas de una carpeta a otra, arrastrar de ls carpeta deseada a la nueva carpeta.
Pasos:
1. Seleccionar los elementos con de una capa que queremos distribuir en capas
individuales
2. Men Modificar>Lnea de tiempo>Distribuir en capas
Esta utilidad es muy prctica para crear animaciones de letras de texto. Si queremoes ubicar
las letras de un texto en capas independientes:
Nota: Si queremos cambiarle el color a cada letra de cada capa, selccionar la letra y en el
Panel Propiedades cambiar el color y el tipo de letra si fuese preciso
45
Lic. Hctor Vidaln Jorge
Las capas de gua (tema 10) se utilizan para dibujar una o varias lneas que se
encargan de enmarcar la trayectoria de una animacin. De esta manera podemos trazar a mano
alzada una recta o curva y posteriormente que el objeto se mueva siguiendo el camino de la
curva o recta.
Se trata de un tipo de interpolacin de movimiento pero en lugar de seguir una lnea recta
realiza el trayecto de un trazo dibujado.
Las capas de mscara permiten mostrar u ocultar elementos que se encuentran en capas
ubicadas por detrs de la capa de mscara.
El procedimiento a seguir:
Prctica de ejemplo
46
Lic. Hctor Vidaln Jorge
La capa de mscara slo afecta a las capas vinculadas. Si despus de crear una capa de mscara
seleccionamos la capa vinculada y aadimos nuevas capas normales pulsando , stas irn
por debajo de la capa de mscara que tienen por encima. Todo lo que dibujemos en esas capas
vinculadas ser susceptible de verse a travs de los agujeros que creemos en la
capa de mscara.
47
Lic. Hctor Vidaln Jorge
F6
CREACIN DE UNA PELCULA MANUALMENTE
3.- Pulsar la tecla F6 en cada fotograma para insertar distintos objetos o bien arrastrar un
objeto a una ubicacin distinta e ir pulsando F6.
INTERPOLACIN CLSICA
Ejemplo_2.- Cambiar la direccin del objeto antes de que llegue al ltimo fotograma.
Pasos:
Pasos:
48
Lic. Hctor Vidaln Jorge
Pasos:
1.- Seleccionar el fotograma intermedio y pulsar con el botn derecho sobre el objeto
Transformacin libre.
INTERPOLACIN DE MOVIMIENTO
2.- Insertar una instancia del objeto en la escena y seleccionarlo con el botn derechoCrear
interpolacin de movimiento. Automticamente en la lnea de tiempo se crean fotogramas.
Para cambiar la trayectoria arrastrar de los nodos a otra posicin. Podemos insertar adems
nuevas trayectorias en el recorrido original, basta con pulsar F6 en algn fotograma
intermedio y posteriormente arrastrar el objeto y cambiarle el color.
49
Lic. Hctor Vidaln Jorge
INTERPOLACIN DE FORMA
2.- Seleccionar un fotograma (por ejemplo el n 50) y pulsar F6 para crear un fotograma clave.
3.- En el fotograma clave (el n 50) seleccionar el objeto y borrarlo (tecla Supr)
4.- Activar la herramienta Texto (o cualquier otro objeto como rectngulo, valo,etc..en el
que queramos convertir)y escribir un texto.
6.- Con el texto seleccionado, ejecutar men Modificar>Separar o CONTROL + B, con objeto de
desagrupar el texto que por defecto siempre se muestra agrupado.
7.- Seleccionar el primer fotograma, hacer clic sobre l y con el botn derecho Crear
interpolacin de forma
50
Lic. Hctor Vidaln Jorge
Pasos:
-Seleccionar la capa actual (la del objeto) y con el botn derecho del ratn Aadir
gua de movimiento clsica, se mostrar:
4.- En la nueva capa con la herramienta lpiz o bien mediante trazos rectilneos, dibujar
un trayecto en la escena
5.- Definir la longitud del fotograma, para ello, ir al fotograma deseado (p.e. el n 50) de la
capa gua y arrastrar hacia abajo seleccionando a la vez los fotogramas de la capa gua y la
capa objeto y pulsar F6 para crear sendos fotogramas clave.
51
Lic. Hctor Vidaln Jorge
7.- Hacer clic con el botn derecho del ratn en el primer fotograma de
la capa objeto y seleccionar Crear interpolacin clsica
Nota: Si queremos que el objeto texto siga una trayectoria rectilnea, por ejemplo:
Pasos:
1.- Dibujar un objeto (situarlo en el centro aprox. de la escena) y crear las rectas con la
herramienta pluma .
52
Lic. Hctor Vidaln Jorge
53
Lic. Hctor Vidaln Jorge
Los formatos de mapa de bits ms extendidos son: BMP, GIF y JPEG. Cuando importamos una
imagen de mapa de bits mediante el men Archivo>Importar>Importar a escenario, indicar la
unidad, carpeta y archivo que contiene la imagen.
3.- Una vez efectuada la seleccin, podemos utilizar la herramienta de Cubo de pintura
para cambiar el color de la zona seleccionada, quedando convertida a objeto vectorial editable.
Cuando tengamos una parte del bitmap seleccionado, se puede eliminar el mismo utilizando la
techa de SUPR.
Si hemos creado una secuencia de imgenes con una cmara fotogrfica y queremos
colocarlas cada una de ellas en un fotograma diferente de una pelcula, podemos elegir la
pcin Achivo>Importar>Importa a escenario .
Para que se pueda llevar a cabo esta accin es preciso que los nombres de archivo de la
imgenes sean iguales pero terminando en un nmero secuencial.
Al importar un archivo de esta secuencia, se abrir un cuadro de dilogo que nos pedir
confirmacin para importar toda la secuencia o slo la imagen.
54
Lic. Hctor Vidaln Jorge
Para convertir los bitmaps a grficos vectoriales y de este modo el espacio del archivo sea
menor y su descarga en un navegador ms rpida:
Con esta operacin, adems de conseguir una imagen idntica con un tamao ms pequeo,
conseguiremos una imagen cuyos elementos pueden seleccionarse por separado, pudiendo
editarse individualmente.
3.- Al seleccionar una capa podemos determinar cmo debe importarse la capa seleccionada.
Dependiendo del tipo de contenido (capa de imagen, de texto, etc..) , modificar los parmetros
necesarios.
55
Lic. Hctor Vidaln Jorge
3.- Una vez activado el relleno en mapa de bits, cualquier objeto cerrado que dibujemos en la
escena mediante las herramientas vlao, Rectngulo, etc.. se completarn con este relleno.
4.- Para cambiar el relleno basta con acceder al panel Color y cambiar el tipo de relleno por
otro existente o pulsar el botn Importar para seleccionar otro bitmap.
56
Lic. Hctor Vidaln Jorge
Importar vdeo
Para poder importar un vdeo en Flash ste debe estar codificado en formato
Flas vdeo (FLV). Si el archivo tuviese otro formato sera necesario previamente convertirlo
utilizando una aplicacin como Adobe Media Encoder o software gratuito que podemos
encontrar en la red como Total vdeo Converter, o Flash vdeo Converter , entre otros.
3.- El GIF animado se mostrar en la lnea de tiempo como una animacin fotograma a
fotograma (se visualizan los fotogramas clave).
57
Lic. Hctor Vidaln Jorge
Introduccin
El procedimiento que utiliza Flash para las animaciones se basa en las pelculas de cine., es
decir, una sucesin de fotogramas en los que se muestra una imagen ligeramente diferente de
la anterior. Mientras se filma una pelcula la cmara va realizando fotografas a una velocidad
determinada (p. ejemplo 24 fotogramas por segundo).
Flash utiliza una lnea de tiempo en la que aparecen los fotogramas de la pelcula y cada
fotograma puede contener lo que deseemos. Al poner en marcha la reproduccin de la
pelcula, la pantalla mostrar uno tras otro el contenido de cada fotograma a la velocidad
especificada.
Organiza y controla el contenido de una pelcula a travs del tiempo. Esta organizacin se
realiza a base de capas y de fotogramas. Un puntero que corre por la parte superior de la
lnea de tiempo es el encargado de indicar en todo momento en qu fotograma de la pelcula
se encuentra la reproduccin.
Si arrastramos el puntero con el ratn, se puede reproducir la pelcula hacia delante o hacia
atrs de forma manual. Cada capa dispone de su propia lnea de tiempo con sus propios
fotogramas, sin embargo, durante la reproduccin de la pelcula, los fotogramas de cada capa
se reproducen a la vez.
Para cambiar el tamao de los fotogramas y visualizarlos con claridad, pulsar en el icono
Opciones (borde superior derecho de la ventana lnea de tiempo) y elegir un tamao.
Para visualizar el contenido real de los fotogramas clave en lugar de las miniaturas, pulsar el
icono Opciones y activar la Vista previa.
58
Lic. Hctor Vidaln Jorge
Tipos de fotogramas
Fotograma clave
En otros tipos de animacin slo aparecen dos fotogramas clave: el primero y el ltimo. Son las
animaciones realizadas por interpolacin, se indica cul es el fotograma primero y el ltimo y
el programa calcula automticamente los fotogramas intermedios. En este tipo de
animaciones se pueden insertar posteriormente fotogramas clave en medio de uno de esos
dos tipos de animacin.
Los fotogramas clave que tienen algn contenido, aparecen representados en la lnea de
tiempo con un crculo negro en su interior.
59
Lic. Hctor Vidaln Jorge
Cada vez que se crea un documento nuevo, se muestra con una sola capa y el primer
fotograma definido como fotograma clave vaco y listo para albergar objetos. Se visualiza como
un crculo hueco.
Fotograma intermedio
Son aquellos que se encuentran entre dos fotogramas clave. Son fotogramas que contienen
algn objeto pero que no son fotogramas clave. Son los que se muestran en las interpolaciones
de forma y de movimiento. Para crear un fotograma intermedio en la lnea de tiempo, hacer
clic en ala posicin deseada y pulsar F5
Para crear un fotograma clave vaco, hacer clic sobre la lnea de tiempo en la posicin deseada
y elegir men Insertar>Lnea de tiempo>Fotograma clave vaco
Intercalacin de fotogramas
Dependiendo del tipo de fotograma que se intercale y del tipo de animacin de que se trate, el
efecto obtenido ser uno u otro.
60
Lic. Hctor Vidaln Jorge
Seleccionar fotogramas
Para cortar fotogramas, seleccionarlos y con el botn derecho del ratn Cortar fotogramas
Para copiar fotogramas, seleccionarlos y con el botn derecho del ratn Copiar fotogramas
Para pegar fotogramas seleccionar el lugar de la lnea del tiempo en donde deseamos pegarlos
(previamente tendremos que copiar o cortar fotogramas).
Borrar fotogramas implica que los fotogramas que se encuentren seleccionados desaparecern
dejando en su lugar fotogramas vacos, pero no se producir ningn desplazamiento de
fotogramas.
Arrastrar los fotogramas clave final y/o inicial. Par ello llevar el cursor del ratn sobre el
fotograma y cuando se muestra una doble flecha de izquierda a derecha, arrastrar en una
u otra direccin.
Si arrastramos del fotograma final hacia la derecha se crean tantos fotogramas intermedios
como lugares creados y se prolongar la pelcula. Si arrastramos hacia la izquierda se acortar
61
Lic. Hctor Vidaln Jorge
Invertir fotogramas
Esta opcin es muy til cuando se ha creado una interpolacin de movimiento en la que un
objeto se desplaza de izquierda a derecha y queremos que al llegar a la derecha contine el
movimiento hacia la izquierda hasta llegar al punto de partida.
Pasos:
3.- Seleccionar el fotograma siguiente a donde acaba la interpolacin y pegar los fotogramas
copiados (Pegar fotogramas del men contextual).
4.- Seleccionar los fotogramas pegados e invertirlos de sentido con la opcin Invertir
fotogramas clave del men contextual.
62
Lic. Hctor Vidaln Jorge
Fotograma a fotograma
Por interpolacin
En la animacin por interpolacin se parte de ,los fotogramas clave inicial y final y el programa
crea los fotogramas intermedios automticamente . Este tipo de animacin es muy apropiada
para la simulacin de cambios complejos entre el contenido de los fotogramas, sin embargo ,
los fotogramas clave ocupan bastante espacio en el archivo final.
1.- Se necesita crear un fotograma clave (F6)y dibujar en su interior la posicin de partida del
objeto a animar.
2.- Seguidamente hay que crear otro fotograma clave (F6)y modificar el contenido del
fotograma inicial para este segundo fotograma.
3.- De nuevo hay que crear el tercer fotograma clave (F6)y, modificar el contenido del
anterior y as sucesivamente con cada nuevo fotograma hasta finalizar la animacin.
Reproduccin de la pelcula
63
Lic. Hctor Vidaln Jorge
La velocidad de reproduccin es nica para todas las capas, sin embargo es posible acelerar o
disminuir la velocidad de cualquier parte de la animacin variando el nmero de fotogramas
empleados para definir la accin.
Los Gifs animados estn muy relacionados con las animaciones fotograma a fotograma ya que
presentan su misma estructura. Al importar un gif animado mediante la orden
Achivo>Importar>Importa a escenario o bien Archivo>Importar>Importar a biblioteca, podemos
editar cada fotograma ya que son una sucesin de imgenes bitmap pero previamente
tendremos que utilizar la opcin del men Modificar>Mapa de bits>Trazar mapa de bits.
Otro modo de editar los bitmaps de los fotogramas de un GIF animado una vez vectorizado es,
Nota: Si vamos a crear animaciones para web es preferible exportarlas con formato SWF sin
que afecte a la velocidad de la carga.
El uso del papel cebolla nos va a permitir ver simultneamente en la pantalla el contenido de
varios fotogramas a la vez. Podremos saber rpidamente la posicin relativa que ocupan los
objetos que contienen los fotogramas en cada momento y situarlos con mayor precisin.
Los controles para activar las funciones del papel cebolla se muestran en la parte inferior de la
lnea del tiempo y son:
64
Lic. Hctor Vidaln Jorge
Activa el papel cebolla en modo normal y muestra los fotogramas clave que se
encuentren comprendidos entre los marcadores de la lnea del tiempo. Arrastrar los
marcadores en la lnea del tiempo para visualizar todo el proceso de animacin.
Activa el papel cebolla en modo contornos, es igual que el modo normal pero solo se
visualizarn el contorno de los objetos
65
Lic. Hctor Vidaln Jorge
De forma
De movimiento (clsica o de nuevo tipo)
En ambos casos se crean los fotogramas inicial y final y la aplicacin calcula automticamente
los fotogramas intermedios, aunque tienen diferentes particularidades en funcin del
resultado final que se persiga.
La animacin por interpolacin de forma nos permite crear animaciones en las que unos
objetos se transforman gradualmente en otros (morphing). Los objetos inicial y final son
diferentes y el primero se convertir en el segundo a lo largo de una serie de fotogramas. Este
tipo de animacin no es posible en la interpolacin de movimiento en la que solo podremos
moverlo, cambiar el tamao, color, etc.. pero no convertirlo en otro objeto diferente.
La interpolacin de forma slo es posible a partir de objetos editables, es decir que no estn
agrupados ni sean smbolos. Si hemos importado un objeto tenemos que separarlo o
desagruparlo.
Para crear una interpolacin de forma se necesitan dos fotogramas clave que contengan el
objeto inicial y el final. Los fotogramas intermedios entre ambos fotogramas clave se
rellenarn automticamente cuando se establezca la interpolacin de forma, para ello:
1.- Insertar un objeto en la escena (si estuviese agrupado, desagruparlo con men
Modificacin>Separar).
3.- Con el fotograma seleccionado, cambiar el color, tamao o simplemente eliminar el objeto
e insertar otro distinto o bien un texto
4.- Seleccionar el primer fotograma y con el botn derecho del ratn Crear interpolacin de
forma
1.- Insertar un objeto en la escena (si estuviese agrupado, desagruparlo con men
Modificacin>Separar).
3.- Con el fotograma seleccionado, cambiar el color, tamao o simplemente eliminar el objeto
e insertar otro distinto o bien un texto e insertar otro distinto en otra posicin de la escena.
4.- Seleccionar el primer fotograma y con el botn derecho del ratn Crear interpolacin de
forma
66
Lic. Hctor Vidaln Jorge
Ejemplo_1
Ejemplo_2
67
Lic. Hctor Vidaln Jorge
Pasos:
1. Dibujar el objeto del primer fotograma (si fuese un texto, separarlo Control+ B) y
posteriormente con el botn derecho del ratn, en este mismo fotograma, seleccionar
Crear interpolacin de forma).
2. Seleccionar un determinado fotograma y pulsar F6, con este fotograma seleccionado,
cambiar el objeto por otro distinto o alterar su apariencia.
3. Pulsar CONTROL + INTRO para comprobar
Nota: Podemos modificar el objeto del fotograma inicial y final por otros objetos una vez
realizada la interpolacin. Para ello bastar con seleccionar cada objeto y cambiarlo, la
interpolacin se reajusta automticamente.
Angular: mantiene las esquinas y los lados rectos a medida que se van sucediendo los
fotogramas intermedios.
Para alternar entre uno u otro, seleccionar el primer fotograma y en el panel de Propiedades,
en el apartado Interpolacin activar Distributiva o Angular para comprobar el efecto.
Pasos:
68
Lic. Hctor Vidaln Jorge
1.- Aadir una nueva capa, pulsando en el icono Nueva capa del panel lnea de tiempo.
2.- Seleccionar el primer fotograma de la nueva capa e insertar un objeto o bien un texto(en
ese caso separarlo con CONTROL + B, 2 clic)
3.- Con el botn derecho del ratn activar Crear interpolacin de forma
Variaciones en la interpolacin
1.- Dibujar un rectngulo vertical sin contorno para simular una puerta vista de frente y con la
2.- Seleccionar el primer fotograma y con el botn derecho del ratn crear interpolacin de
forma.
3.- Seleccionar otro fotograma y pulsar F6 y dejar seleccionado ese fotograma. Activar el men
ver>Reglas y arrastrar desde el lado izquierdo de la regla una gua para colocarla en el eje
sobre el que va a pivotar.
Tomando esta prctica como ejemplo, vamos a crear un efecto de puerta abrindose y
cerrando
69
Lic. Hctor Vidaln Jorge
2.- Pulsar las teclas Mayscula+Ctrl+H, tres veces, para crear tres consejos de forma. Arrastrar
el consejo d al vrtice inferior derecho, el c al vrtice superior derecho y el b al vrtice inferior
izquierdo.
3.- Una vez definidos los puntos de control del primer rectngulo, realizaremos lo
correspondiente con el otro rectngulo de tal manera que produzca el efecto de puerta.
4.- Seleccionar el ltimo fotograma y arrastrar el consejo de forma a sobre el vrtice superior
derecho, el b sobre el vrtice inferior derecho, el c sobre el vrtice superior izquierdo y el d
sobre el vrtice inferior derecho.
Prctica_2
Vamos a realizar un ejercicio en el que tres textos se convertirn en el supuesto logo de una
empresa. Para ello crearemos unos textos que acabarn convirtindose en un logo mediante
una interpolacin de forma
1. Crear un documento nuevo y con la herramienta Texto en modo clsico o TLF, introducir los
textos Eficacia, Calidad y Servicio, cada uno con un color diferente.
2. Situarlos ligeramente desplazados el uno del otro
3. Seleccionar los tres textos a la vez y pulsar la opcin ModificarSeparar (Ctrl + B)
dos veces para convertir el texto en grficos o de lo contrario no se producir la interpolacin
de forma.
4. Seleccionar el primer fotograma.
5. Elegir la opcin Crear interpolacin de forma.
6. Seleccione el fotograma 20 y pulsar F6 para acabar de definir la interpolacin.
70
Lic. Hctor Vidaln Jorge
La interpolacin de movimiento crea animaciones en las que los objetos se pueden desplazar
recorriendo determinados trazados en la escena. La interpolacin de movimiento slo es
aplicable a los objetos agrupados o a los smbolos (F8).
En cualquier caso, si seleccionamos varios objetos a la vez y creamos una interpolacin con
ellos, los objetos pasarn a ser un nico objeto aunque no se hayan agrupado. Con este tipo de
interpolacin es posible provocar variaciones en la curva de velocidad. El objeto inicial y final
han de ser el mismo.
En la siguiente tabla se indican los tipos de acciones que se pueden realizar con cada tipo de
interpolacin.
Necesitamos dos fotogramas clave que contengan el objeto inicial y el final. Los fotogramas
intermedios que haya entre ambos fotogramas clave se rellenarn automticamente cuando
se establezca la interpolacin de movimiento.
Pasos:
En una interpolacin clsica (al igual que la interpolacin de forma) es posible sustituir
fotogramas intermedios (no editables) por fotogramas clave que se pueden editar, para ello, si
tenemos creada ya una interpolacin clsica:
1.-Seleccionar el fotograma que queremos convertir en clave haciendo clic y pulsar F6.
Arrastrar el objeto a otra posicin, cambiar color, tamao, etc..
2.- Repetir el paso -1- tantas veces como deseemos para insertar nuevos fotogramas clave.
71
Lic. Hctor Vidaln Jorge
Prctica_1. Pelota
Para cambiar el color, brillo y transparencia de los objetos en una interpolacin clsica:
Cambiar color:
72
Lic. Hctor Vidaln Jorge
Cambio de velocidad
Podemos crear efectos de velocidad para que el movimiento comience a velocidad normal y se
acelere al llegar al final o viceversa.
Prctica_2 Rotaciones
1.- Crear en un documento nuevo un objeto en el lado izquierdo y agruparlo con Control + G
3.- En otro fotograma, pulsar F6 y arrastrar el objeto a otra posicin, para comprobar Control
+ Intro
Rotacin
Rotacin 2
73
Lic. Hctor Vidaln Jorge
Inversin de fotogramas
Nota: Podemos crear en otra capa y con otro objeto otra interpolacin clsica igual que en
la interpolacin de forma, para ello, en una nueva capa, repetir los pasos de la
prctica_2 y los pasos de la inversin de fotogramas.
Si queremos que los objetos realicen movimientos con trayectorias curvas en lugar de lneas
rectas por defecto, es preciso crear una capa que se denomina capa de gua de movimiento.
74
Lic. Hctor Vidaln Jorge
Se pueden crear distintas interpolaciones independientes, cada una en su capa, y que controle
el movimiento de cada una mediante una capa de gua asociada. Para ello:
Crear una nueva capa y repetir los pasos del -1- al -6-
Se trata de orientar el objeto en funcin de la direccin que tome el trazado. En estos casos
basta con seleccionar el primer fotograma de la capa objeto y en el panel Propiedades activar
la casilla Orientar segn trazado.
La interpolacin de movimiento
En las interpolaciones clsicas podamos utilizar directamente grficos, botones, etc.. sin
necesidad de convertirlos a smbolos. Para trabajar con las nuevas interpolaciones de
movimiento debemos utilizar smbolos o campos de texto. Si intentamos crear una
interpolacin partiendo de un objeto que no sea un smbolo, el programa mostrar un mensaje
de advertencia, que nos permitir convertirlo directamente en un smbolo de clip de pelcula.
75
Lic. Hctor Vidaln Jorge
En esta ilustracin se han creado dos interpolaciones en dos capas, la imagen del cuadrado en
la que se visualiza la trayectoria (editable), es una interpolacin de movimiento. La imagen del
crculo, se trata de una interpolacin clsica.
76
Lic. Hctor Vidaln Jorge
Slo las interpolaciones de movimiento se pueden emplear para animar objetos 3D.
pero no con la interpolacin clsica.
Si hay varios objetos en una capa y se aplica una interpolacin de movimiento a uno de
ellos, Flash reorganiza y/o crea capas para que el elemento interpolado quede como
nico elemento en la capa interpolada, creando otra capa para albergar el resto de
elementos.
1. Insertar un objeto (por ejemplo una estrella de 5 lados) y convertirlo a smbolo de clip
de pelcula con F8
2. Situar el objeto en la parte inferior derecha de la escena
3. Hacer clic en el primer fotograma con el botn derecho del ratn y seleccionar Crear
interpolacin de movimiento.
4. Con el ltimo fotograma seleccionado (n 24 por defecto), arrastrar el objeto hasta la
posicin deseada y pulsar Control + Intro para comprobar
Una vez creada la interpolacin, se puede cambiar de posicin el objeto, basta con arrastrarlo
a otra posicin. Cada vez que cambiemos de posicin el objeto, el trayecto se redibujar.
Rotar el trayecto
77
Lic. Hctor Vidaln Jorge
Editar el trayecto
1. Activar la herramienta Seleccin y hacer clic en cualquier lugar fuera del trayecto
para que no est seleccionado.
2. Arrastrar de los nodos excepto de los extremos y curvar el trayecto
Podemos editar con la herramienta Subseleccin , bastar con arrastrar de los tiradores
de los nodos.
Otra manera de editar trayectos consiste en cambiar la situacin del objeto en diferentes
fotogramas, para ello, pulsar F6 para crear un fotograma clave y, posteriormente, con ese
fotograma seleccionado, arrastrar de los nodos.
Eliminar un trayecto
78
Lic. Hctor Vidaln Jorge
Casi todas las animaciones de Flash se ejecutan de forma automtica y secuencial, esto quiere
decir, desde el principio hasta el final.. la aplicacin de Flash permite aadir a la pelcula acciones
que nos facilitarn, entre otras, saltar automticamente a otros fotogramas o escenas, utilizar
el teclado o ratn para ejecutar esas acciones y dotar de interactividad a la pelcula.
Las acciones n fotograma a otro, pasar de una escena a otra, detener la reproduccin, etc.. Todas
estas son rdenes que Flash ejecuta cuando el cabezal de reproduccin llega a ellas. Las acciones
pueden ser variadas, tales como ir de u acciones estn escritas en un lenguaje de programacin
conocido como ActionScript.
Para trabajar con las acciones es preciso definir previamente el documento bien en ActionScript
2.0 o ActionScript 3.0. Para ello men Archivo>Nuevo e indicar la versin (seleccionar
ActionScript 2.0). Si hemos creado un documento nuevo para una determinada versin de
ActionScript, no es posible cambiar a una versin diferente.
Las acciones se ubican en los fotogramas clave y en los objetos, que pueden ser: botones o
instancias de clips de pelcula. Consideraciones generales:
79
Lic. Hctor Vidaln Jorge
El marco inferior de la derecha que se encuentra vaco muestra las acciones que vayamos
seleccionando y programando.
Slo se muestra en el modo Asistente y es la zona donde se insertan los parmetros que
queremos introducir en funcin del tipo de accin que elijamos.
80
Lic. Hctor Vidaln Jorge
El icono nos da acceso a las opciones relacionadas con el uso del panel de acciones
Con asistente
Sin asistente
localizar la accin deseada. Tambin podemos pulsar en el icono para mostrar los
doce grupos de acciones.
3. Una vez localizada la accin, hacer doble clic sobre ella y en la zona de parmetros
aparecer la expresin script correspondiente a la accin solicitada.
4. En la parte superior derecha tenemos que cumplimentar los campos necesarios para
que la accin se ejecute correctamente. Al final de la edicin de la accin, el recuadro
de la derecha mostrar una expresin determinada que ser la que el intrprete de
Script ejecutar y dar como resultado la accin programada.
Si hay varias escenas definidas (men Insertar>Escena) Flash va saltando de una a otra de forma
ordenada cada vez que el cabezal de lectura llega al ltimo fotograma de cada escena. Podemos
hacer que cuando el cabezal llegue a un determinado fotograma, la reproduccin salte a otro
fotograma o a otra escena. Una vez realizado el salto, tambin podremos decidir si debe
continuar la reproduccin o no.
81
Lic. Hctor Vidaln Jorge
En el modo de programacin sin asistente las acciones del salto a fotogramas o escenas son
gotoAndPlay y gotoAnd Stop
Con objeto de evitar asignar acciones en distintas capas al mismo fotograma, es preferible
crear una capa dedicada exclusivamente a colocar las acciones. As sabremos dnde estn las
acciones en lnea de tiempo y evitar asignar accidentalmente acciones a dos fotogramas
distintos en el mismo punto de la lnea tiempo.
Creando una capa para las acciones y ubicando en ella un fotograma clave en la posicin de la
lnea de tiempo que deseemos, podemos actuar en fotogramas intermedios, ya que la accin
se ejecutar al llegar el cabezal reproductor al fotograma clave que la contiene
independientemente de lo que est sucediendo en la capa que contiene la interpolacin.
82
Lic. Hctor Vidaln Jorge
Otra de las utilidades de esta accin consiste en colocarla en el primer fotograma de una
pelcula. De este modo la pelcula no se reproducir automticamente y ser necesario pulsar
un botn para que se desencadene la reproduccin.
Flash dispone de la accin getURL que nos permite llamar a una pgina Web y a una pelcula
Flash en formato .SWF.
Podemos incluir esta accin para que se ejecute cuando llegue a l el cabezal, o en un botn
para que se ejecute
En ventana , seleccionar _self para que se muestre en la misma ventana, _blank en una nueva
ventana, _parent y _top
83
Lic. Hctor Vidaln Jorge
Fotograma Reposo.- Contiene el aspecto grfico del botn cuando no est pulsado ni
tiene el cursor del ratn encima.
Fotograma Sobre.- Contiene el aspecto grfico del botn cuando el cursor del ratn
est encima de l.
Fotograma Presionado.- Contiene el aspecto grfico del botn cuando se hace clic
sobre l con el ratn.
Fotograma Activa es la zona que ser sensible a los clics del ratn o al paso de ste por
encima.
Para crear un botn, seleccionar men Insertar>Nuevo smbolo, asignar un nombre y en Tipo,
elegir Botn.
1. Por defecto se muestra el fotograma reposo seleccionado, con ese fotograma activado
dibujar el aspecto del botn que deseemos.
Es importante que la imagen quede centrada en la cruz que aparece en la zona de trabajo para
que sirva de referencia en la ubicacin de dibujos para los otros tres estados.
2. Una vez creado el aspecto del botn para el primer fotograma, debemos crear el
segundo fotograma, para ello pulsar F6 y convertirlo en fotograma clave. A partir de
ese momento, dibujar el nuevo aspecto para ese estado. Repetir este paso para cada
nuevo estado del botn.
Consideraciones generales:
- Podemos llevar a la escena tantas instancias del botn que deseemos y situarlas en
cualquier sitio.
- Se pueden escalar y rotar cada instancia del botn de forma individual.
- Una vez los botones estn en la escena, se podrn seleccionar individualmente y
asignarles a cada uno las acciones que deseemos.
84
Lic. Hctor Vidaln Jorge
Adems de considerar a crculos o rectngulos como las reas por defecto que constituyen los
botones, podemos necesitar insertar un elemento dentro esos objetos como por ejemplo un
texto en el cual clicaremos y que cambia de aspecto en cada fotograma.
La zona activa nos va a permitir definir con total precisin la parte activa del botn. Para
definir la zona activa:
Para incluir acciones en una instancia de un botn de la escena hay que seleccionarlo y abrir el
panel Acciones para incluir las acciones deseadas.
Adems de decirle a cada botn la accin a ejecutar, hay que decirle a Flash en qu situacin
debe ejecutarse la accin.
1. Seleccionar el botn
2. En el panel Acciones abrir el subgrupo Funciones globales>Control de clip de pelcula
y hacer doble clic en on
3. Si estamos en modo asistente se mostrarn los parmetros correspondientes mientras
que, si estamos en modo sin asistente, aparecer una lista con las sugerencias de cdigo
que podemos aplicar a esta accin. Seleccionar el evento deseado:
85
Lic. Hctor Vidaln Jorge
Flash incorpora por defecto una serie de sonidos que se encuentran en el men
Ventana>Bibliotecas comunes>Sonidos de la cual se pueden extraer e incorporar a las capas
de nuestra animacin.
Flash coloca los sonidos en los fotogramas clave, incluyendo los fotogramas de los botones.
Para ubicar un sonido en un fotograma clave, basta con seleccionar dicho fotograma y
arrastrar desde la biblioteca a la escena el sonido deseado.
Lo correcto es crear una capa independiente para cada uno de los sonidos, as la manipulacin
de la pelcula resulta ms cmoda. Para crear capas destinadas a albergar los sonidos, actuar del
mismo modo que para crear capas normales.
Cuando se aade un sonido a un fotograma clave, la forma de onda aparece en ese fotograma, y
si hay ms fotogramas creados, contina repartindose por los fotogramas siguientes hasta que
se termina el sonido.
86
Lic. Hctor Vidaln Jorge
1. Hacer doble clic sobre el botn en la escena o en la biblioteca para entrar en el modo
edicin del botn.
2. Seleccionar en el que deseamos incluir el sonido y arrastrar el sonido a la escena desde la
biblioteca.
Podemos aadir sonidos a uno o varios fotogramas del botn, fundamentalmente en los
fotogramas Presionado o Sobre.
Los formatos de vdeo que podemos aplicar son .FLV y F4V.Cuando importamos un vdeo, ste
debe estar en formato .FLV o H.264 o MPEG-4. Si el vdeo no est en alguno de estos formatos,
debemos pulsar en el botn Adobe Media Encoder para iniciar la aplicacin Adobe Media
Encoder que nos permite convertir cualquier formato de vdeo a vdeo Flash.
87
Lic. Hctor Vidaln Jorge
Podemos crear contenido Flash para pginas Web que permitirn comenzar a ver un vdeo en
tiempo real tan pronto se haya descargado el primer segmento, con lo cual, no har falta
esperar a que se descargue todo el vdeo para comenzar a visionarlo.
Pasos:
88
Lic. Hctor Vidaln Jorge
Los comportamientos son scripts predefinidos de ActionScript 2.0 que se pueden aadir a un
objeto para controlarlo. Con los comportamientos podemos controlar fcilmente instancias de
objetos, vdeo y sonido sin necesidad de crear cdigo ActionScript.
Aadir comportamiento.- al hacer clic se muestra una lista con las categoras de
comportamientos a aadir.
Cada vez que seleccionemos un comportamiento, en la columna Eventos irn apareciendo los
eventos de ratn que desencadenarn la ejecucin del comportamiento.
En la columna Accin aparecen las descripciones de las acciones que se ejecutarn con cada
comportamiento asignado.
Prctica 15:1
89
Lic. Hctor Vidaln Jorge
Mediante los filtros de efectos podemos aplicar sombras, desenfoques, iluminados y biseles a
los elementos grficos. Tambin pueden ser animados utilizando interpolaciones de
movimiento.
Una vez aplicados los filtros, podemos modificar sus opciones en cualquier momento, as como
el orden de los mismos con efectos combinados.
Para eliminar un filtro aplicado, seleccionar el objeto, abrir el apartado Filtros en el panel
Propiedades y seguir estos pasos:
Todos los efectos se controlan a travs del panel Propiedades y es posible apploicar
ms de un filtro a un objeto. Algunos filtros son:
90
Lic. Hctor Vidaln Jorge
Para activar y desactivar filtros, basta con hacer clic en el encabezado de filtro que deseemos
desactivar y posteriormente hacer clic en el . Al desactivar un filtro, aparece una cruz roja.
Al volver a hacer clic, se volver a activar el filtro y veremos su aplicacin en el objeto
seleccionado.
Animacin de filtros
Los filtros pueden aplicarse, no slo a objetos estticos sino a objetos en movimiento. Algunas
consideraciones sobre la aplicacin de filtros a objetos en movimiento.
Si aplicamos una interpolacin a un objeto que tiene uno o varios filtros aplicados, los
fotogramas clave unidos entre s tendrn los parmetros de los correspondientes filtros
interpolados en los fotogramas intermedios.
Si un determinado filtro no cuenta con un filtro coincidente en el extremo opuesto de
la interpolacin, este se aadir automticamente para garantizar que el efecto se
encuentre al final de la secuencia de animacin.
Por otra parte si ya existe una interpolacin clsica entre dos fotogramas clave y se aplican
filtros, suceder lo siguiente:
91
Lic. Hctor Vidaln Jorge
Por defecto el pincel rociador pinta un spray de puntos con el color de relleno que est
seleccionado en ese momento en la propia herramienta y no con el color general de relleno.
Tambin podemos utilizar esta herramienta para utilizar un clip de pelcula o un smbolo
grfico como un patrn para rociar.
Para utilizar un smbolo que se encuentre en la biblioteca para rociar con l la escena:
92
Lic. Hctor Vidaln Jorge
La herramienta Deco
Una vez seleccionada la herramienta, en el apartado EFECTO DE DIBUJO del panel Propiedades
podemos elegir entre trece modos diferentes. Cada uno de estos modos dispone de ajustes
individuales que se realizan en los apartados EFECTO DE DIBUJO y OPCIONES AVANZADAS del
panel Propiedades.
Realizar pruebas variando parmetros y valores para estos apartados y comprobar el resultado
final. Es importante que el smbolo no tenga un tamao grande.
Relleno de enredadera.- Rellena el escenario, un smbolo o una rea cerrada con un patrn que
simula una enredadera. Podemos utilizar ilustraciones propias para las hojas y las flores con los
smbolos que seleccionemos en la biblioteca. El patrn resultante se incluir en un clip de
pelcula que, a su vez, contendr todos los smbolos que forman el patrn.
Para utilizar este efecto seleccionarlo del apartado Efecto de dibujo del panel Propiedades.
Seleccionar un color para la parte Hoja y para la parte Flor y hacer clic en una zona cerrada.
Si activamos la casilla Animar patrn, cada repeticin del efecto se dibujar en un nuevo
fotograma de la lnea de tiempo. En Paso de fotograma podemos especificar el intervalo del
nmero de fotogramas por segundo.
Relleno de cuadrcula.- .- Rellena el escenario, un smbolo o una rea cerrada con smbolo de
la biblioteca. Una vez dibujado el relleno de cuadrcula en el escenario, si el smbolo rellenado
93
Lic. Hctor Vidaln Jorge
Par este efecto tenemos cuatro variantes que pueden seleccionarse en el apartado OPCIONES
AVANZADAS del panel Propiedades, como son
Pincel 3D
rea del rociador.- distancia mxima desde el cursor en que se dibujan las instancias.
Perspectiva. Activa o desactiva el efecto 3D. Para dibujar instancias de un tamao uniforme,
anular la seleccin de esta opcin.
Escala de distancia.- determina la cantidad del efecto de perspectiva 3D. Cuanto ms pequeo
sea el valor ms parecer alejarse el objeto hacia el infinito.
Rango de escala aleatoria.-permite que la escala se determine de forma aleatoria para cada
instancia.
Rango de rotacin aleatoria.- permite que la rotacin se determine de forma aleatoria para
cada instancia. Aumentar el valor para incrementar la rotacin mxima posible para cada
instancia.
94
Lic. Hctor Vidaln Jorge
Pincel de Construccin
Para dibujar:
Pincel decorativo
Animacin de fuego
Este efecto crea automticamente una animacin fotograma a fotograma que simula fuego. El
procedimiento es el mismo que para los otros efectos
1. Una vez ajustadas las opciones especiales arrastrar en la escena para dibujar el fuego.
2. Cuando acabemos de arrastrar se muestra una llama de fuego en movimiento y una
interpolacin que se lo provoca.
Pincel de llama
Este efecto dibuja llamas en el escenario en el fotograma actual de la lnea de tiempo. Como
opciones de este efecto disponemos la posibilidad de cambiar el tamao de la llama y su color.
95
Lic. Hctor Vidaln Jorge
Pincel de flor
Dibuja flores en el fotograma actual de la lnea de tiempo. Cuatro tipos de flor: Flor de jardn,
Rosa, Flor de pascua y Baya
Propiedades:
- Color de flor
- Tamao de flor
- Color de hoja
- Tamao de hoja
- Color de fruta
- Rama
- Color de Rama
Pincel de rayo
- Color de rayo
- Escala de rayo
- Animacin.- se crear una animacin fotograma a fotograma de la evolucin del rayo..
Flash aadir fotogramas a la capa actual en la lnea de tiempo mientras el rayo se est
dibujando.
- Anchura de haz
- Complejidad.- nmero de veces en que se divide cada rama.
Sistema de partculas
Con el efecto Sistema de partculas, se pueden crear animaciones de partculas como, por
ejemplo, fuego, humo, agua, burbujas, etc..
Pasos:
Al igual que para los efectos Relleno de cuadrcula, Pincel 3D, etc.. para Sistema de partculas
podemos definir hasta dos objetos procedentes de smbolos que sern utilizados para crear el
efecto.
96
Lic. Hctor Vidaln Jorge
Flash crear una animacin fotograma a fotograma del efecto de partculas en funcin de las
propiedades establecidas. Las partculas generadas en el escenario se incluirn en un grupo en
cada fotograma de la animacin.
Propiedades:
- Partcula 1
- Partcula 2
- Generacin de partculas.- determina el nmero de fotogramas en que se generan las
partculas. Si el nmero de fotogramas es inferior a la propiedad Longitud total, la
herramienta dejar generar nuevas partculas en los fotogramas restantes, pero las
partculas generadas continan animndose
- Velocidad por fotograma
- Vida til
- Velocidad inicial
- Tamao inicial
- Direccin inicial mn.
- Direccin inicial mx.
- Gravedad y Velocidad de Rotacin
Animacin de Humo
Este efecto crea animaciones fotograma a fotograma que simulan humo. Flash aade
fotogramas a la lnea de tiempo mientras mantenemos presionado el botn del ratn sobre el
lugar deseado en la escena.
Es recomendable situar la animacin de humo entro de su propio smbolo como, por ejemplo,
un smbolo de clip de pelcula.
Opciones disponibles:
Pincel de rbol
Permite crear rpidamente ilustraciones de rbol. Una vez ajustadas las opciones, arrastrar
para dibujar los rboles. Mediante el propio arrastre se crearn ramas grandes mientras que,
manteniendo el cursor en un lugar se crearn las ramas ms pequeas.
97
Lic. Hctor Vidaln Jorge
Estilo de rbol
Color de flor/fruta
Herramientas 3D
Rotacin 3D
Traslacin 3D
Herramienta Rotacin 3D
98
Lic. Hctor Vidaln Jorge
La herramienta Traslacin
El punto de fuga es el lugar donde convergen todas las rectas proyectadas paralelas a una
direccin; es un punto situado en el infinito., suele estar ubicado en el centro del documento
99
Lic. Hctor Vidaln Jorge
Son un conjunto de clips de pelcula que ya vienen con el programa y que vienen provistos de
una serie de parmetros definidos que deben cumplimentarse durante la edicin del
documento. Dichos componentes nos permitirn confeccionar aplicaciones interactivas,
formularios para entrada de datos, control de datos, controles multimedia, etc.
Los componentes aparecen agrupados por categoras se puede acceder a ellos abrindolo
como si fuesen carpetas del sistema operativo.
En el grupo User interface disponemos de componentes para crear interacciones sencillas del
usuario con pelculas Flash, o de forma conjunta para crear una interfaz de usuario completa
destinada a formularios o aplicaciones para la web.
Para agregar componentes a un documento, basta con arrastrarlos a la escena desde el panel
Componentes. En el momento en el que el componente est ya en la escena y seleccionado,
podremos editar sus parmetros mediante el panel Propiedades.
100
Lic. Hctor Vidaln Jorge
Componentes
Componentes de datos
Ejemplos de compontes
Pasos:
etiqueta(left,right,etc..)
101
Lic. Hctor Vidaln Jorge
Componente ComboBox
Labels.- pulsar en el icono para introducir el texto de cada una de las opciones. Par ello
pulsar en el icono y aadir el texto en la columna Valor. Para eliminar las opciones pulsar
el icono
Componente List
102
Lic. Hctor Vidaln Jorge
vez ejecutada la pelcula con Ctrl + Intro, pulsar con la tecla Ctrl para elegir una a una o la tecla
Mayscula.
Componente
Es un botn de comando que permite agregar a la escena botones de comando sencillos. Este
componente acepta todas las interacciones de ratn y teclado estndar y dispone de un
evento click que permite especificar un controlador para ejecutar acciones cuanso se suelta el
botn.
Parmetros de Buttom
Componente
Es un botn de opcin que permite agregar grupos de botones de opcin a un documento. Son
excluyentes lo que implica que la seleccin de uno anula al otro. Con objeto de tener varios
grupos de este tipo de botones sin que uno afecte a otro, podremos individualizarlos a travs
del parmetro groupName.
103
Lic. Hctor Vidaln Jorge
Parmetros de RadioButtom
Componente
104
Lic. Hctor Vidaln Jorge
Parmetros
105
Lic. Hctor Vidaln Jorge
Utilizar el panel Color para hacer coincidir la paleta de colores de la pelcula con la
paleta especfica del navegador.
No abusar de los degradados.
Utilizar el panel Propiedades para realizar los cambios de color en las instancias.
106