Introduction to Multimedia

Adobe Flash CS6

Lab Manual

2015-16 Semester 1

Table of Contents
A. Introduction p. 1

About Flash

Understanding the Workspace of Flash

B. Getting Started with Flash .... p. 7

Flash Document Setup

Create Animation

Publishing

Basic drawing

C. Play with Text ..... p. 19

Text Tool

Transforming Text

Skew, Break Apart and Color Text

Vertical Text, Rotate Text and Zoom Text

D. Symbols and Interactivity .. p. 26

Graphic symbol

Buttons symbol
ActionScript

Movie clip symbol

E. Special Effects p.43

Shape Tween

Mask

Spotlight

Motion Guides

Motion Tween

Motion Presets

F. Combine Flash Movies. p.55

Add Scenes

Load Movies

G. Play with Graphic.. p.68

Brightness

Tint

Alpha

Remove background

H. Play with Sound .... p.75

Add background music

Add sound effect

I. Video ... p.81

Steps for importing video

J. Deco Drawing Tool (Optional) . p.88

ALL RIGHTS RESERVED.

This lab manual is only for use in the course Introduction to Multimedia in HKU
SPACE Community College.

A. Introduction
About Flash
What is Flash?

Flash is a development tool that allows you to create animation and

interactive experiences.
It is an animation and interactive authoring program.
Authoring program is a tool to develop multimedia product, it is designed
to manage and manipulate individual multimedia elements and provide
user interaction.

Flash can be used for

Web sites
Web-based applications
CD-ROM and interactive applications
Video

Characteristic of Flash

The native format of Flash is vector images, which can reduce the size of
graphic files.
Vectors are scalable
Flash provides streaming content over the Internet
Instead of waiting for the entire contents of a web page to download,
Flash provides streaming delivery method over the Internet, so that
computer begins playing the file as it continues to receive it, keeping
ahead so playback does not pause or break up.
Flash works on a movie metaphor
Metaphor is a figurative representation that links the content of a
screen to an established mental model.

Where can you obtain a Flash program?

You can download a 30 days Free Trial version of Flash from
www.adobe.com. (The latest version is Flash Professional CC.)
Download page:
https://creative.adobe.com/products/download/flash?promoid=KSPEX

p. 1

Understanding the Workspace of Flash

Menu Bar

Stage

Pasteboard

Properties Panel
(Properties inspector)
Tools Panel
Tools Area:
Drawing,
Paint,
editing, &
selection
tools
View Area
Colors Area
Options Area

Playhead

Timeline

p. 2

The followings are the important parts of the workspace: 1) Timeline, 2) Stage, 3)
Panels and 4) Tools Panel.
1). Timeline

The timeline is used to organize and control the movies content by specifying
when each object appears on the stage.

The timeline has separate layers.

Like transparent sheets of content stacked on top of one another. They
allow users draw or place images on different layers without affecting
other items on other layers. There is no limitation to the number of the
layers. A well-categorized system of layers allows users to manage
objects more efficiently.
Adding a layer causes it to be placed on top of the other layers.
Can be re-ordered by dragging up or down. The Front and Behind
position of the object on the stage is related to sequence of the layers.

Show/Hide / Lock/Unlock / Show all Layer

All Layers
All Layers
as Outline
Layer

Insert
layer

Delete Layer

Try to:
1. Insert / rename / delete layers
2. Show/Hide All Layers (
all Layer as Outline ( )

) / Lock/Unlock (

) All Layers / Show

Note: When you choose any of the layers, a pen icon will be displayed on the
layer.

The timeline has a playhead.

The playhead indicates which frame is playing.
You can manually move the playhead by dragging it left or right.
Dragging the playhead also allows you to do a quick check of the movie
without having to play it.

p. 3

Playhead

Frames

Current Frame

The timeline is made up of individual units called frames.

Content is displayed in frames as the playhead moves over them when the
movie plays.
The status bar indicates the current frame the playhead is on.

2). Stage

Contains all objects that are seen by the viewer in the final movie.
You can draw objects on, or import objects to the stage.

3). Panels

Help you view, organize, and change elements or object in a file.

The options available on panels control the characteristics of symbols,
instances, colors, type, frames, and other elements. You can use panels to
customize the Flash interface.
Panels include Properties Panel, Library Panel, Tools Panel, Actions Panel,
Color Panel, Swatches Panel, and etc.

4). Tools Panel

Contains a set of tools used to draw and edit graphics and text.
Divided into four sections: Tools, View, Colors, and Option.

p. 4

Selection

Subselection

Free Transform

3D Rotation

Lasso
Tools Area:
Drawing,
Paint,
editing, &
selection
tools

Pen
Line
Pencil

Rectangle
Brush

Deco
Bone

View Area

Text

Paint Bucket

Eyedropper

Eraser

Hand

Zoom
Stroke Color

Colors Area

Options
Area

Fill Color

Tool Options

p. 5

The followings are the tools and their functions:

Tool Name
Selection

Function
Selects objects on the work area; an object must be selected
before it can be modified.

Subselection

Selects objects or parts of objects by dragging a rectangular

selection marquee.
Modifies specific anchor points in a line or curve.
Free Transform Moves, scales, rotates, skews, or distorts objects.
Lasso
Pen

Selects objects or parts of objects by dragging a free-form

selection marquee.
Draws lines or curves by creating a series of dots (anchor points
technically) that are automatically connected.

Text

Creates and edits text.

Line

Draws straight lines (strokes) of varying lengths, widths and

colors.
Draws rectangles of different sizes and colors. Press and hold
[Shift] to draw a perfect square.
Draws oval shapes. Press and hold [Shift] to draw a perfect
circle.
Draws freehand lines and shapes.

Rectangle
Oval
Pencil
Deco
Brush

Creates drawings and animation based on dynamic shapes and

