F L A S H M X P A R T

1 Table of Content Learning Objectives

1. Introduction 1. To understand the

advantage of Flash
over other
2. Macromedia Flash MX Workspace
animation format.

3. Flash Drawing Tools 2. To familiarize with

Flash drawing and
Drawing with Pencil Tool animation

Drawing with Oval Tool

Drawing with Rectangle Tool

Drawing with Line Tool

4. Flash Painting and Filling Tools

Painting with Brush Tool

Filling with Paint Bucket Tool

Changing stroke properties with Ink Bottle

Tool

5. Erasing object

6. Selecting object

7. Transforming object

8. Segmenting and Grouping

9. Adding text

1. Introduction

Page 1
1. 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.
2. Before we move on to concrete examples of Flash movies, we will compare Flash to both
animated GIFs and java applets.

a. Flash vs. Animated Gif

Advantage
Advantage of
of Flash
Flash
i. An animated GIF is actually many images saved in one.
When the animated GIF is loaded onto a webpage, the 1. Flash movies load much
browser simply loops the images. This means, if you make faster.
an animation of a clown that moves his hand up and down
2. Flash movies allow
in 25 small movements, then the animated area of the
interactivity.
image is saved 25 times.
ii. So it takes a lot of animation to create a GIF image that's 3. Flash movies can use
remarkable bigger than a regular clown image. Therefore, more than 256 colors.
even small animations take forever to load.
iii. While animated GIFs can be used for animations, they do 4. Flash movies are easier
not support interactivity. They simply loop images in a to create than java
predefined order and that's it. In Flash, you can control the applets.
animations. For example, you can make the animation stop
5. Flash movies are more
and wait for the user to click a button. And when the
stable in web browsers
animation starts again it can be dependant on which than java applets.
button was clicked.
iv. A final obvious difference is that GIF images are limited to a
256 color palette.

b. FLASH vs JAVA APPLETS

i. Aside from animated GIFs, another approach has been

used to add dynamic effects to web pages: java applets.
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.
ii. 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.
iii. Applets have often been criticized for "killing" browsers.
Sometimes, java programmers are not as skillful as one
might have wished. Some applets are programmed so they
eventually take up all resources on the computer, resulting
in "freezing" the browser.
3. Viewing Flash Movies

a. In order to view flash movies, you need a flash player or flash plug-in to be installed.
b. The Shockwave Flash plug-in is bundled with the newest Netscape browsers as well as the
Windows 98 operating system. This means that anyone who runs a new Netscape browser,
or is running Windows 98 as their operating system, can view Flash movies.
c. People that do not have the plug-in installed can download it for free from Macromedia's
site (size only some 120 Kb). And if they're using a version 4 browser or newer, the
download and install can be automated
2. Flash MX Workspace

Timeline panel
Toolbox Stage Panel Groups

Page 2
1. The tools in the toolbox let you draw, paint,
select, and modify artwork, as well as
change the view of the Stage. If it doesnt
appear on the screen go to Window > Tools.

2. The toolbox is divided into four sections:

a. The Tools section contains drawing,
painting, and selection tools.
b. The View section contains tools for
zooming and panning in the application
window.
c. The Colors section contains modifiers for
stroke and fills colors.
d. The Options section displays modifiers
for the selected tool, which affect the
tool's painting or editing operations

a. Drawing
Property Inspector

1. i.TheTheStagemost
is important
where youthing to understand
compose the content for individual frames in the movie, drawing
is the distinction between outlines
artwork on it directly or arranging and artwork on it.
imported
fills.
2. The Timeline organizes and controls a movie's content over time in layers and frames.
ii. When you draw a line there is no fill -
3. Theonlytoolsthe outline.
in the toolboxWhen youdraw,
let you draw paint,
a select, and modify artwork, as well as change
rectangle (or a circle)
the view of the Stage. you actually draw
two things: The outline (border) and
4. Thethe fill. Unlike
Property most other
inspector programs,
simplifies document creation by making it easy to access the
most commonly used attributescombine
Flash doesn't automatically of the current selection, either on the Stage or in the
these two into one object.
Timeline.

5. Panels in Flash
b. Drawing help
with you view,
pencil tool.organize, and change elements in a document.

