ch4-flash movie organization

8/16/2019 CH4-Flash Movie Organization

1/16

Flash Movie Organization

The Timeline

Understanding Layers

Understanding Keyframes

Understanding Scenes

Project Planning

Publishing and Uploading Movies

4


2/16

FLASH MOVIE OR GANIZATION

50

THE TIMELINE

The Timeline is the area where you will assemble and control your Flash movie. The numbers at thetop of the timeline indicates frames, not seconds. The red line is called the playhead, which is used

to indicate the frame in which you are currently working. In addition to adding objects, you also can

mask objects and add scripting and frame markers to the timeline.

When you first start Flash, the Timeline appears above the Stage. If you take a close look at it, you’ll

see that it’s actually composed of two different things - layers and frames. The layers run vertically

along the le side of the Timeline, while the frames within each layer run horizontally across the

timeline, from le to right.


3/16


51

Exercise 4.1: Timeline Exercise

1. From the student files, open the file Chapter4 / mars.fla.

2. Click on the Playhead controller and “scrub” the playhead through the movie.

You’ll notice the planet Mars grow and move around the Stage, and then the title fades in at

the boom of the Stage.

3. Play the movie by pressing the Enter key, or by selecting the Control -> Play menu.

4. Close the file.


4/16


52

UNDERSTANDING LAYERS

In order to understand the concept of a Flash layer, you need simply look at your averagehamburger. A hamburger is composed of layers - there’s the bun layer, followed by a meat layer,

followed by a slice of cheese, followed by a strip of leuce, followed by a layer of tomatoes and

onions.

Each layer can be removed and manipulated independent of the other layers. This is true of both

Flash layers and a hamburger.

A new Flash movie contains a single layer; you can add as many as you like. You can also copy,

rename and delete layers. In order to modify a layer, you need to first activate it by clicking once on it

- a pencil icon will appear on the layer. Once the layer is active, you can draw, paint and manipulateobjects on it.

Layers are transparent by default, and you can use the three control buons on each layer to alter

layer visibility, “lock” the layer to prevent changes from being made to it, and display the elements

on a layer as outlines, rather than filled, objects.


5/16


53

The icons at the boom le of the Timeline are used to insert new layers, add a Guide layer, create a

layer folder, and delete existing layers.

Exercise 4.2: Drawing Using Layers

1. Create a new Flash document.

2. Draw two stars on the Stage using either the PolyStar tool, or the Pen tool.

If the PolyStar tool is not visible, click and hold the mouse buon on the Rectangle tool, which

will allow you to select between the Rectangle tool and the PolyStar tool. Once you have selectedthe PolyStar tool, click on the Options buon in the Properties Inspector, and set the Style to star

with 5 sides.

3. Use the Selection tool to draw a selection marquee around both stars.

The stars are grouped.

4. With the grouped stars selected, choose Copy from the Edit menu.

A copy of the group is placed on the clipboard.

5. Click the Insert Layer buon on the boom of the Timeline.

A new layer is added to the layer list.

6. Single-click Layer 2 in the Timeline and choose Paste in Center from the Edit menu.

7. Choose the Free Transform tool from the Tools panel. Hold down the shi key while you use

the Free Transform tool to move the grouped stars on Layer 2 to the right and scale them to

twice the size of the original.

You may find it helpful to lock Layer 1 to avoid grabbing other objects by mistake.


6/16


54

8. Use the Selection tool and group the stars in Layer 2. Double-click the grouped stars to edit

them.

The Timeline indicates that you are in Edit mode for the Group instead of Scene 1.

9. Double-click the boom right star of the group. With the fill selected, navigate to the Property

Inspector and change the Fill color to a Bright Blue.

10. Click the Scene 1 buon to exit Edit mode and return to the main Timeline.

11. Save and close the file.


7/16


55

UNDERSTANDING KEYFRAMES

Each layer is composed of one or more frames, which come in two types - the “regular” variety andthe “keyframe” variety. A keyframe is a frame in the animation at which some change occurs - for

example, movement of an object from one point to another, or a shape change.

You can distinguish between keyframes and regular frames by the black dot that appears at the

boom of every keyframe.

Keyframes can be added at any point in the Timeline via the Insert -> Timeline -> Keyframe

command on the shortcut menu. Regular frames inserted following a keyframe will be identical to

that keyframe.

Just like layers, you can copy, move and delete frames and keyframes. When you delete a keyframe,

the frames around it remain unchanged. You can convert a keyframe to a regular frame via the Clear

Keyframe option on the shortcut menu that appears when you click it.

Exercise 4.3: Keyframes

1. Create a new Flash document.

2. Draw a rectangle on the Stage.

3. Click on Frame 5 in the Timeline and insert a new blank keyframe by selecting Insert ->

Timeline -> Blank Keyframe, or by pressing F7.

