Curso de Flash Con Script

USO BSICO DE
FLASH MX
E INTRODUCCIN A LA PROGRAMACIN EN
ACTIONSCRIPT
Luis A. Gil-Guijarro Redondo
Curso Flash
Curso de Flash
NOTAS
Indice de materias
1. Flash y su interfaz de trabajo . . . . . . . . . . . . . . . . . . . . . 1
2. Dibujo en Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3. Trabajo con color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4. Creacin de animacin . . . . . . . . . . . . . . . . . . . . . . . . . 13
5. Utilizacin de smbolos, instancias y elementos
de bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
6. Trabajo con texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
7. Trabajo con clips de pelcula y botones . . . . . . . . . . . . 22
8. Creacin de interacciones simples con ActionScript . . 25
9. Adicin de sonidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
10. Prueba y publicacin de una pelcula . . . . . . . . . . . . . . 33
11. Creacin de scripts con ActionScript . . . . . . . . . . . . . . 35
12. Utilizacin de componentes . . . . . . . . . . . . . . . . . . . . . 50
1. Flash y su interfaz de trabajo

QU ES MACROMEDIA FLASH?
Macromedia Flash es una aplicacin con la que es posible crear
pelculas que incluyan grficos, texto, animacin y aplicaciones para
sitios Web. Aunque estn compuestas principalmente por grficos
vectoriales, tambin pueden incluir video, grficos de mapa de bits y
sonidos importados. Las pelculas Flash pueden incorporar interactividad para permitir la introduccin de datos de los espectadores o actuar
sobre la misma modificando reacciones en ella, y la creacin de
pelculas no lineales que pueden interactuar con otras aplicaciones
Web. Es muy usado en la web para crear controles de navegacin,
logotipos animados, aunque pueden ser desarrollados sitios completos
a base de tecnologa Flash. Las pelculas Flash utilizan grficos
vectoriales compactos, para que se descarguen y se adapten rpidamente al tamao de la pantalla del usuario.
LA INTERFAZ DE FLASH
Cuando
abrimos Flash se
nos muestra una
ventana como la
de la derecha en
la que aparecern, en la parte
superior las barras de mens y
la principal de
herramientas,
en la barra de la
izquierda la caja
Luis Gil-Guijarro
Curso de Macromedia Flash
-1-
de herramientas, en la zona central la lnea de tiempo, la zona de

trabajo, la ventana de propiedades y la de acciones, y a la derecha
otras ventanas varias como el mezclador de colores, la biblioteca de
elementos, etc.
El aspecto de esta interfaz es modificable, las distintas ventanas
pueden ser contradas y expandidas, cerradas o abiertas o cambiadas
de ubicacin en funcin de las necesidades de espacio para el diseo
de la pelcula. Las ventanas que disponen de un pequeo tringulo se
expanden o comprimen haciendo clic sobre el ttulo, podemos
cerrarlas haciendo clic derecho y eligiendo cerrar panel o podemos
arrastrarlas haciendo clic sobre la zona punteada de su ttulo -es
importante tener en cuenta esta zona para reintegrar la ventana en la
zona especfica-. Para abrir ventanas que no tenemos a la vista
usaremos el men Ventana, cuyas caractersticas principales veremos
ms adelante.
NOTAS
CAJA DE HERRAMIENTAS E INSPECTOR DE PROPIEDADES

Las herramientas de la caja de herramientas permiten dibujar, pintar, seleccionar y modificar ilustraciones,
as como cambiar la visualizacin del escenario. La caja
de herramientas se divide en cuatro secciones:
La seccin Herramientas contiene las herramientas de dibujo, pintura y seleccin.
La seccin Ver contiene herramientas para ampliar
y reducir, as como para realizar recorridos de la ventana
de la aplicacin.
La seccin Colores contiene modificadores de los
colores de trazo y relleno.
La seccin Opciones muestra los modificadores
de la herramienta seleccionada, los cuales afectan a las
operaciones de pintura o edicin de dicha herramienta.
La herramientas son las siguientes:
Seleccin, permite seleccionar los diferentes
objetos de nuestro espacio de trabajo.
Subseleccin, sirve para editar los nodos de
las formas dibujadas
Lazo, se usa para hacer selecciones de los
elementos que se encuentran en zonas especficas.
Lnea, permite trazar lneas rectas.
Pluma, sirve para dibujar curvas Bezier y para
hacer ciertas modificaciones de nodos.
valo y Rectngulo, son las dos herramientas que nos permiten el trazados de estos
dos tipos de figuras. Para el dibujo de circunferencias y cuadrados se
mantendr pulsada la tecla de mayscula -no confundir con bloqueo
Luis Gil-Guijarro
-2-
de maysculas-.
Lpiz, para el trazado de lneas a mano alzada.
NOTAS
Pincel, se usa para realizar trazos gruesos. El color del
trazo ser el seleccionado para relleno. Puede hacerse sensible
a la presin si usamos un lpiz ptico.
Texto, sirve para introducir los diferentes tipos de cuadros
de texto.
Transformacin libre, permite hacer transformaciones
de forma y giros de los elementos seleccionados.
Transformacin de relleno, nos permitir modificar las
caractersticas de los rellenos no slidos
Bote de tinta, permite trazar contornos y cambiar el color
de tinta de los mismos.
Cubo de pintura, se usa para rellenar espacios de color o
cambiar colores
Cuentagotas, sirve para seleccionar colores de tinta o de
relleno para aplicarlos a otros elementos.
Borrador, herramienta de borrado de rellenos y contornos
selectivos
Mano y zoom, son herramientas de visualizacin.
Con la primera movemos el encuadre del espacio de
trabajo, con la segunda seleccionamos el rea de visualizado.
Color de trazo y color de relleno, sirven para
seleccionar los colores correspondientes del objeto que se
va a trazar o que se tiene seleccionado.
El inspector de propiedades muestra informacin y la

configuracin del elemento que est seleccionado en ese momento,
que puede ser un documento, un texto, un smbolo, una forma, un
mapa de bits, un video, un grupo, un fotograma o una herramienta.
Cada uno de los elementos tiene su propia estructura de propiedades
de forma que el aspecto de esta ventana cambiar segn el elemento
seleccionado.
AYUDAS AL DIBUJO
Como complementos para la divisin exacta de distintas reas
de trabajo Flash dispone de reglas, cuadrculas y lneas gua. Todas
Luis Gil-Guijarro
-3-
ellas pueden ser activadas o desactivadas en el men Ver. Tanto para

cuadrculas como para lneas guas podemos usar la funcin de ajuste
que facilita en muchos casos el posicionamiento o el ajuste de tamao
durante la fase de dibujo. Tambin tanto a unas como a otras les
podemos dar una personalizacin de color y precisin en el ajuste, y
a las cuadrculas, variar su distanciamiento, expresando esa distancia
en pxeles. Para variar la unidad lo haremos en el men Modificar >
Documento
Para crear lneas guas slo tendremos que hacer clic sobre la
regla correspondiente y hacer un arrastre hasta el lugar del papel que
deseemos. Una vez introducidas todas las lneas gua que deseemos,
es conveniente bloquearlas para evitar as su modificacin durante la
fase de dibujo.
NOTAS
SOBRE LOS GRFICOS EN FLASH

Flash puede manejar imgenes importadas de mapas de bits pero
es importante conocer que estas imgenes ocupan bastante ms
espacio que una similar en formato vectorial. Debido a que el fin
ltimo de la mayora de las pelculas flash es el de poder descargarse
en la web y que, por tanto, el tiempo de espera es un factor muy
importante a tener en cuenta, el volumen de los mapas de bits y su
nmero es un elemento a analizar antes de publicar una pelcula. Debe
tenerse presente la posibilidad de vectorizar los mapas de bits cuando
sea posible.
Luis Gil-Guijarro
-4-
2. DIBUJO EN FLASH
NOTAS
SELECCIONADO DE RELLENOS Y CONTORNOS

Cuando dibujamos una forma hay que saber que
contorno y relleno son gestionados por separado, as, sobre
una forma dibujada, al seleccionar el relleno vemos que su
contorno no queda seleccionado y viceversa. Para hacer
una seleccin tanto del contorno como del relleno se hace
doble clic sobre el relleno.
Ejercicio: dibujar una elipse y, con la herramienta flecha
activada, hacer un clic sobre el relleno; hacer doble clic
sobre el relleno; hacer un clic sobre el contorno.
Por otro lado, los contornos que tienen vrtices se
manejan por separado los tramos entre vrtices. Para seleccionar todo
el contorno se debe hacer doble clic sobre el mismo.
Ejercicio: dibujar un rectngulo y, con la herramienta flecha activada,
hacer clic sobre el relleno; hacer doble clic sobre el relleno; hacer clic
sobre varios lados del contorno; hacer doble clic sobre cualquier punto
del contorno
En tramos rectos, al hacer clic sobre un segmento, se seleccionar ste desde un vrtice a otro o entre puntos de corte. Para hacer
selecciones de ms de un tramo haremos clic en los diversos tramos
a seleccionar mientras mantenemos pulsada la tecla de maysculas.
INTERACCIN ENTRE FORMAS QUE SE SUPERPONEN
Cuando sobre una forma trazamos una lnea, el trazo de la nueva
lnea pasa a dividirla forma, dando como resultado varias formas por
separado.
Ejercicio: dibujar una elipse y, posteriormente, una
lnea que cruce la forma anterior. Hacer clic sobre cada
uno de las mitades de relleno resultantes; hacer doble
clic sobre los mismos; hacer un clic sobre cada uno de
los segmentos del contorno; hacer doble clic sobre un
punto cualquiera del contorno.
Cuando dibujamos formas y stas se solapan se
produce una unin entre las formas, perdindose los
contornos que se tuviesen en origen.
Ejercicio: dibujar dos rectngulos que se crucen
formando una cruz; hacer clic sobre cada uno de los
nuevos rellenos generados; seleccionar los tramos de contorno que se
quedan dividiendo los rellenos y eliminarlos pulsando la tecla
suprimir; hacer ahora clic sobre el nuevo relleno generado.
MODIFICACIN MANUAL DE LAS FORMAS DIBUJADAS
Las formas, una vez dibujadas, pueden recontornearse. Para ello,
una vez dibujada la forma, con la herramienta flecha seleccionada,
haremos clic sobre el contorno y sin soltar arrastramos el ratn hasta
Luis Gil-Guijarro
-5-
conseguir el efecto deseado.

Ejercicio: dibujar un valo y modificar su forma;
dibujar un rectngulo y modificar la forma de cada uno
de sus lados.
NOTAS
Formas sin contorno: las formas que no tienen

contorno se modifican igual que si lo tuviesen.
Podemos tambin arrastrar la lnea de contorno presionando la
tecla control, lo que har que se genere un nodo nuevo
PUNTOS DE ANCLAJE O NODOS
Los puntos de anclaje se generan en todos los grficos vectoriales y constituyen los puntos que sirven para delimitar cualquier forma.
El nmero de nodos influye en el peso de todo fichero vectorial y, por
tanto, en el de las pelculas Flash.
Para ver los puntos de anclaje usamos la herramienta subseleccin, que slo actuar sobre contornos y sobre formas sin lnea de
contorno.
Ejercicio: dibujar un rectngulo y una valo que no se superpongan;
activar la herramienta subseleccin y seleccionar el contorno del
rectngulo; observad que cuando seleccionamos un nodo, ste pasa a
color blanco; mover libremente el nodo seleccionado hasta obtener
modificaciones en la forma original. Hacer lo mismo con el valo.
En las dos figuras anteriores podemos observar que
existen dos tipos diferentes de nodos: nodos angulares,
que se muestran como cuadrados, y nodos curvos, que se
muestran como circunferencias. Los nodos angulares son
aquellos en los que confluyen dos rectas o una curva y
una recta; los nodos curvos son aquellos en los que
confluyen dos tramos curvos. La gran diferencia entre
unos y otros es que en los segundos, los nodos curvos, adems del
nodo propiamente dicho, aparecen a cada lado del mismo dos lneas
terminadas en sendos puntos que definen las tangencias a ambos lados
del nodo y que son completamente redefinibles.
Aparecern como nodos angulares todos aquellos en los que uno
de los tramos de contorno en los que terminan sea una lnea recta.
INSERCIN, BORRADO Y TRANSFORMACIN DE NODOS
Para insertar un nuevo punto de anclaje en una forma dibujada
se usa la herramienta pluma; con ella seleccionaremos el contorno a
transformar y haremos clic en el lugar donde queremos insertar el
nodo. Slo pueden ser insertados nodos sobre tramos curvos.
Para borrar un nodo, con la herramienta subseleccin activada,
seleccionaremos dicho nodo y pulsamos la tecla suprimir.
Luis Gil-Guijarro
-6-
Para transformar un nodo curvo en uno recto, con la herramienta

pluma activada, hacemos clic sobre el nodo correspondiente.
NOTAS
Para transformar un nodo recto en curvo, con la herramienta

