El ABC de Flash Cs-6

ESCUELA SUPERIOR POLITECNICA DE CHIMBORAZO
FACULTAD DE INFORMATICA Y ELECTRONICA

ESCUELA DE INGENIERIA EN SISTEMAS
Por Ing. Ms.C. Fernando Proao,
Mayo 2015
EL ABC DE FLASH CS-6

1.- INTRODUCCION A LA ANIMACION POR COMPUTADORA
La animacin por computador esta ligada directamente con el uso de la Multimedia. Actualmente
los datos e informacin no son solo estticos, sino tiene un elemento adicional que se conoce
como animacin o en otros casos se denomina como la informacin dinmica.
Las nuevas presentaciones de documentos, de diapositivas, de textos, se los pueden mejorar con
la incursin del mundo de la Multimedia, la misma que comprende innovadores elementos
relacionados con los programas, sistemas operativos (Software) y dispositivos fsicos (Hardware)
que incluyen no solo textos, sino audio, video y animaciones.
Para el diseo de Sistemas Interactivos (SI) es necesario identificar cinco (5) elementos
multimedia:
1.- Texto: en tres categoras: De contenido, De control, De decoracin
2.- Grfico: de contenido, de control y de decoracin
3.- Audio: de contenido, de control, de decoracin
4.- Video: de contenido
5.- Animacin: de contenido, de control, de decoracin
2.- CONOCIENDO A FLASH CS6

Flash es uno de los programas ms populares en el mbito de la animacin tanto para aplicaciones
generales como para el diseo de pginas Web. Las nuevas caractersticas de FLASH CS6 son:
Animacin basada en objetos. Un nuevo sistema de animacin hace que cada objeto en el
escenario tenga su propia capa, lnea de tiempo y sistema de animacin.
Transformacin 3D. Flash CS-6 incluye una herramienta de rotacin 3D. Con slo arrastrar y
soltar se puede rotar un objeto en los ejes X, Y y Z. Realmente eso es todo lo que es posible hacer
con la transformacin 3D.
Editor de movimiento. Con el editor de movimiento es posible editar todo los elementos. Hay
curvas detalladas para el movimiento en X, en Y, las escalas, dimensiones, deformacin,
rotaciones, todo. Todo es controlable y ajustable en detalle.
Cinematica: Herramienta de huesos. Flash CS-6 incluye una herramienta de huesos para hacer
cinemtica inversa. til para animar extremidades del cuerpo, piezas mecnicas entrelazadas, por
lo que se los llama comnmente huesos. Al ser interactivos, son arrastrables y reaccionan al
usuario en ejecucin.
El ABC de Flash CS-6
Fernando Proao B. 2015
Patrones de movimiento. Permite crear un estilo de animacin, se almacena para futuras

aplicaciones a otros smbolos tipo clip de pelcula. Flash CS-6 conoce como est ubicado todo e
intenta sincronizar las animaciones de manera inteligente.
Herramienta deco: Modelado procedural. Al seleccionar es posible insertar dibujos, vectores o
clips de la librera en forma de patrones.
En general el programa Flash, presenta las siguientes caractersticas tcnicas:
Entorno Standard del ambiente de la familia ADOBE SUIT mediante paneles;

Manipulacin de imgenes de vectores;
Incorporacin de un lenguaje propio como el ActionScript (versiones 2 y 3);
Fcil manera de creacin de animaciones utilizando fotogramas de pelculas;
Fcil incorporaciones de animaciones a paginas Web;
Amplias opciones para exportacin e importacin de archivos;
Potente ayuda en lnea y tutoriales;
Amplia gama de archivos para exportar e importar;
Carga dinmica de imgenes .JPEG ;
Uso de sonidos en formato MP3 y otros formatos;
Uso de smbolos como objetos que pueden ser reciclados de varias maneras
Pelculas compatibles en su ejecucin en otros programas de WIndows
Archivos de pelculas de menor tamao para exportar a otras aplicaciones;
Uso de grficos de mapa de bits, con posibilidad de vectorizarlos;
Archivos rpidos para descargas desde cualquier sitio;
Potentes herramientas de diseo grafico como transformacin libre, ajuste de pxeles;
Potentes opciones para vinculacin, para pelculas, o marcadores de paginas;
Uso amplio de opciones de video, con compatibilidad a diferentes cmaras de video o
webcams;
Soporta formatos MPEG, DV (Digital Video), MOV (QuickTime), AVI;
Amplia gama de opciones para mascaras;
Uso de componentes inteligentes, que son objetos preconstruidos listos para ser utilizados
en sus aplicaciones Flash. Ej. calendarios, botones de entrada y salida, casillas de
verificacin, barras de desplazamiento;
Independencia de la plataforma. Se puede usar libremente la aplicacin Flash Player en
Windows, Apple, Linux, Solaris, Pocket PC i otros;
Versiones en varios lenguajes como el espaol.
3.- MI PRIMERA SESION CON FLASH CS-6

3.1.- INGRESO A FLASH (Ver Fig. 1)
Al iniciar Flash CS-6 de tiene cinco (5) grupos de informacin inicial:
(1) Crear Plantilla: para iniciar con plantillas de Flash o creadas anteriormente
(2) Crear Nuevo: para comenzar un nuevo documento de FLASH, seleccionar ActionSctrip 2 o
3 (segn la programacin futura)
(3) Aprendizaje: tutoriales en lnea
(4) Abrir un elemento reciente: para continuar con el trabajo de un documento anterior
(5) Ampliar: inclusin de plugins para operaciones especiales de Flash
Fig. 1. (a) Pantalla de inicio de Flash CS-6
3.2.- RECONOCIMIENTO DE LAS PANTALLAS E INTERFACES

Flash CS-6 presenta una Interfaz basada en 7 secciones principales de trabajo que son:
(1)
(2)
(3)
(4)
(5)
(6)
(7)
Barra de Men (barra azul, con las opciones del men)

Caja de Herramientas (barra con las herramientas de dibujo)
rea de la Lnea de tiempo (fotogramas, capas)
Escenario o rea de edicin
rea de paneles de propiedades (parte derecha )
rea de paneles de control (parte derecha)
Ventanas emergentes (aparecen segn el llamado)
(1)
(5)
(3)
(7)
(2)
(6)
(4)
Fig. 2. Interfaces de FLASH CS-6
Los paneles de propiedades y de control son ventanas especiales que tienen un icono de control
(parte superior izquierda) que permite abrir o cerrar dicho panel:
Ejemplo:
Propiedades
Acciones :
: indica que este panel esta abierto
indica que este panel esta cerrado
3.3.- MI PRIMERA SESIN EN FLASH CS-6

Cuatro operaciones comprende mi primera sesin:
1: Ingresar correctamente a FLASH
2: Realizar una operacin en FLASH
3: Guardar correctamente el documento FLASH, y
4: Salir de FLASH
PASOS:
1.- Activar icono de FLASH desde Escritorio
2.- Crear Nuevo Documento de FLASH (2da columna, primera opcin)
3.- Dibujar un circulo (Herramienta Ovalo de la Caja de Herramientas)
4.- Ir Men: ARCHIVO opcin: GUARDAR COMO
5.- Seleccionar Directorio o Carpeta en la Ventana Guardar
6.- Escribir nuevo nombre al archivo Flash ( la extensin es .fla)
7.- Activar Botn ACEPTAR/ OK
8.- Ir Men: ARCHIVO opcin: SALIR
3.4.- USO DE LA CAJA DE HERRAMIENTAS
La caja de herramientas se activa a travs del men Windows y opcin Tools o con la tecla rpida
Ctrl + F2
Fig. 3. Herramientas bsicas para dibujos en FLASH CS-6
SELECCIN: permite seleccionar uno o mas objetos del Escenario

