Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Macromedia Flash MX es un programa donde podemos desarrollar desde una simple animación hasta una aplicación
multimedial completa (película, material educativo, sitio web, etc.)
La Pantalla de Flash:
Línea de
Tiempo
Cuadro de
Escenario de la
Herramientas
Película
Ventana de
Propiedades
La Película es el archivo de Flash compuesto por escenas, actores y animaciones. En ella, crearemos nuestros dibujos
con las Herramientas, y nuestras animaciones por medio de la Línea de Tiempo. Para poder configurar esta película,
por ejemplo, cambiarle el tamaño, el color de fondo, la velocidad de los fotogramas o frames por segundo (FPS), se
debe acceder al menú MODIFICAR – DOCUMENTO (en inglés, MODIFY – DOCUMENT). Aparece el siguiente cuadro:
Una vez que terminamos el archivo fuente (la película .fla), debemos exportar dicho archivo, haciendo lo
siguiente:
www.sagradocorazon.edu.ar :
Esta ventana es sensible al contexto donde se hace clic. Esto significa que, si hago clic sobre una línea, va
a mostrar las propiedades o características que se le pueden dar a una línea (longitud, espesor, tipo, etc).
Propiedades
Propiedades de de la
la
Línea
Línea
(el
(el relleno
relleno no
no
funciona
funciona porque
porque
no
no pertenece
pertenece aa lala
línea)
línea)
En cambio, si le hago clic al color de relleno de una figura, mostrará además, la posibilidad de cambiar dicho
relleno.
Propiedades
Propiedades del del
Relleno
Relleno
(ahora
(ahora no no
funcionan
funcionan las las
propiedades
propiedades de de
la
la línea)
línea)
Lo mismo sucederá con cualquier objeto que figure en la película, incluso funciona con la película
misma. Si hago clic en el escenario, aparecerán las opciones para cambiar el color de fondo, el
tamaño, etc.
La línea de tiempo controla a cada objeto que forma parte de la película, ubicándolo en el espacio y en el
tiempo. Cada objeto se llama Actor. Dicho actor puede ser un texto, una imagen, un dibujo o conjunto de
ellos, un sonido, etc. Cuando animamos, cada actor se maneja en forma independiente de los demás, por
eso cada uno se ubica en una capa (Layer) distinta. En el siguiente ejemplo tenemos dos capas:
• Fondo, en la que se dibuja el ambiente de la animación, o sea, dónde transcurre la película. Por
ejemplo, una calle en la ciudad. Los fondos son estáticos, no son animados. Si quisiera animar
algún elemento del fondo tendré que sacarlo de esta capa y ubicarlo en otra. Por ejemplo, quiero
que una nube del cielo se mueva. Crearé una capa llamada Nube, y la animaré allí.
• Auto: se puede dibujar un automóvil y animarlo para que recorra la calle dibujada en el Fondo.
Ocultar
Capa
Agregar
nueva Capa Bloquear Borrar
Capa Capa
Fotogramas:
Los fotogramas son los cuadros que forman una animación. Cada fotograma indica qué se debe ver en la
película, dónde, con qué características y por cuánto tiempo.
Existen cuatro tipos de fotogramas:
• Fotograma (Frame): Encargado de hacer que el actor del fotograma clave permanezca en el
mismo lugar y con las mismas características, una determinada cantidad de tiempo.
• Fotograma Final: Indica que se cumplió el tiempo del actor del fotograma clave.
• Fotograma Vacío: Indica que no hay ningún actor en esa animación, o que el actor desaparece.
• Para agregar un fotograma clave a la capa: Clic derecho (en el fotograma de la capa) – INSERT
KEYFRAME.
• Para agregar un fotograma vacío a la capa: Clic derecho – INSERT BLANK KEYFRAME.
1) Se desea dibujar un círculo rojo, y hacer que aparezca y desaparezca varias veces en el
mismo lugar cada 0.3 segundos:
3) Vuelve a
2) Aquí hay 4 fotogramas aparecer y
vacíos. O sea que el círculo permanece otros
no está (desaparece por 4 fotogramas.
0.3 s)
1) Animación: el círculo
aparece en un
fotograma clave, y
permanece 3
fotogramas más (en 4) Vuelve a
total 4 fotogramas, o sea desaparecer
0.3 segundos)
NOTA:
1. Para reproducir la animación, se presiona la tecla Enter, y el cabezal se mueve por los fotogramas.
2. Para ver una vista previa de la publicación en el Internet Explorer, o en el Flash Player, se debe
presionar la tecla F12. Nótese que la reproducción vuelve a empezar y se hace infinitas veces.
Si se quiere que además de aparecer, el círculo cambie de color, se debe hacer clic en cada
fotograma clave en que aparece (1, 10, 20) luego clic en el relleno rojo para cambiarlo por otro color
con la herramienta Relleno.
2) Se desea agregar una capa al ejemplo anterior, de manera que cada vez que el círculo
desaparezca, aparezca un rectángulo en su lugar:
Observemos las dos capas: cada vez que en la capa Círculo hay fotogra7mas, en la capa Rectángulo están
vacíos. Ahora el cabezal está reproduciendo el fotograma 1. Se ve el círculo.
Y así pasará con los demás fotogramas hasta el 29, que es el último.
Si reproducimos con F12, la animación no tendrá fin, y así es como quedará publicada en el archivo .swf.
Podemos hacer además, que ambas figuras aparezcan en diferentes posiciones del escenario, con
distintos colores, tamaños, rotación, etc. Sólo tenemos que posicionarnos en cada fotograma clave
con un click, luego seleccionar la figura y cambiar sus propiedades.
Símbolos Gráficos:
Si en una película queremos utilizar un determinado objeto muchas veces, conviene convertirlo en símbolo
gráfico. Para ello seleccionamos el objeto y accedemos al menú MODIFY – CONVERT TO SYMBOL:
Nos damos cuenta que un objeto es un símbolo gráfico porque cuando lo seleccionamos, aparece un
rectángulo celeste rodeándolo, y en la ventana de propiedades vemos que dice Graphic a la izquierda.
Arrastro
Arrastro elel
símbolo
símbolo al al
escenario
escenario
todas
todas las
las
veces
veces que
que
quiera.
quiera.
Si le queremos cambiar alguna característica al árbol (color, forma, etc) tendremos que editar el símbolo.
Para ello, debemos hacerle doble clic al mismo en la biblioteca. De esta forma, ingresamos a él y lo
editamos. Por ejemplo, le cambiaremos el color:
4) Clic en la flecha
para salir del
símbolo y volver al
escenario de la
película.
2) Entramos
al símbolo
“árbol”
1) Doble clic en
el símbolo 3) Cambiamos los
colores
Al cambiar el símbolo, automáticamente cambian todas las copias del mismo que habíamos
arrastrado al escenario.
NOTA: No todos los dibujos tienen que ser símbolos gráficos. Si en el ejemplo anterior de la animación del
círculo, éste hubiera sido un símbolo gráfico, no podríamos haber logrado que cambiara de color ni de
tamaño varias veces, pues al editarlo, habría tomado el nuevo color y tamaño en todos los fotogramas
clave.
Interpolaciones:
Las interpolaciones son efectos de animación sencillos que ahorran mucho tiempo al usuario, ya que
colocando un fotograma clave de origen, y otro de destino, se generan todos los fotogramas intermedios de
la animación en forma automática.
Interpolación de Movimiento:
Permite mover un símbolo gráfico por la película desde una posición de origen dada, hasta otra posición
de destino.
Por ejemplo, si quiero mover una estrella desde la izquierda hacia la derecha, debo seguir estos pasos:
Fotograma clave de
origen: la estrella
está a la izquierda.
Fotograma clave de
destino: la estrella
está a la derecha.
Fotogramas
En la línea de tiempo, los
intermedios: por cada fotogramas se pintaron de
uno, la estrella se va violeta y apareció una flecha
desplazando desde el que indica el sentido de la
origen hasta el destino interpolación (desde dónde
parte el símbolo, y a dónde
llega).
Ahora podemos agregarle más efectos a nuestra estrella durante la animación:
• Si queremos que, a medida que se mueva, vaya rotando, hacer clic en el fotograma clave de
destino, y luego rotar la estrella.
• Si queremos hacer un zoom a la estrella (que se agrande), posicionados en el fotograma clave
destino, agrandar la estrella.
• Si queremos que se achique, agrandar la estrella en el primer fotograma clave, o achicarla en el
último.
Interpolación de Forma:
Consiste en lograr que un dibujo se convierta en otro dibujo. Es decir, a medida que se va deformando, va
adquiriendo la forma del otro.
Fotograma clave
de origen: círculo.
Fotograma clave de
destino: rectángulo.
• Si queremos que el círculo, a medida que se convierta en el rectángulo, se mueva, hacer clic en el
fotograma clave de destino, y mover el rectángulo a otra posición.
Uso de imágenes:
Podemos incluir en las películas aquellas imágenes que nos gusten. Para ello, debemos importarlas a la
biblioteca, de la siguiente manera:
Acceder al menú FILE – IMPORT – IMPORT TO STAGE : aparece un cuadro para elegir el archivo a
importar. La imagen se importa al escenario de la película, y queda guardada en la Biblioteca.
O BIEN
Acceder al menu FILE – IMPORT – IMPORT TO LIBRARY : también aparece el cuadro para elegir el
archivo. La imagen se importa en la Biblioteca, sin pasar por el escenario de la película. Se elige esta opción
si queremos a importar imágenes que vamos a usar más tarde.
Efectos de imagen:
Además de hacer que una imagen se mueva por la película, rote, se agrande y se achique (como ya hemos
visto), podemos agregarle nuevos efectos:
• Efecto ALFA: Consiste en darle una cierta transparencia a la imagen. Si el efecto alfa es al 0%, la
imagen no se ve (es totalmente transparente). Si es de 50%, es medianamente transparente, y se
ve como si estuviera impresa en un papel de calcar. Si está al 100%, la imagen no tiene
transparencia, es decir, se ve normalmente. Se puede elegir más o menos transparencia entre 0 y
100%. Con este efecto, en una interpolación de movimiento, podríamos hacer que una imagen vaya
apareciendo, vaya desapareciendo, o ambas cosas.
Imagen
Imagen original
original Imagen
Imagen con
con efecto
efecto Tinta
Tinta amarilla
amarilla al
al 40%
40%
• Efecto BRILLO: Es similar al efecto alfa, aunque no se le da transparencia a la imagen, sino que se
le da más o menos brillo a la misma. Este efecto va desde 100% (todo brillo, o sea, se ve un
rectángulo blanco en lugar de la imagen), pasando por 0% (el brillo normal de la foto), hasta –100%
(nada de brillo, es decir, se ve un rectángulo negro).
Imagen
Imagen original
original Imagen
Imagen con
con efecto
efecto Brillo
Brillo al
al –40%
–40%
Es muy sencillo. Construyamos una interpolación de movimiento, en la que aparezca una imagen:
• El fotograma clave de origen tiene que contener una imagen (símbolo gráfico).
• El fotograma clave de destino tiene que contener la misma imagen, en el mismo lugar.
• Luego, a la imagen del primer fotograma clave, aplicarle efecto Alfa al 0%.
Fotograma de origen:
símbolo gráfico de
una imagen.
Hacemos clic en la
imagen, y elegimos
en la opción COLOR,
Alpha al 0%
Fotograma de
destino: el mismo
símbolo gráfico de la
imagen.
Hacemos clic en la
imagen, y elegimos
en la opción COLOR,
Alpha al 100%, o
bien, None (nada).
Fotogramas
intermedios: la
imagen va
apareciendo.
Ahora, construyamos una interpolación de movimiento, en la que una imagen pase de un tinte rojo a un tinte
azul:
Fotograma de origen:
símbolo gráfico de Hacemos clic en la
una imagen. imagen, y elegimos
en la opción COLOR:
TINT. Luego elegimos
el color rojo, y
colocamos 30%
Fotograma de
destino: el mismo Hacemos clic en la
símbolo gráfico. imagen, y elegimos
en la opción COLOR:
TINT. Luego elegimos
el color azul, y
colocamos 38%
Fotogramas
intermedios: la
imagen va
cambiando del tono
rojo al azul.
Botones:
Además de los símbolos gráficos, existe el símbolo de tipo Botón, que se utiliza para controlar la
reproducción de la película. El botón responde a eventos del Mouse y tiene tres formas de visualizarse que
debemos definir nosotros al dibujarlo:
• UP: Qué aspecto tendrá el botón cuando se vea sobre el escenario. Ejemplo =>
• OVER: Qué aspecto tendrá el botón cuando le pasemos el Mouse por encima.
Ejemplo: cambiará el color de fondo y del texto =>
Además tiene la opción HIT, que no se ve en pantalla pero es muy importante, pues ella determina cuál es
la zona activa del botón (la parte del mismo habilitada para hacerle clic). Por lo general es todo el dibujo del
botón.
Al crear un botón, los tres comportamientos anteriores (UP, OVER y DOWN) deben estar definidos, aunque
no es obligatorio que los tres cambien colores, formas, fuentes, etc. Y la opción HIT también tiene que
quedar definida.
En la película, crearemos un nuevo símbolo, de tipo botón. Para ello, acceder al menú INSERT – NEW
SYMBOL. Aparece el siguiente cuadro, en el que escribiremos el nombre del botón sin espacios (en este
caso, Reproducir), y elegiremos la opción BUTTON. Luego clic en OK:
Cuando hacemos clic en OK, entramos al nuevo objeto de tipo botón, para dibujarlo.
En la Biblioteca
aparece el nuevo
botón, aunque todavía
no tiene contenido.
PASO 2:
PASO 3:
PASO 4:
Ahora definamos la zona activa del botón, o sea, la parte del mismo
que va a responder al Mouse (HIT). En este caso, todo el dibujo
estará activo, por lo que, si insertamos un fotograma clave en la
opción HIT, al aparecer una copia del botón hecho en el paso
anterior, ya estamos definiendo esta zona activa. No es necesario
cambiar el aspecto del botón porque no se verá en pantalla.
Listo. Ahora, salimos del símbolo Botón haciendo clic en la flecha celeste que aparece en la ventana del
botón, y volvemos al escenario.
Si miramos la Biblioteca, allí estará el botón Reproducir, ahora mostrando su aspecto definido en UP.
Una vez creado el botón, debemos hacerlo funcionar, definiendo qué hará ese botón. Es decir, qué ACCIÓN
realizará cuando le hagamos clic.
Por ejemplo:
• Reproducir la película (play).
• Detener la película (stop).
• Ir a un determinado fotograma y reproducir la película desde allí (gotoandplay).
• Ir a un determinado fotograma y detener la reproducción allí (gotoandstop).
• Cargar un sitio web (getURL).
Para ver si el botón funciona o no, debemos crearlo e insertarlo en una película que contenga, al menos,
una animación.
Crearemos una capa nueva capa llamada BOTONES, que contendrá todos los botones que vayamos a
crear. Esta capa no posee animación, y deberá acompañar a las demás capas durante toda la película, de
manera que el usuario pueda acceder a los botones en cualquier momento de la reproducción de la misma.
La capa BOTONES
acompaña a toda
la película.
Ubicado en la capa
BOTONES,
arrastramos el
botón de la
Biblioteca al
escenario.
El botón debe
estar
seleccionado
Ventana de
Acciones
desplegada.
Nótese que al lado
de Actions, debe
figurar la palabra Panel de Código:
Button, para aquí se escribe el código,
trabajar sobre el usando el lenguaje de
botón. programación
ACTIONSCRIPT, que
definirá la acción a
realizar por el botón
cuando se le haga clic.
Nuestro botón deberá reproducir la película. Por lo tanto el código a escribir en el panel de código es:
on(press)
on(press) significa
significa “cuando
“cuando se
se presione
presione el
el botón...”
botón...”
on(press)
on(press) play();
play(); significa
significa “reproducir
“reproducir la
la película”
película”
{{
yy las
las llaves
llaves obligatorias
obligatorias se
se colocan
colocan para
para indicar
indicar que
que todo
todo lo
lo que
que está
está entre
entre ellas,
ellas,
play();
play(); se
se va
va aa realizar
realizar cuando
cuando sese presione
presione el
el botón
botón (en
(en este
este caso
caso es
es play();
play(); solamente,
solamente,
}} pero
pero puede
puede haber
haber más
más código).
código).
Cuando El código se
terminamos de escribe todo en
escribir el minúscula, salvo
código, clic en excepciones que
Actions para se verán luego.
cerrar la ventana
Una vez creado el botón Detener Película, nos ubicamos en la misma capa BOTONES y lo arrastramos al
escenario, lo seleccionamos, y en el panel de código de la ventana de Acciones escribiremos:
on(press)
on(press) significa
significa “cuando
“cuando se
se presione
presione el
el botón...”
botón...”
on(press)
on(press) stop();
stop(); significa
significa “detener
“detener la
la película”
película”
{{
yy las
las llaves
llaves obligatorias
obligatorias se
se colocan
colocan para
para indicar
indicar que
que todo
todo lo
lo que
que está
está entre
entre ellas,
ellas,
stop();
stop(); se
se vava aa realizar
realizar cuando
cuando sese presione
presione el
el botón
botón (en
(en este
este caso
caso es
es stop();
stop(); solamente,
solamente,
}} pero
pero puede
puede haber
haber más
más código).
código).
Ahora podemos probar cómo funcionan ambos botones haciendo una vista previa de la publicación de la
película, presionando la tecla F12.
on(press)
on(press) significa
significa “cuando
“cuando se
se presione
presione el
el botón...”
botón...”
on(press)
on(press)
gotoandplay(20);
gotoandplay(20); significa
significa “ir
“ir yy reproducir
reproducir desde
desde el
el fotograma
fotograma 20
20
{{ en
en adelante”
adelante”
gotoandplay(20);
gotoandplay(20);
}} con
con las
las llaves
llaves obligatorias.
obligatorias.
• Ir a un determinado fotograma y detener la película allí (por ejemplo, en el fotograma 15).
on(press)
on(press) significa
significa “cuando
“cuando se
se presione
presione el
el botón...”
botón...”
on(press)
on(press)
gotoandstop(15);
gotoandstop(15); significa
significa “Ir
“Ir yy detener
detener la
la película
película en
en el
el fotograma
fotograma
{{ 15”
15”
gotoandstop(15);
gotoandstop(15);
}} con
con las
las llaves
llaves obligatorias.
obligatorias.