subseleccin activada, arrastraremos el punto con la tecla Alt
presionada.
OPTIMIZADO DE LAS FORMAS
Podemos reducir automticamente el nmero de puntos de
anclaje de cualquiera de nuestras formas; esto reducir el tamao de
los archivos finales, aunque puede afectar ligeramente a la figura.
Para optimizar una forma, tras seleccionarla pulsaremos
Modificar > Optimizar... En el men que nos ofrece ajustaremos los
parmetros dependiendo de la exactitud que deseemos.
AGRUPACIN DE ELEMENTOS
Es posible hacer que al dibujar unas formas sobre otras, las de
abajo permanezcan inalteradas, as como tambin es posible que
contorno y relleno queden unidas para ser manipuladas conjuntamente. Para lo primero podemos usar dos tcnicas: la agrupacin y las
capas, para lo segundo se usa la tcnica de agrupado o la de los
smbolos grficos.
Para agrupar un conjunto de formas o cualquier otro elemento
de la zona de trabajo hay que seleccionar todas ellas y buscar la
opcin Agrupar del men Modificar, o pulsar Ctrl+G. Para volver a
desagrupar un conjunto de elementos agrupados elegiremos la opcin
Desagrupar del men Modificar o Ctrl+May+G.
Ejercicio: dibujar varios elementos diferentes y agruparlos y
desagruparlos.
No obstante, para hacer modificaciones posteriores sobre un
conjunto de formas agrupadas solamente tendremos que hacer doble
clic sobre l, pasando dicho grupo al modo de edicin; al hacer esto
podemos observar que el resto de los grficos no incluidos en el grupo
pasan a verse ms tenues y
no es posible seleccionarlos, ello queda indicado en
la barra de navegacin
incluida en la parte superior de la zona de trabajo, donde podremos
ver que nos encontramos en la escena 1 dentro de un grupo -esta barra
es muy til cuando creamos elementos complejos, ya que en todo
momento nos indica en qu nivel de edicin nos encontramos-. As
mismo, hemos de tener presente que cualquier nuevo objeto que
dibujemos dentro del modo de edicin de un grupo, pasar a formar
parte del mismo. Para cerrar la edicin del grupo y volver al nivel
bsico de trabajo pulsaremos sobre Escena 1 en la barra de navegacin.
Luis Gil-Guijarro
-7-
Ejercicio: sobre las figuras del ejercicio anterior, hacer agrupaciones,

editar los grupos y modificarlos, incluyendo figuras nuevas.
NOTAS
Los grupos pueden ser usados en diferentes niveles, incluyendo

grupos dentro de otros.
USO DE CAPAS
Otra posibilidad de trabajo, bastante ms interesante y til que
la de las agrupaciones de elementos es el uso de capas. En la lnea de
tiempo podemos ver que
los grficos que estamos
dibujando se incluyen dentro de una Capa 1.
El uso de diferentes
capas nos permite gestionar con facilidad los diferentes elementos que compongan nuestra pelcula de
Flash, pudiendo decidir
qu elementos deben ponerse sobre otros y cambiar este orden con
suma facilidad. Para insertar una nueva capa pulsaremos sobre el
botn
o seleccionando Insertar > Capas. Para mayor facilidad de
gestin, las capas pueden ser renombradas haciendo doble clic sobre
el nombre y escribiendo el nuevo. As mismo, podemos ver junto al
nombre cuatro iconos que servirn para:
Indica cul es la capa activa y con la que se est trabajando.
Indica si se visualizan o no los elementos incluidos en la
capa.
Indica si tenemos la capa bloqueada para su edicin o no
Indica si queremos ver las formas con su relleno o slo sus
siluetas.
Las capas pueden ser agrupadas en carpetas, lo que permite una
gestin ms eficaz de pelculas con un elevado nmero de grficos.
Las capas pueden ser cambiadas de orden sin ms que arrastrarlas al
lugar seleccionado. Para borrar una capa, tras seleccionarla pulsaremos el botn
Ejercicio: trazar varios elementos en diferentes capas y comprobar el
uso y la gestin de las mismas.
EL PORTAPAPELES
En el uso del portapapeles en Flash debemos tener presentes las
siguientes consideraciones:
Cuando
c pegamos un objeto desde el portapapeles, dicho objeto
aparecer en el centro del rea de trabajo, en la capa activa.
Si queremos que el objeto aparezca situado en el mismo lugar desde
Luis Gil-Guijarro
-8-
el que fue copiado se usar la opcin Edicin > Pegar in Situ o

Ctrl+May+V.
NOTAS
El uso del portapapeles con las pelculas se ver ms adelante

Ejercicios: Dibuja las figuras que se presentan a continuacin usando
las tcnicas estudiadas en el tema
Luis Gil-Guijarro
-9-
3. Trabajo con color
NOTAS
La gestin bsica del color en Flash se hace desde

la ventana de herramientas en su cuadro de colores o
desde la ventana de propiedades de la herramienta.
Cuando vamos a seleccionar un color se despliega una ventana

como la de abajo, en ella se nos presenta una muestra del color
seleccionado, el valor hexadecimal de dicho color, precedido del
smbolo almohadilla, un botn de ausencia de color, una paleta de
colores bsica y, en la zona inferior, otra paleta con colores degradados preestablecidos.
EL MEZCLADOR DE COLORES
El mezclador de colores es una ventana en la que podemos
seleccionar de forma personalizada tanto el color de relleno y de
contorno, como el tipo de relleno.
Un apartado a tener en cuenta es la posibilidad de trabajar con
colores transparentes, que permiten ver objetos situados debajo de
otros. Esta opcin se manipula con el valor alfa, representado por el
tanto por ciento de opacidad: 100% opaco, 0% totalmente transparente.
En las ventanas de ajuste numrico podemos situar el valor
exacto de cada color en la mezcla con nmeros desde el 0 al 255. Este
nmero va apareciendo transformado a hexadecimal en el cuadro
Luis Gil-Guijarro
- 10 -
inferior izquierdo -los dos primeros dgitos corresponden al valor del

rojo, los dos centrales al del verde y los dos ltimos al azul-.
NOTAS
Los diferentes tipos de relleno que podemos aplicar son: slidocolor uniforme-, degradado lineal -se produce un efecto de degradado
entre dos o ms colores segn la direccin de una lnea recta-,
degradado radial -tambin personalizable a varios colores- y de mapa
de bits -muy til para aplicar tramadosAl aplicar degradados aparece una barra con dos deslizadores, cada uno de un color,
mostrando cmo va a aparecer el
efecto de degradado de uno a
otro. Estos deslizadores pueden
moverse para hacer un efecto
ms o menos brusco. Tambin
podemos introducir deslizadores
nuevos haciendo clic en el espacio entre los deslizadores que ya
tenemos; el color que tendr de partida el nuevo ser el que haya en
esa posicin en la barra de degradado. Podemos introducir tantos
deslizadores como necesitemos.
Para cambiar un color en un deslizador haremos clic en l para
seleccionarlo y ajustaremos su color con la paleta o mediante su valor
numrico.
Para cambiar el color de un objeto ya dibujado, en el caso de
que se quiera dar un degradado personalizado, seleccionaremos el
objeto y trabajaremos en la paleta de colores. En el caso de que
queramos hacer variaciones sobre unos colores ya definidos, y
queramos partir de esa mezcla, tendremos que actuar de la siguiente
forma: seleccionamos el objeto a modificar, en la ventana de propiedades desplegamos la paleta de colores de relleno, pulsamos la tecla
de escape, esto har que en el mezclador de colores aparezca la
mezcla de dicho objeto.
Luis Gil-Guijarro
- 11 -
Edicin de las caractersticas del degradado

Las caractersticas de degradados pueden ser cambiadas con la
herramienta de transformacin de relleno
. Si activamos esta
herramienta y luego seleccionamos la figura con color degradado
vemos que aparecen unos puntos:
NOTAS
El punto central sirve

para situar el centro del degradado.
El selector cuadrado
sirve para ajustar el ancho.
El selector de rotacin
se usa para ajustar el ngulo del degradado.
Los rellenos radiales y de mapas de bits tienen puntos de edicin
similares aunque con otras funciones.
Ejercicios: dibujar diferentes ejemplos de degradado y transparencias
como los de las figuras de abajo
Luis Gil-Guijarro
- 12 -
4. Creacin de una animacin
NOTAS
ENTENDER LA LNEA DE TIEMPO

Una pelcula de Flash se organiza, como una pelcula de
animaciones, en diferentes fotogramas que se reproducen a una
determinada velocidad. Los diferentes elementos que componen una
pelcula Flash son:
Fotogramas: cada uno de los mdulos en que se divide una
pelcula; en la lnea de tiempo aparecen numerados en su
parte superior.
Fotograma clave: son aquellos fotogramas en los que hay
elementos dibujados y se usan para establecer un cambio
grfico en la pelcula.
Cuando en la lnea de tiempo de una capa aparece un grupo
de varios fotogramas que contienen un nico fotograma clave,
la imagen de este fotograma estar visible durante todo el
tiempo de visionado de todos los fotograma que formen dicho
grupo.
Cuando trabajamos con varias capas y con diversos fotogramas claves hay que prestar atencin a que estamos trabajando
en la capa que se desea -marcada en negro- y en el fotograma
adecuado -se detecta por el posicionamiento de la cabeza
lectora y aparece en la barra inferior de la lnea de tiempo-.
CREACIN DE UNA INTERPOLACIN DE MOVIMIENTO

Cuando queremos mover imgenes fijas hacindolas desplazar
por el escenario, Flash ofrece la posibilidad de hacer dos fotogramas
clave, el primero con la posicin inicial, el ltimo con la posicin
final y dejar que sea flash el que desarrolle el movimiento de forma
automtica haciendo una interpolacin de movimiento. El desplazamiento entre un lugar y otro se efectuar en lnea recta.
Ejemplo: Vamos a hacer una animacin de 20 fotogramas en la que
haremos que una bola se desplace en lnea recta desde un extremo a
otro de la pantalla.
Mtodo:
1. Dibujar a un lado del escenario una bola.
2. Sobre el fotograma 20 de la lnea de tiempo hacer clic con el
botn derecho y seleccionar del men alternativo Insertar
Luis Gil-Guijarro
- 13 -
fotograma. Hemos creado una pelcula sin movimiento de 20

fotogramas.
3. Sobre cualquier fotograma de la pelcula hacer clic con el
botn derecho y seleccionar Crear interpolacin de movimiento.
4. Sobre el ltimo fotograma, el 20, hacer clic con el botn
derecho y elegir Convertir en fotograma clave. Acabamos de
generar una pelcula con movimiento pero al coincidir los
fotogramas primero y ltimo no se apreciar nada.
5. Con el ltimo fotograma seleccionado moveremos la bola
hacia el extremo opuesto.
Ya est lista la pelcula! Para probarla pulsaremos sobre Probar
Pelcula en el men Control o pulsaremos la combinacin Ctrl+Intro.
NOTAS
Ejercicio: hacer que la bola se desplace describiendo un cuadrado

(necesitaremos poner un fotograma clave por cada esquina)
Podemos probar el movimiento de nuestra pelcula fotograma
a fotograma sin tener que abandonar la pantalla de edicin, para ello
pulsamos la tecla punto para avanzar o la tecla coma para retroceder.
CREAR UNA INTERPOLACIN DE FORMA
Mediante este mtodo podemos hacer que una forma se
convierta en otra de manera gradual con movimiento o sin l.
Ejemplo: Vamos a hacer que la bola anterior se transforme en un
cuadrado de otro color en una pelcula de 20 fotogramas.
Mtodo:
1. Dibujar una bola en un extremo del escenario.
2. Sobre el fotograma 20 hacer clic con el botn derecho sobre
Insertar fotograma clave vaco.
3. En ese fotograma nuevo dibujar un cuadrado de color
diferente en el extremo opuesto al de la bola.
4. Con cualquiera de los fotogramas, excepto el ltimo clave,
seleccionado ir a la ventana de propiedades y en el cuadro
Animar, seleccionar Forma.
Ya tenemos la interpolacin terminada. Probar la pelcula.
Luis Gil-Guijarro
- 14 -
USO DEL PAPEL CEBOLLA

Cuando estamos editando una animacin, Flash permite la
posibilidad de ver el movimiento o la
transicin de formas de un nmero determinado de fotogramas activando el papel
cebolla con el botn que se encuentra en la
parte inferior de la lnea de tiempo. Al
activar el papel cebolla con una animacin,
aparecen en la lnea de tiempo unos marcadores que delimitan los fotogramas visibles,
y veremos en nuestra rea de trabajo la
animacin como se muestra abajo, todos los
fotogramas includos entre los marcadores
se muestran tenues excepto en el que se
encuentre la cabeza lectora si es un fotograma clave, que se muestras ms intenso y es
editable.
NOTAS
La posicin de los marcadores de papel cebolla es modificable,

con lo que podremos ver toda el rea de la animacin que deseemos.
Si activamos el botn de editar varios fotogramas podremos, adems,
trabajar con todos los fotogramas clave que se encuentren entre los
marcadores.
ANIMACIONES SEGN TRAYECTORIAS
Cuando hacemos interpolaciones de movimiento, la translacin
de los objetos se realiza segn una lnea recta entre las dos posiciones
inicial y final. Hay posibilidad de que la trayectoria seguida se ajuste
a una lnea cualquiera recta o no, o con tramos mixtos.
Ejemplo: hacer la animacin de una pelota botando en 30 fotogramas.
Procedimiento:
1. Dibujar una bola en la capa 1 e insertar 30 fotogramas.
2. Pulsar el botn
para insertar una capa gua.
3. En la capa gua creada dibujamos la trayectoria que le
queremos dar a la pelota (comenzamos con una lnea quebrada que despus suavizamos convirtiendo los nodos rectos a
curvos)
4. En la capa de la bola creamos una interpolacin de movimiento y convertimos el fotograma 25 en clave.
5. Trasladamos la bola del fotograma 25 al ltimo punto de la
lnea definida.
6. Convertimos el fotograma 30 en clave y desplazamos la bola
para hacer una efecto de que termina rodando.
7. Insertamos una capa, que ponemos debajo de la de la bola y
poniendo cuidado de que no quede afectada por la capa gua,
para insertar un fondo que d realismo a la animacin.
8. Podemos editar la lnea gua que trazamos recta y hacer sus
nodos curvos para mejorar el efecto del movimiento.
Luis Gil-Guijarro
- 15 -
NOTAS
Luis Gil-Guijarro
- 16 -
5. Utilizacin de smbolos, instancias y elementos de bibliotecas
NOTAS
LOS SMBOLOS Y SUS INSTANCIAS