SUBSELECCION: permite controlar contornos y anclas de control de objetos
TRANSFORMACION LIBRE: permite realizar tres (3) operaciones de modificacin
de un objeto* previamente seleccionado con la herramienta SELECCIN:
1.- Escalar : ampliar o reducir el tamao de un objeto(s)
2.- Distorsionar: permite aplastar verticalmente u horizontalmente el objeto
3.- Girar: permite rotar el objeto alrededor del centro de registro (punto central)
LAZO: permite seleccionar libremente un rea de un objeto
PLUMA: permite modificar (aadir, suprimir) los puntos de control (anclas) de un objeto
TEXTO: permite editar textos (texto estatico, dinamico e introduccin de texto)

LNEA: permite dibujar lneas. Con tecla SHIFT se dibujaran lneas en ngulos mltiplos de 45
RECTANGULO: permite dibujar rectngulos/valos Con la tecla SHIFT se dibujaran
cuadrados/crculos
LAPIZ: permite dibujos a mano alzada

PINCEL: permite trazos con varios diseos tipo pincel
BOTELLA DE CONTORNO: permite modificar contornos de objetos seleccionados
SELLO DE RELLENO: permite modificar los rellenos de objetos seleccionados

CUENTA GOTAS: permite modificar propiedades adquiridas desde otro objeto
BORRADOR: permite borrar partes de un objeto seleccionado
MANO: permite desplazar el rea de trabajo

ZOOM: permite ampliar o minimizar (con tecla ALT) el rea de trabajo
COLOR DE CONTORNO: controla el color del contorno de un objeto

COLOR DE RELLENO: controla el color de relleno de un objeto
CONTROL DE COLORES: permite cambiar colores de relleno y contorno de objetos
* NOTA: Todos los dibujos realizados en el Escenario, son manipulados por FLASH como
objetos, los mismos que tienen varias propiedades como:
-
Contorno o lneas alrededor

Fondo o Relleno
Anclas de control (8) y un centro de registro (por default en la mitad del objeto)
Puntos de control de los vectores (Curvas Bezier)
Otros
DIBUJO DE OBJETOS:
Ejemplo 1: dibujar un valo de color azul:
PASOS:
1.- Seleccionar herramienta Ovalo de la Caja de Herramientas
2.- Identificar nuevo icono de control ( +) y dibujar valo con botn izquierdo presionado, desde la
parte superior izquierda a la parte inferior derecha (tcnica DRAG AND DROP)
3.- Ir a la herramienta SELECCIN y seleccionar valo
4.- Activar objeto con doble clic sobre el valo
5.- En el panel de PROPIEDADES, identificar icono de relleno y cambiar al color azul
NOTA: Todo objeto cerrado puede ser seleccionado de tres maneras:
5
(1) Seleccin del contorno y relleno con doble clic botn izquierdo
(2) Seleccin solo del relleno con un clik en el relleno
(3) Seleccin solo del contorno con un clic en el contorno
Cuando se dibuja objetos como crculos, rectngulos para manipularlos puede ser necesario
agruparlos. Se selecciona todo el objeto (s) y con las teclas CTRL + G, se agrupa.
Ejercicios
[ ] 1.- Abrir y cerrar paneles de control
[ ] 2.- Identificar las teclas rpidas para GUARDAR COMO y para SALIR
[ ] 3.- Identificar las partes de la seccin LNEA DE TIEMPO
[ ] 4.- Dibujar la bandera de Ecuador (rectngulos: amarillo, azul y rojo)
[ ] 5.- Dibujar un sol (circulo: contorno naranja, relleno: amarillo y lneas alrededor)
[ ] 6.- Investigar, por que la herramienta RECTANGULO tiene una flechita de control
[ ] 7.- Cules son las teclas rpidas de la herramientas estudiadas?
4.- TIPOS DE ANIMACION EN FLASH

En FLASH CS-6 se pueden realizar cuatro (4) tipos bsicos de animaciones:
(1) animacin por interpolacin de MOVIMIENTO
(2) animacin por interpolacin de FORMA
(3) animacin por ROTACION
(4) animacin por TRAYECTORIA
4.1. ANIMACIN POR INTERPOLACIN DE MOVIMIENTO
Las animaciones en FLASH se basan en la metfora de Pelcula, por lo que se utiliza una
secuencias de fotografas fotogramas- que unidas en un tiempo determinado se visualizan
como una pelcula.
La secuencia de fotogramas se activan en base al valor dado por FLASH que es de 24 fps
(fotogramas por segundo). Este valor puede ser modificado, con un doble clic en el icono con el
valor (parte inferior de la rea de la lnea de tiempo).
Si se reduce los fps, la animacin se visualiza en cmara lenta. Caso contrario se visualizara en
cmara rpida
Las propiedades de la secuencia y otros valores de todo el documento FLASH pueden ser
modificados, mediante el panel de control,(ver Fig. 4)
Fig. 4. Ventana de control de propiedades del documento
Ejemplo 2: animar un circulo de izquierda a derecha por 3 segundos

