Make your own free website on Tripod.com
Bitmap explosion effect created with JSFL
by Eric Lin

This is a tutorial about creating a  bitmap explosiion effect. Although the source fla are in MX format, the creation needs MX2004 JSFL technique. 

Please click the "replay" button to see the explosion effect

download source fla's in explode.zip


The algorithm for explosion

Before we create a bitmap explosion, we should try to create an explosion about blank square. Here is the movie.

Yellow square explosion movie.

If you see nothing but a black background,  please click "replay" button to see the explosion effect.

This big 420x280 pixel yellow region is in fact composed of 200 small squares arranged seamlessly in 20 columns and 10 rows. We assigned each small square with different x velocity, y velocity and shrinking speed. The values are created by random.

When the movie plays, each piece moves with its own x velocity, y velocity and shrinking speed. The result is an effect consisting of randomly moving and shrinking pieces. It is like "Explosion" or "scattering".

I am not going to discuss the script in details. There are only several lines of script. They are not difficult to understand. You can check them in the source fla file.

To make the effect more fancy, I add a "delay" effect, so that it explodes from left center rightward and spreads up and down like an "Arrow travelling from the left to right end".

The movie is very CPU comsuming. It needs to move 200 pieces of movieclips per frame time. I set the movie 30 FPS. The explosion effect may be slow if your computer is slow.

Anyway, for most computer, we still can "feel" the explosion effect.


Bitmap square created with square mask and masked bitmap base

How to turn those blank yellow square pieces to contain bitmap clips ?

The first possibility that occurred to my mind is by taking advantage of  Mask Technique.

Create a symbol containing a small square and a bitmap clip. Let the square mask the bitmap clip. The appearance is a square region of bitmap.

We can make the desired region shown up by moving the masked bitmap to proper position. For example, we move the bitmap clip left ward 20 and upward 28, then the region shown through the mask will be what we expect on the second column and the second row.

We can attach 200 instances of that single symbol and arrange them into 20 columns and 10 rows. Adjust the shown region by action script. That is all.

This does work. If our bitmap was not so large as 400x280, or if the number of pieces was not so large as 200. then it would have been acceptable. If we want a 50x50 bitmap explodes into 25 pieces, this Mask technique will be a good way. .

For our project, it is too CPU intensive and the effect is too slow in most computer. It is more like an effect that some pieces just get loosened and drop off sequentially. Nothing seems explosion effect.

It seems that when the movie plays, each piece behaves like a clip of 400x280 in size not what we expect 20x28. We know that if we trace its _width and _height we do get a result as 400x280.  We can imaging the reason why the movie is so slow. It is handling 200 pieces of 400x280 bitmap,

Check the movie here.

Bitmap explosion done by Mask technique

I dont think it can be satisfactory to any one see it unless the computer is super super fast.


Create 200 symbols containing different regions of bitmap

How could my movie on this tutorial page plays so fast ?

The solution is to create a different symbol for different region of bitmap. Abandom the Mask technique. So, if we trace the _width and _height, the output is just our desired 20x28 pixels.

Check my source fla. Check the library window. You see in the "slices" folder, I have 200 symbols. Each symbol contains a small region of bitmap. Nothing more. No mask technique. 

Yes. The secret is "just do things decently". Forget about the lazy technique of Mask.

Well, are you kidding me ? How to create such 200 symbols to the library ?

There are smart ways.


By cutting the bitmap outside of Flash@

We might use some image editor to cut the bitmap into 200 pieces and saved them into 200 bitmap files, then import them to Flash as library bitmap symbols. Convert each imported small bitmap symbols into movieclip symbols. 

If we do so, the first that explodes will be our library. Anyway, a large number of symbols does not do much harm. It only increases the time needed to export the movie..

By this technique, each square is an instance of unique symbol. It contains variable bitmap of only 20x28 in dimension.

This movie should be fast enough and we can expect a good  "explosion effect".

In fact, I did not really attemp this technique. We can see It is a hard and tedious work if we don't have a proper software. Besides,  I expect a potential problem.

Each bitmap created outside of Flash, when gets imported, suffers an undesired bitmap shift effect. A bitmap of 20x28 dimension when gets imported, might turn out to be 19x27 in dimension. After they are arranged in columns and rows, I am not sure the result would be a seamless 400x280 images.

Let's consider another technique.


Cutting into pieces within Flash

Let's try accomplishing this job within Flash by cutting bitmap into slices to create our symbols. 

Break apart the bitmap. Draw 19 vertical lines to divide the bitmap into 20 columns. Draw 9 horizontal lines to divide the bitmap into 10 rows. Now we have a grid of 200 cells. Each cell contains a small region of bitmap. 

Click to select a cell, convert it into new symbol. Give that symbol a proper name and linkage ID according to the position. For example, the "f3_7" for the cell at column 3 and row 7.

Repeat the job for 200 times to create 200 different symbols.

Apply the explosion algorithm and finish the movie. 

Slicing it within Flash seems better and easier than doing the job outside of Flash.