Los smbolos son imgenes, botones y clips de pelcula pelculas dentro de la pelcula principal- que pueden utilizarse en
diferentes partes de una pelcula o en pelculas diferentes. Para crear
un botn o un clip no tenemos ms remedio que generar su smbolo,
aunque no vayamos a reutilizarlo, pero con las imgenes estticas no
es necesario, como hasta ahora hemos ido creando sin mayor
problema. No obstante, si las imgenes estticas van a aparecer de
manera repetida en nuestra pelcula, no ahorrar espacio de memoria
convertirlas en smbolos. Cuando creamos un smbolo, ste se
almacena en la biblioteca (ver esta ventana pulsando F11 en
Ventana > Biblioteca)
Una vez que creamos un smbolo, en nuestra pelcula usaremos
lo que en Flash se denominan instancias,
que no son ms que
copias del smbolo. Las
instancias pueden modificarse en tamao o
forma global, pero
cualquier cambio que
hagamos interno afectar a todas las instancias del mismo smbolo.
Ejemplo: crear un smbolo de un grfico esttico de una estrella y
crear con ella una escena nocturna.
Procedimiento: Para crear una smbolo esttico procederemos de la
siguiente forma:
1. Realizar el dibujo de la estrella.
2. Seleccionar el dibujo completo y pulsar en el men Insertar >
Convertir en smbolo...
3. En la ventana que se despliega (a la izquierda) poner el nombre
Estrella para el smbolo, en
comportamiento seleccionar
Grfico y aceptar.
4. Podemos comprobar ahora
en la ventana de propiedades que el grfico ha pasado a ser una instancia del
smbolo Estrella.
5. Pulsar F11 para ver la Biblioteca de nuestra pelcuLuis Gil-Guijarro
- 17 -
6.
la y arrastrar varias estrellas al escenario.

Modificar el tamao y la forma externa de las instancias.
NOTAS
CREAR SMBOLOS GRFICOS ANIMADOS

Al editar un smbolo grfico -haciendo doble clic sobre lvemos que aparece una lnea de tiempo. Podemos generar en esa lnea
de tiempo una animacin que afecte a nuestro smbolo con la premisa
de que esta lnea de tiempo estar ligada a la lnea de tiempo general
de la pelcula.
Ejemplo: Vamos a crear un brillo en las estrellas generando una
animacin del smbolo estrella en el que se cambie el color.
Procedimiento:
1. Hacemos doble clic sobre cualquiera de la estrellas del escenario,
lo que har que todo el dibujo pase a atenuarse y slo se vea en
su color la estrella sobre la que hicimos el clic; tambin aparecer
en el navegador
, indicativo de que
estamos editando el smbolo estrella, lo que afectar a todas las
instancias de este smbolo.
2. En la lnea de tiempo insertar un fotograma sobre el fotograma 4
y convertir el 3 en clave.
3. Cambiar el color de la estrella en el fotograma clave 3 hacindolo
ms claro.
4. Pulsar sobre escena 1 en la barra de navegacin para cerrar la
edicin del smbolo Estrella.
Si probamos la pelcula vemos que aparentemente no se ha
cambiado nada, no se observa el cambio de color que acabamos de
programar. Ello es debido a que nuestra pelcula slo tiene un
fotograma por lo que nunca se vern los fotogramas 2, 3 y 4 de las
instancias de un smbolo grfico.
5.
Inserta un fotograma sobre el fotograma 4 de la lnea de tiempo

principal y prueba ahora la pelcula.
Es posible individualizar el comportamiento de cada una de las

instancias grficas insertadas. Con la instancia a modificar seleccionad a ,
v e mos
en la
ventana
de propiedades que es posible hacer que slo se reproduzca una vez
su bucle, que no se reproduzca o que se reproduzca constantemente,
con lo que en nuestro ejemplo podramos hacer estrellas que brillasen
y otras que no. Tambin podemos hacer modificaciones de color de
forma individual que afecten al brillo, al color y a la transparencia, lo
que da un amplio abanico de posibilidades de personalizacin de las
instancias de smbolos grficos.
Luis Gil-Guijarro
- 18 -
LA BIBLIOTECA
Como ya hemos visto, la biblioteca se muestra como una
ventana con dos partes bsicas: un listado con todos los smbolos
includos en ella y una ventana en la que se
muestra el smbolo seleccionado. Junto al
nombre aparece un icono para identificar el tipo
de smbolo:
para grficos,
para botones
y
para clips.
NOTAS
Haciendo clic derecho sobre los smbolos

podemos modificar todas sus caractersticas y
duplicarlos -interesante cuando se quieran otros
smbolos similares al primero pero no iguales-.
Podemos incluso redefinir su comportamiento
y hacer que un grfico se comporte como un
clip o como un botn
Cada una de las pelculas que se crean tiene su propia biblioteca
de archivos comunes: grficos, botones y clips. Cuando creamos
pelculas complejas con diversos elementos puede ser necesario un
mayor orden en la biblioteca. Flash ofrece la posibilidad de agrupar
los smbolos en carpetas. Para meter un smbolo en una carpeta slo
tenemos que arrastrarlo sobre ella. Para abrir y cerrar una carpeta
haremos doble clic sobre la misma.
Eliminacin de smbolos: es importante tener en cuenta que
cuando eliminamos un smbolo de la biblioteca, todas las instancias
del mismo desaparecern del escenario y que sta es una operacin
que no puede ser revocada, una vez realizada no tenemos posibilidad
de recuperar el elemento. Es importante estar bien seguro antes de
proceder a borrar un smbolo de la biblioteca y, como medida de
precaucin, es interesante guardar una copia del fichero antes de
proceder al borrado para tener as posibilidad de recuperar la
informacin.
BIBLIOTECAS COMUNES
Flash dispone de un lugar donde podemos guardar elementos
que sirvan para ser usados en diferentes pelculas. La versin bsica
de Flash dispone ya de bibliotecas comunes de botones y sonidos.
Para acceder a ellas buscaremos el men Ventanas > Bibliotecas
comunes > opcin. Ms adelante veremos cmo usar estos elementos.
Para crear nuestras propias bibliotecas comunes habremos de
crear una pelcula Flash con los smbolos que deseamos compartir, no
es necesario que haya instancias en el escenario, slo los smbolos en
la biblioteca de la pelcula. Una vez creados guardaremos dicha
pelcula en: c:\Archivos de programa\Macromedia\Flash MX\First
Run\Libraries con el nombre que deseemos para la biblioteca comn.
PROPUESTA: preparar un fichero con grficos especficos de la
asignatura propia para incluir en las bibliotecas comunes
Luis Gil-Guijarro
- 19 -
6. Trabajo con texto
NOTAS
TIPOS DE TEXTO
Hay tres formas diferentes de incluir texto en un fichero Flash:
Texto esttico: sirve para incluir informacin escrita que no tiene
que ser modificada.
Texto dinmico: es un tipo de texto que podemos modificar a
travs de rutinas de programacin en ActionScript en funcin de
las interacciones del usuario.
Entrada de texto: son cuadros de texto a travs de los que el
usuario puede introducir informacin para ser tratada por rutinas
de ActionScript.
Ms adelante, en el captulo de ActionScript se vern algunos
ejemplos de tratamiento de los textos dinmicos y de introduccin.
Aqu slo veremos cmo trabajar con los textos estticos.
CUADROS DE TEXTO ESTTICO
Cuando seleccionamos la herramienta texto la ventana de
propiedades que aparece es la que se ve abajo. En ella podemos
cambiar la fuente, tamao, color, direccin del texto, tipo de
justificacin, ajustar la distancia entre caracteres y entre lneas,
permitir que el texto sea seleccionable o establecer un enlace a una
direccin web.
Cuando escribimos texto esttico en una determinada fuente, el
tipo de las letras se exporta con el archivo, cosa que no ocurre con el
texto dinmico ni con el de entrada, con los que habr que exportar la
fuente como se ver en su momento.
Para crear un bloque de texto que muestre texto en una sola
lnea, se har clic donde desee que empiece el texto y se proceder a
escribirlo.
Para crear un bloque de texto con una anchura fija situaremos
el puntero donde se desee que empiece el texto y arrastraremos el
puntero para sealar dicha anchura.
CONVERTIR TEXTO ESTTICO EN FORMAS

La introduccin de texto esttico no presenta mayor dificultad,
pero hay un par de transformaciones que permitirn, cuando hagamos
animaciones, facilitar efectos grficos sobre el texto.
Luis Gil-Guijarro
- 20 -
El efecto en cuestin es el
de separar las letras que componen el texto para convertirlo en
primer lugar en letras separadas.
Para hacerlo buscaremos Modificar > Separar o men alternativo y Separar. Cuando separamos un cuadro de texto conseguimos que cada una de las letras sea un cuadro de texto independiente, con las posibilidades de manipulacin para realizar
animaciones con las mismas que ello conlleva.
NOTAS
Hay tambin un mtodo de trabajo fcil con todas las letras

separadas de un texto y es el de distribuir en capas dichas letras. Para
distribuir las letras ya separadas en capas tendremos que seleccionarlas todas y en el men alternativo pulsar en Distribuir en capas. Ello
hace que cada letra pase a una capa distinta y a cada capa le pone el
nombre de la letra que contiene.
Para hacer transformaciones absolutamente libres con las letras
del texto podemos pasar a convertirlas en formas, dejando las letras
de ser consideradas por el programa como texto y por tanto ya no
editable y transformable como tal. Para llevar a cabo esta transformacin tenemos que seleccionar las letras ya separadas y volverle a
aplicar la funcin Separar.
Ejercicio:
1. Tratar de conseguir un tipo de texto similar al empleado en
el logo de la Junta de Andaluca (pg 9 de estos apuntes)
2. Hacer algn tipo de animacin con las letras y los grafismos
de la Junta de Andaluca, como parte de una pgina de entrada.
Luis Gil-Guijarro
- 21 -
7. Trabajo con clips de pelcula y botones
Notas
CLIPS DE PELCULA
Un clip de pelcula es como una minipelcula: tiene su propia
lnea de tiempo, independiente de la lnea de tiempo principal, y sus
propiedades. Los clips de pelcula se almacenan en la biblioteca y de
cada smbolo de clip de pelcula pueden introducirse en un documento
tantas instancias como se necesiten. Para distinguir las diferentes
instancias de un mismo clip se le asignan nombres, incluso en algunas
ocasiones aunque slo se use una instancia del clip habr que
asignarle un nombre para poder incluir rutinas que se refieran a l. El
nombre asignado a la instancia es totalmente independiente del que
tenga el smbolo; no podemos referirnos a una instancia por el
nombre del smbolo, aunque slo haya una nica instancia del mismo
en la pelcula. Las instancias de clip de pelcula pueden anidarse unas
dentro de otras para crear una jerarqua.
Ejemplo: vamos a hacer una pelcula consistente en un coche que se
desplaza de un extremo a otro de la pantalla; el coche va a estar
constituido por un clip; las ruedas, que girarn, sern instancias de
otro clip diferente que est insertado en el clip coche.
Procedimiento:
1. Abrir un documento Flash y dibujar la silueta de un coche con
sus ventanas (usar diferentes capas para no alterar por error las
formas ya definidas).
2.
3.
4.
5.
6.
7.
Convertir el grfico en un clip de pelcula

Dibujar una rueda y ponerle algn detalle que
sirva para que se note la rotacin, por ejemplo
tuercas. La tuerca, que se va a repetir varias
veces, puede ser un smbolo grfico que se
inserte repetidas veces.
Convertir la rueda en un clip de pelcula.
Editar el clip de la carrocera haciendo doble clic sobre l e
insertar 2 instancias del clip rueda y cerrar la edicin del clip
carrocera
Hacer una animacin de 120 fotogramas en la que se vea el
desplazamiento del coche apareciendo por un extremo y saliendo
por el otro.
Poner un fondo que d realismo a la animacin.
Podramos meter en la pelcula anterior varias instancias del clip
Luis Gil-Guijarro
- 22 -
coche sin ms que arrastrar la instancia sobre el escenario. En todos

ellos observaramos que las ruedas giran independientemente de que
el coche se mueva o no.
8.
9.
Notas
Vamos tambin a poner nombre a las distintas instancias de los

coches: coche1, coche2 y coche3 (no se usarn espacios en los
nombres de instancia)
Editaremos el clip coche y, dentro de l, pondremos nombre a las
instancias de las ruedas: rueda_del y rueda_tras -estos nombre
van a afectar a todas las instancias de los coches ya que el
nombre lo ponemos dentro de del clip coche-.
Poner nombre a las diferentes instancias no va a tener utilidad

