Anda di halaman 1dari 32

Unidad

24. Animaciones Bsqueda


avanzadas (I)

Movimiento de objetos mediante ActionScript

Para poder mover objetos con ActionScript debemos conocer el sistema


de coordenadas utilizado por Flash.

La esquina superior izquierda es la posicin x=0, y=0. (ver la imagen)

Para mover un objeto debemos modificar su posicin definida por las


propiedades objeto._x y objeto._y

Por ejemplo, si hacemos objeto._x += 10 estamos desplazando el


objeto 10 pxeles hacia la derecha.

Vamos a ver como mover un objeto a partir de este ejemplo de una bola
botando.

El algoritmo es muy sencillo, se trata de ir modificando la posicin de la bola


desde una posicin inicial para que vaya bajando hasta que llegue al suelo, en
ese momento invertimos el movimiento para que suba y calculamos hasta donde
tiene que subir. As sucesivamente hasta que deje de botar.

Para que la bola baje debemos sumar una cantidad a la coordenada y, y para que
suba debemos restarle una cantidad. Si queremos que la bola se vaya desplazando
hacia la derecha debemos sumar una cantidad a la coordenada x.

Cuando la bola baja, segn el esquema de la derecha, pasa de la posicin (x 1, y1) a


la posicin (x2, y2), para ello se incrementa la x con el valor incre_x (que estaria
representado por la lnea azul) y se incrementa la y con el valor incre_y (que estaria
representado por la lnea roja).

Cuando la bola sube, la nica diferencia es que la coordenada y va disminuyendo


en lugar de aumentando, segn el esquema de la derecha, al subir se pasa de la
posicin (x'1, y'1) a la posicin (x'2, y'2), para ello se incrementa la x con el
valor incre_x (que estaria representado por la lnea azul) y se decrementa la y con el
valor incre_y (que estaria representado por la lnea roja)
Vamos a ver lo ms importante del cdigo ActionScript que tenemos un poco ms
abajo.

Hemos definido creado una bola azul y la hemos convertido en un movieclip, la


instancia se llama bola_mc.

Inicialmente la bola esta en la posicin (bola_mc._x= 0,bola_mc._y= 0)

Mediante la variable baja, sabremos si la bola esta bajando o subiendo. Cuando la


coordenada y llega al suelo, la bola pasar a subir, cuando la coordenada y llegue al
tope la bola comenzar a bajar.

En cada bote la bola ira perdiendo fuerza y el bote sera ms bajo, la


variable elasticidad determinar esta perdida de potencia.

Cada vez que la bola llega al tope calculamos el nuevo tope, para ello calculamos
la distancia de la bola al suelo, la dividimos por la elasticidad y esa cantidad se la
sumamos al tope.

En el esquema, la linea naranja representa esa cantidad que le sumamos al tope


1 para pasar al tope 2.

Ya tenemos nuestro cdigo casi preparado, ahora slo falta hacer que el proceso se
repita un nmero determinado de veces. Esta pelcula Flash slo tiene un fotograma.
Cmo hacemos esto? Lo primero que se nos ocurre es incluir una
instruccin while ... o una instruccin for ... , si lo hacemos veremos que no
funcionar porque la repeticin es tan rpida que no da tiempo a ver nada.

La solucin est en introducir una instruccin que haga que el proceso se repita
cada 35 milisegundos. Esto lo vamos a ver en el punto siguiente.

Hemos colocado un botn en la pelcula de forma que cada vez que se pulsa, se
detine la ejecucin (si todava no haba acabado) y se lanza una nueva ejecucin.
Cuando el tope llega al suelo se detine la ejecucin.

