Centro de Educacin Continua

ANIMACIN WEB
VOLUMEN

Programa Adobe Flash CS6

Professional

Manual del
Participante

Programa Adobe Flash CS6

Professional

Centro de Educacin Continua

Sesin de Aprendizaje

Introduccin a Adobe Flash CS6

Flash es una potente herramienta desarrollada por Adobe que ha superado las mejores expectativas de sus creadores.
Inicialmente Flash fue creado por Macromedia (Adobe) con el objeto de realizar animaciones vistosas para la web, as como
para crear GIFs animados.
Los motivos que han convertido a Flash en el programa elegido por la mayora de los diseadores web profesionales y
aficionados son varios. Veamos pues, porque es interesante Flash Cs6.
Podemos utilizar Adobe Flash Professional CS6 para diferentes tipos de presentaciones, desde aplicaciones e- commerce a video clips, juegos y
caricaturas. Podemos crear aplicaciones para el manejo de datos y animaciones simples.

Por qu usar Flash Cs6?

Las posibilidades de Flash son extraordinarias, cada nueva versin ha mejorado a la anterior, y el actual Flash CS6 no ha sido menos. Aunque su uso
ms frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos ms. Son tantos, que todos los
diseadores web deberan saber utilizar Flash.
Flash ha conseguido hacer posible lo que ms se echa en falta en Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones,
sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no esttico (en contraposicin a la mayora de las
pginas, que estn realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fcil y rpido animaciones de todo tipo, desde un botn a un
complejo juego.
Adems sus desarrolladores estn apostando muy fuerte por ActionScript, el lenguaje de programacin Flash. A cada versin se mejora y ofrece un
abanico de posibilidades cada vez mayor, por lo que adems de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma para aplicaciones web de un
modo real. Flash es fcil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginacin,
pero esto no es suficiente para ser el preferido por los diseadores profesionales... Entonces qu es?

Novedades de la versin Cs6

Adobe suele integrar todos sus productos en una suite nica en la que prima, sobre todo, la compatibilidad entre ellos. As la compaa se desmarca
del resto ofreciendo un paquete de aplicaciones muy completas como hemos ido viendo ao tras ao, que son capaces de interactuar entre ellas y nos ofrecen la
posibilidad de reutilizar proyectos creados con un programa en otro. De hecho, podemos usar herramientas ms potentes de dibujo, como Illustrator, para crear
nuestros grficos, y despus animarlos con Flash.
Vamos a ver las opciones ms destacadas que encontramos en esta ltima versin:

Soporte para HTML5: Una nueva extensin (disponible por separado) permite crear contenido HTML interactivo basndose en las animaciones bsicas
y en las funciones de dibujo de Flash Professional. Es posible exportar como JavaScript para utilizar la arquitectura de cdigo abierto CreateJS.

Generacin de hojas de Sprite (Sprite sheet):

Exporte smbolos y secuencias de animacin para generar instantneamente hojas de Sprite que
mejoran la experiencia ldica, el flujo de trabajo y el rendimiento.

Compatibilidad amplia con plataformas y dispositivos:

Llegue a dispositivos Android e iOS concentrndose en los tiempos de ejecucin ms recientes

de Adobe Flash Player y AIR.

Creacin de aplicaciones con Adobe AIR preempaquetado:

Cree y distribuya aplicaciones con tiempos de ejecucin cautivos de Adobe AIR

preempaquetado. Agilice las pruebas de las aplicaciones y permita que los usuarios finales ejecuten su contenido sin realizar descargas adicionales.

Simulacin de dispositivos mviles de Adobe AIR:

Simule interacciones comunes de aplicaciones para dispositivos mviles como la orientacin de la

pantalla, los gestos tctiles y el acelermetro para acelerar las pruebas.

Orientacin a Stage 3D:

Acelere el rendimiento de la presentacin grfica utilizando el modo directo para aprovechar Starling Framework de cdigo
abierto para contenido 2D acelerado de hardware.

Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 01

Programa Adobe Flash CS6

Sesin de Aprendizaje

Professional

Centro de Educacin Continua

Ingresar a Adobe Flash CS6

Consiste en mostrar el entorno de trabajo del programa:

Para ingresar a Flash

Professional CS6, podemos seguir los
siguientes pasos:

Clic

1. Clic en el botn Inicio

2. Clic sobre
Todos los Programas
3. Clic en la Carpeta Adobe Master
Collection CS6
4. Clic en el programa
Adobe Flash Professional CS6

Clic

Clic

Clic

Ingresar con la Opcin Ejecutar

Tambin es posible ingresar a Flash Professional CS6 de la siguiente manera:

1. Se presiona al mismo tiempo las teclas Windows + R

2. En la ventana ejecutar se escribe Flash
3. Se presiona la tecla Enter o clic en aceptar

Clic

Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 02

Programa Adobe Flash CS6

Sesin de Aprendizaje

Professional

Centro de Educacin Continua

La Interfaz de Adobe Flash CS6 Professional

Barra de Mens

Botones de Control
de la ventana

Escenario
rea de
Paneles

Panel
de Propiedades

Barra de
Herramientas

Capas

Lnea de Tiempos

La Lnea de Tiempos
La lnea de tiempo organiza y controla el contenido de un documento a travs del tiempo en capas y fotogramas. Al
igual que en un largometraje, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de
pelcula apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los
componentes principales de la lnea de tiempo son las capas, los fotogramas y la cabeza lectora.
Las capas de un documento aparecen en una columna situada a la izquierda de la lnea de tiempo. Los fotogramas contenidos en cada capa
aparecen en una fila a la derecha del nombre de la capa. El encabezado de la lnea de tiempo situado en la parte superior de la lnea de tiempo indica los nmeros
de fotograma. La cabeza lectora indica el fotograma actual que se muestra en el escenario. Mientras se reproduce el documento de Flash, la cabeza lectora se
desplaza de izquierda a derecha de la lnea de tiempo.
La informacin de estado de la lnea de tiempo situada en la parte inferior de la misma indica el nmero del fotograma seleccionado, la velocidad de
fotogramas actual y el tiempo transcurrido hasta el fotograma actual.

Elementos de
la ventana
Lnea de Tiempo

Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 03

Programa Adobe Flash CS6

Centro de Educacin Continua

Sesin de Aprendizaje

Professional

El Escenario
El escenario es el rea rectangular donde se coloca el contenido grfico, que incluye, entre otros: grficos vectoriales, cuadros
de texto, botones, clips de vdeo o imgenes de mapa de bits importadas. El escenario del entorno de edicin de Flash representa el
espacio rectangular de Adobe Flash Player o del navegador Web donde se muestra el documento de Flash durante la reproduccin.
Puede utilizar la funcin de acercar y alejar para ver el escenario cuando trabaja.

La cuadrcula, las guas y las reglas

sirven para colocar con precisin el
contenido en el escenario.
Aumento y reduccin de la visualizacin
Para ver todo el escenario en la pantalla o
slo un rea determinada del dibujo con un
grado de aumento alto, modifique el grado
de aumento. El grado mximo de aumento
depende de la resolucin del monitor y del
tamao del documento.

Podemos presionar Control + 3 Alfanumrico

para ajustar el escenario a la interfaz

Las Capas
Las capas son como hojas de acetato transparente apiladas en el escenario. Las capas ayudan a organizar las ilustraciones de
los documentos. Los objetos de una capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. Cuando una capa
est vaca, las capas situadas debajo pueden verse a travs de sta.
Para dibujar, pintar o modificar una capa o una carpeta, primero se debe seleccionar en la lnea de tiempo para activarla. Un icono
con forma de lpiz junto a una capa o carpeta de la lnea de tiempo indica que la capa o carpeta est activa. Slo puede haber una capa activa en cada momento
(aunque se pueda seleccionar ms de una capa a la vez).
Inicialmente, un documento de Flash contiene una sola capa. Puede aadir ms capas para organizar las ilustraciones, la animacin
y los dems elementos del documento. El nmero de capas que pueden crearse slo est limitado por la memoria del equipo. Las capas no aumentan el tamao
del archivo SWF publicado. Slo los objetos que se ubican en las capas aumentan el tamao del archivo. Asimismo, es posible ocultar, bloquear o reordenar
capas.

Elementos Principales
de la ventana Capas

Nueva Carpeta
Crea una nueva carpeta

Propiedades de la Capa
Si hacemos doble clic
podremos acceder a un panel con
las propiedades de la capa en la que
hayamos hecho clic.

Nueva Capa
Como su nombre indica, sirve para
Insertar capas en la escena actual.
Inserta capas normales.

Borrar Capa
Borra la capa seleccionada.

Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.
Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 04

Programa Adobe Flash CS6

Sesin de Aprendizaje

Professional

Centro de Educacin Continua

La Barra de Herramientas de
Adobe Flash CS6 Professional
Es la Barra que aparece al lado lateral derecho de la ventana. La Barra de Herramientas permite al diseador obtener
resultados ptimos en el trazo y dibujo de ilustraciones para las pelculas animadas.
Esta compuesta por cinco reas principales: Herramientas de Dibujo y Pintura, Herramientas de Visualizacin,
Herramientas de Color de Contorno, Herramientas de Color de Relleno y Opciones de la Herramientas.

Herramienta Seleccin
Herramienta Sub seleccin

Herramienta Transformacin Libre

Herramienta de Rotacin 3D

Herramienta Lazo
Herramienta Pluma

Herramienta Texto
Herramienta Lnea

Herramienta Rectngulo
Herramienta Lpiz

Herramienta Pincel
Herramienta Deco

Herramienta Hueso
Herramienta Cubo de Pintura

Herramienta Cuenta Gotas

Herramienta Borrador

Herramienta Mano
Herramienta Zoom

Herramienta Color de Relleno

Herramienta Trazo

Herramienta Ajustar a Objetos

Herramienta suavizar

Ventana de Propiedades
Esta ventana se encuentra en la parte lateral derecha de la ventana del
Programa. Cambia de acuerdo a la herramienta o a la accin que se esta realizando
sobre el escenario y sirve para cambiar sus propiedades de trabajo y tambin las
propiedades de los objetos seleccionados.

Clic

La muestra corresponde al activar con un Clic la herramienta texto.

Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 05

Programa Adobe Flash CS6

Professional

Centro de Educacin Continua

Sesin de Aprendizaje

Crear un Nuevo Documento

Consiste en Crear un Nuevo Archivo sobre el cual se puede trabajar una nueva pelcula. Al iniciarse el programa este
entrega un ventana con las distintas opciones de trabajo. Siendo la ms importante para el curso Nuevo con ActionScript 2.0
Para crear un nuevo documento se realiza los siguientes pasos:

1
1. Clic en el Men Archivo

2. Clic en la Opcin Nuevo

Tambin se puede presionar
las teclas:

Ctrl +

3. En la ventana que emerge

se elige el tipo documento.
4. Clic en Aceptar

Guardar un Documento

Consiste en almacenar el documento realizado en una unidad de almacenamiento. Al guardar el documento se

guarda con la extensin .fla Teniendo la posibilidad de ser abierta y modificada posteriormente.
Para guardar un documento se realiza los siguientes pasos:

1. Clic en el Men Archivo

Clic

2. Clic en la Opcin Guardar

Tambin se puede presionar las teclas:

Ctrl +

Clic

3. Se escribe un Nombre para

el documento
4. Clic en la Botn Guardar

4
Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Clic

Pg 06

Programa Adobe Flash CS6

Professional

Centro de Educacin Continua

Sesin de Aprendizaje

Dibujar y Colorear
Cuando se disea una pgina web o una animacin el diseador pasa por muchas fases. Tras la fase de "Qu quiero crear y
cmo va a ser" viene (normalmente) la fase de diseo grfico. Llevar lo que ha producido tu imaginacin al papel (en este caso al
papel de Flash).
No conviene engaarnos, Flash no es un programa de diseo grfico, pero su potencia en este mbito es casi tan grande como
la de stos programas. Vamos a ver cmo emplear cada herramienta de dibujo para sacarle el mximo partido.

