Parts of the screen

Macromedia Flash

learning the basics

Workshop Overview
-

What is Macromedia Flash

Interface Overview
Basic Animation
How to make a button

Parts of the screen

STAGE is where you will build your movie for everyone to see (like a theatre
stage).
TIMELINE shows each frame. The stage will display the current frame that is selected
by the red box. All of your layers will be displayed on the left side.
PANEL WINDOWS (sometimes called just Panels or Windows) are information
areas
for the designer. The Properties Panel will change depending on what is selected
(general stage, text, lines, etc).

Sometimes you will

need to see more of
the stage, which is
why you can collapse
the Panels.

The triangles next to

the title of the panel
will cause you to see
or hide the contents.

You can drag the

panels to different
positions on the
screen by click and
dragging the dots to
the left of the triangles
in the panel title line.

MISCELLANEOUS NOTES:
The fps on the bottom of the timeline is how many frames make up one second.
12 is the default which is a good place to start. The more frames per second, the
larger the file (which means longer loading time). 30 fps is the TV broadcast standard, which is probably overkill for streaming on the web. If you go down to 5 fps
you will see it jitter to each frame.
It is good idea to always start off opening the library since you will need to access
this Window > Library.
You can change the size of your project by clicking on the stage and look under
the Properties tab. Click on the size button to change the size.

THE THREE DIFFERENT OBJECT TYPES

Flash handles three types of objects:
* Graphics
* Buttons
* Movieclips
Graphics objects
You probably allready noticed that when you edit Graphics objects you have the entire
timeline available for it.
This means that Graphics objects arent limited to static elements. You can easily create
looping animations - simply by creating Graphic objects that uses more than one frame
in the timeline.
Button objects
Buttons are different from this. When you create a Button object you only have four
frames in the timeline.
One is for drawing the button in normal state.
Another is for drawing the button when a mouse-over is detected.
The third is for drawing the button as you want it to look when the user clicks the button.
The last frame is used to specify which area you want mouse events to react to. That is:
you can create a button that only reacts to mouseevents on certain areas of the drawing, - like the center of the button for example.
Movie clip objects
The final object-type: Movieclips, is similar to Graphics objects - on the surface.
In both cases you can create entire animations that can be dragged onto your main
movie. But while animations made as Graphics objects simply loops over and over you
can control the Movieclips completely.

THE TRICK BEHIND FANCY FLASH BUTTONS

You can create more fancy buttons based on very simple programming. (You do not have
to be a programmer to learn to do this!).
Actions added to frames give complete access to controlling movieclips. This means that
you can use Play, Stop, and Goto Frame commands on a movieclip, that is triggered when a certain mouse event is detected on a button.
Now - if the button is invisible and placed on top of the movie clip it will work as if the
movieclip itself was able to detect mouse events.
The easiest way to create buttons with Flash is creating a Button object.
First look at this example of a simple Button object:

To create a Button object, do this:

1: Choose Insert->New Symbol in the menu (Or press Ctrl-F8)
and the Symbol Properties Box appears.

Add a name for your button and make sure the Button option is selected.
2: Click OK and the button editor opens.
As you see it looks exactly the same as the standard Flash editor, with one exception:
You only have four frames in the timeline.

3: Draw a button the way you want it to be when no mouse event is detected.
Notice that the active frame is labelled "Up" in the timeline.
4: Insert a keyframe in the frame labelled "Over" in the timeline.
(To do this: Click on Layer 1 in the white cell below where it says "Over". Then press
F6.)
5: Draw a button the way you want it to be when a mouseover event is detected.
6: Insert a keyframe in the frame labelled "Down" in the timeline.
(To do this: Click on Layer 1 in the white cell below where it says "Down". Then press
F6.)
7: Draw a button the way you want it to be when a mouseclick event is detected.
That's it - you've created a button with three looks that will change upon mouse events.
You still need to specify which area should be clickable as well as what should happen
when the button is clicked.
Proceed to learn about these steps.

DEFINING THE CLICKABLE AREA

The last frame, labelled Hit is special. It is simply used to specify the area that triggers
mousevents.
If you leave this frame blank - then mouse events will be triggered when the mouse
moves over the visible button.
But if you draw an area that is bigger than the button - then the mouse event will occur
as soon as the mouse gets even close to the button. On the contrary you can draw an
area that is smaller than the button, so that mouse events are only triggered when the
mouse is at the center of your button.
However, the real power of the Hit frame is a bit more sophisticated.
If you draw something in the hit area that is outside the area covered by the visible button - then the button will react to mouseevents in the Hit area. That means that you can
make something happen on one part of the screen when the user moves the mouse over
another part of the screen.
Look at this example:

ADDING ACTIONS TO THE BUTTON

The button we created so far is still in the Button object editor. We still havent dragged
it onto our main movie.
If you look above the timeline you see two Icons labelled Scene 1 and mybutton.

1: Click the Scene 1-icon to return to the main movie.

2: Click on the button in the Library window and drag it onto the movie.