i. 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.
3.ii.Flash drawing
You and
can press thepainting
Shift key tools
while
dragging to constrain lines to vertical or
horizontal directions.
iii. You can specify the color with the Stroke
Color Tool.
iv. You can apply smoothing or
straightening to the lines by setting Page
a 3
Pencil mode modifier.
 Color Tools:

Pencil Modes Modifier:

1. Click the Pencil tool and choose Straighten from the

Pencil Mode modifier. Pencil Drawing Exercise
2. On the stage try to draw a line similar to the one
shown on the right.
3. Next draw a square and a triangle.
4. Now choose Smooth from the Pencil Mode modifier
and draw a wave similar to the one shown on the
right.
5. Try to use other Pencil Mode modifiers.
Page 4

1. When you select the Pencil tool, the Property Inspector

displays its settings. You can select the color, thickness
and the style of the lines you draw with the pencil tool.
Stroke style
height
Stroke color

c. Drawing with Oval tool

i. 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.
ii. You can press the Shift key while dragging to ensure your circle is perfectly round.
iii. You can specify the colors with the Stroke and Fill Color Tools.

d. Drawing with Rectangle Tool

i. 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.
ii. You can press the Shift key while dragging to constrain proportions for the rectangle,
to ensure your rectangle is a perfect square.
iii. You can specify the colors with the Stroke and Fill Color Tools.
iv. You can specify the rounding of the corners with the "Round Rectangle Options" at the
bottom of the toolbox.

Rectangle Drawing Exercise

1. Click the Rectangle tool draw a rectangle similar to

the one shown on the right.

2. Next choose Round Rectangle Option to define 20

point curve and draw a rounded rectangle similar to
the one shown on the right.

e. Drawing lines with

Line tool

i. The Line tool is pretty much the same with the Pencil tool except that it can only draw
straight lines.

Page 5
 ii. Simply select the tool and drag on the Stage to draw a straight line between the start
and end points.
iii. 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.
iv. Obviously, you can only change the stroke color because Line tool only draws outline.

4. Painting and Filling shapes

1. Painting with the Brush tool

a. The Brush tool draws brush-like strokes, as if you were painting. It lets you create special
effects, including calligraphic effects.
b. Unlike the Pencil tool, Brush tool draws both a fill and an outline.
c. You can press the Shift key while dragging to constrain drawing to vertical or horizontal
directions.

2. Brush Modes

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

i. Paint Normal - paints over lines and fills on the same layer.
ii. Paint Behind - paints in blank areas of the Stage on the same layer, leaving lines and
fills unaffected.
iii. 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.)
iv. Paint Fills - paints fills and empty areas, leaving lines unaffected.
v. 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.
3. Brush Modes:

4. Brush Size
NONE | NORMAL | BEHIND | SELECTION | FILLS | INSIDE
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.

5. Brush Shape

Finally, the
6. Filling with the Paint Bucket tool
Brush options
lets you
a. select
The Paint
the Bucket can change the color of existing paint
and also
shape of to
thefill empty areas surrounded by lines.
brush. Try
experimentin
g with the
different Page 6
shapes and
see what
effect each
offers.
b. 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.

7. Gap size modifier Gradient Fill

a. You can use the Paint Bucket tool to fill areas that are not entirely enclosed. You can specify
gap size of the outlines in Gap size modifier when you use the Paint Bucket tool.

i. Don't Close Gaps: if you want to close gaps manually before filling the shape.
Closing gaps manually can be faster for complex drawings.
ii. Choose one of the Close options to have Paint Bucket tool fill a shape that has gaps.

Filling shapes with gradient color Exercise.

1. Draw a circle with the Oval tool.

2. Click the Paint Bucket tool and click the Color Tool and
choose the gradient color shown on the right.

3. Click in the middle of the circle to fill it with gradient color.

8. Using the Fill Transform tool

a. The Fill Transform tool can adjust the size, direction or center of a gradient or bitmap fill.
b. When you select the Fill Transform tool and click on the shape filled with gradient fill, the
center point and the bounding box appears together with the editing handles.
c. Experiment with each handle to change the width, size and the rotation of the fill.

9. Changing stroke properties using Ink Bottle tool

a. The Ink Bottle tool lets you change the stroke color, line width, and style of lines or shape
outlines. Similar to the Paint Bucket function but the Ink Bottle tool is specifically for lines
only.
b. 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.

