Bienvenido a Klr20mg

Cronicas de un desarrollador

Actualmente soy Jefe de Desarrollo del area Flash en Sapotek de México en la cual trabajo desde hace mas de 4 años. Desarrollando aplicaciones en Flash para Web mas comúnmente llamadas (RIAs)

Estas en : Blog » [AS3] FrameRate, Eventos y agregar elementos al Stage
  • Decrease font size
  • Default font size
  • Increase font size
  • color default
  • color verde
  • color azul
[AS3] FrameRate, Eventos y agregar elementos al Stage
AddThis Social Bookmark Button
 Post2PDF Print
July 8th, 2006

Bien en un post anterior puse un ejemplo de AS3 pero no esta explicado ni nada.

En esta ocasión tratare de explicar lo mas detalladamente posible el código. Como sabrán los eventos de botones y movieClips como "onRelease", "onPress", etc ya no son soportados en la nueva versión de ActionScript ahora todo sera gestionado por medio de EventsListenners.

Otra cosa que veremos es como crear Elementos simples (cuadro, circulo) y ponerlos en el stage. La función AttachMovie dejo de existir en AS3, ahora para mostrar un elemento en el stage se debe de usar addChild con este método se pude agregar un elemento de la librería o un objeto creado por código.

Ademas de que veremos que ahora es posible cambiar el FrameRate en tiempo de ejecución. esto había sido pedido a gritos por varios. =)

Lo primero sera agregar elementos al Stage. ya que sin ellos no se puede hacer nada jeje.

Flash cuenta con un API de dibujo que nos facilita la vida, los métodos disponibles son

  • drawCircle(x:Number, y:Number, radius:Number):void
  • drawEllipse(x:Number, y:Number, width:Number, height:Number):void
  • drawRect(x:Number, y:Number, width:Number, height:Number):void
  • drawRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number):void

simple no?, un ejemplo sencillo.

PLAIN TEXT
Actionscript:
  1. import flash.display.Sprite;
  2. var ball : Sprite = new Sprite ();
  3. ball.graphics.beginFill(0x0099FF)
  4. ball.graphics.drawCircle(50,50,25)
  5. ball.graphics.endFill()
  6. addChild(ball)

Lo primero que debemos hacer es importar los paquetes que vamos a utilizar en este caso flash.display.Sprite para poder crear una nueva instancia

En la ultima linea después de crear nuestro circulo debemos agregar el objeto al Stage esto se debe de hacer siempre ya que de otra forma no se vera en nuestro SWF

Otra de las cosas que cambiaron es el modo de los eventos en los objetos en el Stage. Los que usaron los componentes AS2 de Flash no tendrán problema ya que es exactamente lo mismo, los eventos se asignan por media de la función addEventListener

PLAIN TEXT
Actionscript:
  1. import flash.display.Sprite;
  2. import flash.events.*
  3. var ball : Sprite = new Sprite ();
  4. ball.graphics.beginFill(0x0099FF)
  5. ball.graphics.drawCircle(50,50,25)
  6. ball.graphics.endFill()
  7. addChild(ball)
  8. ball.addEventListener(MouseEvent.MOUSE_DOWN, handler)
  9. function handler(event:Event){
  10.     trace(event)
  11. }

Ya no es necesario crear un listener y después asignarlo los eventos, ahora solo agregas el tipo de evento al objeto y la función que se ejecutara cuando se lleve a cabo dicho evento, La función recibe un parámetro del tipo Event, pero podemos acceder a sus propiedades como si fuera un objeto

Las propiedades que recibimos son:

[MouseEvent
type="mouseDown"
bubbles=true
cancelable=false
eventPhase=2
localX=66
localY=57
stageX=66
stageY=57
relatedObject=null
ctrlKey=false
altKey=false
shiftKey=false delta=0]

Algo que me llamo la atención y me agrado fue que el evento detecta si el usuario esta o no, presionando las teclas Ctrl Alt o Shift es algo muy útil. adiós a los KeyListenners =P

bien, así como los eventos del mouse para con los objetos han cambiado, también lo hicieron algunos métodos mas. por ejemplo el onEnterFrame.

Ahora para invocar un enterFrame debemos agregarle un EventListener al Objeto en cuestión por ejemplo:

PLAIN TEXT
Actionscript:
  1. import flash.display.Sprite;
  2. import flash.events.*
  3. var ball : Sprite = new Sprite ();
  4. var count:Number = 0
  5. ball.graphics.beginFill(0x0099FF)
  6. ball.graphics.drawCircle(50,50,25)
  7. ball.graphics.endFill()
  8. addChild(ball)
  9. ball.addEventListener (Event.ENTER_FRAME, handlerEnterFrame);
  10. function handlerEnterFrame(event:Event)
  11. {
  12.     if(count <15)
  13.     {
  14.         trace(event)
  15.         ball.x += 5
  16.         count++
  17.     }else
  18.     {
  19.         ball.removeEventListener("enterFrame", handlerEnterFrame)      
  20.     }
  21. }

