It took me a bit longer than I thought, but it is done! I have created a custom "BitmapClip" class for you guys! This class can do it all:

1. Import MovieClip, Sprite, and even Tile sheets!
2. Animate each clip at it's own frame rate.
3. Control it just like you would a MovieClip.
4. It even creates pre-rotated frames for you! Now you can have super fast animated clips AND support rotation! WOOT.
5. You can also support scaling by simply adding the clip to a sprite without losing *much* speed.

If you want to see a demo where I am using the BitmapClip with thousands of clips on screen moving / scaling and rotating then go here: Game Framework Test

You can download the package containing all of the code and demos or simply grab the file off of the repository on my Google project page.

The following are instructions on how to use it (which are included in the download as well):

//BitmapClip - by Colby Cheeze: Cheezeworld.com
//Read this source file for an example of how to use it!
 
package {
import com.cheezeworld.rendering.BitmapClip;
import com.cheezeworld.utils.*;
 
import flash.display.*;
import flash.events.*;
 
[SWF(width="700", height="550", frameRate="30", backgroundColor="#FFFFFF")]
public class BitmapClipDemo extends Sprite
{
public var MC_ANIM:int;
public var TILES_ANIM:int;
 
public var bitmapClip:BitmapClip;
public var bmp:Bitmap;
public var bitmaps:Array;
public var clipCopies:Array;
 
public function BitmapClipDemo()
{
// Step 1. Create a Bitmap object to "hold" the BitmapClip
//
// NOTE: You can then put it inside of a Sprite, or just
//       leave it as a Bitmap.
 
bmp = new Bitmap();
bmp.x = 300; bmp.y = 400;
addChild(bmp);
 
// -------------------------------------------------------
 
// Step 2. Create a new BitmapClip
// Parameters explained:
// clipToCopy :         Explained below...just set to null for now
//
// bmpToUpdate :         Reference to the Bitmap object you just created
//                          NOTE: if you set bmpToUpdate to null you will have to update
//                          your bitmapData yourself each step of your game using
//                          bmp.bitmapData = bitmapClip.bmpData;
//
// framesOfRotation :     Set how many precalculated rotations you would like
//                           NOTE: you will rarely need more than about 32 unless
//                         you want VERY detailed rotations...in which case I
//                          still wouldn't use more than about 128!!
//
// isEventBased :        Leave true to allow clip to update itself. If you
//                        set this to false you must manually update the clip
//                        each frame of your update loop by using
//                        bitmapClip.update();
//                        (I think manual updating is a bit faster)
 
bitmapClip = new BitmapClip(null,bmp);
 
//Listen for the completion event of the graphics being loaded in
bitmapClip.addEventListener(Event.COMPLETE, onClipLoad);
 
// ------------------------------------------------------------------------------
 
//Step 3. Import in some graphics. Here we will use a movieclip from the library
//          as well as a tileshee from a PNG we created.
//
//            NOTE: If you use a Sprite then the last two params can be left alone.
//                  If you use a movieclip, then they are optional. Leave alone to
//                  copy ALL frames of the movieclip.
//
//           NOTE2: importFrames() and importTileSheet both will return an index
//                  to the animation that has been created. I made it possible to
//                  add multiple animations to each clip so that you can have one
//                  clip to hold all states of a characters movements such as
//                  "walk", "run", "attack", etc...
//
//           NOTE3: When adding multiple animations be sure that they are all the
//                  same width/height, otherwise the bitmapClip.width/height value
//                  will return the width/height of the first animation imported.
//                  Also the bitmapClip.center property will be off (which is to
//                  be used in any positional calculations or hittests etc...)
//                  (in this exmaple I use diff sizes, but its just an example...)
//
 
MC_ANIM = bitmapClip.importFrames(new ANIMATED_SQUARE());
 
//Add an animation to the clip from a tilesheet (params are self explanatory)
var tiles:Bitmap = new TILES();
TILES_ANIM = bitmapClip.importTileSheet(tiles.bitmapData,16,16);
 
// ------------------------------------------------------------------------------
 
// Step 4. Set any other properties you wish to alter ---------------------------
 
//Set your own framerate (default is 24)
bitmapClip.frameRate=5;
 
//Set which animation you want to show. (default is the first one imported in)
bitmapClip.currentAnimation = TILES_ANIM;
 
//FURTHER INSTRUCTIONS IN THE onClipLoad FUNCTION...
 
// ------------------------------------------------------------------------------
 
addEventListener(Event.ENTER_FRAME, onEnterFrame);
Input.instance.activate(this.stage);
}
 
private function onClipLoad(e:Event):void{
//Step 5. Create any copies using the existing graphics in order to
//          save processing time. (Trust me, you want to do this.)
 
//since we are loading in two animations we want to make sure this
//only runs after the 2nd one is loaded in!
_loadCount++;
if(_loadCount==2){
 
clipCopies = new Array();
bitmaps = new Array();
for(var i:int=0; i<50; i++){
bitmaps[i] = new Bitmap();
bitmaps[i].x = Math.random()*650;
bitmaps[i].y = Math.random()*200;
addChild(bitmaps[i]);
 
//here we set the clipToCopy parameter to the one we already created;
clipCopies[i] = new BitmapClip(bitmapClip, bitmaps[i]);
clipCopies[i].rotation = Math.random()*360;
clipCopies[i].currentAnimation = Math.round(Math.random());
clipCopies[i].frameRate = Math.random()*30;
clipCopies[i].bitmapToUpdate = bitmaps[i];
}
 
// NOTE: You may control the clip just like you would a movieclip -
// bitmapClip.play(); .stop(); .gotoAndPlay(); .gotoAndStop(); .nextFrame(); .prevFrame();
//
// NOTE2: bitmapClip.rotation can take any value. (in degrees) it calculates the correct
//        frame from it's internal data for you.
//
// NOTE3: you can check out the source for a *few* more properties that aren't shown here.
//
// NOTE4: For any further questions you can e-mail or hit me up on MSN @ colby@cheezeworld.com
 
// -----------------------------------------------------------------
}
}
 
private function onEnterFrame(e:Event):void{
handleInput();
 
bitmapClip.rotation+=3;
 
Input.instance.update();
}
 
private function handleInput():void{
if(Input.instance.isKeyReleased(KeyCode.UP)){
bitmapClip.frameRate++;
} else if(Input.instance.isKeyReleased(KeyCode.DOWN)){
bitmapClip.frameRate--;
if(bitmapClip.frameRate <= 0) bitmapClip.frameRate = 1;
}
 
//Change the animation
if(Input.instance.isKeyDown(KeyCode.RIGHT)){
bitmapClip.currentAnimation++;
} else if(Input.instance.isKeyDown(KeyCode.LEFT)){
bitmapClip.currentAnimation--;
}
}
 
[Embed(source="assets/library.swf", symbol="AnimatedSquare")]
private var ANIMATED_SQUARE:Class;
[Embed(source="assets/tiles.gif")]
private var TILES:Class;
 
private var _loadCount:int=0;
}
}

(5 votes, average: 5 out of 5)

 Loading ...