Changing stroke properties Exercise.

1. Click the Ink Bottle tool.

2. Change the stroke properties using the Property Inspector

such as color, width and styles of the stroke.

3. With the tip of the Ink Bottle pointer click on the edge of
the oval.

5. Erasing

1. The Erase tool works similar to a classic eraser. Simply select the tool and drag on the
Stage to erase things. The Eraser tool erases lines and fills.

Page 7
2. 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).

3. Using the Eraser Mode Option

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

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

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

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

d. 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.)

e. 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.

4. 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.

5. Using the Eraser Shape Option

a. 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.

6. Alternative ways to delete things

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

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

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

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

6. Selecting objects

Page 8
1. To modify an object, you must first select it. Macromedia Flash MX provides a variety of
methods for making selections, including the Arrow tool, the Lasso tool, and keyboard
commands.

2. Flash highlights objects and strokes that have been selected with a dot pattern. Selected
groups are highlighted with bounding boxes in the color used for the outline of the layer
that contains the selected group.

3. When you select an object, the Property inspector displays the object's stroke and fill, its
pixel dimensions, and the x and y coordinates of the object's transformation point.

4. If you select multiple items of different types on the Stage, such as an object, a button, and
a movie clip, the Property inspector indicates a mixed selection. The Property inspector for
a mixed selection displays the pixel dimensions and x and y coordinates of the selected set
of items.

5. You can use the Property inspector for a shape to change the object's stroke and fill..

6. Selecting object using the Arrow tool

Page 9
 a. The Arrow tool lets you select entire objects by clicking an object or dragging to enclose
the object within a rectangular selection marquee.

b. To select a stroke, fill, group, instance, or text block:

Select the Arrow tool and click the object.

c. To select connected lines:

Select the Arrow tool and double-click one of the lines.

d. To select a filled shape and its stroked outline:

Select the Arrow tool and double-click the fill.

e. To select objects within a rectangular area:

Select the Arrow tool and drag a marquee around the object or objects that you want to
select. Instances, groups, and type blocks must be completely enclosed to be selected.

7. Moving objects

a. You can move an object with the mouse to another position.

i. Select the Arrow tool.

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

iii. Click on the line, and while holding down the mouse button, move it to the new
position. Another way is by pressing the arrow keys on your keyboard to move the
object.

8. Reshaping lines and shapes

Curving Lines and Edges:
a. 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.

7. Transforming objects using the Transform tool

1. You can use the Free Transform tool to freely transform objects, groups, instances, or text
blocks. You can perform individual transformations or combine several transformations,
such as moving, rotating, scaling, skewing, and distortion.

2. Moving the pointer over and around the selection changes the pointer to indicate which
transformation function is available.

3. Segmenting and Grouping

Page 10
a. When you place a line or shape of same color overlapped with each other, Flash will
automatically combine them into one shape or line.

b. If you overlap shapes or lines of different colors, Flash will segment them when you move
them away.

c. You can prevent this by grouping lines and shapes.

Grouping objects.

1. First select the object you want to group.

2. Click Modify > Group.

d. You can still modify the content of the group by double-clicking using the Arrow tool on the
object. The rest of the stage dim while you are editing the group. When you finish, double-
click outside the group.

9. Adding text using Text tool

A

1. To create text, you place text blocks on the Stage using the Text tool.
2. When creating static text, you can place text on a single line that expands as you type, or
in a fixed-width block (for horizontal text) or fixed-height block (for vertical text) that
expands and wraps words automatically. You can create a fixed-width text by dragging the
handle on the corner of a text block.
3. You can set the font and paragraph attributes of text using the Property Inspector.
4. When creating new text, Flash uses the current text attributes. To change the font or
paragraph attributes of existing text, you must first select the text.

5. Reshaping text

Page 11
a. Flash offers a unique ability to convert text into shapes letting you reshape characters or fill
character with gradient.
b. However once you have converted text into shape, you no longer can edit them as text.

c. Breaking text apart.

1. Click the Arrow tool and select the text object on the stage.

2. Choose Modify > Break Apart. This will break the text into individual characters.

3. Choose Modify > Break Apart again to convert them into shapes.

4. Now you can do anything that you can do to shape on them.

Page 12