Manual de Adobe Flash CS3

CAPTULO 1 Barras de Herramientas de Flash

Cuando abrimos Adobe Flash CS3 nos encontramos con la siguiente pantalla:

Configuracin de la Pantalla de Trabajo de Flash Para configurar la Ventana de Trabajo de Macromedia Flash, pulsaremos en la Barra de Herramientas Propiedades

Veamos las caractersticas de esta ventana de trabajo: Tamao: Aqu se determina el tamao de la Ventana de Trabajo Publicar: En esta opcin determinamos que Versin de Proyector de Flash Player utilizaremos para la visualizacin del trabajo Fondo: Permite colocar un color de fondo (Color slido) para ayudar a la visin del usuario Velocidad de Fotogramas: La ms importante, ya que aqu determinamos la velocidad de la animacin, se recomienda utilizar una velocidad de 30fps (cuadros por segundo)

Recordar que fps significa fotogramas por segundo, de acuerdo a la configuracin establecida 12 fps equivale a decir que se necesitan 12 cuadros o fotogramas para realizar un segundo de movimiento. Utilizacin de la Barra de Herramientas Macromedia Flash El Cuadro de Herramientas de Macromedia Flash se utiliza para las diferentes acciones que se necesite en la elaboracin de una animacin, veamos sus funciones a continuacin Se utilizan para seleccionar los objetos que sean colocados en la Ventana de Trabajo de Flash La primera es la herramienta de Transformacin Libre, con ella podemos girar, aumentar o reducir de tamao el objeto colocado en la ventana de Flash. La segunda es la herramienta de lazo Poligonal La primera es la herramienta Pluma y la segunda es la herramienta Texto, con ella podemos ingresar Cuadros de Texto en la Ventana de Trabajo Estas son las herramientas para dibujar lneas y rectngulos (la herramienta rectngulo tambin permite cambiar a herramienta circulo o herramienta polystar) La herramienta Cubo de pintura permite rellenar un cuadro con cualquier color que elijamos

Estas dos herramientas determinan el color de Trazo de Lnea y el Color de Relleno al momento de crear rectngulos u valos Nota. Cabe aclarar que al seleccionar cualquier herramienta estas tienen cada uno una ventana de opciones particulares por cada herramienta

CAPITULO 2 Creacin de Animaciones en Flash

Creacin de Animaciones Simples
Vamos a crear una Animacin que tenga la siguiente apariencia: Pasos: 1ro. Pulsamos la herramienta valo del Cuadro de Herramientas

2do. Elegimos el color a utilizar en el Cuadro de Colores 3ro. Luego nos ubicamos en el rea de Trabajo y creamos la Circunferencia como se muestra en la figura 4to. Observemos el Cuadro de Capas y la Lnea de Tiempo

Observamos que el nombre de Capa por defecto es Capa 1, para dar la animacin pulsaremos el botn izquierdo del Mouse por ejemplo en el fotograma 30 y pulsamos la tecla de funcin F6, mostrndose el siguiente resultado

A continuacin seleccionaremos la capa 1

Luego pulsaremos el botn derecho del Mouse en cualquier fotograma d la Capa1y elegimos la opcin Crear Interpolacin de Movimiento.

Luego el resultado ser:

5to. Finalmente desplazamos la figura de la parte superior izquierda a la parte inferior derecha como puedes observar en el grfico

Punto Inicial, correspondi ente a la Lnea de Tiempo 1 Punto Final, correspondien te a la Lnea de Tiempo 30

6to. Para observar el resultado de la animacin pulsemos en el men Control/Probar Pelcula o tambin las teclas CTRL+ENTER

Creacin de Animaciones Complejas

Ahora del ejemplo anterior vamos a cambiar el diseo por el mostrado en la figura, para ello vamos Pasos 1ro. Ubiquemos en una Lnea de Tiempo intermedia entre 1 y 30, por ejemplo en 15 2do. Una vez ubicados en la Lnea de Tiempo 15 pulsamos la tecla F6 quedando la Barra de Lnea de Tiempo de la siguiente forma: a realizar los siguientes pasos adicionales:

3ro. Finalmente probamos la animacin pulsando las teclas CTRL+ENTER

Corresponde a la Lnea de Tiempo 1

Corresponde a la Lnea de Tiempo 30

