Source: http://www.echoecho.

com/

FLASH BASICS

INTRODUCTION

HTML is ideal for creating static websites where text and images are placed at fixed
positions.

But it doesn't really support dynamic sites, where text, images, and animations are
moving around on the screen.

Traditionally, these effects were achieved with animated GIF images or java applets.

Before we move on to concrete examples of Flash movies, we will compare Flash to

both animated GIFs and java applets.

FLASH vs ANIMATED GIFs

An animated GIF is actually many images saved in one.

When the animated GIF is loaded onto a webpage, the browser simply loops the
images. This means, if you make an animation of a clown that moves his hand up
and down in 25 small movements, then the animated area of the image is saved 25
times. So it doesn't take a lot of animation to create a GIF image that's remarkable
bigger than a regular clown image.

Therefore, even small animations take forever to load.

While animated GIFs can be used for animations, they do not support interactivity.
They simply loop images in a predefined order and that's it.

In Flash, you can control the animations. For example, you can make the animation
stop and wait for the user to click a button. And when the animation starts again it
can be dependant on which button was clicked.

A final obvious difference is that GIF images are limited to a 256 color palette.

So compared to animated GIFs, the advantages of Flash are that:

• Flash movies load much faster.

• Flash movies allow interactivity.

 • Flash movies can use more than 256 colors.

FLASH vs JAVA APPLETS

Aside from animated GIFs, another approach has been used to add dynamic effects
to web pages: java applets.

One of the most famous is the lake applet.

Unfortunately, java (the programming language for applets) requires programming

skills. This means that you can't just start creating your own applets.

Therefore, some programmers have created free applets that allow customization. So
instead of learning the programming, people can simply use the already programmed
applets.

Again, the lake applet is a good example. It makes a wave effect on any image of
any size. But if you wanted to add anything else to the applet you would have to
either program it yourself or find a free applet that actually did what you wanted.

Flash movies are in many ways similar to java applets. Small programs that can be
embedded into your HTML pages. But unlike java applets, it is fairly easy to create
animations in Flash without programming skills.

Applets have often be criticized for "killing" browsers.

Sometimes, java programmers are not as skillfull as one might have wished. Some
applets are programmed so they eventually take up all resources on the computer,
and this results in "freezing" the browser.

So compared to java applets, the advantage of Flash is:

• Flash movies are easier to create than java applets.

• Flash movies are more stable in web browsers than java applets.

Note: While Flash has these advantages over applets, there is more to the story.
There are things that you can program in java that just can't be done with Flash. But
since the focus here is Flash we will not go into the details.
On the next page we will look at a few examples of Flash...

FLASH ON THE WEB

If you're completely new to Flash, you should try clicking some of these links to see
examples of what can be made.

Note: Each link will open in a new window, but since some of the pages take a while
to load you should probably just open one link at a time.

• EYE4U.COM (Full screen animation)

This site has several examples of what can be made with Flash. The intro is
particulary interesting.

• EMPIRE-US.COM (3D effects)

This site is an example of mixing Flash with normal HTML. Also, it is an
extremely good example of how 3D effects can be created with Flash.

• BEATSTREAM.COM (User Interface)

This site has an extremely interesting user interface. Click an option and see
the screen dance!

• ALMOs FLASH 3 TUTORIAL (Speed)

This site loads extremely fast. In a split second you have full screen
animations running in your browser. An example of what can be achieved with
Flash if heavy sound modules are left out.

If you want to see other examples of outstanding pages made with Flash you can
check out the Macromedia Site Of The Day Archive.

If you still want to develop your own Flash movies after seeing these examples (and
we believe you do!), jump to the next page to read about what is needed before you

start.

WHERE TO GET FLASH

In order to create Flash movies you need a to buy the Flash program.

It is developed by Macromedia and the latest version is Flash Mx.

You can click here to compare actual prices from different online stores.

It should be emphasized here, that buying the Flash program is only necessary for
Flash developers.

Anyone that has the free Flash plug-in /Active-X installed with their browser can view
flash movies.

WHERE DO I START?

Once you've installed the Flash program, you should start by completing the 8
lessons that come with it.

• Introduction
• Drawing
• Symbols
• Layers
• Type
• Buttons
• Sound
• Animation

To run these lessons: start Flash then click Help in the top menu and choose
Lessons.

This will teach you the very basics of the Flash program.

Our tutorial takes over where the 8 Lessons ends.

HOW TO LEARN MORE

This tutorial has been designed so it can work both as an ongoing tutorial and as a
reference.

NOTE: Links marked in red are scheduled but not currently available. We simply add
the pages as we write them.

If you're new to Flash you should go through the different sections in the Flash
menu, starting with "Buttons".

• The tutorials on Drawing, Buttons, Tweenings, Transparency, Sounds, 3D

Graphics and Scenes are required if you want to take your Flash design
beyond the average.
 • The tutorials on Preloaders and Tell Target are more complex - so if you have
a hard time with the preceeding techniques you might skip these two.
Otherwise - this is where the real fun starts!

