You are on page 1of 144

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por

nosotros”. Rm, 5:8
1

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



UNIDAD 14
EFECTOS DE ANIMACIÓN

14.1. Introducción
Si no te parecen suficientes las interpolaciones de forma y de movimiento, y
quieres realizar animaciones más complejas, puedes combinar las
interpolaciones de movimiento con los efectos y transformaciones que se
pueden realizar sobre los símbolos que las componen y aplicar efectos sobre
las mismas interpolaciones.
Una vez comprendidas todas las técnicas de este tema, estaremos en
disposición de realizar todo tipo de animaciones en Flash. Sólo tendremos
que poner un poco de imaginación porque, como hemos visto y veremos, el
programa nos facilitará enormemente el trabajo.
Con el panel de Propiedades podemos controlar los efectos y filtros, pero
también podemos usar el Editor de movimiento para controlar gran parte de
los efectos.
14.2. Efectos sobre la interpolación
Para describir todos los efectos que podemos aplicar sobre una
interpolación de movimiento previamente creada, sin necesidad de tocar
ningún símbolo, nos centraremos en el panel Propiedades. Si
seleccionamos un fotograma y un objeto perteneciente a una interpolación, y
abrimos el panel Propiedades, desde el botón de la parte superior derecha,
o bien desde el menú Ventana, Propiedades, encontraremos las distintas
propiedades aplicables a ese objeto en ese fotograma. Las propiedades
variarán según el tipo de interpolación, según puedes ver en las siguientes
imágenes correspondientes a las propiedades de la interpolación de
movimiento, interpolación guiada e interpolación de forma:
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
2

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



En las interpolaciones de movimiento podemos darle un nombre de etiqueta,
nos ayudará a identificarla en la barra de tiempo. Aparecerá a lo largo de
todos los fotogramas que la componen.
Tamaño: La propiedad tamaño se representa por los valores AN (anchura)
y AL (altura) y para modificarla basta colocar el cursor sobre el valor y
aparecerá un deslizador que podemos mover a izquierda o derecha, también
podemos hacer clic sobre el valor y teclear el nuevo valor.

Desde el Editor de movimiento también podemos modificar el tamaño de
un objeto desde las propiedades Escala X (anchura) y Escala Y (altura) que
tienen valores en tanto por ciento.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
3

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



Por último, con el uso de la herramienta Transformación libre también
podemos variar las dimensiones del objeto.
Escala: En las interpolaciones guiadas, esta casilla, al activarla, permite un
incremento/decremento progresivo del tamaño del objeto inicial cuando sus
dimensiones son distintas a las del objeto que está en la posición final de la
animación. Si la casilla está desactivada podríamos encontrarnos con una
animación como la siguiente.

En las interpolaciones de movimiento, esta opción está activada por defecto.
Como vemos Flash hace el desplazamiento de posición, pero el cambio de
tamaño se produce bruscamente en el último fotograma.
Aceleración: Esta barra deslizante nos permite determinar la aceleración
del primer tramo de la animación. Podemos elegir valores entre -100 y 100.
Si el valor de aceleración es negativo el símbolo se moverá despacio primero
e irá acelerando de manera progresiva. Si dicho valor es positivo provocará
un efecto opuesto.
Podemos por ejemplo dar la impresión de que un objeto, por ejemplo un
coche, arranca, va cogiendo velocidad poco a poco (valor -100) y después va
frenando y disminuyendo su velocidad hasta pararse.
Como ésta, existen muchas otras aplicaciones. Para comprenderlo mejor
recomendamos hacer el Ejercicio Acelerar movimiento.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
4

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicio: Acelerar Movimiento
Objetivo
Comprender el efecto de aceleración sobre una interpolación de movimiento.
Ejercicio paso a paso
Primero vamos a crear la interpolación sobre la que aplicaremos el efecto.
1. Crea un óvalo en el fotograma 1.
2. Conviértelo en un clip de película pulsando la tecla F8.
3. Pulsa el botón derecho del ratón sobre el fotograma que contiene el
clip de película
4. Selecciona Crear interpolación de Movimiento del menú
emergente.
5. Selecciona el fotograma 20 y pulsa F6.
6. Desplaza el Clip de Película de ese fotograma a la parte derecha del
área de trabajo.
7. Pulsa Intro para ver la animación sin salir del entorno de trabajo.
De momento hemos logrado una animación que se comporta como la
siguiente:
8. Ahora selecciona el fotograma 1 con el botón derecho
y selecciona Propiedades para abrir el panel Propiedades del
fotograma. (si no está ya abierto)
9. Introduce un 100 en la casilla Aceleración (fuera), para hacer que
acelere al principio y vaya frenando poco a poco.
10. Comprueba que el resultado se comporta como éste:
11. Introduce ahora un -100 en la casilla
Aceleración (dentro), para hacer que aumente progresivamente su
velocidad.
El resultado sería el siguiente:
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
5

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



Ahora ya hemos comprobado los distintos efectos de aceleración.
Comprueba el mismo ejercicio con otros valores de aceleración para
observar su efecto.

Rotación: Esta opción es muy interesante ya que nos da la
posibilidad de aplicar una rotación al objeto mientras se produce el
movimiento. Podemos especificar el número de veces o vueltas que se
produzca la rotación durante los fotogramas que dure la interpolación, o
también podemos indicar los grados que queremos que rote el objeto.

Si se trata de una interpolación de movimiento, nos presenta un
submenú Dirección, con tres opciones:

Ninguno. Con esto le indicamos a Flash que no aplique rotación
alguna sobre el símbolo en movimiento. Es la opción por defecto en
las interpolaciones de movimiento.
Derecha (En interpolación clásica CW). Permite realizar el número de
rotaciones completas o el valor de grados en la dirección de las
agujas del reloj.
Izquierda (CCW). Permite realizar el número de rotaciones
completas o el valor de grados en la dirección contraria a la de las
agujas del reloj.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
6

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Si se trata de una interpolación clásica, nos presenta un submenú
Dirección, con una opción más:
Auto. Marcando esta opción hacemos que se produzca la rotación en
aquella dirección que necesite menos movimientos. Si cuesta lo mismo
hacerlo por un lado o por el otro, es decir, cuando la imagen inicial y final
está en la misma posición (en cuanto a rotación se refiere), el hecho de
activar esta opción no tendrá ningún efecto.
Esta opción es la que está marcada por defecto en las interpolaciones
clásicas y por eso no hemos visto hasta ahora un objeto rotar en nuestras
interpolaciones clásicas. Para que hubiera tenido efecto deberíamos
haber rotado la última imagen de la interpolación.

Aquí podemos ver cómo aplicar esta técnica.
Este es el resultado que hemos obtenido, como podemos comprobar,
ha recorrido el camino más corto, ya que el 6 ha pasado progresivamente
de su posición anterior a la que ocupaba el 1 de la otra forma el 6 habría
pasado por las posiciones anteriores del 5, 4, 3, 2 y 1, siendo la longitud
del movimiento mucho mayor.

Veamos un ejemplo de rotación a derechas en una interpolación de
movimiento.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
7

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Desde el Editor de movimiento, también podemos especificar los
grados de una rotación.

Orientar según trazado: Si activamos esta casilla, tanto si la
interpolación sobre la que actuamos es una interpolación guiada, como si
es de movimiento, Flash hará que el símbolo tome la dirección de la guía,
rotando para orientarse en la misma posición que adopta la línea.
Para entender mejor este concepto, recordemos una animación
anterior, en la que el avión hacía una especie de "looping". Resultaba un
poco extraño ver la animación porque los aviones no van marcha atrás y,
en esta ocasión y en muchas otras, no es conveniente que los objetos se
muevan solo en el escenario quedando el mismo símbolo inmóvil, como
si levitara.
Con este comando solucionaremos esto, y el resultado sería este.

Sincronizar (Sinc): Con esto evitamos que no se reproduzca el
último bucle de un símbolo gráfico incluido en nuestra película con una
animación en su línea de tiempo interna, cuando el número de
fotogramas que ocupa en la línea principal no es múltiplo de los
fotogramas que contiene la instancia.
Ajustar: Si activamos esta opción, el centro de la instancia
(identificado con una cruz) se ajustará forzosamente a la guía que hemos
marcado en la correspondiente capa.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
8

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


De hecho si intentamos mover la instancia en un fotograma de la
animación, Flash la volverá a colocar sobre la guía de manera
automática.

14.3. Efectos sobre el símbolo interpolado

Ya vimos en temas pasados cómo aplicar efectos sobre instancias de
símbolos y vimos que se podía lograr efectos vistosos. No obstante, cuando
los efectos muestran su verdadera potencia es cuando el símbolo forma
parte de una animación.
Para explicar y demostrar las posibilidades de estos efectos vamos a abrir el
panel Propiedades, que nos mostrará, en el desplegable Color los posibles
efectos a aplicar si seleccionamos una instancia de un símbolo cualquiera de
nuestra película.
Podemos aplicar los efectos sobre cualquier símbolo de cualquier fotograma
de la animación, tanto sobre el fotograma inicial o el final como en los
intermedios. En este último caso, si se trata de una interpolación clásica,
deberemos convertir a fotograma clave aquel que contenga la instancia y
después aplicar el efecto. El efecto se irá aplicando de forma gradual. De
hecho, es frecuente utilizar interpolaciones clásicas únicamente para aplicar
efectos.
Para entender bien lo que sigue, es necesario controlar la aplicación de
efectos sobre instancias. Esto lo vimos en el Tema 9 y por eso omitiremos
detalles sobre cómo aplicar efectos concretos sobre símbolos.



“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
9

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


14.4. Efecto brillo

El efecto de brillo, como su propio nombre indica, nos viene muy
bien para simular el hecho de que algún objeto se encienda o
brille, o por el contrario se apague o pierda brillo.
En el ejemplo que tenemos a la izquierda, hemos intentado
simular este efecto. Para ello hemos creado un semáforo de luces
intermitentes de color ámbar.
Como se puede ver, las luces se encienden y apagan progresivamente de
manera alternada. Para conseguir esto hemos creado una interpolación para
cada luz, formada por tres fotogramas claves. El tercero lo hemos colocado
justo en el medio de la secuencia de fotogramas. A la primera luz y a la
última le hemos dado el mismo valor de brillo, y en la del medio le hemos
dado un valor más alto o más bajo según fuera el símbolo de abajo o el de
arriba.
Como los movimientos de las luces son distintos e independientes los hemos
colocado en distintas capas.
Para la luz superior los valores de brillo fueron:
0 para el primer fot. clave, -46 para el central y 0 para el del
medio.
Y en la luz inferior al contrario:
-46 para el primer fot. clave, 0 para el central y -46 para el del
medio.

14.5. Efecto tinta
El efecto de tinta, tiene un amplio marco de posibilidades de uso. Es muy
usado en textos y en botones, por ejemplo haciendo que cambien
progresivamente de color al pasarles el ratón por encima o simplemente
efectos de cambio de color en presentaciones.
Tintar colores supone un toque alegre y muy vistoso en las presentaciones y,
si se usan varios efectos combinados adecuadamente, dota de un ritmo
rápido a la animación, como una explosión de color que sorprenda al
receptor de la película.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
10

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Otro interesante uso de este efecto es simular la proyección de una luz de
color sobre un objeto que se va acercando al foco. Veamos un ejemplo de
esto.

Vemos como al acercarse el avión a la luz roja del Sol, éste lo ilumina con
una luz roja.
Hemos aplicado a la instancia del avión del último fotograma de su
interpolación de movimiento un efecto de tinte rojo con una intensidad del
60%. Lo mismo hemos hecho en el centro del Sol pero con dos fases,
poniendo en el fotograma central un efecto de tinte granate del 25%.
La corona solar es simplemente una interpolación de forma en cuatro fases.
14.6. Efecto transparencia (Alfa)
Este es probablemente el efecto más utilizado debido a la versatilidad del
hecho de controlar el grado de visibilidad de los objetos. Podemos, por
ejemplo, simular un foco apuntando a un escenario o, lo más común, hacer
aparecer objetos de la nada y también hacer que se desvanezcan poco a
poco.


“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
11

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Este ejemplo podría representar la entrada a cualquier web o portal de
Internet, de hecho es bastante típico. Para ver cómo realizar una animación
como la anterior pulsa aquí.

Ejercicios: Efectos sobre Animaciones
Ejercicio 1: Efecto Rotación

1. Crea un nuevo archivo.
2. Dibuja una rueda y haz que se desplace de un lado al otro del
escenario.
3. Haz que ruede mientras hace el deplazamiento.
4. Guárdalo como rueda.fla.
Ejercicio 2: Efecto Aceleración
1. Abre el archivo rueda.fla.
2. Haz que vaya frenando en su movimiento hasta pararse.
Ejercicio 3: Orientar según el Trazo
1. Abre el archivo babosa.fla, creado en los ejercicios finales de la
unidad anterior..
2. Dibuja una guía con forma de montañas para que sea recorrida por
nuestra babosa.
3. Puesto que así parecerá que la babosa esté volando, haz que se
arrastre por el borde de la montaña.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
12

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicio 4: Efecto Alpha
1. Escribe tu nombre.
2. En una nueva capa escribe tu apellido.
3. Haz que el nombre vaya desapareciendo y que antes de que lo haga
aparezca poco a poco el apellido por detrás suyo.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.

Ayuda ejercicios: Efectos sobre animaciones
Ejercicio 1: Efecto Rotación
1. Crea un nuevo Archivo de Flash ActionScript 3.0 desde el
menú Archivo → Nuevo.
2. Dibuja la rueda con las herramientas de dibujo de Flash, y
conviértela en un símbolo.
3. Haz clic con el botón derecho sobre el primer fotograma y
selecciona Crear Interpolación de movimiento.
4. Pulsa F6 en el fotograma 25 y pon la rueda en el otro
extremo del escenario.
5. Haz clic sobre cualquier fotograma de la interpolación, y ve
al panel de Propiedades. En El panel que aparece
selecciona el valor Dcha de la opción de Rotación para
girar hacia la derecha y dar la sensación de avance. Deja el
valor por defecto de una vuelta.
6. Ve al menú Archivo → Guardar Como y guarda el archivo
como rueda.fla.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
13

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicio 2: Efecto Aceleración
1. Si lo has cerrado, abre el archivo rueda.fla creado en el ejercicio anterior.
2. En la línea de tiempo, selecciona alguno de los fotogramas de la
interpolación.
3. En el panel Propiedades, introduce el valor 100 de la opción de
Aceleración.
Ejercicio 3: Orientar según el Trazo
1. Utiliza Archivo → Abrir para abrir el archivo babosa.fla.
2. Haz clic derecho sobre la capa de la interpolación, y elige la opción Añadir
guía de movimiento clásica.
3. Crea la guía con la forma de las montañas.
4. Coloca la instancia del primer y el último fotograma al principio y al final de
la guía respectivamente.
5. Ahora haz clic sobre un fotograma de la interpolación, y en el panel
Propiedades marca la casilla Orientar según trazado.
Ejercicio 4: Efecto Alfa
1. Utiliza la Herramienta Texto y escribe en el primer fotograma tu
nombre.
2. Crea una nueva capa, e introduce un texto con tu apellido.
3. Convierte ambos textos en símbolos.
4. En ambas capas, crea fotogramas clave en los fotogramas 10, 20, 30 y
40.
5. En la primera capa, para el símbolo del nombre, pon a 0 el valor para el
efecto Alfa de la instancia en los fotogramas 20 y 30.
6. En la segunda capa, para el símbolo del apellido, pon a 0 el valor para
el efecto Alfa de la instancia en los fotogramas 1, 10 y 40.
7. Para la primera capa, haz clic derecho entre los fotogramas 10 y 19 y
elige Crear interpolación clásica.
8. Para la primera capa, haz clic derecho entre los fotogramas 30 y 39 y
elige Crear interpolación clásica.
9. Repite los pasos 8 y 9 con la segunda capa.
10. Prueba la animación
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
14

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



UNIDAD 15
GENERAR Y PUBLICAR PELÍCULAS SWF

15.1. Consideraciones sobre el tamaño de las
películas
Antes de aventurarnos a publicar nuestra película para que otros la vean,
sobre todo si la vamos a publicar en una página web, donde el tamaño de
descarga es de vital importancia, debemos tener en cuenta los siguientes
aspectos:
CONSIDERACIONES EN EL DIBUJO:
Aunque los degradados queden muy vistosos, también requieren
más memoria, por lo que debemos evitar su uso excesivo, en la
medida de lo posible.
La herramienta Pincel gasta más memoria que el resto de
herramientas de dibujo, por lo que deberíamos elegir estas últimas
en la medida de lo posible.
Hemos visto que la animación de líneas es bastante útil. Sin embargo
el uso de líneas que no sean las definidas por defecto y que usamos
en el capítulo que hemos comentado, hará que el tamaño de la
descarga aumente. Por tanto evitemos las líneas discontinuas, de
puntos ...
Dibujar las curvas con el menor número de nodos posible.
CONSIDERACIONES EN LA ORGANIZACIÓN:
Agrupar los objetos que estén relacionados, con el comando
Modificar → Agrupar.
Si hemos creado un objeto que va a aparecer varias veces,
deberíamos convertirlo a símbolo, ya que como hemos visto, Flash
lo colocará en la biblioteca y cada vez que quiera mostrarlo, hará
referencia a una única posición de memoria.
Ya hemos comentado el mayor tamaño de los mapas de bits, lo que
hace que debamos minimizar el número de apariciones de éstos en
nuestra película.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
15

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


CONSIDERACIONES EN LOS TEXTOS:
Hemos podido observar, cuando manejábamos textos, que cuando
abrimos el menú de tipos de letras, las tres primeras son siempre
"_sans", "_serif" y "_typewriter". Esto no es una casualidad. Están
colocadas ahí para resaltar que estas fuentes ocupan un mínimo de
memoria, por lo que se recomienda su uso.
CONSIDERACIONES EN LA ANIMACIÓN:
Utilizar lo más que podamos las interpolaciones de movimiento y
las guías para reducir el número de fotogramas clave y el tamaño de
la película.
Evitar el uso de la interpolación por forma para animaciones de
cambio de color, cuando sea posible.
Independientemente de la optimización que hagamos, a veces no se
puede evitar que el tamaño de la película aumente. Es recomendable
entonces hacer un preloader (precarga) cuando la película que
queramos publicar sea de tamaño superior a unos 80KB.

15.2. Preloader. Cargar la Película entera antes de
reproducirla
Un preloader se usa principalmente para evitar la carga parcial de la película,
mientras ésta se está reproduciendo, lo que, en ocasiones en las que la
película es de un tamaño considerable, hace que la película se vea
entrecortada.
Normalmente, los preloaders se hacen vistosos para que el observador no se
aburra y deje de lado la opción de visitar nuestra web. Suelen llevar alguna
animación sencilla que se va reproduciendo mientras se está cargando
simultáneamente la película principal, mucho más grande.
Se pueden complicar mucho más, pero nosotros haremos uno sencillo que
nos sirva para entender bien el concepto, y la manera de hacerlo.
Partimos de que ya tenemos nuestra película terminada. Si queremos saber
su tamaño podemos ir a Archivo → Configuración de publicación
seleccionar la pestaña Flash, y marcar la casilla Generar Informe de
Tamaño. Si pulsamos el botón Publicar, aparecerá en nuestro directorio un
archivo de texto donde se explica con detalle el tamaño de nuestra película.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
16

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



Ahora insertaremos una nueva escena (Insertar → Escena). Deberá ser la
primera que se ejecute. Para asegurarnos de ello accedemos a Ventana →
Otros Paneles → Escena, y en la ventana que aparece arrastramos la
escena que acabamos de crear hasta que esté la primera. En nuestro
ejemplo le hemos llamado "Preloader" y hemos supuesto que la Escena con
la película se llama "Película" (lógicamente). Deberá quedar algo similar a lo
que muestra la imagen.
En la escena recién creada insertaremos otra capa, de manera que nos
queden dos capas a las que llamaremos, "Acción" y "Cargando".
En la capa "Cargando" crearemos una animación sencilla. Por ejemplo,
hagámosle honor al título y escribamos "Cargando ..."; puedes aplicarle la
animación que prefieras, siempre que no sea muy compleja. En nuestro
ejemplo, esta capa tiene por lo menos dos fotogramas.
En la capa "Acción" diseñaremos el "corazón" del preloader. Vamos a hacer
que la animación de nuestra escena de carga se ejecute repetidas veces,
hasta que se haya cargado la escena que contiene la película principal,
mediante las acciones ActionScript 3 de Flash. Para ello abrimos el panel de
Acciones.
Vamos a emplear la función gotoAndPlay de ActionScript, que como ya
comentamos nos permite ir a un fotograma determinado. Podemos escribirlo
gotoAndPlay(1, "Escena") para ir al primer fotograma de la escena indicada.
Podemos saber cuántos fotogramas se han cargado hasta ahora con la
propiedad this.framesLoaded, y cuantos fotogramas hay en total con
this.totalFrames.
Conociendo estos datos, lo único que tenemos que hacer es preguntar si
los fotogramas cargados igualan a los totales. Si es que sí, ya podemos
avanzar hasta la siguiente escena. Y si no, podemos volver al principio de
nuestro loader, lo que lo irá repitiendo en bucle.
Para expresar esto en ActionScript, lo haríamos así:
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
17

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



Si no entiendes exactamente el código no te preocupes, lo veremos más
adelante. Lo importante ahora es el concepto.
Por lo tanto, lo que hará esta instrucción es reproducir la escena Cargador, y
al final comprobar el estado de la carga. Si se no se ha completado, vuelve al
principio del cargador, lo que hará que vuelva a pasar por la instrucción.
Cuando la carga esté completa, iniciamos la Película.
Y esto es todo lo que hay que hacer para crear un preloader (aunque por
supuesto se puede hacer más sofisticado), con lo que los visitantes ya no
huirán de nuestra web. En los primeros temas de ActionScript veremos cómo
mostrar en el preloader el estado de la carga.

15.3. Distribución como archivo SWF en un
reproductor autónomo
Para poder distribuir películas creadas en Flash que la gente pueda ver, son
necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar
tenga instalado el Reproductor de Flash.
Flash nos ofrece varias opciones y funcionalidades para la creación de un
archivo SWF. Estas opciones se pueden ver en el panel de Configuración
de Publicación, al que podemos acceder mediante el menú Archivo →
Configuración de Publicación (Pestaña Flash).






“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
18

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Veamos cuáles son estas opciones:

Reproductor: Si queremos publicar nuestra película para que sea vista
con versiones anteriores de Flash, debemos seleccionar aquí la versión
deseada.
Versión de ActionScript: El uso de ActionScript 3 nos permitirá usar
las novedades relativas a objetos, clases etc... Si hemos introducido
código ActionScript debemos de respetar la versión elegida al crear el
archivo, si no se pueden producir errores.
Calidad JPEG: Si en el panel de propiedades del mapa de bits no
hemos indicado una compresión concreta, aquí podremos determinar
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
19

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


su grado de compresión, que determinará a su vez el espacio ocupado
en memoria por este tipo de imágenes. A mayor compresión, menos
espacio en memoria ocupará la imagen, pero también su calidad será
menor.
Establecer Flujo de Audio o Evento de Audio: Esta opción nos
permite acceder al Panel "Configuración de Sonido" desde donde
podemos configurar, para cada tipo de sonidos, sus características.
Suplantar configuración de sonido: Con esto se suplantarán los
niveles de compresión seleccionados para cada archivo de sonido de
nuestro documento.
Comprimir película: Comprime la película al máximo posible.
Generar Informe de tamaño: Esta opción la hemos usado en el
apartado anterior. Si la activamos, se creará un archivo de texto con
una relación detallada del tamaño del documento.
Proteger Frente a Importación: Activando está casilla hará que
cuando otro usuario (o nosotros mismos) queramos importarla no
podamos o tengamos que introducir una contraseña si se ha escogido
alguna.
Omitir acciones de trace: Las acciones de traza se emplean para
comprobar el correcto funcionamiento de la película durante la creación
de esta (durante las pruebas). También se consideran trazas los
comentarios que insertemos en el código ActionScript. Si activamos
esta señal, la película creada no los incluirá, ocupará menos tamaño y
ahorraremos tiempo innecesario. Es recomendable cuando se publique
la película de un modo definitivo.
Permitir depuración: Permite que se pueda depurar el archivo SWF.
También exige la introducción de una contraseña ya que se debe tener
permiso del creador para Importar el archivo y depurarlo.
Para entender mejor este concepto te recomendamos hacer el Ejercicio
Generar y Publicar SWF.



