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!
{
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…
{
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
{
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
<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.
