Flash DecalSheet System
will be able to reskin the SimpleButton without changing a single property on it see (Figure 4). Lets get started by adding in the following event listener to the button on line 72 of the Doc Class after we add the button to the display list:
Finally we will need to import the MouseEvent on line 13:
myButton.addEventListener(MouseEvent.CLICK, onClick); Once that is in place lets add the following three methods below decalSheetDemo function, see (Listing 9).
import flash.events.MouseEvent;
So what we have done here is added a Click Event listener to the SimpleButton , when we hear that click we start to load in the new skin. Once the Skin is loaded, we type the loader's content as a Bitmap and pass it's BitmapData into the DecalSheet's bitmapData setter. When you run this now and click the button you will instantly see the SimpleButton's skin and DecalSheet get updated to the new image. The change over is instantaneous! So now you have seen how we create a DecalSheet , register Decals, get Decals and skin a SimpleButton . We also go to reskin the button at run time by simply loading in a new graphic. That about covers the power of using Decals to skin your Flash app. The following steps simply clean up the code we have written and add some extra functionality to help flesh out the DecalSheet system. Step 15 – Delete Decal We can't just leave our DecalSheet without the ability to delete decals we have registered so lets add in a deleteDecal method after the registerDecal method: public function deleteDecal(name:String): Boolean { return delete decalRectangles[name]; } Step 16 – Get Registered Decal Names It would probably be helpful to get a list of all the registered Decal names from a DecalSheet so lets add in Array to store just the Decal names. We will need to add the following property after decalRectangles around line 13: And replace the registerDecal and deleteDecal methods with the following functions, see (Listing 10). We can test this by running the following in the Doc Class: trace("Decals", decalSheet.decalNames); decalSheet.deleteDecal("down"); trace("Remaining Decals", decalSheet.decalNames); Step 17 – Detach a Decal from the DecalSheet The connection between the Decal and its parent DecalSheet is incredibly powerful but sometimes we want Decals to be a little more public var decalNames:Array = new Array();
Listing 7. Step 12: Listening for DecalSheet Events
protected function addListeners(target:IEventDispatcher):void { target.addEventListener(Event.CHANGE, onChange, false , 0, true ); } protected function removeListeners(target:IEventDispatcher):void { target.removeEventListener(Event.CHANGE, onChange); } protected function onChange(event:Event):void { refresh(); } Listing 8. Step 13: Creating a SimpleButton var up:Decal = decalSheet.getDecal("up"); var over:Decal = decalSheet.getDecal("over"); var down:Decal = decalSheet.getDecal("down"); var myButton:SimpleButton = new SimpleButton(up, over, down); myButton.useHandCursor = true ; myButton.hitTestState = up; myButton.x = 230; this .addChild(myButton); } private function onClick(event:MouseEvent):void { loadBlueSkin("images/button_skin_b.png") } private function loadBlueSkin(url:String):void { loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBlueSkinLoaded); loader.load( new URLRequest( url ) ); } private function onBlueSkinLoaded(event:Event):void { loader.removeEventListener(Event.COMPLETE, onImageLoad); var bitmap:Bitmap = Bitmap(loader.content); public function decalSheetDemo():void { Listing 9. Step 14: Updating the DecalSheet’s BitmapData
decalSheet.bitmapData = bitmap.bitmapData;
}
03/2009 (5)
35
Made with FlippingBook HTML5