Bitmap flashyness
July 22, 2007
I've finally found a good excuse at work to play with Flash 8's BitmapData class. This is a long-awaited feature new to Flash 8 that lets programmers play with bitmaps of data in memory and display them onto the screen. Prior to Flash 8 you could only use vector shapes and predefined bitmaps from the resource library. You could do a limited amount of things to the bitmaps like make them transparent or shift their colours a bit, but it was all rather limited.
Now all that has changed. Actionscript now has the ability to render a vector shape to a bitmap in memory, run fast filters over the bitmap, blend bitmaps together in various ways and to plot individual pixels. It might not sound like much, but the scope for new tricks is huge.
One such trick helps make particle effects better. You move and render your particles to the bitmap each frame, then process the bitmap with some kind of bitmap effect. In a simple form this gives rise to nice spark effects:
Sparks
This is nothing we couldn't do with earlier versions of Flash to an extent. The cool thing here is that it runs way faster than before. The work to be done in each frame is to move the particles, redraw the particle head effect and draw the most recent segment of the particle tail. Then the entire tails bitmap is processed with a colour transform that reduces the alpha channel of every pixel. This fades the tails out in a pleasing way. It also means that the length of the tail and even the amount of tails being processed has no effect on the time taken to render the last step. If we want longer tails we just fade the bitmap less per frame.
The new bitmap effects are good for smoke too. This is stuff we couldn't do in earlier versions of Flash without a large looping video. The following three examples are nearly identical code with minor tweaks to change the way the bitmap is processed. In fact, all the demos in this post are nearly identical code - just different configurations of the new particle engine I built.
You might need to stop each effect before starting the next, depending on how fast your computer is.
Smooth smoke
Moody smoke
Lost's Smoke Monster?
Explosions
How about some destruction? Click for explosions. Effects like this are usually done with a series of pre-rendered bitmaps, but this leads to a couple of problems. Firstly every explosion looks the same. Secondly, two overlapping explosions get various silly-looking halo effects at the edges. The way the bitmap processing is done here avoids both those problems. Try putting a few explosions near each other and see how they smoothly mix where they overlap.
Need a little water to put out the fire?
Now all that has changed. Actionscript now has the ability to render a vector shape to a bitmap in memory, run fast filters over the bitmap, blend bitmaps together in various ways and to plot individual pixels. It might not sound like much, but the scope for new tricks is huge.
One such trick helps make particle effects better. You move and render your particles to the bitmap each frame, then process the bitmap with some kind of bitmap effect. In a simple form this gives rise to nice spark effects:
Sparks
You do not have the latest version of Flash installed. Please click here to go and get it
This is nothing we couldn't do with earlier versions of Flash to an extent. The cool thing here is that it runs way faster than before. The work to be done in each frame is to move the particles, redraw the particle head effect and draw the most recent segment of the particle tail. Then the entire tails bitmap is processed with a colour transform that reduces the alpha channel of every pixel. This fades the tails out in a pleasing way. It also means that the length of the tail and even the amount of tails being processed has no effect on the time taken to render the last step. If we want longer tails we just fade the bitmap less per frame.
The new bitmap effects are good for smoke too. This is stuff we couldn't do in earlier versions of Flash without a large looping video. The following three examples are nearly identical code with minor tweaks to change the way the bitmap is processed. In fact, all the demos in this post are nearly identical code - just different configurations of the new particle engine I built.
You might need to stop each effect before starting the next, depending on how fast your computer is.
Smooth smoke
You do not have the latest version of Flash installed. Please click here to go and get it
Moody smoke
You do not have the latest version of Flash installed. Please click here to go and get it
Lost's Smoke Monster?
You do not have the latest version of Flash installed. Please click here to go and get it
Explosions
You do not have the latest version of Flash installed. Please click here to go and get it
How about some destruction? Click for explosions. Effects like this are usually done with a series of pre-rendered bitmaps, but this leads to a couple of problems. Firstly every explosion looks the same. Secondly, two overlapping explosions get various silly-looking halo effects at the edges. The way the bitmap processing is done here avoids both those problems. Try putting a few explosions near each other and see how they smoothly mix where they overlap.
Need a little water to put out the fire?
You do not have the latest version of Flash installed. Please click here to go and get it
Matt says:
July 23, 2007 @ 09:22 — Reply
Cool effects. I like the lost smoke!
BenG says:
July 25, 2007 @ 12:46 — Reply
FIRE!