“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
20

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicio: Publicar películas SWF
Objetivo
Aprender a publicar una película Flash como archivo SWF independiente, así
como configurar las opciones de publicación.
Ejercicio paso a paso
1. Accedemos al menú Archivo → Abrir y abrimos el archivo
publicacion.fla que se encuentra en la carpeta ejercicios que debes
de haber descargado con el curso.
2. Abrimos la biblioteca del documento mediante Ventana →
Biblioteca.
3. Vamos al menú Archivo → Configuración de publicación para
abrir la ventana Configuración de Publicación.
4. Abre la pestaña Formatos y desactiva la casilla HTML, porque no
vamos a utilizar la película vía web.
5. Abre la pestaña Flash.
6. En la barra deslizante Calidad JPEG ponemos el valor 0 para reducir
la calidad al mínimo.
7. Vamos a protegerlo para que nadie lo pueda importar.
Marcamos la casilla de verificación Proteger frente a Importación e
introducimos en el campo Contraseña la palabra de paso que
deseemos.
8. Pulsamos el botón Publicar.
9. Accede al directorio de Flash donde se ha exportado el archivo SWF,
que será el mismo donde estaba el original, y ejecútalo.

Comprueba que la calidad de las imágenes no es buena.
10. Abrimos ahora el menú Archivo→ Importar y seleccionamos el
archivo que acabamos de publicar.
11. Comprueba que nos pide la clave para poder hacerlo.
Ahora tenemos una película que no podrán importar y cuyo espacio en
memoria será menor debido al menor tamaño de sus bitmaps.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
21

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


15.4. Distribución para páginas web
Esta es una parte importante, ya que normalmente las películas de Flash
están orientadas a la publicación vía Web.
Para publicar una película Flash en Internet de manera que forme parte de
una página web deberemos insertarla en un archivo típico de páginas web
cuyo lenguaje de programación sea del estilo del HTML. Para ello debemos
atender a las opciones de publicación HTML que nos ofrece Flash, y que nos
ayudarán a que nuestra película se visualice como realmente queremos.
Las opciones de este tipo de publicación están en Archivo →
Configuración de Publicación... (Pestaña HTML).

Plantilla: Para incrustar una película Flash en un documento HTML, hay
que escribir una serie de códigos de programa algo complejos y laboriosos
de hacer a mano.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
22

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Para facilitarnos esta tarea Flash hace esto automáticamente pero, puesto
que cada web es distinta y nuestras necesidades van a ser muy distintas, los
códigos también serán muchos y distintos, por esto Flash incluye Plantillas,
que crean este código automáticamente según el tipo de publicación que
deseemos:
En el botón Información que está a la derecha de la pestaña "Plantilla" se
nos muestra información muy útil sobre cada tipo de plantilla. Estas son las
plantillas más comunes:
Sólo Flash: Esta es la opción predeterminada y utiliza el reproductor
Flash.
Flash con FSCommand: Imprescindible cuando se usen
FSCommands. Permiten controlar el reproductor desde la película.
Mapa de Imágenes: Si hemos incluido una Image Map (imágenes
completas que ejecutan distintas acciones según la coordenada que
se pulse) debemos activar esta opción.
QuickTime: Permite incluir una película QuickTime.
etc ...
Detectar Versión de Flash: Desde aquí podemos seleccionar si
queremos que nuestra película detecte la existencia o no existencia del
plugin de Flash en el ordenador del usuario, así como las páginas web donde
se insertará el código encargado de comprobarlo y las páginas web a las que
se irá en caso de disponer del Plugin o no disponer de él.
Dimensiones: Especifica la unidad en la que mediremos las dimensiones
del Documento.
Anchura X Altura: Aquí introduciremos la anchura y altura, teniendo
en cuenta que a veces un objeto más grande que estas dimensiones
provocará un cambio en éstas.
Reproducción: Permite realizar determinados cambios en cuanto a la
reproducción de la película:
Pausa al Comienzo: Permite que sea el usuario quien haga que se
inicie la reproducción, que inicialmente aparecerá detenida.
Reproducción Indefinida: Cuando la película termine, volverá a
empezar desde el principio. Esto lo hará infinitamente.
Visualizar Menú: Permite que al hacer el usuario clic con el botón
derecho del ratón sobre la película, el menú emergente tenga todas
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
23

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


las opciones por defecto. Si la desactivamos sólo aparecerá la opción
"Acerca de Flash".
Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los
textos sin animación de la película por las fuentes predeterminadas
en la máquina de quien la visualice.

Calidad: Aquí podemos modificar la calidad de visualización de la
película, que depende del suavizado de la imagen y el tiempo de
reproducción. Las opciones son:
Baja No hay suavizado. El tiempo de reproducción es el de máxima
velocidad.
Baja Automática: El reproductor detecta si la máquina soporta en
cada instante un ligero suavizado, si lo soporta, lo aplica. El tiempo
sigue siendo muy rápido.
Alta Automática: Pone al mismo nivel el tiempo y el suavizado, pero
si hay alguna limitación, siempre dará preferencia a la velocidad.
Media: Valores intermedios de velocidad y suavizado. No suaviza los
bitmaps.
Alta: Usa siempre el suavizado, los mapas de bits se suavizan sólo si
no hay animación. Da preferencia a la buena visualización.
Óptima: Se suaviza todo, incluidos los mapas de bits en cualquier
caso. Total preferencia de la apariencia frente a la velocidad.
Modo de Ventana: Opciones para la reproducción dentro de las
ventanas de Windows:
Ventana: Se reproduce la película en la ventana de la web en la que
está insertada.
Opaco sin Ventanas: Hace que los objetos situados en capas
situadas detrás de la película no se vean (en páginas DHTML).
Transparente sin Ventanas: Es el opuesto al anterior. Permite que
los objetos situados detrás se vean.
Alineación HTML: Posición relativa de la película dentro de la
página web HTML. Tenemos varias opciones:
Predeterminada: Centra la película en la página. Si no cabe se
cortan los extremos.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
24

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Izquierda: Alineación a la izquierda. También se recortan los bordes
si no cabe.
Derecha: Alineación a la derecha.
Superior: Alineación en el borde superior de la página.
Inferior: Alineación en el borde inferior de la página.
Escala: Si hemos especificado el tamaño en píxeles o en tanto por
ciento, podemos decirle a Flash cómo distribuir la película en el
rectángulo que hemos decidido que la contenga:
Predeterminada: Se ve toda la película guardando las proporciones
originales.
Sin Borde: Recorta (en caso de que la película sea más grande que
el rectángulo) todo lo que sobre con el fin de mantener las
proporciones.
Ajuste Exacto: Distorsiona las proporciones si es necesario para
conseguir que la película ocupe el rectángulo completo.
Alineación Flash: Se hace necesario alinear la película cuando esta
no tiene las mismas dimensiones que el rectángulo definido. Las
opciones son:
Alineación Horizontal: Podemos escoger entre Centro, Izquierda o
Derecha.
Alineación Vertical: Podemos escoger entre Centro, Superior o
Inferior.
Mostrar Mensajes de advertencia: Permite que se muestren los
posibles mensajes de error de código ActionScript.
Aquí podemos ver un ejemplo de publicación de una película Flash
para la Web.
Además, Flash creará el código JavasScript que detecte la versión de
Flash y otras acciones.
De todas formas, lo más habitual es utilizar un editor web, como
Dreamweaver para crear la página web, y desde ahí insertar el archivo
SWF, por lo que será el propio editor el que se encargue de generar este
código.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
25

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicios: Generar y publicar películas swf
Ejercicio 1: Código para incrustar Flash en HTML
Cuando exportamos una película Flash para publicarla en una página web,
Flash introduce entre las líneas HTML un código de etiquetas (como el
HTML) que muestra al navegador qué película tienen que reproducir y cómo.
El código puede llevar más cosas, pero obviando las etiquetas html básicas,
puede ser muy parecido al siguiente:
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="550" height="400" id="publicacion" align="middle">
<param name="movie" value="publicacion.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash"
data="publicacion.swf" width="550" height="400">
<param name="movie" value="publicacion.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain"
/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Obtener Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
26

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


En cada línea encontramos un parámetro y su valor. Intenta deducir e
identificar aquellos elementos que podamos haber indicado nosotros en las
propiedades de exportación, y que están estrechamente relacionados con la
visualización que tendrá de ella la gente en el navegador.
Si necesitas ayuda, puedes encontrarla aquí.
Ayuda ejercicios: Generar y publicar
películas swf
Solución al ejercicio:
<object type="application/x-shockwave-flash" data="publicacion.swf"
width="550" height="400">
<param name="movie" value="publicacion.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
width y height son el ancho y alto de la película.
movie: Aquí se está indicando la ruta donde está y el nombre del archivo
SWF que hemos exportado y que queremos que se reproduzca en nuestra
ágina.
quality: indica la calidad de reproducción de la película (como hemos visto
en este tema, esta viene determinada por la velocidad y el suavizado o
calidad de imagen) y sus posibles valores pueden ser los allí
loop: Indica si se repetirá en bucle.
play : indica si se repoducirá automáticamnete la película
scale: Indica si el tipo de escala.
wmode: Indica el modo de ventana.
devicefonts: Indica si la opción fuente de dispositivo está activa.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
27

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



UNIDAD 16
INTRODUCCIÓN A ACTIONSCRIPT 3.0
16.1. ¿Qué es el ActionScript?
El ActionScript es el lenguaje de programación que ha utilizado Flash desde
sus comienzos, y que por supuesto, emplea Flash CS5. A grandes rasgos,
podemos decir que el ActionScript nos permitirá realizar con Flash CS5 todo
lo que nos propongamos, ya que nos da el control absoluto de todo lo que
rodea a una película Flash. Absolutamente de todo.
Sin embargo, en estos temas sólo vamos a ver una pequeña introducción a
ActionScript 3 que servirá para sentar las bases que permitirán empezar a
trabajar con ActionScript. Enseñar a programar con ActionScript requeriría
otro curso completo. Profundizar en el conocimiento de este lenguaje queda
por cuenta del lector. Recomendamos seguir la estupenda Ayuda incluida en
Flash CS5.
Todo lo referente a este curso hace referencia a la versión 3 de
ActionScript. Si buscas información sobre ActionScript 2.0, te
recomendamos el curso de Flash CS3, en el que resolvemos los mismos
ejemplos, pero con AS 2.0.

Características generales:
 Como ya hemos comentado, el ActionScript es el lenguaje de
programación propio de Flash, tal y como el Lingo lo es de
Macromedia Director, por ejemplo. El ActionScript está basado en la
especificación ECMA-262, al igual que otros lenguajes como
Javascript.
 ActionScript es, como su nombre indica, un lenguaje de script, esto
quiere decir que no hará falta crear un programa completo para
conseguir resultados, normalmente la aplicación de fragmentos de
código ActionScript a los objetos existentes en nuestras películas nos
permiten alcanzar nuestros objetivos.
 ActionScript 3 es un lenguaje de programación orientado a objetos.
Tiene similitudes, por tanto, con lenguajes tales como los usados en
el Microsoft Visual Basic, en el Borland Delphi etc... y aunque,
evidentemente, no tiene la potencia de estos lenguajes, cada versión
se acerca más. Así, la versión 3.0 utilizada en Flash CS5 es mucho
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
28

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


más potente y mucho más "orientada a objetos" que su anterior
versión 2.0.
 La sintaxis ActionScript presenta muchísimos parecidos con el
Javascript o PHP; si estamos familiarizados con estos lenguajes, la
sintaxis y el estilo de ActionScript nos resultarán muy familiares. Las
diferencias entre JavaScript y ActionScript las podemos encontrar en
la ayuda que acompaña al Flash CS5.
 En la mayor parte de las ocasiones, será necesario "programar".
Flash CS5 pone a nuestra disposición una biblioteca de funciones,
clases y métodos (de momento entenderemos esto como "código
ActionScript que realiza una función determinada") ya implementadas
que realizan lo que buscamos, bastará con colocarlas en el lugar
adecuado.
Vamos a ver muchas de estas funciones en este curso, pero antes
recomendamos tener claros ciertos conceptos relacionados con la
programación. Para ello, recomendamos echar un vistazo a nuestro tema
básico .

Ejercicio Básico: Conceptos iniciales de
programación.
Introducción a la Programación con ActionScript
Si bien el objetivo de este tema NO es enseñar programación,
no podemos pasar por alto que ciertos conceptos relacionados con
ella deben conocerse para poder llegar a entender el ActionScript.
Vamos pues a explicar algunos conceptos fundamentales,
necesarios para abordar la programación mediante ActionScript.
Script: Código escrito en cualquier lenguaje de programación
que realiza una tarea determinada. Así por ejemplo, el código
ActionScript necesario para que al pulsar un botón de Flash
pasemos al fotograma siguiente es un script.
Variable: Vamos a explicar la interpretación del término variable
en programación mediante un ejemplo sencillo.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
29

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Si tenemos la expresión: x = 3;
Tenemos que x es una variable que toma el valor 3. Se llama
variable precisamente porque puede cambiar de valor en cualquier
momento durante la ejecución de nuestra película Flash. Todos los
datos que se manejan normalmente son variables (salvo aquellos
constantes, por ejemplo el número 3). Así, en un formulario de
introducción de datos personales, el nombre es una variable (de
tipo cadena de caracteres o string), el apellido también, la
dirección, el teléfono etc...
La primera vez que utilicemos una variable en nuestro código,
tenemos que definirla con la palabra reservada var, seguida del
nombre que le queramos asignar, dos puntos y el tipo de datos que
contendrá. Y si queremos, también, podemos asignarle un valor
inicial. Es decir, utilizaremos el siguiente formato:
var nombreVariable:TipoDato = valorInicial;
El tipo de dato puede ser cualquier objeto, por ejemplo un
MovieClip. Habitualmente utilizaremos el tipo String para cadenas
de texto y el tipo Number para números.
Expresión: Conjunto de operadores, constantes, variables o
acciones que permiten obtener un valor.
Sentencia o instrucción: Provocan un resultado o una acción
determinada y concreta. Por ejemplo, una asignación, la llamada a
una función, etc. Deben ir terminados por ' ; ' (punto y coma).
Función: Una función es una porción de código (ActionScript en
nuestro caso) que tiene un nombre determinado y que realiza una
labor concreta generalmente devolviendo un determinado valor.
Ejemplo, la siguiente definición de función:
?
1 function Incrementa(x) {
2 return x + 1;
3 }

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
30

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Realiza la función de tomar la variable "x" y devuelve su valor sumándole
uno. Si quisiéramos ejecutarla en algún lugar de nuestra película, bastaría
con escribir: valor=Incrementa(3), siempre y cuando la definición de la
función (que es el código mostrado arriba) esté en cualquier parte de la
película. Esto provocaría que la función calculase el valor 4 (3 + 1) y lo
guardase en la variable valor.
Acción: Flash llama Acción a funciones que él mismo ha implementado y
que no requieren ser definidas para ser usadas. Basta por tanto, con escribir
el nombre de la acción. Estas acciones son lo que usaremos la mayoría de
las veces, pues resultan sumamente fáciles de usar y muy potentes. Las
acciones aparecen en el Panel Acciones y se pueden insertar en nuestro
código con un simple clic de ratón.
Por ejemplo gotoAndPlay(3); es una acción.
Ahora que entendemos qué son las funciones, deberemos comprender
también, que en alguna parte, Flash ha definido la función gotoAndPlay (tal y
como hemos hecho nosotros anteriormente con la función Incrementa) y ha
escrito un código que provoca el efecto ya comentado. Por suerte todo esto
no nos debe preocupar, Flash CS5 se encarga de todo. Nos basta con
conocer cómo usarlas.
Parámetro o argumento: Un parámetro es una variable que entra o sale
de una acción o función. Ponemos un ejemplo:
Tenemos la siguiente definición de función:
?
1 function areaRectangulo(lado1, lado2) {
2 return lado1*lado2;
3 }

Imaginemos que queremos calcular el área de un rectángulo con un lado1 =
2 y un lado2 = 3, y guardarlo en la variable area. Ejecutaríamos la función
areaRectangulo del siguiente modo: area = areaRectangulo(2, 3);. Vamos a
ver qué hace exactamente la función con los parámetros lado1 y lado2.
Al ejecutar areaRectangulo(2, 3), Flash busca definiciones de funciones que
se llamen areaRectangulo, enseguida encontrará la definición que hemos
escrito arriba, (que deberá estar escrita en alguna parte de nuestra película,
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
31

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


en el mismo fotograma o en alguno anterior al que utilizamos). Cuando lo
hace, comprueba que la función que ejecutamos COINCIDE con la cabecera
de la definición, esta cabecera abarca el nombre de la función y todo lo que
venga a continuación hasta que se cierre el paréntesis. En nuestro caso, la
cabecera sería areaRectangulo(lado1, lado2).
Aquí viene la pregunta inminente, ¿Coinciden?. La respuesta es SÍ, para que
coincidan DEBE coincidir el NOMBRE de la función y el número de
parámetros, que serán variables o valores separados por comas. Como
tenemos 2 parámetros en cada parte, todo coincide y pasa a ejecutarse la
función. La función ejecutada es areaRectangulo(2, 3), por lo que lo que en
realidad se ejecutará:
?
1 function areaRectangulo(2, 3) {
2 return 2*3;
3 }

Tras ejecutarse esta función, se calcula el área y se devuelve (return) su
valor. Como le asignábamos el valor a una variable (area =
areaRectangulo(2, 3);), el valor devuelto queda almacenado en esa variable.

16.2. El Panel Acciones
En Flash CS5, el Panel Acciones sirve para programar scripts con
ActionScript, por tanto lo aquí introduzcamos le afectará de menor o mayor
medida. Debemos tener claro desde un principio que el Panel Acciones
puede hacer referencia a Fotogramas u objetos, de modo que el código
ActionScript introducido afectará tan sólo a aquello a lo que referencia el
Panel. Por ejemplo, en la imagen inferior, se puede distinguir que el Panel
Acciones hace referencia al Fotograma 1 de la Capa 1 (en el
nombre de la pestaña de la zona de la derecha y en la zona izquierda en el
apartado Selección actual).
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
32

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda
facilitada por Flash que nos da acceso de un modo rápido y muy cómodo a
todas las acciones, objetos, propiedades etc... que Flash tiene predefinidos.
Estos elementos están divididos en carpetas, que contienen a su vez más
carpetas clasificando de un modo eficaz todo lo que Flash pone a nuestra
disposición. Para insertarlos en nuestro script bastará con un doble clic sobre
el elemento elegido.
En la parte derecha tenemos el espacio para colocar nuestro script, el código
de ActionScript. El código lo podemos insertar en cualquier fotograma clave,
aunque lo más "limpio" es crear una capa para el código.

El Panel Acciones de Flash CS5, no tiene únicamente un modo de
edición. Podemos utilizar el , en el que en vez de escribir
directamente, seleccionamos los distintos elementos desde listas. Puede
resultar útil al principio, cuando aún no estamos familiarizados, pero nos
limita mucho al escribir.
Cuando ya tenemos cierta soltura nos encontraremos más cómodos con el
Asistente de script desactivado, lo que nos permite escribir directamente el
código. Este último modo nos dará más libertad y agilidad si sabemos qué
hacer, pero también es más fácil que cometamos errores.
En la parte superior encontramos herramientas que nos ayudarán.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
33

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Veamos las más útiles:
Buscar: Busca un texto en el código. Útil, por ejemplo, si
queremos buscar en todos los sitios que empleamos un objeto.
Revisar sintaxis. Comprobará errores en la sintaxis, normalmente
que hayamos olvidado cerrar paréntesis o corchetes. Si encuentra
alguno, nos mostrará un mensaje como el siguiente:

En el panel Errores de compilador se mostrarán los errores indicando
la capa, fotograma y línea. Podemos ir al lugar del error haciendo
doble clic.
Formato automático. Al escribir en cualquier lenguaje, es muy
importante hacerlo ordenadamente y con el formato adecuado. Este
botón lo hace automáticamente, siempre que no haya errores de
sintaxis.
Cuando tenemos mucho código, nos resultará más cómodo
si contraemos ciertas partes. Con estos botones, podemos, de
izquierda a derecha, contraer el espacio entre llaves, contraer la
selección o expandir todo.
Cuando estamos programando, es frecuente que queramos
comentar un fragmento de código para que no se ejecute o que
queramos añadir comentarios descriptivos. Con estos botones,
podemos comentar el texto seleccionado, o descomentarlo.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
34

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



Aunque la sintaxis sea correcta, puede que al probar nuestra película se
sigan produciendo errores (errores de compilación). Por ejemplo porque
accedemos a una propiedad de un objeto que no existe, o nos hemos
equivocado al escribir el nombre de una variable. Estos errores también nos
aparecerán en el panel Errores de compilador. En este caso, fíjate en el
número de línea del error, ya que al hacer doble clic, a veces no va al lugar
correcto si el código tiene comentarios.
Para entender mejor este concepto te recomendamos hacer el Ejercicio
Panel Acciones
Ejercicio: Código en el panel Acciones
Ejercicio paso a paso.
1. Sobre un nuevo archivo de Flash ActionScript 3 dibuja un
rectángulo y conviértelo en un botón pulsando la tecla F8.
2. En el panel de propiedades, asígnale botonInicio como nombre de
instancia.
3. Crea una nueva capa para poder insertar nuestro Código de
ActionScript.
4. Selecciona el fotograma 1 y abre el panel Acciones mediante
Ventana → Acciones.
5. Ahora escribe en el panel de ActionScript lo siguiente:
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
35

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



?
1
2
3
4
5
6
7
8
9
//Detenemos la película
this.stop();
//Definimos la función que reproduce la película
function reproducirPelicula(event:MouseEvent):void {
this.play();
}
//Indicamos que al hacer clic sobre el botón, se llame a la
//función anterior
botonInicio.addEventListener(MouseEvent.CLICK,
reproducirPelicula);
(botonInicio es el nombre de instancia del botón y this es el nombre
especial, que significa “el objeto actual”).
6. En este momento has hecho que la película se detenga al llegar al
fotograma 1, es decir, nada más empezar, y comience cuando se
pulse el botón.
7. Para verlo, en la capa del rectángulo crea un fotograma clave (F6)
sobre el fotograma 2.
8. Mueve el rectángulo.
9. En el panel de acciones, sin tener el rectángulo seleccionado, escribe
stop();.
10. Si pruebas la película (Ctrl + Intro), verás que se detiene. Al
hacer clic sobre el botón, avanzas hasta el fotograma 2 donde se
vuelve a detener. Si vuelves a hacer clic, vuelves al fotograma 1 y se
detiene de nuevo.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
36

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


16.3. El panel Fragmentos de código
En Flash CS5 se ha creado un nuevo panel para ayudarnos a generar el
código ActionScript: el panel Fragmentos de código.

Este panel nos resultará muy útil, ya que incluye las funciones básicas. Por
ejemplo, los eventos de botones siempre se escriben de la misma forma.
Desde la sección Controladores de eventos del panel, podemos introducir
este código, y sólo modificar la parte necesaria.
Pero además accediendo a sus opciones encontramos opciones muy
interesantes:

Lo más destacado es que podemos crear nuestros propios fragmentos de
código, con instrucciones que usemos habitualmente.
Además podemos exportarlas e importarlas a otras instalaciones del
programa.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
37

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


16.4. Los operadores y expresiones
Entrando un poco más a fondo en la sintaxis y el manejo del ActionScript,
vamos a comenzar hablando de los operadores y de las expresiones, por ser
la parte más elemental de una acción de ActionScript (y de cualquier otro
lenguaje de programación).
Un operador es un tipo de carácter que realiza una acción especial dentro de
una expresión de ActionScript. Una expresión no es más que un conjunto de
operadores, variables y constantes relacionados entre sí de un cierto modo.
Por ejemplo:
x = 3 ; --> Es una expresión cuyo resultado será asignarle a la variable ' x ' el
valor 3 (que es una constante). A partir de este punto, la variable x vale 3.
y = 5 + x ; --> Es una expresión cuyo resultado será asignarle a la variable ' y
' la suma de la constante 5 y la variable ' x ' que sabemos que vale 3 (porque
le hemos asignado este valor antes). Por tanto, el resultado de esta
expresión es asignarle 8 a y. También se puede considerar como asignar a y
el valor de la expresión 5 + x
Flash nos permite usar multitud de operadores, vamos a comentar los más
comunes. El lector puede acceder a los demás (y a estos) desde el Panel
Acciones en la carpeta Elementos de lenguaje → Operadores. Vamos a
clasificar los operadores tal y cómo lo hace Flash.
Operadores Aritméticos
Son los operadores empleados en operaciones matemáticas.
Operador Descripción Ejemplo
+ Suma 5 + 5 = 10
- Resta 5 - 5 = 0
* Multiplicación 5 * 5 = 25
/ División 5 / 5 = 1
% Resto o Módulo 10%8 = 2
++ Incremento. Suma 1 al valor valor++ equivaldría a valor = valor + 1
-- Decremento. Resta 1 al valor valor-- equivaldría a valor = valor - 1

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
38

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Operadores de Asignación
Asigna el valor de una variable.
Operador Descripción Ejemplo
=
Asigna a la variable de la izquierda el
valor de la derecha
variable vale 3;
variable = 5;
variable vale 5;
+=
Suma con asignación. Le añade a la
variable el valor de la derecha.
variable vale 3;
variable += 5;
variable vale 8;
-=
Resta con asignación. Le resta el valor
de la derecha.
variable vale 3;
variable -= 5;
variable vale -2;
*= Multiplicación con asignación.
variable vale 3;
variable *= 5;
variable vale 15;
/= División con asignación
variable vale 15;
variable /= 5;
variable vale 3;
Operadores de Comparación
Empleados en expresiones condicionales, devuelven un valor lógico,
verdadero (TRUE o 1) si la comparación es cierta, o falso (FALSE o 0) si no
lo es.
Operador Descripción Ejemplo
> Mayor que 6 > 5 da verdadero.
< Menor que 6 < 5 da falso.
>= Mayor o igual que 6 >= 5 da verdadero.
<= Menor o igual que 6 >= 6 da verdadero.
== Igual 'hola' == 'hola' da verdadero.
!= Distinto 'hola' != 'hola' da falso.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
39

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Operadores lógicos.
Evalúan valores lógicos. Normalmente se emplean para comparar
dos expresiones con operadores relacionales, y devuelve
verdadero o falso.
Operador Descripción Ejemplo
&&
And (Y) Devuelve verdadero si los
dos valores son verdaderos
(6 > 5) && (1==1)
devuelve verdadero
(6 > 5) && (1==0)
devuelve falso
||
Or (O) Devuelve verdadero si alguno
de los valores es verdadero
(6 > 5) || (1==1)
devuelve verdadero
(6 > 5) || (1==0)
devuelve verdadero
(6 > 6) || (1==0)
devuelve falso
!
Not (Negado) Devuelve verdadero si
el valor era falso, y al revés.
!(9 > 2) devuelve falso
!(9 ==9) devuelve falso
Esta posibilidad de comprobar si una expresión es igual a otra, nos será muy
útil para comprobar muchas cosas durante nuestra película y en función de
ellas, hacer unas cosas u otras.
Pondremos un ejemplo; imaginemos que le pedimos a un usuario que
introduzca su edad en un campo de texto de nuestra película flash. A ese
campo le llamamos edad_usuario. Le hacemos pulsar un botón Continuar y
en ese momento comprobamos su edad, si tiene menor de edad, le decimos
una cosa, de lo contrario, le decimos otra. Bastaría con hacer algo así:



