Hey folks,
For a lot of the stuff I'm working on, especially mobile, I don't want to have a lot sprite sheets when I'm using Flash. I just want to do my animations once and have them work at all resolutions via their vector goodness.
Here are your tools to do so: (I have these methods residing in a class called 'Draw' so you'll see it referenced here, you can place these in any class. If so, just change that class name.)
public static function drawScaledMovieClip(mc:MovieClip, mcWidth:Number, mcHeight:Number):Vector.<Texture>
{
var _textures:Vector.<Texture> = new Vector.<Texture>();
// Loop through passed in movieclip frames and build the bitmaps.
for (var i:int = 1; i <= mc.totalFrames; i++)
{
mc.gotoAndStop(i);
_textures.push(Texture.fromBitmap(Draw.drawBitmapScaled(mc, mcWidth, mcHeight, false), false));
}
return(_textures);
}
public static function drawBitmapScaled(mc:MovieClip, mcWidth:Number, mcHeight:Number, hasPadding:Boolean = false):Bitmap
{
// Store the original width and height of the passed in clip.
var tempW:Number = mc.width;
var tempH:Number = mc.height;
// Set the mc clip to the passed in width and height.
mc.width = mcWidth;
mc.height = mcHeight;
// Store the X and Y scales of the mc clip that has been altereted with the passed in width and height.
var scaleX:Number = mc.scaleX;
var scaleY:Number = mc.scaleY;
// Reset passed in mc to it's original width and height stored at the start of the function.
mc.width = tempW;
mc.height = tempH;
// Setup bitmap data.
var scaleBmpd:BitmapData;
if (!hasPadding)
{
scaleBmpd = new BitmapData(Math.round(mc.width * scaleX), Math.round(mc.height * scaleY), true, 0x00000000);
}
else
{
scaleBmpd = new BitmapData(Math.round(mc.width * scaleX) + 10, Math.round(mc.height * scaleY) + 10, true, 0x00000000);
}
// Setup bitmap and associated matrix.
var scaledBitmap:Bitmap = new Bitmap(scaleBmpd, PixelSnapping.ALWAYS, true);
var scaleMatrix:Matrix = new Matrix();
scaleMatrix.scale(scaleX, scaleY);
if (hasPadding)
{
scaleMatrix.translate(1, 1);
}
scaleBmpd.draw(mc, scaleMatrix);
return scaledBitmap;
}
Example for creating a starling movieclip from a flash movieclip:
// Create the starling movieclip
var starling_mc:MovieClip = new MovieClip(Draw.drawScaledMovieClip(new YourMovieClipLinkageNameHere(), width, height), framerate);
// Add the movieclip to the juggler.
Starling.juggler.add(starling_mc);
// Make that shit appear.
addChild(starling_mc);
*Remember you must give your movieclip (in Flash) a class name under it's ActionScript Linkage section and make sure it exports for ActionScript, leave it's baseclass as flash.display.MovieClip.
So you may have also noticed, you smarty pants, the other function 'drawBitmapScaled'. This is the new hotness. When I build mobile games I like to deal in percentages of screen size to allow goodness across all screen sizes. So I use this beast quite frequently.
An example (this is not for movieclips, just a bonus):
var yourGraphic:Image = new Image(Draw.drawBitmapScaled(new YourClipLinkageNameHere(), width, height, false), false));
*There is a padding boolean in the method's signature and I use it when funky things with images having some flat edges, it usually fixes that. Just experiment with that option.
Quick Flash 101 for newer folk:
I mentioned above in a note about setting your linkages. "How the hell do I access that said linkage in my code?"
Good question. This is how I do it in all my projects. I have one Flash file that has all my game graphical assets and animations. No code at all.
Go to your (in Flash) File -> Publish Settings and make sure the only thing checked under 'PUBLISH' is 'SWC' and set a path for it to be compile/exported to. Once that is done you can use it in your IDE (integrated development environment - ie: FlashDevelop, Flashbuilder, Intellij, etc). I use FlashDevelop, so once I see the SWC file popup in my project library I just right click on it and say 'Add To Library' and boom I have access to all my Flash stuff. Everything you gave a linkage name to appears as a class that you can instantiate.
I wish I had all of this when I started Starling, I would have more hair.
Enjoy.
PS. Remember your animations, when added to starling will only be the size of the first frame out of Flash. So if you want to have a uniform size (no weirdness) create a box around your content in Flash, definitely leave some space between the box's sides and your content. Also you'll want to make sure your x and y are 0 for your Flash stuff. You can readjust those pivot points (if you'd like) once you get it in Starling.