However, To draw 19 vertical and 10 horizontal lines at desired position with good accuracy is still a hard job. Manually converting selections to 200 symbols also take some time.

Besides, the "convert to symbol" action really removed that region from the broken-apart bitmap. The next cells might contain only 20x27 pixels, less than what we expect 20x28 pixels.

At last, the arrange back of the 200 cells might not really a seamless large bitmap. Sometimes I see cracks between them.  

Lets try another technique.


Copy and Paste

First, we break apart the bitmap so that we can edit it. Lets call this symbol as "flower".

Let's create a new symbol. Lets name is as "f0_0".  It is expected to contain a small bitmap. It is expected to be arranged at the position column 0 and row 0.

Bring out the flower symbol. Drag a left corner selection and click "copy". Bring out the empty "f0_0" symbol to edit  Click "paste in place". Now, we have successfully created a symbol containing a small bitmap - a small regional clip of the left corner of the "flower".

Repeat the procedures, by dragging another selection on the "flower", we can create another symbol by copy and paste. 

The original bitmap does not get cut-off. Each selectiion does not cut the bitmap off like it does in "convert to symbol". Some marginal bitmap data might exist in two symbols that are next to each other. This wont do harm and this garantees that we won't get "crack" after they are assemblied together.

However, this is an even harder work than convert to symbol. Besides, there are limitations.

When we do "selection" by dragging mouse, we can only select a regioin at the corners or edges. It seems no way to select regions inside the bitmap. When we press the mouse pointer inside the bitmap region, it is interpretated as "Drag Move" action not "Select rect". Dragging the mouse drags the whole bitmap. No way to select a small square region at the center of the bitmap.

 It is nearly impossible to drag an accurate size of 20x28 selection rect by eye-and-hand. There is no such panel to assign the select region.

So, we get to solve this limitation.


The JSFL

Flash MX2004 gives us a new powerful tool. The JSFL.  Lets try it. 

Now, run our lovely Flash MX2004.

Do the procesures describe above. Create two symbols by copy selections from bitmap symbol and paste to our symbols. Then follow the steps below.

Press CTL-F10 or click the menu "Window->Other Panels -> History" to bring up the history panel. There we see several script lines echoing what we have just done. Be sure to check "view->javascript in panel".

Maybe you are not familiar with JSFL. Do not be panic.  I am not familiar with that thing either. However, I still can guess what those lines mean. They are just the job that we have done. If you want to learn it more, you can click "undo" to see what each step is. Now let us focus on this line:

  fl.getDocumentDOM().setSelectionRect({left:-20, top:-36, right:24, bottom:32});

Those rect coordinates are just what we drag for selection. We see that, those coordinates are not accurately as what we desired. If it was (0,0,20,28).  that would be perfect. Well, we can't modify it directly in that panel, but we can copy those steps as command. Then if we "run command", Flash will perform all the steps described in the script lines. The job is done as if we do it manually.

If we repeat those lines 200 times, we can create 200 new symbols. If we modify our symbol name and selection coordinates for each loop, then we can create 200 symbols containing different bitmap region..

Here is our command:


The JSFL file

var lib = fl.getDocumentDOM().library;
//40x40 square so, 400x280 will be 10x7 square
var source = 'flower';
var w = 20;
var h = 28;
var cols = 20;
var rows = 10;
for (var i = 0; i<cols; i++) {
    for (var j = 0; j<rows; j++) {
        var name = 'f'+i+'_'+j;
        lib.addNewItem('movie clip', 'slices/'+name);
        lib.setItemProperty('linkageExportForAS', true);
        lib.setItemProperty('linkageExportInFirstFrame', true);
        fl.getDocumentDOM().library.selectItem(source);
        fl.getDocumentDOM().library.editItem();
        fl.getDocumentDOM().setSelectionRect({left:i*w, top:j*h, right:i*w+w, bottom:j*h+h});
        fl.getDocumentDOM().clipCopy();
        fl.getDocumentDOM().library.selectItem('slices/'+name);
        fl.getDocumentDOM().library.editItem();
        fl.getDocumentDOM().clipPaste(true);
        fl.getDocumentDOM().moveSelectionBy({x:-i*w, y:-j*h});
        fl.getDocumentDOM().selectNone();
    }
}

Save it as slice.jsfl and then click it to run or click "run command" to run this jsfl file.

Dont laugh at this script. This script is not "optimized".  For demonstration and explanation, I just copy them from the history window and modify it as little as possible. If you know more JSFL, you can write it more efficiently.


Potential of this technique

Once we have create 200 symbols with export linkage, it is not difficulty to turn out that yellow square explosion movie into a bitmap explosion movie.

I am not going to discuss the details of the script. Please check the source fla.

I would like to end this article by introducing a movie that is contradictory to "explosion". The underlying script is very similar. Please check the source fla for details.

Well, there is a big potential for this technique. We can use it as a transition animation between two bitmaps. That will be cool. ( I am not doing it now.)

Here is the movie of "Anti-Explosion of bitmap".

Anti-Explosion movie.


email: ericlin@ms1.hinet.net@