Download guia de flash - sagrado corazón de jesús

Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
Guía Visual de Macromedia Flash MX 2004
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:
Cuando abrimos Macromedia Flash MX nos encontramos con la siguiente pantalla:
Línea de
Tiempo
Cuadro de
Herramientas
Escenario de la
Película
Ventana de
Propiedades
Configuración de la Película (Document o Movie):
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:
Entonces, este cuadro nos pide los datos para el
tamaño de nuestra película, color de fondo, la
velocidad de reproducción, y qué tipo de regla o
unidad de medida deseamos utilizar (píxeles,
centímetros, etc).
Botón Printer (Coincidir con impresora): Significa
que nos adapta el documento para una buena
impresión (en caso de bocetos, por ejemplo).
Botón Contents (Coincidir con contenidos): Nos
adapta el fondo a los objetos que tenemos sobre la
película, y si sobra espacio lo elimina.
Botón
Make
Default
(Transformar
en
predeterminado): Una vez que tenemos todos los
valores anteriores ingresados (alto, ancho, color,
velocidad) y si todas nuestras películas van a ser
iguales, o sea, van a usar esos valores, tomamos esta opción y la dejamos predeterminada. Cada vez que tengamos un
archivo nuevo va a abrir con estas características predeterminadas.
Botón Default (Predeterminado): Sirve para pedir que nos coloque lo predeterminado, por si cambiamos y no es lo
deseado.
Pág. 1
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
Tipos de Archivos manejados por Flash:
En Flash, como mínimo, tenemos dos archivos:

El archivo fuente, es decir, aquél que creamos, animamos, configuramos, y que al
guardarlo su extensión es .fla, y su ícono es de color rojo. Dicho archivo se puede volver a
abrir y modificar, pero no es el que se ejecuta.

El archivo ejecutable o Publicación, el cual nosotros debemos crear al terminar el archivo
fuente. Este archivo es el que realmente se va a ejecutar, ya sea en el Internet Explorer (si
forma parte de una página web), o usando el Flash Player, que es el programa que lo
ejecuta. Su extensión es .swf, y su ícono es de color gris. También podemos hacer que
nuestra película sea un gif animado, un video AVI, etc.
¿Cómo hacemos para crear el archivo de publicación?
Una vez que terminamos el archivo fuente (la película .fla), debemos exportar dicho archivo, haciendo lo
siguiente:
1) Guardamos el archivo fuente con un nombre dado (File – Save).
2) Accedemos al menú FILE – EXPORT – EXPORT MOVIE, y guardamos el archivo de publicación
(en lo posible con el mismo nombre del archivo fuente), y debajo del nombre, elegimos uno de los
formatos de publicación (un tipo de archivo):
Pág. 2
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
Cuadro de Herramientas (Tools):
Aquí vemos las herramientas disponibles para crear y
editar dibujos.
Si tenés Flash instalado en tu PC, dichas herramientas
se pueden ejercitar realizando las actividades Flash
que figuran en el sitio web del colegio:
www.sagradocorazon.edu.ar :

Cuando la página carga, hacé clic en la opción
Material de Estudio en el menú de la
izquierda.

Después, en el menú que aparece arriba,
elegimos la opción Polimodal.

Descargá las actividades y las consignas de la
primera tabla que aparece (se llama Flash –
Actividades, y Flash – Consignas para
actividades).