en este ejemplo, ya que las instancias no tienen por qu tenerlo
siempre, pero los dejaremos puestos para poder incluir nuestras
primeras rutinas de ActionScript en el siguiente tema.
BOTONES
Los botones son smbolos que disponen de una lnea de tiempo
especial. Cuando un grfico cualquiera lo convertimos en smbolo de
botn, al editarlo podemos ver una lnea de tiempo similar a la de
abajo.
Aparecen predefinidas cuatro posiciones de fotogramas:

A. Reposo: es el estado normal de un botn y el fotograma correspondiente ser el que se muestre normalmente.
B. Sobre: ser el fotograma que se muestre al pasar el ratn sobre el
botn.
C. Presionado: es el fotograma que se mostrar al presionar el ratn.
Luis Gil-Guijarro
- 23 -
D. Zona activa: es un fotograma especial que no se muestra nunca,

pero que sirve para definir la zona en la que debe activarse el
ratn si esta no coincide o no queremos que coincida con las
formas grficas del botn; esto ser de mucha utilidad cuando los
botones estn integrados por texto.
Lo normal ser definir un fotograma clave para cada una de las
posiciones: un cambio de color entre la posicin de reposo y la de
sobre y un cambio de tamao entre la sobre y la
presionado, al tiempo de mover la posicin en
este ltimo, son las variaciones ms habituales
en los botones.
Notas
Se pueden crear efectos muy realistas trabajando con diferentes

capas, usando degradados y transparencias; como ejemplo puede verse
cmo estn creados los diferentes botones que incluye Flash.
Ejercicio: vamos a incluir en el clip de los coches dos botones
diferentes y creados por nosotros, que ms tarde servirn para detener
el movimiento y reanudarlo.
Luis Gil-Guijarro
- 24 -
8. Creacin de interacciones simples con

ActionScript
Notas
LENGUAJE ACTIONSCRIPT
Una de las grandes posibilidades de Flash en la de poder
introducir programacin en sus pelculas, lo que hace de ellas
herramientas de absoluta interactividad y, por ello, ideales para la
presentacin de contenidos didcticos. El lenguaje que integra Flash
es el denominado ActionScript, y se trata de un lenguaje de programacin orientado a objetos bastante fcil y con muchas similitudes
con JavaScript.
Las lneas de programacin se incluyen desde la ventana
Acciones. Cuando se abre esta ventana por primera vez la veremos
como en el grfico de abajo.
En la barra superior, junto al nombre de la ventana, aparece el

tipo de objeto al que se va a aadir el script, los objetos en los que se
pueden introducir lneas de programacin son los fotogramas clave,
los clips de pelcula y los botones. Bajo el ttulo hay una ventana
desplegable, llamada men de salto, en la que aparecen los elementos
sobre los que podemos escribir una rutina del fotograma activo. Abajo
a la izquierda tenemos una ventana de herramientas de acciones en la
que podemos ver todas las acciones de ActionScript que pueden ser
incluidas en nuestros programas. A la derecha, la ventana blanca es en
la que se ir incluyendo el script.
Hay dos formas de trabajar: el modo normal y el experto. En
modo Normal, los scripts se crean seleccionando elementos de la caja
de herramientas Acciones. Tambin puede seleccionar acciones en el
men emergente del botn de adicin (+). La caja de herramientas
Acciones separa los elementos en categoras como Acciones,
Propiedades y Objetos y tambin proporciona una categora ndice que
muestra todos los elementos ordenados alfabticamente. Al hacer clic
en un elemento una vez, la descripcin de ste aparece en la esquina
superior derecha del panel. Al hacer doble clic en un elemento, ste
Luis Gil-Guijarro
- 25 -
aparece a la derecha del panel Script. En modo Normal se puede

agregar, eliminar o cambiar el orden de las sentencias del panel Script;
tambin se pueden introducir parmetros para acciones en los cuadros
de texto situados sobre el panel Script. El panel Acciones tambin
permite buscar y reemplazar texto, ver nmeros de lnea de script y
"fijar" un script, es decir, mantener un script en el panel Script cuando
se hace clic fuera del objeto o del fotograma. Puede utilizar el men
de salto para ir a cualquier script de cualquier objeto del fotograma
activo.
Notas
PROGRAMAR ACCIONES PARA UN BOTN

En la programacin orientada a objetos lo que hacemos es
disparar la ejecucin de acciones cuando ocurre un evento. Los
eventos ms usuales de ratn son on(press) y on(release); el primero
de ellos significa cuando se presiona el botn... y el segundo
cuando se suelta el botn.... A continuacin del evento introduciremos la accin deseada.
Cuando programamos en modo normal no es necesario incluir
los eventos ya que, dependiendo del objeto que tengamos seleccionado el editor elegir el evento adecuado.
Ejemplo: hacer un clip con un objeto que se mueve por el escenario
e incluir dos botones que permitan detener o poner en marcha la
pelcula.
Procedimiento:
1. Poner un objeto cualquiera en el escenario y crear una animacin
con l.
2. Incluir dos botones, uno rojo y otro verde.
3. Programar el botn rojo para que detenga la pelcula:
Con el botn seleccionado, desplegar las acciones de control de
pelcula en la ventana de herramientas de acciones y hacer doble
clic en stop. Vemos que automticamente se ha introducido el
evento on(release), si deseamos seleccionar otro basta buscarlo
y elegirlo del cuadro superior.
4. Programar el botn verde para continuar la reproduccin:
Proceder igual que con el botn rojo pero seleccionando la accin
play.
5. Probar la pelcula.
CONTROL DE LA REPRODUCCIN DE CLIP DE PELCULA
El mismo procedimiento lo podemos usar para controlar lneas
de tiempo de clips de pelcula includos en la lnea de tiempo
principal. Para poder actuar sobre ellos es imprescindible que las
instancias de esos clips tengan un nombre, como ya vimos en el tema
anterior.
Ejemplo: incluir en el clip anterior una rueda de colores que gire y
hacer que se detenga o se ponga en marcha con el clip.
Procedimiento:
1. Dibujar una circunferencia y dividir la en sectores como en la
figura.
Luis Gil-Guijarro
- 26 -
2.
3.
4.
5.
6.
7.
Convertir el grfico en un clip de

pelcula y ponerle el nombre rueda.
Editar el clip de pelcula y construir
una animacin en la que se vea girar
la imagen.
Cerrar la edicin del clip y visualizar
que las animaciones se ejecutan
bien.
Editar el script del botn rojo en
modo experto e incluir la lnea: rueda.stop();
Editar el script del botn verde en modo experto e incluir la lnea:
rueda.play();
Probar la pelcula y comprobar que funciona correctamente.
Notas
CONTROL DE UN CLIP QUE SE ENCUENTRA DENTRO DE

OTRO
Para efectuar acciones en clips anidados en otros emplearemos
una lgica de nomenclatura jerrquica de la forma: clip1.clip2.accin,
as esta accin se ejecutar sobre un clip2 que se encuentra dentro del
otro clip1.
Ejemplo: En el ejemplo anterior poner otra rueda de colores que gire
en sentido contrario y que se detenga y se ponga en marcha con dos
botones independientes.
Procedimiento:
1. Editar el clip de la rueda y dibujar en una nueva capa una rueda
ms pequea con colores diferentes.
2. Convertirla en un nuevo clip y llamarlo ruedita.
3. Insertar dos instancias de los botones rojo y verde y disminuirlos
de tamao.
4. En modo normal insertar las acciones de parada y marcha en los
botones.
5. En modo experto incluir delante de las acciones rueda.ruedita,
debiendo quedar: rueda.ruedita.stop(); y rueda.ruedita.play();
6. Probar que la pelcula funciona correctamente.
Ejercicio: incluir en la pelcula que hicimos en el tema anterior
botones que permitan detener los coches del escenario as como las
ruedas de los mismos. Aclaracin: las distintas instancias de los
coches deben tener nombres diferentes, pero las ruedas siempre se
llamarn de igual forma en los diferentes scripts, coche1.rueda_del,
coche1.rueda_tras, coche2.rueda_del, coche2.rueda_tras.
OTROS EVENTOS DE RATN
El evento ms normal para el ratn es on(release) -al liberar-,
pero hay otra serie de eventos que pueden resultar tiles en otras
circunstancias:
1. on(press) -al presionar-, se activa cuando se presiona el ratn
sobre el botn.
2. on(releaseOutside)-al liberar fuera-, se activa cuando se ha
Luis Gil-Guijarro
- 27 -
presionado sobre el botn, pero se libera fuera del mismo.

on(rollOver) -al situar sobre-, se activa cuando se pasa el ratn
sobre el botn.
4. on(rollOut) -al salir-, se activa cuando tenemos el ratn sobre el
botn y salimos de l.
5. on(dragOver) -al arrastrar sobre l-, se desencadena cuando
pulsamos el botn, sin soltar arrastramos afuera y volvemos a
entrar.
6. on(dragOut) -al arrastrar afuera-, se activa cuando pulsamos y
salimos del botn.
7. on(keyPress tecla) -al pulsar la tecla-, se activa cuando
pulsamos la tecla definida; este evento se puede compaginar con
pulsaciones del ratn para manipular desde l o desde el teclado
las acciones.
Ejercicio: preparar una pelcula en la que se vea el uso de los
distintos eventos de ratn.
3.
Notas
CLIPS DE PELCULA COMO BOTONES

A partir de la versin MX de Flash, los clips de pelcula pueden
recibir los mismos eventos que los botones, adems de los suyos
propios. Ello nos permite aplicar efectos interesantes sobre los clips,
que en las versiones anteriores haba que hacer introduciendo botones
dentro de clips de pelcula. Esta posibilidad permite realizar botones
con efectos sofisticados. Vamos a hacer un ejemplo de esto ltimo.
Ejemplo: disear un botn que muestre una animacin en su estado
de reposo, otra distinta en su estado sobre, y otra al pulsar.
Procedimiento:
1. Hacer un grfico para un botn similar al de la figura.
2. Convertirlo en un clip de pelcula, insertar un fotograma clave en el fotograma 3 y cambiar los colores del
botn.
3. Insertar dos fotogramas ms y convertir el 5 en clave. Estos cinco
primeros fotogramas van constituir la pelcula del estado de
reposo de nuestro botn; tendremos que hacer que no pase la
pelcula del fotograma 5. Para ello, con el fotograma 5 activado
entramos en la ventana de acciones e insertamos la accin goto,
que veremos que se inserta como gotoAndPlay(1) -ir y reproducir
el fotograma 1- lo que har que este bucle se est repitiendo
constantemente.
4. Insertar un nuevo fotograma clave en el fotograma 6,
borrar el diseo del botn e incluir un dibujo parecido al
de la figura. Insertamos otro fotograma clave en el 8 y
cambiamos su tamao.
5. De nuevo insertaremos un fotograma clave en el 10 y procederemos como con el fotograma 5 incluyendo un script con
la accin goto, pero esta vez sealando al fotograma 6. Los
fotogramas 6 al 10 constituirn la opcin sobre de nuestro
botn.
6. Ahora definiremos los fotogramas para la opcin presionado. Generamos en el fotograma 11 un nuevo fotograma clave
Luis Gil-Guijarro
- 28 -
y vamos a crear en l una interpolacin de forma hasta el

fotograma 17 que contendr el efecto final, por ejemplo una
decoloracin mediante el uso de la opcin alfa de color. En
ese fotograma 17 incluiremos la accin de gotoAndPlay
dirigida al fotograma 11.
Notas
Ya tenemos preparado el botn pero si publicamos la pelcula

veramos que slo se ve la opcin de reposo pues que en ningn
momento hemos indicado que pase por otros fotogramas al mover el
ratn.
7. Cerramos la edicin del smbolo y con l seleccionado vamos a
introducir el siguiente script:
on (rollOver) {
gotoAndPlay(6);
}
Cuando estoy sobre ir al

fotograma 6
on (rollOut) {
gotoAndPlay(1);
}
Cuando salgo ir al fotograma 1
on (press) {
gotoAndPlay(11);
}
Cuando presiono ir al
fotograma11
Esta rutina de programacin se ha incluido en el clip de pelcula

y no en el fotograma de la lnea de tiempo principal, es por lo que ese
script afectar nicamente al clip.
8. Probar el funcionamiento del script.
ETIQUETADO DE FOTOGRAMAS
En scripts pequeos es fcil direccionar a un nmero de
fotograma determinado, incluso si modificamos la lnea de tiempo
podra resultar tambin fcil hacer las modificaciones de los script
para direccionar a fotogramas diferentes. No obstante existe una
posibilidad de no tener que tocar los script aunque modifiquemos la
lnea de tiempo y consiste en poner etiquetas a los fotogramas clave
y direccionar no a su nmero sino a esa etiqueta. Aunque cambiemos
la lnea de tiempo cualquier accin gotoAndPlay(nombre de fotograma) seguir apuntando al mismo sitio.
Ejemplo: vamos a hacer una animacin escalonada en la que un
objeto se mueva un determinado trayecto y, en base a botones
podamos hacer que el desplazamiento sea mayor o menor. Variar
luego la lnea de tiempo para hacer el movimiento ms o menos
rpido.
Procedimiento:
1. Realizar una animacin de un objeto desplazndose por el
escenario.
2. Vamos a proceder a copiar la animacin completa: en la lnea de
Luis Gil-Guijarro
- 29 -
3.
4.
5.
6.
7.
tiempo seleccionamos todos los fotogramas y pulsaremos sobre