If your Library is not visible choose Window->Library (or press Ctrl-L) to make it visible.
3: Once the button have been placed correct in your movie right click on it and choose
Properties in the menu that appears.
An Instance menu appears.
4: Select Actions
5: Click the plus Icon and select the OnMouseEvent option.
6: Select Release in the list of event triggers.
The action now says:
On (Release)
End On
This means that we have told Flash that it should
react on a mouse-click release event.
But we still havent told what should happen when
the event is detected.
We have several options available. The most important ones are listed below:

Jump to another Frame

Click the plus once more and select the Go To option.
Now, the action says:
On (Release)
Go to and Stop (1)
End On
Eventually use the options to specify the frame you want to jump.
If you dont want the movie to stop, once the jump has been made, you should select
the Go to and Play option at the bottom.
If, say, you entered frame 20 and selected the Go to and Play option, the action would
be:
On (Release)
Go to and Play (20)
End On
And the Instance menu would look like this:

Load another page

Instead of jumping to another frame you could make the button work as a normal hyperlink.
Click the plus and select the "Get URL" option.
Now the action says:
On (Release)
Get URL ("")
End On
If you enter http://echoecho.com in the URL field the action looks like this:
On (Release)
Get URL ("http://echoecho.com")
End On

CONTROLING WINDOWS TO LOAD URL

You can control which window the URL should be loaded into.
In the Window filed you have four options:
* _self : Opens the URL in the current window. (Same as if you did not specify any
window)
* _blank : Opens the URL i na new window.
* _parent : Opens the URL in the parent frame (only works with framesets).
* _top : Opens the page in the current window - if it's a frameset all frames are cancelled.
This action would open echoecho.com in a new window:
On (Release)
Get URL ("http://echoecho.com", window="_blank")
End On

Basic Animation cont.

Click on the graphic symbol
next to Head Graphic in the
Library. Hold down the mouse
and drag it on to the body
(make sure your Head
layer is highlighted). Place the
head at the top of the neck.

On the Head layer, click

on frame 10 and insert a
keyframe.

Click Arrow Selection tool (V shortuct). Hold down the shift key (so it
travels in a straight line) and drag the head down the neck.
Go to frame 20 on the head layer and insert a keyframe. Shift-drag
the head up.
Keep doing this back and forth every 10 frames all the way to frame
60.

Click on the frame numbers in

the timeline. Notice how the
head jumps. Frames 20-30 the
head is up. Frames 30-40
the head is down.

Basic Animation
Double-click on Layer 1 and name it
Body.

Lets also save our work real quick. I

am going to name mine Working.
With the Line Tool, draw a stick figure
with no head and a long neck.

In the Body Layer line, click on frame

60 and insert a keyframe (Insert
>Timeline > Keyframe or right-click
and choose Insert Keyframe).

Create a new
symbol (Insert
> New
Symbol).
Select Graphic
and name it
Head Graphic.

Using the Oval and Pencil Tools draw a head

with a solid color inside. Click on Scene 1
above the Timeline to return to the stick figure

Insert a new layer (Insert >

Timeline > Layer) and
name it Head.

Basic Animation cont.

On the Head layer right click somewhere

between frame 1 and 10 and select :
Create Classic Tween.

You will now see a long arrow that runs

from frame 1 to frame 10. Use your mouse
and drag the red box over the frame number.
Watch the head move!
Continue doing this between the keyframes
on the Head layer.
Play your bouncing head. Go to the Control
menu and select Play. Or, click on the stage
so that nothing is selected and press the enter key. You could also test the movie (Control >Test). To return to your Timeline click
on the title in the gray area.
Layer placement is very
important. Place your mouse on
the Head layer and drag it under
the Body layer. Now the body is
on top in the timeline and in the
picture!

Creating a Button
Next we will learn how to make a
simple button. Add a new layer and
call it Body2.We now want to delete
the other two layers. Click on
a layer and then click the small garbage can at thebottom of the timeline. Do this again for the second
layer. You should now just have your
Body2 layer.
Create a new symbol (Insert
> New Symbol). This one
will be a Button and name it
Oh No.

The timeline now has 4 conditions

instead of the usual frames that have
been seen so far.
Up is the normal position.
Over is when the mouse is held over
the button.
Down is when the person clicks or
holds the mouse down on top of the
button.
Hit is the area that has to be clicked
on for the Over and Down functions.

In the Up state, draw your stick figure

again this time it can look normal.
Now click on the Over state and add a
keyframe.

With the Line Tool draw some red hair coming out of the
persons head.

Click on the Down state and insert a keyframe. Drag the red hair so that it is away
from the head and insert the words Oh
No! next to your person. When you have
the text box selected you can open the
Properties window and change the size,
color and font in your text box.

Click the Hit state and insert a keyframe.

Remove all of the hair and the words that
you typed. We will want the user to click
anywhere on our stick figure to activate
the various states. The head is big, but the
body is small (the actual lines that are used
for the body). It will be very difficult for
someone to click on the body so use the
Rectangle Tool and surround the entire
body.
Above the Timeline click on Scene 1 to return to the stage.
Go to the Library and drag the oh no
button on to the stage. Test you movie
(Control > Test Movie).
Hold you mouse over the head or body.
Does the hair appear? Click your mouse.
Does the hair stick out and the words appear?