Вы находитесь на странице: 1из 26

LOS FRAMES

La animación en Flash se basa en los frames o fotogramas. En el siguiente gráfico podemos ver una captura
del Timeline de Flash, donde aparecen diferentes tipos de frames. En la Capa4 vemos un frame que no
contiene ningún elemento , es por tanto un frame vacío. En la Capa2 aparece una animación hecha frame a
frame, es decir el objeto cambia de propiedad en cada uno de los frames, por ejemplo en un frame tiene una
posición y en el siguiente otra, sin embargo en la Capa 1 hay un ejemplo sencillo de

animación que consta de sólo 2 frames, que dará como resultado una animación automática, esta animación
se caracteriza por el color morado que adoptan los frames y por la flecha que la recorre. Como verás en el
gráfico, aparece un nuevo término, el keyframe o fotograma clave, es en estos keyframes donde se definirán
los cambios de propiedades de los elementos de una movie, así por ejemplo, podemos definir que en el frame
número 1 nuestro objeto tenga un tamaño de de 100 y que en el frame 10, lo incremente un 120%,
generándose automáticamente una animación cuyo resultado será el cambio de tamaño del objeto en
cuestión.

Las modificaciones que se realizan en estos keyframes pueden ser de diversa naturaleza, como cambio de
tamaño, cambio de posición, rotaciones, morphings,cambio en el color, en la opacidad, etc. Iremos avanzando
en este sentido en los capítulos siguientes.Las modificaciones que se realizan en estos keyframes pueden ser
de diversa naturaleza, como cambio de tamaño, cambio de posición, rotaciones, morphings,cambio en el
color, en la opacidad, etc. Iremos avanzando en este sentido en los capítulos siguientes.

COMO CREAR UNA BOLA

Para poner en práctica todo lo aprendido en el capítulo anterior, vamos a relizar un sencillo ejemplo, dibujar la
bola de nuestro logotipo.

1) Abrimos Flash y seleccionamos: File > New.

2) A continuación modificamos el tamaño que tendrá nuestra movie: Modify > Movie. Aquí es donde
elegiremos el tamaño que tendrá nuestra movie, en este caso hemos elegido un tamaño de 200*200. Además
también podemos modificar el color de fondo (en el botón Background), el número de frames por segundo
(Frame Rate) y el tamaño de la rejilla tal y como vemos en elgráfico que aparece a continuación.

3) Una vez hemos definido estos parámetros, nos dirigimos a la barra principal >Insert >New Symbol. Nos
aparecerá un menú en el que se nos pedirá un nombre para el nuevo objeto, al que llamaremos bola.

4) Ahora podemos empezar a dibujar nuestra bola. Para ello, nos dirigimos a la barra de herramientas, y
seleccionamos la herramienta Oval, tal y como aparece en el siguiente gráfico.

5) Es ahora, cuando con la herramienta selleccionada, dibujamos un círculo.

6) Para pintarlo con el degradado seleccionamos la herramienta de relleno (en el


gráfico de la izquierda, es el cuadrado negro). Una vez que pulsamos en este
cuadro, nos aparece el gráfico de selleccionar color , con la posibilidad de añadir o
no el contorno.

7) En este gráfico podemos seleccionar el color que deseemos para rellenar nuestro objeto.

8) El lector habrá observado que el color de relleno de la bola es un degradado y que no se encuentra en esta
lista de colores. Para conseguir ese degradado pulsamos el botón editar relleno, y nos encontraremos con
otro menú en el que selleccionaremos los parámetros de nuestro relleno.

9) Por último, sólo nos queda selleccionar los valores RGB que adoptará nuestro de gradado en cada uno de
los puntos de su recorrido. En el caso que nos ocupa, hemos seleccionado un recorrido de naranja a blanco,
tal y como aparece en el gráfico. Una vez hayamos seleccionado el objeto este cambiará su relleno
automáticamente.

EJEMPLO DE ANIMACION

¡Ya está bien de teoría!. Con este capítulo, comenzamos con una serie de ejemplos que nos ayudarán a
conocer en profundidad todas las posibilidades de Flash 4. Comenzaremos con un sencillo ejemplo, la
animación que tienes a tu derecha. (si no la puedes ver tienes que dirigirte a www.macromedia.com y
descargarte el plug-in de Flash.

1) Ejecuta Flash 4 y dirígete a File > New.2) Modify > Movie, para elegir el tamaño de la movie. En este caso
hemos elegido el tamaño: 350*250.Cambia el color del fondo y pon un color morado.

3) A continuación en el Timeline, creamos las siguientes capas:

Una para el texto "lo".


Otra para el texto "web".
Otra para el texto "más".
Otra para la bola que creamos en el capítulo anterior.
Otra para el dedo.
Otra para el texto:"www.lomasweb.net"
4) Ahora importamos todos los elementos gráficos. Todos los elementos han sido creados con Adobe
Illustrator (no te preocupes en el archivo fla están todos".Para importar los elementos, nos dirigimos a Insert >
New Symbol y le ponemos el nombre que corresponda, por ejemplo creamos el symbol "lo", y es en la ventna
que nos aparece donde importamos el gráfico.

5) Una vez que ya hemos creado todos los symbols de la movie, tenemos que arrastrarlos al stage dentro de
la capa que les corresponda (arrastramos desde la ventana Library el Symbol "lo" a la capa "lo", y así
sucesivamente.

6) Ahora sólo nos queda disponerlos secuencialmente en el orden que queremos que aparezcan (puedes
observar que el elemento "lo" aparece el primero en un movimiento descendente, etc). Continúa>>