colors.
Draws / paints with brush-like strokes.

Ink Bottle

Applies color, thickness and styles to lines.

Paint Bucket
Eyedropper

Fills enclosed areas of a drawing with color.

Picks up styles of existing lines, fills, and text and applies them to
other objects.

Eraser

Erases lines and fills.

Hand

Moves the view of the Stage and Work Area.

Zoom

Increases or reduces the view of the Stage and Work Area.

p. 6

B. Getting Started with Flash

Flash Document Setup
Flash documents size and speed setup

Size: default 550 400 pixels

o Full screen: 1024 768 pixels, 800 600 pixels
o Banner:
1000 100 pixels, 800 100 pixels
Speed: default 24 fps (frame per second)

Try to do the setup as follows:

1. Click on 550 400 pixels button in the Properties Panel to change the
document size
2. Enter a value in the FPS edit box to change the speed.
3. Click on the Stages swatch to choose background color.

(Note: If the Properties Panel is not showing the document setting, click on the
stage first, then it will activate the document setup window.)

p. 7

Create Animation

Starting Keyframe

Ending Keyframe

Basic animation requires two keyframes: the starting keyframe and the ending
keyframe. A keyframe is a frame in which you define a change to an objects
properties for an animation or include ActionScript code to control some
aspect of your document.
The number of frames between two keyframes determines the length of the
animation.

In Flash CS6, there are 3 methods for creating an animation sequence in Flash:
classic tweening, shape tweening and motion tweening. In this course, we focus
on classic tweening and shape tweening.

In classic tweening, you define properties such as position, size, and rotation
for an instance (editable copies of symbols that are placed on the stage), group,
or text block at one point in time, and then you change those properties at
another point in time.

In shape tweening, you draw a shape at one point in time, and then you
change that shape or draw another shape at another point in time.

p. 8

Basic steps to create a classic tweening in Flash:

1. Create a starting keyframe with object(s).
2. Select the starting keyframe on the layer of the timeline if it is not selected.
3. Insert on the menu bar > Choose Classic Tween.

4. Click the ending keyframe on the layer of the timeline, and then insert
keyframe (Insert on the menu bar > Choose Timeline > Click Keyframe or
by right-click Insert Keyframe).
5. Modify the content in the ending keyframe.

Basic steps to create a shape tweening in Flash:

1. Create a starting keyframe with object(s).
2. Select the starting keyframe on the layer of the timeline if it is not selected.
3. Insert on the menu bar > Choose Shape Tween.
4. Click the ending keyframe on the layer of the timeline, and then insert
keyframe (Insert on the menu bar > Choose Timeline > Click Keyframe or
right-click Insert Keyframe).
5. Modify the content in the ending keyframe.

p. 9

Tutorial B1
Creating a Flash Movie (Classic Tween)

Steps:
1. Open a new Flash document (with ActionScript 3.0).
2. Click File and Save it as tween-motion.fla.
3. Click Fill Color Tool (

) to choose any color you like.

4. Click and hold the Rectangle Tool (

) > Choose the Oval Tool (

).

5. Use Oval Tool to draw a circle on the left hand side of the stage.
6. Select Frame 1 on Layer 1 of the timeline.
7. Click Insert on menu bar > Choose Classic Tween.

p. 10

8. Click Frame 40 on Layer 1 of the timeline.

9. Click Insert on the menu bar > Choose Timeline > Click Keyframe.
10. Click Selection Tool ( ) from Tools Panel.
11. Use the Selection Tool to drag the circle to the right hand side of the stage, as
shown in the above picture.
12. Click Control on the menu bar > Choose Test Movie > Choose Flash
Professional to play the movie.
13. Save your work.
Playback

Flash movies are viewable through a browser. The browser must have the
Flash Player plug-in. Web users must download (www.adobe.com/downloads/)
and install the player in order to view and interact with Flash content.
Flash movies can be saved as executable files, called projector, which can be
viewed without the need of Flash Player.

Publishing
Output File Formats
Save:

*.fla
Flash documents, which have the .fla filename extension, contain all the
information required to develop, design, and test interactive content. It
can be modified.

Publish:

*.swf
The Shockwave file, in order to view your Flash movies on the Web,
you must change the movie to a Shockwave file (.swf) format.

p. 11

*. html
It is an HTML Wrapper. Flash generates the HTML code that references
to its Shockwave file.
*.exe
It is a stand-alone projector file for Windows. It cannot be modified.
*.app
It is a stand-alone projector file for Mac. It cannot be modified.
For example,

File > Publish to export movies out of Flash

By default, it will export to .swf format, and
Will generate the HTML codes that reference the Shockwave file. e.g.

Code specifying the Shockwave movie that the browser will play

Tutorial B1 (contd)
Publish a movie
Steps:
14. Find and Open the Flash file tween-motion.fla if you have closed it.
15. Click File on the menu bar > Click Publish.
16. Locate and open (by double-click) the tween-motion.html which you have
just published.

p. 12

(Note: tween-motion.fla - the Flash movie file which you can modify
tween-motion.swf - the Flash Player file
tween-motion.html - the HTML document)
Create a projector (executable file)
Steps:
17. Open Flash program tween-motion.fla if you have closed it.
18. Click File on the menu bar > Publish Settings > Click Win Projector check
box > Click OK.

p. 13

19. Click File on the menu bar > Click Publish.

20. Locate and Open (or double-click) the tween-motion.exe which you have
just published.

Exercise B1

Requirements:
1. Open tween-motion.fla.
2. Insert a new layer and rename it to square.
3. Draw a square (any color) on the square layer.
4. Create a classic tween on the square layer and make the square move from
the top to bottom of the stage.
5. Save the movie.

p. 14

Basic Drawing

Selection

Subselection

Free Transform
Lasso
Pen
Line