Las Herramientas Bsicas

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cules son las ms importantes y cmo se usan:
Herramienta Seleccin (flecha):
Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos. permite
seleccionar los bordes de los objetos, los rellenos (con un slo clic), los bordes (con doble clic), zonas a nuestra eleccin... Adems, su uso
adecuado puede ahorrarnos tiempo en el trabajo.
Herramienta Lnea:
Permite crear lneas rectas de un modo rpido. Las lneas se crean como en cualquier programa de dibujo, se hace
clic y se arrastra hasta donde queramos que llegue la lnea recta. Una vez creada la podemos modificar sin ms que seleccionar situar el
cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.
Herramienta Texto:
Crea un texto en el lugar en el que hagamos clic.

Herramienta Ovalo:
La herramienta valo permite trazar crculos o elipses de manera rpida y sencilla. Puedes acceder a ella
manteniendo el botn del ratn pulsado sobre la herramienta Rectngulo.

Herramienta Rectngulo: Su manejo es idntico al de la Herramienta valo, tan solo se diferencian en el tipo de objetos que crean.

Herramienta Lpiz:
Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar lneas con la forma que decidamos,
modificando la forma de estas a nuestro gusto. El color que aplicar esta Herramienta se puede modificar, bien desde el Panel Mezclador
de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.
Herramienta Pincel:
Su funcionalidad equivale a la del lpiz, pero su trazo es mucho ms grueso. Se suele emplear para aplicar rellenos.
Se puede modificar su grosor y forma de trazo.
Herramienta Cubo de Pintura:
Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de
dibujo, no permite aplicar rellenos si la zona no est delimitada por un borde. El color que aplicar esta Herramienta se puede modificar,
bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.
Herramienta Borrador:
Su funcionamiento es anlogo a la Herramienta Brocha. Pero su funcin es la de eliminar todo aquello que
"dibuje".

Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 07