• The tutorials on Precision Design, Optimizing Movies and Large Movies will
help you to create faster loading movies with a more efficient work process.
No matter what level you're on, these chapters are extremely relevant.

• The tutorials on Mouse Events and Actions are necessary if you want to add
sophisticated interactivity to your movies.

• The tutorials on Flash Actionscript Programming and Flash & Javascript are for
sharks! These chapters will let you create Flash movies that are way ahead of
the average. Unfortunately, these chapters are also very complex, so unless
you really want to devote the time needed you should skip them. On the
contrary - if you master all the basics and want to take your movies as far
possible - this is the whip!

• The FLA archive is where you can find samples to get inspired by. All files are
source files (with the file extension FLA). You can load them into your Flash
program and see how they were made.

FLASH DRAWING

INTRODUCTION

The drawing tools in Flash let you create and modify shapes for the artwork in your
movies. For an interactive introduction to drawing in Flash, choose Help > Lessons >
Drawing in your Flash program.

The tools for painting are kept in the "Tools" bar, usually positioned at the left top of
your Flash Screen.
 .

On the following pages we will guide you through the use of each of these tools,
starting with the simplest.

But before going through the different tools, we will look at the way Flash handle
drawings.

The most important thing to understand is the distinction between outlines and fills.

When you draw a line there is no fill - only the outline.

When you draw a rectangle (or a circle) you actually draw two things: The outline
(border) and the fill. Unlike most other programs, Flash doesn't automatically
combine these two into one object.

PENCIL TOOL

The Pencil tool is used in much the same way that you would use a real pencil to
draw. Simply select the tool and drag on the Stage to draw with the Pencil tool.
SHIFT key : Constrain directions

You can press the Shift key while dragging to constrain lines to vertical or horizontal
directions.

Colors

You can specify the color with the Stroke Color Tool.

Color Tools:

Smoothing and Straightening

You can apply smoothing or straightening to the lines by setting a Pencil mode.

Pencil Modes:

Stroke panel : Window > Panels > Stroke

Finally, you can specify line style (solid, dotted etc.), line width in pixels and color
using the Stroke panel.

Stroke Panel:
BRUSH TOOL

The Brush tool draws brushlike strokes, as if you were painting. It lets you create
special effects, including calligraphic effects.

Unlike the Pencil tool, the Brush tool draws both a fill and an outline.

SHIFT key : Constrain directions

You can press the Shift key while dragging to constrain drawing to vertical or
horizontal directions.

Colors

You can specify the color with the Stroke and Fill Color tools.

Color Tools:

Brush Modes

You can specify the Brush Mode in order to define the way the tool works:

• Paint Normal - paints over lines and fills on the same layer.

• Paint Behind - paints in blank areas of the Stage on the same layer, leaving
lines and fills unaffected.

• Paint Selection - applies a new fill to the selection when you select a fill in the
Fill modifier or the Fill panel. (This option is the same as simply selecting a
filled area and applying a new fill.)
 • Paint Fills - paints fills and empty areas, leaving lines unaffected.

• Paint Inside - paints the fill in which you start a brush stroke and never paints
lines. This works much like a smart coloring book that never allows you to
paint outside the lines. If you start painting in an empty area, the fill doesn't
affect any existing filled areas.

Brush Modes:

NONE | NORMAL | BEHIND | SELECTION | FILLS | INSIDE

Brush Size

Also, in the Brush options, there is a drop down that lets you select the size of the
brush. Simply click the size you want.

Brush Shape

Finally, the Brush options lets you select the shape of the brush. Try experimenting
with the different shapes and see what effect each offers.

Lock Fill

The last option listed under Brush options, is the Lock Fill option. The explanation for
this is a bit tricky.

When you use the brush tool in it's default state this option is not turned on. Let's
assume that you selected a gradient fill and painted something using the brush tool.
In this case the brush tool would use the center of your painting as the center for the
gradient fill.

Now, if you paint yet another drawing next to the first one, Flash will use the new
drawing's center as center for the gradient fill.

However, had you pressed the "Lock Fill" option before drawing the second painting,
Flash will maintain the gradient center from the first painting.

The best way to understand this option is trial and error, so if you don't get the
above explanation, then try painting with and without the "Lock Fill" option set. While
doing so, make sure that you use a gradient fill for the drawing or you won't see any
effect at all (because plain colored fills have no center).

LINE TOOL

The Line tool is used in much the same way that you would use a real pencil to draw
with a ruler. Simply select the tool and drag on the Stage to draw a straight line
between the start and end points.

SHIFT key : Constrain angles

You can press the Shift key while dragging to constrain possible angles for the line.
By default this will only allow for lines that are either horizontal, vertical or 45
degrees between.

Colors

You can specify the color with the Stroke Color Tool.

Color Tools:

Curving

You can turn a straight line into a curve with the Arrow tool

1: Make sure the line is not selected (you can do this by clicking somewhere on an
empty spot on the stage).