4. Draw a circle on the Stage and change the fill color to a color different than the rectangle

you’ve created in frame 1.

5. Click on Frame 10 in the Timeline and insert another new blank keyframe.

6. Draw a star or polygon on the Stage and change the fill color.


8/16


56

7. Click on Frame 15 in the Timeline and insert a frame (F5).

The Timeline should look like this:

8. Test the movie.

You’ll see your rectangle appear for 4 frames, the circle for 5 frames, and the polygon or starappear for 6 frames.


9/16


57

UNDERSTANDING SCENES

One of the biggest challenges in learning how to create a project in Flash is that there are a largenumber of different ways to accomplish the same thing.

Once you have a larger amount of content, you may want to have more than one timeline in your

project. That’s where scenes come in. Scenes are separate timelines that are usually used to separate

sections of a project.

Creating Scenes

You create and manage scenes with the Scene panel, which can be accessed from the Window ->Design Panels -> Scene, or by pressing Shi-F2.

From the Scene panel, you are able see the scenes in the current movie, and can add a new scene,

rearrange the order of the scenes, duplicate a scene, rename a scene, or delete a scene.


10/16


58

PROJECT PLANNING

As you begin working on larger projects, you’ll need to start planning on how you want your projectto work. Because Flash is so flexible, you can do things many different ways.

One way to create your project is to build the movie with all of the content in a single timeline in

one scene. If your project is going to become large, having the entire project in one timeline make it

diffi cult to make changes to at a later date.

A second way to create your project is to build your movie as a number of scenes, each with their

own timeline in a single movie. For most Flash movies that you’ll create, this is probably the best

choice.

You can also build your project as a number of separate movies, using multiple scenes as you desire.

This option should be considered for very large projects, since Flash loads the entire movie before

it plays, so by spliing up the project into mulitple movies, you can reduce the initial load time for

your learners. This option also allows more than one person to work on a project at the same time.


11/16


59

PUBLISHING AND UPLOADING MOVIES

Now that you’ve created your Flash masterpiece, it’s time to publish your movie. With Flash MX2004, you can publish your movie in a number of different formats

1. Flash file (.SWF). This is a compressed version of your Flash movie that is usually designed to

be downloaded over the Internet and played with the Flash player.

2. HTML file. The HTML file is designed to have the Flash file (.SWF) embedded in the HTML

page. You can also specify sizing and position options for how the Flash file will be placed in

the HTML file.

3. Image file: You can publish your movie as a .GIF, .JPEG, or .PNG image

4. Projector file: You can publish your movie as a stand-alone program to run on Windows or

Macintosh computers.

5. QuickTime movie: You can publish your movie as a QuickTime movie that can be played

with the QuickTime player.

In most cases, you’ll choose the Flash file and the HTML file together, or you’ll choose the Projector

file. If your final project contains more than one Flash movie, you may just want to publish the .SWF

file.


12/16


60

Publish Settings - Format

The Publish Seings dialog box offers numerous options; including specifying the formats you’ll

publish your movie in. You can also specify the target location for the files that will be published.


13/16


61

Publish Settings - Flash

There are a number of different options to modify in publishing your Flash movie. You can specify

the version of the Flash Player required for your movie. Keep in mind that if you choose to includethe latest features of Flash MX 2004 in your movie, you must ask your viewers to download and use

the latest version of the Flash Player, which is Flash Player 7. Otherwise, they will not be able to fully

enjoy your movie.

You can also specify image and sound compression options, which we’ll cover later as we being to

work with bitmap images and sound files.


14/16


62

Publish Settings - HTML

The HTML Publish Seings allow you to specify a number of options that specify how the Flash

movie will look and play in the browser. You can specify templates that add specific features for theFlash movie, like AICC or SCORM tracking, or even detecting if the learner has the correct version

of Flash. You can specify if the movie will be displayed at the size you created it at, or if it should

be scaled at a certain percentage of the browser window size. You can also specify the movie’s

alignment in the browser.


15/16


63

Exercise 4.4: Publishing

1. From the student files, open the file Chapter4 / mars.fla.

2. Save the file as mymars.fla.

3. Open the Publish Seings dialog box. Select Windows or Macintosh Projector in addition to

Flash and HTML.

4. Click the Publish buon.

5. Click OK.

Three files will be created: a Flash .SWF file, an HTML file, and a Projector.

6. Open the HTML file or the Projector to view the published movie.

7. Close the mymars.fla file.


16/16


64

Exercise 4.5: The Solar System

The first project you have been assigned is to create an interactive program to teach the solar system

to first and second grade students.

Your first task is to design the main menu screen which will require you to draw the nine planets

orbiting around the Sun.

Remember to use multiple layers as needed in your movie to make your drawing easier.

When you’re finished, your movie may look something like this:

ch4-flash movie organization

Documents