Making "The Bomb" in FLASH: step-by-step instructions

by James Reilly
Instructor SMC ET34 Flash

• Change the Movie's background: Modify> Movie> "Background" (color box selector)> choose a light blue color> OK

2. Open the "Library" window

• From it, select Options> New Symbol
• Name it "Bomb", select the "Graphic" radio button> OK
  
  You will then see the word "Bomb" next to an icon in a small white square next to the word "Scene 1" at the upper-left of the movie window. This means you are now editing the graphic symbol "Bomb" (which is still blank), rather then the whole movie.
  
  
• Draw the body of the bomb (just the round black part, without the fuse top on it) by selecting the circle tool from the Tool Palette, and assigning the proper colors to the outline and the inside of the circle (the outline color for this circle should be blank, indicated by the box showing the color for the line part being gray with an x in it). You can also select a "radial gradient" and edit its colors to give the look of a sphere.
  
  Use the Bucket tool to dump the Gradient color onto the circle you just made if you want to change the position of the gradient fill on your bomb object.
  
  Since the Bomb graphic has only one layer now, we should name that layer by left-clicking the word "Layer 1". Rename it "sphere". After you have done that, add another layer (Insert Layer) above layer "sphere", (There are 3 ways to insert a layer: 1. Insert> Layer; 2. Right click on an existing layer> Insert Layer; 3. Left click the tiny "+layer" icon below the Layer list) and name it "bomb top"
  
  Before you draw the top part of the bomb, Lock the layer called "sphere" by the clicking on the dot below the little lock icon, OR by selecting "Lock Others" by right clicking on the "bomb top" layer.
  
  On the "bomb top" layer, use the square tool, with a linear gradient, to make the bomb top part. You can move, and rotate this part into the desired position by selecting the "Arrow" tool, then selecting the object you just drew, then moving it with the mouse and rotating it after selecting the "rotation" icon directly under the tool palette.
  
  You can also modify the shape of this object by having the arrow tool selected, then touching an edge of the object and carefully manipulating the line-edge you are touching by pushing it in or pulling it out.
  (Make an oval shape to "cap" the bomb top object and position it correctly if you have decided to make it appear as though that part is oriented at a particular angle. You can Group the Bomb Top and the Cap objects by selecting the both: Shift-select, or dragging a rectangular selection area over both, then: Modify> Group). This will allow you to position them as a unit.
  
  You now have the completed "bomb" as the only Symbol in your Library.
  
  
• Make a new Graphic Symbol (from Library window: Options> New Symbol> Name: fuse)
  The same procedure as when you made the bomb graphic begins. This time use the Pencil tool with a light gray or white color selected to draw a smooth line (line style and width choice tools are directly below the tool palette.) that will be your fuse.
  Note: Keep in mind the position of each object you draw with relation to the "Cross-hair center point". It is best to position them in the center to avoid problems with animation later.
  
  

3. Return to "Scene 1" (by clicking on that word in the upper left, or by clicking on the "Clap-board" icon in the upper-right, then selecting: "Scene 1". You will notice it is BLANK, and contains only one layer.

• Drag the bomb symbol from the library to the middle of the stage. The bomb graphic is now the only object on layer 1, so let's name that layer "bomb body"
  
  
• Insert a new layer, name it "bomb fuse", lock out "bomb body" layer, and drag the fuse object out of the library onto the stage. Position it so that it ends at the right position on the bomb top (which is on the layer below it).
  
  Note: you will notice that this scene has only 1 frame being used at this time.
  
  
• Since we want the fuse to 'burn' for 2 or 3 seconds we will need to add some frames to our animation. 30 frames should be fine. But before we do that, we need to do something to the fuse object (on the stage, where it is now called an Instance, not in the library).
  
  Select the fuse instance (a square box appears around it), then select: Modify> Break Apart (the square box goes away, and the fuse itself becomes highlighted with tiny stripes. This means we have taken it back to its line form as when we created it.)
  
  With the fuse still selected this way, select: Modify> Curves> Lines to fills. (The tiny stripes are now tiny dots, indicating that the fuse on the stage is now a shape rather than a line, and has different manipulation properties, which will let us erase it to achieve a 'burning down' animation effect, later.)

4. Now add the frames to the animation by putting the cursor in frame 30 (of each layer, or both at the same time by drag selecting), and Selecting: Insert> Keyframe (or right-click> Insert Keyframe, or F6). The animation is now 30 frames long; although it doesn't do anything yet.

5. Back to the library to make the "spark"

• Options> New Symbol> Name: spark; select Movie Clip this time; OK
  
  
• We will now create the animated spark. You will notice that its little icon is different from the others in the library. Because it is a Movie Clip.
  
  
• On layer 1 of symbol "spark" draw kind of a flash looking object with the pencil tool on 'straight line' style.
  Don't forget to select an appropriate color: Yellow or orange. Make sure you close the ends so you can fill it with a bucket of another shade of yellow or orange.
  
  
• Now add frames to the animation, 4 of 5 will be fine, and make sure there is a Keyframe on all 4 or 5.
  
  
• Select the spark shape in each keyframe (one at a time), and change it slightly. For example: scale it up or down a little, rotate it a little, or even drop in a bucket of a different color. It will only affect the shape in the particular frame you have selected.
  
  Note: Keep in mind the position of each object in each frame in relation to the 'cross-hair' center point so that the frames aren't jumping all over the place within this ANIMATED symbol.
  
  
• To test the look of this animated symbol, press the play button on the controller (Window> Controller) and make sure you are seeing the playback 'looped' (Control> Loop Playback)
  
  You can even see the animation of a symbol in the library window, but it will not loop.
  
  

6. Back to Scene 1

• Insert a new layer, name it "spark ani", lock the other layers, and drag the "spark" symbol out of the library and onto the stage.
  
  
• Position that symbol at the end of the fuse, and scale it if the size does not look right.
  
  Note: You will find that if you press the play button on the controller, the spark symbol doesn't animate. This is because 'Movie Clip' symbol animation is not visible on the stage. You must test the movie (Control> Test Movie) to see what your complete animation will look like. Go ahead, do that now.

7. Now, we need to animate the spark down the fuse.

• With the 'spark ani' layer selected, Select: Insert> Motion Guide (or right click> add motion guide)
  
  You will see that the layer icons have adjusted to indicate the relationship between the 'spark ani' layer and its 'Guide layer'. Don't forget to lock others.
  
  In fact, to enable us to draw a guide on the 'Guide' layer we need to show the other layers as 'outlines' only, by clicking on the dot under the 'black box' icon for each other layer.
  
  
• Draw another line on the guide layer that is exactly the same shape of the fuse. (Color and width are not important on a guide layer, as you will not see it in the final SWF movie that you produce.)
  
  
• Unlock 'spark ani' layer.
• Hide (by clicking the dot beneath the eyeball icon) the 'bomb fuse' and 'bomb body' layers).
• Insert a keyframe on frame 30 of 'spark ani' layer.
  
  Now we must attach the 'spark' instance to the motion guide line we drew.
  
  