PASOS:
1.- Seleccionar herramienta Ovalo de la Caja de Herramientas
2.- Dibujar el circulo con la tecla SHIFT (parte izquierda del Escenario)
3.- Seleccionar el fotograma 36 de la lnea de tiempo con un SOLO CLICK botn izquierdo
4.- Presionar Botn Derecho y escoger opcin: INSERTAR FOTOGRAMA CLAVE
NOTA: la barra de fotogramas cambiara de color al color plomo. El fotograma 1 y el 36
incluyen ahora un punto como seal de ser fotogramas claves de control.
5.- Seleccionar Herramienta SELECCIN y seleccionar objeto (todo)
6.- Mover el objeto a la parte derecha del Escenario
7.- Seleccionar fotograma numero 1 (ftgr#1) con un solo clik
8.- Presionar Botn Derecho y escoger opcin: CREAR INTERPOLACION DE MOVIMIENTO
NOTA: Aparecer una flecha continua desde ftgr #1 al ftgr#.36
9.- Ejecutar la animacin con la tecla ENTER
Se puede editar la pelcula de este documento creado en FLASH con la activacin de las teclas
CTRL+ ENTER. Se abre otra ventana independiente de FLASH. Cerrar dicha ventana para
regresar al editor de FLASH. Se puede grabar el documento FLASH como una pelcula con la
extensin (.swf). Estos archivos son comprimidos y sirven para exportan a otros programas como
paginas Web para el Internet.
Animacin con efecto Zoom out
Este efecto permite que el objeto se ampli en su propio punto de control. Ejemplo, crear un efecto
zoom out para el texto HOLA que dure 4 segundos.
PASOS:
1.- Seleccionar herramienta TEXTO de la Caja de Herramientas
2.- Identificar nuevo icono de control (+A ) y marcar con un solo clic el inicio del texto.
3.- Escribir la palabra HOLA
4.- Seleccionar el fotograma 48
6.- Regresar al fotograma 1 y con el botn derecho opcin: Crear Interpolacin de movimiento
7.- Volver al fotograma 48
8.- Con la Herramienta SELECCIN seleccionar el texto
9.-Con Herramienta TRANSFORMACION LIBRE marcar texto. Se crean 8 anclas de control
10.- Marcar cualquier ancla de control y ampliar el texto. Para ampliar proporcionalmente
utilizar al mismo tiempo la tecla SHIFT
11.- Ejecutar la animacin con la tecla ENTER
4.2. ANIMACIN CON ROTACIN

La animacin por movimiento puede ser ampliada con el efecto de rotacin, opcin que puede ser
activada desde el Panel de propiedades, en la opcin rotacin. Se puede indicar dos tipos de
rotacin, (1) horaria y (2) antihoraria.
Ejemplo 3: Rotar un cuadrado, por 3 segundos.
PASOS:
1.- Seleccionar herramienta Rectngulo de la Caja de Herramientas
2.- Dibujar un rectngulo
3.- Seleccionar el fotograma 36 con un click
4.- Con el botn derecho activar opcin: INSERTAR FOTOGRAMA CLAVE
5.- Regresar el fotograma 1 y con el botn derecho opcin: Crear Interpolacin de movimiento
7.- Ir al PANEL DE PROPIEDADES
NOTA: Si este panel no esta activado, abrir con la opcin: Propiedades desde el Men:
VENTANA. O en su defecto con las teclas CTRL + F3
8.- En la caja Girar marcar la opcin horario / antihoraria
9.-Ejecutar la animacin con ENTER
NOTA: La rotacin se realiza alrededor del Centro de Registro del objeto, el mismo que puede ser
modificado, creando smbolos (Ver capitulo sobre Smbolos)
4.3. ANIMACIN POR INTERPOLACIN DE FORMA

Este tipo de animacin permite modificar los atributos del objeto desde un modelo inicial a uno final
basado en la tcnica conocida como morfismo. Por ejemplo con este tipo de animacin se puede
transformar un cuadrado en un circulo en la lnea de tiempo indicada.
Ejemplo 4: Transformar un rectngulo en un ovalo de arriba hacia abajo, en un lapso de 2.5
segundos
PASOS:
1.- Seleccionar herramienta Rectngulo y dibujar un rectngulo parte superior
2.- Seleccionar el rectngulo con doble clic (revisar que este marcado tanto el contorno
Como el relleno)
4.- Presionar Botn Derecho y escoger opcin: INSERTAR FOTOGRAMA CLAVE VACIO
5.- Seleccionar herramienta Ovalo y dibujar ovalo en la parte inferior.
6.- Seleccionar todo el objeto (contorno y relleno)
7.- Regresar al fotograma 1 y marcarlo con un click
8.- Ir al PANEL DE PROPIEDADES y escoger en Opcin animar: FORMA
NOTA: Aparecer un fondo verde claro y una flecha continua.
9.- Ejecutar la animacin por FORMA con la tecla ENTER
Se puede notar que existe una transformacin de un tipo de objeto a otro tipo de objeto.
En caso de ser necesario recuperar un objeto intermedio, hay que marcar el fotograma
correspondiente, y con el botn derecho crear un FOTOGRAMA CLAVE. Solo as se podr
manipular este nuevo objeto, creado del efecto morfismo
4.4. ANIMACIN POR TRAYECTORIA
Las animaciones por movimiento hasta aqu tratadas han sido realizadas solo de manera lineal,
es decir en lnea recta desde el punto inicial al punto final. Sin embargo puede ser necesario, que
la animacin tenga su propia trayectoria diferente a la lineal.
Para modificar esta trayectoria es necesario utilizar una capa especial llamada GUIA DE
TRAYECTORIA, la misma que contendr la nueva trayectoria.
Ejemplo 5: Mover una pelotita por una trayectoria ondulada durante 3.5 segundos
PASOS:
1.- Seleccionar herramienta Ovalo y dibujar un circulo
4.- Seleccionar el objeto y moverlo a nueva posicin( parte derecha)
5.- Regresar al fotograma 1 y con botn derecho crear Interpolacin de Movimiento
6.- Seleccionar icono aadir gua de trayectoria en la parte inferior de las capas*
7.- Seleccionar el fotograma 1 de esta nueva capa creada
8.- Con la Herramienta PLUMA
crear una trayectoria ondulada
9.- Seleccionar el circulo y posicionar su punto de registro al inicio de la trayectoria
10.- Ir al fotograma 42 y seleccionar el circulo y nuevamente posicionar su punto de registro
sobre la trayectoria ( en la parte final)
11.- Ejecutar la animacin con ENTER
La pelotita seguir la nueva trayectoria. Si se visualiza la pelcula con CTRL + ENTER, no se
visualiza la lnea de trayectoria.
* NOTA: El tema de las capas sern tratadas en el siguiente capitulo con mayor detalle.
El ejercicio anterior tiene una interfaz parecida a la de la Fig. 5.
Fig. 5. Ejemplo de un movimiento por trayectoria
Ejercicios
[ ] 1.- Realizar una animacin por movimiento de un cuadrado de arriba hacia abajo
[ ] 2.- Realizar una animacin del texto AMIGOS con efecto ZOOM IN
[ ] 3.- Realizar una animacin que se traslade y al mismo tiempo de ampli un objeto
[ ] 4.- Realizar una animacin de colisin de una pelotita en una pared
[ ] 5.- Realizar una animacin de rotacin de una ruedita de tren
[ ] 6.- Realizar una animacin de FORMA de una lnea a un cuadrado
[ ] 7.- Realizar una animacin de FORMA desde un cuadrado azul a un circulo rojo
[ ] 8.- Realizar una animacin desde una LETRA de un tipo otra LETRA con otro tipo
de letra. NOTA: Hay que separar el objeto.
[ ] 9.- Realizar dos animaciones de movimiento en dos capas diferentes
[ ]10.- Realizar las cuatro animaciones bsicas estudiadas en cuatro capas diferentes.
5.- LAS CAPAS

Flash permite agrupar las animaciones en capas. Existen cuatro tipos de capas:
(1)
(2)
(3)
(4)
Capa Normal, donde se disean los objetos y animaciones

Capa Carpeta, elemento para organizar capas (modelo archivo-carpeta)
Capa Gua de Trayectoria: para crear guas de movimiento
Capa Mascara: capa especial para crear ventanas dentro de objetos
En la Figura 6 se aprecia el panel de control de las capas, las mismas que pueden ser identificadas
tanto con nombres dados por el usuario, con un panel de colores para identificar los objetos que
pertenecen a una determinada capa. Se pueden bloquear capas y ocultar capas.
Fig. 6. Panel de control de capas
5.1. Las Mascaras

Las CAPAS o layers, sirven para ordenar los objetos y la secuencia de las animaciones. Estas
capas son como laminas de acetato transparente apiladas unas sobre las otras. En las reas de
una capa que no disponen de contenido, puede ver el contenido de las capas que estn por
debajo. Las capas son tiles para organizar el contenido del documento y varias animaciones.
Por ejemplo, puede mantener las ilustraciones de fondo de una capa y los botones de navegacin
de otra capa. Adems, puede crear y editar objetos en una capa sin que ello afecte a objetos de
otra capa. Las operaciones con las capas pueden ser cualquiera de las siguientes:
Asignar nombre a la capa (con un doble clic en el nombre, izquierda de lnea de tiempo)
Seleccionar capas
Insertar capas
Ocultar y mostrar capas
Bloquear una capa
Aadir una capa y asignarle un nombre
Cambiar el orden de las capas
Organizar capas en una carpeta
Aadir una capa de mscara
Aadir una capa de guas
Eliminar capas
Ejemplo 6: creacin de un texto en movimiento de tipo acerca de

En este ejercicio pondremos nombre a las capas y crearemos una capa especial llamada
mascara, la misma que permite crear una especia de ventana para visualizar todo lo que pasa
en las capas inferiores. Muchos programas utilizan esta tcnica para mostrar un texto que se
despliega verticalmente, por ejemplo para informar autores o versiones en el estndar acerca de
o el about.
10
Para crear un texto que se desplace dentro de un marco, realizar los siguientes pasos:
PASOS:
1) Para asignar un nombre a una capa, haga doble Click en el texto capa1 a la izquierda de la
lnea de tiempo. Editar un nuevo nombre: Texto;
2) Si necesita hacer mas lenta la animacin; asignamos un valor de 7 fps (CTRL + J);
3) Seleccionar fotograma 1 y con la herramienta Texto escribir una caja de texto:
Tutorial de Flash CS-6
ESPOCH
Fernando Proao 2015
4) Botn Derecho y seleccionar Crear Interpolacin de Movimiento;
5) Ir al fotograma 20 y presionar F6;
6) Mover la caja con el texto hacia arriba (aparecer una lnea con flecha en fondo celeste);
7) Crear una nueva capa y asignar el nombre de Mascara;
8) Dibujar un rectngulo sin relleno encima del texto;
9) Seleccionar esta capa y con el botn derecho escoger la opcin: Mscara ;
10) Si no se bloquea (el candado es cerrado), pulse el candado para activar la mscara;
11) Ejecute la pelcula con CTRL + ENTER para ver el texto a travs del rectngulo.
De igual forma se podrn combinar textos con otro tipo de grficos (ej. Crculos), o figuras
geomtricas dentro de otras figuras geomtricas para obtener diferentes tipos de animaciones
con efectos especiales.
6.- LOS TEXTOS EN FLASH
Existen tres tipos de textos:
(1) Texto tipo: ESTATICO, permite disear textos fijos en los escenarios. Ej. Un titulo, un
subtitulo
(2) Texto tipo: DINAMICO, permite crear cajas donde se emitirn textos transferidos o
calculados en una aplicacin. Ej. un resultado de una operacin matemtica.
(3) Texto tipo: INTRODUCCION DE TEXTO, permite crear una caja como interfaz para que el
usuario ingrese valores. Se lo visualiza solo cuando se ejecuta la pelcula de Flash (Ctrl +
Enter). Ej. Para crear un formulario, donde se pide el nombre, apellido, direccin, etc.
Ejemplo 7: animacin de letras de un texto (Lluvia de letras)
El siguiente ejercicio permite dar movimiento a las letras de un texto desde varias partes del
escenario y unirse para formar una palabra u oracin.
PASOS:
1) Escribir un texto con la herramienta texto [T] (ej. HOLA) en el escenario ;
2) Seleccionar el texto y ejecutar el men Modificar -> Separar (Ctrl + B);
3) Ejecutar men Modificar -> Lnea de Tiempo -> Distribuir en capas (Ctrl + Shift + D). Cada
letra del texto es posicionada en una propia capa. El nombre de la capa corresponde a cada letra;
4) Crear un fotograma de fin de pelcula (ej. fotograma Nro. 15) con el botn derecho del mouse y
la opcin: Insertar fotograma clave. Repetir para cada capa;
5) Volver al fotograma Nro. 1 de cada capa y mover cada letra a otra posicin en el escenario;
6) Seleccione todas los fotogramas de la lnea de tiempo (use tecla Shift) y en animar seleccione
MOVIMIENTO;
7) Ejecutar la animacin con ENTER o la pelcula flash con Ctrl + ENTER.
Ejemplo 7: Creacin de un Formulario bsico de datos

