20060628 Wednesday June 28, 2006

Flex 2 Beta 3 : Sprites

In Flex 1.5, typically if we want to add a shape or graphic to the stage, we would make either make a call to createEmptyMovieClip or utilize the MovieClipLoader and add the graphic to the stage. However, in Flex 2 Beta 3, this has changed slightly.

In the Actionscript 3 spec, we’ve been introduced with a new class called the “Sprite” class. A Sprite object is similar to a movie clip, but does not have a timeline. Sprite is an appropriate base class for objects that do not require timelines. For example, Sprite would be a logical base class for user interface (UI) components that typically do not use the timeline.

When we add a child to the stage of type Sprite, in Flex 2 Beta 3, that child must be of type “IUIComponent” instead of flash.display::Sprite. To reproduce this error we’d do the following:

This is baaad… don’t do this!

public function drawStuff() : void
{
    var circle1 : Sprite = new Sprite();
    circle1.graphics.beginFill( 0xFFCC00 );
    circle1.graphics.drawCircle( 40, 40, 40 );
    circle1.buttonMode = true;
    addChild( circle1 )
}


This is good… please do this…

public function drawStuff() : void
{
    var ref : UIComponent = new UIComponent();
    var circle1 : Sprite = new Sprite();
    circle1.graphics.drawCircle( 40, 40, 40 );
    circle1.buttonMode = true;
    addChild( ref );
    ref.addChild( circle1 );
}


For a more complete example try this:

SpriteExample.as

package
{
  import flash.display.Sprite;
  import flash.events.*;
 
  public class SpriteExample extends Sprite
  {
    private var size:uint = 100;
    private var bgColor:uint = 0xFFCC00;
    private var box:Sprite;
   
    public function SpriteExample()
    {
      var child:Sprite = new Sprite();
      child.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
      child.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
      draw(child);
      box = Sprite(addChild(child));
    }
   
    private function mouseDownHandler(event:MouseEvent):void
    {
      trace(“mouseDownHandler”);
      var sprite:Sprite = Sprite(event.target);
      sprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
      sprite.startDrag();
    }
   
    private function mouseUpHandler(event:MouseEvent):void
    {
      trace(“mouseUpHandler”);
      var sprite:Sprite = Sprite(event.target);
      sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
      sprite.stopDrag();
    }
   
    private function mouseMoveHandler(event:MouseEvent):void
    {
      trace(“mouseMoveHandler”);
      event.updateAfterEvent();
    }
   
    private function draw(sprite:Sprite):void
    {
      sprite.graphics.beginFill(bgColor);
      sprite.graphics.drawRect(0, 0, size, size);
      sprite.graphics.endFill();
    }
  }
}

SpriteExampleApplication.mxml

<?xml version=“1.0″ encoding=“utf-8″?>
<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml”
  creationComplete=“onCreationComplete()”>

 
  <mx:Script>
    <![CDATA[
    import SpriteExample;
    import mx.core.UIComponent;
    import mx.controls.Alert;
       
    public function onCreationComplete() : void
    {     
      var spriteExample : SpriteExample = new SpriteExample();
      var ref : UIComponent = new UIComponent();
      addChild( ref );
      ref.addChild( spriteExample );
    }
    ]]>

  </mx:Script>

</mx:Application>

And this is what you should get… go on ahead, you can drag the orange box around.

Posted by keunlee | Jun 28 2006, 10:47:22 AM EDT
Comments:

XML