Rectangle tool

Paint Bucket

Tutorial B2
Steps:
1. Open a new Flash document (with ActionScript 3.0).
2. Click File and Save it as tools.fla.
3. Click View on the menu bar > Grid > Show Grid
4. Use different tools such as Rectangle Tool, Oval Tool, Polystar Tool and
Line Tool to draw the followings:

p. 15

(Tips to draw stars:

)
5. Click Selection Tool (

6. Click Lasso Tool (

) to select objects as the following samples

) to select irregular objects just like the followings,

p. 16

7. Click Free Transform Tool ( ) > Click the Rotate and Skew option in the
Option section of the Tools panel.

8. Insert a new layer > Click Frame 5 and insert a keyframe in this new layer >
Use Pen Tool to draw an arrow like the followings:

p. 17

(Try to use Paint Bucket Tool to fill any color and use Ink Bottle Tool to
change the stroke color and style.)

9. Click Subselection Tool (

) to distort the arrow.
(Hint: click the boundary of the arrow to display the handles, and then distort
the arrow by dragging the handle at the tip of the arrow.)

p. 18

C. Play with Text

Text Tool

Flash acts similar to a word processor.

It provides a lot of flexibility when formatting text. The Properties panel allows
you to change the font, size, style and color of a single character or an entire text
block.
You can use the Properties panel to set margins, indents and line spacing. You
can also align paragraphs such as left, right, center and justified.

Transforming Text

Text is also an object, and can therefore be transformed like other objects in
Flash.
The entire block gets transformed.
Use Break Apart command to transform individual letters.
Break apart is a process of making each area of color in a bitmap image into a
discrete element you can manipulate separately from the rest of the image. Also,
the process of breaking apart text to place each character in a separate text block.

Skewing a text block

Reshaping a letter after the text block

has been broken apart.

p. 19

Skew, Break Apart, and Color Text

Tutorial C1

Steps:
1. Open a new Flash document (with ActionScript 3.0).
2. Click File > Save it as text.fla.
3. Type a word Cat on the stage, you may change the font size (please choose a
bigger size), font type and font color.
4. Skew the text like the above picture by selecting the word Cat and click
Free Transform Tool (

).

5. Type another CAT on the stage, and fill each letter with different colors (Tip:
use the Properties panel)

p. 20

6. Save your work.

7. Change the shape of the letter C into a cat shape like the picture below.
(Tip: Use Selection Tool to select the text > Right-click Break Apart twice,
then you will find that the letters become a dot pattern. It indicates that they
can now be edited > Click the Subselection Tool > Click the edge of the letter
C and reshape the letter to cat shape.)

8. Change the word CAT with gradient color or multiple colors like picture
below.

p. 21

Color Panel
(Tip: Select each letter > Use Fill Color Tool (
or use Color Panel to change color)

) > Choose gradient color

9. Save your work.

Vertical Text, Rotate Text and Zoom Text

Tutorial C2

Before

After

Create Classic Tween for the vertical word Hello so that it can fly from the right
to the left hand side of the stage starting from Frame 1 to Frame 10.
Steps:
1. Open a new Flash document (with ActionScript 3.0).
2. Click File and Save it as TextVnR.fla.
3. Click File > Import to stage / Import to Library > Choose any picture such
as winter.jpg.
4. Use Free Transform Tools to resize picture to make it the same size as the
stage.

p. 22

5. Rename Layer 1 as Background.

6. Insert Frame in Frame 45 of Background layer.
7. Insert another new layer (

) and rename it to V-Hello.

8. Use Text Tool to type a vertical Hello on the right hand side of pasteboard
like the picture below. (Tip: Use the Properties Panel to set the text attributes:
font size = 50, color = yellow, Text Direction button = Vertical.)

9. Right-click in Frame 1 and select Create Classic Tween

10. Insert Keyframe in Frame 10 > Drag the vertical word Hello to the left side
on the stage.
11. Right-click in Frame 10 on Layer V-Hello > Select Remove Tween. This
action will remove the tweening effect from Frame 10 to Frame 45)
Create Classic Tween for the word Hello so that it can fly and rotate from the top
to the center of the stage starting from Frame 1 to Frame 20 of R-Hello layer like the
picture below.

Hello

Steps:

p. 23

12. Insert a new layer and rename it as R-Hello.

13. In Frame 1 of the R-Hello layer, use Text Tool to type Hello on top of the
picture like the following:

14. Right-click in Frame 1 on Layer R-Hello > Select Create Classic Tween.
15. Under the Properties window, select CW in the Rotate dropdown list and
type 2 in the times input box.

16. Insert Keyframe in Frame 20 on Layer R-Hello.

17. Drag the word Hello to the center.
18. Right-click in Frame 20 on Layer R-Hello > Select Remove Tween.
(This will remove the tweening effect from Frame 20 to Frame 45)
19. Save your work and test the movie.

p. 24

Create Classic Tween for the word Welcome which can zoom from large to small
on the stage starting from Frame 21 to Frame 30 of the Welcome layer.

Steps:
20. Insert a new layer and rename it as Welcome.
21. Insert Keyframe in Frame 21 on Layer Welcome.
22. Type a BIG word Welcome (such as size = 95) on the stage.
23. Right-click in Frame 21 on Layer Welcome > Select Create Classic Tween.
24. Insert Keyframe in Frame 30 on Layer Welcome > Click Free Transform
Tool and drag the edge of the word Welcome to make it smaller.

25. Right-click in Frame 30 on Layer Welcome > Select Remove Tween.

(This will remove the tweening effect from Frame 30 to Frame 45)
26. Save your work and test the movie.

p. 25

D. Symbols and Interactivity

What is symbol?

