TechnoMono

I’m going to show you how to make a destructible box (as seen in the demo below) which you can use in your flash games. In the demo, I’ve put the box in a simple game environment, to give you an idea of how the box might look in a game.

(Click on the box to break it)

Creating the box

Open a new flash document, set the frame rate to 30fps (CTRL+J). Create a new movieclip (CTRL+F8) called ‘Box’. Draw a square with the rectangle tool (R), hold SHIFT to constrain its width/height. Give it a black stroke of 1px and a fill color of #936300. I’ve made mine 100×100 and set x and y positions to -50.

Use the line tool (N) and draw a 1px black line from the top left corner to the lower right corner of the box, then another line from the top right corner to the lower left corner.

The box is now comprised of four triangles, select the top and left triangles and change their color to #FF962D.

Now make a smaller box off to the side of the current box so not to interfere with it. Give it a color of #936300 and a 1px black stroke (mine is 62×62). Make another box, but this time a tall slim one 13.3×74.3. Delete the top and bottom strokes (leaving the side ones remaining).

Rotate the slim box to 45° using the transform tool (Q) or transform options (CTRL+T), then position the lower left side into the small box’s bottom left corner.

With the selection still active, press CTRL+D to duplicate the piece then rotate by 90° and make sure its placed correctly in the box like so:

Now move (V) the small box to the center of the big box:

Finally, select the entire box and set its width and height to 14, and it’s x and y positions to -7. This completes the box.

Breaking the box

We will use a simple shape tween to create the breaking animation. Select frame 2 in the timeline and press F6 to create a new keyframe, in the properties inspector change the tween from ‘none’ to ’shape’.

Using the selection tool (V) make small cut-outs in the box like so:

Go to frame 8 of the timeline and create a new keyframe (F6), now using the selection tool (V) break off some very small pieces of the box and space them out randomly, then delete the rest of the box. Make it look something like this:

Rename the layer to ‘box’, then create a new layer called ‘actions’. We don’t want it to loop over and over, so on the actions layer at frame 9, add a blank keyframe (F7), then press F9to bring up the Actions Panel and type:

1

stop();

To test the movie, drag an instance of the box symbol from the Library (CTRL+L) onto the Stage and press CTRL+ENTER. The desructible box is now complete, save your file as ‘destructibleBox.fla’.

Using the box in a game

The first frame represents the box in it’s unbroken state. As such, we want any box movieclip instance to start off paused on frame 1, so add a stop() action to frame 1 of the actions layer. Breaking the box is as simple as instructing the movieclip to go to frame 2 (the start of the shape tween) and continue playing through the animation. When frame 9 is reached, the script on frame 9 will stop the animation (the box will vanish because there is no content on frame 9). Assuming box holds a reference to a box movieclip instance, the following code would break the box.

1

box.gotoAndPlay(2);

For example, the following ActionScript 3.0 code will break the box whenever the box is clicked (as in the demo above):

1
2
3
4
5

box.addEventListener(MouseEvent.CLICK, clickListener);
 
function clickListener(e:MouseEvent):void {
  box.gotoAndPlay(2);
}

I hope you found this tutorial helpful.