on (release) {

var baja:Boolean = true;

var incre_x:Number = 3.5;

var incre_y:Number = 8;

var suelo:Number = 280;

var tope:Number = 0;

var elasticidad:Number = 3;

bola_mc._y = 0;

bola_mc._x = 0;

tope += (suelo - bola_mc._y) / elasticidad;

var repeticion:Number;

function botar() {

if (baja) { // baja

bola_mc._y += incre_y;

bola_mc._x += incre_x;

if (bola_mc._y>=suelo) {

baja = false;
}

} else { // sube

bola_mc._y -= incre_y;

bola_mc._x += incre_x;

if (bola_mc._y<=tope) {

baja = true;

if (tope>=suelo) {

incre_y = 0;

clearInterval(repeticion);

tope += (suelo -
bola_mc._y) / elasticidad;

clearInterval(repeticion);

repeticion = setInterval(botar, 35);

}
En este sencillo ejemplo la trayectoria de la bola es rectilnea, para que fuese un
movimiento ms real debera seguir una trayectora curva. Dibujar curvas es un poco
ms complicado que dibujar rectas. Flash nos ofrece una opcin ms sencilla para
hacer que un objeto siga una trayectoria curva: las guas de movimiento que
veremos en este mismo tema aplicadas al bote de una pelota.

De todas formas si deseas probar suerte con las curvas y ActionScript


realiza el ejercicio Espiral para empezar a familiarizarte con ellas.

Ejercicio. Unidad 24.


Bsqueda
Movimiento en Espiral

Objetivo.

Reproduciremos la pelcula que puedes ver a continuacin:

Ejercicio paso a
paso.

1. Abre el archivo espiral.fla que encontrars en la


carpeta ejercicios/espiral del curso.

2. Haz clic en el fotograma 2 de la capa acciones.

3. Abre el Panel Acciones pulsando la tecla F9.

4. Escribe lo siguiente:

5. _global.velocidad = 0.2;
6.
7. _global.distancia = 5;
8.
_global.recorrido = 30;

9. Cierra el Panel Acciones y selecciona la bola.

10. Vuelve a abrir el Panel Acciones y escribe lo siguiente:

11. onClipEvent (enterFrame) {


12.
13. if (recorrido>0) {
14.
15. var i:Number = distancia*recorrido;
16.
17. this._x =
Math.round(i*Math.cos(recorrido)) + Stage.width/2;
18.
19. this._y = Math.round(i*Math.sin(recorrido))
+ Stage.height/2;
20.
21. recorrido -= velocidad;
22.
23.
24.
25. var radianes:Number =
Math.atan2((this._x-Stage.width/2), (this._y-
Stage.height/2));
26.
27. var grados:Number =
Math.round(radianes*180/Math.PI);
28.
29. this._rotation = -grados+5;
30.
31.
32.
33. this._xscale = recorrido * 5;
34.
35. this._yscale = this._xscale;
36.
37. }
38.
}

Como puedes ver calculamos el ngulo de la bola respecto al


centro de la pantalla, le damos un desajuste de 5 grados para que
parezca ms real.
En cuanto a la escala puedes ver que va en relacin al recorrido.
El movimiento de la bola lo hemos sacado de la frmula de
la espiral de Arqumedes. Podrs encontrar informacin sobre
ella en la red.

Unidad
24. Animaciones Bsqueda
avanzadas (II)

Funcin setInterval y propiedad onEnterFrame

La funcin setInterval se utiliza cuando queremos que se


repita la
ejecucin de un cdigo ActionScript cada cierto nmero de
milisegundos, y la propiedad onEnterFrame se utiliza cuando
queremos ejecutar un cdigo ActionScript en funcin de la
velocidad de la pelcula Flash.
Estas funciones se pueden utilizar para controlar el tiempo cuando
utilizamos ActinScript y no nos interesa utilizar los fotogramas como forma
de control del tiempo.

Por ejemplo, podemos genera un objeto y hacer que se mueva un 5 pixels


cada 30 msg. variando estos parmetros conseguiremos que el objeto se
mueva ms o menos rpido.
setInterval
El formato de esta funcin es el siguiente:
var retardo:Number = setInterval(

functionReference:Function,
interval:Number, [param1:Object,
param2, ..., paramN]);

Donde,

functionReference es la funcin que se va a repetir.

interval es el nmero de milisegundos que van a


transcurrir entre cada llamada a la funcin.

[param1:Object, param2, ..., paramN] es la lista opcional


de parmetros que se pasan a la funcin.

retardo es una variable que identifica el intervalo y que


sirve para utilizarlo con clearInterval() para detener la
ejecucin.

Por ejemplo, el codigo siguiente escribe 10 veces el


mensaje "contador" i , cada 2000 milisegundos (2 sg.).
var i:Number = 1;

var repeticion:Number =
setInterval(contar, 2000);

function contar() {

trace("contador: "+ i++);

if (i>10) {

clearInterval(repeticion);

}
La funcion clearInterval sirve para detener la
ejecucin de la funcin llamada desde setInterval. Por lo
tanto, conviene utilizar clearInterval siempre que
usemos setInterval, para evitar que la ejecucin contine
indefinidamente.

En el ejemplo del punto anterior hemos definido la funcin


gobal setInterval para que la funcin botar se ejecute cada
35 milisegundos.

onEnterFrame
El controlador de eventos onEnterFrame, asociado al
objeto MovieClip, permite invocar a una funcin de
forma repetida tantas veces como fotogramas
por segundo tenga definida la pelcula.
Por ejemplo, en el movieClip bola_mc:
var i:Number =0;
bola_mc.onEnterFrame = function() {

trace("ejecutando: "+ ++i);

if ( i > 30 ){

delete this.onEnterFrame;

Si la velocidad de la pelcula es de 12 fps, este cdigo


escribira en la salida 12 lneas por segundo, de esta
forma:

ejecutando:1

ejecutando:2

ejecutando:3

...
Como puedes ver hemos aadido una condicin para
que cuando el valor de i sea mayor de 30 acabe la
ejecucin del controlador onEnterFrame y as evitar que se
ejecute indefinidamente.

Aunque con este ejemplo no lo parezca, (slo pretende explicar la


funcin) estas dos tipo de funciones que se ejecutan repetitivamente pueden
ser muy tiles en determinadas ocasiones. A lo largo del cursos ya hemos
visto algunos ejemplos de su utilidad, a continuacin veremos otro ejemplo
que puede sernos til.

Imagnate que quieres que tu pelicula se detenga durante 2


segundos y luego continue. Esta es una forma de hacerlo utilizando la
funcin setInterval.

Colocariamos este cdigo en el frame que deseemos, llamamos


a setInterval con 1 sg (1000 milisg) y cuando se hallan cumplido dos
llamadas detenemos setInterval y continuamos con el siguiente frame de la
pelcula.
var tope:Number = 1;

var repeticion:Number = setInterval(parar,


1000);

function parar() {

tope++;

if (tope > 2) {

clearInterval(repeticion);

nextFrame();

play();

}
}

stop();

Unidad
24. Animaciones Bsqueda
avanzadas (III)

Movimiento de objetos
mediante gua

En esta unidad ya hemos visto como hacer botar una bola mediante
ActionScript, ahora vamos a recordar una tcnica que ya vimos en la
unidad 9, animacin mediante gua de movimiento.
En este caso, se trata de imitar el bote de una pelota, por lo tanto,
dibujamos una curva que imite dicho bote.
De esta forma conseguiremos una animacin que resulta ms natural que el
bote con trayectora recta que vimos en el punto anterior.

En las imgenes podrs ver que proceso hemos seguido para


dibujar el movimiento.

La gua la hemos dibujando sucesivas curvas de modo que la


pelota invite el movimiento que queremos crear.

Para darle mayor realismo hemos insertado fotogramas


claves en puntos crticos para achatar la pelota y dotarla
de elasticidad.
Ahora podrs combinar muchas de las tcnicas que hemos aprendido para
generar algo as:
(Haz clic en la pelcula y luego usa las teclas de movimiento a derecha e
izquierda)

Hemos visto dos tcnicas diferente para animar un objeto en


Flash, mediante ActionScript y mediante gua de movimiento.
Segn cada caso concreto resultar ms adecuado eligir una u otra tcnica.
En general, resulta ms fcil y rpido utilizar guas de movimiento que
ActionScript, sobre todo si el movimiento que tiene que seguir el objeto es
sinuoso y dificil de definir en trminos de una ecuacin matemtica.
Hay casos en los que ser ms adecuado utilizar ActionScript y otros casos
en los que slo ser posible crear el movimiento mediante ActionScript,
por ejemplo, si queremos que un objeto se mueva de forma aleatoria por un
escenario.

Animaciones de rostros

Una de las bases para hacer animaciones de personajes es la animacin de rostros, en esta
pequea introduccin aprenderemos cmo hacer que un rostro pase de la risa al enfado.
Todos sabemos que un rostro sonriente tiene las cejas, los ojos y la boca en distinta posicin
que un rostro enfadado. Vamos a ver como con unas sencillas tranformaciones de forma y de
color obtenemos un buen resultado.

Lo primero que hay que tener en cuenta es dibujar los elementos que
tienen que moverse en una capa propia, as crearemos una capa para la
boca, cejas, etc.

Dibujamos la boca con herramienta Linea, en el fotograma 1, y creamos


un frame clave en el fotograma 17. Para convertir la lnea recta en una curva,
volvemos al fotograma 1 y activamos la herramienta Seleccin y nos
aseguramos de que la lnea de la boca NO este seleccionada. Ahora
acercamos el cursor a la lnea y cuando aparezca una pequea lnea curva
debajo del cursor hacemos clic y arrastramos hacia abajo, asi tendremos una
boca sonriente. Vamos alfotograma 17 y hacemos lo mismo pero arrastrando
hacia arriba para conseguir una boca enfadada.

Es importante que arrastres desde el centro de la lnea y en direccin


perpendicular para que quede una curva simtrica. En el caso de las cejas,
nos interesa que la curva no sea simtrica y deberemos arrastrar desde un
lateral de la lnea en lugar de desde el centro.
Sencillo, verdad?

Unidad
24. Animaciones Bsqueda
avanzadas (V)

Animaciones geomtricas en 3D

Vamos a ver como crear una animacin de una caja girando en tres
dimensiones.

Para abordar una animacin de este tipo, evidentemente, debemos


conocer como dibujar objetos en tres dimensiones. Hay varios tipos de
perspectiva que se pueden utilizar: a) perspectiva caballera b) perspectiva
isonomtrica y c) perspectiva cnica.

Estudiar perspectiva no es el objeto de este curso por lo tanto no vamos a


ser muy estrictos al hacer los dibujos y como consecuencia de ello el
resultado final tampoco va a ser una animacin perfectamente realista, pero
lo que tratamos de explicar es nicamente el proceso de animacin.

Se trata de hacer girar una caja desde una posicin inicial hasta una
posicin fila. Para hacer la animacin debemos dibujar la caja en varias
posiciones intermedias. A continuacin crearemos animaciones de forma
para cada una de las caras visibles de la caja.
Hay que tener en cuenta que inicialmente la cara de la derecha no es
visible, pero se ira haciendo visible segn avance el giro.

Luego deberemos introducir interpolaciones entre las diferentes


posiciones para terminar con un resultado parecido a este:

Animaciones con movimientos complejos

Existen multitud de movimientos complejos que se pueden imitar con animaciones Flash,
es evidente que no podemos verlos todos, por lo tanto hemos elegido uno bastante comn y
que nos puede servir como base para explicar unos cuantos conceptos. Se trata de imitar el
movimiento de una persona corriendo. Esperamos que con estas explicaciones seas capaz
de realizar variaciones ms complejas, como podrian ser hacer que el mueco practicase
diferentes deportes.

Vamos a explicar cmo realizar la animacin que puedes ver en esta pgina. Para
simplificar hemos dibujado una persona de forma esquemtica.

A la hora de plantearnos cmo realizar una animacin de este tipo, lo primero que
debemos hacer es analizar el movimiento para ver si est compuesto por elementos que se
repiten, o si se puede separar en distintos componentes o cualquier otra situacin que nos
permita simplificar la animacin.

En el caso que nos ocupa podemos separar el movimiento de las distintas partes del
cuerpo, piernas, brazos, cabeza y tronco. Tambin podriamos aadir manos y pies pero no lo
haremos para no complicar demasiado la explicacin.

Hemos creado una capa para cada parte del cuerpo, como puedes ver en esta imagen.
Otra circunstancia que podemos observar es que el movimiento del brazo izquierdo y del
brazo derecho son muy parecidos, se diferencian en la distinta posicin de partida. Por lo
tanto bastar con realizar un movimiento que nos servir para ambos brazos. Lo mismo ocurre
con las piernas.

A su vez, podemos separar el movimiento del brazo en dos movimientos, uno cuando el
brazo avanza (va desde la posicin ms atrasada hasta la posicin ms adelantada) , y otro
cuando el brazo retrocede (va desde la posicin ms adelantada hasta la ms atrasada). De
esta forma, con dos movieclips podremos representar el movimiento de ambos brazos. Los
movieclips son idnticos salvo en el sentido del movimiento.

En esta imagen puedes ver el


movie clip "brazo_adelante",
hemos creado una capa para la
parte superior del brazo y hemos
hecho que gire sobre su extremo
superior (hombro). Para el
antebrazo henos creado otra capa
con su capa gua, la capa gua
sirve para que la parte superior
del antebrazo siga la trayectoria
que describe el extremo inferior
(codo). Tambin hemos incluido
un giro en el antebrazo.

En esta imagen intentamos explicar como estn colocados los dos movieclips que forman el
movimiento de los brazos en la lnea del tiempo..

El brazo izquierdo comienza con el movie clip "brazo_adelante" y contina con el movie
clip "brazo_atras", mientras que el brazo derecho comienza con el movie clip "brazo_atras" y
contina con el movie clip "brazo_adelante", de esta forma cuando el brazo izquierdo avance
el brazo derecho retroceder.
Slo nos queda ver un detalle
interesante.

Hemos considerado idnticos el


movimiento del brazo hacia
adelante y del brazo hacia atrs y
la animacin queda bastante bien.

Sin embargo Podemos decir lo


mismo del movimiento de las
piernas?

Claramente no, ya que cuando la


pierna va hacia atrs debe
apoyarse en el suelo, mientras que
cuando va hacia adelante no debe
tocar el suelo.

Si comparas las dos imgenes


de la derecha podrs observar
como hemos incluido un fotograma
clave en
la "pierna_adelante" para poder
mantener la pantorrilla en posicin
ms horizontal y que no toque el
suelo.

API de dibujo. Creando dibujos con ActionScript


En este apartado aprenderemos a manejar el API de dibujo de Flash.

Su uso es muy claro y sencillo, bastar con que comprendas unas cuantas instrucciones.

Antes de empezar a dibujar debers tener un clip donde hacerlo, para ello nos crearemos
un clip vaco utilizando la funcin createEmptyMovieClip():
this.createEmptyMovieClip("miClip",
this.getNextHighestDepth());

Como puedes ver, le pasamos dos parmetros, el primero ser el nombre de instancia al
cual nos referiremos para modificar las propiedades del clip.

El segundo parmetro indica el nivel de profundidad del clip. Hemos utilizado la


funcin getNextHighestDepth() para averiguar cul es el nivel superior en este clip y as
posicionar nuestro dibujo en la parte superior (as no lo tapar ningn otro objeto).

Una vez creado el clip podemos pasar a dibujar sobre l.

Hacerlo es muy fcil, slo debers inicializar el proceso de dibujo escribiendo:


miClip.beginFill(color, alfa);

Donde color indicar el color de relleno que se le aplicar al dibujo. Deber estar en
hexadecimal, por ejemplo: 0x000000.

El parmetro alfa indicar la transparencia del relleno.

Luego nos valdremos de un par de funciones:


miClip.moveTo(x, y);

Esto hace que el punto de dibujo se coloque en las coordenadas especificadas. Podemos
empezar a pintar a partir de la coordenada (100, 100), por ejemplo.
Luego nos quedar solamente dibujar lneas en el espacio que contendrn el relleno de
nuestro dibujo. Utiliza la instruccin lineTo():
miClip.lineTo(x, y);

Esto har que el punto de dibujo se desplace hasta la posicin (x, y), desde donde se crear
el siguiente trazo de dibujo.
miClip.beginFill(0xFF0000);

miClip.moveTo(10, 10);

miClip.lineTo(10, 100);

miClip.lineTo(100, 100);

miClip.lineTo(100, 10);

miClip.lineTo(10, 10);

miClip.endFill();

Terminamos la instruccin con endFill().

Este ejemplo dibujara un cuadrado en la posicin (10, 10). Sencillo, verdad?

Podemos establecer el tipo de lnea que rodear al dibujo escribiendo lo siguiente:


miClip.lineStyle(grosor, color, alfa, trazos, escala,
extremos, uniones, limiteEsquinas);

Nota: Esta instruccin deber estar colocada antes de utilizar la funcin beginFill(),
quedara de esta forma:
miClip.lineStyle(1, 0x000000, 100);

miClip.beginFill(0xFF0000);
miClip.moveTo(10, 10);

miClip.lineTo(10, 100);

miClip.lineTo(100, 100);

miClip.lineTo(100, 10);

miClip.lineTo(10, 10);

miClip.endFill();

Ahora explicaremos en detalle los parmetros de esta instruccin:

grosor: un nmero de 0 a 255 que indicar el grosor del borde.

color: en hexadecimal, el color del borde.

alfa: nivel de transparencia del borde, de 0 a 100.

trazos: valor booleano, har que los anclajes de las lneas y curvas se realicen de forma exacta. De
este modo los trazos se dibujarn a pxeles exactos en cualquier grosor (as no se vern lneas
imprecisas).

escala: especifica cmo se tendr que efectuar la escala del borde. Sus valores pueden
ser "normal", que toma el modelo predeterminado; "none", que obliga a no cambiar nunca la escala
del borde; "vertical", que no cambiar la escala si el objeto slo cambia su escala vertical;
y "horizontal", que no cambiar la escala si el objeto slo cambia su escala horizontal.

extremos: define cmo se dibujarn los extremos de los bordes,


uniones: establece el tipo de uniones que se establecern en el borde,

limiteEsquinas: un nmero entre 1 y 255, indica la distancia de la esquina al trazo real,

Ejercicios Tema 24 :
Animaciones Bsqueda
Avanzadas

Ejercicio 1: Nieve
Debers reproducir la siguiente animacin Flash:

Utiliza un documento en blanco. No podrs crear ningn elemento. Lo


debers hacer todo mediante ActionScript.

Tendrs cumplir los siguientes requisitos:

Dibujar un fondo.

Dibujar una estrella.

Que la estrella tenga un brillo dinmico.

Que la estrella se pueda arrastrar.

Dibujar los copos aleatoriamente.

Que los copos desaparezcan (se derritan) al cabo de un tiempo.

Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.

Ejercicios Tema 24:


Animaciones Bsqueda
Avanzadas
Ejercicio 1: Nieve

1. Abre un nuevo documento haciendo clic en Archivo Nuevo.

2. Selecciona Documento de Flash y pulsa Aceptar.

3. Selecciona el fotograma 1 y abre el Panel


Acciones desde Ventana Acciones.

4. Escribe los siguiente para dibujar el fondo:

5. this.createEmptyMovieClip("fondo",
this.getNextHighestDepth());
6.
7. fondo.beginFill(0x993333);
8.
9. fondo.moveTo(0,0);
10.
11. fondo.lineTo(Stage.width, 0);
12.
13. fondo.lineTo(Stage.width,
Stage.height);
14.
15. fondo.lineTo(0, Stage.height);
16.
17. fondo.lineTo(0, 0);
18.
fondo.endFill();

19. Escribe lo siguiente para dibujar la estrella y situarla en el medio de la


pantalla:

20. this.createEmptyMovieClip("estrella",
this.getNextHighestDepth());
21.
22. estrella.lineStyle(10, 0x000000, 100, true,
"normal", "none", "miter", 0);
23.
24. estrella.beginFill(0xCCFF33, 85);
25.
26. estrella.moveTo(20+Stage.width/2,
-91+Stage.height/2);
27.
28. estrella.lineTo(22+Stage.width/2,
-21+Stage.height/2);
29.
30. estrella.lineTo(84+Stage.width/2,
0+Stage.height/2);
31.
32. estrella.lineTo(22+Stage.width/2,
21+Stage.height/2);
33.
34. estrella.lineTo(20+Stage.width/2,
91+Stage.height/2);
35.
36. estrella.lineTo(-22+Stage.width/2,
37+Stage.height/2);
37.
38. estrella.lineTo(-86+Stage.width/2,
56+Stage.height/2);
39.
40. estrella.lineTo(-50+Stage.width/2,
0+Stage.height/2);
41.
42. estrella.lineTo(-86+Stage.width/2,
-56+Stage.height/2);
43.
44. estrella.lineTo(-22+Stage.width/2,
-37+Stage.height/2);
45.
46. estrella.lineTo(20+Stage.width/2,
-91+Stage.height/2);
47.
estrella.endFill();
48. Escribe lo siguiente para aadirle un brillo dinmico:

49. var brilloMax:Boolean = false;


50.
51. var miBrillo:Number = 80;
52.
53. import flash.filters.GlowFilter;
54.
55. estrella.onEnterFrame = function() {
56.
57. var brillo:GlowFilter = new
GlowFilter(0xCCCC88, 100, miBrillo, miBrillo, 1,
1);
58.
59. estrella.filters = [brillo];
60.
61. if (brilloMax) {
62.
63. miBrillo += 3;
64.
65. if (miBrillo>120)
{brilloMax = false;}
66.
67. }
68.
69. else {
70.
71. miBrillo -= 3;
72.
73. if (miBrillo<80)
{brilloMax = true;}
74.
75. }
76.
77. }
78.
79. estrella.onPress = function() {
80.
81. startDrag(this);
82.
83. }
84.
85. estrella.onRelease = function() {
86.
87. stopDrag();
88.
}

89. Escribe lo siguiente para dibujar a cada entrada de fotograma un copo de


nieve. Observa que utilizamos la funcin randRange para calcular
las posiciones, tamaos y velocidades aleatorias. Mediante la
variable vidaCopo controlaremos la propiedad vida (que crearemos a tal efecto)
para empezarlos a derretir.

90. import flash.filters.BlurFilter;


91.
92.
93.
94. this.onEnterFrame = function() {
95.
96. //dibujamos el copo
97.
98. var copo:MovieClip =
this.createEmptyMovieClip("copo"+this.getNextHig
hestDepth(), this.getNextHighestDepth());
99.
100. copo.beginFill(0xFFFFFF);
101.
102. copo.moveTo(20, -91);
103.
104. copo.lineTo(22, -21);
105.
106. copo.lineTo(84, 0);
107.
108. copo.lineTo(22, 21);
109.
110. copo.lineTo(20, 91);
111.
112. copo.lineTo(-22, 37);
113.
114. copo.lineTo(-86, 56);
115.
116. copo.lineTo(-50, 0);
117.
118. copo.lineTo(-86, -56);
119.
120. copo.lineTo(-22, -37);
121.
122. copo.lineTo(20, -91);
123.
124. copo.endFill();
125.
126.
127.
128. //lo situamos y le damos un filtro de
desenfoque.
129.
130. //iniciamos todas las variables
131.
132. copo._x = randRange(2,
Stage.width-2);
133.
134. copo._xscale = randRange(1,
4);
135.
136. copo._yscale = copo._xscale;
137.
138. var de:Number = randRange(3,
5);
139.
140. var desenfoque:BlurFilter =
new BlurFilter(de, de);
141.
142. copo.filters = [desenfoque];
143.
144. copo.velocidad = randRange(2,
5);
145.
146. copo.vida = vidaCopo;
147.
148.
149.
150. //a cada entrada de frame movemos el
copo si no est al borde de la pantalla o
tocando la estrella
151.
152. //tambin controlamos la vida del
copo para empezarlo a derretir
153.
154. copo.onEnterFrame = function() {
155.
156. if (copo._y<Stage.height-1 &&
!estrella.hitTest(copo._x, copo._y, true)) {
157.
158. copo._y +=
copo.velocidad;
159.
160. }
161.
162. if (copo.vida <= 100) {
163.
164. copo._alpha -= 1;
165.
166. }
167.
168. else {
169.
170. copo.vida -=
1;
171.
172. }
173.
174. if (copo._alpha <= 0) {
175.
176.
copo.removeMovieClip();
177.
178. }
179.
180. }
181.
}

182.Finalmente aadimos la funcin randRange que hemos utilizado:

183. function randRange(minNum:Number,


maxNum:Number):Number {
184.
return (Math.floor(Math.random()*(maxNum-
minNum+1))+minNum);

Prueba Evaluativa Tema 24: Animacin Avanzada

Solo una respuesta es vlida por pregunta. Haz clic en la respuesta que
consideres correcta.
Contesta todas las preguntas y haz clic en el botn Corregir para ver la
solucin.
Si pulsas Restablecer podrs repetir la evaluacin.

1. Si aumentamos la coordenada y de un objeto, hacia que lado se


mover?

a) Hacia arriba.
b) Hacia la derecha.

c) Hacia abajo.

2. La funcin clearInterval para la pelcula los milisegundos que le


indiques.

a) Verdadero.

b) Falso.

3. La instruccin setInterval repite la ejecucin de la funcin que le


indiques cada x milisegundos.

a) Verdadero.

b) Falso.

4. Los eventos vinculados al evento onEnterFrame se reproducirn


cada segundo.

a) Verdadero.

b) Verdadero slo si la velocidad de la pelcula es de 1 fps.


c) Verdadero slo si la velocidad de la pelcula es de 12 fps.

5. En la tcnica de rotoscopia slo hace falta que dibujemos un


fotograma, el resto se genererarn a partir de ste.

a) Verdadero.

b) Falso.

6. Cuando utilicemos la API de Flash para dibujar, podremos declarar


la forma del borde en cualquier momento.

a) Verdadero.

b) Falso.

7. En una lnea de contorno, el borde ninguno y el cuadrado son


iguales.

a) Verdadero.

b) Falso.

8. 1.000.000 milisegundos equivalen a:


a) 1 segundo.

b) 100 segundos.

c) 1000 segundos.

9. En la repeticin de funciones con la instruccin setInterval es


posible el envo de parmetros.

a) Verdadero.

b) Falso.

Anda mungkin juga menyukai