Beruflich Dokumente
Kultur Dokumente
Vamos a ver como mover un objeto a partir de este ejemplo de una bola
botando.
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.
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.
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 incre_y:Number = 8;
var tope:Number = 0;
var elasticidad:Number = 3;
bola_mc._y = 0;
bola_mc._x = 0;
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);
}
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.
Objetivo.
Ejercicio paso a
paso.
4. Escribe lo siguiente:
5. _global.velocidad = 0.2;
6.
7. _global.distancia = 5;
8.
_global.recorrido = 30;
Unidad
24. Animaciones Bsqueda
avanzadas (II)
functionReference:Function,
interval:Number, [param1:Object,
param2, ..., paramN]);
Donde,
var repeticion:Number =
setInterval(contar, 2000);
function contar() {
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.
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() {
if ( i > 30 ){
delete this.onEnterFrame;
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.
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.
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.
Unidad
24. Animaciones Bsqueda
avanzadas (V)
Animaciones geomtricas en 3D
Vamos a ver como crear una animacin de una caja girando en tres
dimensiones.
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.
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 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.
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.
Donde color indicar el color de relleno que se le aplicar al dibujo. Deber estar en
hexadecimal, por ejemplo: 0x000000.
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();
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();
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.
Ejercicios Tema 24 :
Animaciones Bsqueda
Avanzadas
Ejercicio 1: Nieve
Debers reproducir la siguiente animacin Flash:
Dibujar un 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();
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:
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.
a) Hacia arriba.
b) Hacia la derecha.
c) Hacia abajo.
a) Verdadero.
b) Falso.
a) Verdadero.
b) Falso.
a) Verdadero.
a) Verdadero.
b) Falso.
a) Verdadero.
b) Falso.
a) Verdadero.
b) Falso.
b) 100 segundos.
c) 1000 segundos.
a) Verdadero.
b) Falso.