EJEMPLO DE ANIMACION (Continuacion)

7) Pasemos pues a la animación. Si queremos que el elemento "lo" realice un recorrido, desde la parte
superior , a la parte central del stage haremos lo siguiente:
En el frame 1, situamos el elemento en la parte superior.
Copiamos el frame.(Pulsamos con el botón derecho del ratón y pulsamos Copy Frames)
Nos situamos en el frame número 5.
Click con el botón derecho y Paste frames.
En este último frame creado, modificamos la posición del elemento "lo".
Seleccionamos los frames del 1 al 5.
Click con el botón derecho y seleccionamos Tweening Motion. Ya está hecha la animación
8) Ahora tendríamos que hacer lo mismo con cada uno de los elementos hasta lograr la animación.9) Por
último exportaríamos nuestra película, como .swf :Export Movie.

EJEMPLO DE ANIMACION
Como rotar un objeto

Con este ejemplo vamos a aprender a realizar animaciones, mediante la rotación de elementos. Con Flash
puedes editar el eje de rotación de cualquier objeto, y si te fijas en la animación podrás observar como en este
caso el dedo rota en torno al eje central de la bola.

Para realizar este ejemplo hemos utilizado, los mismos elementos que para los ejemplos anteriores. Cada
objeto está en una capa con su nombre. Lo realmente interesante de este ejemplo es la rotación del objeto
"dedo", que como decíamos anteriormente, rota en torno al centro de la bola. Para conseguir este tipo de
rotación hacemos lo siguiente:

1) Seleccionamos el objeto dedo y seleccionamos el comando: Modify>Transform>Edit Center. Nos

aparecerá un puntero en forma de cruz, que podemos mover donde queramos.En este caso, se ha colocado
en el centro de la bola.

2) En la capa "dedo",seleccionamos el primer frame, y lo pegamos en el frame 40.

3) Ahora seleccionamos los frames del 1 al 40, con ellos seleccionados pulsamos el botón derecho y creamos
una animación>Create Tweening Motion.

4) Insertamos un Keyframe en el frame 20. Seleccionamos el objeto, y nos dirigimos al comando


Modify>Scale and Rotate. Seleccionamos un valor de rotación de 180.
5) Efectuamos la misma operación en el frame 40.

Opacidad de un objeto

Una de las propiedades de los objetos en Flash, es su opacidad. Se trata de un valor que va de 0 a 100, y al
que podemos acceder al seleccionar el objeto y hacer click en el botón derecho.

1) Para realizar este ejemplo, arrastra el logotipo a la capa "lomasweb".

2) Copia el frame 1 en el frame 15 y en el 30. Selecciona ahora estos 30 frames y con el botón derecho
mientras los tienes seleccionados, elige Create Tweening Motion.

3) Ahora tienes que modificar la opacidad en cada uno de los frames. Selecciona el logotipo en el primer
frame y pulsa el botón derecho >Properties.

5) Te aparecerá un menú como el que ves abajo. Selecciona la opción Alpha.

6) Ahora puedes modificar el valor de la opcidad para cada frame. Experimenta introduciendo distintos valores
en cada uno de los frames. Puedes ver como te va quedando la animación con l comando Control>Test
Movie.

7) Sólo te falta dirigirte a File> Export Movie, para ver tu animación

Color de un objeto

Mediante este ejemplo vamos a tratar de explicar una de las propiedades de los objetos
en Flash, su color. Este puede ser modificado seleccionando el objeto en cuestión en el
frame que deseemos y accediendo al menú Properties>Color Effect. En este menú
tenemos las opciones de modificar la opacidad, (como vimos en el ejemplo anterior) , el
nivel de brillo de nuestro objeto, o su color.

1) Para realizar este ejemplo, arrastra la bola a una capa.

2) Copia el frame 1 en el frame 10y en el 20. Selecciona ahora estos 30 frames y con el botón derecho
mientras los tienes seleccionados, elige Create Tweening Motion.

3) Ahora tienes que modificar las propiedades del color en cada uno de los frames. Selecciona la bola en el
primer frame y pulsa el botón derecho >Properties.
5) Te aparecerá un menú como el que ves abajo. Selecciona la Color Effect y modifica los valores a tu gusto.

6) Prueba también a modificar los valores Tint así como Brightness.

7) Sólo te falta dirigirte a File> Export Movie, para ver tu animación

LAS PROPIEDADES DE UN FRAME (LABEL)

En Flash utilizamos, las etiquetas o "labels" para nombrar un determinado objeto o una
determinada acción. En un principio parecen no tener mucha importancia, pero nos
serán de gran utilidad cuando en nuestra "movie" haya gran cantidad de animaciones y
objetos. De esta forma sabemos que evento hay en cada momento.

Es una buena idea identificar todos los objetos, capas, con un nombre significativo si no queremos que
nuestro Timeline se convierta en un auténtico caos.