Programa Adobe Flash CS6

Professional

Centro de Educacin Continua

Sesin de Aprendizaje

Las Herramientas Avanzadas

Cuando se disea una pgina web o una animacin el diseador pasa por muchas fases. Tras la fase de "Qu quiero crear y
cmo va a ser" viene (normalmente) la fase de diseo grfico. Llevar lo que ha producido tu imaginacin al papel (en este caso al
papel de Flash). No conviene engaarnos, Flash no es un programa de diseo grfico, pero su potencia en este mbito es casi tan
grande como la de stos programas. Vamos a ver cmo emplear cada herramienta de dibujo para sacarle el mximo partido
La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cules son las ms importantes y cmo se usan:
Herramienta Lazo:
Su funcin es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar
la forma, (la Herramienta Flecha slo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta
Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la seleccin a mano).
Al seleccionar esta Herramienta, en el Panel de herramientas aparecen estos botones:
Esto es la Herramienta Varita Mgica, tan popular en otros programas de dibujo. Permite hacer selecciones segn los colores de los
objetos.
El tercer dibujo que aparece es este: permite hacer selecciones poligonales.
Herramienta Pluma:
Crea polgonos (y por tanto rectas, rectngulos...) de un modo sencillo. Mucha gente encuentra esta herramienta
complicada, aunque es una de las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir
como vrtices de los polgonos, lo que nos asegura una gran precisin. Para crear curvas, hay que sealar los puntos que la delimitan y
posteriormente trazar las tangentes a ellas. Con un poco de prctica se acaba dominando.
Herramienta Sub seleccin:
Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vrtices
que componen los objetos creados con dicha herramienta
Herramienta Bote de Tinta:
Se emplea para cambiar rpidamente el color de un trazo. Se aplica sobre objetos, si tienen borde,
cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay
en la Barra de Herramientas.)
Herramienta Cuenta Gotas:
Su misin es "Capturar" colores para que posteriormente podamos utilizarlos.