Corresponde a la Lnea de Tiempo 15

Creacin de Animaciones con Desvanecimiento y Cambio de Tamao

Cuando queramos realizar animaciones en donde la imagen desvanezca o cambie de tamao debemos realizar o adicionar los siguientes pasos a nuestro ejemplo anterior: Nuestra ltima animacin qued de la siguiente manera:
Correspon de a la Lnea de Tiempo 30

Correspon de a la Lnea de Tiempo 1

Correspon de a la Lnea de Tiempo 15

Ahora herramienta seleccin

usando la , seleccionamos el fotograma 1 y la barra de herramientas en

la parte inferior se vera de la siguiente forma:

Luego activamos la opcin

, esta cambiar por y donde se encuentra el 100% lo cambiamos por 0% Luego probamos la animacin con las teclas CTRL+ENTER Ahora haremos que la circunferencia cambie de tamao en el fotograma 15, es decir vamos a hacer que se agrande, para ello seleccionamos el fotograma 15 y luego usamos la Herramienta Y finalmente con el probamos uso de nuestra las teclas Luego jalando de los extremos de la circunferencia agrandamos la imagen obteniendo el siguiente resultado

Transformacin forma:

Libre

la

circunferencia quedar de la siguiente

animacin

CTRL+ENTER

CAPITULO 3 Creacin de Animaciones por Capas en Flash

Insercin de Capas

En Macromedia Flash para generar una Animacin o Pelcula debemos de insertar varias capas, para ello crearemos una animacin la cual utilice varias capas; el diseo es el siguiente:

Para crear esta animacin hay que realizar los siguientes pasos: 1ro. Insertar una capa adicional, para ello pulsamos el men Insertar/Capa, tambin podemos pulsar en el icono de insercin de capas el cual tiene la forma encuentra en la parte inferior de la Barra de Lnea de Tiempo y se

2do. Pulsaremos en la etiqueta Capa 1 e Insertaremos el texto Hola esta es Mi Primera Animacin, para ello utilizaremos la herramienta Texto del Cuadro de

Herramientas, este texto lo insertaremos por encima de la Ventana de Trabajo 3ro. Pulsaremos en etiqueta Capa 2 y seleccionaremos la herramienta valo y procederemos a insertar el valo del

Cuadro de Herramientas, a continuacin elegiremos un color en la Barra de Colores

Esta es la imagen que debe quedar luego de aplicar los cambios establecidos en los pasos 1, 2 y 3 4to. Ahora realizaremos la animacin de estos objetos, para ello pulsaremos en la etiqueta de la Capa 1 y luego nos ubicaremos en la Lnea de Tiempo 60 y presionaremos la tecla de funcin F6, luego en la misma capa nos ubicaremos en la Lnea de Tiempo 1 y presionando el botn derecho sobre l elegiremos la opcin Crear Interpolacin de Movimiento, este mismo paso lo repetiremos en la Lnea de Tiempo 60 y luego lo ubicaremos en la parte interna de la Ventana de Trabajo 5to. Bien ahora pulsaremos sobre la etiqueta de Capa 2 y repetiremos los pasos de la Capa 1 y ubicaremos el valo en la parte inferior derecha, como se muestra en la figura

6to.

Por

ultimo que que la el

tenemos conseguir pelota tenga

aspecto zigzag para ello utilizaremos los pasos descritos en la Animacin Renderizada, es
Capa 2 Lnea de Tiempo 1 Capa 2 Lnea de Tiempo 24

decir en la Capa 2 nos ubicaremos en la Lnea 12 y de Tiempo la pulsamos

tecla F6, el mismo paso lo realizaremos en las Lneas de Tiempo 24, 36, 48; para finalmente de
Capa 2 Lnea de Tiempo 12

Capa 2 Lnea de Tiempo 48

Capa 2 Lnea de Tiempo 36

Capa 2 Lnea de Tiempo 60

acuerdo a la Lnea de Tiempo utilizada ubicarla en las posiciones correspondientes Insercin de Imgenes y Msica Mp3 Tomemos como base el ejercicio anterior y sigamos los pasos siguientes: 1ro. Inserta una nueva Capa, para ello pulsa en el men Insertar/Capa

2do. Pulsa en el men Archivo/Importar a Biblioteca y en la siguiente ventana realiza las siguientes acciones:

Ubicar el lugar exacto donde se encuentra el archivo de Sonido y seleccionar el archivo de imagen o sonido correspondiente

3ro. Para insertar el archivo de imagen o sonido pulsaremos en la Capa 3 y luego en el men Ventana/Biblioteca Como podrs observar el archivo de sonido esta mostrndose en la Biblioteca de tu animacin Flash 4to. Una vez visualizado este archivo de audio procederemos a pulsar con el botn izquierdo del mouse es icono del archivo de sonido y sin soltarlo lo arrastramos hasta la ventana de trabajo de Flash 5to. Por ltimo vamos a determinar que solo se reproduzca una vez esta animacin, para ello nos nos ubicaremos en la Lnea de Tiempo 60 de la Capa 2 y luego pulsa en el men Ventana/Acciones

6to. En esta ventana pulsaremos una vez en el icono Control de Pelcula, y utilizaremos la opcin Stop, con esta opcin estaremos determinando que la Animacin se reproduzca una sola vez, prubalo ahora

Nota: Las mismas acciones hay que realizar cuando insertemos una imagen o archivo de imagen Insercin de Smbolos Parte I (Creacin de Botones) Como hemos observado en el ejemplo anterior hemos insertado un archivo de sonido Mp3, pero ahora crearemos botones para detener en cualquier momento la animacin y otro para que se vuelva a reproducir, ahora realiza los siguientes pasos: 1ro. Insertaremos una nueva capa, para ello pulsaremos en el men Insertar/Capa y en la Barra Lnea de Tiempo se crear la Capa 4 2do. Pulsa en el men Insertar/Nuevo Smbolo y activa la opcin Botn, coloca como nombre de smbolo Stop

3ro. Ahora observars que la Barra Lnea de Tiempo ha cambiado por esta otra

Ahora te dar un pequea descripcin sobre esta nueva Barra Reposo: Aqu damos referencia al color y accin a realizar cuando el botn no cumple ninguna accin Sobre: Esta nos sirve para determinar la accin que realizara el botn cuando el puntero del Mouse pase por encima de l Presionado: Esta opcin se utiliza cuando queremos darle alguna otra accin cuando se haga clic sobre el botn Zona Activa: Aqu le damos la accin que fue dada cuando el botn estaba en reposo 4to. Continuando con la Creacin de Botones, insertaremos en el rea de trabajo un rectngulo y encima insertaremos el texto STOP 5to. Pulsa ahora 4 veces la tecla de funcin F6 y este ser el resultado le

6to. Para regresar a al ejemplo que estamos realizando, pulsa en el link Escena 7mo. Una vez en la ventana de trabajo, pulsaremos la Capa 4 y luego pulsa en el men Ventana/Biblioteca y date cuenta que el smbolo Stop aparece en esta ventana

8vo. Ahora selecciona el smbolo Stop y arrstralo a la ventana de trabajo como se ilustra a continuacin:

Nota: Para crear el botn Play insertar una capa nueva y sigue los mismos pasos que para el botn Stop Asignacin de Eventos a los Botones Hasta ahora hemos realizado las animaciones respectivas y creado un botn Stop y un botn Play, pero hay que asignarle las sentencias adecuadas para que estos realizasen la funcin indicada, sigue las instrucciones para ello: 1ro. Pulsaremos en el men Ventana/Acciones y realiza estas acciones

Observa que al desplegar el cuadro de lista desplegable aparecen dos opciones fundamentales, estas son: acciones para (No se ha asignado ningn nombre de instancia) Play acciones para (No se ha asignado ningn nombre de instancia) Stop

2do. Selecciona las acciones del botn Play y en las opciones de Control de Pelcula has doble clic en la opcin Play

3ro.. Selecciona las acciones del botn Stop y en las opciones de Control de Pelcula has doble clic en la opcin Stop

Con ello habrs dado las acciones pertinentes para el funcionamiento de tus botones, prueba ahora la animacin

Esta es la ventana que conseguirs al final de desarrollo del trabajo