Para acceder a la pestaña "labels" tienes que seleccionar el frame o los frames en cuestión y pulsar con el
botón derecho.

1) 2) Una vez aquí escribe el nombre que desees

LAS PROPIEDADES DE UN FRAME (SOUND)

Una de las posibilidades más interesantes de Flash es la posibilidad de incorporar sonidos a nuestras
animaciones. En la versión anterior (Flash 3), el único formato válido era el formato WAV , pero con Flash 4
tenemos la posibilidad de incluir sonido en formato MP3 con el consiguiente nivel de compresión que este
formato nos permite.
Para introducir sonido en nuestra "movie", solo tendrás que importar este mediante los comandos File>Import
y arrastrarlo a una capa. Da igual el tipo de formato que elijamos (Wav o Mp3) ya que Flash hará la
compresión con los parámetros que le especifiquemos.

1) Para realizar este ejemplo, hemos importado uno de los sonidos standard de windows, el archivo
logoff.wav.

2) Ahora, arrastramos el archivo wav al stage y veremos que se nos genera un gráfico en forma de ondas en
el Timeline. Fíjate en el gráfico que viene a continuación.

3) Ahora solamente tienes que indicar en que frames quieres que empiece a ejecutarse eses sonido.

4) A la hora de exportar tu animación Flash te pedirá, que parámetros de compresión quieres para ese sonido,
así que recuerda, a mayor calidad, mayor tamaño tendrá tu archivo swf.

5) Como puedes ver en este gráfico, hemos elegido uno de los ratios posibles de compresión en MP3 que nos
ofrece Flash. Otra de las formas en la que podemos acceder a las propiedades del audio es seleccionando el
archivo wav y seleccionando la opción Sound Properties.

7) Ahora sólo te falta dirigirte a File> Export Movie, para ver y oir tu animación.

LAS PROPIEDADES DE UN FRAME (ACTIONS)

En este capítulo vamos a ver una de las posibilidades más importantes de Flash, la posibilidad de crear
eventos, llamados acciones. En el siguiente ejemplo vamos a ver como podemos desplazarnos de un frame a
otro (dentro de una misma movie, o de varias), pulsando el botón ir al frame x.

Si te fijas bien en esta movie, podrás apreciar como pulsando un botón, que en este caso es el dedo, puedes
ir a uno u otro frame.Para ello hacemos lo siguiente:

1) Para realizar este ejemplo, hemos convertido el objeto dedo en un botón, y hemos definido que cuando se
pulse este botón se vaya a un determinado frame.
3) Para definir que el dedo sea considerado como un botón (es decir que permita por ejemplo la capacidad de
navegación), lo seleccionamos >Botón derecho>Properties y accedemos a un menú llamado Definition. Aquí
seleccionamos la cualidad Button, dentro de la pestaña Behaviour.

4) Una vez hecho esto solo nos falta definir la acción que queramos. Por ejemplo en el frame 1 definimos lo
siguiente: On Press> Go to Frame 10.

Así establecemos que cuando hagamos click en el dedo (en el frame 1), iremos hasta el frame 10.

5) Como puedes ver en este gráfico, hemos establecido como evento el click, pero podemos establecer otros
como On Roll Over (al pasar el botón por encima de...), On Release (al soltar el botón), etc. Experimenta con
todas estas posibilidades.

7) También puedes definir acciones para un frame concreto, por ejemplo, puedes definir
que al llegar a un determinado frame, la "movie" se pare. Para ello, seleccionamos el
frame , hacemos click en el botón derecho y accedemos al menú Frame Properties. En
este frame definiremos dentro de la pestaña Actions, el evento Stop. En el ejemplo que
adjuntamos podrás ver claramente el funcionamiento de la propiedad Actions de los
frames y de los objetos.

LAS PROPIEDADES DE UN FRAME (tweening motion)

En capítulos anteriores hemos ido aprendiendo como podemos animar nuestros objetos, seleccionando un
número de frames, haciendo click con el botón derecho y accediendo a la opción Properties. Ahora bien ¿Qué
tipo de movimientos podemos hacer?. Fíjate en la captura de pantalla que viene a continuación, en ella
puedes observar las siguientes opciones:
None:Utilizaremos esta opción cuando no queramos que haya ningún tipo de cambio (movimiento, color,
opacidad).

Motion:Si seleccionamos esta opción podremos hacer movimientos (cambiar tamaño, rotaciones, color,
opacidad, etc). Para saber si un conjunto de frames están en estado Motion, debes mirar el color de estos. Si
son de color azul y contienen una línea, estos frames pueden tener movimiento.

Shape:Utilizaremos esta opción para hacer Morphings. Estos frames tienen un color verde claro.
Aprenderemos a hacer una animación con morphing en el Capítulo 17.

Rotate:Con esta opción activada podemos determinar una rotación durante un número determinado de veces.
Esta puede ser en el sentido de las agujas del reloj, o en sentido inverso.

Orient to path direction:Utilizaremos esta opción para conseguir que un objeto siga una trayectoria que
nosotros definamos (en lugar de hacer el movimiento manualmente). Aprenderemos a hacer una animación
siguiendo una trayectoria en el Capítulo 16.