Edicin > Copiar fotogramas.
Pulsamos sobre el fotograma libre siguiente a la animacin y
pulsamos en Edicin > Pegar fotogramas; volver a hacer esta
misma operacin para obtener tres copias de la misma animacin.
En los fotogramas clave
de inicio de cada una de
las tres animaciones vamos a poner una etiqueta a
los mismos: uno, dos y
tres.
En los fotogramas finales de cada animacin vamos a incluir un
script gotoAndStop() pero en lugar de poner los nmero de
fotograma vamos a incluir su etiqueta correspondiente entre
parntesis.
Vamos a insertar o eliminar fotogramas para hacer que las tres
lneas de tiempo tengan una duracin ostensiblemente diferente.
Comprobar la pelcula y ver que las lneas de programacin
siguen funcionando a pesar de haber cambiado de lugar fotogramas claves referenciados.
Notas
Ejercicio: Modificar el clip de los coches para hacer que cada uno
tenga un movimiento independiente, y disponer un botn de marcha
y otro de paro para cada uno de los coches (tendremos que incluir el
movimiento en la propia lnea de tiempo del clip coche. Si se van a
escalar los tamaos tendremos que crear un clip por cada coche).
Luis Gil-Guijarro
- 30 -
9.Adicin de sonidos
Notas
INCLUIR SONIDOS EN LOS BOTONES

Dentro de las bibliotecas comunes hay una dedicada a sonidos
pensados para botones o elementos similares. Podemos probar los
sonidos seleccionndolos y pulsando el
botn play de la ventana en que nos muestra la onda.
La adicin de uno de esos sonidos a
un botn es muy simple, basta con arrastrar el sonido seleccionado sobre un
fotograma clave del botn.
Procedimiento:
1. En una pelcula crear un botn y
hacer doble clic sobre l para editarlo. Crear una capa especfica para
sonidos
2. Seleccionar el fotograma Presionado y tras elegir el sonido que deseemos, arrastrarlo sobre la escena (no
sobre la lnea de tiempo). Veremos
que en el fotograma correspondiente
de la lnea de tiempo aparecer la
grfica del sonido.
3. Podemos tambin poner otro sonido
en el fotograma Sobre, aunque no
es normal usar sonidos al pasar sobre
botones.
Ejercicio: poner sonidos en los botones de la pelcula de los coches.
INSERTAR FOTOGRAMAS EN LA PELCULA
Podemos usar la misma tcnica para arrastrar sonidos a un
fotograma clave pero debemos tener en cuenta los siguientes problemas:
Los sonidos que han empezado a sonar seguirn hacindolo
hasta que no terminen.
Siempre que se inicie un sonido sin se termine otro, el sonido
del segundo se unir al del primero.
Si pasamos varias veces por el fotograma en el que se inicia un
sonido sin que ste haya terminado, se empezar de nuevo
unindose este nuevo al que an no ha terminado.
INSERCIN Y CONTROL DEL SONIDO
La insercin de sonidos y su control requiere el uso de scripts
algo avanzados pero que expondremos aqu como una receta.
Ejercicio: Vamos a mostrar un escritorio y hacer que cuando
sealemos sus objetos suene su nombre.
Procedimiento:
1. Comenzaremos importar los sonidos a usar a la biblioteca de
Luis Gil-Guijarro
- 31 -
2.
3.
4.
nuestra pelcula Archivo > Importar a biblioteca... y seleccionar

ficheros.
Cada uno de los sonidos importados
hay que vincularos para su exportacin. Seleccionar el sonido y pulsar el
botn derecho para acceder al men
que se muestra a la derecha y pulsar
sobre Vinculacin...
En el cuadro que se abre -mostrado
abajo- marcar la casilla Exportar para
ActionScript y en identificador poner
el nombre con el que nos vamos a
referir a ese sonido, p.e. el nombre del archivo sin su extensin.
Notas
Crear una capa especial para la programacin de sonidos en la

lnea de tiempo principal. Vamos a insertar los siguientes scripts
en modo experto (tendremos que poner cuidado porque cualquier
variacin, por insignificante que parezca, provocar errores y
nuestro programa no funcionar en absoluto; hay que respetar
maysculas y minsculas):
En el fotograma recin creado
sonido = new Sound();
En cada uno de los objetos a los que queremos hacer que

suenen cuando hagamos clic sobre ellos:
on(release){
_root.sonido.stop()
_root.sonido.attachSound("nubes")
_root.sonido.start();
}
En la segunda lnea de este script aparece la palabra nubes porque
har que suene el sonido exportado con el nombre nubes. En cada
grfico asociaremos su dibujo con el sonido que le corresponde.
Luis Gil-Guijarro
- 32 -
10. Prueba y publicacin de una pelcula
Notas
PRUEBA DE UNA PELCULA

Conforme vamos generando la pelcula es muy recomendable
ir comprobando que la misma funciona como tenemos previsto. Para
ver su funcionamiento seleccionaremos Control > Probar pelcula o
Ctrl+Intro.
Al probar la pelcula de esta forma hay que tener en cuenta que
el escenario que se muestra no es el escenario que se ver finalmente
en la pelcula terminada; en esta ltima slo veremos el cuadro con el
tamao del escenario, mientras que en la prueba vemos espacios que
quedan fuera del escenario.
Cuando se cometen errores en la pelcula, stos son mostrados
al publicar en una ventana denominada Salida. Siempre que esta
ventana se nos abra al publicar ser para indicarnos que hay algn
problema, identificando el mismo en su mensaje.
Es conveniente ir comprobando la pelcula con mucha regularidad durante su creacin para localizar ms fcilmente los problemas
que puedan surgir. As mismo tambin es recomendable ir guardando
la distintas versiones de la pelcula con nombre nuevo con la opcin
Guardar como... con nombres pelcula01, pelicula02,... y as tener
siempre una versin recuperable hasta un punto y que funciona
correctamente.
Comprobar una pelcula fotograma a fotograma
Desde la misma pantalla de edicin podemos ver los afectos de
las animaciones con las teclas , y .; con la primera retrocedemos en
la lnea de tiempo, con la segunda avanzamos.
PUBLICACIN DE UNA PELCULA
Cuando trabajamos con Flash se generan dos tipos diferentes de
archivos, uno con extensin .fla y otro con .swf. Los archivos con
extensin .fla son archivos editables de Macromedia Flash; son los
que se abren con nuestro programa de creacin de pelculas flash.
Pero el resultado final de la pelcula, la que se terminar viendo, es un
fichero con extensin swf, que es la pelcula publicada.
El fichero swf se genera cada vez que hacemos una prueba de
la pelcula con el propio nombre del fichero y en la misma carpeta
donde hemos guardado el .fla; en caso de que no hayamos guardado
an una copia del archivo, ste se guardar con el nombre por defecto
(Sin titulo-1,...) en la carpeta
C:\Archivos de programa\Macromedia\Flash MX
Flash ofrece varias posibilidades de publicacin de la pelcula
swf. Para configurar la publicacin buscamos Archivo > Configuracin de la publicacin...
Luis Gil-Guijarro
- 33 -
De forma predefinida la publicacin se hace en dos formatos,

formato swf de Flash y en HTML -formato de pgina web-. En
realidad la publicacin en HTML no genera ningn fichero especial
de la pelcula sino que compone una pgina HTML con los cdigos
necesarios para incluir el fichero swf, que es la verdadera pelcula
flash.
Tambin podemos hacer una publicacin GIF, JPEG y PNG
pero se genera una imagen esttica del primer fotograma en uno de
estos formatos, que son mapas de bits -en formato GIF podemos
exportar como gif animado-. Al publicar en este formato generamos
un fichero ejecutable (.exe) que incorpora junto a la pelcula, su
reproductor.
Hay dos formatos de publicacin llamados proyectores que son
muy tiles para cuando queramos ver una pelcula flash en cualquier
ordenador, independientemente de que tenga o no instalado el
proyector de Macromedia Flash (plugin necesario para ver una
pelcula en este formato).
Luis Gil-Guijarro
- 34 -
11. Creacin de scripts con ActionScript
Notas
ELEMENTOS QUE PUEDEN CONTENER SCRIPTS

Cuando escribimos scripts en una pelcula hemos de tener
presente que slo podemos incluirlos en:
Fotogramas clave
Clips de pelcula
Botones
No podemos introducir lneas de programacin en ningn otro sitio.
Adems, la inclusin de scripts en los clips y botones llevan aparejada
que las acciones estn asociadas a un evento, por ejemplo: accin: ir
al fotograma 25, evento: al hacer clic sobre el objeto.
En el tema 8 hemos incluido scripts en los tres tipos de objetos
referenciados. Vamos a ver aqu nuevas acciones y nuevos eventos a
travs de ejemplos.
ARRASTRAR Y SOLTAR OBJETOS DEL ESCENARIO
En este ejemplo aprenderemos a arrastrar objetos en de un
escenario y a soltarlos en el lugar que le corresponde, acumulando en
un contador el nmero de fallos que se cometan; puede servir para la
creacin de ejercicios que pidan situar elementos en los lugares
previstos.
ARRASTRAR Y SOLTAR
Tenemos en un escenario las dos imgenes que vemos en la
figura y deseamos poder arrastrar la bombilla sobre el recuadro
amarillo; al soltarla debe quedar donde la dejemos.
Primero hemos de tener en cuenta que los dos objetos de nuestro

escenario deben ser dos clips de pelcula -no es que tengan animaciones, sino que vamos a tener que incluir una programacin que slo
pueden recibir este tipo de objetos.
Acciones: startDrag() , stopDrag()
Con el objeto bombilla seleccionado vamos a insertar la
siguiente rutina:
on (press) {
this.startDrag(false);
}
Luis Gil-Guijarro
Cuando presione, ste (objeto) comenzar a arrastrar.
- 35 -
on (release) {
this.stopDrag();
}
Cuando suelte, ste (objeto) dejar de

arrastrar
Notas
Escrito el script, probaremos la pelcula y comprobaremos que

