By paddloPayday loans

Home > Mobile, OOP for Artists > ActionScript 3.0 Bitmaps, Clones and ColorTransforms

ActionScript 3.0 Bitmaps, Clones and ColorTransforms

Less is More

Ever since I started working with mobile devices with Flash and ActionScript 3.0, I’ve been looking for faster ways to move my objects through those little windows on iPhones, Androids and Blackberries. Lag time is huge and the action looks geriatric. I’ve seen some interesting things done with the bitmapped classes, and in previous posts we’ve discussed what may be helpful. However, since I haven’t used them extensively (or fully), I thought it’d be a good idea to walkthrough my thinking on the topic. For a while now I’ve been working on a a Samurai action game, and while I’ve been making progress, I keep looking for speed tweaks. In general my thoughts regarding bitmapped graphics and Bitmap classes can be summed up in Figure 1. If I create a single Bitmap object using the BitmapData objects (or convert graphic files into BitmapData elements) and then clone the object, I should be able to save processing time.

Figure 1: Cloned and Colored

Of course, I have to assume a good deal. First, I assume that processing a single instance of an object and cloning it is more efficient than creating multiple instances of the same object. I got the idea from how Flash originally used symbols over the Internet. You create one symbol and then re-used it. My idea is pretty much the same. Create once; clone many.

Second, in order for an object to look like more than a single object, I want to change something about the cloned object. With my simple samurai fighter, I can change its color because it is a Bitmap object. So, first we’ll look at how to create a bitmapped object from scratch using both the Bitmap and BitmapData objects.

Making Bitmapped Objects from Code

I like drawing bitmapped objects or using digital photography. However, in order to best understand what’s going on, let’s start from scratch with BitmapData objects. Figure 2 shows the fundamentals of creating a bitmapped data object:

Figure 2: Implementing BitmapData Object

The ActionScript 3.0 BitmapData object contains a 32-bit integer made up of four 8-bit values (0-255). The first parameter expects a width, the second height—this is the Bitmap shape; a rectangular data matrix. The third parameter is the objects transparency, which has a default value of true (it is transparent). By setting the transparency argument to false, you make the object opaque. The 32-bit integer is the final parameter with the first two hexadecimal values being the alpha value with the final six values expressing an RGB color. The following class provides a basic example:

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package 
{
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
 
	public class Basic extends Sprite
	{
		private var burntOrange:BitmapData;
		private var burntOrangeClone:BitmapData;
		private var bm:Bitmap;
		private var bmClone:Bitmap;
 
		public function Basic()
		{
			burntOrange = new BitmapData(50, 50, false, 0x00CC5500);
			bm=new Bitmap(burntOrange);
			bm.x=100,bm.y=100;
			addChild(bm);
		}
	}
}

That’s really pretty simple. All you have to do is to define the BitmapData object and then use it as an argument in creating a new Bitmap object. At this junction we’re just making squares; however, from previous posts that have converted bitmap files into BitmapData objects, we can generate far more complex figures. For now, though, we’ll stick with the squares. When you test the code, you’ll get a nice burnt orange square. Try changing the size of the square and experiment with different colors and transparency levels.

A Clone of a BitmapData Object

The next step is to copy the implemented BitmapData object. Fortunately, the BitmapData object contains a clone() method so it’s also easy to do as you can see in the following example:

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package 
{
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
 
	public class Clone extends Sprite
	{
		private var burntOrange:BitmapData;
		private var burntOrangeClone:BitmapData;
		private var bm:Bitmap;
		private var bmClone:Bitmap;
 
		public function Clone()
		{
			burntOrange = new BitmapData(50, 50, false, 0x00CC5500);
			bm=new Bitmap(burntOrange);
			bm.x=100,bm.y=100;
			addChild(bm);
 
			burntOrangeClone=burntOrange.clone();
			bmClone=new Bitmap(burntOrangeClone);
			bmClone.x=200,bmClone.y=100;
			addChild(bmClone);
		}
	}
}

Original and Cloned Objects

The two boxes are the results. In looking at the code you can see that the clone is based on the data from the original BitmapData object. However, because a second bitmap object must be created to use the bitmapdata, is there really any savings memory-wise? In other words would we be just as well off just creating a new object from the initial class, Basic as in creating a clone of the object?

Using BitmapData.colorTransform()

The real value in using BitmapData objects, whether clones are quicker to create than new objects, is the colorTransform() method in the BitmapData API. For this post, I am only touching on one aspect of using the method with a ColorTransform object, and that is changing colors by using the ARGB color multipliers. If I create a BitmapData object, and clone it with different colors, I’ve effectively created a new useful object. If I change the multiplier value (0-1) for the alpha channel, I change the tint of the color. Likewise, if I change the RGB values, I change the colors in those channels.

