1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity...

63
1 Flash Basics Flash Basics by Dr SC Li by Dr SC Li

Transcript of 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity...

Page 1: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

1

Flash BasicsFlash Basicsby Dr SC Liby Dr SC Li

Page 2: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

2

Ordinary Movie vs. Flash MovieOrdinary Movie vs. Flash Movie

Animation Vector Graphics Interactivity

MPEG Movie Flash Movie

Page 3: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

3

Metaphor of Flash MovieMetaphor of Flash Movie

Stage Timeline (Sequencing)

Symbols (actors)

Flash Movie

Actionscripts

Frames

LayersInstance objects

Defining frame action and interaction between objects or between object and user

Graphics, Movie Clip, buttons, Components

Page 4: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

4

Flash Working EnvironmentFlash Working Environment

Stage

Library:

Store symbols

Tool Box: Create shapes and colours

Timeline

Page 5: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

5

The StageThe Stage

StageStage

1. Showing movie scenes

2. Show symbols

3. Edit graphics

Page 6: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

6

Setting the StageSetting the StageUse the Movie Properties dialog box

to specify settings that affect the entire movie, such as

the frames per second (fps), playback rate, the stage size, and background color, etc.

The StageThe Stage

Page 7: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

7

The StageThe Stage

Modify the default movie propertiesModify the default movie properties Place the cursor on the Stage Right-click and choose “Property”

On the pop-up “Property” panel, choose “Size” as shown above.

Page 8: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

8

The StageThe Stage

In the Movie Properties dialog box, verify that 12 is the number in the Frame Rate text box. The movie will play at 12 frames per second, an optimal frame rate for playing animations on the Web.

Page 9: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

9

Screen Size IE Netscape

640X480 620X318 620X302

800X600 780X438 780X422

1024X768 1004X606 1004X590

1280X1024 1260X862 1260X846

The StageThe Stage

Page 10: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

10

The TimelineThe Timeline

Motion guide

Layer folder

Page 11: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

11

Animations are assembled or created with the Timeline.

The Timeline consists of Layers. Each Layer contains of a number of

frames, the amount of which is determined by the movie you create.

Picture each Layer as a strip of transparent film (like the acetate placed on overhead projectors).

The TimelineThe Timeline

Page 12: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

12

You animate individual Instances on each strip of film.

Multiple Layers are created, with each Layer containing only one Instance.

Because each Layer is effectively transparent, the content of each Layer, when viewed on the Stage create a composite image.

The TimelineThe Timeline

Page 13: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

13

let you create and modify shapes for the artwork in your movies.

contains a collection of tools for creating, selecting, and manipulating content in the Timeline and on the Stage.

is divided into four parts: Tools, View, Colors, and Options.

The ToolboxThe Toolbox

Page 14: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

14

The ToolboxThe Toolbox

Fill Transform ToolFree Transform Tool

Page 15: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

15

Symbols and InstancesSymbols and Instances A symbolsymbol is a graphic, button, or movie clip

that you create once and then can reuse throughout your movie or in other movies. Any symbol you create automatically becomes part of the library.

Page 16: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

16

Symbols and InstancesSymbols and Instances An instanceinstance is a copy of a symbol located

on the Stage or nested inside another symbol. An instance can be very different from its symbol in color, size, and function. Editing the symbol updates all of its instances. But editing an instance of a symbol updates only that instance.

Page 17: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

17

Symbols and InstancesSymbols and Instances

Using symbols in your movies dramatically reduces file size

saving several instances of a symbol requires less storage space than saving a complete description of the element for each occurrence

Using symbols can also speed movie playback, because a symbol needs to be downloaded to a browser only once

Page 18: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

18

Creating InstancesCreating InstancesAfter creating an instance of a symbol,

use the Instance panel:Windows > Panels > InstanceWindows > Panels > Instance to specify color effects, assign actions, set

the graphic display mode, or change the behavior of the instance. The behavior of the instance is the same as the symbol behavior, unless you specify otherwise.

Any changes you make affect only the instance and not the symbol.

Page 19: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

19

Creating InstancesCreating Instances

Page 20: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

20

AnimationsAnimations

There are three methods for creating an animation sequence in Flash: tweened animation frame-by-frame animation and Motion guide

Page 21: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

21

AnimationsAnimations

In frame-by-frame animation: you create the image in every frame.

In tweened animation: you create starting and ending (key) frames

and let Flash create the frames in between. Flash varies the object's size, rotation, color, or other attributes evenly between the starting and ending frames to create the appearance of movement.