Easing:Con esta opción controlaramos la aceleración, deceleración en los movimientos de los objetos.

Snap to guide:Con esta opción ajustamos los movimientos a la rejilla que hayamos
definido en nuestra movie.

LOS BOTONES

En Flash podemos hacer links a un determinado frame, a una determinada escena, a una
movie o a una página web. Para ello debemos utilizar los botones. Si queremos insertar
un gráfico en nuestra animación debemos hacer lo siguiente

1) Insert>New Symbol. Definimos que el nuevo objeto sea un botón.


2) A continuación podemos editarlo tal y como aparece en el siguiente gráfico.

Podemos observar que cuando tenemos un botón podemos modificar su apariencia en cada uno de sus
estados. Up:estado normal, Over:cuando pasamos el ratón por encima, Down:cuando lo pulsamos y Hit:
después de haberlo pulsado. Para cada uno de los estados necesitaríamos un gráfico diferente.

2) Una vez tengamos los diferentes estados para cada botón podemos asignarle las acciones que
deseemos, seleccionando en el Stage el botón>Click con el botón derecho>Properties>Actions. Así
por ejemplo podemos definir que al hacer click vayamos a una determinada escena o frame de
nuestra movie

3) (Go To), a una dirección de internet (Get Url), etc.

EJEMPLO DE ANIMACION
MOVIMIENTO SIGUIENDO UNA TRAYECTORIA

En capítulos anteriores hemos visto como podemos hacer el movimiento de un objeto, simplemente
cambiando su disposición en el stage entre el keyframe inicial y el final. En este capítulo vamos a explicar
como conseguir que un objeto se desplace por una trayectoria previamente definida por nosotros.

1) En primer lugar debemos crear una capa de trayectoria en el espacio destinado a las capas >Add Motion
Guide.
2) A continuación dibujamos la trayectoria que queremos que siga nuestro objeto. Para ello utilizaremos las
herramientas de dibujo de Flash.

3) Una vez hecho esto debemos definir un keyframe inicial y un keyframe final (que se corresponderán con el
punto inicial y el punto final de la trayectoria), y crear la animación seleccionando los frames
>Properties>Create Tweening Motion.

4) En el panel de propiedades del movimiento debemos seleccionar la opción Orient to path direction,
para definir que nuestro objeto siga la trayectoria que hemos definido.

EJEMPLO DE ANIMACION (MORPHINS )

En capítulos anteriores hemos visto como podemos hacer el movimiento de un objeto, simplemente
cambiando su disposición en el stage entre el keyframe inicial y el final. En este capítulo vamos a explicar
como conseguir que un objeto se transforme en otro consiguiendo un efecto de Morphing.

1) En primer lugar debemos arrastrar los 3 elementos de animación a la misma capa. En este caso los 3
objetos serán el objeto "lo", el objeto "más" y el objeto "web".
2) A continuación colocamos el objeto "lo" en el frame1, el objeto "más" en el frame 10, y el objeto "web en el
frame 20".

2) Una vez hecho esto debemos seleccionar los frames y definir la animación >Properties>Create
Tweening Motion.Especificando en la opción Tweening Shape. Así definimos que el movimiento en
cuestión es de tipo

Morphing.

3) Muy importante, si ves que los objetos no se transforman asegúrate que cada uno de ellos está
desagrupado con la opción Break Apart.

LA OPCION " INSPECTOR"

Dentro de la opción Window de Flash nos encontramos con una opción muy útil para organizar nuestra
"movie". Se trata de la opción Inspector. Esta opción cuenta con las siguientes ventanas:

Object: Desde aquí podemos comprobar las propiedades de nuestros elementos, tales como sus dimensiones
o su ubicación en el Stage. Es muy útil en las animaciones para comprobar de forma exacta si nuestro objeto
por ejemplo tiene el tamaño que deseamos.

Frame: Nos informa del tipo de frame en el que estamos, si tiene sonido o no,si tiene animación o no, de que
tipo de animación se trata, etc.

Transform: En esta ventana podemos comprobar el estado (numérico) de la transformación de nuestros


objetos, por ejemplo la transformación escalar o los grados de rotación que tiene un objeto en una animación.

Scene: Las movies en Flash pueden estar compuestas de una sola escena o de varias, permitiéndose la
posibilidad de navegar por cada una de ellas. Es conveniente separar nuestra movie en diferentes
escenas si esta es muy grande o tiene muchos frames. De este modo tendremos nuestros elementos
ordenados y no correremos el riesgo de tener el Timeline lleno de frames. Mediante la ventana Scene
podemos asignar un nombre a cada una de nuestras escenas y ordenarlas secuencialmente (por orden
de aparición).

EL COMANDO "EXPORT MOVIE"

Una vez hemos realizado nuestra movie, el comando "Export Movie", nos ofrece la posibilidad de exportar
nuestra animación a varios formatos. La más común sería la de exportar el archivo como swf, pero
también tenemos la posibilidad de exportar a otros formatos como: avi, secuencia de bmp, gif, jpg, gif
animado, Quick Time, wav,eps, etc.