Las Herramientas Opciones

Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a estas utilidades, a veces no basta con
hacer clic en la Herramienta correspondiente. La forma de acceder a este Submen consiste en hacer clic en la lnea o en el objeto que has dibujado.
Entonces aparecer (o se iluminar si ya estaba presente) un submen como este:
Ajustar a Objetos :
Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se
superponga, dando la sensacin de estar "unidos".
Suavizar:
Convierte los trazos rectos en lneas menos rgidas.

Enderezar:
Realiza la labor inversa. Convierte los trazos redondeados en ms rectilneos

Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 08

Programa Adobe Flash CS6

Sesin de Aprendizaje

Professional

Centro de Educacin Continua

El Panel Color
El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que ms nos
gusten.
Para seleccionar un color determinado, bastar con hacer clic en las pestaas que se encuentran junto a los iconos de las
Herramientas de Lpiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre la pestaa que est junto a la Herramienta Lpiz 1 y si
queremos modificar un relleno, haremos clic en la pestaa que est junto a la Herramienta Bote de Pintura 2.) Al hacerlo aparecer un Panel con multitud de
colores para que seleccionemos el que ms nos gusta. Tambin permite introducir el cdigo del color segn el estndar que establece el HTML.
Tambin se puede determinar el tipo de relleno que aplicaremos a los
objetos creados (mediante la Herramienta Bote de Pintura).

