The problem I have to do is convert a Movie Clip to "Animated Bitmap", this seems a bit funny and why you must do so while the MovieClip fully cover the essentials!.
In a small application, if using MovieClip in Vector format, cloned into multiple small objects will become very heavy and consume a lot of CPU.
DESCRIPTION MATHMATICS
We often have terrible head and the horrible project if not that is what troubles, and from a multitude of troubles with a very interesting problem, module creates a moving object in a space " undefined" before,on each frame to show they are not of concern to mold Center Point(0,0) , as long as the picture shows the contents still ensure quality from frame to frame logical end.
![]() |
| Figure 1: Picture shows 3D perspective of all the general frames [1..15] |
![]() |
| Figure 2: Face image - overview of moving images |
![]() |
| Figure 3: Performance of range to range across the frames |
This is what the designer is usually created, a product which, if they are not associated with other products or be required in certain cases. Back to module, module should be mounted above the joint with a larger project, This project will show it on stage, cloned it into several sub-objects, and move it in space, the success of this module will be very meaningful for us to improve the processing speed of CPU. In a specific example we will make a horse race in the form of MovieClip through "Animated Bitmap" as the figure below:
![]() |
| The horse racing with images shown will be Alnimal Bitmap |
PROBLEM SOLVING
Step 1: Determine the total area of MovieClip including coordinates deviation [x, y, with, hight] compared with Center Point(0,0) as the figure below:

Code:
/**
* Determine the total area and the initial coordinates of the object.
* @param mc
* @return Rectangle
*/
private function getRecBase(mc:MovieClip):Rectangle {
var totalframe:int = mc.totalFrames;
var maxx:Number = NaN;
var maxy:Number = NaN;
var minx:Number = NaN;
var miny:Number = NaN;
var maxw:Number = NaN;
var maxh:Number = NaN;
var temp:Number = NaN;
var temw:Number = NaN;
for (var i:int = 1; i <= totalframe; i++) {
mc.gotoAndStop(i);
var b:Rectangle = mc.getBounds(mc);
minx = ((temp = b.x) < minx)?temp:(isNaN(minx))?temp:minx;
miny = ((temp = b.y) < miny)?temp:(isNaN(miny))?temp:miny;
maxw = ((temp = b.width) > maxw)?temp:(isNaN(maxw))?temp:maxw;
maxh = ((temp = b.height) > maxh)?temp:(isNaN(maxh))?temp:maxh;
maxx = ((temp = b.x + b.width) > maxx)?temp:(isNaN(maxx))?temp:maxx;
maxy = ((temp = b.y + b.height) > maxy)?temp:(isNaN(maxy))?temp:maxy;
}
var maxwi:Number = maxx - minx;
var maxhi:Number = maxy - miny;
//Note!
var pon:Sprite = new Sprite();
pon.graphics.beginFill(0x999999, 0);
pon.graphics.drawRect(minx, miny, maxwi, maxhi);
pon.graphics.endFill();
mc.addChild(pon);
var wi:Number = dePercent(mc.scaleX * 100, 0, maxwi);
var hi:Number = dePercent(mc.scaleX * 100, 0, maxhi);
return new Rectangle(minx, miny, wi, hi);
}
Step 2: Convert each frame into an image based on "Rectangle Base" in step 1, then save them into an array.
![]() |
| Figure 4: The array coverage marketing images in 3D |
Code:
/**Step 3: After getting the BitmapDataBase in step 2 we need to remove the excess acreage unnecessary based on RectangleBase, this means that we will find an area based on what has been eliminated. Why do we have? Because the MovieClip object may contain objects "transparent " excess, This excess increases the area of " RectangleBase " when creating an image, content of the image will not show all of those parts, so we need to remove them. Also in this step we make moving pictures of coordinates Center Point(0,0).
* Retrieving images based on the basic rectangle
* @param mc
* @param rec
* @return
*/
private function getListBase(mc:MovieClip, rec:Rectangle):Array {
var totalframe:int = mc.totalFrames;
var list:Array = new Array();
for (var i:int = 1; i <= totalframe; i++) {
mc.gotoAndStop(i);
list.push(getBaseBitmapData(mc,rec,true ));
}
return list;
}

Code:
/**
* Find a new Rectangle not including the superfluous
* @param list
* @param rec
* @return
*/
private function getRecActual(list:Array,rec:Rectangle):Rectangle {
var minx:Number = NaN;
var miny:Number = NaN;
var temp:Number = NaN;
var data:BitmapData;
var vbt:Rectangle;
for (var i:int = 0; i < list.length; i++) {
data = list[i] as BitmapData;
vbt = getViboty(data, rec);
minx = ((temp = vbt.x) < minx)?temp:(isNaN(minx))?temp:minx;
miny = ((temp = vbt.y) < miny)?temp:(isNaN(miny))?temp:miny;
}
return new Rectangle(minx, miny, rec.width - minx, rec.height - miny);
}
/**
* Get visible bounds of transparent
* [1] Frees memory that is used to store the BitmapData object.
* @param mc
* @param rec
* @return
*/
private function getViboty(mc:BitmapData,rec:Rectangle): Rectangle {
var data:BitmapData = new BitmapData(rec.width, rec.height, true, 0x00000000);
data.draw(mc);
var trec:Rectangle = data.getColorBoundsRect(0xFFFFFFFF, 0x000000, false);
data.dispose(); //[1]
return trec;
}
Step 4: After getting a "RectangleActual" in step 3, we proceed to create images based on "RectangleActual" and the base image was obtained from step 2, then save them into an array, this array is considered as the basis for "Animated Bitmap".
Code:
/**
* [1] Frees memory that is used to store the BitmapData object.
* @param list
* @param newrec
* @return
*/
private function getListActual(list:Array, newrec:Rectangle):Array {
var data:BitmapData;
var newlist:Array = new Array();
for (var i:int = 0; i < list.length; i++) {
data = list[i] as BitmapData;
newlist.push(getActutalBitmapData(data, newrec));
}
clearListBase(list); //[1]
return newlist;
}
Finally, create a class from the above general and named DataMix. This class three basic methods are: width, height, and restore the image as Array.
var dm:DataMix = new DataMix(mc);
dm.width;
dm.hight;
dm.data; // as Array
And from here we can completely assured when working with a design deviation without worrying that our results can be misleading.
Come back DataMix, make DataMix motion, we put it into a MovieMix that I wrote long before DataMix birth.
Do you believe it works? Try that!
var dm:DataMix = new DataMix(mc);
var mx:MovieMix = new MovieMix(dm.data, dm.width, dm.height,stage.frameRate);
addChild(mx);
Demo:
Source:
DataMix.as
MovieMix.as
MoviePix.as
EnterFrame.as
Wiki:
Wiki DataMix
Note:
Remove the package name when you want to use it.
The last reference:
Animated Bitmap Class by Hexagonstar
Understanding the Transformation Matrix
Lab.polygonal.de
Preorder and postorder traversal





2 comments:
Hi,thanks your excellent post!
I found in the getBaseBitmapData function in DataMix,there is a "matrix.scale(mc.scaleX,mc.scaleX);",
should it be "matrix.scale(mc.scaleX,mc.scaleY);"?
@mk, thank you for reading, in case you change the disproportionate rate, that is scaleX% != ScaleY% => you should be there right, but in another case, when we scale at a rate equal, ie X = Y <=> X then I set "matrix.scale(mc.scaleX,mc.scaleX);".
You can modify in case needed, I appreciate the creativity.
Post a Comment