In order to create a smaller file size, Flash allows you to create symbol (including
graphic, button and movie clip) that can be re-used without adding file size.
Symbols reside in the Library.
Dragging a symbol from the Library to the stage creates an instance. Flash calls
the original a symbol and the copies instances.

Three types of symbols:

1) Graphic
Graphic symbols are effective for re-usable single images.
Can be static images or animated images.
Can be changed in each instance of the image.
Are tied to the main Timeline of the movie.
2) Button
Flash can create interactive buttons that respond to mouse clicks, rollovers,
or other actions.
Each button has its own four-frame Timeline. When you select the button
behavior for a symbol, Flash creates a Timeline with four frames. The first
three frames display the button's three possible states; the fourth frame
defines the active area of the button. The Timeline doesn't actually play; it
simply reacts to pointer movement and actions by jumping to the
appropriate frame.

There are 4 states of buttons, they are:

p. 26

Up: A visual state representing how the button appears when the
mouse pointer is not over it.
Over: A visual state representing how the button appears when the
mouse pointer is over it.
Down: A visual state representing how the button appears after the
user clicks the mouse.
Hit: A special, non-visual state that determines the area of the screen
which the mouse sees as the interactive or hot area.

ActionScript
After you have created the button, you may need to add different actions to
this button. Actions can be implemented by ActionScript. ActionScript
is the scripting language of Adobe Flash. It allows you to create a
movie that behaves exactly as you want. It has its own rules of syntax,
reserves keywords, provides operators, and allows you to use variables to
store and retrieve information.
To add ActionScript, you can:
Click Windows on menu bar > Choose Actions to display Actions panel.

Action categories

Script pane

Code Snippets

Script Assist

3) Movie Clip

A movie within a movie.

Retains independent timeline when you insert an instance of symbol into a
movie.
Keeps going even if the main timeline stops.

p. 27

Advantages to create a movie clip symbol

Maintain its own independent timeline.
Require only one layer and one frame in the main movie.
Sound and associated ActionScript statement can be added.
Can be used to animate a button.

p. 28

Tutorial D1
Create Graphic Symbol
1. Open a new Flash document (with ActionScript 3.0).
2. Click File and Save it as ball.fla.
3. Draw a ball on the stage as shown in the picture:

4. Select the ball on the stage.

5. Click Modify on menu bar > Click Convert to Symbol (or right-click to
choose Convert to Symbol).
6. Type ball in the name box and select Graphic.

7. Open the Library Panel (if necessary) and find the ball graphic symbol in
the library. (To open the library panel, click Window > Choose Library).
8. Drag the ball symbol from the library to the stage so that your stage can
have another copy of the ball. The original is called symbol and the copy is
called instance.

p. 29

9. Double-click a ball symbol (any one ball) to enter symbol-editing mode.

The symbol indicates that you are in the edit symbol mode
10. Change the color of the ball from red to green (select the red part of the ball,
and change the fill color of the ball from the Properties panel)

11. Click Scene 1 to exit the editing mode.

You will find that the ball color of the instance on the stage reflects the color
changes you made to the symbol.
Break Apart an Instance
12. Use the Selection tool to select a ball (any ball you like) on the stage.
13. Click Modify on the menu bar > Click Break Apart. Now, the object is no
longer linked to the symbol in the library.
p. 30

14. Click a blank area of the stage to deselect the object.

15. Change the color of the ball from green to blue.
16. Check and compare the ball on the stage and the ball symbol in the library.
(The color of the ball of the original symbol remains unchanged, but the one
which you applied the Break Apart command is different from the original
symbol in the library. It is because you used the Break Apart command to
break the link of the instance to its symbol so it wont follow the original.)
Create Movie Clip Symbol
17. Select the blue ball.
18. Click Modify on the menu bar > Convert to Symbol (or right-click to choose
Convert to Symbol).
19. Type the name ball movie, then select Movie Clip and click OK.

20. Enter symbol-editing mode to edit the ball movie (you can double-click
ball movie icon in the library to enter the editing mode or double-click the
blue ball on the stage.)

21. Add Classic Tween to make the ball turning (Hit: use Free Transform tool.)

p. 31

22. Click Scene 1 to exit the editing mode and return to normal mode.
23. Save your work and test the movie.

Tutorial D2
Create Buttons
1. Open a Flash document namely TextVnR.fla.
2. Lock all layers in order to protect them from being modified unintentionally.
3. Insert a new layer > Rename the layer as buttons.
4. Draw two red (any red) buttons like the following picture. One button is for
play and another is for stop.

p. 32

5. Select the Play button on the stage > Modify on the menu bar > Convert to
Symbol > Name the button as Playbutton > Choose the type Button > Click
OK to confirm and exit.

6. Click Edit on the menu bar > Choose Edit Symbols. After entering into
editing mode, you will see the button timeline like the following:

7. Select Frame Over > Right-click to Insert Keyframe. Repeat the same steps for
Frame Down and Frame Hit.

p. 33

Change the color of different button states:

Up: No change
Over: Yellow

Down: Green

Hit: Draw a rectangle

Select Frame Hit and draw a rectangle (any color, same size or a little bit bigger
than the original graphic) to cover it.
8. Click Scene 1 to quit the edit mode.
9. Click Control in menu bar > Click Test Movie to play the movie.

p. 34

10. Select the Stop button on the stage > Click Modify on the menu bar > Convert to
Symbol > Name button as Stopbutton > Choose the type Button > Click OK to
confirm and exit.

11. Click Edit on the menu bar > Choose Edit Symbols. After entering into
editing mode, you will see the button timeline like the following:

12. Select Frame Over > Right-click to Insert Keyframe. Repeat the same steps
for Frame Down, and Frame Hit.
Change the color of different button states:
13. Select Frame Over and change color to yellow.
14. Select Frame Down and change color to green.
15. Click Scene 1 to exit the editing mode.
16. Click Control on the menu bar > Click Test Movie.
17. Save your work.

