Effortless Animations in Flash
You want to display an Animation in Flash. The animation consists of a number of frames, each is saved as a small image somewhere on your HD. You wonder: What is the best way to do it?
If this scenario applies to you, here is one possible answer that does not require the Flash IDE or any full blown framework. It involves a free tool and a couple of small classes (also free) that should be easy to integrate with your project.
Step 1: Create an Image Atlas out of the individual images.
What is an Image Atlas? A big image containing many small ones side by side. Also known as Texture Atlas or Sprite Sheet.
Why do we want one? Because it’s easier to embedd one image file than many. 
It’s also reducing the size of the SWF because it compresses better then individual images. We’ll use a tool called Texture Atlas Generator to create our image atlas.
- Check “PNG” so an image atlas is generated.
- Check “Pack Transparent”. This will pack the images as small as possible by removing empty pixels. The 17 original images have a resolution of 128 x 64 each. The image atlas has a resolution of 400 x 182. So the same animation takes up roughly half the amount of pixels.
- Check “TXA” to generate another file that stores meta information e.g. what frame went where in the image atlas.
- All other options can be un-checked.
If everything works you end up with 2 new files: A TXA file and a PNG image atlas that should look roughly like this:
Step 2: Embedd the image atlas and the meta data in your Flash.
As described in my other blog post you can embed all kind of data in a SWF.
[Embed(source = "../Resources/MoikSlashAni.txa", mimeType="application/octet-stream")]
private static var animationTxaResource:Class;
[Embed(source="../Resources/MoikSlashAni.png")]
public static var animationPngResource:Class;Step 3: Use the ImageAtlas and AnimatedBitmap class to display the embedded animation.
In the Code Sample you’ll find a couple of classes from my library of custom code. Feel free to use them for your own projects. In this tutorial we’ll use the ImageAtlas class to unpack the individual frames from the image atlas and the AnimatedBitmap class (that behaves just like a normal Bitmap class with some extra functionality) that we will add to the stage to display the animation.
//unpack the embedded resources
var imageData:BitmapData = (new animPngResource as Bitmap).bitmapData;
var metaData:ByteArray = new animTxaResource;
//create an image Atlas storing our animation
var imageAtlas:ImageAtlas = new ImageAtlas(imageData, metaData);
//create an animated bitmap...
var animation:AnimatedBitmap = new AnimatedBitmap(imageAtlas);
//...make it play a sequence of frames...
animation.assignFramesByName("MoikSlashAni_0000", 16);
animation.play();
//and add it to the stage
stage.addChild(animation);It’s as easy as that!
Download the sample project here: ImageAtlasTutorial
Step 4: Make it your own.
You probably want to have a look in the source code (to learn what AnimatedBitmap can do) and wrap the functionality with your own code. The AnimatedBitmap has a couple of functions that make it flexible to use.
- You can toggle wheter you want the animation to loop.
- You can set the current frame yourself or let it update automatically (by calling the play method).
- You can reassign new frames so you could store a lot of different animations in the same image atlas. Running, Slash, Jump and so on. So one image atlas and one animated bitmap could be enough to display a full character. You just have to change the sequence of frames you want currently played e.g.
assignFramesByName("jump001", 14)to play 14 frames of jumping. - You can pass a callback function as a parameter to the play that is called when the last frame is reached (and the animation isn’t looping) to play a follow up animtion.
I hope this tutorial has given you something to get started with! Feel free to post further questions in the comments.
Copyright Notice: The sprite I used in the demonstration is public domain and consider the code used in the sample as released under the MIT license.
Finally blogging on my own webspace!
I have a domain, webspace and unlimitted traffic… there is no good reason beyond lazyness to not host my own blog.
So, no more forwarding to wordpress.com for I found the time and bravery to make the move! I hope everything still works. In the days to come I’ll explore the new customization options that I now have.
Thanks to Barry from GamesChart.com for the nudge!
The Challenge
A contrary approach is to put all resource files on server and load them at run time. But different types of resources require different code to load, if you require many resources at once you have to open one connection for each resource (adding a lot of overhead) and you have to keep track of multiple loaders. Lastly many resource files are compressed efficiently when embedded into a SWF and it’s sad to miss out on that kind of optimization.
Our Solution
The Details
Matrix Magic
1. How do the properties a, b, c, d, tx and ty map to the coefficients of the matrix?
2. How to use the matrix to transform a Point?
- deltaTransformPoint transforms a point without applying the translation.
x' = a * x + c * y; y' = b * x + d * y;
- transformPoint transforms a point including the translation.
x' = a * x + c * y + tx; y' = b * x + d * y + ty;
3. How to setup the matrix to get the desired transformation?
If you need it you can set tx and ty to move the transformed points relative to the new origin.
And why do I blog about math, now?
Simulating Fluids in Flash
A thread in the FGL forums got me interested in the simulation of fluids. Of course this topic has seen quite extensive coverage in academic papers but getting it to work in the limitted environment of Flash provides some intersting challenges. Interesting enough for me to give it a try over my christmas break.
I loosely followed a paper Particle-based Viscoelastic Fluid Simulation to implement a sandbox application that simulates and renders a small blob of fluid and allows you to tinker with various parameters. Click the image below and give it a try!
The fluid is represented as a set of ~400 particles that interact with their neighbours and such seem to form a coherent entity.
For rendering I use an oldschool approach: Each particle is represented as a metaball. For a given pixel the force function of every metaball is evaluated, summed up and the final sum is compared with a threshold value to decide whether the pixel is inside or outside of the fluid.
To be able to do that in realtime I precalculate the values that a forcefunction yields for pixels within a relevant range of the particles center as a Bitmap.
These tiny images (about 40×40 pixels) are rendered at the position of the particle with additive blendmode.
Now I can decide with a single lookup in the resulting Bitmap if a pixel belongs to the surface or not. That evaluation step is done by a pixel bender shader and instead of just working with a boolean state (inside or outside) I sample a gradient based on the accumulated force value.
This approach allows me to achieve a variety of styles in the visual appearance of the simulated fluid by just using different gradients.
This technique would unfold it’s real potential if you could use hardware acceleration to accumulate the field functions because that’s a bottle neck in the current implementation.
Not sure if that stuff has any practical relevance, anyway. But the SWF is only 32kb big so people that are into demos (32k, 64k) could maybe make something fancy out of it. Here’s the source code released under the MIT license.
Developing and Selling Rune Hunt
I started experimenting with real time shadows in Flash in fall 2009. At the same time I took notice of the Flixel framework and all the cool retro games that people made with it. Why not make a game of my own that combines pixel graphics with dynamic light and shadows?
At the 14th December 2009 I created a thread in the Flixel forums with a mission statement:
The setup is classic: a hero in a dungeon full of treasure, traps and NPC of questionable attitude. The twist is that I’m limiting the player’s view to what his avatar is seeing. Top-down-ego-perspective so to speak. I hope it’s making exploring the dungeon more interesting and the enemies more scary if you don’t see all the stuff long before it becomes relevant/dangerous.
It’s been the beginning of an interesting journey…
Rune Hunt Released
Hungry eyes watch from the shadows. The flickering light of a butterfly is all that keeps them at bay. Run for your live – and sanity!
Finally, after almost a year of working on it, I have finished Rune Hunt!
Well, technically it’s been finished a couple of weeks ago. But I tried to find a portal that would sponsor the game. The basic idea of sponsorship is that you include links and logos of a flash game portal in your game before you spread it. The branding means traffic for the sponsor and that traffic is what they essentially pay you for. The other great thing besides money is that the sponsoring portal has an interest in getting your game played and will help spreading it – for example by featuring it on the front page. So you get money, exposure and retain full creative control. Cool stuff!
So in the last weeks I’ve spend quite a while on flashgamelicense.com and learned a great deal about how the market around free flash games works. The website is basically an agent that brings developers and sponsors together. Sponsors can bid on your games, after a while you pick the best offer and pay a comission to FGL. The process of trying to license my own game was nerve-wrecking but fun and in the end pretty successful. Huge thanks to ArmorGames for the generous sponsorship!
But enough of that for now. Go and play the game allready! 
When trying Rune Hunt in the new 10.1 version of the Flash Player I noticed a HUGE performance drop. In the old player it would take about 27ms on my system (debug build) to update the game’s state and render the next frame. In Flash Player 10.1 this changed: The time it took to calculate a frame started fluctuating and increased to 48ms on average.
A member of the Flash Player Engineering team the new player replied to my inquiry about known performance issues:
General actionscript performance is not any slower in 10.1 than 10.0 from our testing, it must be something particular in your code which exhibits the problem. Do you have a reproducable test code or a url you can point us at?
So I tried to isolate and reproduce my problems. It seems that my problems are caused by a Memory Leak in the Drawing API. I wrote a simple test application to illustrate the issue and hopefully find a work-around.
//... there`s a buffer as rendertarget and a flare
private var _flare:BitmapData = null;
private var _buffer:BitmapData = null;
//each frame I render the flare 100 times into the buffer
for(var i:int = 0; i < 100; i++)
_buffer.draw(_flare, null, null, BlendMode.ADD);
In the 10.0 player there is no memory fluctuation caused by this code. But in the 10.1 player each draw-call allocates new memory. The total memory is increasing linearily until the garbage collector kicks in. This of course effects the performance.
In all browsers and on all systems that I tested the memory leak was present in the new player – but the way the garbage collector handled it varied so the graph isn’t always as clear. You can test it for yourself. And here’s the source for the test application.
My guess at what happens: BitmapData.draw() method accepts IBitmapDrawable an interface that is implemented by all DisplayObjects and BitmapData objects. If you pass a BitmapData object however it seems like memory gets allocated based on the size of the render target. This memory is not reused or instantly freed but has to be collected by the garbage collector.
Knowing this there’s a neat workaround: If you wrap the BitmapData in a Bitmap before you draw it you can avoid the bugged code and the memory keeps steady!
//wrap _flare in a Bitmap (do this only once!)
_flareBmp = new Bitmap(_flare);
//now instead of _flare render _flareBmp
for(var i:int = 0; i < 100; i++)
_buffer.draw(_flareBmp, null, null, BlendMode.ADD);