2: Select the Arrow tool.

3: Click on the line, and while holding down the mouse button, drag the curve.

4: Release the mouse button and your curve is finished.

Curving Lines and Edges:

Moving

You can move a line with the mouse, quite similar to how you'd turn it into a curve or
you can move it with the arrow keys.

1: Select the Arrow tool.

2: Make sure the line is selected (you can do this by clicking once on the line then
release the mouse button).

3a: Click on the line, and while holding down the mouse button, move it to the new
position.

3b: Press the arrow keys on your keyboard to move the line.

Precise size and positioning

You can position the line perfectly by using the info panel.

Info Panel : Window > Panels > Info

The "square" connected to the line where it says "Click this square" is used to set the
origin for coordinates - either at top left or center of the stage.

Fields for X and Y are used to enter the position of the selected object.

Fields for W and H are used to enter the width and height of the selected object.

When working with lines, one might think that height would be 1 for a thin line.
However, width and height refers to the square between the start and end points of
the selected object.
A horizontal line that is 100 pixels wide and 1 pixel high spans a square of 100 x 1
pixels.
A similar line would span a square of 100 x 100 pixels if it was turned 45 degrees.

OVAL TOOL

The Oval tool is used to make circular objects. Simply select the tool and drag on the
Stage to draw a circle that spans between the start and end points.

SHIFT key : Round Circles

You can press the Shift key while dragging to ensure your circle is perfectly round.

Colors

You can specify the colors with the Stroke and Fill Color Tools.

Color Tools:

Ctrl+G : Grouping Outline with Fill

When you draw a circle, Flash actually creates two objects: the fill and the outline.
This may cause problems if you try to move your circle to a new position, because if
you fail to select both objects, only the one selected will be moved. To avoid this it's
often a good idea to "group" the outline with the fill, thus locking them together as if
it was a single object.

1: Make sure both the fill and the outline is selected.

(You can do this in two ways: 1) Select the Arrow tool in the toolbox, and while
holding down the SHIFT key click on both the fill and the outline. 2) Select the Arrow
tool in the toolbox, and drag a rectangle outside your circle)

2: Press Ctrl+G to group the selected objects.

(If at a later point you want to "break" apart the grouped objects, you can do it by
selecting the grouped object then pressing Ctrl+B).
Precise size and positioning

You can position the oval perfectly using the info panel.

Info Panel : Window > Panels > Info

The "square" connected to the line where it says "Click this square" is used to set the
origin for coordinates - either at top left or center of the stage.

Fields for X and Y are used to enter the position of the selected object.

Fields for W and H are used to enter the width and height of the selected object.

RECTANGLE TOOL

The Rectangle tool is used to make rectangular objects. Simply select the tool and
drag on the Stage to draw a rectangle that spans between the start and end points.

SHIFT key : Proportioned Squares

You can press the Shift key while dragging to constrain proportions for the rectangle,
to ensure your rectangle is a perfect square.

Colors

You can specify the colors with the Stroke and Fill Color Tools.

Color Tools:
Rounded Corners

You can specify the rounding of the corners with the "Round Rectangle Options" at
the bottom of the toolbox.

Ctrl+G : Grouping Outline with Fill

When you draw a rectangle, Flash actually creates two objects: the fill and the
outline. This may cause problems if you want to move your rectangle to a new
position, because if you fail to select both objects, only the one selected will be
moved. To avoid this it's often a good idea to "group" the outline with the fill, thus
locking them together as if they were a single object.

1: Make sure both the fill and the outline are selected.
(You can do this in two ways: 1) Select the Arrow tool in the toolbox, and while
holding down the SHIFT key click on both the fill and the outline. 2) Select the Arrow
tool in the toolbox, and drag a rectangle outside your rectangle)

2: Press Ctrl+G to group the selected objects.

(If at a later point you want to "break" apart the grouped objects, you can do it by
selecting the grouped object then pressing Ctrl+B).

Skewing

Before skewing a rectangle make sure it has been grouped. You can skew the
rectangle in two ways.

To skew an object by dragging:

1. Select the object with the Arrow tool.

2. Click the Rotate button in the toolbox options.
3. Drag one of the centered handles.

To skew an object using the Transform panel:

1. Select the object.
2. Choose Window > Panels> Transform.
3. Click Skew.
4. Enter angles for the horizontal and vertical values.

Precise size and positioning

You can position the Rectangle perfectly using the info panel.

Info Panel : Window > Panels > Info

The "square" connected to the line where it says "Click this square" is used to set the
origin for coordinates - either at top left or center of the stage.

Fields for X and Y are used to enter the position of the selected object.

Fields for W and H are used to enter the width and height of the selected object.

ERASER TOOL

The Erase tool works similar to a classic eraser. Simply select the tool and drag on
the Stage to erase things.

Double-click Eraser Tool: Erase All

You can double click the Eraser tool to delete everything on the stage. (If you
happen to do this by mistake you can always click Ctrl+Z to undo).

Using the Eraser Mode Option