• Turn on the 'snap to' icon (looks like a magnet, below the tool palette)
  
  
• Select the first frame of layer 'spark ani' and select the 'spark' instance very close to its center point, and as you move it around you will notice there is a small circle in it. This circle will "snap" to the end of the motion guide line. Release the mouse - you have established the position of the 'spark' instance on frame one of the animation.
  
  
• Select frame 30 of the 'spark ani' layer. Do the same thing you did before, but this time position the 'spark' instance at the other end of the motion guide line. This is will the spark will be on frame thirty.
  
  If you move the time line needle from frame 1 to frame 30, you will see that the spark "pops" to the end of the guide line.
  
  

8. Creating the "Motion Tween" that moves the spark down the fuse in span of thirty frames.

• Select frame 1 of 'spark ani' layer. Select: Modify> Frame> Tweening> Motion (from pull-down; don't worry about the other choices for this lesson) > OK
  
  Now slide the red time-line needle or press play. Wow! The spark slides down the guide.
  
  Test the movie (Control> Test Movie) and you will see the animated spark moving down the fuse toward the bomb.
  
  Note: You can just close the Test Movie window when you are done looking at it; it will open again next time you want to do a Test Movie.
  
  BUT... the fuse is not burning down. Let's fix that now.

9. Burning the fuse

• On Scene 1: Lock and Outline'spark ani' layer and its guide layer. Unhide and unlock 'bomb fuse' layer. Unhide (but leave locked) 'bomb body' layer.
  
  
• Drag-select all frames in 'bomb fuse' layer, then: Insert> Keyframe (or F6)
  
  You will see that every frame now has a keyframe
  
  
• Select the eraser tool (with an appropriate size), then as you move the time-line needle to the right, frame-by-frame, erase any part of the fuse object that protrudes beyond the upper part of the 'spark'.
  
  In fact, it wouldn't hurt to erase the fuse down to about the center of the 'spark' so that nothing is sticking out as the spark animates.
  
  Control> Test Movie
  
  "Viola!"

10. The Big Bang

• Back to the Library: Options> New Symbol> name it "Bang", choose "graphic"
  
  
• In the same manor that you created the 'spark' object, draw a simple explosion object (like a big 'spark'); but it will have only one frame, and NOT be a movie clip.
  
  

11. Back to Scene 1 to put in the explosion layer.

• With the top layer selected, Insert> Layer; name it 'big bang'; Lock Others (layers)
  
  
• Select frame 31 of this new layer and: Insert> Keyframe
  
  
• Drag 'bang' out of the library and onto the stage.
  
  You will notice that on frame 31 'bomb' disappears, and 'bang' appears. So scale and position the 'bang' instance so it will be in the right place to replace the bomb after it explodes.
  
  
• Select frame 33, and: Insert> Keyframe
  
  
• At frame 33, scale bang to be somewhat larger than it was in frame 31. (Kind of fill the screen with it)
  
  
• With 'bang' selected in frame 33, select: Modify> Instance>Color Effect>Alpha: then slide the knob over to make 'bomb' transparent.
  
  

12. Animating the Bang.

• In 'big bang' layer, select frame 30. Select: Modify> Frame> Tweening> Motion (don't change the other details)
  
  
• In 'big bang' layer, select frame 50. Insert> Keyframe
  
  
• Control> Test Movie
  

13. Adding the sound effects.

• Insert one more layer (on top of 'Big Bang' layer) and name it "sounds"
  
  
• Select frame 1 of this layer then get your PRE-MADE sound effect for the spark by selecting: File> Import; find your sound and click Open. (That will put your sound in the Library)
  
  
• Then "double-click" on frame 1 in layer "sounds"; or with frame one selected, select: Modify> Frame> Sound: then select your just-imported sound from the pull-down menu.
  
  Then insert another keyframe on frame 30 (where your explosion begins), and repeat the process with your PRE-MADE sound effect for the explosion.
  
  Note: You may need to add a few frames to the end of your sound layer to allow time for the explosion sound effect to finish playing.
  
  
  

You're Done!

Final Comments:
I have added a loading loop, and 'Play' & 'Stop' buttons to the sample movie to allow you to better analyze it.

In class this week we will deal with Buttons to start & stop your movie, and Frame Actions to control its play.