Add ActionScript to a frame - Stop Actions

18. In the same file TextVnR.fla, select Frame 1 on the buttons layer.
19. Click Window on menu bar > Choose Actions in order to open the Actions
Panel.

p. 35

20. Click the Code Snippets button.

21. On the Code Snippets Panel, expand Timeline Navigation.

p. 36

22. Double-click Stop at this Frame. Then, the corresponding ActionScript

will appear in the Script pane.

23. Save and test the movie.

p. 37

The movie stops playing, because we assigned a stop action to the first frame
of the timeline, so the playhead stops playing. (Note: The piece of
ActionScript has been added to Frame 1 of the automatically-created Actions
layer.)

Add ActionScript to buttons Play and Stop buttons

24. Single click to select Playbutton on the stage. On the Properties Panel, type
btn_play as the instance name.

25. Open the Actions Panel. Select Playbutton, and then click Code Snippets.
26. On the Code Snippets Panel, expand Time Navigation, and then double-click
Click to Go to Frame and Play.

p. 38

27. Modify the ActionScript from gotoAndPlay(5); to gotoAndPlay(1);

p. 39

28. Save and test the movie.

Note:
When Playbutton has been clicked and released, the playhead will move to Frame 1
and the movie will start playing.

29. Single-click to select Stopbutton. On the Properties Panel, type btn_stop as

the instance name.

30. Open the Actions Panel. Select Stopbutton, and then click Code Snippets.
31. On the Code Snippets Panel, expand Time Navigation, and then double-click
Click to Go to Frame and Stop.

p. 40

32. Modify the ActionScript from gotoAndStop(5); to gotoAndStop(1);

p. 41

33. Save all the work and test the movie.

Note:
When Stopbutton has been clicked and released, the playhead will move to Frame 1
and the movie will stop there.

p. 42

E. Special Effects
Shape Tween
In classic tweening, we cannot change the shape of an object. But we can use a shape
tween to change a shape into another one over time.

Layer
Layers are located on the Timeline. They are used to organize and control the movies
content by specifying when each object appears on the stage.

Layer types:
1. Normal
It is the default layer type. All objects on these layers appear in the movie.
2. Mask
A layer that contains mask item(s) through which underlying masked
layer(s) are visible.
3. Masked
A layer that contains the objects that are hidden and revealed by a mask
layer.
4. Folder
A folder helps to organize layers.
5. Guide
Guide layers are used to create a path for animated objects to follow.

p. 43

Shape Tween
Tutorial E1 - circle becomes square, number 1 becomes 2

before

after

Steps:
1. Open a new Flash document.
2. Click File > Save it as ShapeTween.fla.
3. Rename Layer 1 to shape.
4. Use Oval Tool (
stage.

) to draw a circle (any color) on the lower left corner of the

5. Click Frame 1 on shape layer > Right-click to choose Create Shape

Tween.
6. Click Frame 20 on the shape layer > Right-click to choose Insert
Keyframe.
7. Delete the circle and draw a square on the upper right corner of the stage.
8. Test the movie and save your work.
9. Insert a new layer and rename it as number.
10. Click Frame 1 on the number layer.
11. Use Text tool to type a number 1 in the middle of the stage.
12. Click Frame 20 on the number layer > Right-click to choose Insert
Keyframe.
13. Delete the number 1 and type a number 2.
14. Select the number 2 > Right-click to choose Break Apart.
15. Select the number 1 > Right-click to choose Break Apart. (So that both 1 and
2 are broken apart.)
16. Click Frame 1 on number layer > Right-click to choose Create Shape
Tween.
17. Test the movie and save your work.

p. 44

Mask
Tutorial E2

Steps:
1. Open a new Flash document (with ActionScript 3.0).
2. File > Save it as Mask.fla.
3. Double-click Layer 1 on the Timeline panel and rename it to Photo, and
then click File > Import to stage (import any picture).
4. Insert a new layer and rename it to Text, and then type your name on the
stage.
5. Create mask: Right-click Layer Text on the Timeline > Choose Mask.
6. Test and Save the movie.

p. 45

Mask Spotlight
Tutorial E3

1. Open a new Flash document (with ActionScript 3.0).

2. File > Save it as Spotlight.fla.
3. Rename Layer 1 to Text, and then type Catch me if you can! on the stage.
4. Set background color to black and the text to yellow.
5. Insert Frame in Frame 40 on Text layer.
6. Insert a new layer and rename it to Mask.
7. Click Oval tool on the toolbox to draw an oval (position at the beginning of
the sentence) on the stage.

8. Right-click Frame 1 on Mask layer > Choose Create Classic Tween >
Click Frame 40 on the same layer > Drag the oval to the end of the sentence.
9. Select the Mask layer > Right-click to choose Mask.
10. Test and save the movie.

p. 46

Motion Guides
Tutorial E4

1. Open a new Flash document (with ActionScript 3.0).

2. Save file as Motion.fla.
3. Rename Layer 1 as Bean.
4. Right-click Layer Bean to choose Add Classic Motion Guide. (After that you
will find that there are 2 layers).
5. Click Pencil tool
> Click Pencil Mode (the lower part of the Tools
panel) > Click Smooth option.

6. Click Frame 1 on the Guide layer > Draw a big S on the stage.
7. On the Guide layer, click Frame 40 > Right-click to choose Insert Frame.
8. On Layer Bean, click Frame 1 > Click Window in menu bar > Choose
Common Libraries > Choose Buttons > Locate and choose classic buttons >
Choose Ovals > Choose Ovals buttons - green.

p. 47

9. Drag the bean (green oval button) to the stage and over the beginning of the
path (big S) like the picture below. (Beans registration point must intersect
with the path).