In the options listed at the bottom of the toolbox you can specify the Eraser Mode:

• Erase Normal - erases strokes and fills on the same layer.

• Erase Fills - erases only fills; strokes are not affected.

• Erase Lines - erases only strokes; fills are not affected.

• Erase Selected Fills - erases only the currently selected fills and does not
affect strokes, selected or not. (Select the fills you want to erase before using
the Eraser tool in this mode.)

• Erase Inside - erases only the fill on which you begin the eraser stroke. If you
begin erasing from an empty point, nothing will be erased. Strokes are
unaffected by the eraser in this mode.

Using the Faucet Option

To remove stroke segments or filled areas:

1. Select the Eraser tool and then click the Faucet modifier.

2. Click the stroke segment or filled area that you want to delete.

Using the Eraser Shape Option

In the options listed at the bottom of the toolbox there is a drop down that lets you
specify the Eraser shape and size.
Use this option to customize the size and look of the eraser.
Alternative ways to delete things

There are other ways to delete things besides using the Eraser tool.

The most common way is to select one or more objects and then press the DEL key
on the keyboard.

You can delete an entire layer by clicking the layer at the top of your screen and
dragging it to the Trash bin.

You can delete several frames at once by selecting the frames (and layers) in the
timeline, then right click and choose "cut frames".

INK BOTTLE TOOL

The Ink Bottle tool lets you change the stroke color, line width, and style of lines or
shape outlines.

Using the Ink Bottle tool, rather than selecting individual lines and objects, makes it
easier to change the stroke attributes of multiple objects at one time.

To use the Ink Bottle tool:

1. Select the Ink Bottle tool.

2. Choose a stroke color as described in Using the Stroke and Fill controls in the
toolbox.

Color Tools:

3. Choose line style and line width from the Stroke panel.

Stroke Panel : Window > Panels > Stroke

4. Click an object on the Stage to apply the stroke modifications.

Applying outlines to existing objects:

You can use the stroke tool to apply outlines even for things that were initially made
without outlines.
For example, if you initially created a rectangle with no outline, then later decided
you wanted an outline, simply use the Ink Bottle tool as described above and a new
outline will be applied.

PAINT BUCKET TOOL

The Paint Bucket tool fills enclosed areas with color.

It can both fill empty areas and change the color of already painted areas.

You can paint with solid colors, gradient fills, and bitmap fills.

You can also use the Paint Bucket tool to adjust the size, direction, and center of
gradient and bitmap fills.

To use the Paint Bucket tool to fill an area:

1. Select the Paint Bucket tool.

2. Choose a fill color from the color tool box.

Color Tools:
3. Click the Gap Size modifier and choose a gap size option:

• Don't Close Gaps : if you want to close gaps manually before filling the shape.
Closing gaps manually can be faster for complex drawings.

• Choose one of the Close options to have Flash fill a shape that has gaps.

4. Click the shape or enclosed area that you want to fill.

To adjust a gradient or bitmap fill with the Paint Bucket tool:

1. Select the Paint Bucket tool.

2. Click the Transform Fill .

3. Click an area filled with a gradient or bitmap fill.

Depending on the type of object you're painting you will see different handles:

a. Transform Linear Gradient Fills

b. Transform Radial Gradient Fills

c. Transform Bitmap Fills

 .

4. Reshape the fill in any of the following ways:

a. To reposition the center point, drag the center point.

b. To change the width of the fill, drag the square handle on the side of the bounding
box. (This option resizes only the fill, not the object containing the fill.)

c. To change the height of the fill, drag the square handle at the bottom of the
bounding box.

d. To rotate the fill, drag the circular rotation handle at the corner. You can also drag
the lowest handle on the bounding circle of a circular gradient or fill.

e. To scale a linear gradient, drag the square handle at the center of the bounding
box.
f. To change the radius of a circular gradient, drag the middle circular handle on the
bounding circle.

g. To skew or slant a fill within a shape, drag one of the circular handles on the top
or right side of the bounding box.

h. To tile (repeat) a bitmap inside a shape, scale the fill.

Note: To see all of the handles when working with large fills or fills close to the edge
of the Stage, choose View > Work Area.

EYE DROPPER TOOL

You can use the Eye Dropper tool to copy fill and stroke attributes from objects.

To use the Eyedropper tool:

1. Select the Eye Dropper tool and click the object whose attributes you want to
copy. (When you click a stroke, the tool automatically changes to the Ink Bottle tool.
When you click a filled area, the tool automatically changes to the Paint Bucket tool)

2. Click the object that you want to apply the new attributes to.

Using the Eyedropper tool to select a bitmap fill:

Rather than painting with a fixed color or gradient you can paint using a bitmap
image. A very important special use of the eyedropper tool is to select bitmap fills.

1. Place a bitmap image on the stage. Either drag it from your symbol library (Ctrl+L
or Window > Library) or import a bitmap image from a file (Ctrl+R or File > Import).

2. Make sure the imported bitmap is selected. (If not: click on it with the Arrow tool).