Descomprimí las actividades y podés repasar
las dos primeras que hicimos en clase.
Ventana de Propiedades (Properties):
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).
Línea seleccionada con la
herramienta Selección
(flecha negra)
Propiedades de la
Línea
(el relleno no
funciona porque
no pertenece a la
línea)
Pág. 3
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
En cambio, si le hago clic al color de relleno de una figura, mostrará además, la posibilidad de cambiar dicho
relleno.
Fondo seleccionado con la
herramienta Selección
(flecha negra)
Propiedades
del Relleno
(ahora no
funcionan las
propiedades de
la 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.
Línea de tiempo (Timeline) y sus capas (Layers):
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.
Tenemos dos capas:
Fondo y Auto.
El nombre por defecto de
una capa es Layer1,
Layer2...
Doble clic sobre este
nombre para cambiarlo.
Ocultar
Capa
Agregar
nueva Capa
Bloquear
Capa
Borrar
Capa
Pág. 4
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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 Clave (KEYFRAME): Encargado de ubicar un actor en la película.

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.
Fotograma Vacío:
Está preparado para
recibir un actor. Se ve
que todavía no se ha
dibujado el automóvil,
y lo está esperando.
Fotograma Clave: es el
primer fotograma de la
capa Fondo, e indica
que el fondo de la
película se dibujó allí y
debe aparecer ni bien
comience a reproducirse
la misma.
Fotograma Final:
Indica que el fondo
termina su aparición
en la película tal como
apareció en el
fotograma clave.
Este fotograma 15, es
el fotograma activo. El
Cabezal de
Reproducción (en rojo)
está sobre él.
Fotogramas: son
varios; van desde el
fotograma 2 hasta el
29. Hacen que el
fondo permanezca un
tiempo en pantalla
hasta el fotograma 29.
Allí se indica el
número de fotograma
que está activo
Aquí se indica que
hasta el fotograma
15, tenemos 1.2
segundos de
película.
Esta es la velocidad de
reproducción (12 fotogramas
por segundo). Se puede
cambiar haciendo doble clic
allí. Por defecto son 12.

Para agregar un fotograma clave a la capa: Clic derecho (en el fotograma de la capa) – INSERT
KEYFRAME.

Para agregar un fotograma a la capa: Clic derecho – INSERT FRAME.

Para agregar un fotograma vacío a la capa: Clic derecho – INSERT BLANK KEYFRAME.

Para borrar un fotograma de cualquier tipo: Clic derecho – REMOVE FRAMES.
Pág. 5
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
Ejemplos de Animación:
1) Se desea dibujar un círculo rojo, y hacer que aparezca y desaparezca varias veces en el
mismo lugar cada 0.3 segundos:
2) Aquí hay 4 fotogramas
vacíos. O sea que el
círculo no está
(desaparece por 0.3 s)
1) Animación: el círculo
aparece en un
fotograma clave, y
permanece 3
fotogramas más (en
total 4 fotogramas, o
sea 0.3 segundos)
3) Vuelve a
aparecer y
permanece otros
4 fotogramas.
4) Vuelve a
desaparecer
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.
Pág. 6
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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.
Cuando pase por el fotograma 5, el círculo desaparecerá, y aparecerá en su lugar el rectángulo :
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.
Pág. 7
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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:
Le ponemos un nombre sin
espacios, debajo elegimos la
opción GRAPHIC y hacemos
clic en OK.
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.
Los símbolos quedan guardados en la Biblioteca de la película
(Library).
Cada vez que necesitemos un símbolo iremos a la biblioteca y allí
estará listo para usarse. Por eso se dice que son Reutilizables.
Para ver la ventana de la Biblioteca, tenemos que acceder al menú:
WINDOW – LIBRARY.
Aparece en el panel de la derecha de la pantalla.
Si no se ve, hacé clic en la flecha gris derecha de la pantalla de
Flash.
Lo bueno de esto es que, si quiero construir un bosque, lo único que
hago es arrastrar el árbol de la biblioteca al escenario tantas veces
como árboles quiera colocar en él.
Arrastro el
símbolo al
escenario
todas las
veces que
quiera.
Pág. 8
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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.
Pág. 9
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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.
Existen dos tipos:
 Interpolación de Movimiento (MOTION TWEEN)
 Interpolación de Forma (SHAPE TWEEN)
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:
1.
2.
3.
4.
5.
6.
7.
8.
Dibujar la estrella en el fotograma clave 1 de la capa Estrella.
Convertirla en símbolo gráfico.
Ubicarla sobre la película, a la izquierda.
Insertar un fotograma clave en la posición 30 (por ejemplo).
Seleccionar el fotograma 30.
Correr la estrella del fotograma 30 a la parte derecha de la película.
Hacer clic derecho sobre algún fotograma intermedio – CREATE MOTION TWEEN.
Presionar Enter para probar el efecto (o F12)
Fotograma clave de
origen: la estrella
está a la izquierda.
Fotograma clave de
destino: la estrella
está a la derecha.
Fotogramas
intermedios: por cada
uno, la estrella se va
desplazando desde el
origen hasta el destino
En la línea de tiempo, los
fotogramas se pintaron de
violeta y apareció una flecha
que indica el sentido de la
interpolación (desde dónde
parte el símbolo, y a dónde
llega).
Pág. 10
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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.
Por ejemplo, queremos que un círculo se convierta en un rectángulo:
1.
2.
3.
4.
5.
6.
7.
8.
Dibujar el círculo en el fotograma clave 1 de la capa Círculo.
Ubicarlo en el centro de la película.
Insertar un fotograma clave en la posición 30 (como ejemplo).
Seleccionar el fotograma 30.
Borrar el círculo que aparece, y en su lugar dibujar el rectángulo con otro color.
Hacer clic en uno de los fotogramas intermedios (por ejemplo, el 15).
En la ventana de Propiedades, elegir la opción SHAPE del menú Tween.
Presionar Enter para probar el efecto (o F12)
Fotograma clave
de origen: círculo.
Fotograma clave de
destino: rectángulo.
Fotogramas
intermedios: el
círculo se va
convirtiendo en el
rectángulo.
En la línea de tiempo los
fotogramas se pintaron de
verde, y apareció una
flecha que indica el sentido
de la interpolación (de qué
objeto parte, y a qué objeto
llega a convertirse.
Pág. 11
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
ATENCIÓN: Para que la interpolación de forma salga bien, debemos usar dibujos. NUNCA usar
símbolos gráficos, porque ellos se usan solamente en la interpolación de movimiento.
Ahora podemos agregarle más efectos a nuestros dibujos durante la animación:

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.

Si queremos que el círculo, a medida que se convierta en el rectángulo, se agrande, posicionados
en el fotograma clave destino, agrandar el rectángulo.

Si queremos que se achique, agrandar el círculo en el primer fotograma clave, o achicar el
rectángulo en el último.
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:
Podemos usar imágenes en animaciones, y en interpolaciones de movimiento. En estas últimas, sabemos
que debemos convertir las imágenes a símbolos gráficos.
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 original
Imagen con efecto Alfa al 40%
Pág. 12
Instituto Sagrado Corazón de Jesús

Efecto TINTA: Consiste en darle color a la imagen. Se usa mucho en fotos, por ejemplo en
paisajes. Si el efecto tinta es al 100% y elegimos por ejemplo, la tinta azul, la imagen no se verá, y
en su lugar aparecerá un rectángulo azul. Si el efecto es al 50%, la imagen tendrá un tono azul, es
decir que sus colores tenderán al azul. Si el efecto es al 0%, es como si no estuviera (no habrá tinta
azul). Se puede elegir más o menos tinta entre 0 y 100%. Con este efecto podremos lograr que una
imagen se vaya colorizando, agregándole diferentes tintas.
Imagen original

INFORMÁTICA - 3ros Técnicos
Imagen con efecto Tinta amarilla al 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 original
Imagen con efecto Brillo al –40%
¿Cómo hacemos para combinar dichos efectos en una interpolación?
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%.
Pág. 13
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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.
Pág. 14
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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 una
imagen.
Fotograma de
destino: el mismo
símbolo gráfico.
Hacemos clic en la
imagen, y elegimos
en la opción COLOR:
TINT. Luego
elegimos el color
rojo, y colocamos
30%
Hacemos clic en la
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.
Pág. 15
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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 =>

DOWN: Qué aspecto tendrá el botón cuando le hagamos click.
Ejemplo: cambiará nuevamente ambos colores =>
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.
Veamos cómo se crea un botón:
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.
Aquí están las opciones que
permiten definir cómo será el
botón. En cada una, iremos
dibujando el botón a gusto.
Pág. 16
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
PASO 1:
Dibujemos el botón tal como se vería al ubicarse en el escenario. Al
dibujarlo se visualiza el fotograma clave en la opción UP, que dejó de
estar vacío:
PASO 2:
Luego debemos definir cómo será el botón cuando el usuario le pase
el Mouse por encima (OVER): para ello, insertemos un fotograma
clave en la opción OVER (clic derecho – Insert Keyframe). Aparece
una copia del botón que dibujamos en la opción UP. Tratando de no
moverlo de lugar, le cambiamos, por ejemplo, los colores:
PASO 3:
Ahora tenemos que definir el aspecto del botón cuando el usuario le
haga clic (DOWN). Para ello, debemos insertar un fotograma clave
en la opción DOWN, y cambiamos los colores de la copia del botón
anterior. También podemos cambiar formas, fuentes, tamaños.
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.
Pág. 17
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
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.
Y ahora, a definir su comportamiento.
Seleccionamos el botón, y activamos la ventana de Acciones (ACTIONS), que se encentra detrás de la
ventana de Propiedades, en la zona inferior de la pantalla. Si no se encuentra allí, activarla yendo al menú
WINDOW – DEVELOPMENT PANELS - ACTIONS
Clic sobre la palabra
Actions, y se despliega
la ventana de acciones
hacia arriba
Pág. 18
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
Así se ve la ventana de Acciones:
El botón debe
estar
seleccionado
Ventana de
Acciones
desplegada.
Nótese que al lado
de Actions, debe
figurar la palabra
Button, para
trabajar sobre el
botón.
Panel de Código:
aquí se escribe el código,
usando el lenguaje de
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)
{
play();
}
Cuando
terminamos de
escribir el
código, clic en
Actions para
cerrar la
ventana