Este ejemplo muestra como fcilmente se puede realizar un Formulario tpico de ingreso y
confirmacin de datos personales.
11
PASOS:
1) Crear una capa titulada titulo;
2) Escribir un titulo grande en la parte superior que diga DATOS PERSONALES;
3) Crear otra capa titulada Datos
4) Escribir textos estticos con los siguientes datos y repartirlos en el formulario (Ver. Fig. 9)
Nombres *, Apellidos *, Sexo *, M, F, Direccin *, Ciudad* , Pas *, e-mail, Profesin
5) Crear debajo de los textos Nombres*, Apellidos*, Direccin*, Ciudad*, e-mail* una caja de texto
rectangular de tipo introduccin de texto desde el panel de Propiedades (parte izquierda)
6) Abrir el Panel de Componentes;
7) Arrastrar el componente CheckBox y debajo de la letra M;
8) Arrastrar otro componente CheckBox y ubicarlo debajo de la letra F;
9) Arrastrar el componente ComboBox y ubicarlo junto al texto Pas;
9) En el panel de propiedades, opcin labels editar varios nombres de pases (Ej. Alemania,
Chile, Ecuador..);
10) Arrastrar el componente List y ubicarlo junto al texto Profesin;
11) En el panel de propiedades, opcin labels editar varias profesiones (Ej.. Arquitecto,
Ingeniero, Doctor)
12) Crear otra capa titulada Botones;
13) Crear dos botones, uno con el texto Borrar y otro Confirmar
14) Ejecutar la pelcula para ver resultados. El cursor cambiara a un cursor de texto editable en
todos los campos as diseados.
El Formulario terminado en modo de edicin (no ejecucin) se presenta en la Fig. 5.
Nota: Es un estndar para Formularios el indicar que campos son obligatorios y cuales no. Para
esto se utiliza algn carcter como el *, con una nota aclaratoria al final. Con programacin en
Action Script se podr controlar el uso de los botones y el control de los campos obligatorios.
Fig. 7: Formulario en el escenario de Flash (en edicin)
12
7.- LOS SIMBOLOS

Flash permite crear objetos especiales que tienen propiedades propias, las mismas que pueden
ser almacenadas en la Biblioteca de Flash y ser utilizadas las veces que sean necesarias.
Se pueden crear los smbolos de dos maneras:
1) Creando desde la opcin Men Insertar -> Nuevo Smbolo
2) Creando los objetos o animaciones y luego creando un smbolo, con la opcin nuevo
Smbolo con el botn derecho del Mouse (menos recomendado)
TIPO DE SIMBOLOS
Existen tres tipos de smbolos:
(1) Smbolo: Clip de pelcula, permite crear un animacin propia en el smbolo
(2) Smbolo: Botn, permite crear un smbolo que se comporta como un botn.
(3) Smbolo: Grfico, permite crear un grfico simple o compuesto para futuro uso.
7.1. SMBOLO CLIP DE PELICULA
Permiten crear animaciones completas, las mismas que son representadas con el smbolo clip de
pelcula. Una vez creado un clip de pelcula, este aparece en el panel de smbolos y pueden ser
insertados en cualquier escenario, las veces que sean necesarios, logrndose un completo
reciclaje de objetos.
Ejemplo 8: crear varias animaciones de lneas horizontales, verticales e inclinadas a partir
de un clip de pelcula
PASOS:
1.- Men Insertar
2.- Opcin Crear nuevo smbolo
3.- En la caja nombre escribir nuevo nombre, ej. Lnea-animada
4.- Seleccionar opcin circular clip de pelcula
5.- Botn Aceptar
6.- Crear una animacin de movimiento de una lnea vertical de arriba hacia abajo
7.- Ir a Escena 1
8.- Desde el panel de smbolos, insertar el smbolo Lnea-animada
9.- Nuevamente insertar el smbolo: Lnea-animada
10.- Seleccionar el smbolo y seleccionarlo con la herramienta Transformacin Libre
11.- Rotar en 90 grados el smbolo
12.- Nuevamente insertar el smbolo: Lnea-animada
13.- Seleccionar este nuevo smbolo y rotarlo 45 grados
14.- Ejecutar la pelcula. NOTA se vern tres animaciones : 1 vertical(original), 1 horizontal y 1
inclinada.
7.2.- SIMBOLO BOTON
El programa FLASH contiene una amplia gama de opciones para crear, editar y controlar el uso de
botones, los mismos que pueden ser utilizados tanto en el mismo Flash como pueden ser
exportados a otros programas.
El botn de Flash es un pequeo smbolo (tipo botn) que contiene nicamente CUATRO (4)
fotogramas especiales que son:
(1)
(2)
(3)
(4)
Fotograma REPOSO: contiene informacin cuando el botn no esta activado;

Fotograma SOBRE: contiene informacin cuando el mouse esta sobre el botn;
Fotograma PRESIONADO:: contiene informacin cuando se hace clic sobre el botn;
Fotograma ZONA ACTIVA: zona sensible al mouse o los clicks
13
Fig. 8. Estados de un botn en Flash CS-6

