ActionScript 3 Semi-Transparent BitmapData, ARGB
Posted May 31, 2011 by Nick Vogt in Programming
Creating semi-transparent BitmapData in ActionScript 3 is done using an ARGB hexadecimal value (32-bit). ARGB stands for Alpha-Red-Green-Blue and is just like an RGB hex value but with an alpha level at the beginning. Due to the alpha level, ARGB hex values are 8 hex digits and not 6. If you aren't familiar with hexadecimal, I suggest reading up on it before continuing.
In the alpha level, 00 represents fully transparent and FF represents fully opaque (visible). For example, to create a fully opaque black, you would use FF000000 (0xFF000000). To create a semi-transparent black, you could use AA000000 (0xAA000000).
Look at this example. Copy & paste it into a new ActionScript 3 flash file and test it.
You should see a fully opaque blue square with a semi-transparent red square overlapping it. Experiment with the alpha values to get the hang of it.
Here's a quick chart for base-10 percentage transparency to hexadecimal values:
In the alpha level, 00 represents fully transparent and FF represents fully opaque (visible). For example, to create a fully opaque black, you would use FF000000 (0xFF000000). To create a semi-transparent black, you could use AA000000 (0xAA000000).
Look at this example. Copy & paste it into a new ActionScript 3 flash file and test it.
// When the 3rd argument is set to false, an opaque RGB bitmap is created
var box1:Bitmap = new Bitmap(new BitmapData(250, 150, false, 0x6699CC));
box1.x = 40;
box1.y = 40;
addChild(box1);
// When set to true, you can use ARGB to set the bitmap transparency level
var box2:Bitmap = new Bitmap(new BitmapData(250, 150, true, 0xAACC6666));
box2.x = 80;
box2.y = 80;
addChild(box2);
var box1:Bitmap = new Bitmap(new BitmapData(250, 150, false, 0x6699CC));
box1.x = 40;
box1.y = 40;
addChild(box1);
// When set to true, you can use ARGB to set the bitmap transparency level
var box2:Bitmap = new Bitmap(new BitmapData(250, 150, true, 0xAACC6666));
box2.x = 80;
box2.y = 80;
addChild(box2);
You should see a fully opaque blue square with a semi-transparent red square overlapping it. Experiment with the alpha values to get the hang of it.
Here's a quick chart for base-10 percentage transparency to hexadecimal values:
| Transparency | Hex Value |
|---|---|
| 0% | 00 |
| 10% | 19 |
| 20% | 33 |
| 30% | 4c |
| 40% | 66 |
| 50% | 7f |
| 60% | 99 |
| 70% | b2 |
| 80% | cc |
| 90% | e5 |
| 100% | ff |
| Series | ActionScript 3 Tutorials |
|---|---|
| Tags | actionscript 3 flash guide tutorial |