10. On Layer Bean, click Frame 1 > Right-click to choose Create Classic
Tween > Click Frame 40 on the same layer > Right-click and Insert
Keyframe > Drag the bean to the end of the path (make sure that the
registration point intersects with the path).
11. Test and save the movie.

p. 48

Motion Tween
Tutorial E5

1. Open a new Flash document (with ActionScript 3.0).

2. Save file as MT.fla.
3. Rename Layer 1 as face.
4. Import the file face.png to Frame 1 of the face layer.
5. Right-click Frame 1 of the face layer, and choose Create Motion Tween.

p. 49

6. Convert the image into a symbol by clicking Ok in the Convert selection

to symbol for tween dialog.

7. Right-click Frame 10, choose Insert Keyframe, and then Position.

p. 50

8. Move the image to another position of the stage (e.g. the top right corner).
9. Right-click Frame 20, choose Insert Keyframe, and then Scale.

10. Move the image to another position of the stage (e.g. the bottom right corner).
11. Use the Free Transform Tool to scale down the image.
12. Right-click Frame 30, choose Insert Keyframe, and then Rotation.

p. 51

13. Move the image to another position of the stage (e.g. the top left corner).
14. Use the Free Transform Tool to rotate the image.
15. Right-click Frame 40, choose Insert Keyframe, and then Rotation.
16. Move the image to another position of the stage (e.g. the bottom left corner).
17. Use the 3D Rotation Tool to rotate the image.

18. Test and save the movie.

p. 52

Motion Presets
Tutorial E6

1. Open a new Flash document (with ActionScript 3.0).

2. Save file as MP.fla.
3. Rename Layer 1 as ball.
4. Import the file ball.png to Frame 1 of the ball layer.
5. Move the image to the top left corner of the stage.
6. Use the Free Transform Tool to scale down the image.
7. Select the image.
8. On the menu, choose Window, and then Motion Presets.

p. 53

9. On the Moton Presets Panel, choose Default Presets, and then bounce-out3D.

10. Convert the image into a movie clip by clicking Ok on the Convert
selection to symbol for tween dialog.

11. Test and save the movie.

p. 54

F. Combine Flash Movies

Scenes
Scenes provide a way to break up a long or complex document into smaller and more
manageable sections.

Each scene has its own Timeline.

Open the Scene Panel: Window > Other Panels > Scene

To add a Scene, choose Insert on the menu bar > Scene, or use the Scene Panel.

Scene Panel allows you to manage and name your scenes

Rename a scene
Duplicate a scene
Add a scene
Delete a scene
Reorder scenes

New scenes can be created with new content.

Existing content can be split into multiple scenes by copying and pasting
frames from one scenes timeline to another.

By default, Flash plays scenes in order.

Buttons can cause a movie to jump from one scene to another.

p. 55

Scenes
Tutorial F1 - Click a button jumps to a scene

1. Open a Flash document Scenes.fla.

2. Create a classic tween for the title Main Menu (above and outside the stage)
so that it can fly from the top to the upper middle of the stage like the picture
below.

(Before)

(After)

3. Click Window on the menu bar > Select Other Panels > Click Scene to open
the Scene panel.

4. Double-click Scene 1 to rename it to Menu.

p. 56

5. Click the Add scene icon

> Double-click Scene 2 to rename it to Ch1.

6. Click Menu in the Scene panel and notice that the timeline has changed to the
Menu scene.

7. Click Ch1 in the Scene panel and notice that the timeline has changed to the
Ch1 scene, which is blank.
8. Type a heading Chapter One in scene Ch1.

9. Save and test movie.

There is no content or stop ActionScript in the Ch1 scene, so the movie just
jumps from one scene to another.

p. 57

Add interactivity to scenes

10. Make sure that the Menu scene is displayed.

11. Double-click Layer 1, and rename it to Title.
12. Insert a new layer and rename it to Chapter 1.
13. Create a button and name it as Chapter 1 in Frame 30 on Layer Chapter 1.
14. Select Frame 30 on Chapter 1 layer, right-click to choose Actions > Assign
a stop statement to Frame 30. (The statement will then be added on the
Actions layer.)

p. 58

Add ActionScript on Chapter 1 button

15. Select the Chapter 1 button in the Menu scene. On the Properties Panel, type
btn_toCh1 as the instance name.

16. Right-click Frame 30 on Chapter 1 layer to open the Actions Panel.

17. Select the Chapter 1 button > Click Code Snippets > Expand Timeline
Navigation on the Code Snippets Panel > Double-click Click to Go to Frame
and Play.

p. 59

18. Change the ActionScript statement from

gotoAndPlay(5); to
gotoAndPlay(1, Ch1);

19. Save and test the movie.

p. 60

Create a back button in Chapter One and add actions to this button
20. Click the Scene list (

) > Click Ch1 to go to Scene Ch1.

21. Right-click Frame 1 on Layer 1 to choose Actions > Assign a stop function
to Frame 1. (The stop statement will then be added to the Actions layer.)

p. 61

22. Insert a new layer and rename it to Menu.

23. On Layer Menu, create a button called Home. (You may use any button in
the Common Libraries.)
24. Select the Home button. On the Properties Panel, type btn_toMenu as the
instance name.

25. Select the Home button. Right-click Frame 1 on Actions layer to open the
Actions Panel.
26. Select Code Snippets. On the Code Snippets Panel, expand Timeline
Navigation, and then double-click Click to Go to Frame and Play.

p. 62

27. Change the ActionScript statement from

gotoAndPlay(5); to
gotoAndPlay(1, Menu);

28. Save and test movie.

p. 63

Load Movies
Load Movie action can be used to load a movie. You can split a single movie into a
number of different movies and use ActionScript to load movies as needed. You must
know the name and location of the movie file you want to load.

Tutorial F2 - Use a button to a load movie