Si exportamos nuestra animación para ser mostrada en Internet debemos acudir a la opción Publish Settings.
Aquí nos encontramos con la pestaña Formats, donde podemos elegir que nuestra animación sea exportada a
formato swf incluido en archivo Html. Con esta opción Flash nos genera automáticamente un archivo Html con
el nombre que le asignemos, este archivo hará una llamada al swf generado, de forma que no hace falta tocar
el código fuente HTML para incluir nuestra movie.

El comando Publish Settings, nos ofrece la posibilidad de controlar la compresión de los archivos gráficos
incluidos en nuestra movie (ej jpg, bmp) en una escala de 0 a 100, además de la calidad de los archivos
de audio. Recuerda, a mayor calidad, más tamaño ocupará tu animación y por tanto tardará más tiempo
en ser descargada.

EFECTO LLUVIA DE ESTRELLAS

En este capítulo vamos a aprender como conseguir un efecto "lluvia de estrellas" que se ejecute en el
momento de hacer click con el ratón en cualquier zona de nuestra "movie". Fíjate en la "movie que tienes
a continuación y haz click en cualquier parte.

Conseguir este efecto es bastante sencillo, lo único que tenemos que hacer es crear un botón transparente,
que recibirá el click y pondrá en marcha el efecto "lluvia de estrellas".

Para ello creamos una movie llamada "efecto", que contiene este botón transparente y a continuación el
efecto lluvia de estrellas. En el primer frame de la movie "efecto", y mediante las "Actions", definimos que esta
movie esté en estado Stop, y en el botón definimos la acción On Press>Play.

Acción para el botón transparente

Como puedes ver en el siguiente gráfico, definimos que dentro de la movie efecto, aparezca el botón con la
acción mencionada anteriormente y además creamos una acción dentro del primer frame de esta movie
definiendo que esté en estado Stop.
Acción para la movie "efecto"

Ahora lo único que tienes que hacer es duplicar la movie "efecto" de forma que cubra totalmente el
"stage",

así conseguimos que al hacer click en cualquier parte, se ponga en marcha el efecto "lluvia de estrellas".
Te recordamos que puedes bajarte el archivo .fla para que veas esto con mayor claridad.

EFECTO DE ROTACION

En capítulos anteriores hemos visto como crear efectos de rotación, en éste vamos a aprender a hacer esto
mismo, pero con un nivel mayor de complejidad. Fíjate en el siguiente ejemplo.

Conseguir este efecto es bastante sencillo, lo primero que hacemos es crear mediante un programa vectorial
(Corel, Freehand, Illustrator) el texto "lomasweb" en forma circular, y luego lo importamos a nuestra movie.
Convertimos este objeto en movie clip, asignándole una rotación de 360º del primer hasta el último frame.

Texto vectorial en forma circular creado con Adobe Illustrator

A continuación lo colocamos alrededor de la bola y utilizamos el comando Window>Inspector>Transform,


para darle la inclinación adecuada, en este caso de -40º como ves en el gráfico que viene a continuación.
Acción para el botón transparente

Lo único que nos quedaría ahora es asignar esta misma propiedad "Skew" a los frames inicial y final de
nuestra animación.

Para que la animación sea realista y parezca que el texto sigue una órbita en torno a la bola debemos duplicar
un trozo de bola y colocarlo en una capa superior a la del texto circular y la bola completa.

Trozo de bola

Ya tenemos nuestra animación creada, si no entiendes algo, descárgate el archivo .fla y fíjate en cada
uno de los objetos que aparecen en la ventana Library

ENVIAR UN E-MAIL

Una de las posibilidades que nos ofrece Flash es la de poder enviar e-mails, tal y como se puede hacer
mediante código HTML. Para ello, lo único que necesitamos es crear un botón en el que definamos la
acción correspondiente. Fíjate en el ejemplo

En este ejemplo, hemos creado un botón el el que definimos la siguiente acción:On Press>Get
URL>mailto:info@lomasweb.net. En el momento en que hagamos click en el botón nos aparecerá nuestro
programa de correo electrónico predeterminado con la dirección de e-mail del destinatario.

Acción definida para un botón que envía un e-mail.


Fíjate como en este ejemplo hemos creado además diferentes estados para el botón, por ejemplo al
pasar el ratón encima de él,el botón cambia de color.

DRAG & DROP

Una de las nuevas y atractivas posibilidades que nos ofrece Flash 4 es la posibilidad de arrastrar y soltar
objetos a lo largo del stage, a esta propiedad se le denomina "drag and drop" (arrastrar y soltar). Fíjate en
el siguiente ejemplo, como verás puedes desplazar todos los elementos a lo largo del "stage".

Para conseguir la propiedad "drag an drop" de cada uno de los elementos, sigue estos pasos:

1) Crea una movie para cada objeto, en este caso, por ejemplo para el objeto "lo", hemos creado una movie
llamada "LO_MOVIE".

2) Dentro del menú Instance Properties de esta movie, asígnale un nombre en el cuadro llamado Instance
Name, en este caso le hemos llamado "lo".

3) Convierte el objeto "lo", en un botón y arrástralo dentro de la movie "LO_MOVIE".

4) Ahora lo único que tienes que hacer es asignar a este botón la propiedad "drag and drop" acudiendo a la
ventana Actions, de la siguiente forma:

On Press

Start Drag ("/lo")

