MANUAL DE FLASH                                   

 

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"

MANUAL DE FLASH

 

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

MANUAL DE FLASH

 

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.

3) 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.

                                                                              

                                                                                                                                                                                                                                                

 

MANUAL DE FLASH

 

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.

 

MANUAL DE FLASH

 

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

                                                                 

 

 

MANUAL DE FLASH                                                   

 

CARGAR VARIABLES

A continuación vamos a adentrarnos en una faceta nueva de Flash 4, la posibilidad de trabajar con variables. En este capítulo vamos a sustituir un texto por otro que se encuentra dentro de un fichero txt. Se trata de un ejemplo muy sencillo, pero muy práctico a la vez.

1) Crea un campo de texto con propiedades y déjalo en blanco. En el campo variable escribe la palabra: texto.

2) Crea un botón y asígnale las siguientes acciones:

On Release

Load variables ("texto.txt", 0)

End On

3) A continuación crea un fichero de texto con el texto que desees. Escribe lo que quieras en él.

4) Cada vez que pulses el botón se actualizará el contenido del texto.

                                                                 

                                                                 

                                                                 

MANUAL DE FLASH                                

 

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.

 

 

 

MANUAL DE FLASH

 

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.

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

 

MANUAL DE FLASH                                                  Volver a Manuales

 

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.

 

MANUAL DE FLASH

 

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

 

MANUAL DE FLASH

 

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.

MANUAL DE FLASH

 

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.

4) De esta forma lo que estás haciendo es avanzar frame a frame y encontrándote con una diferente posición del texto.

                                                                 

MANUAL DE FLASH

 

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.

                                                                 

MANUAL DE FLASH                                           Volver a Manuales

 

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.

1) 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.

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

 

                                                                      

                                                                 

MANUAL DE FLASH

 

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.

                                                                  

                                                                  

 

MANUAL DE FLASH

 

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.

 

                                                                 

                                                                 

 

                                                                 

                                                                 

 

 

                                                                

 

 

                                                              

MANUAL DE FLASH

 

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.

 

                                                                

                                                             

 

 

 

MANUAL DE FLASH                                                   

 

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.

 

                                                                 

 

 

 

 

 

 

 

                                              

                                            

                                                                 

 

                                                                 

                                                                 

 

                                                                 

 

                                                                     

 

 

 

 

 

 

 

 

 

 

 

 

 

MANUAL DE FLASH

 

EL STAGE

El "STAGE" es la zona donde empezaremos a trabajar. Lo primero que tenemos que hacer es ejecutar el programa Flash y dirigirnos al menu principal >File>New.Automáticamente nos aparece el interface de Flash (para algunos muy poco intuitivo). En el podremos ver tal y como aparece en el siguiente gráfico las siguientes zonas:

El "STAGE", escenario o zona donde aparecerán los elementos (gráficos, animaciones, etc)
El "TIMELINE", o zona en la que se controla la secuencia de aparición de los diferentes elementos (gráficos, texto ), en una determinada "movie".
El area dedicada a las LAYERS o capas , donde iremos colocando los objetos.
La barra de herramientas, mediante la cual podemos dibujar, pintar, escalar, rotar o hacer las modificaciones que queramos a los elementos de nuestra película.
La cabeza reproductora de igual funcionamiento a cualquier reproductor de Audio/Video (botones de avanzar, retroceder, stop, etc), y con el que podremos comprobar como se va desarrollando nuestra película.