CAPTULO 3 Animaciones Avanzadas en Flash Ahora estars en la capacidad de crear animaciones avanzadas en las cuales insertaras escenas para hacer ms fluida el desarrollo de una pelcula. Primero definamos que es una Escena y diremos que una escena es una secuencia de una pelcula, en otras palabras es una parte de un conjunto de ambientes. Vamos ahora realizar un ejemplo, sigue nuestros pasos a continuacin describo: Trabajando con Colores 1ro. Pulsa en la Barra de Propiedades y configura la Ventana de Trabajo de la siguiente forma:

Tamao: 800x600 pixeles Color de Fondo: Blanco Velocidad de Fotogramas: 30 fps

2do. Inserta un Rectngulo utilizando la herramienta rectngulo, pero antes de crearlo en la Ventana de Trabajo despliega la Herramienta Mezclador de Colores o Muestras de Color que se encuentra en la parte derecha

Observa que el Mezclador de Colores tiene las opciones de Slido (muestra un solo color), Lineal (permite combinar dos o mas colores empleando los degradados pero en forma lineal), Radial (al igual que la anterior utiliza los degradados pero en forma circular) y Ninguno (no inserta color de fondo). Por ejemplo elijamos el efecto radial y combinemos los colores amarillo y blanco de la siguiente forma Luego despliega la Barra Info, aqu observaras los siguientes cuadros: Ancho: rectngulo Alto: configura el alto del rectngulo X: indica la posicin a la que se ubica en la lnea horizontal con respecto a la parte superior derecha de la Ventana de Trabajo Y: indica la posicin a la que se ubica en la parte vertical con respecto a la parte superior derecha de la ventana de trabajo Los valores que nosotros asignaremos son: Ancho: 800, Alto: 600, x: 0, y: 0, como se muestra en la figura configura el ancho del

Entonces observars que el rectngulo ocupa toda la ventana de trabajo 3ro. Inserta una nueva capa la cual tomar el nombre de Capa2 e inserta el Texto Bienvenidos al Maravilloso Mundo de Macromedia Flash y observars que en la parte inferior aparece esta Barra de Herramientas de Texto (es muy familiar a la que usa Microsoft Word)

Asgnale como color de fuente rojo, tamao de fuente 26, estilo Negrita y Centrada 4to. Pulsa en la Capa1 y ubcate en la Lnea de Tiempo 60, a continuacin pulsa la tecla de funcin F6, no le asignes otros valores (la Barra de Capa1 se mostrar de la siguiente forma) 5to. Pulsa en la Capa2 y ubica el Texto a la parte superior de la Ventana de Trabajo, como se muestra a continuacin

6to. Ahora ubcate en la Lnea de Tiempo 60 y presiona la tecla de funcin F6, a continuacin ubcate en la Lnea de Tiempo 1 presionando el Botn Derecho y elige la opcin Crear Interpolacin de Movimiento, despus de esto ubcate en la Lnea de Tiempo 60 presionando el Botn Derecho del Mouse y activa tambin la opcin Crear Interpolacin de Movimiento, ahora observars que la Capa2 toma esta forma

7mo. Ubicado en la Lnea de Tiempo 60, arrastra el Texto a la parte interna de la Ventana de Trabajo, as es como ahora se ver la animacin

8vo. Crea ahora un Botn utilizando el Men Insertar/Nuevo Smbolo y activa la opcin Botn, llama a este Botn como Ingresar, el botn debe de tener esta forma (utiliza el ejemplo de Insercin de Botones)

9no. Pulsa ahora la opcin Escena1 y activa la Ventana de Bibliotecas, ahora arrastra el Smbolo Ingresar a la Ventana de Trabajo (para ello previamente habrs insertado una Nueva Capa la cual tendr el nombre de Capa3), el diseo debe queda de esta forma:

10mo. Ahora pulsa en el men Insertar/Escena y observar la siguiente ventana (observa ahora que el nombre de Escena a cambiado por el de Escena 2):

11avo. En esta Escena crea la animacin que observa en el grfico

12avo. Pulsa ahora en el Men Ver / Ir / Escena1 y estars ahora en la Ventana de la Escena 1 13avo. Abre ahora la ventana de Acciones y despliega la Lista Desplegable y activa la opcin acciones para (No se ha asignado ningn nombre de instancia) Ingresar y en la opcin Control de Pelcula pulsa en la opcin goto:

En el cuadro de lista desplegable observars que aparece <escena actual> activa la opcin Escena2

Y observa como cambia esta ventana:

Finalmente prueba la Pelcula