Class Notes- Macromedia Flash

Introduction

Macromedia Flash is a program that creates interactive, and animated media

such as motion graphics, videos, presentations and websites. You can control an
object’s actions and behaviors using the Behavior panel and the Timeline. For
more advanced control you can use Actionscript, Flash's programming language
that is very similar to Javascript.

When you first load Flash 8, you will encounter a workspace almost identical to
the one you see in the screenshot. The panels you will be working with the most
are Timeline, Tools, Library, Canvas and Properties.

The Timeline Panel is where you will control every object’s animation using
frames and Keyframes. You will learn more about Keyframes in the animation
tutorial. In the Timeline, you are able to layer objects as you would in Adobe
Photoshop. This allows for easier control and modification of your objects.

The Tools Panel is very similar the Tools panel in Adobe Photoshop. Tools
include selection (move), free transform (scale, rotate), line, lasso, magic wand,
shape, fill, gradient, erase, pencil, pen, brush and more.

The Library Panel is where Flash will store all of your imported items, graphics,
motion tweens, audio, video and symbols. Flash also has “Common Libraries”
with useful buttons, Actionscript programming classes and “learning interactions”.

The Canvas is where you will place all of your viewable objects. If an object is on
the stage, you will be able to see it in your movie. It is not recommended that you
 2

place objects outside of the stage because these could sometimes be seen as
well.

The Properties Panel is where you will control and select options. The
properties will change depending on what you are currently selecting. In the
screenshot, the properties displayed include stage size, background color and
frames per second. If you were to create text, all of your font options would be
here.
 3

Discovering the Flash Menus

 4

Setting the Stage

Before you create graphics and animate them — all that fun stuff — you need to make
some decisions about the structure of your entire movie. You should make these
decisions before you start because changing midway can create problems.

The first step is to decide on the size and color of your Stage and other fundamental
settings. Make sure that the Property inspector is open (choose
Window➪Properties➪Properties).

When the Stage is active (just click the Stage), the Property inspector looks like Figure
2-1.

Choosing the Stage color

You can set the color of the Stage to create a colored background for your entire movie.
Like with other settings, you need to consider the context of the Web page that will
contain the Flash movie.

For example, you might want to match the color of your Web page’s background. If your
Flash movie will constitute the entire Web page, set the Stage color to the color you
want for the Web page background.

You can also color the Stage to create a mood for your animation.

To set the Stage color, click the Background color swatch in the Property inspector.
Flash opens the Color palette. Click the color that you want. Specifying the frame rate In
 5

the Frame Rate text box, specify how many frames that a Flash movie plays each
second, and then press Enter (Windows) or Return (Mac).

A faster rate allows for smoother animation but might present a performance problem
on slower computers. The Flash default is 12 fps (frames per second), which is a good
starting point. But changing the frame rate midstream in the creation process changes
the rate of all the animation in your movie, which might not give you the results that you
want.

Setting the Stage size and adding metadata

The Size button displays the current size of the Stage. By default, Flash uses a Stage
size of 550 pixels wide by 400 pixels high. To determine the proper setting, you need to
know how your Flash movie will fit into your Web page or site. The default fits on almost
everyone’s browser screen. You might, however, want to fit your movie into a small
corner of a Web page: for example, placing an animated logo in a top corner of a page.
In that case, make the Stage smaller.

To change the Stage size, click the Size button to open the Document Properties dialog
box, as shown in Figure 2-2. Type the dimensions that you want in the width and height
text boxes.

Flash offers two shortcuts for setting the Stage size in the Document Properties dialog
box: Match Printer: Click this option to set the Stage size according to the paper size set
in the Page Setup dialog box (choose File➪Page Setup).Flash sets the size of the Stage
to the maximum possible area of the paper minus the margins.
 6

Match Contents: Click this option to set the Stage size to the contents of the Stage. Of
course, for this to work, you need some objects on the Stage.

Understanding vectors and bitmaps

Bitmaps are created with lots of dots. Put them all together, and you get a picture.
On-screen, they’re displayed as pixels. As you can imagine, it can take a large file to
store the information about all the dots in a bitmap. Another problem with bitmaps is
that they don’t scale up well. If you try to enlarge a bitmap, it starts to look grainy
because you see all those dots (as in the left example shown in Figure 2-3). Vector
graphics are defined with equations that specify lines, shapes, and locations. Blank
space doesn’t have to be recorded, and the equations are particularly efficient at storing
information. As a result, file sizes are usually smaller than bitmap file sizes. Vector
graphics are infinitely scalable, either up or down.