on(press) significa “cuando se presione el botón...”

play(); significa “reproducir la película”

y las llaves obligatorias se colocan para indicar que todo lo que está entre
ellas, se va a realizar cuando se presione el botón (en este caso es play();
solamente, pero puede haber más código).
El código se
escribe todo en
minúscula, salvo
excepciones que
se verán luego.
O sea que, cuando se presione el botón (cuando se haga clic en él),
se reproducirá la película.
Pág. 19
Instituto Sagrado Corazón de Jesús
INFORMÁTICA - 3ros Técnicos
Conviene crear ahora un botón que detenga la película, para darnos cuenta si el botón Reproducir funciona.
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)
{
stop();
}

on(press) significa “cuando se presione el botón...”

stop(); significa “detener la película”

y las llaves obligatorias se colocan para indicar que todo lo que está entre
ellas, se va a realizar cuando se presione el botón (en este caso es stop();
solamente, pero puede haber más 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.
Otros casos citados en los que podemos usar Botones:

Ir a un determinado fotograma y reproducir la película desde allí (por ejemplo desde el
fotograma 20).
Una vez construido el botón y puesto en el escenario en su capa correspondiente, escribimos el
siguiente código en la ventana de Acciones:
on(press)
{
gotoandplay(20);
}

on(press) significa “cuando se presione el botón...”

gotoandplay(20); significa “ir y reproducir desde el fotograma 20
en adelante”

con las llaves obligatorias.
Pág. 20
Instituto Sagrado Corazón de Jesús

INFORMÁTICA - 3ros Técnicos
Ir a un determinado fotograma y detener la película allí (por ejemplo, en el fotograma 15).
Una vez construido el botón y puesto en el escenario en su capa correspondiente, escribimos el
siguiente código en la ventana de Acciones:
on(press)
{
gotoandstop(15);
}


on(press) significa “cuando se presione el botón...”

gotoandstop(15); significa “Ir y detener la película en el fotograma
15”

con las llaves obligatorias.
Cargar un sitio web (por ejemplo, Hotmail).
Una vez construido el botón y puesto en el escenario en su capa correspondiente, escribimos el
siguiente código en la ventana de Acciones:
on(press)
{
getURL(“http://www.hotmail.com”);
}

on(press) significa “cuando se presione el
botón...”

getURL(“http://www.hotmail.com”); significa
“cargar el sitio web Hotmail”, como ejemplo.

con las llaves obligatorias.
Sólo las letras URL van
en MAYÚSCULA
Profesores: Ariel Barabas y Elizabeth Vallerino
Pág. 21