Page 22: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

22

Tweening and KeyframesTweening and Keyframes

Key FramesKey Frames

Key frame

Copies of the previous key frames

Page 23: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

23

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 24: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

24

Open Flash MX working environment: Start > Start > Program > Macromedia > Flash MXProgram > Macromedia > Flash MX

Open the file “flashmx-basic1-template.fla” Close all the ‘unnecessary’ windows except for

that of the Toolbox, Stage and the Library. To re-open the Toolbox: click Window > ToolsWindow > Tools To re-open the Library: click Window > Library Window > Library

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 25: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

25

Modify the default movie propertiesModify the default movie properties Place the cursor on the Stage Right-click and choose “Property”

On the pop-up “Property” panel, choose “Size” as shown above.

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 26: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

26

In the Movie Properties dialog box, verify that 12 is the number in the Frame Rate text box. The movie will play at 12 frames per second, an optimal frame rate for playing animations on the Web.

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 27: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

27

Creating a text symbol Choose Insert > New Insert > New

SymbolSymbol Name the symbol as “intro- “intro-

text” text” and choose the behaviour as “GraphicGraphic”

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 28: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

28

Click on “A”“A” on the toolbox panel

On the Stage, drag a rectangle of appropriate for typing in the required text

You can change the font type, font size and font style by clicking text > fonttext > font, text > sizetext > size and text > styletext > style respectively.

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 29: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

29

When you finish the text editing, you should click the “black arrow” on the toolbox panel.

The text symbol that you have just create will store in the library. To view it, click Window Window > Library> Library.

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 30: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

30

Creating instances Switch the stage back to Scene 1 by clicking

“Scene 1”“Scene 1” Then drag the intro-text symbol onto the stage. To insert more frames, click Insert > Timeline>

Frame Then drag the rectangle to Frame 80.

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 31: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

31

You can change the properties of each instance by highlighting the instance and then choose Modify > Transform > Free Transform to change the corresponding properties.

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 32: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

32

You can change the instance’s texture by right-click it and choose “property”

Select Color: “Alpha” Select Color: “Alpha” and change the alpha value from 100% to 0% 100% to 0%

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 33: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

33

Tweening between two key frames Select the small rectanglerectangle at Frame 80 and insert at Frame 80 and insert

a key frame there by clicking a key frame there by clicking Insert > Timeline Insert > Timeline KeyframeKeyframe

To create tweening motion, select the frame with To create tweening motion, select the frame with a “rectangle” sign, click a “rectangle” sign, click Insert > Timeline > Insert > Timeline > Create Motion TweenCreate Motion Tween

Highlight the end KeyFrame and drag the text to your desired position.

By varying the positions (properties) of the instance at the two key frames, Flash will then simulate the motion in between them.

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 34: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

34

You can preview the flash movie by clicking File > Preview > HTMLFile > Preview > HTML

You can save the flash movie by clicking File > Save AsFile > Save As and save the file as flashmx-basics1-template.flaflashmx-basics1-template.fla

You may publish you .fla file as a flash movie (.swf) and an executable file (.exe) by selecting the appropriate Publish Setting.

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 35: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

35

To change the publish setting, click File > File > Publish SettingsPublish Settings

To publish, click File > PublishFile > Publish

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 36: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

36

In general, Flash generates 3 types of In general, Flash generates 3 types of files:files:

???.fla ???.fla Flash’s working file Flash’s working file ???.swf ???.swf Flash movie file ( usually Flash movie file ( usually

linked with an HTML file); can be viewed linked with an HTML file); can be viewed by Flash supported browsersby Flash supported browsers

???.exe ???.exe Flash standalone executable Flash standalone executable filefile

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 37: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

37

EExploration: xploration:

(Tweening with other properties) To create an animated text by tweening not only

the position of the instance but other properties such as alpha value, size, rotate, transform, etc

Save the file as flashmx-basics1-template.fla Preview the flash movie by choosing File > File >

Publish PreviewPublish Preview

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 38: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

38

EExploration:xploration:

(Animated by multiple key frames) To create an animated text with a curved

trajectory. Save the file as flashmx-basics1-template.fla Preview the flash movie by choosing File > File >

Publish PreviewPublish Preview

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 39: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

39

Adding background sound effectAdding background sound effect Insert a new layer by clicking Insert > Timeline Insert > Timeline

> layer> layer Name this layer as “Name this layer as “intro-musicintro-music”” From the Library, drag the audio clip “Sound-

