ActionScript Development
Flash DecalSheet System
by Jesse Freeman
I came up with the idea of creating what I call Flash DecalSheets from the stickers that come with model airplanes and have been using "Decals" to skin my own Flash applications ever since.
The above example shows our source DecalSheet on the left, and a SimpleButton on the right using Decals for each button state. When you click on the button, a new image is loaded in and its bitmap data replaces the original skin in the DecalSheet. All of the Decals in the Simple Button will also update. The reskinning is almost instantaneous! Decal Sheet Source Images Before we get started, make sure you have the following two images see (Figure 2,3). These will be our DecalSheet sources which we will use to cut out button states from. Step 1 – Setting up the Doc Class The first thing we are going to do is create our Main Doc class. I have already set up a simple class that will load in a image and add it to the display list, see (Listing 1). When you run this class you should see our (Figure 2) being displayed on the stage. Nowwe are ready to start creating our DecalSheet.
What you will learn… • how to take a single Bitmap Image • how to cut it up into smaller bitmaps and uses them to skin your Flash App.
What you should know… • be comfortable with AS 3.0, Classes, • have a basic knowledge of INterfaces • have some history working with Bitmap class
In this tutorial we are going to create 2 classes: the DecalSheet and the Decal. You define x, y, width, and height coordinates to cut out graphics from the DecalSheet and it will return Decals. Decals are Bitmaps and can be used anywhere DisplayObjects would normally be used. What makes Decals special is that they retain a reference to the DecalSheet they get cut out from. When you update the BitmapData of the DecalSheet , all of the Decals cut out from that sheet will also update. This allows you to reskin an entire application at run time by simply loading in new source images. At the end of the tutorial you will have the following swf. http://flashartofwar.com/demos/decalsheet_ tutorial/
Level of difficulty
A DecalSheet is basically 1 large image (jpg, png, or gif) that gets cut up into smaller images called Decals. This is one of the most efficient ways of bringing lots of assets into a flash application without relying on the Library (if you are using the Flash IDE) or the Embed tag (if you are using the Flex Compiler). Lets take a look at how to make a simple DecalSheet system. The diagram, see (Figure 1) illustrates how we take a single DecalSheet image and use coordinates to cut out a new Decal.
������ �����
���������� ����������
�����������
Figure 2. Button skin a
�����������������
��������
����������
�����
��������������
����������
����������
Figure 3. Button skin b
Figure 1. This illustrates howwe take a single DecalSheet image and use coordinates to cut out a newDecal
03/2009 (5)
30
Made with FlippingBook HTML5