1. Open a Flash document called loadmovie.fla.

2. Select Chans Project 1 button. On the Properties Panel, type btn_proj1 as
the instance name.

3. Open the Actions Panel.

4. Select the Chans Project 1 button, and then click Code Snippets. On the
Code Snippets Panel, expand Load and Unload, and then double-click Click
to Load/Unload SWF or Image.

p. 64

5. Specify the target movie file by replacing the filename placeholder with
Scenes.swf.

p. 65

p. 66

6. To remove the original movie from the screen before loading the target movie,
the following piece of ActionScript needs to be inserted.

7. Save and test the movie.

p. 67

G. Play with Graphics

Understanding the Format
1. Vector graphics
Vector graphics describe images using lines and curves, called vectors, which also
include color and position properties. Vector graphics are usually based on
mathematical formulas.
For example, the image of a leaf is described by points through which lines pass,
creating the shape of the leaf's outline. The color of the leaf is determined by the
color of the outline and the color of the area enclosed by the outline.

Flash is a vector-based application. All images and motion within the application
are calculated according to mathematical formulas. This vector-based format
results in smaller file size.

2. Bitmap graphics
Bitmap graphics describe images using colored dots, called pixels. Bitmap image
is based on pixels, not on a mathematical formula.
For example, the image of a leaf is described by the specific location and color
value of each pixel in the grid, creating an image in much the same manner as a
mosaic.

p. 68

Working with Graphics

In Flash, graphic objects are items on the Stage. Flash lets you move, copy, delete,
transform, stack, align, and group graphic objects. You can also link a graphic
object to a URL. Keep in mind that modifying lines and shapes can alter other
lines and shapes on the same layer. Basically, there are two ways to work with
graphics. You can draw (graphics create by you) or import images / photos.

Drawing
You draw graphics by using tools in Flash.

Image / Photo
Import images or photo into your Flash.
Changing the properties

You can change the brightness, tint, and alpha of the graphics; redefine how
the graphic behaves.
For example, changing the color and transparency of a graphic

p. 69

Brightness, Tint and Alpha

Tutorial G1
Change photo brightness

Steps:
1. Open a new Flash document (with ActionScript 3.0).
2. Save file as Photos.fla.
3. Rename Layer 1 to Photo1.
4. File > Import any photo and resize if necessary.
5. In Frame 1, Create Classic Tween > In Frame 10, Insert Keyframe.
6. Click Frame 1 > Select the photo > In the Properties Panel, choose Brightness
in the Style dropdownlist and set the Bright parameter to 100%.
7. Insert Keyframe in Frame 20 > Insert Keyframe in Frame 30.
8. In Frame 30, select the photo > In the Properties Panel, choose Brightness in
the Style dropdownlist and set the Bright parameter to 100%.
9. Save and test the movie.

p. 70

Change photo colors - tint

Green

Red

Blue

Steps:
1. Use the same file.
2. Insert a new Layer and rename to Photo2.
3. In Frame 30 on Layer Photo2, Insert Keyframe > File > Import any photo
and resize if necessary.
4. Right-click the photo > Choose Convert to Symbol > Choose Graphic > OK.
5. Insert Frame in Frame 60 on the same layer.
6. Insert Keyframe in Frame 40 and Frame 50 of the same Layer.
7. Click Frame 30 on Layer Photo2 > Select the photo.
8. In the Properties Panel, choose Tint in the Style dropdownlist. Set the color
to green and the percentage to 50%.

p. 71

9. Click Frame 40 on Layer Photo2 > Select the photo.

10. In the Properties Panel, choose Tint in the Style dropdownlist. Set the color
to red and the percentage to 50%.
11. Click Frame 50 on Layer Photo2 > Select the photo.
12. In the Properties Panel, choose Tint in the Style dropdownlist. Set the color
to blue and the percentage to 50%.
13. Save and test the movie.

Change photo transparency - Alpha

1. Use the same file.

2. Add Layer 3 and rename to Photo3.
3. In Frame 65 on Layer Photo3, Insert Keyframe > File > Import any photo
and resize if necessary.
4. In Frame 65, Create Classic Tween.
5. In Frame 75, Insert Keyframe.
6. In Frame 85, Insert Keyframe.
7. In Frame 95, Insert Keyframe.
8. Click Frame 65 > Select the photo > In the Properties Panel, choose Alpha in
the Style dropdownlist and set the percentage to 10%.

p. 72

9. Click Frame 95, select the photo > In the Properties Panel, choose Alpha in
the Style dropdownlist and set the percentage to 10%.
10. Remove Tween from Frame 75 to Frame 84.
11. Save and test the movie.

p. 73

Remove Background
Tutorial G2

1. Open a new Flash document (with ActionScript 3.0).

2. Save file as RemoveBg.fla.
3. Rename Layer 1 to Background.
4. File > Import any photo and paste it to the stage.
5. Select the imported photo > Right-click to Break Apart the photo.
6. Click Lasso button (

) > Click Magic Wand (

) in Option.

7. Pick any point in a particular region using the Magic Wand > Right-click to
select cut or Press the Delete button on the keyboard to remove that region.
8. Save your work after you have finished.

p. 74

H. Play with Sound

Importing sounds
You can place sound files into Flash by importing them into the Library for the
current document. The followings are the sound file formats that can be imported
to Flash:
Sound Type
.asnd (native sound format of
Adobe Soundbooth)
.mp3 (MPEG-1 Audio level 3)
.wav (Waveform Audio File)

Windows

Mac

, requires QuickTime 4 or
later

.aiff (Audio Interchange File)

, requires QuickTime 4 or

later

.snd (System 7 sounds)

, requires QuickTime 4 or
later

.sd2 (Sound Designer II)

, requires QuickTime 4 or
later

