Flash is not the focus of this book, but it is essential to
know some basics of Flash since it is the environment in which ActionScript is
embedded. Most of us have seen
animations on the web that were created in Flash, the web is full of them. Flash is a great tool for making all
sorts of cool web content. We
first learn enough Flash to make some simple drawings and animation as this
will greatly help our ability to make games.
We assume the reader has used some sort of drawing program .
Learning how to draw is our
first step. This is not exhaustive by any stretch of an overly active
imagination, just some bare minimum steps to get you started to learn how to
draw in flash. The flash drawing
package is similar to many other drawing packages. Do the following:
1 Open Flash.
2 Create a new
file. Notice a tab named "untitled" is created.
3 Save and
name the file "firstFlashFile". Notice that the tab name changes.
Also notice:
o
The stage.
This is the white box in which you draw.
o
The timeline.
This is the top panel named ÒtimelineÓ, we will explain it soon.
o
The tool panel on the left. In here you find the drawing tools.
Now try out a few tools to draw
some simple objects. Move your
mouse over the tools in the panel, they name of the tool pops up when the mouse
is over a tool. Try the following:
o
Make a rectangle.
Click on the rectangle tool inside the tool panel then move your mouse
someplace on the stage, left-click and hold the mouse button while moving the
mouse up and to right, then release the mouse button.
o
Make an ellipse with the circle tool.
o
Do the same two rectangle/ellipse exercises above but
hold the shift key down while creating the rectangle/ellipse and see that you
get a square/circle.
o
Try out the pencil, and paint brush.
o
Try out the eraser
Did you notice the properties
panel at bottom of the flash screen? It changes to give options for the context
you are in. Choose the rectangle
tool again and look at how the properties panel changes. With properties you
can change the rectangle to be filled, unfilled, add colors, and more. Play
around with it.
You may find it is helpful to
make the stage larger. To do this
change the value in the opt right corner of the flash window, just below the
top title bar. I suggest you
change it to 100% or "fit to
window".
Another thing you may find
helpful is to use the grid.
Drawing with the grid allows you to snap points to the grid. To show a grid, select
"View-Grid". You can edit the grid to force snapping, and refine the
grid.
You need to spend some time
drawing and learning about drawing.
The best way to learn is to play around with it! Next, use the Flash help menu, it is
quite good. If you want something
more tutorial in nature, try:
o
http://www.echoecho.com/flashdrawing.htm
o
google Òflash drawing tutorialÓ
o
Check out one of the many books on Flash
One of the most prevalent uses
of Flash, and probably the reason you have hearf of it, is all the cool
animations on the web. The flash player is installed on just about every
computer hooked up to the Internet.
Now it is your turn to start creating some flash animations.
First, check out the following
link: Cool Animation
Exciting, huh? Yes, you too
will soon be able to put such awe-inspiring animations on your personal web
space! Here is how:
1) create
a new file
2) on the
left side draw a circle (filled, empty, red, blue, whatever you desire.)
3) Look
at the timeline. There is a row labeled "Layer 1" with what looks
like a scale to the right. Note there is a black filled circle under the number
1. This is "frame number 1". Flash creates animations by displaying
the contents of frames, frame by frame.
4) Right-click
in the empty box to the right of frame 1. You get many pull-down menu choices.
Choose: "Insert Key-frame". This copies the contents of frame 1 into
frame two. You will notice, by the red highlight box, that you are now in frame
2. Grab the circle and move it a bit to the right.
5) Create
another keyframe in frame 3. Again move the circle in frame 3 a bit to the
right.
6) Repeat
4 more times so you have 7 frames, each time moving the circle a bit to the
right.
7) Now,
hit the "enter" key. This will play the animation. You see the box
moving to the right!
If for some reason you can not
get this to work, just download and save file: f1.fla
Now that you have created this
masterpiece of an animation, you may want to share it with your parents so they
can see that those tuition dollars are being put to good use. Lets publish the
page. Simply hit F12. Now look in the directory that you opened your file. In
addition to the .fla file, you will see an .swf file and an .html file. Open
the .html file in a browser (just double click on windows). The animation plays
in your browser, again, and again, and again....
There are four types of files
associated with flash. Say you have a project name "example", then
the four potential files are:
1)
example.fla
These are the binary files that
flash uses/modifies. You can edit/modify/create this file inside Flash. It is
NOT normally made available to the end user, only to developers. I will make
the .fla files available so you can view the code, and modify to your hearts
content.
2)
example.swf
This is the file that is made
availble to the user. The acronym is ShockWave Flash (swf). When you click on a
flash web site, your browser downloads the .swf file. You can not see the
source code, you can not right-click and save photos. Just about every browser
supports .swf files, so almost everyone can view your animation/game.
3)
example.html
This is an html file that is
what you put on the web for users to access. You need to make sure it is
world-readable (permission xx4) You also put in the same directory the
example.swf file in with readable permissions.
4)
otherName.as
These files are for
ActionScript code. We will talk about these later.
Lets consider how these file
types are created. First
create the example.fla file by the command "File-SaveAs ...." and
type in "example". You now have example.fla, which you can modify,
resave, close, open. Flash will
create the .swf and .html file for you by "publishing" them. To
publish, and create the .swf and .html files, just open example.fla in Flash,
then: File->Publish (or just hit F12). Try this with your killer animation. In windows
explorer make sure the files have been created. Feel free to click on them and
see what happens. Note, when you click on a .swf file the file is opened in the
flash player.
As you have seen, creating
frame-by-frame animations is time consuming and difficulty. Later we will see
how to automate motion animations using ActionScript programming to move
graphical objects, but for now lets see what Flash can do for us to automate
animations. Flash gives you the ability to set a first and last frame, then
have the software fill in the between frames. This is called a
"tween". The
name "tween" comes from the animation community. Artist would draw
key frames and "tweeners", less exhalted artists, would fill in the
frames "between" the key frames. Try it out by doing the following:
á
‚reate a new file
á
Make a small rectangle in the lower left corner
á
Right click on the rectangle and select "convert
to symbol"
á
In the symbol dialogue choose the "movie
clip" radio button
á
Go to frame forty, right click, and insert a
"blank keyframe"
á
Go back to frame one, select the rectangle with the
solid arrow tool, and copy the rectangle (ctrl-C)
á
Go back to frame forty and past the rectangle (it goes
into the center). Move it to the
right side.
á
Now, right click in the frames between 1 and 40 and
select "create motion tween". A solid arrow should now fill in the
frames.
á
Hit "enter" to play the animation. Viola!
Note, you MUST convert the
object you want to tween into a symbol. Flash only tweens symbols. For now just
select symbol type Movie Clip.
If for some reason you can not
get this to work, just download save file f2.fla
What if you want two things
moving in the animation? How can you do that? What if you want them to move at
different times? In order to answer these questions we need to learn another
Flash component: Layers. Think of stacking plastic films (layers) one on top of
another. The objects you draw on the top layer obscure the objects in lower
layers.
Follow these steps to create a
file with two layers.
á
Create a new file with a motion tween, or reuse from
above.
á
Right click on the word "Layer 1". Choose
"Insert New Layer" You now have two layers. The new layer has
multiple frames, as many as the layer it was created from.
á
To get rid of these frames in layer 2, right click on
the frames in layer 2, choose "remove frames"
á
Click below the eye symbol in layer 1, the objects in
layer 1 are no longer visible.
á
Right click in frame 1 of layer 2 and insert a blank
key frame.
á
Lets make a background. In layer 2, frame 1, draw a BIG
rectangle that covers the entire stage and make is a pale color (say pale
green).
á
Now go the the last frame of layer 1 and insert a key
frame in that same frame number of layer 2.
á
Hit enter to test it. The motion tween is gone!
Actually, it is still there, in layer 1, but layer 2 is ON TOP of layer 1 and
hence obscures the contents of layer 1. To fix this reverse the stacking order:
left click on the words "Layer 1" and while holding down on the mouse
button drag the layer up above (i.e. on top of) layer 2.
á
Hit enter to run.
If for some reason you can not
get this to work, just download and save file: f3.fla
Helpful layer hints:
á
You can "lock" a layer by clicking the lock
button. Now, you can not accidentally edit anything in that layer.
á
You can hide a layer by clicking the eye-ball on the
layer.
á
You can rename the layers to what you want by
double-left-clicking on a layer name.
á
You can change the layer stacking order by holding down
on the mouse and moving the layers.
Layers have lots of uses. You
could have one layer for player 1Õs sprites, and one layer for player 2's
sprites. You could have one layer for a background, one for text, one for
stationary objects, and one for moving objects.
NO MATTER WHAT: Good
programming practice is to create a separate layer for ActionScript code and put all your code in that layer
if possible. I'll say this again when we get to ActionScript.
Here is an example of something
to do with layers. Download and save file: f4.fla This is a rip-off of: Original Hammer Site
My .fla file has two layers: one for the non-moving parts
(the object being hit) and the other has a moving hammer. First layer 1 was
created with the stationary objects. Next, layer 2 was created, initially with
just key frame 1. The hammer was drawn in frame 1. The hammer was converted
into a symbol (remember, to do a tween you must tween a symbol object). Then a
blank key frame was created in layer 1 frame 5 and the hammer copied into the
frame. The hammer was then rotated 90 degrees. Then a blank keyframe was added
at 10 and the hammer copied back to the original position. Then Motion tweens
created between frame 1 to 5 and between 5 to 10.