Flash Multimedia

Flash 8 Multimedia

Sydney CEO

Flash Multimedia

Prepared by: Kelly Short

Kelly Short

1

Flash 8 Multimedia

Sydney CEO

Contents

Kelly Short

Section

Page

1

The Scene Panel

6

2

Action Panel

7

3

Creating a button

8

4

Adding a Library Button

10

5

Adding Sound to a button

11

6

Going from one scene to another

12

7

Going to frames of a scene (Changing pictures)

12

8

Turn sound on and off

13

9

Variables

15

10

Preloaders

17

11

Interactive Learning Components

20

2

Flash 8 Multimedia

Sydney CEO

Screen Layout

Create a new Flash Document

Lists recently opened items

Kelly Short

3

Kelly Short

Toolbar

Properties Bar

Stage

Timeline

Library

Flash 8 Multimedia Sydney CEO

4

Flash 8 Multimedia

Sydney CEO

The Timeline Key Frame

Empty Key Frame Empty Frame

Layer Name

Onion Skinning

Scene and Symbol New Layer, Motion Guide, Layer Folder

The Tools Select (V) Free Transform Tool (Q)

Sub Select (A) Gradient Fill (F)

Line Tool (N)

Lasso (L)

Pen Tool (P)

Text (T)

Oval (O)

Rectange (R)

Pencil (Y)

Paintbrush (B)

Ink Bucket Tool (S)

Paint Bucket (K)

Eye Dropper (I)

Erase (E)

Hand Pan(H)

Zoom (Z) Stroke Colour Fill Colour

Black and White, No colour, Swap Colours Tool related Options

Kelly Short

5

Flash 8 Multimedia

Sydney CEO

The Scene Panel In order to create any multimedia product, you must create multiple scenes, and navigate between them. Open the scene panel by going to Window—>Other Panels—>Scene

This lists the scenes that are within your document. Double click to change the names

Delete the scene

Duplicate the current scene

Kelly Short

Add a new scene

6

Flash 8 Multimedia

Sydney CEO

The Action Panel

Add an action script statement

Lists all the action script statements, double click to add

Kelly Short

States what object you have added the action script to

7

Flash 8 Multimedia

Sydney CEO

Creating Buttons Setting up to create a multi page website. Each scene must have a stop script, otherwise it will scroll through like an animation. Add a layer to the scene and rename it for organization. Open the action toolbar and type in stop();

Create a rectangle with the rectangle tool

Select the rectangle and convert to a symbol (Modify—> Convert to Symbol)

Make sure that “Button” is selected

Double click on the button to edit it

Kelly Short

8

Flash 8 Multimedia

Sydney CEO

Add keyframes to Over and Down, and change the button slightly on each keyframe

States of the buttons: Button states are simply the different visual versions of a button as a user interacts. For example, all the dialog boxes that appear in Flash contain an OK button. That button has a down state— what it looks like when a user clicks it—that is slightly different (visually) from the normal up state for the button. The buttons that you create in Flash can also have a down state. Actually, you can also easily create an over state, which is the visual look of the button while the user puts his cursor over it. For example, all the buttons in the Tools panel in Flash have an over state that looks like a raised box. You'll learn to create this kind of effect in this hour. (Sams Teach Yourself Macromedia Flash in 24 hours by Phillip Kerman) The Hit State is the active area of the button. This is important if you create a button out of only text, as anywhere where lines aren’t drawn on the text will not allow you to press the button

Open the actions window and type in the following: on (release) { gotoAndPlay("SceneName",1); }

Kelly Short

9

Flash 8 Multimedia

Sydney CEO

Adding a library button

Open Window—>Common Libraries—>Buttons

This opens a library of buttons. Click and drag them into your document to use.

Kelly Short

10

Flash 8 Multimedia

Sydney CEO

Adding Sound to a button Insert a new layer above "Layer 1" and call it sound. Insert a blank keyframe in the frame marked Down

Import a sound to the library

Add a blank keyframe to where you want the sound to play

Change the sound to the one that you want to play

Change the sync value to start

Kelly Short

11

Flash 8 Multimedia

Sydney CEO

Going to Scene on (release) { gotoAndPlay("SceneName",1); }

When button is clicked

Name of scene, Frame number

Going to Frames When button is clicked

on (release) { gotoAndPlay(12); }

Go to frame 12

Going to a website on(release){ getURL("http://www.busdesigns.com","_blank"); }

Website URL Window State

Kelly Short

12

Flash 8 Multimedia

Sydney CEO

Turn sound on and off When you have the Properties panel reflecting sound for the intended keyframe, you can decide exactly how the sound should play. The most fundamental choice you need to make is the Sync setting. This controls exactly how a particular instance of the sound will play—or, more specifically, the priority of the sound compared to the visual elements in the animation. Before you try out the Sync settings, see the following list and Figure 10.5 for an explanation of each: • Event— Should be your default choice, especially for sound effects and other "incidental" sounds. When Event is chosen, sounds will start to play when the keyframe is reached and keep playing until the sound is done. Event sounds might not coincide with visual elements the same way on everyone's machine. Sounds don't play more slowly or quickly (that would make them sound funny), but a machine with slower graphics performance might take longer to display visual elements. Suppose you have a 1-second sound set to Event and your frame rate is 12 fps. You would expect that during the sound, 12 frames would be displayed, but a slow machine might display only 6 fps during that 1 second. In either case, the sound will finish 1 second later, as you would expect, but exactly how many frames will have been displayed can vary.