End On

On Release

Stop Drag

End

Acción definida para un botón con la propiedad "drag and drop"

Ya tienes un objeto en tu "movie", con la propiedad "drag and drop", ahora solo nos quedaría hacer lo
mismo con el resto de los objetos.

TEXTO CON MASCARA


En este capítulo vamos a aprender a manejar el uso de máscaras en Flash. Para que tengas claro el
concepto de máscara, digamos que estas permiten visualizar u ocultar algo en función de su color y
opacidad. Fíjate bien en el siguiente ejemplo

Para conseguir este efecto disponemos de dos objetos distribuidos en dos capas, en una tenemos el texto
"lomasweb" y en la otra tenemos la máscara tal y como aparece en elgráfico que viene a continuación:

Sigue los siguientes pasos:

1) Crea un rectángulo con un degradado simétrico de negro a blanco tal y como aparece en el gráfico que
viene a continuación:

2) Colócalo en una capa debajo de la capa donde esté el objeto "lomasweb" y convierte esta capa en
máscara>Properties>Masking. Notarás como las capas cambian de color y añaden unos iconos, eso significa
que la máscara está creada.

4) Lo único que te queda por hacer ahora es el desplazamiento horizontal de este rectángulo y ya
tienes el efecto creado.

TEXTO CON MASCARA 2

Las posibilidades que ofrece el uso de máscaras en Flash, son ilimitadas, siéntete libre y experimenta con
colores opacidad y movimiento. El ejemplo que ves a continuación es una ligera variación del que hemos visto
en el capítulo anterior.

Para conseguir este efecto hemos cambiado la orientación del degradado y el desplazamiento de éste. Ahora
el desplazamiento va de abajo hacia arriba. Fíjate bien como se consiguen los efectos de media luz y date
cuenta que tanto la visibilidad como la invisibilidad del objeto se hace de forma progesiva.
COMO CREAR UN FORMULARIO

Pasamos ahora a construir un formulario. Este ejemplo utiliza la acción "Get URL" acción y el método POST.
Para que el formulario funcione con éxito deberás disponer de una URL que contenga un CGI que recoja los
valores enviados. La mayoría de los proveedores tienen alguno. Infórmate en tu proveedor de Internet y si no
búscalos en la red.

Sigue los siguientes pasos:

1) Construye tres campos de texto y edita sus propiedades. Asegúrate de que en la ventana "Text Field
Properties" introduces un valor que se corresponde con el del CGI que procesará los datos.

Ventana del campo de texto Email.

2) Dibuja un botón y asígnale la acción: On Press>Get URL:http://tu servidor.com/cgi-bin/formmail.pl. Donde


tendrás que sustituir la URL por la dirección donde tengas el CGI del formulario.
2) A continuación, prueba tu película y verás como funciona. Si no es así comprueba que el nombre de
las variables asignadas a cada campo de texto coinciden con las del CGI.

EL COMANDO TELL TARGET

En capítulos anteriores hemos visto como Flash permite introducir "movies" dentro de una animación
principal, esto lo podemos hacer de diferentes formas, una de ellas es con el comando Tell Target.
Básicamente el comando Tell Target son unas acciones que nos permiten comunicar diferentes movies,
entre sí. Con este comando podrías por ejemplo poner en marcha una movie por ejemplo al pasar el
ratón por encima de un objeto

La estructura de las "movies" son similares a las de un directorio, así podríamos tener una movie principal que
contiene a otra y esta a otra, y así sucesivamente. Fíjate en el siguiente ejemplo, tenemos una movie
principal, y dentro de ella hemos creado otra llamada "animación" que se ejecuta cuando se pasa el ratón por
encima del botón.

Para que la movie secundaria responda al evento On Roll Over debemos acudir al panel Definition y asignarle
un nombre, en este caso hemos elegido el nombre "animación". Después de esto solo nos quedaría acudir al
botón y decirle que cuando se pase el ratón por encima de él, se ejecute la animación, tal y como aparece en
el gráfico que tienes debajo. Tienes que tener en cuenta lo que henos dicho al principio.Al tratarse de una
movie que contiene a otra secundaria, debemos especificar en el target: Target:/animacion

EFECTO "FADE"

En este capítulo vamos a aprender como hacer el conocido efecto de los créditos de una película. Si te
fijas bien en la "movie", verás como el texto aparece gradualmente y de igual forma se va desvaneciendo,
consiguiendo el efecto "fade".
Conseguir este efecto es muy sencillo, lo único que tienes que hacer es colocar una máscara con un relleno
degradado en sentido descendiente y ascendiente de negro a blanco. Si tienes algún problema en entender el
funcionamiento de las máscaras, consulta los capítulos anteriores. Una vez colocado en el centro de nuestra
movie, el texto se desplaza de arriba abajo, adquiriendo gradualmente los tonos del degradado. El degradado
utilizado tiene el siguiente aspecto:

Fíjate como el texto aparece y se desvanece de forma gradual, para conseguir este efecto deberás crear
un degradado de negro a blanco, duplicarlo y girar la copia 360º para que ambos sean simétricos.Una vez
hecho esto lo único que tienes que hacer es asignarle a la capa texto la propiedad Mask.

TEXTO CON SCROLLING