3. Press Ctrl+B to break apart the image.

4. Select the Eye Dropper tool and click on the image.

You will now see a miniature of your image in the Color Fill tool box. Use the Paint
Bucket tool to apply the bitmap fill to an object. (Note: you can apply the fill to any
filled object as well as any closed outlined area.)

PEN TOOL

The Pen tool is the only tool in the Flash toolbox that doesn't resemble a tool from
everyday life. Although the tool symbol looks a lot like an ordinary pen it works quite
a bit different.

The purpose of the Pen tool is to allow you to draw precise paths as straight lines or
smooth, flowing curves.

You can create straight or curved line segments and adjust the angle and length of
straight segments and the slope of curved segments afterwards.

There are two methods for drawing with the Pen tool:

1. Click to create points on straight line segments

2. Click and drag to create points on curved line segments.

Each method is described below.

To draw straight lines with the Pen tool:

1. Select the Pen tool.

2. Click on the stage to set points, and watch how Flash automatically connects
points as you set them.

3. To complete the path leaving it as either an open or closed shape. Do one of the
following:

3a. To complete an open path, double click the last point or click the Pen tool in the
toolbox, or Control-click (Windows) or Command-click (Macintosh) anywhere away
from the path.

3b. To close a path, position the Pen tool over the first anchor point. A small circle
appears next to the pen tip when it is positioned correctly. Click to close the path,
and watch how Flash automatic adds a fill once the path becomes a closed outline.

To draw curves with the Pen tool:

First look at this 4 step example:

An example of curve drawing with the pen tool

1. Select the pen tool and click twice to create a straight line - on the second click
keep the mouse button down.

2. Drag the mouse towards yourself - which will cause the control line to appear. The
control line is pulled in the one end and has a drag point in the other end.

3. Move the mouse from side to side (B) and forward and down (A)- still holding
down the button, and see how the drag point moves accordingly.
The drag point defines both how much and in which direction the initial straight line
is dragged.

4. When the curve on the initial straight line is shaped the way you want it release
the mouse button, and the end result appears while the control line disappears.
 FLASH BUTTONS

INTRODUCTION

The only object type in Flash, that can detect mouse events is the Button object.

This means that there is only one way to make buttons with Flash: Creating a button
object.

This may sound a bit too simplified, but many are confused by the techniques behind
the more sophisticated buttons, that we will cover later in this tutorial.

Creating a button that changes upon mouseover-events is extremely simple. All you
really have to do is to tell Flash how you want the button to look 1) in normal state,
2) when the mouse moves over the button and 3) when the user clicks the button.

Once you've learned this 3-step technique you can create buttons in seconds.

However, the buttons you create this way are: simple (that's why they're so easy to
make anyway).

If you want to create really fancy buttons you should use a slightly different
technique based on movie clips.

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 aren't 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 next pages will teach you - step by step - how to create both simple and
advanced buttons.
SIMPLE BUTTONS

The easiest way to create buttons with Flash is creating a Button object.

First look at this example of a simple Button object:

CREATING A BUTTON

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 haven't
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 haven't 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 don't 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

PASSING VARIABLES TO THE URL THAT IS LOADED

The last option, "Variables" allows you to pass variables from the flash movie to
programs running on the server.
If you choose either "Send using GET" or "Send using POST" Flash will open the
specified URL as if it was requested by a form-submission. We will not cover the
subject further here, since it really belongs to the more advanced tutorial on Flash
programming.

When you're familiar with the simple buttons explained on this page you are ready to
proceed to the more advanced buttons that are based on Movie clips.
The following two pages will explain the powerfull techniques behind these buttons.

ADVANCED BUTTONS

First look at this example of an advanced button:

CREATING ANIMATED BUTTONS

A button like the one you see above can be created by simply inserting a movieclip in
the "over"-frame of your button-symbol.

That is:

1: Create a normal movieclip that does whatever you want to happen when a mouse
over is detected on the button.

2: Create a normal button symbol (explained on the previous page).

3: Insert a keyframe in the "over" frame of your button, and place the animated
movieclip in this frame.

This will cause the animation to start when a mouse over is detected and disappear
again whan a mouse out is detected.

The problem with this type of button is that it lacks "intelligence". The animation
disappear in the middle of a sequence as soon as the mouse-out event is detected.

Look at the button below instead:

CREATING TELL TARGET BUTTONS

The simple button described in the above paragraph stopped immediately when a
mouse-out event occured.
The advanced button will finish the loop cycle before stopping the animation.

The trick is this:

1: Draw a button graphic.

2: Create a button symbol using the button graphic.

3: Use the exact same button graphic to create a movieclip.

4: In the movieclip: Create whatever animation you want for the button.

Now you have a button-symbol with the fixed button in it AND a movieclip with the
entire mouse-over-animation in it.

5: Place the button-symbol in your movie.

6: Add this action to the button:

On (Roll Over)
If (dummy=0)
Begin Tell Target ("/animation")
Play
End Tell Target
End If
Set Variable: "dummy" = 1
End On