technoloop” onto the stage Save the file as flashmx-basics1-template.fla Preview the flash movie by choosing File > File >

Publish PreviewPublish Preview

Exercise 1 (Creating animated text)Exercise 1 (Creating animated text)

Page 40: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

40

Open the file flashmx-basics2-template.fla Insert a new layer and name it as “flowerflower” Insert a blank key frame for this layer at

Frame 97 by clicking Insert > Timeline > Insert > Timeline > Blank FrameBlank Frame

Select all the images: flowerFr00 to flowerFr16 from the flower folder of the Library by pressing “shiftshift” while clicking the images.

Exercise 2 (Fm-by-Fm animation)Exercise 2 (Fm-by-Fm animation)

Page 41: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

41

Select Frame 97Frame 97 of the flower layer, drag all the images onto the stage. Select the images and resize them by clicking Modify > Transform > Free Transform if necessary

On “Frame 96”“Frame 96”, Click Insert > Blank Frame Copy “Frame 97”Frame 97” and paste it onto “Frame “Frame

96”96” Select and delete the “topmost” image. Repeat the above THREETHREE steps for Frame 95

and so on till you reach Frame 81.

Exercise 2 (Fm-by-Fm animation)Exercise 2 (Fm-by-Fm animation)

Page 42: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

42

You can preview the flash movie by clicking File > Publish Preview >FlashFile > Publish Preview >Flash

Save the flash movie by clicking File > File > Save AsSave As and save the file as flashmx-flashmx-basics2-template.flabasics2-template.fla

You may publish you .fla file as a flash movie (.swf) and an executable file (.exe)

Exercise 2 (Fm-by-Fm animation)Exercise 2 (Fm-by-Fm animation)

Page 43: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

43

A Buzzing Honey Bee: A Buzzing Honey Bee: Open the file flashmx-basics3-template.fla Insert a new layer and name it as “bee”“bee” Insert a key frame for this layer at Frame 97 Extend the timeline for the “bee“bee” layer to

Frame 109 Insert a key frame for this layer at Frame 109 Create tweening motion for the “bee”

instance between Frame 97 to Frame 109

Exercise 3 (Using Motion Guide)Exercise 3 (Using Motion Guide)

Page 44: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

44

A Buzzing Honey Bee: A Buzzing Honey Bee: To create a motion guide for the “bee”

instance, select the “bee” layer and click Insert > Timeline> Motion GuideInsert > Timeline> Motion Guide

A motion Guide layer will automatically be created as shown below:

Exercise 3 (Using Motion Guide)Exercise 3 (Using Motion Guide)

Page 45: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

45

A Buzzing Honey Bee: A Buzzing Honey Bee: On Frame 97, insert a Keyframe on the timeline Open the “Tool Palette” and select the pencil tool Select the motion guide layer and use the pencil tool

to draw the path you wish the “bee” to follow At Frame 97, drag the “bee” to the starting point of

the path drawn Similarly, at Similarly, at Frame 109, drag the “bee” to the end

point of the path

Exercise 3 (Using Motion Guide)Exercise 3 (Using Motion Guide)

Page 46: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

46

A Buzzing Honey Bee:A Buzzing Honey Bee: To create some sound effect, create a new layer

form the sound track Select the layer and right click to change the layer

back to the “Normal” mode Drag the “buzzing” sound clip from the “honey bee”

folder of the library You can preview the flash movie by clicking File > File >

Publish Preview >FlashPublish Preview >Flash Save the flash movie by clicking File > Save AsFile > Save As and

save the file as flashmx-basics3-template.flaflashmx-basics3-template.fla

Exercise 3 (Using Motion Guide)Exercise 3 (Using Motion Guide)

Page 47: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

47

Open the file flashmx-basics4-template.fla Create THREE new layers respectively for the

images: Magnifying Glass, catseyes and catseye-blur stored in the “mask layer” folder of the Library

Between Frame 115 to Frame 150, drag the images on to the stage at their respective layers as shown below:

Exercise 4 (Creating Layer Masks)Exercise 4 (Creating Layer Masks)

Page 48: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

48

On top of the “catseyes” layer, insert a new layer which acts as the mask layer for “catseyes”. Then right click the layer and choose “Mask”

To create a special effect, open the tool To create a special effect, open the tool palette and draw a small circle which palette and draw a small circle which exactly covers the magnifying glass.exactly covers the magnifying glass.

This circle will serve as the hole of the This circle will serve as the hole of the mask layer.mask layer.