Para que un objeto se comporte como un botn:
1) Seleccionar el objeto
2) Botn derecho
3) Opcin: Convertir en Smbolo
4) Opcin: botn
5) [Opcional] asignar un nombre
6) Botn: ACEPTAR
NOTA: El punto de simetra o de registro, puede ser modificado mediante la seleccin de las nueve opciones
que aparecen en la parte superior derecha de la ventana Convertir en smbolo. Por default el punto de
registro es el centro geomtrico del objeto.
Ejemplo 9: creacin de botones de control
BOTN ESTATICO DE COLORES:
PASOS:
1) Crear una capa con el nombre Boton con color;
2) Dibujar un circulo con un relleno degradado plomo;
3) Seleccionar crculo y clic botn derecho, opcin Convertir en smbolo;
4) Opcin botn y asignar el nombre Botn-1. Confirmar con el botn Aceptar;
5) Moverse al segundo fotograma y presionar F6;
6) Cambiar el color del botn a un degradado rojo;
7) Moverse al tercer fotograma y presionar F6;
8) Cambiar el color del botn a un degradado verde;
9) Moverse al cuarto fotograma y presionar F6;
10) Cambiar el color del botn a un degradado azul;
11) Ejecutar la pelcula con CTRL + ENTER.
NOTA: Se vern los diferentes colores de acuerdo a la accin en el botn.
BOTN DINAMICO
PASOS:
1) Crear una capa con el nombre Boton dinmico;
2) Seleccionar la herramienta rectngulo y pulsar el icono
y asignar un valor > 0 para las
esquinas;
3) Dibujar un rectngulo con un relleno degradado rojo;
4) Seleccionar objeto y clic botn derecho, opcin Convertir en smbolo;
5) Opcin botn y asignar el nombre Botn-2. Confirmar con el botn Aceptar;
6) Moverse al segundo fotograma y presionar F6;
7) Reducir el tamao del rectngulo y cambiar el color a un degradado azul. Se puede utilizar la
herramienta transformacin libre (Q) para reducir el tamao del botn;
8) Moverse al tercer fotograma y presionar F6;
9) Ahora aplastar el rectngulo con (Ctrl. + T) y cambiar el color a un degradado plomo;
10) Ejecutar la pelcula con CTRL + ENTER.
NOTA: Se puede tambin asignar un texto aclaratorio junto al botn o crear una caja contextual
dinmica estndar (caja amarilla en la parte inferior derecha del objeto)que se despliegue de
acuerdo a la accin del botn.
BOTN ANIMADO
Con un botn animado usted puede controlar la ejecucin de animaciones de acuerdo al estado del
botn. Por ejemplo usted puede colocar un clip de pelcula en el fotograma sobre y otro clip en
le fotograma Presionado los mismos que se ejecutaran de acuerdo a las acciones del botn. El
14
siguiente ejemplo crea un giro de 55 grados en el estado sobre y una giro antihorario estado
presionado durante 15 fotogramas (en 1.25 segundos).
PASOS:
1) Crear una capa con el nombre Boton animado;
2) Pulse Ctrl + F8 y cree un nuevo smbolo tipo grafico y ponga el nombre reposo;
3) Dibuje un botn rectangular con relleno degradado azul;
4) De igual manera cree un grafico con el nombre sobre y color rojo;
5) Cree otro grafico con el nombre presionado y de color verde;
6) Crearemos una animacin como clip. Pulse Ctrl. + F8 y ponga el nombre clip sobre
7) Desde la biblioteca arrastre el grafico sobre hasta el centro del escenario que coincidan los
centros.
8) Vaya al fotograma Nro. 1 y con el botn derecho seleccione opcin: Crear Interpolacin de
movimiento;
9) Vaya al fotograma Nro. 15 y pulse F6
10) En el fotograma Nro. 15, rote el botn en 55 grados (use Ctrl + T)
11) En este fotograma abra la ventana de Acciones (F9), y escriba el siguiente script:
stop ( ) ;
12) Regrese al escenario principal. Haga clic en el icono de escenario parte superior derecha;
13) Cree un nuevo clip de pelcula con Ctrl.+ F8, y asigne el nombre: clip presionado
14) Desde la biblioteca arrastre el grafico presionado hasta el centro del escenario;
15) En el fotograma Nro. 1 cree una interpolacin de movimiento
16) Vaya al fotograma 20 y presione F6
17) Regrese al fotograma Nro. 1 y en el panel de propiedades escoja la opcion de girar; antihorario
(parte inferior izquierda);
18) Ahora necesitamos crear el botn de control. Presione Ctrl + F8 y cree un botn con el
nombre: botn-control;
19) En el primer fotograma de este botn, desde la biblioteca arrastrar el grafico reposo hasta el
centro del escenario;
20) Vaya al segundo fotograma (sobre) y pulse F6. Borre el grafico actual;
21) Arrastre desde la biblioteca el clip: clip-sobre y cntrelo en la pantalla;
22) Vaya al tercer fotograma (presionado) y pulse F6. Borre el grafico actual;
23) De la biblioteca arrastre el clip: clip-presionado y cntrelo en la pantalla;
24) Vuelva al escenario principal y cree el botn de control. Para esto arrastre desde la biblioteca el
grafico botn-control
25) Ejecute el clip general con CTRL + ENTER.
Nota: En el paso 11), al escribir un script, en el fotograma Nro. 15 aparece una pequea letra a
indicando que existe una accin en este fotograma.
De igual manera en el panel Propiedades, se puede asignar un texto a cualquier fotograma el
mismo que aparece en la lnea de tiempo con una banderita color rojo.
Todos los smbolos creados son automticamente almacenados con el archivo Flash. Para editar
cualquier smbolo se puede utilizar el icono smbolo en la parte derecha de la lnea de tiempo o
haciendo doble clic en el icono del smbolo correspondiente desde el panel Biblioteca (Ctrl + L)
Flash incorpora una amplia gama de grficos para botones, los cuales se pueden acceder desde:
Ventana -> Otros Paneles -> bibliotecas Comunes -> Botones
QUE ES UN BOTN INVISIBLE?
Para ciertas aplicaciones en FLASH es necesario que no se disee el tpico botn circular o
rectangular, sino un rea sobre un grfico, a un grfico como botn. Para esto se debe crear un
botn invisible de acuerdo a los siguientes pasos:
PASOS:
1.- Crear un nuevo smbolo (Ctrl + F8)
2.- Seleccionar opcin: Grfico
3.- Asignar un nombre
4.- Aceptar
15
5.- Crear un objeto de acuerdo al contorno del futuro botn

6.- Seleccionar propiedad color fondo y color trazo y modificar el valor de Alfa = 0% desde el
panel de propiedades.
8.- Seleccionar opcin Botn
9.- Asignar un nombre
10.- En el fotograma especial : Reposo, traer de la biblioteca el smbolo grfico previamente
creado. Si no esta abierta este panel, activarla con Ctrl + L
11.- Accionar F6, para crear fotograma clave en fotograma: Sobre
12.- Accionar F6, para crear fotograma clave en fotograma: Presionado
13.- OPCIONAL: Accionar F6, para crear fotograma clave en fotograma: Zona Activa
14.- Ir al Escenario
15.- Del panel Biblioteca, traer y soltar el botn previamente creado en el sitio requerido
7.3. SMBOLO GRFICO
Para reciclar un objeto complejo, es recomendado crearlo a partir del smbolo grfico. Una vez
creado, este smbolo podr ser insertados las veces que sean necesarias en las diferentes
escenas de la pelcula.
Igual que con un smbolo: clip de pelcula, una vez insertado un smbolo grfico, este podr ser
modificado con la herramientas Transformacin Libre.
Ejemplo 10 : crear un smbolo tipo grfico, que contenga la silueta de una persona.
PASOS:
2.- Seleccionar opcin: Grfico
3.- Asignar un nombre, ej. personita
4.- Botn Aceptar
5.- Crear un objeto de acuerdo al contorno de una persona
6.- Ir a una Escena
7.- Insertar en la Escena el smbolo personita
8.- Con la herramienta Transformacin Libre, modificar el tamao, y aspecto del smbolo
9.- Ejecutar la pelcula
NOTA: Se visualizaran diferentes objetos que al parecer son diferentes, pero, que fueron creados
todos a partir de un solo objeto, que es el smbolo grfico.
8.- NAVEGACION EN FLASH

Se pueden realizar transiciones entre escenas de una pelcula, lo que permite disear la
navegacin por pginas. Se pueden realizar de varias maneras siendo las principales cuatro:
(1)
(2)
(3)
(4)
Navegacin bsica con botones y comandos de Action Script

Navegacin con cajas de dialogo y comandos de Action Script
Navegacin por medio de mapas sensitivos (uso de botones invisibles)
Navegacin avanzada por medio de instancias de objetos
8.1. Navegacin Bsica