Toolbars
Flash lets you put all the menu options you use most frequently at your fingertips by
displaying toolbars and panels like those shown in Figure 1-1.

Toolbars pack some of the most commonly used options together in a nice compact
space that you can position anywhere you like. Displaying a toolbar means your options
are right there in front of you, so you don’t have to do a hunt-and-peck through the main
menu every time you want to do something useful.

TIP

When you reposition a floating toolbar, Flash remembers where you put it. If, later
on, you hide the toolbar—or exit Flash and run it again—your toolbars appear
exactly as you left them. If this isn’t what you want, you can wipe away all your
changes and return to the way Flash originally displayed everything by choosing
Window → Workspace layout → Default.
 7

Flash offers three toolbars, all of which you see in Figure 1-5:

Main. The Main toolbar lets you one-click basic operations, such as opening an existing
Flash file, creating a new file, and cutting and pasting sections of your drawing.

Controller. If you’ve ever seen a video or sound recorder, you’ll recognize the Stop,
Rewind, and Play buttons on the Controller toolbar, which allow you to control how you
want Flash to run your finished animation. (Not surprisingly, the Controller options
appear grayed out—meaning you can’t select them—if you haven’t yet constructed an
animation.)

Edit Bar. Using the options here, you can set and adjust the Timeline (Section 1.4.16) as
well as edit scenes (named groups of frames) and symbols (reusable drawings).

Figure 1-5. To conserve space on Flash’s jam-packed interface, only one toolbar—the
Edit Bar toolbar—appears automatically. To display the other two, select Window →
Toolbars → Main (to display the Main toolbar) and Window → Toolbars →
 8

Controller (to display the Controller window). The checkmarks on the menu show
when a toolbar is turned on. Choose the toolbar’s name again to remove the

checkmark and hide the toolbar.

How to Create a Shape Tween in Flash?

Shape Tween

Shape Tweening is one of the animating features of Flash. In shape tweeting, the
shape of an object can be changed to another by using shape tweens which fills
the middle frames by using some kind of algorithm and gives the effect of
changing one figure to another in a pleasant-looking way. It also works fine for
other changes like color, scale, position, etc. Shape tweens work only for editable
shapes, not for graphic symbols so do not use any graphic symbol. A minimum of
two frames is needed for applying shape tweens, one for the first image or shape
and the last frame for keeping the shape to which conversion of the first shape
will happen. Using show tween we can animate more than just object in the
series of frames

How to create shape tweening?

Let’s understand how to shape tweens with an example:

Step 1: Run the flash application.After loading the below window will appear.
 9

Step 2: Click on ActionScript 3.0

 10

Step 3: The following screen will appear.

Step 4: Now using the rectangle tool draw a rectangle on the first frame on the
timeline.
 11

Step 5: Now go to any other frame say 15 and click on F6 to insert a frame and
draw a circle.

Step 6: Now click on any frame in between and right-click, the following list will
appear.

Step 7: Click on Shape tween, the below symbol will be seen on the timeline.

Shape tween is ready. Now Click on the play button on the timeline and see the
animation.
 12

Advantages:

● It saves a lot of time as frame-by-frame animation requires time to draw

each animation.
● The output file has a very small size than those made by traditional
methods.
● Shape tweens are also used in masking to give different effects.
13
14
15
16
17
18
19
 20

How to Create a Motion Tween in Flash?

Motion Tweening

Motion tween is one of the most used features for animations involving graphic
symbols rather than hand drawings. When animating with motion tweens one
has to create the first frame only and then apply motion tween which will give a
motion path for the next frame which can be used to guide the graphic symbols
and make the animation look smoother. Motion tweening is different from classic
and shapes tween as in these tweens one needs to fill two keyframes while
working with motion tween, only one keyframe is enough to get the motion path
after which a second keyframe is created when that path is directed to some
position. This motion path can be used to give direction to the object which is
being moved. It works for symbols not for shapes so convert any shape to a
graphic symbol before applying motion tweeting. Only one motion tween is
applied per layer if applied more motion tweens in a single layer then the results
may be unexpected and animation will be undesirable.

How to create motion tweening?

Let’s understand motion tweening with the help of an example:

Step 1: Run the Flash application. After loading, the below window will appear.
 21

Step 2: Click on ActionScript 3.0.

Step 3: Following screen will appear.

 22

Step 4: Draw a circle on the first frame using circle tool from the toolbar on left

side.

Step 5: Now take the mouse pointer on the first frame and right-click, a list will

appear, click on Create Motion Tween.

Step 6: A dialog box will appear asking for changing the shape to a symbol, click

OK.
 23