“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
40

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


?
1
2
3
4
5
if (edad_usuario<18) {
dar_mensaje_1();
} else {
dar_mensaje_2();
}
Aquí lo que estamos diciendo es lo siguiente: "Si edad_usuario es menor a
18, entonces damos el mensaje 1, si no (igual o superior a 18) le damos el
mensaje 2.
El significado de 'if' y 'else' lo veremos más adelante, de modo que no nos
preocupemos por no entender perfectamente el código escrito arriba.
También faltaría, lógicamente, crear las funciones "dar_mensaje_1" y
"dar_mensaje_2".
Orden de precedencia
Cuando en una expresión se combinan varios operadores, el orden en que
se ejecutan puede variar el resultado de la expresión, por eso es muy
importante saber en qué orden se ejecutarán. El orden no es aleatorio sino
que sigue unas reglas de precedencia al igual que en una operación
matemática.
Primero se evalúan los operadores de dentro de los paréntesis.
Cuando dos operadores están al mismo nivel, unos operadores tienen
preferencia con respecto a otros, y estos se calculan primero. En el caso de
que tengan la misma preferencia, se calcularán de izquierda a derecha.
En la siguiente tabla, vemos el orden de precedencia, de mayor a menor, se
ejecutan primero los de mayor orden.
Orden de precedencia
Negación (!) / Incremento (++) / Decremento (--)
Multiplicación (*) / División (/) / Resto (%)
Suma (+) / Resta (-)
Relacionales mayor - menor (>, <, >=, <=)
Igualdad (==) / Desigualdad (!=)
And lógico (&&)
Or lógico (||)
Asignación (=, +=, -=...)
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
41

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Otros Elementos del lenguaje
( ) : Paréntesis. Sirven, como es de esperar, para agrupar términos y dar
preferencias en las operaciones (al igual que en matemáticas). También se
usa, como ya vimos, para pasar parámetros a funciones o acciones.
" " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a
considerarse una cadena de caracteres. Así por ejemplo, mientras que x
representa una variable con un valor determinado, si escribimos "x", estamos
escribiendo en realidad el carácter o la letra "x". Por tanto, podremos añadirlo
a una palabra, compararlo con otras letras, escribirlo por pantalla etc.. pero
ya no será una variable.
//: Comentario de línea. Indica que el texto a partir de ahí, y en esa línea, es
un comentario, y no se ejecutará como código.
/* ....... */: Comentario de bloque. Cualquier texto de una o más líneas
encerrado entre estos caracteres es un comentario, y no se ejecutará como
código.
16.5. Los Objetos
Los Objetos, como ya hemos visto en el tema básico, los objetos son
instancias de una determinada clase. Esto es, son representantes de una
clase ya definida. Cada objeto tiene las propiedades y métodos propios de la
clase, y normalmente son independientes unos de otros. Así, son objetos,
por ejemplo, un botón, un clip de película, un gráfico o un sonido... es decir,
que prácticamente todo es un objeto en Flash CS5.
Vamos a ver los objetos más usados en Flash y una breve descripción de
cada uno de ellos. Como ya se ha explicado en el tema básico, cada objeto
tiene una serie de Propiedades (que veremos después), unos Métodos y
eventos, que dan funcionalidad a los objetos. Cuando un componente de
Flash pasa a ser un objeto, automáticamente pasa a tener todas las
propiedades definidas por Flash para ese objeto y pasa a reaccionar ante los
Métodos y eventos que tiene definidos. Podemos encontrar una lista con
todas las propiedades, métodos y Acciones.
Objeto "Button" (Botón)
Los objetos de tipo Botón es un tipo de MovieClip especialmente
pensado para que el usuario interactúe con él, permitiéndonos
diferenciar entre sus estados, y crear una apariencia para cada uno.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
42

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Cuando nos interese que una imagen que hayamos diseñado se
comporte como un botón, bastará convertirla a botón (del modo visto
en el capítulo correspondiente) y ya podremos usar los eventos
típicos de un botón.
Objeto "MovieClip" (Clip de Película)
Cuando necesitemos crear una película Flash dentro de otra película,
pero no queramos tener 2 ficheros separados ni molestarnos en
cargar una película u otra, deberemos crear un objeto movieclip.
Entre sus propiedades especiales destaca que los objetos "clip de
película" tienen, internamente, una línea de tiempos que corre
independiente de la línea de tiempos de la película principal de Flash,
lo que nos permite crear animaciones tan complejas e
independientes como queramos (podemos crear tantos clips de
película dentro de otros como queramos, por ejemplo). Realmente,
toda nuestra película es un MovieClip.
Objeto "DisplayObject" (Objeto de visualización)
Esta clase engloba a todos los objetos que podemos ver en nuestra
película, como los Clips de película y botones, y define las
propiedades y métodos comunes para todos ellos.
Objeto "Sound" (Sonido) y SoundChanel (Canal de sonido)
Los objetos sonidos no son visuales, y por tanto, no podremos ver
como quedan en los fotogramas, al igual que haríamos con un botón
o un clip de película. Deberemos controlarlos, por tanto, desde el
Panel Acciones y usando ActionScript. Tienen multitud de métodos
especiales, muy potentes y útiles, podemos parar un sonido, crear un
bucle, darle efectos sonoros etc... Utilizando el canal de sonido,
podremos pararlo, ajustar el volumen, etc.
Podríamos, por ejemplo, crear un objeto de tipo sonido y después
hacer que al pulsar un botón suene. (Más adelante se verá algún
ejemplo de uso de sonidos).
Objeto "Mouse" (Ratón)
El objeto mouse es uno de los objetos de Flash que ya está definido
por Flash, pues hace referencia al ratón de Windows (al que
manejará el usuario que vea nuestra película). Si lo usamos,
podremos acceder a las propiedades del ratón de Windows, tipo de
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
43

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


cursos, efectos asociados, detección de su posición etc...
Vale la pena insistir en que su manejo no es análogo al de otros
objetos como el botón, pues podemos crear tantos botones como
queramos y hacer con ellos lo que decidamos, pero el objeto Mouse
es único y actúa sobre el ratón del PC del usuario que vea nuestra
película. Se puede decir que es un objeto "externo" que permite que
otras partes del Sistema Operativo interactúen con nuestra película
Flash. Por tanto, es muy potente.
Objeto "Math" (Matemáticas)
Es uno de los múltiples objetos "abstractos" de Flash, ni es visual, ni
parece que corresponda a nada existente en el sistema (como el
objeto "Mouse"). Su función es muy importante, pues nos permite
usar fórmulas matemáticas de modo muy sencillo. En el tema
siguiente veremos algún ejemplo de su uso.
Objeto "String" (Cadena)
Es otro objeto peculiar, pues corresponde a un tipo de datos. Los
strings o cadenas son secuencias de caracteres. Si definimos una
secuencia de caracteres como objeto de tipo String, podremos usar
los métodos que Flash implementa sobre ellas: Seleccionar
subcadenas de letras, buscar una determinada letra en una palabra,
convertir la palabra a letras mayúsculas y un largo etc...
Objeto "Loader" (Cargador) y Objeto "URLLoader" (Cargador de
información)
Los objetos Loader nos permitirán cargar archivos para mostrarlos
(imágenes, archivos swf, etc...) en nuestra película, mientras que los
objetos URLLoader nos permitirán cargar información de archivos
(archivos de texto, XML, páginas web...).

16.6. Las Acciones - Métodos Comunes
Flash CS5 llama acciones a lo referente al código ActionScript, lo que nos
permite dar comportamientos a los objetos.
Estas acciones son funciones predefinidas de ActionScript, es decir: Flash
CS5 las crea, y nosotros sólo tenemos que usarlas de la manera que se nos
indica. No tenemos que definir las funciones ni nada por el estilo, ni siquiera
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
44

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


necesitamos saber cómo están hechas... Lo importante es que están listas
para usar, lo que facilita el uso de este lenguaje de programación y sobre
todo, haga muy rápido comenzar a programar.
Por supuesto, cuando tengamos más conocimientos, veremos que no es
difícil completar estas acciones ya creadas con las nuestras propias.
Explicaremos las Acciones más importantes, y a medida que avancemos en
el curso, añadiremos algunas más. Para una referencia más completa,
recomendamos mirar la ayuda del programa.
Las acciones son métodos de los objetos (funciones internas a estos), por lo
que no todas están disponibles para todos los objetos.
Definiremos las acciones escribiendo su cabecera (nombre + parámetros con
un nombre genérico) para después explicar qué es cada parámetro.
Acciones - Control de película
Estas acciones se emplean, como su nombre indica, para controlar el flujo de
nuestra película, esto es, para indicar a Flash en todo momento qué
fotograma tiene que mostrar, cuándo tiene que parar, dónde seguir etc...
Estas acciones son métodos de la clase MovieClip. Podemos aplicarlas a
cualquier MovieClip de nuestra película, siguiendo el siguiente formato:
nombreMovieClip.accion();. Si escribimos la función directamente, es decir,
si no indicamos el objeto, estamos haciendo referencia a la película
general.
Veamos las más importantes para entenderlas mejor:
gotoAndPlay: Esta acción será, probablemente la que más usemos
durante la realización de nuestras películas. La acción que realiza
consiste en mover la cabeza lectora al fotograma que le indiquemos. La
cabeza lectora es lo que determina qué fotograma de nuestra película
se está reproduciendo en cada momento. Si, por ejemplo, lo movemos
del fotograma 1 al 25, lo que veremos instantáneamente será el
fotograma 25 y la película continuará reproduciéndose a partir de ahí.
Sintaxis:
gotoAndPlay(escena, fotograma):
o escena: Nombre de la escena a la que queremos
enviar la cabeza lectora. Debe ir entre comillas dobles.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
45

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


o fotograma: Número o nombre del fotograma al que
queremos enviar la cabeza lectora. Si es un nombre
(una etiqueta), debe ir entre comillas dobles, si es un
número, no.
Ejemplo:
miClip.gotoAndPlay("Escena2", 7); → Esta acción lleva la cabeza
lectora al fotograma 7 de la escena llamada "Escena2" del MovieClip
con el nombre de instancia miClip.
play: Da comienzo a la reproducción de la película o la continúa desde
el punto detenido.
Sintaxis:
play();
No tiene Parámetros.
Ejemplo:
this.play(); → Inicia la reproducción del objeto actual.
stop: Detiene la reproducción de la película. Se puede usar en un
fotograma, cuando queramos detenernos en él (porque es un menú, por
ejemplo), en un botón, (para que detenga la película), etc..
Sintaxis:
stop();
No tiene Parámetros.

