MODULE 5: Introduction to Flash

Chapter 1: Exploring the Macromedia Flash MX

Objectives

• Understand the Flash workspaces including Timeline, Toolbox, Flash

panels and document library.
• Know how to create a new movie and setting it properties

1.0 Introducing the toolbox

The toolbox contain tools that you use to create, color, select and modify objects
as well as change the view of the stage. The toolbox is divided into four sections:

• Tools - this section contains drawing, painting and selection tools

• View - this section contains tools to pan and to change the view of the
Stage
• Colors - this section contains tools to modify an object’s stroke and fill
Colors
• Options - this section displays modifiers for a selected tool. A tool’s
modifiers control how a tool performs.

Figure 1.0 The toolbox

1
 MODULE 5: Introduction to Flash

1.1 Creating a new movie and setting it’s properties

• First, open the Flash MX program. Click Start > Programs >
Macromedia > Macromedia Flash MX 2004
• Then, the Flash MX welcome screen will appear ( Figure 1.1). Click
Create New > Flash Document

Figure 1.1 Welcome screen

• For document settings, go to Properties Panel. Click on Size button

• The document properties dialog box will appears. Specify the dimension
to 640 px (width) x 480 px (height)
• Click the color swatch in the background color field. The cursor becomes
an eye dropper and a color palette appears. Then choose a color.
1.2 Saving Flash documents

You can save a Flash (*FLA) document using its current name and location, or
save the document using a different name or location.

• Save the entire movie by choosing File > save as. Enter the filename as
animation1 and with type file * .fla

2
 MODULE 5: Introduction to Flash

Figure 1.2 Document properties

1.3 About adding media content

You can add media content to a Flash document in the Flash authoring
environment. You can create vector artwork or text directly in Flash; import
vector artwork, bitmaps, video, and sound; and create symbols, reusable
media content such as buttons.
Media content that you add in the authoring environment includes the following:
i) Vector artwork You can create vector artwork with the Flash drawing and
painting tools or import artwork from another application. See subtopic 1.4 for
further information.
ii) Text You can create static text, text whose contents and appearance you
determine when you author the document. You can also create dynamic text
fields, which display text that updates dynamically during runtime, and input
text fields, which allow users to enter text for forms or other purposes
iii) Bitmaps You can import bitmaps from other applications, use a bitmap as a
file, convert the bitmap to vector artwork, and modify it in other ways.
iv) Video You can import video clips from other applications as embedded or
linked files, and select compression and editing options.
v) Sound You can import sound files from other applications and use them as
event sounds or streaming sounds in a document.
vi) Symbols You can use symbols, objects that you create once and reuse
multiple times. Symbols can be movie clips, buttons, or graphics. Each
symbol has its own Timeline.
1.4 How to import your graphics?
• Choose File > Import to Library. Choose the location that you place your
graphics.
• To open the library (in case it doesn’t appear), Press CTRL + L . Then
drag your graphics on the stage.
Don’t forget to resize the graphics if it too small or too big.

3
 MODULE 5: Introduction to Flash

Figure 1.3 The Library ( CTRL +L)

1.5 Creating text

You can create three types of text fields: static, dynamic, and input. All text fields support
Unicode.

a) Static text fields display text that doesn't change characters dynamically.
b) Dynamic text fields display dynamically updating text, such as sports scores, stock
quotes, or weather reports.
c) Input text fields allow users to enter text in forms or surveys.

To create your own text:

• Select the Text tool.

• Select Window > Properties.
• In the Property inspector, select a text type from the pop-up menu to specify the
type of text field:
Dynamic Text creates a field that displays dynamically updating text.
Input Text creates a field in which users can enter text.
Static Text creates a field that cannot update dynamically.

• To apply bold or italic style, click the Bold button or the Italic button.

• To select a fill color for text, click the color box

4
 MODULE 5: Introduction to Flash

Figure 1.4 Text Properties

5
 MODULE 5: Introduction to Flash

Chapter 2: Creating simple animation

Objectives
• Create an animation in Flash
• Utilize the various methods of creating animation in Flash

2.0 Motion tween

frames

Blank keyframe

Figure 2.0 The timeline

In this lesson we will learn how to animate a ball by moving it from left to right.
• First, click on frame 1. After that, draw a circle on the stage.
• Then, insert a new blank keyframe on frame 30. Go to Insert > timeline >
keyframe. After that, use the selection tool to move the circle to your right side.
• The next step is you need to highlight the timeline by clicking Layer 1. Go to
Insert > timeline > create motion tween
• Choose Control > Play from the menu to test the movie. Your car moves across
the Stage.

The ball will move from left to right

Frame 1 Frame 30

Figure 2.1 Motion Tween

6
 MODULE 5: Introduction to Flash

2.1 Shape tween

First, let’s draw a square shape: red by using the drawing tool
• Highlight frame 2 to 30 then insert a keyframe
• In frame 30, delete the square and draw another shape such as: star (yellow)

Figure 2.1 Frame Properties

Now, let’s apply the shape tween

• Select the entire frame in Layer 1
• After that, take a look at the properties panel
• From the tween selector pull-down menu, select Shape
• Lastly, play your animation by pressing enter+ctrl

The shape will change from

a square to a star shape

Frame 1 Frame 30

2.2 Masking

In this lesson, you will be introduced to the special effect of masking.

Masking is a special effect technique that enables you to hide and reveal objects within a
specific shape or mask. A mask is like a window that reveals certain objects as they

7
 MODULE 5: Introduction to Flash

move across the area of the window. We can use masks with motion tweening to reveal
one part of the tween at a time.

• Open a new movie and name it mask3.fla. Change the background color to white
and the size to 640x480.
• Rename Layer 1 to background and insert an image to the Stage .Click
File>Import>import to Stage.
• If the image is smaller than the stage, resize it by choosing Modify > Transform
> Free Transform. Name the layer: Water lily
• After that, create a new layer in the Timeline and name it as Mask. Draw a circle
or another shape in frame 1 (layer mask). Then, create a motion tween on that
layer (hope you still remember how to create the motion tween!!!)
• Then, add frames in Layer: Water Lily (make sure the timeline length as same as
the Mask Layer).
• After completing all the steps above, active Layer Mask. Right mouse click on the
layer and choose Mask.
• Test your movie and save it once again.

Activity In this activity, you will create a movie which needs you to combine
motion tween, shape tween and masking technique. Use your own
creativity and save your movie as act_3.