Flash
5 Project
modified: March 24, 2002
What is Flash?
Flash is a multimedia program that helps you
to create buttons, animate movement, and interactivity for the Web. It has become
so popular because it allows you to integrate text, sound, and image in relatively
small-sized files.
Purpose of the Module
When this project is finished, you will have your own unique e-mail animation
for use in a web page.
Platform
This module can be done on either side of the CCLI, though some of the instructions
below utilize a two-button mouse not found on the Mac side.
WARNING
Flash is very 'Click sensitive.' Before you click anywhere, make sure you are
clicking the correct side of the mouse in the correct place so that you don't
get confused.
Warning #2
These instructions are written for the PC side of the lab. If you are doing
this on a Mac with a one-button mouse, use the menu bar since you won't be able
to right click. For example, if it says to right-click on a frame and then choose
insert keyframe from the dialog box, you should click on the frame and then
go to Insert on the menu bar, and choose keyframe in that drop-down menu.
The Concept
One way to think of your work in Flash is as the director
of a movie (in fact this is how Macromedia refers to your projects). You place
characters (objects, images, characters, buttons, etc.) on the stage and use
the Timeline to tell the program where you want these objects to be at various
points in your movie. Similar to PhotoShop, you can layer your objects so that
they overlap or cover-up what is underneath them. Flash also allows you to draw
objects and to perform a number of transformations to them (such as opacity,
rotation, motion, and shape/color changes). The basics of Flash are fairly easy
to master, but it also include complex scripting options that allow you to create
all kinds of interactions with your users. Be on the look out for Flash on the
Web so that you can be aware of what is possible.
Steps:
- To open Flash,
go to Start>Programs>Multimedia>Macromedia>Flash 5. On a Mac,
go to the Apple and choose Macromedia Flash 5.
- The application
will open with several sections: a toolbar on the left, a menubar across the
top, the timeline section toward the top, several menu panels along the right
side of the screen and the stage will be a white rectangle.
- Go to Modify>Movie
in the toolbar. A dialogue box will open with several choices in it-the frames-per-second
rate, the size of the screen, the color of the background, etc. All
we are going to change here is the background color. We want it to be sky
blue. Click on the white box, then choose the color for your sky and click
OK.
- On the toolbar,
go to Windows>Common Libraries>Movie Clips and find the biplane.(Movie
clips are essentially movies within movies). Left-Click
on the word and the plane appears in the top box. Left-Click on the picture
and drag it onto the screen.
- There are two
types of active frames in Flash. A Blank Frame means that an object
stays on stage in the position and state that was designated in the prior
keyframe. A Key Frame directs some kind of action to take place. To
make any kind of change, you must insert a Keyframe into the layer of the
object on the Timeline. Go to Layer 1 in the script section of the screen.
Right-click on frame 20. Left-Click on Insert Keyframe. The picture of the
plane will now stay on the screen from the first keyframe to the 20th.
- With Layer 1-Frame
20 still highlighted, drag the plane off the right side of the stage.
- Click and drag
the playhead (pink thing in the script section) back on frame 1 or simply
click the black dot (keyframe) in frame 1, layer 1.
- Left-Click on
the plane and a box will appear around it. Drag the plane to the left of the
screen. That's correct, take it off the stage entirely.
- With the first
keyframe still selected, right-click and a dialog box opens (on a Mac go to
Insert>Create Motion Tween). Left-Click on "Create Motion Tween"
and Flash will automatically close the box. You will see this layer turn blue
with an arrow. This indicates motion in your movie.
- Hit Enter on
the keyboard or go to Control on the menubar and choose play. The plane should
fly across the screen.
- Double Left-click
on the name Layer 1 in the timeline box. Now you can rename the layer. Call
this one plane.
- In the timeline
section, Left-click on the little white box with the + to add a new layer.
- Move the playhead
back to frame 1 in the new layer.
- Left-Click on
the eye above the layer names. This will hide all the layers, putting a red
X on each one. Left-Click on the red X in the new layer and now this is the
only one that can be seen.
- Go to the toolbar
on the left side of the screen and Left-click on the paint brush. Left-Click
on the color box and choose white.
- Make a cloud
on the right side, off the screen. When you have a nice puffy cloud, Left-click
on the cursor tool and the cloud will become shaded when you Left-click on
it.
- Go to Insert>Create
Motion Tween on the menubar. A box should appear around the cloud.
- Left-Click anywhere
in the screen area so that Layer 2 (in the timeline section) goes from black
to blue with a dotted line. The line shows that motion has been put into this
layer, however, Flash doesn't yet have a second position for the object so
it doesn't know where the motion is going.
- Right click
on frame 20 of the new layer and insert keyframe.
- Move the cloud
to the left side of the screen. It now has motion just like the plane.
- Rename Layer
2, calling it cloud.
- Left-Click on
the eye above the layers twice and both layers can now be seen.
- Rewind the movie
and play it. Does the cloud go in front or behind the plane?
- Drag the cloud
layer below the plane layer. Rerun the movie. Now where is the cloud in relation
to the plane? Leave it where you want it.
- To see how this
will appear as a movie, go to Control>Test Movie. It will keep repeating
until you close the movie window by clicking on the X box in the upper right
hand corner.
Moving On
- Add another
layer by Left-clicking on the little white box with the +. Then hide the others
and just open the new layer.
- Get the paint
brush, choose a green color and make some land below the screen. It will need
to be longer than the screen, so make a long shape, then fill it with the
bucket tool.
- Left-Click on
the cursor tool and then make the green area shaded by Left-clicking on it.
- Make it an object
just like you did the cloud. [Insert>Create Motion Tween]
- Insert a keyframe
at frame 20 and make it move just like the cloud. Move it right to left and
up.
- Left-Click on
the eye twice to get all the layers back on the screen.
- Since the land
is rising in the movie, you can change the plane so that it is going down
a little as it flies across.
- Control>Test
movie.
- Is the land
behind the plane? Does the cloud stay the same distance above the land as
the plane comes down? Position the layers so that it looks the way you want
it.
- Rename Layer
3, calling it land.
- As time allows,
add more layers-another plane, more clouds, the sun or moon, smoke coming
from the plane, whatever you want (there are additional images in the common
library too).
- Also experiment
with moving the new layers to the front, back, in between.
- Add a new layer
and insert a keyframe where the plane and the cloud cross.
- Left-click on
the text tool (A) and put the words "Email me!" behind the cloud
and plane so that they remain on the screen when everything else leaves the
screen. You will have to extend the frames in this layer beyond 20.
- Create a new
layer, naming it 'sound.' Find a sound you like in the common library, record
a new one if you want, or find one off the web. You will need to import the
sound by going to File>Import if you choose either the second or third
option.
- Insert a keyframe
where you would like the sound to start on the sound layer. Go to Windows>Library
if your library isn't open yet. Your sound should be listed. Drag it onto
the stage. A sound wave will appear in the layer starting at the keyframe.
Test the movie to see how it looks and sounds.
- Now go to File>Save
As and put the flash movie into your home directory calling it plane.
- Go to File>Publish
Settings. Left-Click to open the choices. You will publish it as Flash (swf),
HTML, and as a Gif.
- Left-Click on
the GIF tab in the box. Left-Click on animated.
- Choose if you
want it to loop continuously, or repeat a specific number of times.
- Go to File>Publish
and the gif, html, and swf files will go into your home directory automatically,
the same directory the Flash file was saved. Run them to be sure they work.
NOTE: the only editable file saved will be a .fla
file. Just like saving a PhotoShop file(.psd) into another format, you lose
your layers and your ability to edit if you don't have a copy of the .fla
file.
- Now save them
in your individual folder in the turn-in folder on the groups drive, in a
folder called Flash.
- So...in your
turnin folder there will be four files : plane.fla, plane.gif, plane.html,
and plane.swf.
Points
Turned in on time..............10
Following the steps............55
Uniqueness.......................10
Instructor's discretion.........10
Basic points......................85
Bonus Points:
Import the animation panels from the GifBuilder or ImageReady project and make
them do something clever...........as in a movie, moving across the screen,
fading in and out. Whatever you choose.
OR
Add a button that will replay the motion. (See the book or pay attention in
class to see how to do this.
Be sure you turn these in on the groups drive in your folder>flash>FlashBonus
folder. Publish them as the same four formats as the regular project..
OR
Create a completely new movie using drawing, pre-made images, and at least one
sound. Be creative to get full points.
Bonus Points.....................15
Total Points....................100
Return
to Schedule