Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Tutorial Flash MX 2004 PDF
Tutorial Flash MX 2004 PDF
INTRODUCCIN (Pag. 5)
Qu es Flash?
La alternativa a Flash: DHTML
Conclusin
La barra de herramientas.
Herramientas bsicas.
Herramientas avanzadas.
Opciones de las herramientas.
El panel mezclador de colores.
El panel muestras de color.
Propiedades.
Tipos de texto.
Texto esttico.
Texto dinmico.
Texto de entrada.
Importar sonidos
Propiedades
Editar un sonido
Insertar un sonido en la pelcula
Compresin de sonidos
Conclusin
Los objetos
Seleccionando objetos
Panel alinear. Alineando objetos
Panel informacin
Los grupos de objetos
Las capas
Manejo bsico de las capas
Reorganizacin de las capas
Tipos de capas
Los smbolos
Creacin de un smbolo
La biblioteca
Smbolos e instancias
Modificar una instancia
Propiedades de una instancia
Efectos de color sobre instancias
Los grficos
Tipos de grficos
Crear un grfico
Propiedades de un grfico
Importar un mapa de bits como un grfico
Cargar un archivo de un dibujo vectorial
Exportar un objeto flash como mapa de bits
Exportar un objeto flash como una animacin
Los botones
Crear un botn
La importancia de la zona activa
Incluir un clip de pelcula en un botn
Crear botones mediante imgenes de mapas de bits
Manejar las acciones en los botones
Incluir sonido en un botn
Animaciones de movimiento
Interpolacin de movimiento
Crear una animacin de movimiento
Crear animaciones de movimiento avanzadas
Animar texto
Animar lneas
Interpolacin mediante una gua de movimiento
Animaciones de forma
Crear una animacin de forma
Transformar textos
Refinando la animacin de forma
Introduccin
Efectos sobre la interpolacin de movimiento
Efectos sobre el smbolo interpolado
Consideraciones en el dibujo
Consideraciones en la organizacin
Consideraciones en los textos
Consideraciones en los sonidos
Consideraciones en la animacin
Crear un preloader
Crear un archivo SWF
Distribucin para pginas Web
Qu es el ActionScript?
El panel acciones
Los operadores
Las acciones
Los objetos
Las propiedades
Qu es Flash?
Flash MX 2004 es una potente herramienta creada por Macromedia. Nos
permite la creacin de pginas Web, animaciones, aplicaciones, juegos, etc. El
nico lmite que tenemos es el de nuestra imaginacin.
Conclusin
Y ante todo esto Qu nos ofrece Flash? Pues Flash es, con diferencia, la
herramienta ms potente del mercado para crear contenido multimedia para la Web
pero presenta dos inconvenientes importantes.
La barra de mens
Como es normal en cualquier aplicacin, tenemos una barra de men que
nos permitir tener acceso rpido a todas las operaciones disponibles.
Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y
por las escenas. Tambin incluye la posibilidad de crear una cuadrcula y
unas guas. Esto se puede seleccionar desde los submens Cuadrcula y
Guas desde donde tambin se pueden configurar sus opciones.
Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece
Macromedia, desde el manual existente, hasta el diccionario de Action
Script, pasando por tutoriales, lecciones guiadas etc...
Para acceder a ellas, hagamos clic con el botn derecho sobre cualquier
parte del escenario en la que no haya ningn objeto y despus sobre Propiedades
del documento:
Los objetos que estn en una determinada capa comparten fotograma y por
tanto, pueden "mezclarse" entre s. Veamos un ejemplo:
Creamos un cuadrado.
Para que unos objetos no interfieran en otros objetos, los colocamos en capas
diferentes. Podemos crear tantas capas como nos sea necesario.
Los paneles
Los Paneles son conjuntos de comandos agrupados segn su funcin (por
ejemplo, todo lo que haga referencia a las acciones, ir en el Panel "Acciones"). Su
misin es simplificar y facilitar el uso de los comandos.
Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til.
Panel Mezclador de Colores: Mediante este panel creamos los colores que
ms nos gusten.
Panel Cadenas: Mediante este panel Flash MX 2004 aporta soporte multi-
idioma a nuestras pelculas.
La barra de herramientas.
Cuando se disea una pgina Web o una animacin el diseador pasa por
muchas fases. Tras la fase de "Qu quiero crear y cmo va a ser" viene
(normalmente) la fase de diseo grfico. Llevar lo que ha producido tu imaginacin
al papel (en este caso al papel de Flash).
Herramientas bsicas.
Ahora hacemos una seleccin de un rea. Haciendo clic en una esquina y arrastrar
hasta la opuesta.
Ahora vamos a ver cmo seleccionar las lneas de los dibujos que hagamos.
Siempre que dibujamos con la herramienta lpiz, aunque hagamos todo de un
trazo, flash, lo dividir en varios, segn el ngulo que tenga.
Y creamos el valo.
Para hacer un crculo, igual que para el valo, pero manteniendo pulsada la
tecla Shift May izquierda.
Vamos a probarlo.
Una vez que levantemos el botn izquierdo del ratn, Flash detectar que
queremos dibujar un crculo y mejorar el aspecto de nuestro dibujo. Esto es lo
que tenemos de resultado.
Herramientas avanzadas.
Simplemente, dibujamos con el lazo una figura que encierre el rea que
queremos seleccionar.
Vamos a hacer un polgono con esquinas. Para eso, hacemos clic en los puntos
que queremos hacer las esquinas.
Hay que dedicarle bastante prctica para llegar a dominar esta herramienta.
Para cambiarle el color, tamao y estilo del borde, seleccionamos el bote de tinta.
En el panel de propiedades, elegimos el nuevo color, el tamao del trazo (borde), y
su estilo.
Vamos a hacer una forma con la herramienta lpiz, con la opcin Suavizar.
Suavizar Enderezar
Por intuicin, nos podremos imaginar qu es lo que har cada uno: Suavizar, har
las esquinas ms curvas; y Enderezar, transformar las curvas en esquinas. Si
realizamos alguna de estas acciones muchas veces, pueden pasar cosas curiosas.
Estos degradados nos pueden ser tiles por ejemplo, para hacer escenas de
oscuridad (tambin puedes hacer efectos de niebla, y muchas cosas ms).
Creamos un degradado radial, en el que el color externo sea el negro y opaco; y el
interno sea blanco y completamente transparente. Podemos obtener:
Propiedades.
Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una
animacin, y por tanto, tambin todo aquello relativo a los textos. Sin embargo,
Flash fue concebido para crear animaciones grficas, de modo que tratar
cualquier texto como si de un objeto ms se tratase, listo para ser animado a
nuestro gusto. Esto nos permitir posteriormente animar textos y crear
espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos
de texto, texto esttico o normal, texto dinmico y texto de entrada (para que el
usuario introduzca sus datos, por ejemplo), tambin se puede crear texto que
soporte formato HTML etc...
Otras Propiedades: Dado que Flash trata los textos como objetos, stos
tambin tienen anchura, altura y coordenadas. Podemos modificarlos a
nuestro gusto, pero debemos tener en cuenta que los caracteres no
deben estirarse sin motivo, pues las tipografas son una parte muy
importante y deben respetarse.
Tipos de texto.
Como ya hemos comentado, Flash distingue entre diversos tipos de textos y
les da un tratamiento especial, segn el tipo que sean.
Texto esttico.
El Texto Esttico se caracteriza por no presentar ningn cambio a lo largo
de la animacin. Es importante que no confundamos la palabra "esttico" con que
el texto no se mueva o malinterpretemos la frase "es el texto que no presenta
cambios a lo largo de la animacin".
Usar Fuentes del Dispositivo: Esta opcin permite que la pelcula Flash
emplee las Fuentes que tenga instaladas el usuario que ve la pelcula en su
ordenador. Si dicho usuario dispone de las fuentes que hemos utilizado en la
pelcula, la ver exactamente como queremos que la vea, pero si no las tiene, Flash
emplear la fuente que ms se le parezca. Esto muchas veces lleva a que el
resultado final (el que ve el usuario) no se parezca al que pretendamos, por lo que
suele ser conveniente mantener esta opcin sin seleccionar, aunque esto conlleve
un mayor tamao de la pelcula final.
Texto dinmico.
El Texto Dinmico en contraposicin al esttico s que puede cambiar su
contenido (adems de estar animado). Su uso es bastante ms complejo que el del
Texto Esttico, ya que cada recuadro de texto Dinmico puede ser una variable
modificable mediante ActionScript, esto quiere decir que los valores y propiedades
de este tipo de textos se pueden modificar mediante programacin, lo que nos saca
del objetivo de este curso. Un uso comn que suelen tener es el de representar los
textos introducidos mediante Textos de Entrada (ver siguiente punto).
Texto de entrada.
El Texto de Entrada tiene bsicamente las mismas propiedades que el Texto
Dinmico, junto con algunas propias de un tipo de texto orientado a la introduccin
de datos por parte de usuario, como por ejemplo el nmero mximo de lneas que
puede introducir en ese campo de texto o si queremos que lo que el usuario escriba
en dicho campo aparezca como asteriscos (para las contraseas).
Como hemos mencionado antes, este tipo de texto se puede combinar con el
Texto Dinmico.
Ahora podemos especificar el tipo de texto que queremos que sea. Para ello,
utilizaremos la lista desplegable:
Simplemente con esta herramienta, hacemos clic sobre el texto, de tal forma que
quede como la primera imagen de este ejemplo, y seleccionamos el texto que
queremos modificar.
Cambiamos las propiedades que queramos. En este caso, el tamao del texto. Y
listo!
Hasta hace poco, los nicos sonidos que oamos en las pginas Web eran
los famosos "midis", de escaso tamao y de escasa calidad. De hecho, eran slo
instrumentos musicales sin voz, de ah su pequeo tamao (y calidad). An as,
siempre exista algn creador de pginas Web que se aventuraba a poner algn
sonido complejo (.wav o .mp3) en su pgina Web, por desgracia, su carga es tan
lenta, que la mayora de los visitantes se iran de la pgina sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia,
poner sonido a las pginas Web es un poco ms fcil, qu aporta FLASH?
Podemos dar a la pelcula efectos simples (el tpico "clic" al pulsar un botn),
efectos complejos (msica de fondo) e incluso podemos hacer que la animacin se
desarrolle conjuntamente con una msica (si bien esto ltimo necesitara que toda
la pelcula estuviera descargada previamente, para evitar "atascos" durante el
desarrollo de la animacin). En definitiva, Flash nos lo vuelve a poner fcil.
Importar sonidos
Si alguna vez habis intentado aadir un sonido a vuestra animacin Flash
probablemente os hayis llevado una gran decepcin, no conseguirlo. Esto se debe
a que no se tiene en cuenta que para poder emplear un objeto en nuestra pelcula,
o bien lo creamos nosotros (como llevamos haciendo hasta ahora) o bien lo
conseguimos de cualquier otro modo y lo insertamos en nuestra pelcula.
Aqu en la biblioteca nos encontramos con todos los elementos que utilizamos en
nuestra pelcula.
Propiedades
En Flash MX 2004, al igual que en Flash MX todo lo referente a los sonidos
lo podemos editar desde el Panel Propiedades. Aqu tenemos todo lo necesario
para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos
importado ningn sonido, nos daremos cuenta de que no podemos seleccionar
nada en dicho panel, basta insertarlo para que esto cambie.
Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como
por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la
sensacin de que el sonido te envuelve ya que lo oyes por un sitio y luego
por otro, aunque queda muy lejos de los verdaderos sonidos envolventes),
que el volumen aumente progresivamente etc... Si deseamos aadir
complejos efectos sonoros, deberemos tratar adecuadamente el sonido con
algn programa creado especficamente para este propsito antes de
importarlo. Aunque como veremos, mediante Editar podremos hacer
cosas parecidas.
Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est
asociado, por tanto, si la carga de la pelcula es lenta y las imgenes no
fluyen adecuadamente, el sonido se detendr para sincronizarse con ellas.
Este efecto puede dar la sensacin de que la pelcula se corta de un modo
muy brusco (pensar en que se considera normal que una imagen tarde en
Por otra parte, es un efecto muy adecuado para algunas situaciones, por
ejemplo, el efecto de que un personaje hable durante una pelcula. En esta
situacin, es muy recomendable que el sonido y las imgenes estn
sincronizados.
Editar un sonido
Flash no fue creado como un editor de sonidos, por lo que su potencia en
este campo es limitada. An as, los efectos que permite aplicar de un modo
sencillo suelen ser suficientes para cualquier animacin que queramos realizar.
Disponemos de estos efectos:
Las lneas grises representan el volumen del sonido y haciendo clic en ellas
podemos configurar este volumen.
Ahora, en la lnea del tiempo, hacemos clic con el botn izquierdo en el rectngulo
que est debajo del nmero. (En este ejemplo trabajamos solamente con una capa
puesto que la pelcula no tendr nada ms que sonido. Se recomienda que pongas
cada sonido en una capa, o como mnimo, que reserves una capa para los efectos
de sonido. Pero eso se ver ms tarde.)
Si queremos que nuestra pelcula flash dure cincuenta frames (4,1 segundos),
hacemos clic con el botn derecho del ratn sobre el rectngulo que est debajo
del nmero cincuenta y seleccionamos Insertar fotograma.
Esto le indica a FLASH que en ese frame tiene que hacer algo. Tanto ejecutar
alguna orden en lo referente al sonido (Como estamos haciendo), como en guardar
el estado de cada elemento que hay en la capa actual marcada (Para hacer
animaciones, como veremos ms adelante).
Ahora, cuando la pelcula FLASH llegue a ese frame, realizar esas acciones.
Prueba a ver otra vez la pelcula y vers como a los 4,1 segundos, el sonido se
detiene. (Por un momento)
Compresin de sonidos
Puedes a Flash el formato de compresin de cada archivo de audio para que
al generar la pelcula, recomprima el sonido en el formato especificado. Para ello,
haz clic con el botn derecho sobre el sonido en la biblioteca y elige Propiedades.
Una vez decididos a insertar el sonido, la lgica nos dice que insertemos el
sonido que ocupe un espacio menor en el disco duro, ya que este espacio es el que
ocupar en nuestra pelcula. Esto es una aproximacin, ya que Flash comprime
todo aquello que insertamos en nuestras pelculas.
Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que
los sonidos .wav (10 veces menos o ms), por lo que parece recomendable insertar
.mp3 en lugar de .wav, ahora bien Puede Flash comprimir un sonido ya
comprimido? Es decir, si un sonido .wav ha sido comprimido y ahora tiene
extensin .mp3, podr Flash volver a comprimirlo? La respuesta es NO. Flash
comprime los sonidos que insertamos en nuestras pelculas, pero si el sonido
resulta estar ya comprimido, no podr volver a comprimirlo (en realidad si que
consigue comprimirlo, pero el sonido final es el mismo que el inicial).
Los objetos
Independientemente de si estamos trabajando en una animacin, en una
pgina Web, en un catlogo para un CDRom o en cualquier otra cosa, tendremos
que trabajar con objetos. A grandes rasgos, podremos considerar un objeto todo
aquello que aparezca en nuestra pelcula y sea visible, de modo que podamos
trabajar con l, un objeto sera, por ejemplo, cualquier imagen que creemos o
importemos, un botn, un dibujo creado por nosotros mismos etc...
El Borde: Consiste en una delgada lnea que separa el objeto del exterior del
escenario.
El Relleno: El relleno no es ms que el propio objeto sin borde. Es, por tanto,
la parte interna del objeto. Su existencia tambin es arbitraria, ya que
podemos crear un objeto cuyo color de relleno sea transparente, como ya se
vio en el tema de Dibujar, y por tanto, parecer que dicho objeto no tiene
relleno, aunque en realidad s que exista pero sea de color transparente.
Para dibujar Rellenos (sin borde) podemos usar herramientas tales como el
Pincel o el Cubo de Pintura (Para cambiar el color del relleno).
Seleccionando objetos
Vamos a hacer un repaso de la seleccin de objetos.
El Panel Alinear permite colocar los objetos tal y cmo le indiquemos. Antes
de ver las posibilidades, debemos hacer hincapi en la opcin En Escenario (En
Escenario). Esta opcin nos permite decir a Flash que todas las posiciones que
indiquemos para nuestros objetos tomen como referencia el escenario.
Panel informacin
Adems de controlar la posicin de los objetos desde el Panel Alineamiento,
tambin podemos hacerlo, de un modo ms exacto (ms matemtico) desde otro
panel, el Panel Informacin.
Tras hacer esto observaremos que desaparecen las texturas que indicaban
que los objetos estaban seleccionados y observamos que el grupo pasa a ser un
"todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se
seleccionen a su vez los dems. Adems, aparece el rectngulo azul (por defecto)
que rodea al grupo, definindolo como tal.
Adems, Flash nos permite modificar los elementos de un grupo sin tener
que desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic
en el Men Edicin Editar Seleccionado (O le hacemos doble clic). Podremos
editar los objetos que componen el grupo por separado teniendo en cuenta que,
como es lgico, los cambios realizados afectarn al grupo adems de al elemento
en cuestin. Una vez modificado el grupo, deberemos volver a modo de dibujo
normal (En de dibujo de esciena). Para ello pulsamos sobre:
Las capas
Todo el mundo ha visto alguna vez cmo trabajan los dibujantes de dibujos
animados. Y todos hemos visto cmo colocan una hoja semitransparente con
dibujos sobre otras y la superposicin de todas forman el dibujo final. Por qu no
dibujan todo en una misma hoja? Por qu trabajan con varios niveles y con varios
dibujos si van a acabar todos juntos?
Los motivos son muchos, y estos niveles que emplean los dibujantes,
equivalen a las Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que
podemos dibujar, insertar sonidos, textos... con INDEPENDENCIA del resto de
capas. Hay que tener en cuenta que todas las capas comparten la misma Lnea de
Tiempos y por tanto, sus distintos fotogramas se reproducirn simultneamente.
Como puedes observar, una capa se dibujar encima de todas las capas que
tenga debajo. Ahora vamos a mover la capa Hombre arriba a ver qu sucede (Se
hace arrastrando la capa Hombre por la parte de arriba de la capa Valla)
Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra
pelcula de forma lgica, y nos ayudan en la edicin de dibujos (evitando que se
"fundan" en uno slo, o bloqueando el resto de capas de modo que slo podamos
seleccionar la capa que nos interese).
Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer
doble clic en el nombre actual.
Bloquear una capa es muy til cuando tenemos varios objetos juntos y en
capas distintas y queremos asegurarnos de que no modificamos "sin querer"
alguno de ellos. Tras bloquear su capa podremos trabajar con la seguridad
de no modificar dicho objeto, ni siquiera podremos seleccionarlo, de modo
que editaremos con mayor facilidad el objeto que queramos.
Este lpiz nos indica cual de las capas es la que tenemos activa para
dibujar.
Tipos de capas
Como habris podido comprobar al ver las propiedades generales de una
capa o al hacer clic con el botn derecho del ratn sobre el icono de una capa
cualquiera, existen varios tipos de capas.
Capas normales: Son las capas por defecto de Flash y tienen todas las
propiedades descritas en los puntos anteriores. Son las ms usadas y se
emplean para todo, colocar objetos, sonidos, acciones, ayudas...
Capas Guiadas (Guided Layers): Cuando definimos una capa como capa
gua, es necesario definir despus una capa guiada. Esto es, una capa que
quedar afectada por la gua definida en la Capa gua.
Capas Mscara: Estas capas se pueden ver como plantillas que tapan a
las capas enmascaradas (las veremos enseguida).
Basta con decir que estas capas se colocan "encima" de las capas a las que
enmascaran y slo dejan que se vea la parte de stas que tapan los objetos
situados en las capas mscara (son como filtros). Al igual que las capas
gua, los objetos existentes en este tipo de capas tampoco se ven en la
pelcula final. S se vern los objetos de su correspondiente capa
enmascarada a los que estn "tapando".
Sus objetos s que son visibles en la pelcula final, pero slo cuando algn
objeto de la capa Mscara est sobre ellos.
Ahora le damos doble clic sobre el icono de la capa que hemos llamado
Mascara. Y seleccionamos Mascara.
Ahora hay que decirle al FLASH qu capa o capas queremos que enmascare. En
este ejemplo, vamos a enmascarar solo una. La arrastramos hacia la capa
Mscara. Si todo ha ido bien, tendremos algo parecido a esto:
La mscara es un filtro que deja ver las zonas que hay en la capa enmascarada
que se corresponden con las zonas que tiene pintadas la capa mscara.
Los smbolos
Los Smbolos (clips de pelcula, botones o grficos) provienen de objetos que
hemos creado utilizando las herramientas que nos proporciona Flash MX 2004.
Creacin de un smbolo
La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya
que es uno de los primeros pasos para crear una animacin, como veremos ms
adelante.
Una vez hecho esto nos aparecer una ventana como la mostrada en la imagen.
Introducimos el nombre del smbolo que vamos a crear.
Esto al principio y mientras tengamos poco smbolos no ser muy importante, pero
ms adelante nos servir para hacer referencia al objeto.
La biblioteca
En Flash MX 2004 podemos encontrar dos tipos de bibliotecas, las
bibliotecas comunes y de ejemplos y aquellas asociadas a las pelculas que hemos
creado (Como en la ultima imagen vista). Todas ellas las tenemos a nuestra
disposicin para utilizar los smbolos que contienen.
Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente
tenemos que ir a la Barra de Mens, Ventana Otros Paneles Bibliotecas
Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de
smbolos: botones, clips o grficos.
Clip de pelcula.
Botones.
Grficos.
Sonidos.
Para este ejemplo vamos a cargar las bibliotecas comunes. En la Barra de Mens,
Ventana Otros Paneles Bibliotecas Comunes Botones.
Smbolos e instancias
Como hemos comentado anteriormente, cuando creamos un smbolo, Flash
lo almacena en una biblioteca (Cada elemento de la biblioteca es un smbolo). Pues
As, este panel, que como hemos visto resulta sumamente til, no nos
permite modificar la estructura bsica de la instancia, pero s otras propiedades,
esto es, podremos hacer que la instancia tenga ms brillo, pero no transformar una
estrella en un crculo.
Intercambiar: Esta opcin merece especial atencin, pues es muy til y nos
ahorrar mucho trabajo cuando sea necesaria emplearla. Su funcin
consiste en cambiar un smbolo cualquiera por otro que tengamos en nuestra
Biblioteca. Puede parecer simple, pero durante el desarrollo de un trabajo
profesional rpidamente surge la necesidad de probar situaciones y los
diseos grficos definitivos no suelen estar disponibles hasta bien avanzado
el proyecto.
Vamos a comentar los distintos efectos aplicables a una instancia, para este
ejemplo, tomaremos la siguiente instancia, que inicialmente se ve as.
Tinta. Esta opcin permite cambiar el color de la instancia, pero puesto que,
como dijimos, no podemos modificar la instancia internamente, al variar el
color en la pestaa Tinta o bien mediante los valores RGB (cantidad de rojo,
verde y azul), se cambiar el color de toda la instancia como si la
estuviramos tiendo o poniendo una capa imaginaria de un color
determinado. El grosor o intensidad de esta "capa" la podemos modificar en
porcentaje mediante la primera pestaa que aparece a la derecha.
Los grficos
Los Grficos son smbolos que nos permiten representar objetos estticos y
animaciones sencillas.
Tipos de grficos
Los grficos pueden ser:
Por esto, aunque las animaciones dan a nuestra Web un aspecto ms bonito
y espectacular tienen dos inconvenientes:
Crear un grfico
Como explicar tericamente las propiedades de un grfico resulta un tanto
confuso, vamos a ver de manera prctica lo que queremos explicar. Vamos a crear
un grfico en Flash y a comprobar las propiedades que hemos comentado en el
primer apartado del tema. Para ello, abre una nueva pelcula Flash Archivo
Nuevo.
Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos
visto a fondo las animaciones, la vamos a realizar de una forma que quiz no sera
Comprueba que ests en la lnea de tiempos del grfico (justo encima del
escenario existe una secuencia que nos indica en qu nivel nos encontramos. En la
imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Grfico
Animado" y, por tanto estamos DENTRO del grfico (y la lnea de tiempos que
vemos es la del grfico, y no la de la pelcula principal)
Pulsa donde pone Escena 1 justo encima del escenario y de este modo
volveremos al nivel inicial (Pelcula principal) y podremos ver nuestro grfico
"desde fuera".
Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La
respuesta est en las caractersticas de los grficos que habamos explicado: la
lnea de tiempos del grfico est ligada a la de la pelcula.
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana
del reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa
F6. Ahora tenemos 5 fotogramas en la pelcula principal.
Propiedades de un grfico
Este es el panel de propiedades que tenemos cuando seleccionamos un
grfico. Vamos a comentar brevemente su funcionamiento.
Como vimos en el tema bsico hay tipos de archivo de mapa de bits que
soportan animaciones, como los GIF. Pues bien, con Flash tambin podemos crear
una animacin y exportarla como un GIF animado.
Al igual que los otros tipos de smbolos de Flash, los clips de pelcula tienen
su propia lnea de tiempo. Sin embargo, y a diferencia de los Grficos (como
veremos a continuacin), esta lnea temporal no est ligada a la lnea de tiempos
del documento que lo contiene, de tal forma que su ejecucin es independiente.
Este tipo de smbolos puede contener cualquier otro tipo de smbolo: grfico,
clip o botn, as como cualquier objeto creado con Flash, ya que un clip es
realmente una pelcula.
Los Clips son una de las herramientas que dan mayor potencia a Flash MX
2004, permitindonos crear pelculas de gran complejidad y multiplicar los efectos
visuales, ya que se pueden crear mltiples movimientos independientes entre s y
crear conexiones entre los diferentes Clips de un documento.
Comprueba que ests en la lnea de tiempos del grfico (justo encima del
escenario existe una secuencia que nos indica en qu nivel nos encontramos. En la
imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Grfico
Animado" y, por tanto estamos DENTRO del grfico (y la lnea de tiempos que
vemos es la del grfico, y no la de la pelcula principal)
Pulsa donde pone Escena 1 justo encima del escenario y de este modo
volveremos al nivel inicial (Pelcula principal) y podremos ver nuestro grfico
"desde fuera".
Hemos visto en el tema de Smbolos, dos tipos de bibliotecas: las que estn
asociadas a documentos u otras pelculas y las que nos proporciona Flash MX.
Pues bien, no slo podemos utilizar smbolos del mismo documento en el que
estamos sino que podemos Importarlos de otros documentos de nuestro disco duro,
lo que, en el caso que nos ocupa, puede resultar de gran utilidad. Obviamente la
exportacin mediante biblioteca se hace automticamente ya que Flash deja los
objetos creados en la biblioteca para que puedan ser reutilizados.
Los botones
Los smbolos de tipo Botn son los que aportan la mayor parte de la
interactividad de las pelculas Flash con aquel que la est visualizando. Un botn,
en Flash, es igual que cualquier botn de cualquier entorno informtico, sea Web o
cualquier otro.
Al igual que los otros smbolos de Flash MX 2004, los botones tienen su
propia lnea de tiempos. Esta es independiente pero, sin embargo, est formada
nicamente por cuatro fotogramas, uno para cada estado posible del botn.
Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn
no est situado sobre l.
Sobre. Aspecto del botn cuando situamos el puntero sobre l.
Presionado. Apariencia que deseamos tenga nuestro botn mientras lo
mantengamos pulsado.
Zona activa. Aqu debemos indicar el rea real en la que queremos que
acte nuestro botn. Esto es importante sobre todo en botones compuestos
slo por texto como veremos ms adelante.
Crear un botn
En la creacin de un botn podemos considerar dos fases. En la primera
vamos a convertir nuestro objeto a smbolo de tipo botn y posteriormente veremos
cmo completarlo internamente, lo que nos ayudar a entender mejor dicha
estructura.
Cuando tengamos delante la lnea de tiempos del botn (observa que tiene
el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los
frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un
fotograma clave en cada uno de ellos.
Ahora ya podemos modificar el aspecto inicial del botn para cada posicin
del cursor y marcar el rea de accin del botn (fotograma Hit) en la que
Yo he hecho lo siguiente:
Por eso es muy importante que si hacemos un botn solo con texto, en la
zona activa dibujemos un rectngulo que ocupe toda la zona del texto en el que se
le puede hacer clic.
Para hacer esto, primero deberemos crear los clips que queremos que se
muestren en el botn, o como botn.
Una vez creados, nos situamos en la lnea de tiempo interna del botn,
eliminamos la imagen que tiene en cada estado y la sustituimos por los clips que
habremos creado y que tendremos en nuestra biblioteca, arrastrndolos al centro
de la imagen del botn.
Puesto que, como ya hemos visto, todo lo que se puede hacer con un grfico
se puede hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos
permite importar, ya que estn muy extendidos como forma de expresin grfica a
lo largo y ancho de la Red.
1) Abrir una pgina Web. Con esto conseguiremos abrir una pgina cualquiera
de Internet (o una pelcula Flash), lo que nos servir para irnos desplazando
Por ejemplo, para detener una pelcula en curso simplemente debemos hacer
que nuestro botn en cuestin aparezca en el escenario de dicha pelcula,
seleccionarlo, y abrir el panel de acciones, activando posteriormente la
funcin Stop().
Los fotogramas clave, son fotogramas que van a tener informacin. Para el
caso de esta animacin fotograma a fotograma, la informacin que van a tener va a
ver la de la imagen que se mostrar en cada fotograma. Este es el resultado de la
accin:
Cuando el crculo est blanco, Flash nos est diciendo que ese fotograma no
tiene informacin. (Est vaco)
Cuando el crculo est pintado de negro, significa que ese frame tiene
informacin. (Tiene algo pintado dentro)
Dibujamos el tercero
Y as hasta terminar
Mientras dibujas cada fotograma, fjate como el crculo que marca cada
fotograma, se va pintando de negro a la vez que insertas contenido (informacin)
en ese fotograma.
Animaciones de movimiento
Son animaciones en las que intervienen Smbolos que se mueven desde un
punto del escenario a otro. Este movimiento se realizar siguiendo un camino, o en
lnea recta. Con velocidad constante, o con una determinada aceleracin.
Interpolacin de movimiento
El movimiento de un smbolo ms simple consiste en hacer que se mueva de
un punto a otro. Nosotros le diremos al Flash estos puntos y l se encargar de
animar nuestro smbolo calculando las posiciones intermedias. A este proceso de le
denomina interpolacin.
Esto indica que la animacin cambiar la posicin del smbolo del fotograma
1 hasta la posicin del mismo smbolo en el fotograma 15, utilizando precisamente
15 fotogramas. El nmero de fotogramas que se usen en la interpolacin de
movimiento indicar las subetapas de que constar la animacin. Cuantas ms
subetapas ms sensacin de "continuidad" (menos saltos bruscos) pero a la vez
menos velocidad en el movimiento.
Esta opcin nos crear un fotograma clave en el fotograma nmero 10 con las
mismas caractersticas que el que tenemos en el nmero 1.
En el campo que aparece Sin movimiento son fotogramas en los que se ver
la informacin que hay en el fotograma clave anterior.
Ya hemos especificado la posicin inicial y final. Ahora slo nos queda decirle
al Flash que en los fotogramas intermedios haga una interpolacin. Cmo se
hace? Pues observa...!
Esto es muy sencillo con Flash MX, basta con modificar la instancia del
smbolo en el ltimo fotograma de la interpolacin de movimiento, pero esta vez
cambindole el tamao.
Animar texto
Es indudable que para comunicar algn mensaje, en la mayora de las
ocasiones, no basta con imgenes o iconos, y es aqu donde el texto cobra gran
importancia. No obstante, se debe tener cuidado con la animacin de los textos, ya
que resulta bastante complicado leer un texto que se desplaza o cambia de
tamao.
Por este motivo, un texto animado debera estar slo en las presentaciones o
bien formar parte de una animacin corta y, lo que es ms importante no debera
estar reproducindose infinitamente.
Animar lneas
Una buena animacin no tiene que porqu estar compuesta slo por textos
o imgenes espectaculares. En ocasiones conviene darle a la pelcula un aire ms
sencillo o aadir determinados efectos que la hagan vistosa sin necesidad de
cargar mucho la pelcula visualmente, y en cuanto a tamao de archivo se refiere.
Una gua de movimiento es una capa especial que marca una trayectoria
para los smbolos de la capa a la que afecta, para que dichos smbolos la sigan,
durante el movimiento. Esta capa es invisible durante la reproduccin y permite
dibujar cualquier tipo de dibujo vectorial, que nos permitir crear un movimiento no
forzosamente rectilneo.
Para dibujar la gua que servir de camino, seleccionamos la capa gua. Y con
la herramienta lpiz dibujamos un camino.
Animaciones de forma
Cuando lo que queramos no sea cambiar la posicin de un objeto en el
escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash MX
nos ofrece la tcnica de la Interpolacin por Forma, que consiste simplemente en ir
transformando el contorno de un objeto creado en su interfaz hasta que sea igual
que el contorno de otro objeto distinto. De esta forma conseguimos un morfing.
Esta vez, es importante destacar que para que una Interpolacin por Forma
funcione como es debido aquellos objetos que intervengan debern ser objetos
vectoriales. (no smbolos Flash, as que NO deberemos convertirlos.)
[Interpolacin correcta]
[Interpolacin incorrecta]
F6
Pues bien, para estos casos Flash MX 2004 nos ofrece una herramienta para
solucionarlo: los consejos de forma.
Transformar textos
Debido a la importancia de los textos, es importante comentar las
aplicaciones que tienen los cambios de forma sobre ellos. Aadimos as una
posibilidad ms para realizar logotipos o presentaciones vistosas y transmitir
informacin de manera espectacular.
Introduccin
Si no te parecen suficientes las interpolaciones de forma y de movimiento, y
quieres realizar animaciones ms complejas, puedes combinar las interpolaciones
de movimiento con los efectos y transformaciones que se pueden realizar sobre los
smbolos que las componen y aplicar efectos sobre las mismas interpolaciones.
Consideraciones en el dibujo
A continuacin tienes unos cuantos consejos:
Consideraciones en la organizacin
Agrupar los objetos que estn relacionados, con el comando Modificar
Agrupar.
Si hemos creado un objeto que va a aparecer varias veces, deberamos
convertirlo a smbolo, ya que como hemos visto, Flash lo colocar en la
biblioteca y cada vez que quiera mostrarlo, har referencia a una nica
posicin de memoria.
Ya hemos comentado el mayor tamao de los mapas de bits, lo que hace
que debamos minimizar el nmero de apariciones de stos en nuestra
pelcula.
Consideraciones en la animacin
Utilizar lo ms que podamos las interpolaciones de movimiento y las guas
para reducir el nmero de fotogramas clave y el tamao de la pelcula.
Crear un preloader
Un preloader se usa principalmente para evitar la carga parcial de la pelcula,
mientras esta se est reproduciendo, lo que, en ocasiones en las que la pelcula es
de un tamao considerable, hace que la pelcula se vea entrecortada.
Se pueden complicar mucho ms, pero nosotros haremos uno sencillo que
nos sirva para entender bien el concepto, y la manera de hacerlo.
Para publicar una pelcula Flash en Internet de manera que forme parte de
una pgina Web deberemos insertarla en un archivo tpico de pginas Web cuyo
lenguaje de programacin sea del estilo del HTML. Para ello debemos atender a las
opciones de publicacin HTML que nos ofrece Flash, y que nos ayudarn a que
nuestra pelcula se visualice como realmente queremos.
Qu es el ActionScript?
El ActionScript es el lenguaje de programacin que ha utilizado Macromedia
Flash desde sus comienzos, y que por supuesto, emplea Flash MX 2004. A
grandes rasgos, podemos decir que el ActionScript nos permitir realizar con Flash
MX 2004 todo lo que nos propongamos, ya que nos da el control absoluto de todo
lo que rodea a una pelcula Flash. Absolutamente de todo.
Sin embargo, en estos dos temas slo vamos a ver una pequea
introduccin a ActionScript que servir para sentar las bases que permitirn
empezar a trabajar con ActionScript. Ensear a programar con ActionScript
requerira otro curso completo. Profundizar en el conocimiento de este lenguaje
queda por cuenta del lector. Recomendamos seguir la estupenda Ayuda incluida en
Flash MX 2004.
El panel acciones
En Flash MX 2004, el Panel Acciones sirve para programar scripts con
ActionScript. Esto es, que todo lo que introduzcamos en dicho Panel se ver
reflejado despus en nuestra pelcula. Debemos tener claro desde un principio que
el Panel Acciones puede hacer referencia a Fotogramas u objetos, de modo que el
cdigo ActionScript introducido afectar tan slo a aquello a lo que referencia el
Panel. Por ejemplo, en la imagen inferior, se puede distinguir que el Panel Acciones
hace referencia al Fotograma 1 de la Capa 1.
Los operadores
Entrando un poco ms a fondo en la sintaxis y el manejo del ActionScript,
vamos a comenzar hablando de los operadores, por ser la parte ms elemental de
una accin de ActionScript (y de muchsimos otros lenguajes de programacin).
x = 3 ; Es una expresin cuyo resultado ser asignarle a la variable ' x ' el valor 3
(que es una constante)
Operadores Aritmticos
Operadores de Asignacin
Operadores de Comparacin
Esta posibilidad de comprobar si una expresin es igual a otra, nos ser muy
til para comprobar muchas cosas durante nuestra pelcula y en funcin de ellas,
hacer unas cosas u otras.
if ( edad_usuario == 20 ) {
>= : Mayor o igual que. Devuelve como resultado verdadero (1) si la expresin de la
izquierda es mayor o igual que la de la derecha. De lo contrario, devuelve false (0).
<= : Menor o igual que. Devuelve como resultado verdadero (1) si la expresin de la
izquierda es menor o igual que la de la derecha. De lo contrario, devuelve false (0).
Otros Operadores
" " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse
una cadena de caracteres, por lo que las funciones y acciones que afectan
exclusivamente a las cadenas de caracteres pasan a afectar tambin al elemento
entre comillas. As por ejemplo, mientras que x representa una variable con un valor
determinado, si escribimos "x", estamos escribiendo en realidad el carcter o la
letra "x". Por tanto, podremos aadirlo a una palabra, compararlo con otras letras,
escribirlo por pantalla etc.. pero ya no ser una variable.
Las acciones
Las Acciones son funciones predefinidas de ActionScript, es decir: Flash MX
2004 las crea, y nosotros slo tenemos que usarlas de la manera que se nos indica.
No tenemos que definir las funciones ni nada por el estilo, ni siquiera necesitamos
saber cmo estn hechas... Lo importante es que estn listas para usar, lo que
Uso:
gotoAndPlay(escena, fotograma);
Ejemplo:
gotoAndPlay("Escena2", 7); Esta accin lleva la cabeza lectora al fotograma 7 de
la escena llamada "Escena2".
Uso:
Play();
No tiene Parmetros.
Uso:
Stop();
No tiene Parmetros.
Uso:
fscommand("comando","true / false")
- true / false: Aqu debemos escribir true o false, segn queramos desactivar la
opcin o activarla.
Ejemplo:
fscommand("fullscreen", "true"); Activa la pantalla completa.
getURL: Esta accin se emplea para abrir el navegador Web y abrir la pgina Web
que deseemos.
Uso:
- url: Direccin Web a la que queremos acceder (se abrir una ventana).
Ejemplo:
getURL("http://www.aulaclic.com", "_blank");
Uso:
Ejemplo:
loadMovieNum("MiPeli2.swf", 0); Cargamos la pelcula "MiPeli2.swf" en el nivel
principal. No enviamos variables.
Acciones - Condiciones
Estas acciones sirven para controlar la lgica de la pelcula. Se puede decir
que nos permiten "hablar" con Flash para indicarle lo que debe hacer ante distintas
situaciones. Por ejemplo, ahora que conocemos muchas Acciones, Cmo indicarle
a Flash que "si la variable x = 3, entonces vaya al fotograma 5, y sino, vaya al
fotograma 10"?. Sabemos comparar, sabemos ir a los fotogramas, pero no
sabemos decirle a Flash "Si pasa esto, haz una cosa, y sino, haz la otra...". Veamos
cmo decrselo:
Uso:
- condicin: Indica una condicin que DEBE cumplirse para que sucedan las
acciones indicadas en "sentencias1". Si stas no se cumplen, entonces lo
que sucede es lo especificado en las acciones indicadas en "sentencias2".
Para que una condicin se cumpla, debe tener como resultado true, o lo que
es lo mismo, verdadero, o lo que es lo mismo, 1. De ah la importancia de los
operadores de comparacin y el valor que devuelven.
Ejemplo:
if (x == 2) {gotoAndPlay(6); } Si la variable x vale 2, entonces saltamos al
fotograma 2, sino, no hacemos nada.
Los objetos
Los Objetos, como ya hemos visto en el tema bsico, son instancias de una
determinada clase. Esto es, son representantes de una clase ya definida. As, son
objetos, por ejemplo, un botn, un clip de pelcula, un grfico o un sonido ... es
decir, que prcticamente TODO es un OBJETO en Flash MX
Vamos a ver los objetos ms usados en Flash y una breve descripcin de cada uno
de ellos. Como ya se ha explicado en el tema bsico, cada objeto tiene una serie de
Propiedades (que veremos despus) y unos Mtodos y eventos, que dan
funcionalidad a los objetos. Cuando un componente de Flash pasa a ser un objeto,
automticamente pasa a tener todas las propiedades definidas por Flash para ese
objeto y pasa a reaccionar ante los Mtodos y eventos que tiene definidos. Podis
encontrar una lista con todas las propiedades, mtodos y eventos de los objetos en
el Panel Acciones.
Cuando nos interese que una imagen que hayamos diseado se comporte
como un botn, bastar convertirla a botn (del modo visto en el captulo
correspondiente) y ya podremos usar los eventos tpicos de un botn.
Cuando necesitemos crear una pelcula Flash dentro de otra pelcula, pero
no queramos tener 2 ficheros separados ni molestarnos en cargar una pelcula u
otra, deberemos crear un objeto movieclip. Entre sus propiedades especiales
destaca que los objetos "clip de pelcula" tienen, internamente, una lnea de
tiempos que corre INDEPENDIENTEMENTE de la lnea de tiempos de la pelcula
principal de Flash, lo que nos permite crear animaciones tan complejas e
independientes como queramos (podemos crear tantos clips de pelcula dentro de
otros como queramos, por ejemplo).
Los objetos sonidos no son visuales, y por tanto, no podremos ver como
quedan en los fotogramas, al igual que haramos con un botn o un clip de pelcula.
Deberemos controlarlos, por tanto, desde el Panel Acciones y usando ActionScript.
Tienen multitud de mtodos especiales, muy potentes y tiles, podemos parar un
sonido, crear un bucle, darle efectos sonoros etc...
Podramos, por ejemplo, crear un objeto de tipo sonido y despus hacer que
al pulsar un botn suene. (En el tema siguiente se ver algn ejemplo de uso de
sonidos).
El objeto mouse es uno de los objetos de Flash que ya est definido por
Flash, pues hace referencia al ratn de Windows (al que manejar el usuario que
vea nuestra pelcula). Si lo usamos, podremos acceder a las propiedades del ratn
de Windows, tipo de cursos, efectos asociados, deteccin de su posicin etc...
Las propiedades
Los Mtodos suelen ser especficos de cada objeto, y su estudio requerira
un nuevo curso completo, (recomendamos consultar la ayuda incorporada en el
Flash MX cuando surjan dudas), pero hay bastantes propiedades de los objetos
que son comunes a muchos de ellos. Vamos a ver cules son las ms usadas y
qu representan.
Para usar las propiedades, se debe colocar el nombre del objeto seguido de
un punto ( . ) y despus la propiedad y su valor. Las propiedades siempre
comienzan con un guin abajo ( _ ). Algunas propiedades se pueden escribir sin el
nombre del objeto al que hacen referencia delante, en ese caso, harn referencia a
la pelcula principal.
_alpha
Hace referencia a la opacidad del objeto al que afecte. La opacidad se puede definir
como la no-transparencia. De modo que un 100% de transparencia equivale a un 0
de opacidad, o a un 0 de alpha.
_framesloaded
_totalframes
_height
_width
_visible
_x
Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las
X. Sirve para averiguar la posicin o para asignarla de forma dinmica (durante la
ejecucin de nuestra pelcula Flash)
_y
Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las
X. Sirve para averiguar la posicin o para asignarla de forma dinmica (durante la
ejecucin de nuestra pelcula Flash)