El ABC de Flash Cs-6

El ABC de Flash CS-6 Fernando Proao B. 2015 1

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.


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) Barra de Men (barra azul, con las opciones del men) (2) Caja de Herramientas (barra con las herramientas de dibujo) (3) rea de la Lnea de tiempo (fotogramas, capas) (4) Escenario o rea de edicin (5) rea de paneles de propiedades (parte derecha ) (6) rea de paneles de control (parte derecha) (7) Ventanas emergentes (aparecen segn el llamado)

Fig. 2. Interfaces de FLASH CS-6

(4)

(1)

(2)

(3) (5)

(6)

(7)


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 : indica que este panel esta abierto

Acciones : 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:


(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 5.- Presionar Botn Derecho y escoger opcin: INSERTAR FOTOGRAMA CLAVE 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) 3.- Seleccionar el fotograma 30 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 2.- Seleccionar el fotograma 42 3.- Presionar Botn Derecho y escoger opcin: INSERTAR FOTOGRAMA CLAVE 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) Capa Normal, donde se disean los objetos y animaciones (2) Capa Carpeta, elemento para organizar capas (modelo archivo-carpeta) (3) Capa Gua de Trayectoria: para crear guas de movimiento (4) 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.


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.


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)


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) Fotograma REPOSO: contiene informacin cuando el botn no esta activado; (2) Fotograma SOBRE: contiene informacin cuando el mouse esta sobre el botn; (3) Fotograma PRESIONADO:: contiene informacin cuando se hace clic sobre el botn; (4) Fotograma ZONA ACTIVA: zona sensible al mouse o los clicks


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


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


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. 7.- Crear un nuevo smbolo (Ctrl + F8) 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: 1.- Crear un nuevo smbolo (Ctrl + F8) 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) Navegacin bsica con botones y comandos de Action Script (2) Navegacin con cajas de dialogo y comandos de Action Script (3) Navegacin por medio de mapas sensitivos (uso de botones invisibles) (4) 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:


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.


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 if (valor == 2) { valor="";

gotoAndPlay ("Escena 3",1); } else 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.


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); } 11.- Crear en escena 2 una capa (acciones) y escribir el siguiente cdigo:

menu_btn.onpress = function() { gotoandplay(Scene 1, 1); } 12.- Crear en escena 3 una capa (acciones) y escribir el siguiente cdigo:

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( ); 14.- Ejecutar la pelcula * Nota: la instruccin stop(); puede ser tambin codificada al inicio del script del paso 10 y tambin en el del 11 y del 12


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


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.


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) QuickTime DV (. Dv, .dvi ) Digital Video Digital AVI (.avi) Video para Window MPG (.mpg, .mpeg) 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 9.- Ejecutar 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


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) {


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) Componentes para Datos (DATA COMPONENTS) (2) Componentes para el editor de clips de video (3) Componentes para editar y personalizar clips de sonido (4) Componentes para Media Player 6-7 (editor de clips generalizado) (5) 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.


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


ANEXO A: TECLAS RAPIDAS PARA FLASH- CS-6 GENERALES F1: Panel de Ayuda en lnea F5: Insertar fotogramas F6: Insertar fotograma clave F7: Insertar fotograma F8: Convertir en Smbolo CRTL + G: Agrupar objetos CTRL + SHIFT + G: Desagrupar objetos CTRL + E: Editar un smbolo VENTANAS EMERGENTES SHIFT + F2: Control de Escenas CTRL + J: Propiedades del Documento CTRL + F8 Crear Nuevo Smbolo Ctrl+Alt+ Shift+S Exportar Pelcula PANELES CRTL + F3: Panel de Propiedades de los objetos en el escenario CRTL + L: Biblioteca CTRL + F7: Panel de Componentes F9: Panel de Acciones CTRL + ALT + S: Escalar y Girar CTRL + T: Transformar (escalar, girar, aplastar) CAJA DE HERRAMIENTAS V: Herr.. SELECCIN A: Herr. SUBSELECCION N: Herr. LINEA L: Herr. LAZO P: Herr. PLUMA T: Herr. TEXTO O: Herr. OVALO R: Herr. RECTANGULO Y: Herr. LAPIZ B: Herr. PINCEL Q: Herr. TRANSFORMACION F: Herr. TRANSFORMACION DE RELLENO S: Herr. BOTE DE TINTA K: Herr. CUBO DE PINTURA I: Herr. CUENTAGOTAS E: Herr. BORRADOR H: Herr. MANO Z: Herr. ZOOM (+ ALT = reducir)

- FIN -

Documents

El ABC de Flash Cs-6