Para crear una navegacin entre dos Escenas o pginas, se debe seguir los siguientes pasos:
PASOS:
1.- Disear la primera Escena (nombre por omisin es: Escena 1)
2.- Insertar una nueva Escena con Men: Insertar, Opcin: Escena (nombre: Escena 2)
3.- Seleccionar Escena 1
4.- Insertar un smbolo botn (si existe) o crear un nuevo botn
5.- Seleccionar el botn
6.- Abrir el panel de Acciones con F9
7.- En el editor de Acciones escribir el siguiente cdigo del lenguaje Action Script:
16
on (press) {
gotoAndPlay (Escena 2, 1) ;
}
Nota: El cdigo anterior nos indica literalmente en ingles que: al presionar el botn, vaya y
ejecute todo lo que este en la Escena 2 a partir del fotograma 1
8.- Ir a la Escena 2
9.- Insertar un smbolo botn (si existe) o crear un nuevo botn
10.- Seleccionar este nuevo botn
11.- Abril panel de Acciones (F9)
12.- En el editor, escribir el siguiente cdigo:
on (press) {
gotoAndPlay (Escena 1, 1) ;
}
Nota: Este nuevo cdigo nos indica literalmente al presionar el botn, vaya y ejecute todo
lo que este en la Escena 1 a partir del fotograma 1
13.- Volver a la Escena 1 y seleccionar el fotograma mas avanzado
14.- Abrir panel de Acciones y en el editor escribir el siguiente cdigo:
stop();
15.- Abrir la Escena 2 y seleccionar el fotograma mas avanzado
16.- Abril el panel de Acciones y en el editor escribir el siguiente cdigo:
Nota: Este nuevo cdigo controla que las escenas 1 y 2 no se ejecuten una tras otra
17.- Ejecutar la pelcula con Ctrl + Enter
En el caso de una presentacin profesional que requiere mas de dos escenas se recomienda lo
siguiente:
1.- Asignar un nuevo nombre a cada Escena (Con teclas: Mayuscula+ F2)
2.- En cada botn escribir el cdigo correspondiente, pero se escribir solo una vez y bastara
copiar, pegar y cambiar solo los nombres de las escenas
3.- No olvidar de escribir en el ultimo fotograma de la capa mas avanzada el cdigo: stop(); para
contralor que cada escena se quede en la pelcula.
8.2. Navegacin por medio de Mapas Sensitivos
Se pueden crear un men especial con un grfico de fondo, el mismo que por su aspecto puede
ser convertido en un mapa sensitivo, el mismo que permitira crear una navegacin a otras
escenas.
Para este propsito es necesario crear botones invisibles, los mismos que sern insertados sobre
el objeto base del Men.
Ejemplo 11 : crear un Mapa Sensitivo con el mapa del Ecuador
PASOS:
1.- Crear cuatro Escenas: Mapa, Costa, Sierra y Oriente.
2.- En Escena Mapa insertar un grfico con el mapa del Ecuador. Bloquear la capa con el icono
representado por un candado
3.- Crear un nuevo smbolo tipo grfico, con el contorno* de la costa del Ecuador y asignar un
fondo transparente y un contorno alpha = 0. Asignar un nombre = costa
4.- Crear un nuevo smbolo tipo grfico, con el contorno* de la sierra del Ecuador y asignar un
fondo y contorno alpha =0. Asignar un nombre = sierra.
5.- Crear un nuevo smbolo tipo grfico, con el contorno* del oriente del Ecuador y asignar un fondo
y contorno alpha =0. Asignar un nombre= oriente
6.- Crear un smbolo Botn (ej. Botn-costa) e insertar el grfico costa
7.- Crear un smbolo Botn (ej. Botn-sierra) e insertar el grfico sierra
8.- Crear un smbolo Botn (ej. Botn-oriente) e insertar el grfico oriente
9.- Volver a la Escena principal e insertar el botn Botn-costa, sobre la posicin exacta en el
mapa.
17
10.- De igual manera insertar el botn Botn-sierra sobre el sitio correspondiente en el mapa
11.- Insertar el botn Botn-oriente en el sitio correspondiente del mapa
12.- De igual manera que en la navegacin bsica con botones, crear los Script necesarios para
los tres botones invisibles que tienen un contorno similar al del mapa de base.
13.- Crear un botn de regreso en las Escenas Costa, Sierra y Oriente
14.- Programar este botn con el Script necesario para regresar de las escenas a la escena inicial.
15.- Ejecutar la pelcula.
*NOTA: Para dibujar con precisin, los botones invisibles, se puede copiar el mapa original en la
pantalla de edicin de los smbolos. Bloquear la capa. Luego con la herramienta pluma dibujar el
contorno del rea a representar (ej. la silueta del mapa de la costa)
8.3. Navegacin con instrucciones condicionales IFs
Una forma til de navegar es creando una caja de dialogo, para que el usuario ingrese un valor
entero que indique el numero de la pagina a donde navegar. Se podr controlar el valor numrico y
el rango, con la instruccin condicional if emitiendo un mensaje de error en una caja de texto tipo
dinmico.
Ejemplo 12: crear una navegacin que pida un nmero entero del 1 al 3.
PASOS
1.- Crear las escenas de navegacin (escena 1, escena 2, escena 3, escena 4)
2.- Crear un botn de aceptacin (Ej. botn-OK)
3.- En escena 1 crear un texto tipo introduccin de texto
4.- Seleccionar este texto y en la caja de propiedades en la casilla variable asignar el nombre:
valor
6.- En escena 1 crear un texto tipo dinmico y asignar en la casilla variable el nombre mensaje
7.- En escena 1 insertar el botn creado en paso 2
8.- Seleccionar el botn y escribir el siguiente cdigo:
// navegacin con if s y else
on(release) {
mensaje ="";
if(valor == 1) {
valor="";
gotoAndPlay ("Escena 2",1);
else
else
}
if (valor == 2) {
valor="";
gotoAndPlay ("Escena 3",1);
}
mensaje = valor+ " no existe!!!";
valor="";
}
9- En cada escena y en el fotograma mas alejada de la capa mas alejada escribir el siguiente
script:
stop();
10.- En las escenas escena2, escena3, y escena4, insertar un botn men, programado para
regresar a la escena 1 (usar cualquier mtodo conocido)
11.- Ejecutar la pelcula.
18
8.4. Navegacin por Instancias

Con las propiedades de objetos de programacin, en FLASH se pueden crear instancias de los
smbolos Clip de pelcula y Botn, que son nombres o alias que permiten controlar dichos objetos
desde cualquier parte del documento Flash.
Se deber asignar un nombre en la caja instancia del panel de propiedades, una vez que se ha
seleccionado el smbolo. Luego se puede crear un script en una capa independiente al smbolo
(por ej. no se usara el smbolo botn) y hacer referencia del mtodo con la sintaxis siguiente:
Nombre-instancia._nombre-propiedad = valor
Ej.
Cuadradito_cp._rotation = 45;
// crea un instruccin que hace rotar en 45 grados al
objeto con una instancia o referencia Cuadradito.cp
Ejemplo 13: crear una navegacin por tres escenas utilizando instancias de smbolos
botones.
PASOS
1.- Crear las escenas de navegacin (escena 1, escena 2, escena 3)
2.- Crear tres botones (boton1, boton2, menu)
3.- En escena 1 insertar los botones: escena1 y escena 2
5.- En escena 2 y escena 3 insertar el botn: menu
6.- Crear una instancia para el botn: boton1 (botn1_btn) en panel propiedades
7.- Crear una instancia para el botn: botn2 (botn2_btn)
8.- Crear una instancia para el botn: menu (menu_btn) seleccionando dicho botn en escena 2
9.- Repetir el paso 8 pero para el botn de la escena 3
10.- Crear en escena 1 una capa (acciones) y escribir el siguiente cdigo:
boton1_btn.onPress = function() {
gotoandplay(Escena 2, 1);
}
boton2_btn.onPress = function() {
gotoandplay(Escena 3, 1);
}
menu_btn.onpress = function() {
gotoandplay(Scene 1, 1);
}
menu_btn.onpress = function() {
gotoandplay(Scene 1, 1);
}
13.- En cada escena en el fotograma mas alejado y en la capa mas alejada escribir el siguiente
cdigo: *
stop( );
* Nota: la instruccin stop(); puede ser tambin codificada al inicio del script del paso 10 y
tambin en el del 11 y del 12
19
9.- USO DE SONIDO

