This page is optimized for mobile devices, if you would prefer the desktop version just
click here
Store the modified pixel data in the bitmap
Listing 6 copies the modified pixel data from the ByteArray object back into the bitmap, overwriting the pixel data previously stored in the bitmap.
Store the modified pixel data in the bitmap.
//Put the modified pixels back into the bitmapData
// object.rawBytes.position = 0;//this is critical
bitmapData.setPixels(new Rectangle(0,0,bitmapData.width,bitmapData.height),
rawBytes);} //end processChromaKey method//--------------------------------------------------//} //end class
} //end package I explained all of the code in Listing 6 in the earlier lesson titled Fundamentals of Image Pixel Processing.
The end of the class
Listing 6 also signals the end of the method, the end of the class, the end of the package, and the end of the program.
Run the program
I encourage you to run this program from the web. Then copy the code from Listing 7 and Listing 8. Use that code to create a newproject. Compile and run the project. Experiment with the code, making changes, and observing the results of your changes. Make certain that you can explain whyyour changes behave as they do.
Resources
I will publish a list containing links to ActionScript resources as a separate document. Search for ActionScript Resources in theConnexions search box.
Complete program listings
Complete listings for the program discussed in this lesson are provided in Listing 7 and Listing 8 below.
ListingListing of the class named driver.
/*Project ChromaKey01
This project scans all of the pixels in an image toidentify those pixels with a color of pure magenta. The
alpha value for those pixels is set to zero to make themtransparent.
*********************************************************/package CustomClasses{
import flash.display.Bitmap;import flash.display.BitmapData;
import flash.geom.Rectangle;import flash.utils.ByteArray;
import mx.containers.Canvas;import mx.controls.Image;
import mx.events.FlexEvent;//====================================================//public class Driver extends Canvas {
private var origImage:Image = new Image();public function Driver(){//constructor//Make this Canvas visible with a yellow background.
setStyle("backgroundColor",0xFFFF00);setStyle("backgroundAlpha",1.0);
//Load the origImage and embed it in the swf file.//Note the slash that is required by FlashDevelop.
[Embed("/dancer.png")]var img:Class;
origImage.load(img);//Register a CREATION_COMPLETE listener
this.addEventListener(FlexEvent.CREATION_COMPLETE,completeHandler);
} //end constructor//--------------------------------------------------//
//This handler method is executed when the Canvas has// been fully created.
private function completeHandler(event:mx.events.FlexEvent):void{
//Get and save a reference to a Bitmap object// containing the contents of the origImage file.
var origBitMap:Bitmap = Bitmap(origImage.content);//Set the width and height of the Canvas object// based on the size of the origBitMap bitmap. Make
// ten pixels wider and twice as high as the// bitmap.
this.width = origBitMap.width + 10;this.height = 2*origBitMap.height;
//Add the original image to the Canvas object at// the default location of 0,0.
this.addChild(origImage);//Clone the origBitMap to create a// duplicate.
var dupBitMap:Bitmap = new Bitmap(origBitMap.bitmapData.clone());//Put the dupBitMap in a new Image object and
// place it on the canvas below the original image.dupBitMap.x = 0;
dupBitMap.y = origBitMap.height;var newImage:Image = new Image();newImage.addChild(dupBitMap);
this.addChild(newImage);//Set the alpha value for all pixels in the new// image with a color of pure magenta to zero.
processChromaKey(dupBitMap);} //end completeHandler
//--------------------------------------------------////This method identifies all of the pixels in the// incoming bitmap with a pure magenta color and sets
// the alpha bytes for those pixels to a value of// zero.
private function processChromaKey(bitmap:Bitmap):void{//Get the BitmapData object.
var bitmapData:BitmapData = bitmap.bitmapData;//Populate a one-dimensional byte array of pixel
// data from the bitmapData object. Note that the// pixel data format is ARGB.
var rawBytes:ByteArray = new ByteArray();rawBytes = bitmapData.getPixels(new Rectangle(
0,0,bitmapData.width,bitmapData.height));//Declare working variables. Note that there is// no requirement to deal with the green color
// value in this case of testing for magenta.var cnt:uint;
var red:uint;var green:uint;
var blue:uint;for (cnt = 0; cnt<rawBytes.length; cnt += 4) {
//alpha is in rawBytes[cnt]red = rawBytes[cnt + 1];green = rawBytes[cnt + 2];blue = rawBytes[cnt + 3];if ((red == 255)&&(green == 0 )&&(blue == 255)) {//The color is pure magenta. Set the value
// of the alpha byte to zero.rawBytes[cnt] = 0;}//end if
}//end for loop//Put the modified pixels back into the bitmapData// object.
rawBytes.position = 0;//this is criticalbitmapData.setPixels(new Rectangle(
0,0,bitmapData.width,bitmapData.height),rawBytes);} //end processChromaKey method
//--------------------------------------------------//} //end class
} //end package
Listing of the mxml file.
<?xml version="1.0" encoding="utf-8"?><!--
Project ChromaKey01This project scans all of the pixels in an image to
identify those pixels with a color of pure magenta. Thealpha value for those pixels is set to zero to make them
transparent.--><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:cc="CustomClasses.*"><cc:Driver/></mx:Application> Miscellaneous
This section contains a variety of miscellaneous materials.
Housekeeping material
- Module name: Using Chroma Key Compositing to Create Transparent Backgrounds
- Files:
- ActionScript0134\ActionScript0134.htm
- ActionScript0134\Connexions\ActionScriptXhtml0134.htm
PDF disclaimer: Although the Connexions
site makes it possible for you to download a PDF file for thismodule at no charge, and also makes it possible for you to
purchase a pre-printed version of the PDF file, you should beaware that some of the HTML elements in this module may not translate well into
PDF.
Publication issues : This project was originally
developed using the free open-source
FlashDevelop development tool. However, because of limitations of the
Connexions web site, it was necessary for me to convert the project to aFlex Builder 3 project to make it possible for you to
run the program from this Connexions module.
-end-
Read also:
OpenStax, Object-oriented programming (oop) with actionscript. OpenStax CNX. Jun 04, 2010 Download for free at http://cnx.org/content/col11202/1.19
Google Play and the Google Play logo are trademarks of Google Inc.