"Tsunami, Japanese word, meaning “harbor wave” and used as the
scientific term for seismic sea wave generated by an undersea earthquake or
possibly an undersea landslide or volcanic eruption. When the ocean floor is
tilted or offset during an earthquake, a set of waves is created similar to the
concentric waves generated by an object dropped into the water."
Microsoft ® Encarta ® Reference Library 2005. © 1993-2004
Microsoft Corporation. All rights reserved.
Flash MX 2004
Minimum Screen Resolution: 1024 x 768
Level: Beginner
If you you need help with drawing, you can open the tsunami-exercise.fla file and follow the animation procedures.
1- Using the Properties Panel, set the document size
to:
2- Rename Layer 1 to Wave
3- Using the Brush Tool (B)
, round shape
, and a blue
Fill Color
Draw the wave. NB: for best results make sure that the wave is as smooth as
possible, but not fully straight. NB: don't worry if you are drawing off
stage. Only items drawn on the stage (White area) will be included in the final
animation.
4- Using a square-shape eraser (E)
Erase
all off stage water.
5- Insert a new layer
and rename it to CTP for Continental Tectonic Plate.
6- Using the Pen Tool (P) and brown stroke
and fill
draw
the continental tectonic plate with the right end above the water level. Using a
small brush size, add trees at the shore, you might need to adjust the shape
of the CTP using the Subselection tool (A)
.
7- Repeat steps (5) & (6) to draw the Oceanic Tectonic Plate on a new layer that you will rename OTP.
8- Insert a new Layer and rename it to Earthquake.
9- Using the Oval Tool (O)
, with a red
stroke 
and fill
draw a circle at the
intersection of oceanic and continental tectonic plates.
10- Insert a new layer and rename it to Clouds.
11- Draw some clouds using the Oval Tool (O)
, with a
light blue fill and stroke.
12- Insert a new layer and rename it to Replay Button.
13- Using the Text Tool (T)
, Type the
word Replay. Select the word using the Selection Tool (V)
, then click
on Modify/Convert to Symbol or simply press F8. Type Replay
Button as a name for this symbol and choose its behavior to be a Button
as shown in this image:
then press on the
from the
Behaviors Panel and choose Movie Clip then Go to and Play at frame
or Label.
Make sure to type "1" since we want the animation to replay
starting Frame 1.
Now that all layers and objects are drawn, we can start the animation. In this specific animation we will start from bottom to top. We will need 60 frames. We will be inserting keyframes at frames 20, 40, and 60.
1- Ocean Layer: right click frame 20 and choose
Insert Keyframe or simply press
F6.
At this frame use the Subselection Tool (A) to Slightly modify the
shape of the wave in order to initiate the seismic sea wave.
2- Click on frame 1 of the Ocean Layer and choose
.
You should
get the following result on the Timeline:
3- Earthquake Layer: right click on frame 20 and choose
Insert Keyframe.
Double click the circle to select the fill and stroke and change the fill and
stroke colors to yellow.
4- Click on frame 1 of the Earthquake Layer and choose
you should
get the following result on the Timeline:
1- Ocean Layer: right click frame 40 and choose
Insert Keyframe.
At this frame use the Selection Tool (V) to Slightly modify the
shape of the wave in order to push it inland.
2- Click on frame 20 of the Ocean Layer and
choose
3- OTP Layer: right click frame 40 and choose Insert
Keyframe.
Double click the circle to select the fill and stroke and change the fill and
move them downward.
4- Click on frame 1 of the OTP Layer and choose
5- Earthquake Layer: right click frame 40 and choose
Insert Keyframe.
Double click the circle to select the fill and stroke and change the fill and
stroke colors back to red.
6- Click on frame 20 of the Earthquake Layer and
choose
The Timeline should look like this:
1- Ocean Layer: right click frame 60 and choose
Insert Keyframe.
At this frame use the Selection Tool (V) to Slightly modify the
shape of the wave in order to push it inland.
2- Click on frame 20 of the Ocean Layer and
choose
3- Right click frame 60 and insert a Keyframe for all other layers (Replay Button, CTP, and Clouds).
4- Ocean Layer: Click Frame 60 and press on the
from the
Behaviors Panel and choose Movie Clip then Go to and Stop at frame
or Label. Make sure that you type "60" since we want the animation
to stop at frame 60. If we don't do this step the animation will play
indefinitely if we are using the default Publish Settings.
The final Timeline should look like this:
Notice the
that was added
to frame 60 indicating that there is an ActionScript code associated with it.
1- While designing, you can briefly preview the animation by moving
the playhead with the mouse
2- You can also preview the whole animation on-stage by Pressing the Enter Key.
3- To preview the animation with all functionalities you need to press
Ctrl + Enter.
to go back to the animation design mode from the preview mode you need to press the tsunami.fla
tab.
4- To preview the animation on a web page in a web browser, you need to press F12, further details are given in the next section.
The resulting Timeline will look like this:
Save your Tsumani Animation as tsunami.fla in My Documents, Desktop, floppy disk, or preferably your Flash Disk.
You will notice that the file is in .fla format and is editable in Flash. the .fla format is not usable is a standalone animation and cannot be embedded in a web page. Therefore, we need to export the file to a standalone animation or to a .swf (pronounced swif) to be embedded in a web page.
Pressing F12 will publish the .fla file to its folder based on the Publish Settings. By default, a .swf file and a .html file with the same file name used for saving the .fla file will be created in the same folder. You can edit the .html file and use it in your web pages. This method will save you time figuring out the code needed to embed the flash animation in your web page. Make sure to place both the .html and .swf files in the same folder or change the path of the .swf file if you needed to place it in a different folder.
NB: When previewing the HTML file in Internet Explorer with SP2 installed, you will need to activate the content of the page by following the instructions in the image below:
Choose your preference from File/Publish Settings:
This allows you to choose the location and format to which you want your final animation to be exported. Using the Flash and HTML tabs, you may also choose the settings of the animation as it is exported to the desired format.
Good Luck!