•

•

•

• Start— This setting is almost the same as Event, except that multiple instances of the same sound are prevented. With Event, a sound can be layered on top of itself, similar to singing a "round." Start, on the other hand, plays a sound if it's not already playing. • Stop— This setting is kind of weird—it's for when you want a specified sound to stop playing. For example, say you import a sound called "background music" and make it start playing in the first keyframe of one layer. Then you import another sound, "narration," and make it start playing in the first keyframe of another layer. Then, in frame 10, you place another keyframe with the same sound (background music) set to Stop, just that sound will stop. Both sounds start at the beginning, but on frame 10 the background music stops and the narration continues to play. This is a bit strange because normally you use the Properties panel to specify the sound you want to play where here you specify the sound you want not to play. Think of Stop as "stop this sound if it's playing." • Stream— This setting causes the sound to remain perfectly synchronized with the Timeline. Because, again, you can't have sounds playing slowly if the user's machine can't draw frames quickly enough, this setting forces Flash to skip frames to keep up. Stream sounds start playing when the keyframe is reached and continue to play as long as there is space in the Timeline. In other words, if your sound is 3 seconds long and you're playing at 12 fps, the Timeline has to be at least 36 frames; otherwise, part of the sound will never be reached. (You can compare the Stream setting to a Graphic Symbol's behavior.) The benefit of the Stream setting is that the synchronization will always be the same. If in this case you place a graphic in Frame 12, it will coincide perfectly with the first second of your sound. Just remember that when you're using Stream, you have to ensure that there are enough frames in the Timeline to accommodate the length of the sound. Finally, you preview Stream sounds as you scrub, thus making the process of synchronizing audio to images possible.

•

Kelly Short

13

Flash 8 Multimedia

Sydney CEO Add a button to the scene Name it startButton

1. Select File > Import to import a sound. 2. Select the sound in the library, right-click (Windows) or Control-click (Macintosh), and select Linkage. Select Export for ActionScript and Export in First Frame; then give the sound the identifier machineSound.

Add another button to the Stage and name it stopButton. Select Frame 1 in the main Timeline, and select Window > Actions. Add the following code to the Actions panel:

var song_sound:Sound = new Sound(); song_sound.attachSound("machineSound"); startButton.onRelease = function() { song_sound.start(); }; stopButton.onRelease = function() { song_sound.stop(); };

Kelly Short

14

Flash 8 Multimedia

Sydney CEO

Variables Add a text field here

Change to

Add a new scene and create a button to

Type in name of Variable here.

go to it

on(release){ gotoAndPlay("Scene 2",1); } Select Show border around text

Kelly Short

15

Flash 8 Multimedia

Sydney CEO Go to scene 2

Add a dynamic text field

Select Dynamic here

Kelly Short

Change the Var property to the name of the variable you want to display

16

Flash 8 Multimedia

Sydney CEO

Preloaders Create a loading graphic and convert to a symbol. Double click to edit

Create a new layer, then draw a small section of green. Insert a keyframe on frame 100 On Frame 100, create a rectangle the same shape as the black and colour it green Shape tween to create a loading bar

Kelly Short

17

Flash 8 Multimedia

Sydney CEO

Create some dynamic text fields like below. This is where the information will be displayed.

Dynamic Create a new layer called scriptpercent and add the following code: // store BytesLoaded in variable called LoadedBytes _root.LoadedBytes = _root.getBytesLoaded(); // store BytesTotal in variable called TotalBytes _root.TotalBytes = _root.getBytesTotal(); // to get percentage of how much is loaded // divide number of Loaded Bytes by Total Bytes and times by 100 // the floor bit rounds off to the nearest integer _root.percentLoaded = (Math.floor(_root.LoadedBytes/ _root.TotalBytes*100)); _root.Bar.gotoAndStop(_root.percentLoaded); // add the % symbol _root.percentDisplay = _root.percentLoaded+"%";

Add the next script to frame 10. This will loop the animation until all frames are loaded

// we are creating a loop that keeps going back to frame 1 until we are 100% bytes loaded // the value of our variable = 100 all bytes are loaded so go to Next scene if (_root.percentLoaded == 100) { nextScene(); } else { // if not all bytes are loaded go to and play 1 gotoAndPlay(1); }

Kelly Short

18

Flash 8 Multimedia

Sydney CEO

Add a layer for frames so far and add the following code: // store number of total frames in variable called _root.allframes _root.allframes = _totalframes; // store number of frames loaded in variable called _root.framesofar _root.framesofar = _framesloaded;

Kelly Short

19

Flash 8 Multimedia

Sydney CEO

Interactive Components Open the Learning Interactions Library Click and Drag the required interaction onto the desktop, and break it apart.

Open the Component Inspector

Kelly Short

20

Flash 8 Multimedia

Sydney CEO

Type your question here

You can change the answers

Navigate to further options here

Kelly Short

21