Se pueden importar archivos de sonido y video tanto al escenario como a la biblioteca. Para
importar un archivo seguir los siguientes pasos:
PASOS:
1) Ir al Men: File (Archivo)
2) Escoger Opcin: Import (Importar)
3) Opcin: Import to stage (Importar a la escena /biblioteca)
4) Seleccionar tipo de archivo. (Ejemplo de sonido .wav )
5) Botn Aceptar
Los archivos de sonido compatibles con Flash, son listados en la ventana luego de la opcin
Insertar, siendo los siguientes:
AIFF (.aif) es el Standard del formato de sonido Macintosh.
WAV (.wav) es el formato estndar de sonido para Windows
MP3 (.mp3) es el formato de comprensin para editar sonidos con duracin mas largo
Una vez incorporado a la biblioteca este archivo de sonido puede ser ejecutado en cualquier
fotograma del documento. En el panel de propiedades, en la parte derecha se desplegara una lista
con todos los archivos de sonido que usted haya importado previamente.
En el fotograma que exista un sonido se visualiza una marca de onda que indica la presencia de un
sonido a partir de ese fotograma. En la figura 9, se puede ver que se han incorporado dos sonidos,
uno a partir del fotograma Nro. 1 y el otro a partir del Nro. 10.
Fig. 9. Presencia de sonidos en fotogramas

Una vez insertado un sonido en el documento Flash, el clip de sonido puede ser editado en ciertos
parmetros bsicos con la opcin de abrir la ventana de control de sonidos. Para abrir esta
ventana (Ver Fig. 10), realizar un doble clic en el icono del clip de sonido que se lista en el panel de
Bibliotecas (panel en la parte derecha)
Fig. 10. Panel de Propiedades de sonido

20
Una vez que se ha insertado el clip de sonido desde el panel de biblioteca, este sonido puede ser
modificado en sus propiedades del sonido final. Se puede emitir el sonido ya sea en el parlante
izquierdo, derecho, con cambio de volumen, etc. En la Fig. 11 se puede ver la ventana de control
con los efectos principales de edicin final del sonido.
Fig.11. Editor de efectos del sonido

Ejemplo 14: realizar el efecto choque con sonidos
PASOS:
1) Crear una capa carrito y dibujar un grafico de un auto;
2) Crear una capa pared y dibujar un grafico de una pared;
3) Crear una capa sonidos
4) Crear una interpolacin de movimiento para el auto (1 -10)
5) Crear otra interpolacin de movimiento para el auto (11 -20)
6) Importar tres diferentes sonidos (EJ. Del archivo Windows /media..)
7) Seleccionar capa sonidos y en el fotograma Nro. 1 asignar un primer sonido;
8) En el fotograma Nro. 10 asignar el segundo sonido;
9) En el fotograma Nro. 20 asignar el tercer sonido, este imitara un choque;
10) En el fotograma Nro. 20 de la capa pared, dibujar el efecto del choque;
11) Ejecutar la animacin.
NOTA: El documento Flash deber ser similar al presentado en la Fig. 10
.
Fig. 12: Uso de sonidos para simular un choque

Nota: Se aconseja que los sonidos estn agrupados en una capa. Si desea editar el sonido, en el
panel Propiedades hacer clic en el botn Editar para escuchar el sonido seleccionado. En el caso
del control de botones, tambin se puede asignar a cualquier de sus cuatro estados un sonido
diferente.
21
10.- USO DE VIDEO

Se puede importar un video e insertarlo en cualquier fotograma, para que este sea ejecutado. De
igual manera que con los clip de sonido, los videos tienen sus propios paneles de control de ciertos
parmetros.
Los formatos de video que FLASH CS-6 soporta son:
MOV (.mov)
DV (. Dv, .dvi )
AVI (.avi)
MPG (.mpg, .mpeg)
QuickTime
Digital Video Digital
Video para Window
Formato MPG
Ejemplo 15: importar un video y ejecutarlo en una escena

PASOS
1.- Men: Archivo
2.- Opcin: Importar
3.- Opcin: Importar a Biblioteca
4.- En la caja de ubicacin, seleccionar el formato: Video Quick Time
5.- Seleccionar el archivo en dicho formato
6.- Confirmar o modificar los parmetros de importacin
7.- Ejecutar la pelcula en la ventana de control
8.- Modificar el tamao de la pelcula
NOTA: Se crea un ventana con la ejecucin de la pelcula y con botones de control del video.
CONSEJOS PARA EL USO DE VIDEO

Usar un rango de 300 x 240 pixeles para la ventana del video
Usar solo fps en el rango de 12 a 15 fps
Importar pelicular digitales
11.- EL USO DEL ActionScript 3

Todos los objetos en Flash pueden tener una accin determinada por una o mas lneas de
comandos del lenguaje propio de Flash conocido con el Action Script.
Para visualizar el panel de Acciones abra el panel Acciones. Sin no esta disponible se puede
activarlo mediante Ventana - > Paneles de Desarrollo -> Acciones (o con F9).
Fig.13. Panel de ActionScript 3.0 en FLASH CS-6
22
Se despliegan una ventana con reas donde se pueden escoger los comandos, se puede
visualizar el esquema jerrquico de los diferentes elementos de flash (capas, escenas,
componentes, etc.) En la parte derecha aparece el editor de comandos los mismos que pueden
ser: Funciones Globales, Propiedades, Sentencias, Operadores, Clases Incorporadas, Constantes,
Directivas de compilador, Tipos, Datos, Pantallas.
Flash utiliza ciertos smbolos en su sintaxis. Algunos de ellos se listan a continuacin.
El punto (.) sirve para vincular partes de un script.
Un punto y coma (;) en una sentencia de ActionScript, al igual que un punto en una
sentencia normal, indica el final de una sentencia.
Los parntesis () agrupan argumentos que se aplican a una sentencia de ActionScript.
Las llaves {} agrupan sentencias de ActionScript relacionadas. Se pueden utilizar llaves

anidadas para crear una jerarqua de sentencias.
Dos slash (//) se utilizan para escribir comentarios
Slash asterisco (/*) , si el comentario es bastante largo (varias lneas), se usa /* al inicio
del comentario y el */ al final del comentario
En el caso de un botn, las posibles acciones de control pueden ser siete y son las siguientes:
Evento LIBERAR:
on release ( );
Evento PRESIONAR:
on (press);
Evento LIBERAR FUERA:
on (releaseOutside);
Evento SITUAR SOBRE OBJETO:
on (rollOver);
Evento SITUAR FUERA DEL OBJETO:
on(rollOut);
Evento ARRASTRAR SOBRE:
on (dragOver);
Evento ARRASTRAR FUERA:
on (dragOut);
Ejemplo 16: control de animaciones por medio de acciones.

Este programa Flash permite ejecutar un animacin solo cuando se hace clic en un botn, y se
suspende dicha animacin cuando el puntero del mouse esta sobre el botn.
PASOS:
1) Cree una capa con el nombre animacion1;

2) Cree una animacin por interpolacin de movimiento, por ejemplo el movimiento lineal
de una letra. Use 20 fotogramas para dicha animacin;
3) En el fotograma Nro. 1, vaya al panel de Acciones y escriba la accin:
stop () ;
As la animacin no se ejecutara automticamente sino al llamado del botn;
4) Cree otra capa con el nombre botn-control;
5) En esta capa, dibuje un botn rectangular de color azul degradado;
6) Seleccione el grafico del botn y en el panel de Acciones escriba el siguiente script:
on (release) {
play ();
}
on (rollOver) {
23
stop( );
}
7) Compruebe el botn ejecutando la pelcula.
12.- USO DE COMPONENTES EN FLASH

Los componentes de Flash, son elementos previamente programados para realizar una
determinada funcin. Para desplegar el panel de componentes, presione Ctrl + F7. FLASH
agrupa todos los componentes en cinco grupos que son:
(1)
(2)
(3)
(4)
(5)
Componentes para Datos (DATA COMPONENTS)

Componentes para el editor de clips de video
Componentes para editar y personalizar clips de sonido
Componentes para Media Player 6-7 (editor de clips generalizado)
Componentes para Elementos de Interfaces graficas personalizas (GUI)
En la versin FLASH CS-6 se presentan dos grupos de Componentes