Se pueden crear diferentes tipos de Rellenos

Slido:
Consiste en un relleno formado por un solo color.
Degradado Lineal:
Es un tipo especial de relleno, de modo que un
color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de
un lado al otro
Degradado Radial:
Es igual que el anterior, pero los degradados tiene
forma circular.
Mapa de Bits:
Permite colocar como relleno alguna imagen existente en
la pelcula (O ajena a ella si antes se "importa")

Para activar el Panel de Color

se hace clic en el Menu Ventanas / Color

El Panel de Muestras
El Panel Muestras sirve para poder ver de un modo rpido y claro los
colores de que disponemos, tanto slidos (un solo color) como degradados (lineales
o radiales). Adems, cuando creemos un color mediante el Panel Color, podremos
agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se
encuentra en un men desplegable en la parte superior derecha del Panel Color).
Una vez est agregado el color, pasar a estar disponible en nuestro
conjunto de muestras y podremos acceder a l rpidamente cada vez que
trabajemos con nuestra pelcula.
Cada pelcula tiene su propio conjunto de muestras y cada vez que la
abramos para editarla, podremos usar las muestras que tenamos la ltima vez que
trabajamos con dicha pelcula.

Para activar el Panel de Muestras

se hace clic en el Menu Ventanas / Muestras

Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 09

Programa Adobe Flash CS6

Sesin de Aprendizaje

Professional

Centro de Educacin Continua

Mi Primera Animacin
Una de las caractersticas principales de Flash es su sencillez, esta sencillez en su utilizacin permite crear animaciones de un
modo efectivo y rpido.
Pongmonos en situacin, supongamos que queremos crear una animacin en la que una pelota realice un movimiento de
"bote", es decir, que baje y suba. Puede parecer un trabajo de horas, pero nada ms lejos de la realidad. Veamos cmo Flash nos lo
pone fcil.
En este apartado no pretendemos ensear cmo crear una animacin Flash (pues eso se ver ms adelante), el objetivo es que entendamos cmo
crea Flash las animaciones y de que modo nos facilita el trabajo.
Para crear un efecto de bote de una pelota
realizamos los siguientes pasos:
Cambiamos el entorno a modo Clasico

Clic

1. Clic en el fotograma 1 de la Capa 1

2. Mantenemos presionado la Herramienta
Rectngulo
3. Clic en la Herramienta Ovalo

2
3

Clic

Clic

Clic

4. Dibujamos un circulo.
5. Hacemos clic en el fotograma 20 y
presionamos la tecla F6 para crear
un fotograma clave
6. Hacemos clic en el fotograma 10 y
presionamos la tecla F6 para crear
un fotograma clave

Clic

Clic

7. Estando en el fotograma 10 arrastramos el

circulo hacia abajo
8. Anticlic en la linea de tiempo entre los fotogramas
1 - 10 y 11 - 20
9. Crear interpolacin clsica

Anticlic

7
9

Clic

Clic

Adobe Flash Professional CS6 - Universidad Continental - Centro de Educacin Continua - LMachuca

Pg 10