Step 7: Now the frames from 1 to 24 are being highlighted as flash is making

animation on 24 frames per second and after applying motion tween it reaches

to 24th frame.

Step 8: Now select the box using selection tool or pressing v on the keyboard and

drag it to any side. It will show a motion path after placing it to any position.
 24

Step 9: Click on the play button below the timeline to see the motion tweening.

One can also manipulate this path to make the animation look smoother.

Different types of animations like bouncing a ball or moving of objects like

moving a train or a bus from one point to another can be easily created by Motion

Tween.
 25

Advantages:

● It provides better controls for tweening objects.

● Only a single object is needed for the entire tween.
● Motion tweening can also be applied to 3D objects.

Motion Guide in Flash

Guide motion is an extremely helpful feature of flash, it allows us to guide any
motion. In simple words it can be understood as a path on which any object will
move, it is better than tweens because in tweens objects move on their own path
but with the guide, the animator can explicitly give the motion path of any shape.
The path will not be visible in the final output hence we don’t need to worry about
hiding that path.

Follow the below steps to learn Motion using Guide Feature.

Step 1: Open a new project in Flash.

Step 2: Draw a circle using an oval shape from the toolbar.

 26

Step 3: Create a new layer using Add new layer button on the timeline and name
it Guide.

Step 4: Draw a line on the stage using the line tool and using the free transform
tool modify it to give the curved shape.

Step 5: Now select frame 15 on the Guide layer and right-click, a list will appear
to choose Insert Frame.
 27

Step 6: Now select frame 15 on Layer 1 and right-click, a list will appear to
choose Insert Key Frame.

Step 7: Now select the first frame and place the circle on the line in such a way
that the pivot point of the circle must touch the line.

Step 8: Now go on the frame 15 and move the position of the ball to the end of
the line.
 28

Step 9: Now select a middle frame and create a classic tween by right-clicking
on the frame and choosing to Create Classic Tween option from the list.

Step 10: Select the Guide layer and right-click on it, a list will appear to click on
the Guide Option.

Step 11: Select Layer 1 and drag it to the guide layer, the symbol on the guide
layer will change.
 29

Step 12: Guide Motion is ready to hit the run button.

Congratulations you have made the guided motion animation. Now press Ctrl +
Enter to see the effect, you will find that in the final output, the path will not be
visible.

Different Types of Tools in Flash

Tools are used to create animations so one needs to understand all the tools
provided in flash. There are a number of tools in flash and we will learn about
each one by one. On opening the Flash, the toolbar can be found on the
left-hand side.
 30

Description and Functions of Tools in Flash

Selection Tool: The selection tool is one of the most used tools, it is used to
select and move anything present on the stage. Its shortcut key is V.
 31

The selection tool can select the complete objects and also the parts of the
object. To select any object just left-click on it once and to deselect it again click
on it.

To select multiple objects at the same time hold the shift key and left-click on the
objects you want to select, they will be selected easily.
 32

Subselection Tool: The subselection tool allows us to edit curves so to make

customized shapes. Its shortcut key is A. If we left-click on any object then
rectangular points will be visible on the vertices of any shape which can be used
to manipulate that object.
 33

Now on the circle, there are different rectangular points that can be manipulated
in different ways to make different shapes.

Free Transform Tool: Free Transform tool allows us to scale, rotate and skew
any object. It is very helpful in changing the size and orientation of objects. Its
shortcut key is Q.

To scale, rotate and skew any object just left-click on that object after taking the
free transform tool and use edges for skew, vertices for scaling and rotating.
 34

3D Rotation Tool: This tool is used to move 2D objects in 3D space. Its shortcut
key is W. To use this tool first of all you need to convert any object into a movie
clip.

To convert an object into a movie clip just left click on the object and select it,
after selecting right click on the object, a list will appear choose convert to a
symbol. Your object is now been converted to a movie symbol.
 35

Now, this can be rotated at any axis in 3D space.

Lasso Tool: This tool is to cut an object into two or more objects. Its shortcut key
is L. It is used when we need customised shapes then we can cut the shapes
into pieces according to the need of our animation. Lasso tool is also used to
remove unnecessary components which are not needed in the final output.
 36

Pen Tool: The pen tool is used to draw lines or precise curves. Its shortcut key is
P. This tool is very helpful in character tracing and making a point to point lines.
Different types of lines can be created easily for animation works, it is mainly
used in making background animations.
 37

The above line is been created using the Pen tool, for this just select the pen tool
and click on any place on the stage, a point will be created now click on some
other place and a line will be created joining these points, you can extend the line
as long as you want.