(1) USER INTERFACES con 17 opciones (ver Fig 14 (b)
(2) VIDEO con 14 opciones (ver Fig. 14 (c) )
Fig. 14. (a)Ventana de componentes en FLASH 8.0 (b) En FLASH CS-6 User Interfaces (c) Componentes de
Video
Todos los componentes pueden ser editados para tener el modelo final que el diseador
desee. Entre las operaciones que puede realizar estn:
Editar su tamao
Editar su color
Editar su aspecto
Crear nuevos formatos personalizados
Crear nuevos elementos del componente (con Action Script)
13.- USO DE LA AYUDA EN LNEA

Flash tiene incorporado un completo documento con las principales instrucciones tanto del
lenguaje Action Script 3.0 como una descripcin de los elementos generales del programa.
Adems desde el sitio oficial de Flash de la compaa ADOBE se pueden descargar varios
archivos con tutoriales, guas, manuales, como tambin versiones para ser utilizados por
determinados periodos de tiempo de prueba.
Tambin en el Internet existen varias empresas dedicadas a crear tutoriales, trucos y
documentos con explicaciones de cmo crear nuevos efectos especiales.
24
14.- PUBLICACION DE ARCHIVOS FLASH

Los objetos creados en FLASH pueden ser exportados (Publicados) a paginas Web con la opcin
del men File - > Publish o Shift + F12. Por omisin este comando crea un documento HTML
desde el archivo .swf de Flash.
Cuando exporta un archivo de pelcula FLASH 8.0, este es codificado en un formato tipo Unicode
el cual acepta caracteres internacionales. Se puede exportar los archivos de Flash en diferentes
formatos como .gif, .jpeg, png. Otros archivos pueden ser vistos con programas como Quick Time
o Flash Player que estn instalados en su equipo.
Ejemplo 17 : realizar la publicacin de una animacin en PowerPoint

PASOS
1.- Men: Archivo
2.- Opcin: Exportar
3.- Opcin: Exportar Pelcula (Ctrl+Alt+ Shift+S)
4.- Escoger formato gif animado (*.gif)
5.- Fijar el destino del nuevo archivo
6.- Botn Guardar
7.- Ir a PowerPoint
8.- Men: Insertar -> Imagen -> Desde Archivo
9.- Seleccionar archivo
10.- Botn Insertar
Ejemplo 18: crear un archivo ejecutable

PASOS
1.- Men: File / Archivo
2.- Opcin: Publish Setting / Configuracin de publicacin
3.- En el nuevo panel escoger pestaa: Formato (ver Fig. 15)
4.- Marcar opcin Windows Projector (.exe) / Proyecto Windows (.exe)
5.- Marcar icono de carpeta amarilla y fijar el destino del nuevo archivo ejecutable
6.- Botn: Publish / Publicar
7.- Salir con Boton: OK
Fig. 15. Panel de control para crear archivos ejecutables en FLASH CS-6
25
ANEXO A: TECLAS RAPIDAS PARA FLASH- CS-6

GENERALES
F1:
F5:
F6:
F7:
F8:
CRTL + G:
CTRL + SHIFT + G:
CTRL + E:
Panel de Ayuda en lnea

Insertar fotogramas
Insertar fotograma clave
Insertar fotograma
Convertir en Smbolo
Agrupar objetos
Desagrupar objetos
Editar un smbolo
VENTANAS EMERGENTES
SHIFT + F2:
CTRL + J:
CTRL + F8
Ctrl+Alt+ Shift+S
Control de Escenas
Propiedades del Documento
Crear Nuevo Smbolo
Exportar Pelcula
PANELES
CRTL + F3:
CRTL + L:
CTRL + F7:
F9:
CTRL + ALT + S:
CTRL + T:
Panel de Propiedades de los objetos en el escenario

Biblioteca
Panel de Componentes
Panel de Acciones
Escalar y Girar
Transformar (escalar, girar, aplastar)
CAJA DE HERRAMIENTAS
V:
A:
N:
L:
P:
T:
O:
R:
Y:
B:
Q:
F:
S:
K:
I:
E:
H:
Z:
Herr.. SELECCIN
Herr. SUBSELECCION
Herr. LINEA
Herr. LAZO
Herr. PLUMA
Herr. TEXTO
Herr. OVALO
Herr. RECTANGULO
Herr. LAPIZ
Herr. PINCEL
Herr. TRANSFORMACION
Herr. TRANSFORMACION DE RELLENO
Herr. BOTE DE TINTA
Herr. CUBO DE PINTURA
Herr. CUENTAGOTAS
Herr. BORRADOR
Herr. MANO
Herr. ZOOM (+ ALT = reducir)
FIN -
26

El ABC de Flash Cs-6

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

El ABC de Flash Cs-6

Transféré par

Droits d'auteur :

Formats disponibles

ESCUELA SUPERIOR POLITECNICA DE CHIMBORAZO

FACULTAD DE INFORMATICA Y ELECTRONICA

EL ABC DE FLASH CS-6

2.- CONOCIENDO A FLASH CS6

El ABC de Flash CS-6

Fernando Proao B. 2015

Patrones de movimiento. Permite crear un estilo de animacin, se almacena para futuras

Entorno Standard del ambiente de la familia ADOBE SUIT mediante paneles;

3.- MI PRIMERA SESION CON FLASH CS-6

El ABC de Flash CS-6

Fernando Proao B. 2015

Fig. 1. (a) Pantalla de inicio de Flash CS-6

3.2.- RECONOCIMIENTO DE LAS PANTALLAS E INTERFACES

Barra de Men (barra azul, con las opciones del men)

El ABC de Flash CS-6

Fernando Proao B. 2015

: indica que este panel esta abierto

indica que este panel esta cerrado

3.3.- MI PRIMERA SESIN EN FLASH CS-6

Fig. 3. Herramientas bsicas para dibujos en FLASH CS-6

SELECCIN: permite seleccionar uno o mas objetos del Escenario

TEXTO: permite editar textos (texto estatico, dinamico e introduccin de texto)

Fernando Proao B. 2015

LAPIZ: permite dibujos a mano alzada

BOTELLA DE CONTORNO: permite modificar contornos de objetos seleccionados

SELLO DE RELLENO: permite modificar los rellenos de objetos seleccionados

MANO: permite desplazar el rea de trabajo

COLOR DE CONTORNO: controla el color del contorno de un objeto

Contorno o lneas alrededor

4.- TIPOS DE ANIMACION EN FLASH

Fig. 4. Ventana de control de propiedades del documento

Ejemplo 2: animar un circulo de izquierda a derecha por 3 segundos

Fernando Proao B. 2015

4.2. ANIMACIN CON ROTACIN

El ABC de Flash CS-6

Fernando Proao B. 2015

4.3. ANIMACIN POR INTERPOLACIN DE FORMA

Fernando Proao B. 2015

Fig. 5. Ejemplo de un movimiento por trayectoria

El ABC de Flash CS-6

Fernando Proao B. 2015

5.- LAS CAPAS

Capa Normal, donde se disean los objetos y animaciones

Fig. 6. Panel de control de capas

5.1. Las Mascaras

Ejemplo 6: creacin de un texto en movimiento de tipo acerca de

Fernando Proao B. 2015

Ejemplo 7: animacin de letras de un texto (Lluvia de letras)

Ejemplo 7: Creacin de un Formulario bsico de datos

Fernando Proao B. 2015

Fig. 7: Formulario en el escenario de Flash (en edicin)

El ABC de Flash CS-6

Fernando Proao B. 2015

7.- LOS SIMBOLOS

Fotograma REPOSO: contiene informacin cuando el botn no esta activado;

El ABC de Flash CS-6

Fernando Proao B. 2015

Fig. 8. Estados de un botn en Flash CS-6

Fernando Proao B. 2015

Fernando Proao B. 2015

5.- Crear un objeto de acuerdo al contorno del futuro botn

8.- NAVEGACION EN FLASH

Navegacin bsica con botones y comandos de Action Script

8.1. Navegacin Bsica