Then follow previous procedure, create Then follow previous procedure, create tweening motion for both the mask object tweening motion for both the mask object and the magnifying glassand the magnifying glass

Exercise 4 (Creating Layer Masks)Exercise 4 (Creating Layer Masks)

Page 49: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

49

You can preview the flash movie by clicking File > Publish Preview >FlashFile > Publish Preview >Flash

Save the flash movie by clicking File > File > Save AsSave As and save the file as flashmx-flashmx-basics4-template.flabasics4-template.fla

Exercise 4 (Creating Layer Masks)Exercise 4 (Creating Layer Masks)

Page 50: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

50

To control the normal flow of the movie, one can insert actionscript into the desired frame to instruct the movie to take special action

To do this, we may insert a new layer (named as “actions”) to host all the actionscipt for the desirable frame.

Exercise 5 (Creating Frame Exercise 5 (Creating Frame Actions)Actions)

Page 51: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

51

Looping Effect for the “honey bee” Insert a key frame at Frame 109 of the “actions“actions”

layer Select and right-click this key frame, then choose

“Actions”“Actions”

Exercise 5 (Creating Frame Exercise 5 (Creating Frame Actions)Actions)

Page 52: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

52

From the Movie Control folder choose “gotoAndPlay” option

Then type 97 in the frame number field

Exercise 5 (Creating Frame Exercise 5 (Creating Frame Actions)Actions)

Page 53: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

53

Looping Effect for the “layer mask” Similarly, insert a key frame at Frame 150 of the

“actions“actions” layer Select and right-click this key frame, then choose

“Actions”“Actions” Choose “gotoAndPlay” gotoAndPlay” as the action Then type inThen type in 115 115 as the Frame number..

Exercise 5 (Creating Frame Exercise 5 (Creating Frame Actions)Actions)

Page 54: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

54

You can preview the flash movie by clicking File > Publish Preview >FlashFile > Publish Preview >Flash

Save the flash movie by clicking File > File > Save AsSave As and save the file as flashmx-flashmx-basics5-template.flabasics5-template.fla

Exercise 5 (Creating Frame Exercise 5 (Creating Frame Actions)Actions)

Page 55: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

55

Creating ButtonsCreating Buttons Buttons are actually four-frame interactive four-frame interactive

movie clips.movie clips. 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.

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)

Page 56: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

56

To create a button:To create a button: 6.1 Choose Insert > New SymbolInsert > New Symbol, or press

Control+F8. 6.2 To create the button, you convert the

button frames to keyframes. 6.3 In the Symbol Properties dialog box,

enter a name for the new button symbol, and for Behavior choose Button.

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)

Page 57: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

57

Flash switches to symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe.

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)

Page 58: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

58

6.4 To create the Up state button image, use the drawing tools, import a graphic, or place an instance of another symbol on the Stage.

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)

Page 59: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

59

6.5 You can change the texture of the button by “selecting” the button and choose Window > Color Window > Color MixerMixer and select and select “Linear Gradient” “Linear Gradient” and appropriate and appropriate color pointer.color pointer.

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)

Page 60: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

60

6.6 Copy the “Up” frame and paste it onto the “Over” frame, “Down” frame, and the “Hit” frame.

6.7 You may then vary the colour tone of the second TWO frames.

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)

Page 61: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

61

Defining an action to the button (WWW link) 6.8 Insert TWO layers for two button

instances. 6.9 On the two layers, insert Keyframes at

Frame 97 On the TWO layers, create TWO labels:

“Mask Layer” and “Examples” for the TWO button instances respectively

6.10 On the stage, select the “Mask LayerMask Layer” button and right click it. Choose the “ActionAction” option.

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)

Page 62: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

62

Defining an action to the button (WWW link) 6.11 On the script editor panel, select the

commands for the two given buttons: on (release) {

gotoAndPlay(115);

} on (release) {

getURL("http://www.macromedia.com/support/flash/drawing/creating_masks/creating_masks02.html");

}

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)

Page 63: 1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

63

6.12 For the “Example” button instance, create an action to control the movie to go to Frame 109 when the button is being pressed.

6.13 You can preview the flash movie by clicking File > Publish Preview >FlashFile > Publish Preview >Flash

6.14 Save the flash movie by clicking File > File > Save AsSave As and save the file as flashmx-flashmx-basics6-template.flabasics6-template.fla

Exercise 6 (Creating a button Exercise 6 (Creating a button for navigation)for navigation)