sprite

11
Spri te Para empezar debemos abrir un escenario en ActionScript 3.0

Upload: cristian-guevara

Post on 13-Jun-2015

285 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Sprite

Sprite

Para empezar debemos abrir un escenario en ActionScript 3.0

Page 2: Sprite

En este caso vamos a codificar un Sprite La clase Sprite es un elemento constituyente básico de la lista de visualización: un nodo de la lista de visualización que puede mostrar gráficos y también contener elementos secundarios.

Un objeto Sprite es similar a un clip de película, pero carece de línea de tiempo. Sprite es una clase base adecuada para objetos que no requieren líneas de tiempo. Por ejemplo, Sprite sería una clase base lógica para componentes de interfaz de usuario (IU) que típicamente no utilizan línea de tiempo.

La clase Sprite es una novedad de ActionScript 3.0. Proporciona una alternativa a la funcionalidad de la clase MovieClip, que conserva toda la funcionalidad de versiones anteriores de ActionScript para ofrecer compatibilidad retroactiva.

Vamos a ver un ejemplo de un Sprite

Para empezar vamos a abrir la ventana de acciones con f9 (siguiente figura)

Page 3: Sprite

Empezaremos creando una variable que se llamara SPRITE 1 a su vez esta será una instancia que será de tipo Sprite

Var sprite1: Sprite=new Sprite ();

Una vez hayamos credo la variable vamos a asignarle sus propiedades para ello vamos a utilizar el tag GRAPCHIS para que la variable sea una figura vectorial y el tag LINESTYLE para especificar el estilo de línea de la figura vectorial (siguiente línea)

Sprite 1.graphics.lineStyle

Ahora debemos dar los parámetros de la línea para ello debemos dar el grosor y el color de la línea de la figura (siguiente línea)

Sprite 1.graphics.lineStyle (6,0xff9900)

De igual forma vamos a definir el relleno simple de la figura con el tag BEGINFILL cabe resaltar que es de un solo color (siguiente línea) debemos dar las coordenadas

Var sprite1: Sprite=new Sprite ();Sprite 1.graphics.lineStyle (6,0xff9900)Sprite1.graphics.beginfill (0x000099)

Ahora vamos a codificar el tipo de figura que vamos a dibujar en este caso se dibujara un rectángulo con el tag DRAWRECT y dar las coordenadas (siguiente línea)

Var sprite1: Sprite=new Sprite ();Sprite 1.graphics.lineStyle (6,0xff9900);Sprite1.graphics.beginfill (0x000099);Sprite 1.graphics.drawRect (0, 0, 230,230);

Ahora vamos a pedirle al computador que nos muestre por pantalla la figura con el tag ADDCHILD (siguiente línea)

Var sprite1: Sprite=new Sprite ();Sprite 1.graphics.lineStyle (6,0xff9900);Sprite1.graphics.beginfill (0x000099);Sprite 1.graphics.drawRect (0, 0, 230,230);

Page 4: Sprite

AddChild (Sprite);

Luego vamos a dar las coordenadas en el plano cartesiano del escenario donde aparecerá la figura (siguiente línea)

Var sprite1: Sprite=new Sprite ();Sprite 1.graphics.lineStyle (6,0xff9900);Sprite1.graphics.beginfill (0x000099);Sprite 1.graphics.drawRect (0, 0, 230,230);Addchild (Sprite);Sprite1.x=50;Sprite1.y=50;

Luego de haber codificado y asignado a la variable todos los parámetros vamos a ejecutar el código (ctrl+enter)

Ahora vamos a codificar otro Sprite para ello vamos a copiar el mismo código y le vamos a cambiar el número de la variable y el color (siguiente figura)

Page 5: Sprite

(Ctrl+c)

(Ctrl+v)

Y cambiamos los datos (siguientes líneas)

Var sprite2: Sprite=new Sprite ();Sprite2.graphics.lineStyle (6,0xff9900);Sprite2.graphics.beginFill (0x000000);Sprite2.graphics.drawRect (0, 0, 230,230);Sprite2.x=50Sprite2.y=50AddChild (sprite2)

También debemos cambiar las coordenadas de lo contrario el segundo Sprite aparecerá encima del primero (siguiente línea)

Sprite2.x=350

Page 6: Sprite

Sprite2.y=50

Ahora vamos a ejecutar el código (Ctrl+enter) (siguiente figura)

Ahora vamos a crear un tercer Sprite para ello vamos a cambiar el tag DRAWRECT por el tag o la función DRAWRECT que está ubicado en la línea cuatro (4) (siguiente línea) también debemos cambiar los datos y el número del Sprite o variable y las coordenadas, el radio del circulo

Var sprite3: Sprite=new Sprite ();Sprite3.graphics.lineStyle (6,0xff9900);Sprite3.graphics.beginFill (0x000099);Sprite3.graphics.drawCircle (0, 0, 25);Sprite3.x=125Sprite3.y=125

Page 7: Sprite

AddChild (sprite3)

Y ejecutamos el código (siguiente figura)

Ahora vamos a crear una función la cual nos permita mover el Sprite 3 a cualquiera de los Sprite (1 o 2), es decir si damos clic en el Sprite2 el circulo aparecerá o se moverá hacia este Sprite de igual forma si realizamos lo contrario (siguientes líneas)

sprite1.addEventListener (MouseEvent.CLICK, pulsarsprite);sprite2.addEventListener (MouseEvent.CLICK, pulsarsprite);

Page 8: Sprite

El tag addEventListener sirve para agregar un evento en este caso de tipo MouseEvent y le decimos que al dar click pulse el Sprite esto lo hacemos para las líneas del Sprite1 y para el Sprite2

Ahora vamos a crear la función la cual va a ser pulsarsprite y colocamos entre paréntesis el evento que es de tipo MouseEvent y le decimos al computador que nos muestre con el tag addChild el Sprite3 (siguiente línea)

Function pulsarsprite (event: MouseEvent){event.currentTarget.addChild (sprite3)

Luego vamos a ejecutar el código (ctrl+enter)

Aparecerá el circulo en el primer rectángulo al dar clic en el otro rectángulo el circulo saltara o se pasara a este

(siguiente figura) (clic)

Page 9: Sprite

De esta manera también podemos dar clic en cualquier parte del rectángulo y este saltara a esta parte donde pusimos en el clic (siguiente figura)

Page 10: Sprite

GRACIAS