ActionScript Development
replace decalSheetDemo method with the following code:
I build. We haven't even touched on the coolest feature yet! What happens if you have to reskin an application on the fly? You would have to reload all of the images and create new class instances or build logic into your components to be able to get the new assets and rebuild themselves. Reskinning a Flash app built with Decals is a simple as changing the BituampData of the DeaclSheet . Let me show you how. Step 11 – Changing DecalSheet BitmapData We are going to need a way to tell all of the Decals cut out from a DecalSheet that the BitmapData has been changed and they need to be resampled. We can do this easily by overriding the set bitmapData method of the DecalSheet . Add the following method below the DecalSheet constructor on line 17:
and resample it's own BitmapData from the DecalSheet. Lets add the following 3 methods in the Decal class under the refresh function at line 27, see (Listing 7). Wealsohavetoimportthe IEventDispatcher and Event classes on line 4:
public function decalSheetDemo():void { var upDecal:Decal = decalSheet.getDecal ("up"); upDecal.x = 230;
import flash.events.Event; import flash.events.IEventDispatcher;
addChild(upDecal);
Finally we will need to apply the listener to the Decal's parent DecalSheet by adding the following code at the end of the constructor at line 23 of the constructor:
}
We will also need to import the decal class at line 3:
import com.flashartofwar.Decal;
addListeners(src);
If you compile the class you should see the Decal on the right of the DecalSheet instance it was cut out from. So what is the big deal, we had the same thing 4 steps ago with less code? We let me explain why this is a powerful way to bring assets into your Flash app. Imagine you have a photo gallery. What if you had many sites all using the same photo gallery but you needed to brand each photo gallery based on the individual site it was being hosted on. Depending on how you create your photo gallery you may decide to create a swf with each button as an item in the library with a linkage ID. Or you can load each individual image in one at a time at run time. For a long time I used both ways but always found it limiting to wait for one large swf to load up or many smaller images to load in until I came up with the DecalSheet system. Now, I simply make a DeaclSheet image, define the coordinates for each button and I only have to manage one image and some cut out data. I usually put the cut out coordinates in an xml file and now I can hand the image off to a design who may know nothing about Flash but can create a new theme easily from a PSD template. I know this sounds like a one off example but I use this system in every Flash site
Before we move on, I just wanted to explain why I break up adding and removing event listeners into separate functions. When ever I create classes I try to think about how I will extend off of them and also how I can break up logic into the smallest possible pieces. These 3 functions represent a core feature of the Decal and are probably the most important ones we would ever want to modify when extending this class. I also try to use Interfaces when ever possible, I explain this in more detail later on. As you can see we can easily add and remove the Change Event listeners and we call refresh when the Decal instance hears the appropriate event. In the next step we will build our SimpleButton and explore this new functionality. Step 13 – Creating a SimpleButton Lets go back to the Doc Class and create a SimpleButton using all of the Decals we registered in the DecalSheet. Once again we are going to replace the decalSheetDemo function with the following code, see (Listing 8). We also need to import SimpleButton on line 8: So now we are setting up each of the Decals, creating a new SimpleButton instances, and passing in the Decals to the constructor. Since the SimpeButton uses DisplayObjects for each state, and our Decals extends the Bitmap Class, we can substitute our Decals anywhere DisplayObjects are used. Compile the Doc Class and check out the button. You will see that up, over and down Decals are displayed when the button changes state. Step 14 – Updating the DecalSheet's BitmapData Now we are going to load in our second button skin (Figure 3) and replace the DecalSheet's BitmapData . Since the decals are listening for the Change Event from the DecalSheet , we import flash.display.SimpleButton;
override public function set
bitmapData(value: BitmapData):void
{
super.bitmapData = value; dispatchEvent(new
Event(Event.CHANGE));
}
along with an import statement for Event at line 5:
import flash.events.Event;
Now that a new event is dispatched whenever the BitmapData of the DecalSheet is changed, we will need to listen for this in the Decal Class. Step 12 – Listening for DecalSheet Events Now that the DecalSheet dispatches a change event when its BitmapData is updated, we can have the Decal listen for these events
A
Figure 4. This diagram illustrates how by changing the BitmapData of the DecalSheet we can broadcast an event to all children Decals to resample
03/2009 (5)
34
Made with FlippingBook HTML5