The BitmapData.colorTransform() method has two parameters, Rectangle and ColorTransform, objects available in the flash.geom package. As a result both must be imported. Both the ColorTransform and Rectangle classes may be used on their own, but here they are employed as part of a BitmapData class method with the name colorTransform(), which may be a little confusing; so bear with me here. The full format of BitmapData.colorTransform() is BitmapData.colorTransform(Rectangle, ColorTransform). The following program will be the starting point:

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
package 
{
 
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.geom.Rectangle;
	import flash.geom.ColorTransform;
 
	public class CloneColorTransform extends Sprite
	{
		private var burntOrange:BitmapData;
		private var burntOrangeClone:BitmapData;
		private var bm:Bitmap;
		private var bmClone:Bitmap;
		private var clrTransform:ColorTransform;
		private var rect:Rectangle;
 
		public function CloneColorTransform()
		{
			burntOrange = new BitmapData(50,50,false,0x00CC5500);
			bm = new Bitmap(burntOrange);
			bm.x = 100,bm.y = 100;
			addChild(bm);
 
			burntOrangeClone = burntOrange.clone();
			clrTransform=new ColorTransform();
			clrTransform.alphaMultiplier=0.75;
			//clrTransform.redMultiplier=0.0;
			//clrTransform.greenMultiplier=0.0;
			//clrTransform.blueMultiplier=0.0;
			rect=new Rectangle(0,0,50,50);
			burntOrangeClone.colorTransform(rect,clrTransform);
			bmClone = new Bitmap(burntOrangeClone);
			bmClone.x = 200,bmClone.y = 100;
			addChild(bmClone);
		}
	}
}

In the code, notice that the BitmapData and Rectangle instances both have the same 50 x 50 size. That is very important lest you end up with strange results. The first two parameters of the Rectangle object are the x and y position values. The results (seen at the right) illustrate how to change a cloned object’s tint based on the original tint. Try changing the alpha multiplier to see how to tint the color darker or lighter. Also note that even thought the clone is identical except for the tint, it is clearly distinguishable as different even though the same BitmapData values were employed in both.

Changing Colors of Images from Bitmap Files

The real payoff for using BitmapData objects is that a colorful object can be changed in different useful ways. In the paired images at the top of this post, each has a different set of colors. By changing color multipliers, you can change individual colors in a single multicolored file. For example, take the simple Adobe logo. Support Adobe decided to open a branch office on the moon and wanted some changes to indicate that the office was off-earth. They may want to make some subtle changes so that the logo is instantly recognizable but clearly different. Consider the following:

Making a special logo for Adobe's office on the moon

The following program was employed in creating all of the different images. Its design allows you to put in any file you want; so use your own if you like.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package 
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.display.Sprite;
	import flash.geom.Rectangle;
	import flash.geom.ColorTransform;
 
	public class BitMapColorCloneTransform extends Sprite
	{
		private var fileData:BitmapData;
		private var fileDataClone:BitmapData;
		private var file2Bit:Bitmap;
		private var file2BitClone:Bitmap;
		private var imageLoader:Loader;
		private var url:String;
		private var rect:Rectangle;
		private var clrTransform:ColorTransform;
 
		public function BitMapColorCloneTransform()
		{
			//url="samGif.gif";
			//url="trans.png";
			url="logo.png";
 
			imageLoader = new Loader();
			imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			imageLoader.load(new URLRequest(url));
		}
		private function onComplete(e:Event):void
		{
			fileData = e.target.content.bitmapData;
			file2Bit = new Bitmap(fileData);
			file2Bit.x=10, file2Bit.y=20;
			addChild(file2Bit);
 
			fileDataClone=fileData.clone();
			rect=new Rectangle(0,0,file2Bit.width,file2Bit.height);
			clrTransform=new ColorTransform();
			//clrTransform.alphaMultiplier=0.75;
			clrTransform.redMultiplier=0.75;
			//clrTransform.greenMultiplier=1.0;
			clrTransform.blueMultiplier=0.0;
			fileDataClone.colorTransform(rect,clrTransform);
			file2BitClone = new Bitmap(fileDataClone);
			file2BitClone.x=270, file2BitClone.y=20;
			addChild(file2BitClone);
 
		}
	}
}

An important element to note in the program is that the Rectangle object is the same dimensions as the BitmapData object that was loaded from a file. Using the width and height properties of the BitmapData object for the width and height of the Rectangle object simplified the process.

More on Bitmapped Objects and their Properties

I want to create a program using a design pattern that allows experimentation with the different properties of Bitmap and BitmapData objects and look further into ColorTransform. All of this attention is to see if using clones with different colors can add some speed to the process of object creation and differentiation on mobile devices. Also, I hope to see if we can find a design pattern to accommodate the development time in changing and maintaining larger programs designed for the mobile user.

Share
Categories: Mobile, OOP for Artists
  1. William B. Sanders
    June 6, 2013 at 12:43 am | #1

    Hi Festus,

    Tell me what you want to do, and I’ll see if I can help.

    Bill

  2. William B. Sanders
    June 17, 2013 at 3:51 pm | #2

    Festus,

    Just use the code provided. That ought to do the trick.

    Cheers,
    Bill

  1. April 23, 2012 at 7:20 am | #1
  2. May 5, 2012 at 7:50 am | #2

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>