En este capítulo vamos a aprender a utilizar uno de los recursos más utilizados en las páginas web el texto
con scrolling. Fíjate en el siguiente ejemplo.

Para realizar el siguiente ejemplo, sigue los siguientes pasos:

1) Crea dos botones con forma de flecha, a la flecha superior le asignarás la siguiente acción:

On Roll Over>Go To Next Frame

2) A la flecha inferior le asignarás la siguiente acción:

On Roll Over>Go To Previous Frame

3) A continuación insertarás el texto y lo irás desplazando verticalmente frame a frame, asignando a cada
frame la acción: Stop.
3) De esta forma lo que estás haciendo es avanzar frame a frame y encontrándote con una diferente
posición del texto.

CARGANDO UNA MOVIE

La lentitud de la red puede acabar con la paciencia de cualquiera y aún más si se trata de páginas realizadas
con flash con gran tamaño. Para ello podemos advertir al internauta que la página se está cargando y que no
abandone su lugar. Se trata de un truco de gran efectividad que cada vez se emplea en más páginas.

1) Crea una película en Flash que empiece por ejemplo en el frame 2 de una escena.

2) Asigna al frame 1 la siguiente acción:

If frame is loaded (200)

Go to and Play (150)

End Frame Loaded

Donde 200 es igual al último frame de tu movie, y el 150 el principio. Con esta acción te aseguras que hasta
que el frame 200 no esté cargado, no se ejecutará la película. Esto también proporcionará más fluidez a la
animación ya que la película ya estará cargada cuando empiece a ejecutarse.

3) Lo único que te faltaría es crear una pequeña animación en el frame 1 en la que se comunique al internauta
que la página se está cargando.
EFECTOS DE ROTACION 2

En este capítulo volvemos a los casos de movimiento de objetos, concretamente a la rotación. Fíjate en el
ejemplo, como verás, nuestro texto rota teniendo siempre un eje de referencia ¿ves el efecto?.

Para conseguir este efecto solo necesitarás crear un texto y jugar con la posición del punto de rotación ,con el
tamaño del objeto, y con el comando:

Modify>Transform>Flip horizontal

ABRIR UNA VENTANA POP UP

En este capítulo vamos a aprender una de las funciones más utilizadas en las páginas web, abrir ventanas
pop up. Para ello, aparte de nuestra movie en swf, necesitaremos añadir un script a nuestra página. Veamos
como hacerlo:

1) Realiza tu movie y añádele un botón con el que se ejecutará la acción de abrir una ventana pop up. Para
ello selecciona el botón y añádele la acción: On Press> Get URL.

2) A continuación, escribe el siguiente script dentro de la ventana URL:

javascript:openNewWindow('popup/pop.htm','thewin25','height=
270,width=310,toolbar=no,scrollbars=no')

Como ves en este script, señalamos la ruta donde se encuentra el archivo html que se abrirá en el pop up, así
como las dimensiones de este, y las opciones toolbar y scrollbar.

3) Ahora abre el archivo html que contiene a la película flash (swf), y añade el siguiente script debajo de la
etiqueta <head>

<script language="JavaScript">

function openNewWindow(URLtoOpen, windowName, windowFeatures)


{ newWindow=window.open(URLtoOpen, windowName, windowFeatures); }

</script>
¡Ves que fácil!. Acabamos de introducir un javascript dentro de una película en flash. Esto también es
aplicable a otros scripts, o sea que puedes experimentar con nuevas posibilidades.De tí depende.

FLASH Y 3D

¿Cómo podemos integrar objetos en 3d dentro de Flash?. En primer lugar debemos aclarar que Flash es un
programa de animación vectorial, esto significa que las animaciones con vectores son mucho más fluidas que
las animaciones compuestas por frames bmp, además de ocupar infinitamente menos.

Entonces ¿Cómo podemos generar objetos en 3d vectoriales?. Tenemos varias formas de hacerlo:

1) Dibujando dentro de Flash los objetos y duplicándolos para por ejemplo crear efectos de extrusión.

2) Dibujando dentro de programas de diseño vectorial como Freehand, Corel Draw e Illustrator. Alguno de
estos programas ofrecen la posibilidad de extruir objetos, crear relieves y generar efectos de 3d. En otros
casos puedes recurrir a Plugins (por ejemplo KPT 6 para Adobe Illustrator)

3) Recurriendo a programas de animación 3d tradicionales. Algunos programas como 3D Studio Max,


disponen de plug-ins para exportar las escenas al formato swf (Ej. Illustrate o Vecta 3D para 3D Studio Max.).
En otros casos podrías generar la figura en 3D con cualquier programa de diseño 3D y luego importarla en
programas como Vecta 3D (que importan mallas en formato.3ds y exportan animaciones en formato swf.)

Consulta por ejemplo la dirección www.vecta3d.com y compruébalo tú mismo.

INTRODUCIR PASSWORD

No siempre queremos que personas no autorizadas vean nuestras páginas web. Para ello se utilizan
tradicionalmente las password o contraseñas.En este capítulo vamos a aprender como utilizarlas. Fíjate en el
ejemplo.

1) Para realizar este ejemplo hemos creado una movie con 3 escenas:

Escena1: Se pide al internauta que introduzca un password.