Por ultimo, Ahora se puede cambiar el valor del frameRate en tiempo de ejecución algo que no se podía hacer en ninguna de las versiones anteriores de Flash.

Esto es algo muy simple tan simple como esto.

PLAIN TEXT
Actionscript:
  1. stage.frameRate = 50

Ahora el ejemplo terminado. Da click en el rectangulo para cambiar el FrameRate del SWF, Necesitas el FlashPlayer9 para verlo

El código completo

PLAIN TEXT
Actionscript:
  1. import flash.display.Sprite;
  2. import flash.events. *
  3. import flash.stage. *
  4. var ball : Sprite = new Sprite ();
  5. var square : Sprite = new Sprite ();
  6. var outPut : TextField = new TextField ();
  7. function init ()
  8. {
  9.     doBall ()
  10.     doButton ()
  11.     doTextField ()
  12.     addListeners ()
  13. }
  14. function doBall ()
  15. {
  16.     ball.graphics.beginFill (0x0099FF)
  17.     ball.graphics.drawCircle (10, 20, 10);
  18.     ball.graphics.endFill ();
  19.     addChild (ball)
  20. }
  21. function doButton ()
  22. {
  23.     square.graphics.beginFill (0x0099FF)
  24.     square.graphics.drawRect (10, 50, 50, 25);
  25.     square.graphics.endFill ();
  26.     addChild (square)
  27. }
  28. function doTextField ()
  29. {
  30.     outPut.width = 150
  31.     outPut.height = 25
  32.     outPut.x = 70
  33.     outPut.y = 60
  34.     addChild (outPut)
  35. }
  36. function addListeners ()
  37. {
  38.     ball.addEventListener (Event.ENTER_FRAME, handlerEnterFrame);
  39.     square.addEventListener (MouseEvent.MOUSE_UP, handlerButton);
  40. }
  41. function handlerEnterFrame (event : Event)
  42. {
  43.     ball.x += 5
  44.     if (ball.x> 400)
  45.     {
  46.         ball.x = 0
  47.     }
  48.     outPut.text = "FrameRate : " + stage.frameRate
  49. }
  50. function handlerButton (event : Event)
  51. {
  52.     if (stage.frameRate <120)
  53.     {
  54.         stage.frameRate += 12
  55.     }else
  56.     {
  57.         stage.frameRate = 12
  58.     }
  59. }
  60. init ()

y por supuesto el ZIP con el FLA
Posibles Posts Relacionados
9 Comentarios

Si deseas poner codigo en tu comentario utiliza la etiqueta < pre > < /pre >

Excelente!!!
Muy buen ejemplo, muchas gracias ;-)

Tata escribio el 10-July-2006 a las 12:31 am

Excelentes ejemplos ^^

leandono escribio el 10-July-2006 a las 9:01 am

una vez mas mi estimado kike, felicitaciones, es realmente muy sencilla la forma como explicas lo nuevo q nos trae AS 3.0

eldervaz escribio el 12-July-2006 a las 8:35 pm

[...] Algo de AS3 [AS3] FrameRate, Eventos y agregar elementos al Stage [AS3] Cargando Información Externa. XML. Drag and Drop con ActionScript 3.0 y Flash 9 [...]

DarkRasseL Weblog » Archivo del weblog » AS3.0 y algunos tutoriales muy interesantes escribio el 6-October-2006 a las 4:59 am

as3, de adonde?, todavia no salio la version 9, pero si el reproductor 9 :S

Ramiro escribio el 14-October-2006 a las 4:36 am

Bueno creo que Ramiro esta un poco desinformado..

Flex 2 viene con ActionScript3, tambien hay un Alpha de la version 9 de Flash en la cual tambien esta disponible ActionScript3

http://www.adobe.com/products/flex/

http://labs.adobe.com/technologies/flash9as3preview/

Tmeister escribio el 14-October-2006 a las 11:22 am

Qué tal Tmeister?
Tengo duda con el addChild. Antes con el attachMovie le tenias que indicar el nivel en el que querias cargar el movie clip (addChild("nombreMC","nombreInstanciaMC",nivel), ahora como se manejan esos niveles con AS3?

Rafeo escribio el 25-April-2007 a las 6:20 pm

novato...

cristalab escribio el 24-August-2007 a las 2:15 am

gracias me será de gran ayuda...

William escribio el 20-October-2008 a las 10:43 am
[ Back ]

 Blog editado por:

Enrique Chavez aka Tmeister

 Sigueme en Twitter

  • A punto de iniciar un curso de joomla, A ver que tal 3 hrs ago
  • Que divertido es modificar el blog "En caliente" y que todo deje de funcionar. XD 5 hrs ago
  • More updates...

Posting tweet...

 Suscribete


AddThis Social Bookmark Button

 Archivo

2008
2007
2006
2005
2004