On (Roll Out)
Set Variable: "dummy" = 0
End On

The action detects a Roll Over and a Roll Out:

When a Roll Over is detected:

- it tells the movieclip to start playing (The movieclip plays the
animation we want when a Mouse Over is detected.). At the same
time it sets a variable named "dummy" to the value of 1.

When a Roll Out is detected:

- the variable named "dummy" is set to the value of 0. Nothing
else happens here - and THAT is the trick in all this.

The movieclip simply continues to play after the Mouse Out is detected - and that is
exactly what we wanted. When the movieclip finishes an animation cycle it will be at
the last frame of the moviecip, and this is where the "dummy" variable comes into
the picture.

In the last frame of the movieclip we have this action:

If (/:dummy=1)
Go to and Play (2)
Else
Go to and Stop (1)
End If

This means that the movieclip is using the "dummy" variable to determine whether it
should continue (Go to and Play (2)) or it should stop (Go to and Stop (1)).

To summarize:

1: We have a Button symbol that we use to detect for Roll Over

and Roll Out.

2: On top of this button we have a Movieclip symbol that actually

plays the animation we want when a Roll Over occurs.

3: When a Roll Over is detected on our Button symbol we tell the

Movieclip Symbol to start playing. At the same time we set a
variable called "dummy" to a value of 1.

4: The movieclip will play the entire loop, and when it reaches the
last frame it will check the current value of the "dummy" variable.
If it is 1 it simply repeats the loop again from frame 2. If it is zero
it goes to frame 1 and stops.

5: When a Roll Out is detected the "dummy" variable is set to

zero which will cause the Movieclip symbol to stop next time it
completes a loop.

Now that the technique behind Tell Target Buttons is in place we just need two tiny
comments to it:

First:
We need to add a Stop action to the first frame of the Movieclip symbol - otherwise
the movieclip will start looping as soon as it is loaded - rather than stop and wait for
a Roll Over event.

Second:
The Movieclip symbol must be given an instance name.
Instance names are entered in the "Properties" dialogue box for your clip.

If you look at the action that we added to the button, you will notice this line:

Begin Tell Target ("/animation")

"animation" is the instance name of our Movieclip.

The reason that Flash requires instance names for movieclips is that the same
Movieclip symbol could easily be used in several places at the same time.

For example you could create a movie clip that animated a ball jumping up and
down. This movieclip could easily be inserted twice so that you had a ball jumping
both at the left and right side of the movie. If you did not add a unique name to each
of these two clips it would be impossible for flash to know which one you wanted to
control when referring to the movieclip.

The technique for Tell Target buttons is fairly complex compared to the technique
behind simple buttons.

Fortunately, it sounds a lot more complex than it actually is - which you will realize
when you get your first Tell target button running.

You can click here to download a FLA source file for the Tell Target Button.

FLASH TWEENINGS

INTRODUCTION

The term "Tweening" is derived from "in between".

Sometimes you want to add an effect that is graduated over several frames.

For example, moving a car from the left side of the movie to the right side.

Instead of moving the car a little bit on each frame, you can simply:

• position the car on the first frame,

• then insert a keyframe where the car should stop

• and finally tell Flash to tween between the two keyframes.

Tweening simply means going from one keyframe to another while taking small steps
for each of the ordinary frames in between.
In this tutorial you can learn to make:

• Motion Guide Tweenings

(Moving objects from A to B along a customized path)

• Tint Tweenings

(Graduated color changing of an object.)

• Shape Tweenings

(Graduated change of one object into another)

MOTION GUIDE TWEEN

First look at this example of a Motion Guide Tweening:

Do the following to make a Motion Guide Tweening.

1.
To insert 30 frames in your movie with the mouse:
Click frame 30 in layer 1 on the timeline - then press F5.

2.
Now you need to find the element you want to tween.
( It can be any element you like ) .

Choose Libraries > Graphics in the menu.

Library - Grapics opens.
Find Bird and with the mouse, drag it into the canvas.
Use the scale tool in the toolbox, to resize the bird as you like.
(If your version of Flash does not contain "bird", then just use any other symbol).

3.
Now enter a keyframe in frame 30. To do this, first click
frame 30 in layer one on the timeline. Then press F6.

4.
Next, double click the keyframe in frame 1.
A frame Properties Box pops up.
Choose "Tweening", and in the Tweening drop-down menu choose "Motion".

Click OK

5.
Right click on Layer 1.
A pop-up menu appears.
Choose Add Motion Guide.

Flash now inserts a new layer on top of layer 1,

with the Motion Guide icon to the left of the layer's name.

This new layer is called a motion guide layer.

Motion guide layers are used to draw lines that you want an animated symbol to
follow.

6.
Click on the Motion Guide Layer to make sure it is the active layer.
(Click on the layer name, where it says "Guide: Layer 1").

Choose pencil in the toolbox. (Or press P on the keyboard)

Make sure pencil mode is set to "Smooth".
With the pencil draw the line you want the bird to fly along.