Escena2: Creamos esta escena para comunicar que el password es incorrecto.
Escena 3: Escena de autorización.Password correcto.
2) Una vez credas estas tres escenas nos centramos en la primera, que es la realmente importante. En ella
diseñamos un campo de texto editable, con la propiedad password y le asignamos la variable: password.
Podemos también limitar el número de caracteres de este campo.

3) A continuación, creamos un botón con el texto: OK, al que asignaremos la siguiente acción:

On Release
If (password eq "lomasweb")

Go to and Stop (Scene 2,1)

Else

Go to and Stop (Scene 3,1)

End If

End On

Mediante estos comandos estamos diciendo al programa que si el password es igual a "lomasweb", nos lleve
a la escena 2 (de autorización), y que en los demás casos, nos lleve ala escena 3 (de no autorización).

Fácil ¿no?

SEGUIR AL RATON

En este capítulo vamos a aprender como lograr que un objeto siga al ratón dondequiera que este vaya. Para
ello utilizaremos la acción "Drag Movieclip".

Sigue los siguientes pasos:

1) Crea un nuevo objeto con la propiedad movieclip. Este será el objeto que siga al ratón.

2) Una vez tengas creado este objeto asígnale el nombre "mouse" en la ventana: Instance
Properties>Instance Name.

3) Crea un botón transparente y colócalo encima de la movieclip. A este botón deberás asignarle la siguiente
propiedad:

On Roll Over>Sart Drag "mouse"

EJEMPLO DE ANIMACION (MORPHINS )

En capítulos anteriores hemos visto como podemos hacer el movimiento de un objeto, simplemente
cambiando su disposición en el stage entre el keyframe inicial y el final. En este capítulo vamos a explicar
como conseguir que un objeto se transforme en otro consiguiendo un efecto de Morphing.

En primer lugar debemos arrastrar los 3 elementos de animación a la misma capa. En este caso los 3 objetos
serán el objeto "lo", el objeto "más" y el objeto "web".
2) A continuación colocamos el objeto "lo" en el frame1, el objeto "más" en el frame 10, y el objeto "web en el
frame 20".

3) Una vez hecho esto debemos seleccionar los frames y definir la animación >Properties>Create Tweening
Motion.Especificando en la opción Tweening Shape. Así definimos que el movimiento en cuestión es de tipo
Morphing.

4) Muy importante, si ves que los objetos no se transforman asegúrate que cada uno de ellos está
desagrupado con la opción Break Apart.

LA OPCION " INSPECTOR"

Dentro de la opción Window de Flash nos encontramos con una opción muy útil para organizar nuestra
"movie". Se trata de la opción Inspector. Esta opción cuenta con las siguientes ventanas:

Object: Desde aquí podemos comprobar las propiedades de nuestros elementos, tales como sus dimensiones
o su ubicación en el Stage. Es muy útil en las animaciones para comprobar de forma exacta si nuestro objeto
por ejemplo tiene el tamaño que deseamos.

Frame: Nos informa del tipo de frame en el que estamos, si tiene sonido o no,si tiene animación o no, de que
tipo de animación se trata, etc.

Transform: En esta ventana podemos comprobar el estado (numérico) de la transformación de nuestros


objetos, por ejemplo la transformación escalar o los grados de rotación que tiene un objeto en una animación.

Scene: Las movies en Flash pueden estar compuestas de una sola escena o de varias, permitiéndose la
posibilidad de navegar por cada una de ellas. Es conveniente separar nuestra movie en diferentes escenas si
esta es muy grande o tiene muchos frames. De este modo tendremos nuestros elementos ordenados y no
correremos el riesgo de tener el Timeline lleno de frames. Mediante la ventana Scene podemos asignar un
nombre a cada una de nuestras escenas y ordenarlas secuencialmente (por orden de aparición).
EFECTO LLUVIA DE ESTRELLAS

En este capítulo vamos a aprender como conseguir un efecto "lluvia de estrellas" que se ejecute en el
momento de hacer click con el ratón en cualquier zona de nuestra "movie". Fíjate en la "movie que tienes a
continuación y haz click en cualquier parte.

Conseguir este efecto es bastante sencillo, lo único que tenemos que hacer es crear un botón transparente,
que recibirá el click y pondrá en marcha el efecto "lluvia de estrellas".

Para ello creamos una movie llamada "efecto", que contiene este botón transparente y a continuación el
efecto lluvia de estrellas. En el primer frame de la movie "efecto", y mediante las "Actions", definimos que esta
movie esté en estado Stop, y en el botón definimos la acción On Press>Play.

Acción para el botón transparente

Como puedes ver en el siguiente gráfico, definimos que dentro de la movie efecto, aparezca el botón con la
acción mencionada anteriormente y además creamos una acción dentro del primer frame de esta movie
definiendo que esté en estado Stop.

Acción para la movie "efecto"

Ahora lo único que tienes que hacer es duplicar la movie "efecto" de forma que cubra totalmente el "stage",
así conseguimos que al hacer click en cualquier parte, se ponga en marcha el efecto "lluvia de estrellas". Te
recordamos que puedes bajarte el archivo .fla para que veas esto con mayor claridad.

Вам также может понравиться