Text Tool: The text tool is used to write anything on the stage, it is also used in
text animations. Its shortcut key is T. Text can be made attractive by using
different shades and colours from the properties toolbar. It can be used in intro
 38

text videos where text rolls from one side to another. There are a number of
effects that can be applied to text.

To use the tool just select the test tool, and a text box will appear on stage, now
write anything in the text box.

Line Tool: Line tool is used in drawing different types of lines like straight, curved
etc. Its shortcut key is N. Making a stylized character is easy using tracing with
the help of line tool, with line tool different properties can also be applied to make
 39

an animation or drawing more realistic like stroke width, colour etc can be
manipulated to provide smooth touch.

To use the tool just select the line tool, and draw a line, this line can be
manipulated using free transform and other tools.

Shape Tool: The shape tool has a number of shapes that can be used to draw
circles, rectangles, ovals, polygons etc. Each has its own shortcut key like taking
the case of the rectangle it’s shortcut key is R and it can be used to draw
rectangles as well as squares, next is the oval tool which is used to draw oval
and circle, for drawing circle just press the shift key. Rectangle Primitive tool is
used to draw rectangles and squares with round corners, similarly, the Oval
Primitive tool is used in making sectors of the circle. Polystar tool is used in
making polygons of different number of sides.
 40

Different figures can be made using these tools, some examples are given below.

Pencil Tool: Pencil is used to draw freehand lines, it is mostly used in the frame
by frame animations when each and every object is drawn again and again.
Pencil stroke width can be changed using the stroke width option. Its shortcut key
is Y. Pencil tool works best on animation tablets with weight properties in that
case it allows the animator to have complete control on the lines drawn by the
pencil tool. Different features like width, smoothness etc can be easily controlled
using a property panel.
 41

Brush Tool: Brush tool is used to draw freehand strokes, it is like a pencil tool
and is also used in the frame by frame animations. Brush tool stroke consists of
an outer width and an inner line whose properties can be changed as per the
need. Its shortcut key is B. The main difference between the line drawn by the
pencil tool and the brush tool is that the pencil-drawn line does not have an outer
width or stroke but in the case of lines drawn by brush, it has both outer and
inner width which help in achieving different effects.
 42

Deco Tool: Deco tool is used to decorate anything like backgrounds with
different pre-built designs and styles. It is really useful in making attractive
foregrounds and backgrounds. Its shortcut key is U. Deco tool has a number of
designs like leaf, fire, ribbon etc which can be used according to the need of
animation. Properties like width, opacity, contrast etc can be manipulated in these
designs to give desired effects.

Bone Tool: The bone tool is used to join two or more objects in a structural
manner so to make animations. It is like creating human bones and then moving
 43

the pivot points so to give a controlling effect on any part of a character or object.
Its shortcut key is M. It is easy to use as we can select the tool and draw bones
to rig any character. It is mainly used in character rigging and animations are
made by these rigged objects. It helps in saving a lot of time as frame by frame
animation requires time to draw each and every frame.

Paint bucket tool: Paint bucket tool is used to fill any shape with the desired
colour. Its shortcut key is K. It is like a fill tool in paint and can only fill the closed
figures hence if any figure is left open then it will not show any colour. Lines
 44

cannot be filled with paint bucket tools but strokes made by brush tools can be
filled with the paint bucket tools.

Eyedropper tool: The eyedropper tool is used to select the colour of anything
available on the stage, and that same colour can be applied anywhere. Its
shortcut key is I. It is like giving the exact same colour to multiple items because
at times it may be possible that we are unable to get a colour from the colour
pallet in this case we only need to use the eyedropper tool and pick the colour
from any object and then drop at the place where we want to apply that.
 45

Eraser Tool: Eraser tool is used to erase anything on the stage. The size of the
eraser can be changed to small or large. Its shortcut key is E. Eraser tool cannot
be used to erase symbols of any type like graphic symbols or movie symbols. So
delete the symbol you need to convert the symbol to shape and then you can
easily delete them. Faucet option of eraser deletes complete colour from the
object in one go.

Hand Tool: The hand tool used us to navigate the screen by holding the screen
and then dragging it to any place. Its shortcut key is H. It is used in animating
when the camera is recording and we want certain parts of any animation project
so to record from different angles use the hand tool to navigate the screen
because in flash camera is fixed at a certain position.
 46

Zoom Tool: The zoom tool is used to zoom in and zoom out in the animation
work. Its shortcut key is Z. It is used to make fine corrections by zooming into the
artwork and can be zoomed out to check how the animation will look at the
desired zoom level.