.au (SunAU)
.mov (Sound only QuickTime
movies)

, requires QuickTime 4 or

, requires QuickTime 4 or

later

later

, requires QuickTime 4 or

, requires QuickTime 4 or

later

later

To import a sound to a Flash document:

1. Choose File > Import to Library.
2. In the Import dialog box, locate and open the desired sound file.
To add a sound to a movie:
1. Import the sound into the Library if it has not already been imported.
2. Choose Insert > Layer to create a layer for the sound. (When placing a sound
on the Timeline, it is recommended that you place it on a separate layer.)
3. With the new sound layer selected, drag the sound from the Library panel onto
the Stage. Then, the sound is added to the current layer.
Note: You can place multiple sounds on one layer, or on layers containing other
objects. However, it is recommended that each sound be placed on a
separate layer. Each layer acts like a separate sound channel. The sounds
on all layers are combined when you play back the movie.

p. 75

Sound
Tutorial H1
Add background music

Steps:
1. Open a new Flash document (with ActionScript 3.0).
2. Save file as Sound.fla.
3. Rename Layer 1 to Bg.
4. File > Import a photo to the Library.
5. Drag the photo to the stage.
6. File > Import a music file to the Library.
7. Insert a new layer > Rename Layer 2 to music.
8. Click Frame 1 on Layer music.
9. Go to the Library panel > Click to select the desired sound file > Drag it to
the stage.
10. Save and test the movie.
11. Insert Frame in Frame 40 for both Layer photo and Layer music (to ensure
that the whole movie lasts for 40 frames).
12. You may repeat the background music several times or loop the background
music.

p. 76

13. To avoid the background music from overlapping, Event should be changed
to Start in Sync.

p. 77

Tutorial H2
Use buttons to Play and Stop sound

Steps:
1.

Open a new Flash document (with ActionScript 3.0).

2.

Save file as controlsound.fla.

3.

Create a play button and stop button.

4.

Double-click the play button to enter editing mode.

5.

Insert a new layer in play button > Rename the layer to play sound.

6.

Insert Keyframe at Down frame on that layer.

7.

Import any sound file to the library.

8.

Drag the sound file from library to the stage. (make sure you have selected
down frame)

9.

Save and test movie.

10. Use Selection tool to select the Stop button. On the Properties Panel, type
btn_stop as the instance name.

p. 78

11. Open the Actions Panel.

12. On the Actions Panel, click Code Snippets. On the Code Snippets Panel,
expand Audio and Video, and double-click Click to Stop All Sounds.

p. 79

13. Save and test movie.

p. 80

I. Video
To import video into Flash you must use video encoded in the FLV or H.264 format.
The Video Import Wizard (File > Import > Import Video) checks video files that you
select for import, and alerts you if the video might not be in a format that Flash can
play. In the event that the video is not in either the FLV or F4V format, you can use
Adobe Media Encoder to encode the video in the appropriate format.
Adobe Media Encoder
Adobe Media Encoder is a stand-alone encoding application employed by programs
such as Adobe Premiere Pro, Adobe Soundbooth, and Flash for output to certain
media formats. Depending on the program, the Adobe Media Encoder provides a
specialized Export Settings dialog box that accommodates the numerous settings
associated with certain export formats, such as Adobe Flash Video and H.264. For
each format, the Export Settings dialog box includes a number of presets that are
tailored for particular delivery media. You can also save custom presets, which you
can share with others or reload as needed.

Import video file

Tutorial I1
1. Open a new Flash program.
2. Save file as video.fla.
3. Click File on menu bar > Choose Import > Choose Import Video.

p. 81

4. Browse to select any video file.

In case the video is not in a format that Flash can play, Adobe Media
Encoder should be used to encode the video in the appropriate format. Adobe
Media Encoder can be started by clicking the Launch Adobe Media Encoder
button.

p. 82

p. 83

Next, the new video file should be selected by clicking the Browse button
again.

Then, you may follow the steps in the Video Import Wizard.

p. 84

The Skinning panel allows you to choose the playback controls used to play
the video. Then, it will start importing the video.

p. 85

5. Save and test movie.

6. Close Flash and check the folder which you have just saved your video.fla.
After you closed the Flash program, you will find that a F4V file has been
created and placed in the same folder as the Flash file you just saved. It also
places a copy of whatever skin you have chosen SWF file in that folder beside
the video.fla and video.swf files.

p. 86

p. 87

J. Deco Drawing Tool (Optional)

(* This unit is out of the examination scope. Deco Drawing Tool is not available in
Adobe Flash CC.)
Deco drawing tool allows us to create drawings and animation based on dynamic
shapes and colors. It is one of the smart tools that can save time and effort by creating
drawing objects and animation using ready symbols and objects, or loading custom
symbols from the library.

Tutorial J1
1. Open a new Flash program.
2. Save file as deco.fla.
3. Select the Deco tool
and select the Building Brush on the Drawing
Effect list on the Properties Panel.

4. Draw two buildings on the Building layer.

p. 88

5. Select the Deco tool

and select the Tree Brush on the Drawing Effect list
on the Properties Panel.

6. Draw one tree on the Tree layer.

p. 89

7. Select the Deco tool

and select the Fire Animation on the Drawing
Effect list on the Properties Panel.

p. 90

8. Create fire on the Fire layer.

9. Change the Stage color to black.

10. Create a Lightning layer.
11. Select the Deco tool
and select the Lightning Brush on the Drawing Effect
list on the Properties Panel.

p. 91

12. In Frame 20 of the Lightning layer, create one lightning effect. To create a
lightning effect, point the mouse cursor at the top of the stage, hold the mouse
until the lightning reaches the desired complexity, then release the mouse. Add
a blank keyframe after that.

13. Create another lightning effect in Frame 35.

14. Save and test the movie.

p. 92