For example like this:

(Hint: Do not make complex patterns until you're familiar with the technique).

7.
Now adjust the frame pointer so it points to frame 1.

Make sure the Snap button is activated (or choose

View > Snap in the menu, to activate snapping).

8.
With the mouse, place the bird so that its center is at the beginning of your motion
guide.
(The center is indicated by a small + when selected).
A black circle appears when the bird is attached to the motion guide.
It can sometimes be hard to get the symbol to snap to the guide. Eventually it will
though :o)
Try zooming in or out if you just can't get the bird to snap to the guide.
Release the mouse button when the bird is snapped to the guide.

Now adjust the frame pointer so that it points at frame 30. Repeat the process
placing the bird at the end of the motion guide.

Congrats! You have just created .... (drumrolls)...... a Motion Guide Tweening!

The bird will now follow the motion guide when you play the movie.

Press Ctrl+Enter to test your movie.

Orient to path direction.

If say, your motion guide was a circle, you would have the bird fly in a thrilling loop.
However it would look kind of odd, since the bird would only follow the circle, but not
actually point the nose in the direction of the circle.
During the entire loop the bird would have its head pointing to the right :o)
Eventually the bird would fly backwards. Quite a thrill maybe... but .. not too realistic
:o)

If you want the bird to actually follow the circle, not only in movement, but also in
direction,
you should double click the keyframe in frame 1 on layer 1.
This will reopen the frame properties box.
Choose the "tweening" option.

Select the "Orient to path direction" option, and click ok.

TINT TWEEN

First look at this example of a Tint Tweening:

Do the following to create a Tint Tweening.

1. Create a symbol.
Choose Insert > New Symbol in the menu (or press Ctrl+F8).

2.Enter a name for the symbol.

A Symbol Properties box appears.
Enter MySymbol in the "name" field.
Make sure the "graphic" option is selected.
Click OK.

After clicking OK, you are taken to the symbol generator

in Flash.
It looks exactly like the work area you are in when you
create movies.
And it acts exactly the same way.
The only difference is: here you create symbols - not movies.
Symbols can be dragged to the canvas of your movie once you're done creating
them.
3. Enter the text to act as a symbol.
Choose Text Tool in the toolbox.
Now enter your first name using font size 48 and bold.
It is important that the font is not too thin.

4. Jumping back to the movie from the symbol generator.

To exit the symbol generator and return to your movie
click the scene icon in the upper left corner:

5. Inserting the symbol into the movie

Open Library by choosing Window > Library in the menu (or pressing Ctrl + L).
Click where it says "MySymbol" in the symbol window you just opened.
With the mouse, drag your name from the symbol library into the canvas of the
movie.

Now you're ready to create the tint tweening.

6. Inserting frames in your movie.

Select frame 20 in the timeline and click F5.
7. Entering keyframes in frame 10 and frame 20
Position the frame pointer on frame 10 then press F6.
Repeat this step on frame 20.

8. Adding tint effect to frame 10.

Select frame 10 by positioning the frame pointer at this frame.
Right click the symbol with your name on it (On the movie canvas - not in the
symbol library).
An Instance Properties box appears.
Choose: Color Effect.
In the "Color Effect" drop-down box choose "Tint".
Position the "Tint Amount" bar at 100%. (If it is set to zero, no tinting will appear).
Enter these values for Red : 255, Green : 0 and Blue : 0.

Click OK
9. Add tint tweening to keyframe 1 and keyframe 10.
Double click the keyframe in frame 1.
A Frame Properties box appears.
Enter the settings shown below and click OK.
Then repeat this step on the keyframe in frame 10.
That's all! You have created a tint tweening.
You can add tint tweenings to any object you like.
Just remember that the object must be a symbol.
Tint effects only work on symbols, and can't be added to things that are drawn

directly on the canvas of the movie.

SHAPE TWEEN

First look at this example of a Shape Tweening:

Do the following to create a Shape Tweening.

1. First insert 41 frames in your movie.

To do this click frame 41 in Layer 1 on the timeline, then press F5.
2. Enter a "1" on the canvas of your movie.
To do this: choose the Text Tool in the Toolbox.
Then enter "1" with font size 48 and bold.
It is important that the font is not too thin.

3. Now you need to position the "1" at the very center of your movie.
Select it by clicking on it with the mouse.
Choose Modify > Align in the menu (or press Ctrl + K),
an Align Properties box appears.
Choose the settings shown below.
Remember to select the "Align to page" option.

Click OK.

Your "1" is now positioned at the center of the movie.

4. Next step is to "break apart" the font.
Select your "1" with the mouse and press Ctrl + B
(or choose Modify > Break Apart in the menu).

5. Now insert keyframes in frame 19, 40 and 41,

You do this by positioning the frame pointer in frame 19 - then press F6,
then repeating the same procedure for frame 40 and frame 41.

6.Now delete the "1" in frame 19.

To do this: position the frame pointer in frame 19.
Select your "1" and press the delete button on the keyboard.