podemos dejar la bombilla en cualquier lugar del escenario, puede ser
dentro, fuera o en un lugar intermedio del cuadro receptor.
Hay un detalle en la primera accin no comentado y es que entre
los parntesis del comienzo de arrastre incluimos false. Este palabra
clave indica que podemos coger el objeto por cualquier lugar; sin en
lugar de false escribimos true veremos que al hacer clic sobre la
bombilla, esta se mover hasta situar el centro del objeto en la
posicin del ratn. Habr otros ejercicios en que nos interese ese
efecto pero aqu parece ms interesante el programado.
DETECTAR COLISIONES ENTRE OBJETOS
Vamos a ver cmo detectar que la bombilla y el cuadrado se
tocan para hacer que, si esto ocurre, la bombilla se site centrada en
el cuadrado de forma automtica al soltarla.
Propiedades: _x , _y
Acciones: hitTest()
Control de flujo: if(...){...}
Comenzaremos por poner nombre a las dos instancias: bombilla
y bombillaC, para la bombilla y el cuadro receptor respectivamente.
Las propiedades _x e _y de cualquier objeto dan las coordenadas
del mismo en el escenario (el origen de coordenadas de un escenario
se sita en la esquina superior izquierda), as bombilla._x contiene el
valor de la coordenada segn el eje horizontal del cuadro amarillo.
Cuando lo escribamos ms abajo veremos que a bombillaC se le
antepone _root., esto lo explicaremos un poco ms adelante y por
separado para no meter demasiados conceptos juntos. De momento lo
escribiremos as, sin ms.
El control de flujo if(...){...} nos sirve para pedir al programa
que compruebe si se cumple lo que est entre los parntesis, y si esto
ocurre que ejecute todas las acciones que se encuentran entre las
llaves.
La accin objeto1.hitTest(objeto2) detecta si el objeto 1 y el 2
entran en colisin.
Insertaremos a continuacin, dentro del evento on(release) las
siguientes lneas:
if (this.hitTest(_root.bombillaC)) {
Luis Gil-Guijarro
si este objeto colisiona con el objeto

bombillaC hacer lo indicado entre
llaves
- 36 -
this._x=_root.bombillaC._x
this._y=_root.bombillaC._y
Hace la propiedad _x y _y de este

objeto iguales a las que tiene el objeto bombillaC; resultado sita el centro de la bombilla en el mismo lugar
que el cuadro
Aqu terminan las acciones a ejecutar

si se cumple la pregunta del control
de flujo
Notas
ALMACENAR INFORMACIN: VARIABLES

Uno de las necesidades ms bsicas durante la programacin es
la de almacenar valores numricos o de texto. Esta informacin puede
ser necesario que est de partida y que la demos en las propias lneas
o bien podremos hacer que sea el propio programa el que la busque
y almacene. El almacenamiento de informacin se hace en variables.
Si en una lnea de un script escribimos pi=3.1416 nombre=Juan
estamos guardando informacin en variables de forma que cada vez
que necesitemos usar el valor numrico 3.1416, en lugar de poner el
nmero pondremos en su lugar pi, o cada vez que queramos poner el
nombre de Juan podremos escribir nombre.
Hay una gran diferencia entre ambas variables, la primera es una
variable numrica, la segunda es una variable alfanumrica -que
puede contener letras, nmeros o signos pero si son nmeros no
pueden ser operados- y la gran diferencia es que los segundos se
deben dar entre comillas.
En el programa que nos ocupa vamos a hacer que sea el propio
programa en que se encargue de obtener y almacenar la informacin,
se trata de variables obtenidas de forma dinmica.
Lo que pretendemos hacer es que si soltamos la bombilla en un
lugar que no sea tocando el cuadro amarillo, en vez de que se quede
all donde la soltamos regrese automticamente al sitio que tena en
origen. Para hacer esto debemos pedirle al programa que rescate las
coordenadas de la bombilla antes de hacer nada con ella y almacene
esos valores en dos variables.
Eventos: onClipEvent(load){...}
Variables
Control de flujo: if(...){...}else{...} es el mismo que el visto pero
incrementado con else{...}. En su conjunto funciona as si se cumple
los que hay entre parntesis haz lo que se indica entre las llaves, si no
se cumple haz lo que hay entre las segundas llaves.
La llamada a eventos onClipEvent es exclusiva para clips de
pelcula, y no pueden ser usadas en fotogramas clave ni en botones.
Con esta llamada podemos invocar eventos que son exclusivos para
clips de pelcula. En este caso invocamos el evento load -carga- para
que realice una serie de operaciones al cargarse dicho clip.
Luis Gil-Guijarro
- 37 -
El control de flujo if(...){...}else{...}

Copia las siguientes lneas en el script de la instancia bombilla
onClipEvent (load) {
Cuando el clip se cargue
origenX = _x;
origenY = _y;
Almacena la coordenada x en la variable origenX y la variable y en origenY
fin de las acciones durante la carga
Notas
Incluye tambin las lneas siguientes despus del cierre de la

llave de la instruccin if:
else {
si no se cumple
_x = origenX;
_y = origenY;
ajusta la coordenada x al valor que se

encuentre almacenado en la variable
origenX, y la coordenada y al que
est almacenado en origenY
fin de acciones de la comparacin
AJUSTE DE LA DETECCIN DE COLISIN ENTRE CLIPS

Nuestro clip parece funcionar bien pero tiene un pequeo
defecto. Este defecto consiste en que si dejamos prcticamente fuera
la bombilla, aunque rozando ligeramente, o nos acercamos por una de
las esquinas redondeadas, da la respuesta por buena y deberamos
obligar a dejar explcitamente dentro del cuadrado amarillo la
bombilla para que la respuesta fuese aceptada como buena.
Para darle esta funcionalidad vamos a proceder de la siguiente
manera:
1. Dentro del clip del cuadrado vamos a incluir un nuevo clip ms
pequeo al que podemos dar color de relleno y de lnea igual que
al cuadrado para que no se vea.
2. A esa instancia del nuevo clip le daremos el nombre de diana (a
donde tenemos que apuntar para acertar)
3. La accin if(this.hitTest(_root.bombillaD)) la sustituiremos por
if(this.hitTest(_root.bombillaD.diana)), para que ahora compruebe que la colisin se hace con el nuevo clip.
Una vez que probemos que todo va bien, vamos a incluir varios
elementos para completar el test.
LOS ELEMENTOS QUE SE ARRASTRAN SIEMPRE ENCIMA
Cuando incluimos varios objetos vemos que al arrastrar objetos
que fueron incluidos antes en la pelcula, stos siempre aparecen por
debajo de los insertados ms recientemente. Al poner objetos en un
escenario, Flash los pone en un nivel 0 y por orden de altura dependiendo de si se ha puesto antes o despus. Nosotros podemos cambiar
el nivel de los distintos objetos para hacer que pasen a estar en un
Luis Gil-Guijarro
- 38 -
primer plano por encima del resto.
Notas
Accin: moviclip.swapDepths(nivel)
Con esta accin podemos cambiar una instancia al nivel que
deseemos
Vamos a incluir en cada clip las siguientes instrucciones:
1.
2.
this.swapDepths(1) debe incluirse en el evento on (press), para

que cuando pulsemos el ratn sobre l pase a estar por en el nivel
1 por encima del resto de los clips y no quedar oculto.
this.swapDepths(0)debe incluirse en el evento on(release), para
que al soltar el botn del ratn vuelva al nivel 0.
INCLUSIN DE CONTADORES
Vamos, a continuacin, a tratar de poner unos contadores que
permitan conocer el nmero de errores cometidos. Para hacerlo
tendremos que usar, junto a las variables, una de las opciones de texto
que no vimos en su momento: los cuadros de texto dinmico.
Los cuadros de texto dinmico son objetos de texto que pueden
cambiar su contenido por la accin de un script y de las interacciones
de los usuarios. Hay dos formas diferentes de trabajar con cuadros de
texto dinmicos: asociando stos a una variable, que es la forma en
que lo vamos a hacer nosotros aqu, y otra algo ms compleja pero al
mismo tiempo mucho ms verstil, que consiste en convertirlos en un
objeto similar a un clip dndoles un nombre y asocindoles bastantes
acciones especiales para este tipo de objetos.
Para asociar un cuadro de texto dinmico a una variable, en la
ventana de propiedades, una vez especificado que el cuadro de texto
pasa a ser dinmico, aparecen nuevos cuadros. Uno de ellos, llamado
Var, sirve para incluir el nombre de la variable a la que asociamos el
cuadro de texto. Tambin podremos ajustar que el texto dinmico
lleve un marco o no, que sea de lnea nica o de varias lneas -en esta
opcin hay que tener presente que slo se ver el texto que quepa en
el cuadro especificado-.
Vamos a incluir en el escenario de nuestro ejercicio un cuadro

de texto dinmico asociado a la variable fallos, y escribiremos en el
cuadro como nmero inicial 0.
Operadores: ++
Luis Gil-Guijarro
- 39 -
Se trata de un operador de incremento. Puesto detrs de una

variable har que sta se incremente en una unidad.
Notas
Incluimos en el script de cada uno de los objetos arrastrables, en

la zona else del control de flujo la siguiente lnea:
_root.fallos.++
FIJAR LOS ACIERTOS
El siguiente paso ser ver cmo hacer que las respuestas
acertadas no sean movibles. Para hacerlo tendremos que modificar la
programacin de la accin on (press) que es donde se permite el
arrastre; en caso de que cuando presiono el ratn no haya colisin del
clip con el cuadro que le corresponde, se permitir el arrastre.
Operador: ! -(negacin)
El operador ! niega la expresin que le sigue. Normalmente se
emplea en las preguntas (controles de flujo).
Vamos a incluir dentro de la accin on (press), un control de
flujo if (...) {...} que incluya entre sus llaves las dos lneas de
programacin que ya incluye. La accin quedar como sigue:
if (!this.hitTest(_root.bombillaC)) {
Si este clip NO colisiona con

_root.bombillaC
this.startDrag(false);
this.swapDepths(1);
Comienza el arrastre y se cambia de

nivel el clip
termina el control de flujo
CONTADOR DE ACIERTOS COMO CONTROLADOR DE

FIN
Vamos a incluir una variable de recuento de aciertos para
comprobar cundo se ha terminado el ejercicio. Para ello incluiremos
una variable que se llame aciertos a la que daremos inicialmente el
valor 10 y que conforme vayamos acertando iremos decrementando
en una unidad hasta llegar a cero, momento en que daremos por
finalizada la actividad.
Smbolos: -- (decremento)
Puesto tras una variable decrementa su valor en una unidad
Crearemos una capa especial para incluir en su fotograma clave
scripts que afecten a toda la pelcula -se podra incluir en cualquiera
de los fotogramas claves- y escribiremos una lnea que sea:
aciertos = 10;
Y crearemos un cuadro de texto dinmico asociado a la variable
aciertos.
En los scripts de los objetos, dentro de la accin on (release) e
Luis Gil-Guijarro
- 40 -
incluido en la parte if del control de flujo la lnea:

_root.aciertos-De esta forma, cada vez que se produce un acierto decrementa la
variable en uno y lo mostrar en el cuadro de texto dinmico.
Notas
VISIBILIDAD DE LOS CLIPS DE PELCULA Y RASTREO

CONTINUO DE UNA PELCULA
Una vez que se ha acabado la resolucin del ejercicio vamos a
hacer que aparezca una informacin dando la enhorabuena por la
finalizacin y que aparezcan unos botones que permitan volver a
comenzar la actividad si se desea.
Propiedad: _visible
Esta propiedad de los clips y de los botones permite hacerlos
visibles o invisibles. Puede tomar los valores 0 / 1 true / false, as la
instruccin: instancia._visible = false har que la instancia desaparezca de la escena.
Vamos a crear un clip de pelcula que contenga un cuadro de
texto esttico y alguna animacin que felicite por haber acabado la
actividad. A la instancia le pondremos el nombre enhorabuena. Con
ella seleccionada vamos a incluirle el script siguiente:
Cuando se cargue el clip
this._visible = false;
hacer la propiedad de visibilidad

falsa
fin de acciones para el evento
Incluiremos tambin un botn, que programaremos ms

adelante, y a cuya instancia le pondremos el nombre de boton_continuar.
Evento: onClipEvent (enterFrame) {...}
Este evento permite rastrear continuamente un clip; as podemos
efectuar acciones en funcin de los cambios que se produzcan en
algn elemento de nuestra pelcula.
Incluiremos en el script anterior las siguientes lneas:
if (_root.aciertos == 0) {
si la variable aciertos vale 0 , notar

que el signo igual es doble
this._visible = true;
poner en visible este clip
_root.boton_continuar._visible = true;
poner en visible la instancia

boton_continuar
fin de acciones para el control de

flujo
Con estas lneas de arriba, cuando completemos el test y la

Luis Gil-Guijarro
- 41 -
variable aciertos se haga cero aparecern el anuncio final y el botn

que har posible volver a comenzar.
Notas
Restablecimiento de las condiciones iniciales

Vamos, por ltimo, a incluir la programacin al botn que
restablece la actividad como al principio. Incluiremos el siguiente
script:
on (release) {
Cuando libere el botn
boton_continuar._visible = false;
enhorabuena._visible = false;
hacer invisibles el boton

continuar y el rtulo enhorabuena
aciertos = 10;
fallos = 0;
ajustar las variables a los

valores iniciales
_root.bombilla._x = _root.bombilla.origenX;
_root.bombilla._y = _root.bombilla.origenY;
_root.bombillaS._x = _root.bombillaS.origenX;
_root.bombillaS._y = _root.bombillaS.origenY;
_root.interruptor._x = _root.interruptor.origenX;
_root.interruptor._y = _root.interruptor.origenY;
_root.interruptorS._x = _root.interruptorS.origenX;
_root.interruptorS._y = _root.interruptorS.origenY;
_root.motor._x = _root.motor.origenX;
_root.motor._y = _root.motor.origenY;
_root.motorS._x = _root.motorS.origenX;
_root.motorS._y = _root.motorS.origenY;
_root.pila._x = _root.pila.origenX;
_root.pila._y = _root.pila.origenY;
_root.pilaS._x = _root.pilas.origenX;
_root.pilaS._y = _root.pilas.origenY;
_root.pulsador._x = _root.pulsador.origenX;
_root.pulsador._y = _root.pulsador.origenY;
_root.pulsadorS._x = _root.pulsadorS.origenX;
_root.pulsadorS._y = _root.pulsadorS.origenY;
poner cada uno de los

clips en las posiciones de
origen y que se encuentran almacenados el las
variables origenX y origenY
fin de la accin de liberar

botn
LA RUTA DE LOS CLIPS

Cuando nos referimos a un clip para modificar alguna de sus
propiedades o realizar con l cualquier evento no slo tendremos que
saber y nombrarlos a la hora de escribir el script; tambin hemos de
saber la ruta para llegar a ellos. Esto ltimo es especialmente
necesario cuando hacemos referencia a una instancia cualquiera desde
un script escrito en otra instancia diferente ya que no slo tendremos
que dar su nombre sino tambin su ruta de acceso.
Cuando situamos una instancia de un clip cualquiera en el
escenario de una pelcula de Flash, sta se sita en la raz de la
pelcula (root en ingls); as que cuando nos queremos referir a una
instancia desde un script ubicado en otra tendremos que anteponer al
nombre de la instancia el parmetro _root que indica que ese nombre
Luis Gil-Guijarro
- 42 -
est en la raz. Toda la estructura de referencias es similar a la que

empleamos en la ubicacin de archivos y carpetas de nuestro disco
dura, slo que aqu, en lugar de emplear la letra C: para decir que
estamos en el nivel ms bsico de almacenamiento, usamos _root.
Notas
El tipo de referencias descrito en los prrafos anteriores se llama

referencia absoluta. Existen otras formas de referencia: referencia
relativa y referencia dinmica. La referencia dinmica es la que ofrece
ms posibilidades pero es algo compleja de entender y no vamos a
tratarla en este curso de introduccin.
En la referencia relativa cuando tenemos que referir a un objeto
que est en un nivel anterior antepondremos _parent.
FUNCIONES Y OBJETOS DE TEXTO
El final del ejemplo anterior supuso tener que introducir mucha
informacin en uno de los scripts. Ese problema lo podramos haber
solucionado usando unos nombre de instancias ms coherentes con la
programacin aunque menos relacionados con el objeto que representaban; adems de lo anterior hubiese sido necesario el uso de
funciones. Vamos a ver el este ejemplo muy simple el uso de las
funciones junto a una manipulacin mucho ms dinmica de los
cuadros de texto.
CUADRO DE TEXTO CON NOMBRE DE INSTANCIA
En un escenario nuevo vamos a poner un cuadro de texto
dinmico y le vamos a poner como nombre de instancia miTexto y lo
haremos multilnea
A continuacin, en el fotograma 1 de la lnea de tiempo vamos
a escribir las siguientes lneas de script:
miTexto.createTextField();
asocia un campo de texto a la variable miTexto
miTexto.text="Prueba";
introduce el texto Prueba en la variable miTexto
Probar la pelcula y ver cmo en el cuadro de texto se muestra

Prueba. Esto no mejora en nada lo que ya sabamos hacer y parece
que lo dificulta, pero vamos a seguir. Vamos a cambiar Prueba por
Hemos cambiado el contenido del cuadro de texto y probamos de
nuevo la pelcula.
Se puede ve que el texto es demasiado largo para el tamao del
cuadro creado a pesar de que activamos que nuestro cuadro de texto
tuviese multilnea; para que esta posibilidad funcione hemos de aadir
una instruccin que indique que el cuadro de texto creado debe
adaptarse al contenido:
Luis Gil-Guijarro
- 43 -
miTexto.autosize = true;
Indica que el cuadro de texto miTexto cambiar su tamao para adecuarse al contenido
Notas
Probar ahora y comprobar que en esta ocasin s que aparece el

texto completo y en varias lneas. Con esta instruccin permitimos
que el cuadro no se quede pequeo en el caso de que mandemos un
contenido mayor que el especificado en su creacin. En el caso de que
no hubisemos habilitado la funcin multilnea, el cuadro se habra
hecho mayor en anchura.
Hay muchas propiedades que podemos ahora ajustar mediante
programacin en este cuadro de texto: color del texto, de fondo,
posicin del cuadro y otras muchas en las que no vamos a entrar
ahora, pero s que vamos a trabajar con las primeras.
Para ajustar el color del texto escribiremos:
miTexto.textColor = 0x000000;
Ajusta el color al valor hexadecimal

000000 (negro)
Vemos que el color hay que darlo en hexadecimal. Esto no

reviste el mayor problema ya que este valor lo muestra el mezclador
de colores cuando elegimos un color.
Para ajustar la posicin del cuadro de texto usaremos las
propiedades _x e _y que ya hemos venido usando para los clips de
pelcula
miTexto._x = valor;
mitexto._y = valor;
Sita el cuadro de texto en la posicin marcada por los valores a los

que hemos igualado las propiedades.
Para cambiar el color de fondo antes de ajustar el color hemos

de habilitar esta opcin, que por defecto no lo est:
miTexto.background = true;
Habilita el fondo de miTexto
miTexto.backgroundColor = 0xAA00FF;
Ajusta el color de fondo al valor

hexadecimal AA00FF
Igual que con el fondo, para poner un borde con un color

determinado hay que habilitar el borde:
miTexto.border = true;
Habilita una lnea de borde
miTexto.borderColor = 0xFF0000;
Ajusta el color del borde al valor hexadecimal FF0000
Tambin podemos hacer uso de la propiedad _visible para hacer

aparecer o desaparecer el cuadro de texto.
Luis Gil-Guijarro
- 44 -
Con estas propiedades cambiables vamos a crear un clip de

pelcula con un crculo rojo de forma que al situar el ratn sobre l nos
d informacin sobre el crculo, site el cuadro de texto en la posicin
del centro del cuadrado y ajuste el color de las letras al color rojo y el
fondo a uno que contraste con el rojo.
Notas
Procedimiento:
1. En un escenario nuevo crear un clip de pelcula consistente en un
cuadrado azul y un cuadro de texto dinmico con nombre de
instancia miTexto.
2. En un fotograma clave de la lnea de tiempo principal crearemos
una instancia de cuadro de texto con miTexto y habilitaremos el
color de fondo y el borde.
3. Con el clip del cuadrado seleccionado -no editado- incluiremos
el siguiente script:
on (rollOver) {
Cuando est sobre
_root.miTexto._visible = true;
_root.miTexto.text = "cuadrado azul";
_root.miTexto.backgroundColor = 0xFFFF00;
_root.miTexto.textColor = 0x0000FF;
Ver cuadro miTexto, poner el texto

cuadro azul, ajustar el fondo a
amarillo y el color de letra a azul
fin de acciones
on (rollOut) {
Cuando salga
_root.miTexto._visible = false;
_root.mitexto.text = "";
Ocultar el cuadro mi texto y vaciar

su contenido
fin de acciones
Tras comprobar que el clip funciona correctamente, incluir otras

dos formas geomtricas con distintos colores y convertirlas en clip de
pelcula.. Incluir a cada una de ellas un script similar al del cuadrado
para que miTexto informe sobre el tipo de forma y su color.
Variante: podramos haber usado botones en lugar de clips para las
figuras, ya que los eventos programados son de botn. En caso de usar
esta opcin, no hubiese sido necesario incluir en los scripts el prefijo
_root delante de miTexto ya que los botones estn dentro de las
pelculas y no forman parte de la jerarqua de stas.
FUNCIONES
Cuando una misma rutina va a afectar a varios objetos, como es
el caso de los scripts que hemos escrito para cada uno de las figuras
anteriores podemos usar las denominadas funciones, que no son ms
que rutinas que situamos en un lugar comn y a las que llamamos
desde varios sitios.
Escribamos en la lnea de tiempo principal el siguiente script:
Luis Gil-Guijarro
- 45 -
function ponerTexto() {
Creamos una funcin que llamamos

ponerTexto. Los parntesis son obligatorios en todas las funciones
miTexto.text=miTexto.text+" esto es nuevo";
Cuando se ejecute, har el contenido igual a lo que haba ms el nuevo

texto: esto es nuevo
fin de acciones para la funcin
Notas
Vamos a incluir en los scripts de los clips, dentro de la accin

on(rollOver) y como ltima lnea la siguiente:
_root.ponerTexto()
ejecutar las acciones de la funcin

ponerTexto() que est en la lnea de
tiempo principal
Si comprobamos ahora las acciones veremos que adems del

rtulo con el tipo de grfico y su color aparece el texto que aadimos
en la funcin.
Visto cmo se ejecuta una funcin, vamos a reprogramarla para
no tener que repetir las mismas rutinas en cada uno de los scripts;
adems tenemos la enorme ventaja de que si queremos cambiar algo
en ese script, slo lo tendremos que hacer una vez.
ENVIAR DATOS A UNA FUNCIN
Vamos a sustituir el script del evento on(rollOver) del cuadro
azul por el siguiente:
on (rollOver) {
_root.ponerTexto("cuadrado azul",
0xFFFF00, 0x0000FF);
Ir a la funcin llevando los datos que

hay entre parntesis -cada dato diferente se separa por una coma-
El script de la funcin, que pusimos en la lnea de tiempo

principal, deba ser substituido por esto otro:
function ponerTexto(clip, fondo, texto) {
Cuando se llame a la funcin, el primer dato que venga con la llamada se

asociar a la variable clip, el segundo
a fondo y el tercero a texto
.miTexto._visible = true;
Hacer miTexto visible
miTexto.text = clip;
Insertar en mi texto el contenido de la

variable clip
miTexto.backgroundColor = fondo;
Poner el color de fondo que indique

la variable fondo
Luis Gil-Guijarro
- 46 -
miTexto.textColor = texto;
Poner el texto en el color que indique

la variable texto
fin de acciones de la funcin
Notas
Observad cmo hemos eliminado el prefijo _root de delante de

miTexto; ello se debe a que tanto la instancia miTexto como la
funcin se encuentran en la misma ubicacin -misma lnea de tiempo-,
no es necesario indicarselo. Comprobar que funciona correctamente
y cambiar los scripts del resto de las figuras siguiendo la misma
estructura que la empleada para el cuadrado azul.
COORDENADAS DEL RATN
Vamos a hacer ahora que el rtulo de miTexto aparezca junto
al ratn al posicionarnos sobre los clips.
Propiedades: _xmouse e _ymouse
_xmouse e _ymouse son dos variable que contienen en todo
momento las coordenadas de la posicin del ratn.
Aprovechando estas dos variables, vamos a incluir en la funcin
dos lneas que posicionen el cuadro de texto junto al ratn cuando
sealemos cualquiera de las figuras:
miTexto._x=_xmouse
Posiciona la instancia miTexto en la

misma posicin horizontal que el
ratn cuando entra en la figura.
miTexto._y=_ymouse
Posiciona la instancia miTexto en la

misma posicin vertical que el ratn
cuando entra en la figura.
EJEMPLO 3: CREACIN DE UNA BARRA DE

DESPLAZAMIENTO
Utilizando lo aprendido hasta ahora y con algunas instrucciones
nuevas vamos a disear una barra de desplazamiento horizontal que
servir para saber en qu momento de una pelcula nos encontramos
y para desplazarnos por ella de forma grfica.
PASO 1: CREAR EL DESLIZADOR
Empezaremos diseando el que va a ser nuestro
deslizador. En el grfico de la derecha se muestra una
propuesta. Este grfico se convertir en un clip de pelcula.
PASO 2: SCRIPT DEL DESLIZADOR
Vamos a utilizar una forma diferente de usar la
funcin stratDrag. Consiste en marcar las coordenadas del
cuadro en las que puede moverse el objeto que queremos
arrastrar e indicarselo a la funcin startDrag. Insertaremos
el siguiente script en el clip que acabamos de dibujar:
Luis Gil-Guijarro
- 47 -
Al cargarse
arriba = _y;
abajo = _y;
Definir las variables arriba abajo

iguales la posicin vertical del clip lo que estamos marcando es que no
debe moverse verticalmente-
izquierda = _x;
derecha = _x+200;
Definir la variable izquierda igual a

la posicin horizontal del clip, y la
derecha iguala ese valor ms 200 indicamos que el clip podr moverse
desde donde se encuentra hasta 200
puntos ms a la derecha-
Fin del evento al cargarse
on (press) {
Al presionar
startDrag("", false, izquierda, arriba,

derecha, abajo);
Comenzar a arrastar este objeto, sin

ajuste de centrado, entre las variables
izquierda, arriba, derecha y abajo
Fin del evento al presionar
on (release) {
Al liberar
stopDrag();
Parar el arrastre
Fin del evento al liberar
Notas
PASO 3: PONER FONDO A LA BARRA

Crearemos un fondo que marque los lmites de desplazamiento
del deslizador.
PASO 4: INCLUIR UN MARCADOR DE PORCENTAJE
Vamos a incluir un cuadro de texto que indique
porcentualmente cul es el desplazamiento realizado. Para ello vamos
a situar un cuadro de texto dinmico y le vamos a asociar la variable
porcentaje.
Vamos a incluir en el script del deslizador las siguientes lneas:
onClipEvent (enterFrame) {
Conforme se desarrolle el clip
_parent.porcentaje = Math .round

((_x-izquierda)/(derecha-izquierda) * 100 );
hacer la variable porcentaje, que est

en un nivel anterior -_parent-, igual
al valor que resulte de la operacin
redondeada
Fin del evento
La operacin iguala la variable porcentaje a lo siguiente:

Math.round(...) Redondea un nmero decimal al entero ms
prximo.
(this._x-min)/(max-min)*100 convierte la posicin x de nuestro
clip en un nmero entre 0 y 100, tomando como lmites las variables
Luis Gil-Guijarro
- 48 -
min y max.
Notas
PASO 5: CONVERTIR TODOS LOS OBJETOS EN UN SLO

CLIP
A continuacin seleccionaremos todos los objetos que hemos
diseado y convertiremos todos ellos en un nico clip, lo que
permitir introducir la barra deslizadora en cualquier pelcula.. Vamos
a ponerle nombre de instancia, por ejemplo deslizador, para poder leer
el valor de la variable porcentaje desde otros clips de pelcula
LIGAR LA BARRA A DIFERENTES ACCIONES
ROTAR OBJETOS
Dibujamos un cuadrado con alguna marca como referencia y lo
convertiremos a clip de pelcula. A continuacin le insertaremos el
siguiente script:
onClipEvent (mouseMove) {
Cuando se mueva el ratn
_rotation =
_root.deslizador.porcentaje*360/100;
Rotar este clip el ngulo indicado en

la operacin siguiente.
Fin del evento
La operacin _root.deslizador.porcentaje*360/100; convierte un

numero entre 0 y 100 en otro entre 0 y 360, que es como hay que
indicarle la rotacin de un clip, en grados sexagesimales.
MOVER UN OBJETO O UNA ANIMACIN
Creamos un clip de pelcula con una animacin por
interpolacin de un objeto. En el primer fotograma de esta animacin
vamos a incluir una instruccin stop() para que la pelcula no se
reproduzca automticamente.
Cerramos la edicin del clip y vamos a escribir el siguiente
script asociado a nuestra instancia:
onClipEvent (mouseMove) {
cuando mueva el ratn
gotoAndStop(Math.ceil(_root.desliza
dor.porcentaje*_totalframes/100));
Ir y parar en fotograma que resulte de

la operacin entre parntesis.
Fin de evento
La operacin es la siguiente:
_root.deslizador.porcentaje*_totalframes/100
toma el valor de la variable de porcentaje de nuestro clip deslizador,
multiplica este valor por el nmero total de fotogramas de nuestro clip
y lo divide por 100, en definitiva convierte un nmero entre 0 y 100
en otro entre 0 y el nmero de fotogramas del clip de pelcula.
Luis Gil-Guijarro
- 49 -
La instruccin Math.ceil() lo que hace es convertir el nmero

decimal que resulta de la operacin anterior en un nmero entero
redondeado hacia el ms alto.
Notas
BARRA QUE SE RELLENA EN FUNCIN DE LA

REPRODUCCIN DE UNA PELCULA
Vamos a utilizar la barra de deslizamiento creada para construir
otra sin deslizador pero que se va rellenando conforme se reproduce
una pelcula. Partiremos del clip de la barra deslizadora anterior.
En una pelcula nueva vamos a pegar la barra deslizadora de los
ejemplos anteriores. Editamos la barra y eliminamos el deslizador,
dejando slo la barra y el cuadro de texto dinmico, al que vamos a
cambiar la variable asociada por la variable fotograma -no tiene
importancia cambiar el nombre, pero de esta manera hacemos ms
intuitivo el funcionamiento-.
Estando an en el modo de edicin de la barra, dibujamos un
cuadrado que entre en el
rectngulo de la propia
barra, haciendo de relleno
de la misma, elegir un
color que contrate bien.
Convertiremos ese
rectngulo en un clip pero
en la ventana de
conversin, en la eleccin
del punto de registro marcado en el grfico de la
izquierda-, elegiremos el
punto central de la
izquierda. El sentido es
que vamos a hacer crecer
este cuadrado hacia la derecha y si dejamos el registro central, crecer
hacia ambos lados.
Vamos a insertar el siguiente script en este ltimo clip:
Cuando se cargue
_width = 0;
Hacer el ancho del clip igual a 0
Fin de acciones durante le carga
onClipEvent (enterFrame) {
Conforme se vaya reproduciendo
_width =
214*_root._currentframe/_root._total
frames;
Hacer el ancho del clip igual al

resultado de la operacin
Luis Gil-Guijarro
- 50 -
_parent.fotograma =
_root._currentframe;
Hacer la variable fotograma igual al

valor del fotograma que se reproduce
en ese momento de la lnea de tiempo
principal
Fin del evento
La operacin
_width = 214*_root._currentframe/_root._totalframes;
iguala el ancho del clip a un valor que est entre o y el ancho de la
barra deslizadora dependiendo del fotograma que se reproduzca en ese
momento. El ancho de la barra es de 214; este valor tendr que ser
modificado en funcin del ancho de la propia barra.
Como se muestra en la imagen de abajo, hemos incluido
tambin una serie de botones que permitirn controlar completamente
la reproduccin de una pelcula.
Los scripts de cada botn son:

Ir al primer fotograma:
on (release) {
Al liberar
gotoAndStop(1)
Ir y detenerse en el fotograma 1
Fin de acciones
Retroceder un fotograma
on (release) {
Al liberar
if (_currentframe>1) {
Si el fotograma actual es mayor que 1
gotoAndStop(prevFrame());
Ir y detenerse en el fotograma
anterior al actual
Fin de acciones si se cumple la

comparacin
else {
Si no se cumple la comparacin
gotoAndStop(_totalframes);
Ir y detenerse en el ltimo fotograma
Fin del control de flujo
Luis Gil-Guijarro
- 51 -
Notas
Parar
on (release) {
Al liberar
stop();
Parar la proyeccin
Fin del evento
Reproducir una vez

on (release) {
Al liberar
play();
Reproducir la pelcula
continuar = 0;
Hacer la variable continuar igual a 0
Fin del evento
Se ha introducido una variable -reproducir- para distinguir entre

reproducir una vez y reproducir en continuo. Esta variable se controla
en el ltimo fotograma clave de la animacin; all introduciremos el
siguiente script:
if (continuar == 0) {
Si la variable continuar es igual a 0
stop();
detener la proyeccin
fin de acciones
Al estar este script en el ltimo fotograma de nuestra pelcula si

se encuentra con que la variable continuar es igual a 0, sta no se
reproducir en forma de bucle, que es lo que todas las pelculas hacen
por defecto.
Reproducir en continuo
on (release)
Al liberar
play();
Reproducir la pelcula
continuar = 1;
Hacer la variable continuar igual a 1
Fin del evento
Avanzar un fotograma
on (release) {
Al liberar
stop();
Detener la proyeccin
if (_currentframe<_totalframes) {
Si el total de fotogramas es menor

que el fotograma actual
gotoAndStop(nextFrame());
Ir y detenerse en el siguiente
fotograma del actual
Fin de acciones si se cumple la

comparacin
else {
Si no se cumple la comparacin
gotoAndStop(1);
Ir y detenerse en el fotograma 1
Luis Gil-Guijarro
- 52 -
Fin del control de flujo
Notas
Ir al ltimo fotograma
on (release) {
Al liberar
gotoAndStop(_totalframes)
Ir y detenerse en el ltimo fotograma
Fin del evento
Recopilacin de lo visto de ActionScript

Eventos de botones:
on(press){...}
on(release){...}
on(rollOver){...}
on(rollOut){...}
Eventos de clips de pelcula:
onClipEvent(load){...}
onClipEvent(EnterFrame){...}
onClipEvent(mouseMove){...}
Acciones:
stratDrag()
stopDrag()
hitTest()
swapDepths()
Acciones de control de pelcula:
gotoAndStop(...)
gotoAndPlay(...)
nextFrame()
prevFrame()
Control de flujo:
if(...){...}else{...}
Propiedades:
_x
_y
_visible
_xmouse
_ymouse
_rotation
_width
_currentframe
_totalframes
Luis Gil-Guijarro
- 53 -
Operadores:
+ (suma)
++ (incremento)
-- (decremento)
* (producto)
/ (divisin)
! (negacin)
= (igualar)
== (comparar una igualdad
< (menor que)
> (mayor que)
<= (menor que o igual)
>= (mayor que o igual)
Operaciones con el objeto Math:

Math.round
Math.floor
Math.ceil
Mtodos
NombreDeInstancia.createTextField()
Propiedades del objeto TextField:
NombreDeInstancia.text
NombreDeInstancia.background
NombreDeInstancia.backgroundColor
NombreDeInstancia.color
NombreDeInstancia.border
NombreDeInstancia.borderColor
NombreDeInstancia._x
NombreDeInstancia._y
NombreDeInstancia._visible
Luis Gil-Guijarro
- 54 -
12. Utilizacin de componentes
Notas
QU SON LOS COMPONENTES

Los componentes son elementos clsicos de los formularios
HTML: casilla de verificacin (CheckBox), cuadro combinado
(ComboBox), cuadros de lista
(ListBox),, botones de opcin
(R adi oBut t o n ) , b o t ones de
comando (PushButton) barra de
desplazamiento (ScrollBar) y
paneles de ventana con barras de
desplazamiento (ScrollPane).
Los componentes vienen
integrados en flash como clips de
pelcula complejos, que pueden
ser arrastrados a un escenario
desde la ventana componentes:
Ventana > Componentes. Cuando insertamos uno de los componentes
en nuestra pelcula, se incluirn en la biblioteca de la misma todos los
componentes que integran el clip.
Cuando insertamos un componente en una escena, en la ventana
de propiedades aparecer una pestaa para ajustar los parmetros del
componente. Estos parmetros cambian de un componente a otro.
Vamos a ver cmo funcionan los cuatro primeros.
ADICIN DE UNA CASILLA DE VERIFICACIN - CheckBox
El CheckBox permite agregar casillas de verificacin en una
pelcula Flash. Sus parmetros son:
Label (etiqueta): es el nombre que aparecer junto
a la casilla de verificacinInitial Value (valor inicial): es el valor que tomar al inicio; puede
ser false (no marcada) o true (marcada).
Label Placement (localizacin de la etiqueta): ubicacin de la
etiqueta; puede estar a la derecha o a la izquierda.
Change Handler: no vamos a ver esta funcin.
Para leer el componente la instancia debe tener un nombre; para
saber si est en true o false obtendremos el dato mediante el
procedimiento nombre.getValue().
Luis Gil-Guijarro
- 55 -
ADICIN DE UNA LISTA DESPLEGABLE -ComboBox

Permite agregar una lista desplegable de
seleccin nica. Sus parmetros son:
Editable: permite definir la lista como
esttica o editable. Slo veremos un ejemplo
de la esttica, en la que el usuario puede elegir
uno de los elementos de la lista.
Labels: son las cadenas de texto que se van a
visualizar en la lista; para introducir sus
valores pulsaremos sobre la lupa que aparece
cuando seleccionamos el parmetro,

veremos una ventana como la de la
izquierda; al pulsar + incluimos un
elemento, con - lo eliminamos y con
las flechas lo podemos cambiar de
ubicacin en la lista.
Data: es una lista de valores
asociados a los elementos de la lista.
Si definimos los data, la funcin
getValue() llevar el dato asociado;
en caso de no haberlo definido,
getValue() llevar la cadena de la
etiqueta seleccionada.
Row Count: indica el nmero de elementos de la lista que se vern
al mismo tiempo.
ADICIN DE UNA LISTA DE SELECCIN - listBox
Permite agregar cuadros de lista de seleccin nica o mltiple.
La seleccin mltiple implica el manejo de arrays
o matrices, que es un tipo de variable algo ms
complejas de manejar y que no vamos a ver. Para
la seleccin sencilla, este componente tiene un
comportamiento similar al de un comboBox o lista
desplegable. Su manipulacin es similar y el
cuadro de elementos visibles no es modificable de manera sencilla;

hay que modificarlo mediante el mtodo setRowCount(nmero).
Luis Gil-Guijarro
- 56 -
ADICIN DE UN GRUPO DE BOTONES DE OPCIN radioButton

Permite agregar de manera fcil un grupo de botones de opcin.
Los parmetros de estos botones son los siguientes:
Label: es la etiqueta que aparecer junto al botn, y ser el dato que

tomar si no se ha especificado en el parmetro Data.
Initial State: aqu podremos hacer que aparezca marcado inicialmente
(true) o no (false).
Group Name: es el nombre por el que se asocia a un mismo grupo de
botones y es la etiqueta a travs de la que se recoger la opcin
elegida del grupo -nombreDelGrupo.getValue()-.
Data: ser el valor asociado al botn en caso de que deseemos que sea
diferente a la etiqueta.
Label Placement: sirve para ajustar la ubicacin de la etiqueta.
EJEMPLO Preparar una interfaz como la mostrada abajo con dos
grupos de botones de opcin, dos casillas de verificacin, una lista
desplegable con los meses del ao y una lista de seleccin nica con
varios deportes. Se compondrn diversos fotogramas clave, uno por
cada deporte, al que se le pondr como etiqueta el nombre del deporte;
se compondr un cuadro de texto dinmico con nombre de instancia.
Al pulsar el botn rojo se compondr una frase con los distintos datos
seleccionados y se ir al fotograma con la etiqueta del deporte elegido.
Se pondr un segundo botn visible en todos los fotograma menos en
el primero, que sirva para regresar al fotograma 1.
Luis Gil-Guijarro
- 57 -

Curso de Flash Con Script

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Curso de Flash Con Script

Diunggah oleh

Hak Cipta:

Format Tersedia

USO BSICO DE

1. Flash y su interfaz de trabajo

Curso de Macromedia Flash

de herramientas, en la zona central la lnea de tiempo, la zona de

CAJA DE HERRAMIENTAS E INSPECTOR DE PROPIEDADES

Curso de Macromedia Flash

El inspector de propiedades muestra informacin y la

Curso de Macromedia Flash

ellas pueden ser activadas o desactivadas en el men Ver. Tanto para

SOBRE LOS GRFICOS EN FLASH

Curso de Macromedia Flash

SELECCIONADO DE RELLENOS Y CONTORNOS

Curso de Macromedia Flash

conseguir el efecto deseado.

Formas sin contorno: las formas que no tienen

Curso de Macromedia Flash

Para transformar un nodo curvo en uno recto, con la herramienta

Para transformar un nodo recto en curvo, con la herramienta

Curso de Macromedia Flash

Ejercicio: sobre las figuras del ejercicio anterior, hacer agrupaciones,

Los grupos pueden ser usados en diferentes niveles, incluyendo

Curso de Macromedia Flash

el que fue copiado se usar la opcin Edicin > Pegar in Situ o

El uso del portapapeles con las pelculas se ver ms adelante

Curso de Macromedia Flash

3. Trabajo con color

La gestin bsica del color en Flash se hace desde

Cuando vamos a seleccionar un color se despliega una ventana

Curso de Macromedia Flash

inferior izquierdo -los dos primeros dgitos corresponden al valor del

Curso de Macromedia Flash

Edicin de las caractersticas del degradado

El punto central sirve

Curso de Macromedia Flash

4. Creacin de una animacin

ENTENDER LA LNEA DE TIEMPO

CREACIN DE UNA INTERPOLACIN DE MOVIMIENTO

Curso de Macromedia Flash

fotograma. Hemos creado una pelcula sin movimiento de 20

Ejercicio: hacer que la bola se desplace describiendo un cuadrado

Curso de Macromedia Flash

USO DEL PAPEL CEBOLLA

La posicin de los marcadores de papel cebolla es modificable,

Curso de Macromedia Flash

Curso de Macromedia Flash

5. Utilizacin de smbolos, instancias y elementos de bibliotecas

LOS SMBOLOS Y SUS INSTANCIAS

Curso de Macromedia Flash

la y arrastrar varias estrellas al escenario.

CREAR SMBOLOS GRFICOS ANIMADOS

Inserta un fotograma sobre el fotograma 4 de la lnea de tiempo

Es posible individualizar el comportamiento de cada una de las

Curso de Macromedia Flash

Haciendo clic derecho sobre los smbolos

Curso de Macromedia Flash

6. Trabajo con texto

CONVERTIR TEXTO ESTTICO EN FORMAS

Curso de Macromedia Flash

Hay tambin un mtodo de trabajo fcil con todas las letras

Curso de Macromedia Flash

7. Trabajo con clips de pelcula y botones

Convertir el grfico en un clip de pelcula

Curso de Macromedia Flash

coche sin ms que arrastrar la instancia sobre el escenario. En todos