Ejercicio Avanzado: Estructuras de control
Sentencia IF [ELSE]
La sentencia If evalúa una condición, expresada entre paréntesis ( ). Si esta
se cumple, ejecuta el bloque de instrucciones que tiene entre llaves { }.
?
1
2
3
if (condición) {
bloque de instrucciones;
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
46

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


También podemos indicar un bloque de instrucciones, con la palabra else,
que se ejecutará si no se cumple la instrucción.
?
1
2
3
4
5
if (condición) {
bloque de instrucciones si se cumple;
} else {
bloque de instrucciones si nos e cumple;
}
Podemos poner varios else, con otras condiciones entre paréntesis. Se irán
evaluando todas las condiciones hasta encontrar la primera cierta. Si una se
cumple, se ejecutarán sólo esas instrucciones, aunque hubiesen otras
condiciones ciertas. Si no se ha cumplido ninguna, se ejecutará el último
else, si no tiene condición.
?
1
2
3
4
5
6
7
8
9
10
if (condición1) {
bloque de instrucciones si se cumple condición1;
} else if (condición2) {
bloque de instrucciones si se cumple condición2;
} else if (condición3) {
bloque de instrucciones si se cumple condición3;
} else {
bloque de instrucciones si no se ha cumplido ninguna;

}


“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
47

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Por ejemplo:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (nota >= 0 && nota < 5) {
return 'Suspenso';
} else if (nota >= 5 && nota < 6) {
return 'Suficiente';
} else if (nota >= 6 && nota < 7) {
return 'Bien';
} else if (nota >= 7 && nota < 9) {
return 'Notable';
} else if (nota >= 9 && nota <= 10) {
return 'Sobresaliente';
} else {
return 'La nota no es válida. Tiene que estar entre 0 y 10';

}
Las sentencias If se pueden anidar, siempre que una quede completamente
dentro de otra. Por ejemplo:
?
1
2
3
4
5
6
7
8
9
if (condición1) {
if (condición2) {
si se cumple condición 1 y condición2;
} else {
si se cumple condición 1 pero no condición2;
}
} else {
si no se cumple condición1
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
48

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Cuando se emplea la sentencia If para asignar un valor a una variable, se
suele utilizar la siguiente estructura, más compacta:
?
1 variable = (condición) ? valor_si_se_cumple : valor_si_no;
Por ejemplo:
?
1 calificacion = (nota < 5) ? 'Suspenso' : 'Aprobado';
La sentencia SWITCH
De forma parecida al If se comporta la sentencia Switch. Se indica entre
paréntesis una variable o expresión, y se compara su valor con cada valor de
case. Se ejecutará el código de la primera coincidencia encontrada. Si no
encuentra ninguna, se ejecuta el código de default.
?
1
2
3
4
5
6
7
8
9
10
switch(expresion) {
case valor1:
instrucciones si coincide;
break;
case valor2:
instrucciones si coincide;
break;
default:
instrucciones si no coincide ninguna;
}


“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
49

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Por ejemplo:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function paginaFlores(categoria){
switch(categoria) {
case "silvestres":
return "silvestres.html";
break;
case "ornamentales":
return "ornamentales.html";
break;
case "exóticas":
return "exoticas.html";
break;
case "plantas":
return "palntas.html";
break;;
default:
alert('No existe esa categoría');
return "index.html";
}

}
A la función anterior, se le pasa como parámetro el nombre de una categoría,
y busca en el Switch una coincidencia con el parámetro para devolver la
página de la categoría. Si no encuentra ninguna coincidencia, muestra un
mensaje y devuelve la página de inicio.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
50

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


16.7. Propiedades de los objetos de visualización

Los Métodos y Propiedades suelen ser específicos de cada objeto, y su
estudio requeriría un nuevo curso completo, (recomendamos consultar la
ayuda incorporada en el Flash CS5 cuando surjan dudas), pero hay
bastantes propiedades de los objetos que son comunes a muchos de ellos.
Vamos a ver las más utilizadas, que afectan a los objetos de visualización,
que son con los que trabajaremos habitualmente.
Hay que entender que las clases se heredan. Es decir, una clase genérica,
tiene subclases más concretas. Las sublaceses, tienen todos los métodos y
propiedades de la clase de la que heredan, y además agregan sus propios
métodos y funciones.
Los objetos que se visualizan en Flash, pertenecen a la clase
DisplayObject. A su vez, los clips de película pertenecen a la clase
MovieClip, que es una subclase de la anterior. Por tanto, todos los MovieClip
tendrán los métodos y propiedades de DisplayObject, pero no al revés.
Para usar las propiedades, se debe colocar el nombre de la instancia del
objeto seguido de un punto (.) y después la propiedad y su valor
(objeto.propiedad = valor). Algunas propiedades se pueden escribir sin el
nombre del objeto al que hacen referencia delante, en ese caso, harán
referencia a la película principal, que también es un MovieClip, aunque en
este caso es recomendable utilizar la palabra reservada this.
Propiedades de DisplayObject, comunes a todos los objetos que se
visualizan.
alpha
Hace referencia a la opacidad del objeto al que afecte. La opacidad
se puede definir como la no-transparencia. De modo que un 100% de
transparencia equivale a un 0 de opacidad, o a un 0 de alpha.
height
Devuelve o establece la altura del objeto en píxeles. Por ejemplo, si
tenemos un clip de película llamado "Clip1" y escribimos
"Clip1.height" obtendremos la altura de Clip1. Del mismo modo,
podemos cambiarla sin más que hacer: Clip1.height = 100; (la altura
del Clip1 pasaría a ser de 100 píxeles)
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
51

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


width
Propiedad idéntica a la anterior, pero devuelve o establece la
anchura.
visible
Determina si el objeto está o no visible en nuestra película. Cuando
vale 1 o True, lo está, cuando vale 0 o False, pasa a ser invisible. Es
muy útil para hacer desaparecer partes de una película en un
momento determinado. Por ejemplo, si queremos que al pulsar un
botón desaparezca el clip de película llamado "Clip2", haremos esto:
.... ... Clip2.visible = 0; ... ....
x
Con esta propiedad obtenemos o establecemos las coordenadas del
objeto respecto del eje de las X (horizontal). Sirve para averiguar la
posición o para asignarla de forma dinámica (durante la ejecución de
nuestra película Flash)
y
Con esta propiedad obtenemos las coordenadas del objeto respecto
del eje de las Y (vertical). Sirve para averiguar la posición o para
asignarla de forma dinámica (durante la ejecución de nuestra película
Flash).
rotation
Con esta propiedad obtenemos o establecemos el giro del objeto, su
rotación, expresado en grados.
name
Con esta propiedad obtenemos o establecemos el nombre de la
instancia.





“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
52

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Propiedades de MovieClip.
framesloaded
Sólo lectura. Son los fotogramas de un clip de película o de la
película principal que el sistema lleva cargados en memoria. (Si se
usa sin nombre de objeto delante obtenemos los fotogramas
cargados de la película principal). Muy útil para crear cargadores o
"preloaders".
totalframes
Sólo lectura. Devuelve la cantidad de fotogramas que contiene el clip
de película al que hace referencia. Si se emplea sin ningún nombre
delante, nos devuelve la cantidad de fotogramas de la película Flash
actual. También usado en la creación de cargadores (en el tema
siguiente veremos cómo utilizar estas propiedades).
currentFrame
Sólo lectura. Indica el número de frame en el que se encuentra la
cabeza de reproducción del MovieClip.

Veremos un ejemplo para utilizar ActionScript y referirnos a las propiedades
de los símbolos de nuestras películas. Creamos dos rectángulos, y los
convertimos a símbolos, uno como botón y otro como clip de película. Lo
primero que debemos hacer es darles un nombre de instancia (al cual nos
referiremos cuando escribamos el código). Para ello, y con el símbolo
seleccionado abrimos el panel Propiedades.

Remplazamos el texto <nombre de instancia> por el nombre. Por ejemplo
boton_reducir para el botón y rectangulo para el clip. Los objetos estarán
listos para ser tratados.
Vamos al panel de acciones, y escribimos el siguiente código, para que al
pulsar el botón, el clip del rectángulo reduzca su tamaño a la mitad.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
53

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



?
1
2
3
4
5
6
7
boton_reducir.addEventListener(MouseEvent.CLICK, encogerRectangulo);

function encogerRectangulo(event):void
{
rectangulo.height = rectangulo.height / 2;
rectangulo.width = rectangulo.width / 2;
}
Como veremos más adelante, indicamos al botón que cuando hagan clic,
llame a la función encogerRectangulo. Esta función, lee el valor de las
propiedades alto y ancho del clip, las divide entre dos, y se las vuelve a
asignar. Con esto, reduce el tamaño a la mitad.








“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
54

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



UNIDAD 17
EJEMPLOS DE ACTIONSCRIPT 3.0

17.1. Ejemplos de uso del código ActionScript
Vamos a mostrar los usos más característicos de código ActionScript en los
diferentes objetos existentes en Flash CS5. De este modo lo
comprenderemos mejor y porqué no, nos ahorraremos trabajo al tener ya
hechos aquí muchos de los códigos que usaremos en nuestras películas.
Mostraremos el código y a continuación, una explicación del mismo.
Algunas cosas que debemos de tener en cuenta si estamos familiarizados
con la programación en ActionScript 2, es que con ActionScript 3.0 no
podemos utilizar:
1. alert()
2. La forma de tratar eventos, como on (event){}, onClipEvent(event){},
object.onEvent = function(){} , addListener , etc. La forma de tratarlos
ahora es agregando un escuchador al objeto, con el método
addEventListener, indicando el evento, y una única función de
escucha.
3. Guiones bajos ( _ ) antes del nombre de las propiedades.
4. Variables globales (_global).
5. _root y _parent para acceder a elementos superiores.
Muchas de las funciones que explicaremos se pueden insertar total o
parcialmente desde el panel Fragmentos de código.
17.2. Código ActionScript para botones
Los Botones (objeto Button para Flash CS5) tienen mucha utilidad siempre
que queramos que nuestra película interactúe con el usuario. Dado que esto
va a ser prácticamente siempre, es conveniente estudiar y entender bien
algunos códigos típicos que tendremos que usar para conseguir nuestros
propósitos.
En realidad, los botones se comportan como cualquier símbolo. A todos les
podemos aplicar eventos, ya que lo que hacemos es asociarlos normalmente
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
55

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


al clic del ratón. Los botones tienen la ventaja de que nos permiten
representar distintos estados, mejorando la percepción de interactividad.
Para tener el código organizado, es mejor crear una nueva capa e insertarlo
ahí.
Veamos algunos de ellos:

?
1
2
3
4
5
6
7
8
import flash.events.MouseEvent;

miBoton.addEventListener(MouseEvent.CLICK, funcionAlHacerClick);

function funcionAlHacerClick(event:MouseEvent):void
{
this.gotoAndPlay(15);
}
Esta acción provoca que al hacer clic en el botón vayamos directamente al
Fotograma número 15 de la película.

Utiliza la sentencia import para especificar el nombre completo de la clase,
de modo que el compilador de ActionScript sepa dónde encontrarlo. En este
momento queremos importar la clase MouseEvent, le especificamos la clase
de flash que debe importar:
import flash.events.MouseEvent;
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
56

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


La segunda línea indicamos qué tiene que suceder (el evento) para que se
realice la función que indicamos "funcionAlHacerClick".
En la tercera línea ya indicamos nuestra función y dentro escribimos lo que
queremos que pase al hacer clic en el botón.

?
1
2
3
4
5
6
7
8
import flash.events.*;
import flash.net.*;
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
var miURL:URLRequest = new URLRequest("http://www.aulaclic.es");
function miFuncion(event:MouseEvent):void
{
navigateToURL(miURL, "_blank");
}
Esta acción provoca que al pulsar un botón se abra una nueva página web
en nuestro navegador por defecto y nos muestre la página www.aulaclic.es

La primera línea, la segunda y la tercera tienen la misma función que en el
caso anterior
La cuarta línea creamos una variable nueva para pasarle la web a la cual
queremos que nos lleve al pulsar el botón.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
57

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



?
1
2
3
4
5
6
import flash.events.*;
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
function miFuncion(event:MouseEvent):void
{
r1.width=350;
}
Esta acción provoca que al pulsar un botón se modifiquen las propiedades
del objeto cuyo nombre de instancia aparece delante de la propiedad.
Antes Después
La primera línea y la segunda tienen la misma función que en el caso anterior
En la tercera línea definimos la función y podemos ver la propiedad .width
(anchura), vemos que hay un operador de asignación ( = ), luego deducimos
que vamos a asignar una anchura determinada a un objeto. ¿Qué anchura?
Pues 350, que es la cantidad que aparece en la parte derecha de la
expresión. ¿Y a qué objeto? Al que va delante del ".", o lo que es lo mismo,
al afectado por la propiedad.
Por tanto, al pulsar el botón vamos a modificar la anchura del objeto r1, que
pasará a ser de 350 px.


“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
58

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


17.3. Código ActionScript para Clips de película
Los Clips de Película (objeto MovieClip) son películas dentro de películas.
Pueden tener código AS dentro de sí mismos, aunque suele ser más común
que algún otro código externo (situado en fotogramas) les haga referencia.
Para que el código que contengan los clips de película sea válido, éstos
deben tener algún evento de clip asociado (Load, KeyDown etc) que
determine cuándo se ejecutará este código (al cargarse el clip, al pulsar
alguna tecla ...)

?
1
2
3
4
5
6
import flash.events.*;
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
function miFuncion(event:MouseEvent):void
{
r1.gotoAndPlay(2);
}
Esta acción provoca que al pulsar un botón vayamos al fotograma 2 de un
Clip de Película determinado. El fotograma de la película principal no
variará.
Antes Después
Las primeras líneas son las comentadas anteriormente.
Partimos de una película con 2 fotogramas distintos.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
59

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


En el primer fotograma están el botón y el clip de película (r1)
correspondientes. El clip de película tiene en su línea de tiempos una
animación, inicialmente detenida. Veamos que pasa si se accede a su
fotograma 2.
En el segundo fotograma no nos importa lo que haya porque la acción
situada a la izquierda no nos llevará hasta allí. La cabeza lectora de la
película principal es independiente.
17.4. Sonidos con ActionScript 3
Aunque la idea de objeto no suele llevarnos a pensar en un sonido,
en Flash CS5 los sonidos también son objetos y podemos
manejarlos usando adecuadamente ActionScript. Veamos unos
cuantos códigos muy comunes y un completo ejemplo de cómo
usarlos:

?
1
2
3
4
5
//Código 1

var req:URLRequest = new URLRequest("sonido.mp3");
var musica:Sound = new Sound(req);
var canal:SoundChannel = new SoundChannel();
sonido.mp3 es el nombre del archivo de sonido que se va a cargar, seria
aquí donde deberíamos sustituir éste y poner el nombre del sonido que
queramos nosotros, y deberá encontrarse en el mismo directorio que se
encuentre el archivo Flash que estamos creando, o indicar la ruta completa.
En musica, que es un objeto Sound, almacenamos el sonido. Para
controlarlo, utilizaremos canal, un objeto SoundChanel.

?
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
60

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


1
2
3
// Código 2

canal.stop();
Este código detiene el sonido que se esté reproduciendo por el canal de
sonido canal.

?
1
2
3
4
// Código 3

canal.stop();
canal = musica.play(0,99);
La primera línea detiene el sonido, como hemos visto antes.
La segunda, provoca que el sonido musica comience a reproducirse (play) a
partir de su posición inicial (el 0 indica los segundos transcurridos desde el
comienzo) y lo haga 99 veces (esto se llama loop o bucle). Si ponemos sólo
musica.play();, se reproducirá desde el principio y sólo una vez, como vemos
en el siguiente código:

?
1
2
3
4
// Código 4

canal.stop();
canal = musica.play();
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
61

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ahora que ya sabemos controlar los sonidos mediante ActionScript, veamos
un ejemplo que reúne todo lo visto anteriormente.
En este ejemplo:
- Tenemos un único fotograma con 3 botones. En este fotograma tenemos
insertado el Código 1.
- Los 3 botones tienen distintas funcionalidades:
- En el botón rojo, está insertado el Código 2
- En el botón azul, está insertado el Código 3
- En el botón verde, está insertado el Código 4


17.5. El objeto MATH
Como ya sabemos, los objetos no visibles también se controlan con
ActionScript. Vamos a ver algunos ejemplos del funcionamiento del objeto
Math y cómo sacarle partido.
x = Math.random();
El método random del objeto Math genera un número aleatorio entre 0 y 1.
En este caso, el resultado lo almacenamos en la variable x, para poder
usarlo después...
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
62

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Las utilidades de este método son muchas, generar claves secretas,
passwords, números de lotería etc...
x = Math.round(4.3);
El Método "round" REDONDEA el parámetro introducido eliminando la parte
decimal del mismo. Aunque nuestra configuración utilice la coma para
separar los decimales, en Flash debemos utilizar el punto.
En el ejemplo, x pasaría a valer 4.
x = Math.max(5 , 2);
El Método "max" obtiene el valor máximo entre 2 números.
En el ejemplo, x pasaría a valer 5.
El objeto Math es muy útil y nos ahorra mucho trabajo, pues hay multitud de
operaciones que responden a alguno de sus métodos y que no tenemos
porqué implementar. Basta buscarlos en el manual y usarlos.

17.6. Creación de un cargador o preloader
Vamos a analizar el código de un cargador o preloader para acabar de
afianzar nuestros conocimientos de ActionScript:
Los cargadores o preloaders sólo son necesarios cuando las películas
adquieren un tamaño considerable y resulta inviable visionar la película sin
tenerla toda cargada (porque se atasca, aparecen partes incompletas etc...).
Vamos a suponer pues, que tenemos una película con 150 fotogramas. Los 3
primeros los reservaremos para crear nuestro cargador. En el Fotograma 4
comienza la película.
Nota: Junto a cada línea hemos insertado comentarios (texto entre los
símbolos /* y */) que son líneas que Flash reconoce como tales y que no
tiene en cuenta a la hora de ejecutar el código (es como si no existieran). Se
usan para clarificar y explicar el código que escribamos y para eso lo
usaremos a continuación. Les cambiaremos el color para aclarar que es un
comentario. Evidentemente no son necesarios en el código que finalmente
insertemos en nuestra película.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
63

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Este es el código que insertaremos:
/* FOTOGRAMA 1 */
var bytes_totales:Number; /*Estas son las variable que iremos utilizando*/
var bytes_cargados:Number;
var porcentaje:Number;

bytes_totales = this.getBytesTotal(); /* Hallamos el tamaño de nuestra película
con la propiedad "getBytesTotal()" y lo almacenamos
en la variable bytes_totales. */

//-----------------------------------------------------------------------------
/* FOTOGRAMA 2 */
bytes_cargados = this.getBytesLoaded(); /* Hallamos los bytes que llevamos
cargados en memoria
hasta el momento. Este valor lo asignamos a la
variable bytes_cargados */
if (bytes_cargados >= bytes_totales) { /* Esta es la lógica del cargador. Si
llevamos cargados en memoria
los mismos bytes o más de los que ocupa la película,
ejecutamos
la siguiente línea */
this.gotoAndPlay(4); /* Si hemos llegado hasta aquí es porque toda la
película está
cargada en memoria (bytes_cargados >= bytes_totales)
y podemos
comenzar a ver la película. Ejecutamos gotoAndPlay(4)
que nos
llevará hasta al fotograma donde comienza la película.
*/
} else { /* Si aun no hemos cargado toda la película */
porcentaje = ((bytes_cargados/bytes_totales)*100);/* Averiguamos el
porcentaje que llevamos cargado
realizando la división entre los bytes_cargados
y los bytes_totales y multiplicándolo por 100 */
txt_salida.text = Math.floor(porcentaje)+"%"; /* Mostramos en el texto
"txt_salida" el porcentaje
que llevamos junto al símbolo "%",que nos
mostrará el
porcentaje de película que llevamos cargado en
cada instante*/
}








“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
64

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


//-----------------------------------------------------------------------------
/* FOTOGRAMA 3 */
this.gotoAndPlay(2); /* Si llegamos al fotograma 3 es porque no está cargada
toda la película, de lo contrario
estaríamos ya en el fotograma 4. Como aún no está cargada,
volvemos al fotograma anterior
para ver si ya lo está (mediante gotoAndPlay(2);). Esto lo haremos
tantas veces como haga
falta para dar tiempo al ordenador del usuario a ir cargando en
memoria la película. */
RESUMIENDO:
Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la
película. Después pasamos al Fotograma 2.
Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro código
ActionScript averigua los bytes que llevamos cargados en memoria y los
compara con los totales (que se hallaron en el Fotograma 1 y no vuelven a
averiguarse, pues no varían). Si ya está toda la película cargada, vamos al
fotograma 4 y comenzamos a reproducir la película, sino, pasamos al
fotograma 3
Fotograma 3: El Fotograma 3 volverá a mandar la cabeza lectora al
fotograma 2. Haciendo este ciclo, damos tiempo al ordenador a ir cargando
poco a poco la película, hasta que llegue un momento que esté toda cargada
y pasemos al Fotograma 4. El cálculo del porcentaje es un "adorno" que nos
permitimos, pues con un poco más de esfuerzo averiguamos cuánta película
llevamos cargada y la mostramos por pantalla de un modo elegante (en
porcentaje) haciendo la espera del usuario menos aburrida.
Fotograma 4: Aquí comienza la película... (Ya no se volverá nunca a
ninguno de los fotogramas anteriores).
Abajo mostramos el resultado. La película se comenzará a cargar al pulsar el
botón. El código insertado es el que se muestra arriba, no hay NADA MÁS.
Tan sólo se han añadido unos textos y unas imágenes para aumentar el
tamaño de la película, de lo contrario la carga sería demasiado rápida y no
llegaría a verse.
También se ha insertado el texto dinámico que muestra el porcentaje.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
65

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



Si el cargador no llega a verse, lo más probable sea que ya esté cargada en
la memoria caché del ordenador o que estéis viendo este curso desde el
DVD o desde vuestro propio Disco Duro, donde la velocidad de descarga es
tan rápida que sería necesaria una película de varios MBytes para que
hiciera falta un cargador. Podemos encontrar otro ejemplo de cargador en los
videotutoriales del curso.
Proba el código en una película que coloques en un servidor web y podrás
ver los resultados sin problemas.

















“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
66

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



UNIDAD 18
NAVEGACIÓN CON ACTIONSCRIPT

18.1. Introducción
En este tema veremos los puntos más importantes en los que te podrás
apoyar para realizar tus animaciones en Flash usando ActionScript.
Esta unidad, la de Navegación, está especialmente orientada a la web, pues
veremos cómo crear elementos que te ayudarán más tarde a crear tus
propias presentaciones, secciones, etc. Todo ello apoyado con animaciones
y vinculadas entre sí.
A lo largo del tema utilizaremos este ejemplo para ilustrar la teoría de forma
guiada.



“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
67

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


18.2. Los Botones
Uno de los elementos que más nos van a ayudar a la hora de añadir
interactividad en el diseño son los botones.
En el ejemplo nos hemos ayudado de los botones para crear la navegación
entre las diferentes secciones.

Así que el primer paso, después de haber creado la interfaz de la película en
una capa, será crear e insertar los botones en una nueva capa para trabajar
con mayor facilidad.
Para asignarle una acción a un botón es necesario darle un nombre de
instancia. Para ello (y como hemos visto en unidades anteriores) escribimos
el nombre que queramos (al cual nos referiremos más tarde para llamar al
botón) en el Inspector de Propiedades, en este caso lo hemos llamado
equipo.

Luego, creamos otra capa para poder insertar las acciones que necesitarán
nuestros botones, abrimos el Panel Acciones y añadiremos el código que
deberá realizar el botón.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
68

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ésta es la parte más importante pues deberemos decidir a qué evento
responderá el botón. Existen varios eventos que son capturados en Flash,
nombraremos los más importantes (echa un vistazo a la sección
Controladores de evento del panel Fragmentos de código).:
MouseEvent.CLICK: ejecuta la acción al hacer clic con el ratón..
MouseEvent.MOUSE_DOWN: ejecuta la acción al presionarse el
botón.
MouseEvent.MOUSE_UP: ejecuta la acción al soltarse el botón
(después de haberlo presionado).
MouseEvent.MOUSE_OVER: ejecuta la acción al desplazar el
cursor dentro del botón
MouseEvent.MOUSE_OUT: ejecuta la acción al desplazar el cursor
fuera del botón.
Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que
si escribes, por ejemplo, mouse_up no será reconocido.
Para capturar el evento tenemos que añadir un escuchador que se
encargue de estar pendiente de si sucede ese evento, al elemento
correspondiente. En nuestro caso, al botón. Además del evento, debemos de
indicar el nombre de una función, que será el código que se ejecute al
producirse el evento.
Por tanto, si no hemos creado ya esa función, la tenemos que definir, con el
mismo nombre y pasándole como parámetro el evento. Como siempre,
entre las llaves {} introduciremos el código que queremos que ejecute la
función.
?
1
2
3
4
5
6
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

function miFuncion(e:MouseEvent):void
{
//código de la función
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
69

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Puedes ver los todos los eventos de ratón en este ejercicio avanzado.
Los eventos de ratón no sólo afectan a botones, pueden ser
capturados por cualquier objeto de visualización (MovieClips, controles de
formulario, imágenes, etc...).
Ejercicio Avanzado: ActionScript 3. Eventos
de ratón.
Cuando capturamos un evento, lo que realmente estamos utilizando es un
string, una cadena de texto. Por ejemplo al escribir MouseEvent.CLICK,
estamos accediendo a la propiedad CLICK de la clase MouseEvent, que
nos devuelve un string cuyo valor es 'click'.
Por tanto, nos daría lo mismo capturar este ecento utilizando:
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
Que utilizar la cadena equivalente:
miBoton.addEventListener('click', miFuncion);
Únicamente comentamos esto porque puede que a alguien le sea más
cómodo utilizarlo de una forma u otra, o que no se extrañe si en algún
ejemplo lo ve así.
Veamos todos los eventos que produce el ratón. Sólo se producirán cuando
la acción se realice sobre el elemento que tiene el escuchador:
MouseEvent.CLICK ("click") - Se procue al hacer clic (pulsar y
soltar el botón ratón).
MouseEvent.DOUBLE_CLICK ("doubleClick") - Se produce al
hacer doble clic.
MouseEvent.MOUSE_DOWN ("mouseDown") - Se produce al
pulsar el botón del ratón (antes de soltarlo).
MouseEvent.MOUSE_MOVE ("mouseMove") - Se produce cuando
el ratón se mueve sobre el elemento.
MouseEvent.MOUSE_OUT ("mouseOut") - Se produce cuando se
saca el cursor de encima del elemento.
MouseEvent.MOUSE_OVER ("mouseOver") - Se produce cuando
el ratón se coloca sobre el objeto.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
70

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


MouseEvent.MOUSE_UP ("mouseUp") - Se produce cuando se
suelta el botón del ratón.
MouseEvent.MOUSE_WHEEL ("mouseWheel") - Se produce al
presionar la rueda del cursor.
MouseEvent.ROLL_OUT ("rollOut") - Se produce cuando se mueve
el ratón fuera del elemeto.
MouseEvent.ROLL_OVER ("rollOver") - Se produce cuando se
mueve el ratón sobre el elemento.
Por ejemplo, el flash que vemos a continuación tiene el siguiente código que
hace que al producirse un evento, se muestre su nombre:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
texto.addEventListener(MouseEvent.CLICK, funcion);
texto.addEventListener(MouseEvent.DOUBLE_CLICK, funcion);
texto.addEventListener(MouseEvent.MOUSE_DOWN, funcion);
texto.addEventListener(MouseEvent.MOUSE_MOVE, funcion);
texto.addEventListener(MouseEvent.MOUSE_OUT, funcion);
texto.addEventListener(MouseEvent.MOUSE_OVER, funcion);
texto.addEventListener(MouseEvent.MOUSE_UP, funcion);
texto.addEventListener(MouseEvent.MOUSE_WHEEL, funcion);
texto.addEventListener(MouseEvent.ROLL_OUT, funcion);
texto.addEventListener(MouseEvent.ROLL_OVER, funcion);
function funcion (e:MouseEvent):void {
texto.text="\n"+e.type;
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
71

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Antes
Después
Observa que no vemos todos los eventos, porque algunos se producen a la
vez o muy seguidos. Por ejemplo, al abandonar el cuadro de texto se
produce MOUSE_OUT y ROLL_OUT. Como este último se produce
después, es el que aparece en la caja de texto

18.3. Controladores de la línea de tiempo
Una vez insertados los botones y definidos los eventos sobre los que deben
actuar, tendremos que decidir qué queremos que hagan.
De esta forma podremos crear dinamismo entre nuestras secciones.
Imagina que tenemos la siguiente línea de tiempo:

Observa la capa Contenido. En ella se encuentran todo el contenido de las
secciones.
De esta forma, si no aplicásemos ninguna acción sobre la línea de tiempo,
todas las secciones se ejecutarían una seguida de la otra. Lo que
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
72

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


queremos conseguir es que se ejecute la primera (para mostrar la sección
principal) y el cabezal se pare hasta nueva orden (para mostrar la segunda).
Para ello utilizaremos la función stop().
Esta función sirve para parar el cabezal de la línea de tiempo donde sea
colocada. Así que seleccionamos el último fotograma de la sección y abrimos
el Panel Acciones.
Allí deberemos escribir únicamente la línea:
?
1 stop();
Esto hará que cuando la animación llegue a ese punto se detenga a la
espera de nueva orden.
Nosotros hemos colocado las acciones en una capa aparte llamada
Acciones para así poder acceder más rápido a ella. El método es el mismo,
solamente habrá que crear fotogramas claves en aquellos sitios en los que
queramos insertar un stop().

Ya hemos conseguido detener la presentación. Pero, ¿cómo hacemos que
se muestre la segunda? Muy sencillo.
Los botones nos ayudarán a desplazar el cabezal por la línea de tiempo. Así
que modificaremos el código de uno de los botones:
?
1
2
3
4
5
6
7
8
import flash.events.MouseEvent;

encuentranos.addEventListener(MouseEvent.CLICK,botonenc);

function botonenc(event:MouseEvent):void
{
gotoAndPlay("Encuentranos");
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
73

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se
desplazará hasta el fotograma que tiene la etiqueta "Encuentranos" y
reproducirá a partir de allí.
Si añadimos un stop() en el último fotograma de la segunda sección, cuando
éste se reproduzca se parará y el contenido permanecerá estático en espera
de una nueva orden.

Existe otra forma, muy útil, para nombrar los fotogramas. Del mismo modo
que dábamos un nombre de instancia a un botón lo haremos con un
fotograma.
Basta con introducir una Etiqueta de fotograma para poder remitir el
cabezal a éste:



Además de estos controladores podemos utilizar también:
gotoAndStop(fotograma), que situará el cabezal en el fotograma
indicado y parará la reproducción.
play(), que hará que la reproducción prosiga en el fotograma en el
que se encuentre el cabezal.
prevFrame(), que hará que el cabezal retroceda al fotograma
anterior al que nos encontramos.
nextFrame(), que hará que el cabezal avance al fotograma siguiente
al que nos encontramos.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
74

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Existen los controladores prevScene() y nextScene() que hacen avanzar el
cabezal a escenas anteriores o siguientes. Así que veremos qué son las
escenas para poder utilizarlos también.
En el panel Fragmentos de código encontramos algunas funciones que nos
pueden ser de ayuda, en la carpeta Navegación por la línea de tiempo.

18.4. Las Escenas
Flash permite el uso de escenas para separar diferentes temas en una sola
película. Se suelen utilizar sobre todo en animaciones, donde una parte de la
acción transcurre sobre un fondo y la siguiente sobre otro completamente
diferente.
De este modo podemos usar las escenas para representar diferentes
secciones muy diferentes en nuestra película, por ejemplo, crear una escena
para el cargador, otra para la película principal y una tercera para una
sección que se diferencie completamente del resto y nos sea más cómodo
trabajar con ella independientemente.
A pesar del hecho de que las escenas se trabajan como líneas de tiempo
diferentes, al crear el archivo SWF éstas se alinean en orden
reproduciéndose una detrás de otra.
Por ello, al publicar el documento los fotogramas de las escenas se
numerarán respecto a esto. Es decir, si tenemos una primera escena que va
del fotograma 1 al 50, la segunda escena comenzará en el fotograma 51.
Todo esto hace que las escenas, en algunos casos estén desaconsejadas
por las siguientes razones:
El uso de escenas obliga al usuario a descargar el documento en su
totalidad, a pesar de que es posible que no navegue por todas las
secciones. Existe la posibilidad, como veremos más adelante, de
cargar en cualquier momento archivos SWF para reproducirlos en la
pantalla principal. De esta forma emularíamos el uso de las escenas
cargando diferentes documentos dependiendo de la sección a
mostrar.
Cuando añadimos ActionScript a nuestras escenas el resultado
puede ser, a veces, imprevisible. Como hemos explicado
anteriormente, al crearse un archivo con una línea de tiempo
continua las acciones a realizar pueden ser inesperadas.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
75

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


En el Panel Escena (ábrelo desde Ventana → Otros paneles → Escena)
podrás ver las escenas actuales de la película.

En principio solamente encontrarás una (Escena 1), es posible añadir más
escenas pulsando el botón Añadir escena . Para cambiar el nombre de
una escena haz doble clic sobre su nombre en el panel y escribe el que
quieras.
Puedes eliminar una escena utilizando el botón Eliminar escena o
duplicarla con el botón Duplicar escena .
Como hemos comentado antes (y si no existe código ActionScript que
modifique esto) las escenas se reproducen una después de la otra en el
orden en el que se encuentran en el Panel Escena. Puedes cambiar este
orden con solo arrastrar y colocar la escena en cuestión en su lugar
correspondiente.
Trabajar con una escena es muy sencillo, basta con seleccionarla en el panel
y su contenido se mostrará en el Escenario. Podrás trabajar con ella como si
se tratase de una película independiente.
Pero veamos cómo podemos utilizar ActionScript para desplazarnos de
escena a escena.
Antes hemos mencionado las funciones prevScene() y nextScene(). Estos
comandos hacen que el cabezal de reproducción se desplace de una escena
a otra en el orden en el que se encuentran en el Panel Escena.
Pero existe otra posibilidad.
Según el ejemplo que estamos siguiendo creamos una nueva escena
llamada escena_otros. En el botón Otros Restaurantes hemos añadido el
siguiente código:



“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
76

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


?
1
2
3
4
5
6
7
import flash.events.*;
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

function miFuncion(event:MouseEvent):void
{
gotoAndPlay("escena_otros", 1);
}
Con esto estamos indicando que al soltarse el botón el cabezal se desplace
al fotograma 1 de la escena escena_otros y empiece a reproducirse a partir
de allí. Sencillo, ¿verdad?

18.5. Los MovieClips
En el tema de Clips de Película vimos que se tratan de objetos con línea de
tiempo propia.
Podemos utilizarlos para incluir elementos en nuestra película con una
animación independiente. De este modo aunque la película principal esté
detenida el clip seguirá actuando según su propio cabezal de reproducción.
Existen métodos para manejar la línea de tiempo de los clips, idénticas a las
anteriores, y que veremos a continuación.
Lo primero que deberemos aprender es a acceder a las propiedades y
métodos de los objetos. Esto es un recurso muy utilizado pero a la vez es
muy sencillo. Lo veremos con un ejemplo.
Queremos que al pulsar un botón el movieclip avance en su línea de tiempo
hasta su fotograma 20.
Fíjate en cómo hemos escrito la función. Primero hemos señalado el clip
sobre el que queremos actuar escribiendo su nombre de instancia:

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
77

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Y después de añadir un punto hemos indicado la función que se ejecutará.
?
1
2
3
4
5
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

function miFuncion(event:MouseEvent):void {
miClip.gotoAndPlay(20);
}
De esta forma (y como hemos visto en temas anteriores) podemos acceder a
todas las propiedades del clip. Escribiendo esta línea haremos que el clip se
haga invisible:
?
1
2
3
4
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);<P></P>
function miFuncion(event:MouseEvent):void {
miClip.visible = false;
}
Para hacerlo un poco más complicado podríamos encontrarnos en el
siguiente supuesto. Imagina que tenemos un movieclip llamado clipPadre.
Dentro de este clip de película tendremos más símbolos y uno de ellos puede
ser otro movieclip llamado clipHijo.
¿Cómo accedemos a las propiedades y funciones de clipHijo? Muy fácil.
Suponiendo que estamos trabajando desde la película principal donde
tenemos insertado el clipPadre, escribiremos lo siguiente:
Así haremos que la reproducción de clipHijo se reanude.
?
1 clipPadre.clipHijo.play();

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
78

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Pero, ¿qué pasa si queremos ejecutar la orden desde dentro de clipPadre?
Imagina que dentro del movieclip hay un botón y el clip clipHijo. Queremos
que al pulsar el botón se reproduzca el fotograma 20 de clipHijo, entonces
deberíamos escribir lo siguiente en las acciones del botón:
?
1
2
3
4
5
6
7
8
import flash.events.*;

miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(event:MouseEvent):void
{
clipHijo.gotoAndPlay(20);
}
Como puedes ver esta vez no hemos mencionado a clipPadre en la línea de
código. No es necesario porque ya nos encontramos dentro de él.
También podemos referenciarnos a elementos superiores utilizando la
propiedad parent. De este modo si nos encontrásemos dentro de clipHijo y
quisiésemos avanzar al fotograma 20 de clipPadre podríamos escribir:
?
1
2
3
with (parent) {
this.parent.gotoAndPlay(20);
}
Donde this indica el clip donde nos encontramos y parent hace que nos
coloquemos en el nivel inmediatamente superior.
De esta forma, sólo deberemos escribir la ruta de contenedores o padres
hasta llegar al objeto del cual queremos modificar o ejecutar un
método.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
79

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Podemos hacer que el elemento padre escuche eventos producidos
dentro del hijo, con lo que denominamos propagación en burbuja.
Puedes ver cómo en este ejercicio avanzado.
Ejercicio Avanzado: ActionScript 3 - Eventos
de hijo a padre
Crear nuestros propios eventos
A parte de los eventos que tiene Flash, podemos producir los nuestros
propios. Basta con utilizar el siguiente código:
?
1 objeto.dispatchEvent(new Event("miNombreDeEvento"));
El método dispatchEvent es el que hace que se produzca el evento indicado
como parámetro. Podemos pasarle un evento existente, o crear uno propio
utilizando new Event indicando el nombre que le queramos dar.
En el ejemplo anterior, podemos capturar el evento como hemos visto hasta
ahora:
?
1 this.addEventListener("miNombreDeEvento", miFuncion);
Propagación de eventos
Al crear un evento, podemos añadir un parámetro booleano más, la
propagación. En resumen, cuando hay propagación el evento se propaga
fuera del MovieClip hacia los elementos padres, permitiendo así que estos
puedan escuchar ese evento.
Por ejemplo, podemos lanzar un evento personalizado con propagación así:
?
1 objeto.dispatchEvent(new Event("miNombreDeEvento", true));
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
80

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Esto resulta muy útil. Imaginemos que tenemos un MovieClip con varios
botones, destinado a ser utilizado dentro de otro MovieClip para navegar por
él. Podríamos introducir el código directamente utilizando parent, pero sólo
nos serviría para una acción específica. ¿Pero y si queremos utilizar el
mismo archivo en otros proyectos?
Con lo que hemos visto, bastaría con poner el siguiente código en cada
botón:
?
1
2
3
4
5
6
botonAvanzar.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(event:MouseEvent):void
{
dispatchEvent(new Event("botonAvanzarPulsado", true));
}
Luego, en la película padre, bastaría con capturar el evento
botonAvanzarPulsado como hemos visto hasta ahora, y dar la
funcionalidad que queramos al botón.
Por ejemplo, esto es lo que hemos hecho en las páginas del periódico digital,
ejercicio propuesto que encontrarás al final del tema.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
81

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



Por lo demás, el funcionamiento de un clip no se diferencia en nada a la línea
de tiempo de cualquier otra película. Podemos etiquetar los fotogramas de
igual modo para llamarlos directamente por su nombre:
?
1 miClip.gotoAndStop("etiqueta");
Y saltar de fotograma a fotograma para manejar las animaciones de la forma
en que nosotros queramos.
Igual que vimos antes con los botones, los movieclips tienen manejadores de
eventos que nos permitirán ejecutar código dependiendo de los eventos que
se produzcan sobre ellos.
Responden a los a todos los eventos de ratón que ya hemos visto, y
cualquier evento que comparta con el resto de objetos de visualización
(DisplayObject). Vamos a ver los eventos específicos del MovieClip:
Event.ADDED ("added") - Se produce cuando el movieclip se añade
a la lista de visualización de un contenedor
(contenedor.addChild(miClip)).
Event.ENTER_FRAME ("enterFrame") - Se produce cuando la
cabeza lectora entra en un fotograma, pero también se produce
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
82

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


constantemente si sólo hay un fotograma o si la reproducción está
parada. En este caso, depende de la velocidad del MovieClip. Por
ejemplo, un MovieClip que se reproduce a 24 FPS produce este
evento 24 veces por segundo. Recuerda este evento porque es muy
útil.
Event.EXIT_FRAME ("exitFrame") - Igual que el anterior, pero se
produce al salir del fotograma.
Event.REMOVED ("removed") - Se produce cuando el MovieClip se
quita de la lista de visualización de un contenedor
(contenedor.removeChild(miClip)).
Veamos un ejemplo

Si observas tenemos dos movieclips en la película, uno de ellos llamado
estrella, y el otro detalle. La línea de tiempo de estos movieclips tendría este
aspecto:
Como puedes ver tenemos una cuarta capa que se llama acciones. Allí
colocaremos las acciones que se asociarán a este fotograma:
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
83

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


?
1
2
3
4
5
6
estrella.addEventListener(MouseEvent.CLICK,funcion_desaparece);

function funcion_desaparece(event:MouseEvent):void {
estrella.gotoAndPlay("desaparece");
detalle.gotoAndPlay("aparece");
}
Este código hará que cuando se presione el clip estrella se desplacen los
cabezales en los clips detalle y estrella a las etiquetas de fotogramas que se
indican.
Para hacer desaparecer el clip detalle incluiremos el siguiente fragmento de
código:
Esto hará algo parecido a lo anterior, cuando se presione el clip detalle los
cabezales de ambas películas se desplazarán a las respectivas etiquetas de
fotograma.
?
1
2
3
4
5
6
detalle.addEventListener(MouseEvent.CLICK,funcion_aparece);

function funcion_aparece(event:MouseEvent):void {
estrella.gotoAndPlay("aparece");
detalle.gotoAndPlay("desaparece




“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
84

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


18.6. Las variables
Las variables son contenedores donde podremos almacenar información
para trabajar con ella. Esta información puede ser modificada y leída.
Aunque parece un concepto muy complejo su uso es bastante sencillo.
En ActionScript existen muchos tipos diferentes de variables, de hecho en
una variable podemos guardar cualquier tipo de objeto. Vamos a ver ahora
los más comunes, los que emplearemos para guardar texto, números o
valores booleanos (verdadero - falso):
Boolean: o booleano, puede almacenar sólo dos valores, o true
(verdadero) o false (falso).
Number: puede almacenar números enteros o decimales, positivos o
negativos. El signo decimal en ActionScript es el punto (.). Podrás
realizar operaciones matemáticas con estas variables.
String: puede almacenar cadenas de caracteres, es decir, un
conjunto de caracteres alfanuméricos. Las variables de tipo String
deben ir entre comillas dobles ("cadena") o ('cadena').
Array: en los arrays o matrices podemos almacenar distintos valores
en distintas posiciones. A estas posiciones accedemos con un índice
numérico (utilizando 0 para la primera posición) que indicamos entre
corchetes tras el nombre del array (nombreArray[3]=valor;). Puedes
ver un ejemplo práctico de los arrays en este ejercicio básico.

Antes de utilizar una variable, tenemos que declararla. Para declarar (crear)
una variable sólo tendrás que escribir la siguiente línea:
?
1 var nombreVariable:tipoVariable = valorVariable;
Veamos el ejemplo para verlo más claro. Haremos que el clic sobre el
movieclip estrella sólo se ejecute si el detalle no está aún mostrado.
Y al revés. Que sólo se ejecute el código al hacer clic en el detalle si éste se
encuentra fuera.
Fíjate en la primera líneas, se declaran la variable booleana, que dice si la
estrella se encuentra activada.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
85

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var estrella_activada:Boolean = true;

estrella.addEventListener(MouseEvent.CLICK,funcion_desaparece);

function funcion_desaparece(event:MouseEvent):void {
if (estrella_activada==true) {
estrella.gotoAndPlay("desaparece");
detalle.gotoAndPlay("aparece");
estrella_activada=false;
}
}

detalle.addEventListener(MouseEvent.CLICK, funcion_aparece);

function funcion_aparece(event:MouseEvent):void {
if (estrella_activada==false) {
estrella.gotoAndPlay("aparece");
detalle.gotoAndPlay("desaparece");
estrella_activada=true;
}
}
Al hacer clic en el movieclip estrella se evalúa la variable estrella_activada
si ésta es verdadera (true) entonces permite que se realicen las acciones. En
caso contrario, sale de la condición.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
86

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Al entrar en la condición se desplazan los cabezales y se modifica el valor de
la variable a falso para que la próxima vez que intente entrar no puedan
ejecutarse las acciones.
En el click del clip detalle se evalúa de nuevo la variable. Esta vez debería
estar en false porque si el detalle está fuera es porque ya se ha hecho clic
sobre la estrella y ha pasado por el anterior bloque.
A medida que vayamos avanzando iremos usando otras variables de
diferentes tipos. Verás que su uso no difiere mucho al que hemos explicado
ahora.
Antes de terminar con este tema deberíamos ver algo muy importante: el
ámbito de las variables.
Esto es, el sitio donde puedan utilizarse las variables.
Nota: Para explicar el ámbito de las variables utilizaremos la función
trace(variable); que envía el contenido de la variable al Panel Salida, lo que
nos permitirá ver el valor que va tomando. Puedes abrir este panel desde
Ventana → Salida.











“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
87

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicio Básico: ActionScript 3. Arrays
Crear un array
Como siempre, comenzamos declarando el array, con la sintaxis var
miArray:Array. Después podemos asignarle los valores de varias formas:
//Asignando el valor a cada posición
var miMatriz1:Array = new Array();
miMatriz1[0] = "Lunes";
miMatriz1[1] = "Martes";
miMatriz1[2] = "Miércoles";
miMatriz1[3] = "Jueves";
miMatriz1[4] = "Viernes";
miMatriz1[5] = "Sábado";
miMatriz1[6] = "Domingo";

//O asignándolos todos a la vez
var miMatriz2:Array = new
Array("Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domin
go");

var miMatriz3:Array =
["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];
En cualquiera de los casos anteriores obtenemos un array de 7 posiciones
con los días de la semana.


Recorrer un array
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
88

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Una forma cómoda de recorrre una Array es con un bucle for, como en el
siguiente ejemplo:
var miMatriz:Array = ["Lunes","Martes","Miércoles",
"Jueves","Viernes","Sábado","Domingo"];
for (var i:Number = 0; i < miMatriz.length(); i++) {
trace(miMatriz[i]);
}
Lo que hacemos es declarar una variable i que hará de contador.
El array es un objeto con métodos. En este caso, el método length nos
devuelve el número de elementos del array. Ten el cuenta que el primer
elemento del array es el elemento 0. Por tanto, para un array de 2 elementos,
debemos recorrer las posiciones 0 y 1. Por eso, iniciamos el contador en 0,
y repetimos el bucle mientras el contador sea menor que el número de
elementos.
Como resultado, el se mostrará una vez cada elemento en el panel de salida.
Existen 2 ámbitos de variables: el local y el de línea de tiempo.
Las variables declaradas en la línea de tiempo pueden utilizarse en
cualquier fotograma posterior y su contenido se mantendrá intacto.
Por ejemplo, declaramos la siguiente variable en el fotograma 1:
?
1 var miVariable:String = "Esta es mi variable";
Y en el fotograma 15 colocamos las siguientes líneas en el Panel Acciones:
?
1
2
trace(miVariable);
stop();
Verás como al probar la película en el Panel de Salida aparece escrito el
Esta es mi variable, que es el texto que le hemos dado.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
89

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ten en cuenta que si declaras la variable en el fotograma 2 no estará
disponible en fotogramas anteriores, es decir en el 1.
Las variables declaradas en un ámbito local sirven sólo para un bloque de
función. Veamos este ejemplo:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var miVariable:String = "Esta es mi variable";
var miVariable2:String = "Esta también lo es";

function miFuncion() {
var miVariable:Number = 1;
trace(miVariable);
trace(miVariable2);
miVariable2 = "La cambio";
var otraVariable:Number = 10;
trace(otraVariable);
}

miFuncion();

trace(miVariable);
trace(miVariable2);
trace(otraVariable);
Antes de la función, en la línea de tiempo definimos dos variables miVariable
y miVariable2.
Después definimos una funcióndefinimos una función (hablaremos de ellas
más a fondo en el siguiente apartado).
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
90

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


En esta función se declara una variable (miVariable). Tiene el mismo
nombre que la variable de la línea de tiempo, pero no es la misma variable,
es local a la función. Si la enviamos al Panel Salida comprobaremos que
muestra el valor asignado dentro de la función (1). En cambio, si dentro de la
función mostramos el contenido de miVariable2, definida en la línea de
tiempo veremos Esta también lo es que es su valor inicial, ya que no la
hemos reemplazado por otra local que se llame igual. Lo modificamos. Por
último, hemos declarado y mostrado una última variable local (otraVariable)
con valor 10.
Recuerda que la función no se ejecutará hasta que no la llamemos, y es lo
que hacemos en la siguiente línea después de definirla.
A continuación, en la línea de tiempo mostramos el contenido de miVariable,
y comprobamos que muestra el valor inicial Esta es mi variable. La función
no la ha alterado, ya que aunque compartían nombre, eran dos variables
distintas.
En cambio al mostrar el valor de miVariable2 comprobamos que si que ha
cambiado, mostrando La cambio. Como esta variable no es local a la
función, si la alteramos si que cambia.
Por último mostramos el contenido de otraVariable. Como esta había sido
definida dentro de la función, es una variable local, por lo que fuera de la
función no existe, no está definida, por lo que muestra UNDEFINED.

Por tanto, las variables declaradas dentro de la función son locales, y
sólo existen dentro de ésa función. Si dentro de una función queremos
emplear una variable definida en la línea de tiempo, no debemos de definir
una variable local con el mismo nombre.

Las variables de ámbito global serían aquellas accesibles indistintamente
desde cualquier parte del proyecto, desde distintos MovieClips. En
ActionScript 3 ya no se permite el uso de este tipo de variables, que en la
versión anterior se hacía precediendo el nombre de la variable con _global..
No obstante, podemos simular variables globales creando una clase, como
se explica en este ejercicio avanzado.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
91

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicio Avanzado: ActionScript 3 - Crear
una clase para variables globales
Una variable global es aquella a la que podemos acceder desde cualquier
parte del proyecto.
En ActionScript 2 podíamos crear una variable global de la siguiente manera:
?
1
2
//Código ActionScript 2
_global.miVariable = "Esta es una variable global";
Esto ya no es válido en ActionScript 3. Pero en su lugar podemos crear una
clase y guardar en ella estas variables.
La clase la escribimos en un archivo .as (Archivo → Nuevo → Archivo de
ActionScript).
Aunque no es obligatorio, lo habitual es crear un patrón de diseño Singleton.
No vamos a detallar qué es. A grandes rasgos, es una forma de escribir una
clase de manera que no se creen objetos distintos, y se utilice una instancia
única. Recordemos que si tenemos varios objetos, cada uno puede asignar
valores distintos a sus variables.
Singleton
El patrón de diseño singleton (instancia única) está diseñado para restringir
la creación de objetos pertenecientes a una clase o el valor de un tipo a un
único objeto.
Su intención consiste en garantizar que una clase sólo tenga una instancia y
proporcionar un punto de acceso global a ella.
El patrón singleton se implementa creando en nuestra clase un método que
crea una instancia del objeto sólo si todavía no existe alguna. Para asegurar
que la clase no puede ser instanciada nuevamente se regula el alcance del
constructor (con atributos como protegido o privado).

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
92

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


La instrumentación del patrón puede ser delicada en programas con
múltiples hilos de ejecución. Si dos hilos de ejecución intentan crear la
instancia al mismo tiempo y esta no existe todavía, sólo uno de ellos debe
lograr crear el objeto. La solución clásica para este problema es utilizar
exclusión mutua en el método de creación de la clase que implementa el
patrón.
Las situaciones más habituales de aplicación de este patrón son aquellas en
las que dicha clase controla el acceso a un recurso físico único (como puede
ser el ratón o un archivo abierto en modo exclusivo) o cuando cierto tipo de
datos debe estar disponible para todos los demás objetos de la aplicación.
Su estrucura en el archivo as (al que llamaremos variablesGlobales.as, el
mismo nombre que daremos a la clase)sería la siguiente:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package {
public class variablesGlobales {
// Aquí declaramos nuestras variables
public var miVariableTexto:String = "Hola";
public var miVariableNumero:Number = 100;
///

private static var instancia:variablesGlobales;
public function variablesGlobales() {
}
public static function variables():variablesGlobales {
if (!instancia) {
instancia = new variablesGlobales();
}
return instancia;
}
}
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
93

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Es importante declarar nuestras variables como public var para que puedan
ser accedidas desde fuera.
Guardamos el archivo en la misma carpeta en la que estamos trabajando.
Ahora podemos acceder a enuestras variables con la siguiente sintaxis:
?
1 variablesGlobales.variables().nombreVariable
Por ejemplo:
?
1
2
trace(variablesGlobales.variables().miVariableTexto);
variablesGlobales.variables().miVariableNumero = 5;
Nota: en vez de variablesGlobales podemos emplear el nombre que
queramos, cambiándolo en todos los sitios donde corresponda. De igual
manera, podemos cambiar el nombre del método con el que accedemos a
las variables (variables()). Lo habitual es llamarlo getInstance() porque lo
que realmente hace es devolver la instancia única del objeto.
18.7. Las funciones
Como habrás visto en los ejemplos anteriores, una función es un bloque de
código que podemos utilizar en cualquier parte del archivo, siempre
que haya sido definida en el mismo o en un fotograma anterior. Si
definimos una función dentro de otra tendrá un ámbito local, como ocurría
con las variables.
Como ya hemos visto, las funciones se definen con la palabra function. El
ejemplo sencillo sería:
?
1
2
3
function saludar() {
trace('Hola');
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
94

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Lo único que hace es mostrar Hola en el panel de salida.
Para que se ejecute la función, debemos de llamarla en alguna parte del
código:
?
1 saludar();
Parámetros o argumentos
Como ves, crear funciones es bastante sencillo. Además podemos crear
funciones un poco más complejas enviándole parámetros:
?
1
2
3
function saludar(nombre:String) {
trace('Hola '+nombre);
}
Observa que en el parámetro hemos indicado el tipo de dato que será, es
este caso del tipo String.
Ahora para llamarla usaríamos por ejemplo:
?
1 saludar("Bruno"); //Escribiría: Hola Bruno
Podemos enviar varios parámetros separados por comas. Si al parámetro le
damos un valor, este se convertirá en un parámetro opcional, y podemos
enviarlo al llamar a la función o no. Por ejemplo:
?
1
2
3
function saludar(nombre:String, pregunta:String='¿qué tal?') {
trace('Hola '+nombre+' '+pregunta);
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
95

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ahora podemos llamarla de dos formas: enviando todos los parámetros, o no
enviando los parámetros opcionales, por lo que tomará el valor por defecto:
?
1
2
saludar("Bruno"); //Escribiría: Hola Bruno ¿qué tal?
saludar("Bruno", "¿cómo va?"); //Escribiría: Hola Bruno ¿cómo va?
Habrás observado que cuando creábamos una función para tratar un evento
siempre recogemos un parámetro:
?
1
2
3
4
5
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(e:MouseEvent):void {
gotoAndPlay(1);
}
El parámetro que recogemos es el evento. Cada evento tiene unos métodos
que podemos emplear si definimos su tipo. En el ejemplo anterior,
declaramos el parámetro e que era del tipo MouseEvent. En las funciones
activadas por eventos siempre debemos de recoger ese parámetro,
aunque si no lo pensamos usar no es necesario especificar su tipo.
Una propiedad muy útil es event.target (en el ejemplo anterior se usaría
e.event.target) que nos indica el objeto que ha producido el evento.
Esto nos permite utilizar la misma función para varios objetos, pero que la
función sólo modifique propiedades del elemento que la llama en cada
momento.
Devolver valores.
En vez de que la función realice una acción, también podemos utilizarla para
que devuelva valores u objetos. Por ejemplo:


“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
96

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


?
1
2
3
function saludar(nombre:String):String {
return 'Hola '+nombre;
}
Observa que hemos indicado detrás de la función el tipo de valor a devolver
(en este caso devolverá un String), tal como hacíamos con las variables.
En muchos ejemplos habrás visto que el tipo indicado es :void. Esto no es
un tipo de datos, sino todo lo contrario. :void indica que esa función no
devuelve ningún valor.
El valor que devuelve es lo indicado la instrucción return.
En el ejemplo anterior la función no realiza ninguna acción, sólo devuelve un
valor:
?
1
2
3
4
saludar("amigo"); //No haría nada
trace(saludar("amigo")); //Mostraría en salida: Hola amigo
var saludo:String = saludar("amigo"); //Guarda en la variable saludo
//Lo que devuelve la función

18.8. Contenedores y listas de visualización
Con respecto a los elementos que vemos en nuestra película con
ActionScript 3, tenemos que tener claros un par de conceptos:
Los objetos que vemos son llamados objetos visibles o de
visualización, y todos pertenecen a la calse DisplayObject o a una
subclase heredada de esta. Siempre han de estar dentro de un
contenedor para que se vean.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
97

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Los objetos están agrupados dentro de un contenedor, que hace de
elemento padre. A su vez, dentro de un contenedor podemos tener
otros contenedores con sus respectivos elementos. Los
contenedores pertenecen a la clase DisplayObjectContainer, y
aunque pueda parecer lioso, a su vez un contenedor es un objeto de
visualización, y se puede tratar como tal.
La lista de visualización es cómo están ordenados los objetos
dentro del contenedor, y establece el orden de apilamiento de los
objetos.
Los Contenedores:
En nuestra película podemos tener cuatro tipos de contenedores:
La escena (stage). Es el contenedor general de nuestra película.
Todo lo que se ve, está dentro de la escena.
Loader. Nos permite cargar un archivo externo en él. Lo veremos en
el siguiente apartado.
MovieClip. Aunque normalmente no lo tratamos como tal, un
MovieClip contiene un archivo SWF con una línea de tiempo propia.
Por ejemplo, dentro de él podemos acceder a los distintos símbolos
que lo forman.
Sprite. Es como una carpeta, a la que podemos ir añadiendo y
quitando objetos. Podemos crear tantos sprites como queramos.
El que más utilizaremos como contenedor será el Sprite, aunque en muchos
casos lo hagamos directamente sobre la escena.
Declararemos un Sprite como cualquier objeto:
?
1 var miContenedor:Sprite = new Sprite;
Ahora tenemos un contenedor, pero vacío. Podemos añadirle elementos que
pasaran a ser elementos hijos del contenedor. Para ello podemos utilizar
uno de los métodos de los contenedores:
?
1
2
miContenedor.addChild(miObjeto1);
miContenedor.addChild(miObjeto2);
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
98

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ahora tenemos el contenedor con dos objetos. Pero aún no se ven, porque
no hemos añadido el contenedor al elemento principal, a la escena.
Vamos a hacerlo:
?
1 addChild(miContenedor);
Ahora ya vemos el contenedor. Bueno, realmente no vemos el contenedor,
vemos los elementos de visualización que contiene.
Nuestro contenedor tiene una lista de visualización con dos elementos.

Listas de visualización:
Los elementos añadidos a un contenedor forman su lista de
visualización. La posición dentro de esta lista establece el orden de
apilamiento. Es decir, los objetos con un índice menor se verán por debajo
de los elementos con un índice mayor.
Vamos a ver cómo accedemos y tratamos estos elementos con los métodos
y propiedades de DisplayObjectContainer.
numChildren - Esta propiedad nos devuelve el número de
elementos de la lista. En el ejemplo anterior,
miContenedor.numChildren devuelve 2.
getChildIndex(objeto) - Nos permite conocer el índice de un
elemento.
addChild(objeto) - Añade el elemento al final de la lista, encima del
resto.
addChildAt(objeto, índice) - Añade un elemento y nos permite
indicar en qué posición colocarlo. Por ejemplo, si tenemos el la lista
el objeto3, y queremos añadir el objeto7 justo antes que este para
que quede debajo, podemos emplear:
addChildAt(objeto7, getChildIndex(objeto3));
para saber el índice del objeto3 y colocar ahí el objeto7, desplazando
el resto hacia el final.
setChildIndex(objeto, indice) - Nos permite cambiar el orden de un
objeto dentro de la lista.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
99

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


getChildByName(nombre_instancia) - Nos permite obtener un
objeto conociendo su nombre de instancia.
getChildAt(índice) - Nos permite obtener un objeto conociendo su
índice.
contains(objeto) - Devuelve verdadero si el objeto ya está en la lista.
removeChild(objeto) - Quita el objeto indicado de la lista.
removeChildAt(objeto) - Quita de la lista el objeto con el índice
indicado.
Nota: Antes de quitar un objeto de la lista, es recomendable borrar sus
eventos si los tiene, ya que esto puede producir errores. Además, si no los
quitamos, el objeto sigue ocupando memoria. Para borrar un evento,
utilizamos el método removeEventListener, con los mismos parámetros que
empleamos en addEventListener. Por ejemplo:
?
1 objeto.removeEventListener(Event.ENTER_FRAME, miFuncion);

18.9. Cargando archivos
Ahora veremos como modificar el contenido de un clip de película y
cargar en él otro archivo SWF o incluso una imagen con formato JPG,
GIF o PNG.
Vamos al ejemplo. En la sección Encuéntranos hacemos clic en un botón de
tipo texto y nos aparece el mapa donde localizar el restaurante:

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
100

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


El código que hemos insertado es el siguiente:

?
1
2
3
4
5
6
7
8
9
10
carga.addEventListener(MouseEvent.CLICK, abrir);

function abrir (e:Event): void{
var miCargador:Loader = new Loader();
miCargador.load(new URLRequest("mapa.swf"));
miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE, insertMovie);
function insertMovie(evt:Event):void{
addChild(miCargador);
}
}
Vemos que empleamos un contenedor Loader para cargar el archivo, al que
le indicamos el archivo a cargar en su método load.
var miCargador:Loader = new Loader();
miCargador.load(new URLRequest("mapa.swf"));
Una vez cargado, lo añadimos a un contenedor o directamente a la escena,
como en el ejemplo, para que se visualice.
addChild(miCargador);
Pero esto no lo hemos hecho directamente, sino que lo hemos hecho en el
siguiente evento:
miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE,
insertMovie);
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
101

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


¿Por qué? Porque este evento se produce cuando el archivo está
completamente cargado. Esto evita que intentemos mostrar un objeto que
aún no se ha cargado del todo.
Utilizaremos un nuevo cargador si queremos añadir otro archivo. Por
ejemplo, si queremos ir mostrando imágenes en la misma posición, cada vez
que queramos cambiar la imagen sólo habrá que volver llamar al método
load(), que reemplazará el contenido actual del cargador por la nueva
imagen.
Sigue el siguiente ejercicio paso a paso para ver cómo Crear una película
cargando archivos

El uso de estas funciones es bastante sencillo y te ayudarán mucho en la
eficiencia de tus películas. Ten en cuenta lo que decíamos antes de las
escenas.
Así, cargaremos partes de la película sólo si el usuario accede a ellas.











“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
102

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicio: Crear una película cargando
archivos
Objetivo.
Crearemos una película parecida a esta:

Ejercicio paso a paso.
Como siempre, utilizaremos el tipo de documento ActionScript 3.0.
Vamos a crear el elemento con forma de estrella. Para el resto, seguiremos
los mismos pasos:
1. Haz clic en el botón Nuevo Símbolo al pie de la Biblioteca.
2. Dale un nombre, en nuestro ejemplo estrella, y selecciona Clip de
película.
3. Dibuja la forma que quieras mostrar en el escenario.
4. Con ayuda del panel Alinear (Ctrl + K) coloca la forma centrada con
respecto al punto de referencia (mira el ejemplo).
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
103

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



5. Haz clic en Escena 1 en la línea de tiempo para volver a la película
principal.
6. Arrastra el símbolo que acabamos de crear y añádelo al Escenario.
7. Dale un nombre de instancia significativo al cual nos referiremos más
tarde, en nuestro ejemplo hemos usado estrella.
8. Crea una nueva capa y añade la siguiente línea en el Panel Acciones
para el fotograma 1 de la película principal:

?
1
2
3
4
5
6
7
8
9
estrella.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
function arrastrar(event):void { //Nombre de la nuestra función
estrella.startDrag(); //Nombre del símbolo
}

estrella.addEventListener(MouseEvent.MOUSE_UP,soltar);
function soltar(event):void { //Nombre de la nuestra función
estrella.stopDrag(); //Nombre del símbolo
}
Este código hace que al pulsar el ratón, se comience a arrastrar el
elemento, y al soltarlo deje de hacerlo.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
104

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


9. Guarda el documento con el nombre estrella, publica la película
desde Archivo → Publicar, y ciérralo.
10. Repite estos pasos para cada una de las formas que quieras
añadir.
Ahora pasaremos a crear la película principal.
1. Abre un documento en blanco.
2. Dibuja un rectángulo y dale las dimensiones del documento utilizando
el botón del Panel Alinear. Puedes hacer que tome un mapa de
bits como fondo seleccionando Mapa de bits en el desplegable Tipo
del Panel Color.
3. Ahora añadiremos los botones que utilizaremos. Nosotros hemos
importado la biblioteca de los elementos anteriores para utilizar las
mismas formas. Para ello haz clic en Archivo → Importar → Abrir
biblioteca externa.
4. Seleccionar los archivos que quieras abrir y arrastra el símbolo al
Escenario. En nuestro caso, comenzamos por estrella.fla.
5. Redimensiónalo con la herramienta Transformación Libre .
6. En el panel de Propiedades, le damos el nombre a la instancia. En
nuestro ejemplo la hemos llamado btn_mostrarEstrella por ser el
botón que mostrará la estrella.
7. También en el panel propiedades, especificamos el tipo Botón. Lo
hacemos únicamente para que el cursor cambie a la mano al pasar
sobre él.

8. Arrastra otro símbolo y colócalo al pie del Escenario (este será el
que hará que rote el elemento).
9. Redimensiónalo si lo crees necesario, dale un nombre de instancia y
conviértelo a botón. Nosotros lo hemos llamado btn_rotarEstrella.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
105

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


10. Repite estos pasos para cada una de las formas que hayas creado,
utilizando los nombres de instancia apropiados.
11. Una vez ya estén todos los botones en el Escenario pasaremos a
escribir el código asociado. Para ver cómo hacerlo, vamos a cargarlo
los archivos publicados (swf) desde el código.
12. Crea una nueva capa pulsando el botón Insertar Capa .
13. En el fotograma 1 de la nueva capa escribe lo siguiente en el Panel
Acciones, que afectará al símbolo estrella:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var estrella:Loader = new Loader();//Utilizamos un Loader para cargar archivos
estrella.load(new URLRequest("estrella.swf"));//Indicamos la ruta del archivo
var estrellaMC:MovieClip; //Un objeto MovieClip que será la estrella
estrella.contentLoaderInfo.addEventListener(Event.COMPLETE, insertarEstrella);
//Utilizamos este evento para asegurarnos de que se ha cargado completamente
//antes de agregarlo a la escena
function insertarEstrella(e:Event):void {
estrellaMC = e.target.content; //Almacenamos el elemento que produce el evento
//en nuestro movie clip
estrellaMC.visible = false; //Lo ocultamos para que no se vea por defecto
estrellaMC.x=100;
estrellaMC.y=80; //Le damos la posición inicial que queramos
addChild(estrellaMC) as MovieClip;//Añadimos el archivo cargado a la escena
//Aún no se verá porque visible=false
}

btn_mostrarEstrella.addEventListener(MouseEvent.MOUSE_UP, mostrarOcultarEstrella);
//Detectamos cuando se pulsa el botón para mostrar/ocultar el elemento
function mostrarOcultarEstrella(e:Event):void {
estrellaMC.visible=! estrellaMC.visible;
//Al negar una propiedad booleana como ésta, la invertimos.
//por lo que cada al pulsar el botón se mostrará si está oculta o
//o se ocultará si está visible
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
106

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


14. Guarda el proyecto y pruébalo (Control → Probar película)
para ver que funciona.
15. Ahora escribiremos el código necesario para que al pulsar el
otro botón (btn_rotarEstrella) el elemento gire:
?
1
2
3
4
5
6
7
8
btn_rotarEstrella.addEventListener(MouseEvent.CLICK, girarEstrella);
function girarEstrella(event):void {
//Para que gire, aumentamos la propiedad rotation
estrellaMC.getChildAt(0).rotation+=15;
//Utilizamos getChildAt porque en nuestro caso no queremos que rote todo
//el SWF, sólo el elemento que pusimos dentro como un símbolo, que al ser
//el único hijo, está en la posición 0
}
Como puedes ver, utilizamos la propiedad rotation, para
referenciarnos al objeto en cuestión sólo es necesario escribir
delante de la propiedad la variable que lo contiene. Definimos la
función que al hacer clic girará nuestro objeto.
16. Repite estos pasos para cada uno de los botones. Recuerda
escribir bien los nombres de instancia y los nombre de funciones.
17. Una vez terminado prueba la película desde Control → Probar
película






“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
107

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


18.10. Cargando información
En este apartado veremos cómo utilizar un cargador para recoger
información de un archivo y mostrarla en una película Flash.
Nos basaremos en el siguiente ejemplo:

Si quieres hacer este ejemplo, encontrarás los archivos necesarios en la
carpeta ejercicios/presentacion.
Observa la línea de tiempo:

En la capa de acciones escribiremos todo el código para que funcione la
película. La capa diapositivas contiene el efecto que hace que la imagen se
desvanezca para volver a aparecer.
Ahora explicaremos cómo lo hemos hecho.
Antes que nada añadimos un stop() en el primer fotograma para detener la
acción y reanudarla más tarde con cuando pulsemos el botón.
Igualmente hemos añadido un stop() en el fotograma 11, el último. Para que
se detenga la transición y espere a que se pulse de nuevo el botón.
La transición es muy sencilla. En la capa diapositivas hemos añadido un clip
de película llamado contenedorImagen del tamaño de la película, que será
donde carguemos las imágenes, y hemos incluido dos interpolaciones de
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
108

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


movimiento. En el fotograma 6 bajaremos la propiedad Alfa al 0% en el
Panel Propiedades. Así conseguiremos el efecto de la transición.
Ahora que conocemos el funcionamiento veamos el código que hemos
añadido en el fotograma 1.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// FOTOGRAMA 1
stop();

var total:Number=4;
var imagenActual:Number=0;
//Utilizamos un objeto Loader para cargar las imágenes
var cargadorImagen = new Loader();
contenedorImagen.addChild(cargadorImagen);


//Para cargar datos (texto), emplearemos un objeto URLLoader
var cargadorTexto:URLLoader = new URLLoader();
//Indicamos el formato de los datos que leerá
cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;
//Y la ubicación del archivo
var archivoTexto:URLRequest = new URLRequest("diapositivas.txt");
//Y el método que lo carga
cargadorTexto.load(archivoTexto);
//Y lo configuramos para que cuando se complete la carga,
//avance al fotograma 6
cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);
function textoCargado(event:Event):void
{
gotoAndPlay(6);
}

btnSiguiente.addEventListener(MouseEvent.CLICK, irSiguiente);
function irSiguiente(event:MouseEvent):void
{
gotoAndPlay(2);
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
109

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Las variables que vamos a utilizar son:
La variable total almacena el número total de imágenes que vamos a
mostrar. En nuestro caso, son 4.
La variable imagenActual almacenará el número de la imagen que
vamos a mostrar, la inicializamos a 1 para mostrar la primera imagen.
Tenemos que obtener datos externos, para eso hemos empleados dos
objetos:
Un Loader llamado cargadorImagen, donde cargaremos los
archivos de imagen.
Un URLLoader, llamado cargadorTexto, que es un objeto que nos
permite extraer datos de archivos. En nuestro caso, texto de un
archivo de texto.
El Loader ya lo conocemos, y de momento sólo lo hemos añadido al
MovieClip contenedorImagen. Vamos a centrarnos en cómo utilizamos el
URLLoader.
?
1
2
var cargadorTexto:URLLoader = new URLLoader();
cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;
Tras declararlo, debemos indicar el formato de datos, con la propiedad
cargadorTexto.dataFormat. Puede ser de tres valores:
URLLoaderDataFormat.TEXT, si el archivo que queremos cargar es
todo texto, y queremos cargarlo como tal. Esta es la opción por
defecto.
URLLoaderDataFormat.BINARY, si los datos son binarios sin
formato.
URLLoaderDataFormat.VARIABLES, si los datos del archivo siguen
el formato de las variables URL, cuya sintaxis sería
variable1=valor&variable2=valor&variable3=valor&variable4=val
or. Es decir separamos cada variable y su valor por el signo =. Y
separamos cada par variable=valor por el signo &.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
110

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Esta última es la opción que hemos elegido, porque aunque queremos cargar
texto, lo tenemos dividido en variables. Por lo tanto, escribimos en el archivo
diapositivas.txt el texto que queremos mostrar con el siguiente formato:
?
1
2

3

4


5

6


7

8
titulo1=Los mejores sándwiches
&descripcion1=En sacuina creamos los sándwiches mas originales y sabrosos
de toda la ciudad.
&titulo2=Calidad Superior
&descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la
máxima calidad.
&titulo3=Productos seleccionados
&descripcion3=Seleccionamos los productos uno a uno y de distribuidores de
confianza.
&titulo4=Nuestras especialidades
&descripcion4=No olvides probar nuestras especialidades en ensaladas y
postres.

Por tanto, lo siguiente ha sido indicar a nuestro URLLoader cuál es el
archivo que contendrá esas variables.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var archivoTexto:URLRequest = new URLRequest("diapositivas.txt");
//Y el método que lo carga
cargadorTexto.load(archivoTexto);
//Y lo configuramos para que cuando se complete la carga,
//avance al fotograma 6
cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);
function textoCargado(event:Event):void
{
gotoAndPlay(6);
}

btnSiguiente.addEventListener(MouseEvent.CLICK, irSiguiente);
function irSiguiente(event:MouseEvent):void
{
gotoAndPlay(2);
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
111

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Y como ya vimos con los cargadores, hemos utilizado el evento
Event.COMPLETE para saber si se ha cargado correcta y completamente.
Si no se ha cargado, mostramos un error. Si todo es correcto, pasamos al
fotograma 6.
Al final, hemos añadido el código necesario para que al pulsar en boton
vayamos al fotograma 2.

Ahora, vamos al fotograma 6. Cada vez que se pase por aquí, cambiaremos
la imagen y el texto. Hemos elegido este fotograma porque aquí habíamos
cambiado el valor de Alffa a 0. Es decir, aquí es donde ha acabado de
desvanecerse la imagen y donde empieza a cargarse la siguiente. Veamos el
código que hemos puesto:
?
1
2
3
4
5
6
7
8
9
if (imagenActual==total) {
imagenActual=0;
}
imagenActual++;
//Cambiamos el texto
textoDiapositiva.titulo_txt.text=cargadorTexto.data['titulo'+imagenActual];
textoDiapositiva.descripcion_txt.text=cargadorTexto.data['descripcion'+imagenActual];
//Y cambiamos la imagen
cargadorImagen.load(new URLRequest ("imagenes/imagen"+imagenActual+".jpg"));
Lo primero que hacemos es comprobar si hemos llegado a la última imagen
(total), y si es así, volvemos a la primera. Aumentamos el contador de
imágenes (imagenActual++).
Ahora, tenemos que extraer los valores correspondientes del
cargadorTexto. Podemos acceder al contenido del archivo cargado con
la propiedad .data. Si además ese archivo lo forman variables, como en
nuestro caso, podemos utilizar data como un array y acceder a una variable
concreta escribiendo data['nombreVariable']. También podríamos hacerlo
como una propiedad (data.nombreVariable).
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
112

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


En nuestro caso hemos extraído las variables con el título y la descripción y
las hemos mostrado en los textos textoDiapositiva.titulo_txt y
textoDiapositiva.descripcion_txt.
Y para acabar, hemos cargado la imagen con el método load del
cargadorImagen. Por tanto, cada vez que pasemos por aquí, el cargador
reemplazará la imagen que contiene.
Observa que hemos elegido unos nombres que contienen el número de
imagen (tituloX y descripcionX para las variables, e
imagenes/imagenX.jpg). Esto nos facilita el trabajo, ya que sólo tenemos
que cambiar la X por el número de imagen que corresponde.
Ejercicios: Navegación - ActionScript
Ejercicio 1: Periódico Digital
Deberás reproducir la siguiente película Flash:

Para ello deberás crear un movieclip que reproduzca el movimiento de la
página.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
113

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Podrás encontrar las hojas a cargar en la carpeta /ejercicios/periodico del
curso, como archivos SWF.
Las páginas incluyen el botón para avanzar y retroceder. Al pulsarlo no se
realiza ninguna acción, pero producen los eventos irSiguiente e irAnterior,
que pueden ser escuchados por la película principal.
El resto queda a tu disposición, utiliza todos los recursos que necesites.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios: Navegación - ActionScript
Ejercicio 1: Periódico Digital
1. Abre el programa Flash CS5.
2. Haz clic en Archivo → Nuevo para crear un nuevo documento.
3. Selecciona Archivo de Flash ActionScript 3 en el diálogo que se
abrirá y pulsa Aceptar.
4. Se abrirá un documento en blanco. Lo guardaremos para darle un
nombre y poder guardar nuestros progresos de vez en cuando. Para
ello haz clic en Archivo → Guardar. Dale un nombre (por ejemplo
periodico), selecciona una la carpeta donde tienes los swf de las
páginas del periódico, que encontrarás en la carpeta
ejercicios/periodico y pulsa Guardar.

Ahora podrás guardar el documento siempre que quieras pulsando
Ctrl + S o haciendo clic en Archivo → Guardar.
5. Empecemos a crear el documento. Primero cambiaremos su tamaño.
Haz clic derecho en cualquier parte del área de trabajo y selecciona
Propiedades del Documento....
6. Introduce 600 en Anchura y 400 en Altura. Pulsa Aceptar para
aplicar los cambios.
7. Inserta 3 nuevas capas utilizando el botón Insertar capa en la
línea de tiempo.
8. Nómbralas de arriba abajo: acciones, hoja, derecha e izquierda.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
114

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


En la capa acciones introduciremos el código que vamos a utilizar
en la línea de tiempo principal. La capa hoja contendrá la animación
de la hoja pasándose.
En las capas derecha e izquierda introduciremos dos movieclips
donde cargaremos las páginas que querremos visualizar en cada
momento.
9. Nuestro próximo paso será crear movieclips donde colocaremos las
páginas derecha e izquierda. Abre la Biblioteca, si no está ya
abierta, desde Ventana → Biblioteca y pulsa el botón Nuevo
Símbolo situado al pie de esta.
10. Dale el nombre de pagina y selecciona Clip de película. Se creará
el clip, pero como no queremos introducir nada en él lo dejaremos
vacío y pulsaremos Escena 1 para volver a la Escena principal.
11. Ahora introduciremos instancias del clip pagina en las capas
derecha e izquierda. Selecciona la capa derecha y arrastra el
símbolo que acabamos de crear de la Biblioteca al Escenario.
12. En el Panel Propiedades cambiaremos las coordenadas de
posición, en X escribiremos 300 y en Y 0. Así se colocará el clip en el
medio del documento, que es donde se encontrará la esquina
superior izquierda de la página derecha.
13. Dale el nombre de instancia pagina_derecha.
14. Ahora crearemos una instancia para la página izquierda. Selecciona
la capa izquierda y arrastra el clip pagina sobre el Escenario.
15. En el Panel Propiedades dale las coordenadas de posición X 0 e Y
0.
16. Cambia su nombre de instancia a pagina_izquierda.
17. Ahora crearemos el movimiento de la hoja. Para ello crearemos un
clip de película que representará la hoja. Haz clic en Nuevo Símbolo
(al pie de la Biblioteca) y dale el nombre hoja. Selecciona Clip de
película y pulsa el botón Aceptar.
18. Selecciona la herramienta Rectángulo y dibuja un rectángulo en
el Escenario.
19. Selecciona le herramienta Selección y haz doble clic sobre el
rectángulo que acabas de crear para seleccionarlo completamente.
20. En el Panel Propiedades cambia su Ancho a 300 y su Alto a 400.
Colócalo en la posición X 0 e Y 0.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
115

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


21. Para que te sea más cómodo, puedes darle un color de relleno al
rectángulo.
22. Ahora crearemos la animación que recreará el movimiento de la
hoja. Para ello creamos un nuevo clip, haz clic en el botón Nuevo
Símbolo y llámalo hoja_movimiento, selecciona Clip de película y
pulsa Aceptar.
23. Entraremos en el modo de edición del nuevo clip. Arrastra el
símbolo hoja que acabamos de crear al Escenario.
24. Primero crearemos la animación que se reproducirá cuando
pasemos a la hoja siguiente. Así que la posición inicial de la página
será en la parte de la derecha. Cambiamos la posición desde el
Panel Propiedades a X 0 e Y 0.
25. Y le damos al símbolo el nombre de instancia pagina. En este clip
cargaremos las páginas para que dé la sensación de que estamos
pasando las hojas.
26. Nos colocamos en el fotograma 2 y creamos un nuevo fotograma
clave pulsando F6. Dejaremos el fotograma 1 libre para detener la
película ahí y avanzar al fotograma 2 más tarde para iniciar la
animación.
27. Nos colocamos en el fotograma 41 y creamos otro fotograma
clave (F6), aquí terminará la animación de la hoja.
28. En el fotograma 41 situaremos el símbolo pagina en las
coordenadas X -300 e Y 0. Este sería el punto final de la animación,
con la hoja totalmente pasada.
29. Sobre la línea de tiempo, hacemos clic derecho, y en el menú
contextual elegimos Crear interpolación clásica. Hemos creado la
interpolación.
30. Ahora crearemos el punto intermedio. Nos colocamos en el
fotograma 21 y creamos un fotograma clave (de nuevo F6).
31. En este fotograma, seleccionamos el símbolo pagina y modificamos
las coordenadas del símbolo en el Panel Propiedades a X 0 e Y 0, y
su ancho AN a 1 px.
32. Ya tenemos la primera animación de la hoja. Ahora crearemos la
animación de simulará que pasamos a la hoja anterior. Para ello
creamos un nuevo fotograma clave en la posición 42 (que será la
posición inicial de la hoja) y otro en el fotograma 82 (la posición
final).
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
116

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


33. Igual que antes, colocamos la hoja en su sitio en el fotograma 82,
esto es, en la parte derecha. Para ello, selecciona el fotograma y en
él haz clic en el símbolo. Modifica las coordenadas del Panel
Propiedades a X 0 e Y 0.
34. En la línea de tiempo, hacemos clic derecho en cualquier fotograma
intermedio (por ejemplo, 60) y seleccionamos Crear interpolación
clásica.
35. Ahora crearemos un fotograma clave en el fotograma 62, donde
crearemos la posición intermedia.
36. Modifica las coordenadas a X 0 e Y 0 en el Panel Propiedades, y el
ancho AN a 1.
37. Ya tenemos la animación creada. Mejorémosla ajustando la
aceleración de ésta. Para ello, selecciona un fotograma intermedio
de la primera animación (por ejemplo, 10) y en el Panel
Propiedades escribe -100 en el campo Aceleración.
38. Haz lo mismo para la tercera animación (en el fotograma 50, por
ejemplo).
39. Para la segunda y cuarta animación (fotogramas 30 y 70, por
ejemplo) escribe 100 en Aceleración.

Ahora sí hemos terminado.
40. Ahora crearemos una nueva capa donde introduciremos las
acciones. Pulsa el botón Insertar capa y llámala acciones.
41. Crea fotogramas clave en las posiciones 1, 2, 21, 41, 42, 62 y 82.
O lo que es lo mismo, en las mismas posiciones en las que
encontraras fotogramas claves en la capa de la animación.
42. Abre el Panel Acciones desde Ventana → Acciones selecciona el
fotograma 1 y escribe en el Panel Acciones stop();. Haz lo mismo
en los fotogramas 41 y 82. Esto es para que la animación se
detenga en el principio del todo y después de que realice la pasada
de hoja.
43. Crearemos las etiquetas de fotograma que indicaba el enunciado.
Selecciona el fotograma 2 de la capa donde tienes la animación y
escribe en el Panel Propiedades siguiente.
44. Le damos la etiqueta anterior al fotograma 42 del mismo modo.
45. Ahora sólo faltará introducir el código para que se carguen las
películas. Pero antes colocaremos el clip que hemos creado en la
película principal. Haz clic en Escena 1.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
117

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


46. Ahora selecciona la capa hoja y arrastra el clip de película
hoja_movimiento al Escenario.
47. Modifica sus coordenadas en el Panel Propiedades y colócalo en X
300 e Y 0.
48. Dale el nombre de instancia hoja_movimiento para poder
referirnos a él desde el código.
49. Ahora pasaremos a introducir el código que necesitamos. Sitúate en
el fotograma 1 de la capa acciones en la película principal y abre el
Panel Acciones (F9).
50. Escribe lo siguiente:
?
1
2
3
4
5
6
7
8
9
10
11
stop();

addEventListener("irSiguiente",irSiguiente);
function irSiguiente(event) {
hoja_movimiento.gotoAndPlay('siguiente');
}

addEventListener("irAnterior",irAnterior);
function irAnterior(event) {
hoja_movimiento.gotoAndPlay('anterior');
}
Como se comentaba en el enunciado, al pulsar en los botones de las
páginas, se producen los eventos "irAnterior" e "irSiguiente",
porque así lo hemos programado en las páginas. Lo que haremos
será escuchar esos eventos, y cuando se produzcan, ir a la etiqueta
correspondiente de hoja_movimiento para simular el movimiento.
51. Haz doble clic sobre el símbolo hoja_movimiento para acceder a
su línea de tiempo.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
118

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


52. En el primer fotograma de la capa acciones, introduce el siguiente
código:
?
1
2
3
4
5
6
7
stop();

var vista:Number=0;
var hojasIzquierda:Array=["","contenido_actualidad.swf","contenido_deportes.swf",
"contenido_naturaleza.swf","contenido_ultima.swf"];
var hojasDerecha:Array=["contenido_portada.swf","contenido_ciencia.swf",
"contenido_espectaculos.swf","contenido_politica.swf",""];
Aquí hemos parado la película y hemos definido las variables que
utilizaremos en el resto de la película.

En la variable vista almacenamos el momento en el que nos
encontramos, y en los arrays hojasIzquierda y hojasDerecha
introducimos los archivos SWF que deberemos cargar. Para ello hemos
tenido en cuenta la siguiente tabla:
vista hojasIzquierda hojasDerecha
0 portada
1 actualidad ciencia
2 deportes espectaculos
3 naturaleza politica
4 ultima


Acude a esta tabla para entender los siguientes fragmentos de
código.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
119

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


53. Como el código para cargar los archivos SWF va a ser repetitivo, lo
simplificaremos creando la siguiente función:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function cargarSWF(enPagina:MovieClip, archivo:String) {
if(archivo!="") {
enPagina.visible = true;
var loader:Loader;
loader = new Loader();
loader.load(new URLRequest(archivo));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, insertar);
function insertar(event):void {
enPagina.addChild(loader);
}
} else {
enPagina.visible=false;
}
}
Lo que hace esta función es utilizar un objeto Loader para cargar un
archivo que indicamos en el parámetro archivo y mostrarlo en la
página que le indiquemos en enPagina. Además, si archivo está
vacío, oculta la página.
54. Por último, en este mismo fotograma, cargamos la primera página
para que no quede la página vacía. Lo hacemos llamando a la
función que hemos definido:
?
1 cargarSWF(pagina, hojasDerecha[vista]);
Con esto haremos que en el símbolo pagina (que se encuentra
sobre los símbolos pagina_izquierda y pagina_derecha) se cargue
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
120

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


la primera hoja del periódico. Recuerda que la variable vista todavía
tiene el valor 0.
55. Selecciona el fotograma 2 y escribe lo siguiente en el Panel
Acciones:
?
1
2
3
4
with (parent) {
cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista+1]);
}
cargarSWF(pagina, hojasDerecha[vista]);
Observa el uso de parent para acceder al símbolo pagina_derecha.
Lo empleamos porque este símbolo no está dentro del actual
(hoja_movimento, a la que nos referimos como this), si no en el
nivel superior, en la película general, que es el elemento padre
(parent).

Por tanto, lo que hacemos es cargar el contenido de la hoja de
periódico que se va a ver por detrás de hoja_movimiento en
pagina_derecha cuando pasemos la página.

También cargamos en el símbolo pagina la hoja actual.
56. Selecciona el fotograma 21 y escribe lo siguiente en el Panel
Acciones:
?
1
2
cargarSWF(pagina, hojasIzquierda[vista+1]);
vista++;
En este punto el símbolo pagina se encuentra reducido tanto que es
invisible. Aprovechamos y cambiamos el contenido con la siguiente
hoja (que se encontrará almacenada en la posición vista+1).

Aumentamos la variable vista en 1 con vista++; y listo.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
121

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


57. Selecciona el fotograma 41 y escribe lo siguiente en el Panel
Acciones después de la línea stop();
?
1
2
3
4
stop();
with (parent) {
cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista]);
}
Aquí actualizamos el contenido del símbolo pagina_izquierda por si
decidiésemos retroceder en el periódico. Así cuando le demos la vuelta
a la página se verá el contenido correcto.
58. El código en el resto de fotogramas claves es idéntico al que hemos
visto (pues la acción es similar) pero disminuyendo la variable vista a
cada pasada de página y permutando las matrices hojasIzquierda y
hojasDerecha.

El código en el fotograma 42 es:
?
1
2
3
4
5
with (parent) {
cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista-1]);
}

cargarSWF(pagina, hojasIzquierda[vista]);
El código en el fotograma 62 es:
?
1
2
cargarSWF(pagina, hojasDerecha[vista-1]);
vista--;
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
122

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Y el código en el fotograma 82 es:
?
1
2
3
4
stop();
with (parent){
cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista]);
}

Nota: Las imágenes que puedes ver en las páginas han sido obtenidas
desde Flickr, bajo licencia Creative Commons.




“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
123

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



UNIDAD 19
FORMULARIOS CON ACTIONSCRIPT

19.1. Los elementos de formulario
En el uso de formularios podremos utilizar muchos elementos. Pero los
principales serán siempre los mismos: cajas de texto y botones.

De vez en cuando utilizaremos otros elementos como los radioButtons,
checkBoxes, comboBoxes o listBoxes. Veremos cómo utilizarlos y
sacarles el mayor partido.
Flash ofrece estos objetos como componentes. Para acceder a ellos sólo
tendrás que abrir el Panel Componentes desde Ventana → Componentes.
Una vez abierto el panel haz clic en User Interface para desplegar sus
elementos y verás todos los componentes que podrás utilizar.

Incluso para la introducción de texto en formularios es aconsejable el uso de
componentes, pues veremos que poseen propiedades que las simples cajas
de texto no tienen.
Para utilizar alguno de estos componentes basta con arrastrarlo del panel al
escenario, o puedes arrastrarlo a la biblioteca para utilizarlo más tarde.
En cualquier caso, cuando hayamos añadido el componente a nuestra
película deberemos darle un nombre de instancia para poder acceder a él
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
124

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


desde el código y configurar sus opciones en la sección Parámetros de
componente del inspector de Propiedades:


Veamos cuales son las opciones para los diferentes componentes:
TextInput (Introducción de texto):
displayAsPassword: Oculta/muestra el contenido del texto
mostrándose un asterisco por carácter.
editable: Permite que el texto se pueda editar o no.
text: Indica el texto inicial de la caja.
maxChars: El número máximo de caracteres que se pueden cumplir.
TextArea (Área de texto):

editable: Permite que el texto se pueda editar o no.
text: Indica el texto inicial de la caja.
htmlText: Contiene texto que acepta etiquetas html.
wordWrap: Permite que se pueda realizar un desplazamiento del
texto de arriba abajo. En caso de que no se permita (false) cuando el
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
125

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


texto sobre pase el área del componente aparecerá una barra de
desplazamiento que permitirá mover el texto de izquierda a derecha.
vertical/horizontalScrollPolicy: Establece cómo se mostrarán las
barras de desplazamiento del texto: on, siempre, off nunca, y auto,
solo cuando el texto no quepa.
Button (Botón):

icon: Añade un icono al botón. Para insertar un icono deberemos
crear un gráfico o clip de película y guardarlo en la Biblioteca. Una
vez allí lo seleccionamos y haciendo clic derecho sobre él,
seleccionamos Vinculación. Marcamos la casilla Exportar para
ActionScript en el cuadro de diálogo que aparecerá y le damos un
nombre en Identificador. Este nombre es el que deberemos escribir
en el campo icon del componente botón. Ni el botón ni el símbolo se
ajustará al tamaño del otro, así que deberemos modificar sus
tamaños para que el icono no sobresalga del botón.
label: Texto que se leerá en el botón.
labelPlacement: left, right, top o bottom. Indica la posición de la
etiqueta de texto en caso de que se utilice junto a un icono.
Respectivamente, izquierda, derecha, arriba y abajo.
selected: Indica si el botón se encuentra inicialmente seleccionado.
toggle: Cuando se encuentra marcada, hace que el botón pueda
tomar dos posiciones, presionado y no presionado.
RadioButton (Botón de opción):

value: Especifica los datos que se asociarán al RadioButton. La
propiedad puede ser cualquier tipo de datos. Podemos acceder a
esta propiedad a través de código para ver que contiene.
groupName: Nombre del grupo. En un grupo de botones de opción
sólo uno de ello puede estar seleccionado. Definiremos este grupo
mediante esta propiedad. Todos los botones que tengan el mismo
nombre en groupName pertenecerán al mismo grupo.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
126

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


label: Texto que se leerá al lado del botón.
labelPlacement: left, right, top o bottom. Indica la posición de la
etiqueta de texto respecto al botón. Respectivamente, izquierda,
derecha, arriba y abajo.
selected: Indica si el botón se haya seleccionado o no. De nuevo, en
un mismo grupo sólo un botón de opción puede estar seleccionado.


CheckBox (Casilla de verificación):

label: Texto que se leerá al lado de la casilla.
labelPlacement: left, right, top o bottom. Indica la posición de la
etiqueta de texto respecto a la casilla. Respectivamente, izquierda,
derecha, arriba y abajo.
selected: Indica si la casilla de verificación se haya inicialmente
seleccionada.
ComboBox (Lista desplegable):
editable: Permite la edición del campo. Mediante ActionScript
podemos hacer que se añadan nuevos elementos a la lista.
dataProvider: Matriz donde determinaremos el nombre de los
elementos de la lista y su valor. Se mostrará el siguiente diálogo para
introducir los pares texto a mostrar (label) y valor a enviar (data):

Desde aquí podremos añadir o quitar elementos utilizando los botones
y . O alterar el orden de éstos subiéndolos o bajándolos en la
lista con los botones y .
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
127

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


rowCount: Número máximo de elementos visibles en la lista. Si este
número es superado por los elementos se añadirá una barra de
desplazamiento.

List (Lista):
dataProvider: Matriz donde determinaremos el valor qué devolverá
el componente al seleccionar determinada posición.
allowMultipleSelection: Permite la selección múltiple de elementos
manteniendo la tecla Ctrl presionada. También es posible
seleccionar un rango de elementos seleccionando uno de ellos y
pulsando la tecla Shift mientras seleccionamos otro diferente, todos
los elementos intermedios resultarán también seleccionados.
verticalLineScrollSize: Número máximo de filas visibles en la lista.
Si este número es superado por los elementos se añadirá una barra
de desplazamiento.
NumericStepper (Contador numérico):
maximum: Establece el número máximo del contador.
minimum: Establece el número mínimo del contador.
stepSize: Establece el intervalo en el que se aumenta o disminuye el
número del campo al pulsar los botones del componente.
value: Valor inicial del campo.
Nota: Todas las propiedades mencionadas para cada uno de los
componentes son accesibles a través de ActionScript escribiendo el nombre
de instancia del componente seguido de un punto y el nombre de la
propiedad:
?
1 miBoton.label = "Haz clic aquí";
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
128

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6



19.2. Botones de formulario
En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar.
Imagina que llamamos al componente botón de limpiar btn_borrar, su
código asociado sería sencillo:
?
1
2
3
4
5
6
7
btn_borrar.addEventListener(MouseEvent.CLICK,boton);

function boton(event:MouseEvent):void{
nombre.text = "";
email.text = "";
mensaje.text = "";
}
Como puedes ver, hemos creado un escuchador para btn_borrar. Cuando
se activa simplemente vaciamos el contenido de los campos de texto que
queramos.
También podríamos iniciar los campos de otra forma:
?
1
2
3
nombre.text = "Escribe aquí tu nombre";
email.text = "Escribe aquí tu e-mail";
mensaje.text = "Escribe aquí tu mensaje";

En definitiva, puedes tratar los campos como quieras.
Para el botón de envío deberás asociar un escuchador del mismo modo,
pero el código que irá incluido en él deberá de validar los datos y enviarlos,
que será lo que veamos en el siguiente apartado.


19.3. Validar datos

Antes de enviar los datos es conveniente validarlos, por ejemplo, para que un
campo requerido no quede en blanco. Si la validación se completa,
proseguimos con el envío, pero si no, advertimos al usuario de los errores.
Un campo requerido es aquél que el usuario debe de rellenar. Por ejemplo,
en el caso de un campo de texto, podemos comprobar su longitud con la
propiedad miCampoTxt.text.lenght, y si es 0 es vacío.
En cambio, si se trata de una casilla que ha de estar seleccionada, basta con
consultar la propiedad miCasilla.selected.

Una forma más avanzada sería utilizar expresiones regulares, con el objeto
RexExp, que nos permite personalizar mucho más la validación. Por ejemplo,
la siguiente función comprueba si el valor es un número:

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
129

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


?
1
2
3
4
5
function esNumero(valor:String):Boolean
{
var expRegular:RegExp = /[0-9]+/;
return expRegular.test(valor);
}
Con esto para comprobar si el contenido de un texto es numérico, bastaría
con preguntar si esNumero(miCampo.text).
Una función muy útil es la de establecer dónde colocar el foco escribiendo
la siguiente línea:
?
1
miCampoTxt.stage.focus = miCampoTxt;
De este modo, si encontramos un error al validar podemos establecer el
punto de inserción en el campo correspondiente para que el usuario escriba
directamente.
Para acabar, debemos de tener un campo de texto para mostrar los posibles
errores.
Vamos a unir todo esto en una función que validará los datos de un
formulario.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function validarDatos():Boolean {
if (txt_nombre.length==0) { //campo requerido
txt_nombre.stage.focus=txt_nombre; //le damos el foco
txt_aviso.text="Introduce tu nombre"; //Indicamos el error
return false; //Devolvemos falso
} else if (!chk_condiciones.selected) {
//Comprobamos que la casilla esté marcada
chk_condiciones.stage.focus = chk_condiciones;
txt_aviso.text="Debes aceptar las condiciones";
return false;
} else {
if (esNumero(txt_edad.text)) { //Comprobamos si es un número
if (Number(txt_edad.text)<18) { //comprobamos si es mayor
txt_edad.stage.focus=txt_edad;
txt_aviso.text="Tienes que ser mayor de edad";
return false;
} else {
//Si llega hasta aquí, es que todo se ha validado
//Devolvemos true
return true;
}
} else {
txt_edad.stage.focus=txt_edad;
txt_aviso.text="Introduce tu edad";
return false;
}

}
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
130

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Como se ve, comprobamos si el campo txt_nombre tiene texto, si la casilla
chk_condiciones está marcada, y si txt_edad es un número mayor que 18.
A esta función, la llamaríamos al pulsar el botón de envío (btn_enviar). Lo
que hará será validar, y si el resultado es correcto, llamará a la función que
envía los datos (enviarDatos) que veremos en el próximo apartado.
?
1
2
3
4
5
6
btn_enviar.addEventListener(Mouse.CLICK,
validaryEnviar);
function validaryEnviar(event):void {
if (validarDatos()) { //validamos
enviarDatos(); //Y si es True, enviamos
}
}

19.4. Envío de formularios
Vamos a crear el código estándar que nos permite enviar el formulario.
Antes de enviar los datos, hemos validado los datos como vimos en el punto
anterior.
Lo normal, tras rellenar un formulario en una página web, es que esta los
envíe a una página dinámica, en PHP o ASP. Esta página se encargará de
recoger los datos, volverlos a validar, y hacer lo que corresponda con ellos,
como guardarlos en una base de datos, o enviar un correo. Con Flash
haremos lo mismo. En nuestro ejemplo, enviaremos los datos a
enviarCorreo.php.
Vamos a utilizar tres objetos:
Un objeto URLVariables. Este objeto nos permite componer
cómodamente variables de URL, con el formato
var1=valor1&var2=valor2&var3=valor3...
Un objeto URLRequest. Nos permite configurar la dirección web de
envío, cómo se enviarán los datos y asignarle esos datos con un
objeto URLVariables.
Un objeto URLLoader. Aunque normalmente lo empleamos para
obtener información de archivos, también nos sirve para enviar
información al archivo indicado como un URLRequest.
Veamos el código:
?
1
2
3
4
5
6
7
8
9
10
//Función que se ejecuta al presionar el botón de envío
function enviarDatos(event:MouseEvent):void {
System.useCodepage = true;//Esta línea coge la página de carácteres
//del sistema, para mostrarlos
correctamente
//Utilizamos un objeto URLVariables para guardar los datos de
nuestros campos.
var datosFormulario:URLVariables = new URLVariables();
//Definimos los campos y les agregamos el valor de las cajas de
texto.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
131

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
datosFormulario.nombre = txtNombre.text;
datosFormulario.apellidos = txtApellidos.text;
datosFormulario.email = txtEmail.text;

//Con un obj. URLRequest generamos la URL a la que se envían los
datos
var paginaEnvio:URLRequest=new URLRequest("enviarCorreo.php");
//Indicamos el método de envío y le cargamos misVariables.
paginaEnvio.method=URLRequestMethod.POST;
paginaEnvio.data=misVariables;

//Utilizamos un obj. URLLoader para enviar info. a un archivo
externo
var cargador:URLLoader = new URLLoader();
//Como siempre, creamos un evento que nos indica si se ha
completado
//el envío de información, y x tanto se han enviado los datos
cargador.addEventListener(Event.COMPLETE, envioCompleto);
//Utilizamos el evneto IOErrorEvent.IO_ERROR que se lanza cuando
ocurre
//un error, por lo que los datos no se han enviado
cargador.addEventListener( IOErrorEvent.IO_ERROR, errorEnvio );
//Y para acabar, enviamos los datos
caragdor.load(paginaEnvio);
}
function envioCompleto(event):void {
//Si se completa, avisamos del envío y limpiamos campos
aviso.text="Envío completo";
txtNombre.text="";
txtApellidos.text="";
txtEmail.text="";
}
function errorEnvio(event):void {
//Si hay un error, avisamos de ello
aviso.text="Se produjo un error, no se ha completado el envío";
}


btn_enviar.addEventListener(MouseEvent.CLICK, validaryEnviar);
function validaryEnviar(event):void {
if (validarDatos()) { //validamos
enviarDatos(); //Y si es True, enviamos
}
}

Podemos ver que para crear las variables en el objeto URLVariables, no
tenemos más que escribir el nombre que le queremos dar como una
propiedad, y asignarle el valor que queremos guardar en la variable:
?
1
2
3
datosFormulario.nombre = txtNombre.text;
datosFormulario.apellidos = txtApellidos.text;
datosFormulario.email = txtEmail.text;
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
132

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Al objeto URLRequest, le indicamos el nombre de archivo (nuestra página),
el método de envío (method), como en los formularios HTML, y los datos
(data) que hemos configurado en el objeto URLVariables.
?
1
2
3
var paginaEnvio:URLRequest=new
URLRequest("enviarCorreo.php");
paginaEnvio.method=URLRequestMethod.POST;
paginaEnvio.data=misVariables;

Y por último utilizamos el objeto URLLoader para comunicarnos con el
archivo cuya ubicación se indica en el objeto URLRequest. Cargamos la
información hacia él, y comprobamos si se ha completado el envío o se ha
producido un error, para avisar al usuario.
El script enviarCorreo.php se encargaría de recibir los datos, generar el
correo y enviarlo.
Nota: Para poder ejecutar una página dinámica, como la que envía el correo
en PHP, hay que tener instalado un servidor web en el equipo. Por lo que si
no lo tienes, no se enviará el correo, aunque tampoco dará ningún error si se
encuentra el archivo.

19.5. Otras propiedades de los formularios
Además de todo lo que hemos visto existen, también, otras propiedades
bastante interesantes.
Por ejemplo, el orden de tabulación. Esta propiedad establece como actúa
el cursor a las repetidas pulsaciones de la tecla Tabulador.
Podemos alterar el orden utilizando la propiedad tabIndex. Esta propiedad
indicará el orden en el que se desplazará el cursor cada vez que pulsemos el
Tabulador:
?
1
2
3
4
5
nombre_txt.tabIndex = 1;
mail_txt.tabIndex = 2;
mensaje_txt.tabIndex = 3;
reset_btn.tabIndex = 4;
submit_btn.tabIndex = 5;
También podemos establecer el botón predeterminado del formulario para
que cuando se pulse la tecla Intro sea como si hiciésemos clic en él. Escribe
la siguiente línea:
?
1
2
3
4
//En este caso, debemos de importar la clase para que la
reconozca
import fl.managers.FocusManager;
var fm:FocusManager = new FocusManager(this);
fm.defaultButton = submit_btn;
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
133

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


De esta forma haremos que el botón predeterminado sea submit_btn. En
este caso, this se refiere a la película principal, pero podemos indicar el
contenedor que contenga a nuestro formulario.
Estos conceptos son muy importantes de cara al usuario, ya que muchos
están acostumbrados a cambiar de un control a otro con el Tabulador y a
pulsar Intro para enviarlo.

19.6. Recuperando información XML
En este apartado veremos cómo recuperar información de un archivo XML.
XML es un lenguaje de marcas estructuradas, en el que la información se
clasifica en elementos y sub elementos, con propiedades y atributos,
utilizando etiquetas, de forma muy similar al HTML. De hecho, existe XHTML,
que no es más que HTML que cumple las reglas estrictas del XML.
Por ejemplo, nosotros vamos a trabajar con la siguiente información XML que
tenemos en un archivo, llamado comentarios.xml:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="ISO-8859-1" ?>
<listadoComentarios>
<comentario>
<autor>josé</autor>
<email>jose@correo.com</email>
<mensaje>estoy escribiendo un mensaje</mensaje>
</comentario>
<comentario>
<autor>amparo</autor>
<email>amparo@correo.com</email>
<mensaje>este mensaje también se publicará</mensaje>
</comentario>
<comentario>
<autor>miguel</autor>
<email>miguel@correo.com</email>
<mensaje>mensaje de prueba</mensaje>
</comentario>
<comentario>
<autor>cristina</autor>
<email>cristina@correo.com</email>
<mensaje>esto funciona!</mensaje>
</comentario>
</listadoComentarios>
En Flash tenemos el elemento XML. En él almacenamos la información
con la estructura XML. Este objeto, nos permite recorrer esta
información de forma organizada.
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
134

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


A un elemento XML le podemos asignar directamente la información como si
fuera un String, pero sin encerrarla entre comillas. Por ejemplo:
?
1
2
3
4
5
6
7
8
9
10
11
var miXML:XML =
<pedido>
<articulo id='1' cantidad='1'>
<nombre>Raqueta Tenis</nombre>
<precio>33.95</precio>
</articulo>
<articulo id='2' cantidad='3'>
<nombre>Pelota Tenis</nombre>
<precio>4.45</precio>
</articulo>
</pedido>;
Pero en nuestro ejemplo, la información XML la tenemos en un archivo.
Como ya vimos, para cargar información de archivos externos
necesitamos un elemento URLLoader.

Vamos a ver cómo hemos utilizado la información del archivo utilizando estos
dos elementos:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//Para trabajar con datos XML utilizamos un objeto XML
var datosXML:XML = new XML();
datosXML.ignoreWhite = true; //Ignora elementos en blanco
//Para obtener información de un archivo, utilizamos un
URLLoader
var cargadorXML:URLLoader = new URLLoader();
cargadorXML.load(new URLRequest('comentarios.xml'));
//Utilizamos el evento complete para no trabajar hasta que
//se haya cargado completamente
cargadorXML.addEventListener("complete", archivoCargado);
function archivoCargado(ev:Event):void {
comentarios_text.text="";
//Convertimos la info leída a XML y se la asignamos al
objeto XML
datosXML=XML(cargadorXML.data);
var cadena:String;
//Con este bucle, reccoremos todos los elementos
for (var elemento:String in datosXML.comentario) {
//Para cada elemento, cremos una cadena de texto y la
mostramos
cadena="<a
href=\"mailto:"+datosXML.comentario.email[elemento]+"\">"+
datosXML.comentario.autor[elemento]+"</a>: <span
class=\"mensaje\">"+
datosXML.comentario.mensaje[elemento]+"</span><br>\n";
comentarios_text.appendText(cadena);
}
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
135

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Comenzamos declarandos el objeto XML, al que hemos llamado datosXML
porque es lo que contendrá. Como todo objeto, tiene una serie de propieades
que no vamos a detallar. Hemos utilizado la propiedad ignoreWhitespace,
que ignorará aquellos campos que estén en blanco y así no tendremos que
preocuparnos por posibles errores.

A continuación, extraemos la información del archivo, para lo que hemos
utilizado un objeto URLLoader, al que hemos llamado cargadorXML. En su
método load le indicamos el archivo a cargar. Además, como veníamos
haciendo, para no continuar con el trabajando hasta que no se haya
terminado de cargar, utilizamos el evento complete. En él, trataremos la
información.

Llegados a este punto, tenemos la información cargada en la propiedad .data
del cargador. Como no hemos indicado otra cosa, se ha cargado todo el
archivo como texto. Utilizamos la función XML() para convertirlo a
información XML, y se la asignamos a nuestro objeto XML:
?
1 datosXML = XML(cargadorXML.data);
Ahora, ya tenemos datosXML con toda la información. Con este objeto es
sencillo acceder a ella, listarla, etc. En nuestro ejemplo, si queremos acceder
al primer email (posición 0), lo podemos hacer escribiendo
datosXML.comentario.email[0]. Basándonos en eso, hemos hecho un
bucle for para recorrer todos los elementos, e ir construyendo la cadena de
texto que mostramos en la caja de texto.
Esta forma requiere que conozcamos la estructura del archivo, saber que se
divide en etiquetas <comentario>y que dentro de ella tenemos la etiqueta
<email>.

Utilizando los índices, podemos acceder a los distintos elementos de la
jerarquía. Por ejemplo:
?
1
2
3
4
5
trace ('datosXML: ',datosXML); //Escribe todo el archivo
trace ('datosXML.comentario[1]: ',datosXML.comentario[1]);
//Escribe el segundo comentario
trace ('datosXML.comentario[1].email:
',datosXML.comentario[1].email);
trace ('datosXML.comentario.email[1]:
',datosXML.comentario.email[1]);
//Los dos anteriores escriben el email del segundo
comentario.

“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
136

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


En el ejemplo hemos accedido a un archivo .xml, pero podemos hacerlo con
cualquier archivo que contenga la información XML debidamente
estructurada. Por ejemplo, es muy frecuente utilizarlo llamando a un archivo
PHP que genera el XML de forma dinámica.

Haremos referencia a este mismo ejemplo al final del tema. Si quieres
probarlo, encontrarás el archivo XML en la carpeta
ejercicios/cargarXMLyCSS. Recuerda, que para poder porbarlo antes hay
que guardarlo.

19.7. HTML y CSS en cajas de texto
Si recordamos el ejemplo anterior, tras mostrar el contenido del XML,
obteníamos el siguiente texto en comentarios_text, una caja de texto:
?
1
2
3
4
5
6
7
8
<a href="mailto:ana@correo.com">ana</a>: <span
class="mensaje">si actualizo aquí se verá en otra
ventana?</span>
<br>
<a href="mailto:jesus@correo.com">jesús</a>: <span
class="mensaje">pues ya estamos todos</span>
<br>
<a href="mailto:emilio@correo.com">emilio</a>: <span
class="mensaje">yo también me apunto</span>
<br>
<a href="mailto:david@correo.com">david</a>: <span
class="mensaje">bien, pero trae algo para cenar, no tengo
nada en la nevera</span>
<br>

Pero lo normal es que si escribimos código HTML es porque queremos que
se vea con un determinado formato, no las etiquetas HTML.
Para que Flash tome el contenido como HTML, en vez de utilizar la
propiedad comentarios_text.text empleamos comentarios_text.htmlText
para establecer el texto.
Pero no sólo queremos ocultar las etiquetas, queremos formatear el texto
debidamente utilizando la siguiente hoja de etilos, que tenemos en el archivo
estilo_comentarios.css:
?
1
2
3
4
5
6
7
8
.mensaje {
font-style: italic;
color: #2C578F;
}
a {
font-weight: bold;
color: #CF406E;
}
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
137

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Podemos distinguir dos estilos: uno aplicado a los elementos con la clase
mensaje (class="mensaje") y otro aplicado a los enlaces (<a href...).
Como siempre, e independientemente de para qué lo usemos, cargamos la
información del archivo con un objeto URLLoader, y preparamos el evento
complete, para utilizar los datos cuando estén listos:
?
1
2
3
var cargadorCSS:URLLoader=new URLLoader();
cargadorCSS.load(new URLRequest('comentarios.css'));
cargadorCSS.addEventListener('complete',
estiloCargado);

El objeto que nos permite utilizar las propiedades CSS es del tipo
StyleSheet. Lo declaramos, y cuando el cargador tenga los datos listos es su
propiedad .data, se los asignamos a la hoja de estilo con su método
parseCSS. Y para acabar, con la propiedad styleSheet de la caja de texto
indicamos que usará nuestra hoja.
?
1
2
3
4
5
6
7
var miHojaEstilo:StyleSheet = new StyleSheet();
function estiloCargado(event):void {
//Convertimos los datos cargados
miHojaEstilo.parseCSS(cargadorCSS.data);
//E indicamos a la caja de texto que use esta hoja
comentarios_text.styleSheet = miHojaEstilo;
};

Esto debemos de realizarlo antes de rellenar la caja de texto con HTML,
ya que flash no trata igual el HTML si no tiene una hoja de estilo asociada.
Si queremos podemos cambiar la propiedad para utilizar otra hoja de estilo.
O aprovechando las funciones y objetos definidos, podemos crear un botón
para que cargue una nueva hoja:
?
1
2
3
4
5
btn.addEventListener(MouseEvent.CLICK, cambiarHoja);
function cambiarHoja(event) {
cargadorCSS.load(new
URLRequest('comentarios2.css'));
}

Como el cargador ya tiene asociado el evento complete, se volverá a
ejecutar la función estiloCargado asignando el nuevo estilo.



“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
138

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ejercicios unidad 19: Formularios - ActionScript
Ejercicio 1: Formulario
Deberás reproducir el siguiente formulario Flash:

También deberás establecer el orden de tabulación de los objetos y el
botón por defecto.

Además, deberás darle funcionalidad al botón Reset y Enviar. El primero
limipando los datos del formulario y el segundo recogiendolos validándolos y
enviandolos a un archivo php.

El validador del email deberá comprobar que la dirección esta correctamente
escrita (para ello utiliza función indexOf y lastIndexOf).
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.

Ayuda ejercicios unidad 19: Formularios -
ActionScript
Ejercicio 1: Formulario
1. Abre el programa Flash CS5.
2. Crea un nuevo documento haciendo clic en Archivo → Nuevo.
3. Selecciona Documento de Flash en el diálogo que se abrirá y pulsa
Aceptar.
4. Se abrirá un documento en blanco. Lo guardaremos para darle un
nombre y poder guardar nuestros progresos de vez en cuando. Para
ello haz clic en Archivo → Guardar. Dale un nombre, selecciona una
carpeta y pulsa Guardar.


“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
139

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


Ahora podrás guardar el documento siempre que quieras pulsando
Ctrl + S o haciendo clic en Archivo → Guardar.
5. Primero insertaremos los elementos de formulario que vamos a
utilizar, para ello antes tendremos que abrir el Panel Componentes
desde Ventana → Componentes.
6. Haz clic sobre el elemento User Inteface y arrastra a la Biblioteca
los siguientes elementos: Button, CheckBox, ComboBox, Label,
RadioButton y TextInput.
7. Ahora que ya tenemos los elementos que necesitaremos vamos a
crear instancias de ellos en el Escenario. Arrastra un elemento
TextInput y un Label al Escenario.
8. En el Panel Inspector de Componentes (Ventana -- Inspector de
Componentes) modificaremos el campo text de Label a Nombre:.
Le daremos a TextInput el nombre de instancia nombre_txt.
9. Arrastramos otro TextInput y un Label al Escenario, en el Inspector
de Componentes modificamos el campo text de Label a Apellidos:
y le damos a TextInput el nombre de instancia apellidos_txt.
10. Arrastramos otro TextInput y un Label al Escenario, en el
Inspector de Componentes modificamos el campo text de Label a
E-mail: y le damos a TextInput el nombre de instancia mail_txt.
11. Arrastramos un elemento ComboBox al Escenario, en el
Inspector de Componentes modificamos el campo data y añadimos
la siguiente lista de elementos:
?
1
2
3
4
5
word
excel
access
powerp
outlook
12. En el campo labels introduciremos la siguiente lista de
elementos:
?
1
2
3
4
5
Microsoft Word
Microsoft Excel
Microsoft Access
Microsoft PowerPoint
Microsoft Outlook
13. Le damos el nombre de instancia producto_cmb.
14. Arrastramos de la Biblioteca tres componentes RadioButton
al Escenario, en el Panel Parámetros les daremos los siguientes
valores:
?
1
2
Botón de opción 1:
nombre de instancia: buscadores_rdo
groupName=encontrar
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
140

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
label= Buscadores
selected=true
value=buscadores

Botón de opción 2:
nombre de instancia: publicidad_rdo
groupName=encontrar
label= Publicidad
selected=false
value=publicidad

Botón de opción 3:
nombre de instancia: otros_rdo
groupName=encontrar
label= Otros:
selected=false
value=otros
15. Arrastramos un componente TextInput que situaremos a la
derecha del botón de opción Otros, en el Inspector de
Componentes le cambiaremos el campo editable a false y le
daremos el nombre de instancia otros_txt.
16. Arrastramos un componente CheckBox al Escenario, en el
Inspector de Componentes cambia el campo label a Desea recibir
información de nuestras novedades, y el campo selected a true.
17. Dale el nombre de instancia info_chk.
18. Arrastra dos componentes Button al Escenario, en el
Inspector de Componentes dale a uno el valor Reset en label y el
nombre de instancia reset_btn. Al otro llámale enviar_btn y
modifica el campo label a Enviar.
19. Ya tenemos todos los objetos de formulario en la película.
Selecciona la herramienta Transformación Libre y modifica los
anchos de aquellos elementos que, o bien no se puedan leer
completamente, o necesiten más espacio (como los campos
apellidos, email y productos).
20. Una vez tengas el formulario entero haz clic sobre la
herramienta Selección y emplaza los objetos de manera correcta.
21. Ahora pasaremos a crear las acciones. Para ello creamos una
nueva capa haciendo clic en el botón Insertar capa en la línea de
tiempos y la llamamos acciones.
22. Seleccionamos el fotograma 1 de la capa acciones y abrimos
el Panel Acciones (Ventana → Acciones).
23. Al principio del todo escribimos:
?
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
141

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


1
2
stop();
System.useCodepage = true;
Paramos la animación en la primera línea, no necesitamos que haga
nada más porque no existen más fotogramas. Si no lo hiciésemos
estaría reproduciéndose todo el rato el fotograma 1 una vez detrás
de otra.

Con la segunda línea hacemos que Flash utilice la página de códigos
tradicional del sistema operativo en el que se ejecuta el reproductor
para que los acentos y eñes que escribamos se envíen
correctamente al archivo php que enviará el formulario por mail.
24. Ahora escribe lo siguiente:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
nombre_txt.tabIndex = 1;
apellidos_txt.tabIndex = 2;
mail_txt.tabIndex = 3;
producto_cmb.tabIndex = 4;
buscadores_rdo.tabIndex = 5;
publicidad_rdo.tabIndex = 6;
otros_rdo.tabIndex = 7;
otros_txt.tabIndex = 8;
info_chk.tabIndex = 9;
reset_btn.tabIndex = 10;
enviar_btn.tabIndex = 11;

import fl.managers.FocusManager;
var def:FocusManager = new FocusManager (this);
def.defaultButton = enviar_btn;

nombre_txt.stage.focus=nombre_txt;
Esto hará que se establezca el orden de tabulación. Las últimas
líneas establecen el botón Enviar como el botón por defecto y
colocan el foco en el campo Nombre.
25. Seguimos con:
?
1
2
3
4
5
6
7
8
9
reset_btn.addEventListener(MouseEvent.CLICK,
escuchadorLimpiar);
function escuchadorLimpiar(event) {
nombre_txt.text="";
apellidos_txt.text="";
mail_txt.text="";
producto_cmb.selectedIndex=0;
buscadores_rdo.selected=true;
otros_txt.text="";
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
142

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


10
11
12
otros_txt.editable=false;
info_chk.selected=true;
salida_txt.text="";
}
Para limpiar los campos cuando se pulse el botón Reset. Hemos
creado un escuchador asociado al botón reset_btn. Dentro del
evento click inicializamos todos los campos a sus estados iniciales.
26. Después escribimos:
?
1
2
3
4
5
6
7
8
9
10
11
otros_rdo.addEventListener(Event.CHANGE,
escuchadorOtros);
function escuchadorOtros(event) {
if (otros_rdo.selected) {
otros_txt.editable=true;
otros_txt.stage.focus = otros_txt;
} else {
otros_txt.text="";
otros_txt.editable=false;
}
}

Aquí hemos configurado un escuchador para el boton otros_rdo, si
este se encuentra seleccionado otros_txt será editable y el foco se
pasara allí. Si no se encuentra seleccionado, se vacía el contenido
de otros_txt y deja de ser editable.
27. Ahora escribe la parte de envío:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
enviar_btn.addEventListener("click", verificar);
function verificar(event) {
salida_txt.text="";
if (nombre_txt.text.length==0) {//Verificación
del Nombre
salida_txt.text="No ha Introducido su
nombre";
nombre_txt.stage.focus=nombre_txt;
return false;
} else if (apellidos_txt.text.length == 0)
{//Verificación del Apellido
salida_txt.text="No ha Introducido sus
apellidos";
apellidos_txt.stage.focus=apellidos_txt;
return false;
} else if (!esMail(mail_txt.text))
{//Verificación del correo
salida_txt.text="No ha Introducido un correo
electrónico válido";
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
143

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
mail_txt.stage.focus=mail_txt;
return false;
} else if (otros_rdo.selected &&
otros_txt.text.length == 0) {//Verificación de
otros_txt
salida_txt.text="Indique dónde nos econtró";
otros_txt.stage.focus=otros_txt;
return false;
}

//Guardamos las variables para el envio
var envio:URLVariables = new URLVariables();
envio.nombre=nombre_txt.text;
envio.apellidos=apellidos_txt.text;
envio.email=mail_txt.text;
envio.producto=producto_cmb.selectedItem;
if (buscadores_rdo.selected) {
envio.encontrar=buscadores_rdo.value;
} else if (publicidad_rdo.selected) {
envio.encontrar=publicidad_rdo.value;
} else if (otros_rdo.selected) {
envio.encontrar=otros_txt.text;
}
envio.masinfo=info_chk.selected;
//Envio a la pagina .php
var urlPhp:URLRequest=new
URLRequest("http://www.aulaclic.es/flash-
cs5/flash_ejemplos/formulario/enviarCorreo.php");
urlPhp.method=URLRequestMethod.POST;
urlPhp.data=envio;

var enviar:URLLoader = new URLLoader();
enviar.addEventListener( Event.COMPLETE, enviado
);//Si es enviado, realizara la función enviado
enviar.addEventListener( IOErrorEvent.IO_ERROR,
erroNoEnvio );//Si ocurre un error, realizara la
función errorNoEnvio
enviar.load( urlPhp );

trace(envio);


}
//Función para vereificar el correo
function esMail(mail:String) {
if
(mail.indexOf("@")>0&&mail.indexOf("@")==mail.lastInd
exOf("@")) {
“Más Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo murió por
nosotros”. Rm, 5:8
144

I ng. CI P HerberthAranda Rojas hhharanda@yahoo.com


P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
é
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a

.

J
n
.

3
:
1
6


68
69
70
71
if
(mail.lastIndexOf(".")>mail.indexOf("@")+1&&mail.last
IndexOf(".")) {
return true;
} else {
return false;
}
} else {
return false;
}
}

//Función si és enviado
function enviado( e:Event ):void {
escuchadorLimpiar();
salida_txt.text="Mensaje enviado!";
}
//Función si no és enviado
function erroNoEnvio( e:IOErrorEvent ):void {
salida_txt.text="Error intenta nuevamente.";
}
Hemos configurado un escuchador para el botón Enviar. Cuando se
hace clic en él se ejecuta todo este código.

Presta especial atención a la validación del email.
28. El archivo enviarCorreo.php podría tener esta estructura:
?
1
2
3
4
5
6
7
8
9
10
11
<?php
header("Cache-Control: no-cache, must-revalidate");
$mensaje = $_POST['nombre'] . " " .
$_POST['apellidos'] . " ";
$mensaje .= "(" . $_POST['email'] . ")\r\n\n";
$mensaje .= "Quiere información sobre: " .
$_POST['producto'] . "\r\n\n";
$mensaje .= "Conoció la web a través de " .
$_POST['encontrar'] . "\r\n\n";
$mensaje .= ($_POST['masinfo'] ? "Sí" : "No") . "
quiere más información.\r\n";
$cabeceras = "From: webmaster@dominio.com" . "\r\n" .
"Reply-To: webmaster@dominio.com" . "\r\n";
mail('nombre@correo.com', 'Formulario', $mensaje,
$cabeceras);
echo ("exito=true");
?>
Pero esto queda totalmente en tus manos.