7.Next step is to enter a "2" in frame 19.

Choose Text Tool in the Toolbox and enter "2" with font size 48 and bold.
(The "2" can be in another color than you used for the "1")

8. Now align the "2" to the center of the movie.

Select the "2" with the mouse and choose Modify > Align in the menu(or press Ctrl +
K),
an Align Properties box appears.
(Remember to select the "Align to page" option).

Click OK.
The "2" is now positioned at the center of the movie.

9. Next step is to "break apart" the font of the "2".

Select it with the mouse and press Ctrl + B (Or choose Modify > Break Apart in the
menu).

10. Now you need to insert a keyframe in frame 21.

This is done by positioning the frame pointer in frame 21 and then pressing F6,
(for illustration, refer to #5 in this tutorial).

11. Now comes the shape tweening.

First double click the keyframe in frame 1.
A Frame Properties Box appears.
Choose "Tweening" and select Shape in the "Tweening" drop-down menu.
Click OK.
Repeat this step to make a Shape Tweening in frame 21.

12. Next step is to add shape hints to your movie.

Shape hints allow you to control the shape tweening.
This means that you select certain points on the element you want to shape tween,
and then select the according points on the element you want the tweening to end
with.
This way you are in charge of which points on the start object should become which
on the end object.

Shape hints contain characters to identify corresponding points on the start and end
objects.

You can add up to 26 different shape hints in a shape tweening.

Position the frame pointer on frame 1.

Choose Modify > Transform > Add shape hint in the menu (or press Ctrl + H).
Do this twice.

Now you have 2 hints in frame 1 and 2 hints in frame 19.

Each hint has a letter showing its current position.

13. Now you'd want to position the hints. Starting with the hints on the "1".
Position the frame pointer on frame 1.
Drag the a hint to the top of your "1".
Drag the b hint to the bottom of the "1".
The Hint must be on the edge of the "1".

14. Next position the hints on the "2".

Position the frame pointer on frame 19.
Move the a hint to the top of the "2".
Move the b hint to the bottom of the "2".

15. Now we will repeat step 12 through 14 to enter shape hints on frame 21 and
frame 40.
First position the frame pointer on frame 21.
Choose Modify > Transform > Add shape hint in the menu (or press Ctrl + H).
Do this twice.

Now you have 2 hints in frame 12 and 2 hints in frame 40.

Each hint has a letter showing its current position.

16. Next repeat step 13 to position shape hints on frame 21

Position the frame pointer on frame 21.
Drag the a hint to the top of your "2".
Drag the b hint to the bottom of the "2".

The hint must be on the edge of the "2".

17. Finally repeat step 14 to position shape hints on frame 40
Position the frame pointer on frame 40.
Move the a hint to the top of the "1".
Move the b hint to the bottom of the "1".

18. All we need now is to get the movie to loop.

You do this by double clicking the keyframe in frame 41.
A Frame Properties Box appears.
Choose "Actions".

Click the button with the plus sign on it.

Choose GoTo.
Select the "Go to and Play" option.
Click OK.
That's all there is to it.
You have now created your Shape Tweening.
Test the movie by pressing Ctrl + Enter.

You can create Shape Tweenings on any element.

You just need to remember to break apart the element before doing so.

FLASH AND JAVASCRIPT

flash and javascript

Below is an example of FLASH communicating with the HTML-page using JavaScript.

• Click the FLASH-buttons to change the HTML-page-background-color.

• Click the HTML-buttons to change the FLASH banner-background.

This is FLASH

This is HTML

THE TECHNIQUE:

NOTE: THE FOLLOWING EXPLANATION ASSUMES THAT YOU ARE FAMILIAR WITH
JAVASCRIPT BASICS.
OTHERWISE YOU SHOULD CHECK OUT OUR JAVASCRIPT TUTORIALS (FOR A WEEK
OR TWO) BEFORE READING ON.

You have probly seen the option "FS-COMMAND" when playing around with actions
in flash. These FS-Commands are used when you want to pass information from
Flash to Javascript.

In this tutorial we will also cover how javascript can force Flash to jump to a specific
frame.

This means that after reading this tutorial you should be able to call any javascript
function from the Flash-movie and on the contrary also be able to let javascript
force Flash to jump to a specific frame.

With a little creativity this can be a very powerful combination!

Note: Do NOT change the name FLASHFILE into something else unles you change
the script from step 1 according to it

STEP 1 - COPY THE SCRIPT TO YOUR HTML-FILE

First you must copy this script and paste it to the <HEAD>-part of the HTML-file.

<script LANGUAGE="JavaScript">
<!-- Hide JavaScript from old browsers
function flashfile_DoFSCommand(command, args)
 FLA ARCHIVE

INTRODUCTION

This is the place to get inspired.

Browse through our FLA archive, when you find something you like, click the link to
download the Flash source file (FLA).

You can open the file in your Flash editor and see how we created the effects.

If you would like to contribute with your own FLA's please let us know..