Activity 2

Getting Acquainted with Macromedia Flash 8

Approximate time to complete: 30 minutes

This activity introduces the key parts of Flash. If you are already familiar with Flash, you can skip ahead to Activity 3: Building a Narrative from a Template. Although Flash is often known as an animation program, it also provides powerful tools you can use to create interactive websites and multimedia presentations. The main components of the Flash interface are the Timeline, Stage, workspace, layers, Tools panel, Property inspector, and other panels.
Tools panel Timeline Stage

Panels

Property inspector

! The Timeline is where you control the elements of your movie over time. ! The Stage is where text, images, and animations appear. The white area of the Stage is the visible area of your project. You can modify properties of the Stage, such as size, color, and frame rate. ! The workspace is the gray space surrounding the Stage. Nothing in the workspace is visible when you publish your finished movie. However, you can place objects here until you want them to appear on the Stage. ! The Tools panel contains tools for creating and editing artwork. ! The Property inspector enables you to see and change properties of objects on the Stage.

Digital Narrative Project for Macromedia Flash 8

! On the right side of the Flash workspace are panels you can collapse or expand as you need them. For example, there are panels for working with symbols, color, components, and behaviors.

The Timeline
The Timeline is a key tool for organizing and controlling your animations. Here, graphics are animated over time. You coordinate the timing of an animation and assemble the artwork on separate layers on the Timeline. The Timeline displays each frame in the movie. Your movies can contain frames, keyframes, and empty (blank) keyframes.
Empty keyframe Playhead Keyframe containing content

Layers

Current frame Frame rate

Elapsed time

! Layers are a way of organizing the objects on the Stage, much like a stack of transparent sheets for an overhead projector. You must use separate layers to draw overlapping shapes. Each layer has controls for hiding or showing the layer, locking it (so you wont accidentally move its contents), and displaying its contents as outlines. ! Frames are like the individual frames of a filmstrip. The Timeline in a new Flash project appears to have many frames, but these are actually empty slots you can define as frames or keyframes. ! A keyframe contains content and is shown by a solid circle. A keyframe usually indicates that a change is going to occur on the Stage. ! An empty keyframe, or blank keyframe, has no visual content on the Stage. The Timeline opens with one empty keyframe when you start a new project. ! The playhead indicates which frame of the Timeline is currently shown on the Stage. You can click and drag the playhead to move it to view a specific frame, or scan through the Timeline (scrubbing). ! The current frame is the frame on which the playhead is positioned. ! Frame rate is the number of frames that will play each second when your movie is viewed. ! Elapsed time is the amount of time it will take your movie to play from the first frame to the currently selected frame. You select a frame by clicking it.

Digital Narrative Project for Macromedia Flash 8

The Tools Panel

The Flash Tools panel contains tools for drawing shapes, adding text, modifying objects, and controlling color. The Options section displays any additional options for modifying a selected tool. When you select a tool, the Property inspector changes to present the settings associated with that tool. For example, if you select the Text tool, the Property inspector displays text properties, making it easy to select the text attributes you want.

Selection Free Transform Line Pen Oval Pencil Ink Bottle Eyedropper

Subselection Fill Transform Lasso Text Rectangle Brush Paint Bucket Eraser Zoom

Hand Stroke Color Fill Color

Following is a list of the tools used to create the sample narrative Why Do Leaves Change Color? To learn more about the other tools, select Help > Using Flash. ! Use the Selection tool to select entire objects by clicking or by dragging and enclosing the object within a rectangular selection marquee. To select connected lines or both the fill and stroke of a drawn shape, double-click with the Selection tool. ! Use the Text tool to add, select, and edit text. ! To draw basic geometric shapes, use the Line, Oval, and Rectangle tools. ! Use the Pencil tool to draw free-form lines and shapes as if drawing with a real pencil.
Digital Narrative Project for Macromedia Flash 8

! Use the Pen tool to draw precise paths as straight or curved lines. ! Use the Brush tool to create brush-like strokes as if painting with a brush. ! The Free Transform tool is used to transform graphic objects, as well as groups, text blocks, and instances of symbols. Depending on the type of element you select, you can freely transform, rotate, skew, scale, or distort the element. ! The Paint Bucket tool fills enclosed areas with color. It can fill empty areas and change the color of already painted areas.

Understanding Text, Shapes, and Symbols

You can add three main types of objects to your Flash movies. These are text, shapes, and symbols. ! Use the Text tool to add text. ! Create shapes by using the drawing tools in the Tools panel. ! Symbols are reusable graphic objects stored in the library for the current project. Once a symbol is stored in the library, you can place copies, or instances, of the symbol in your movie. After you add an instance of a symbol to your movie, you can change its properties, such as size or tint. You can add any number of instances of a symbol to your movie without increasing the file size of the movie. If you edit the original symbol in the library, every instance is updated automatically.

Adding Text
Adding text is easy when you use the Text tool. First drag to create a text box and type your text. Use the Property inspector to apply text attributes such as font, size, and color. You can apply text attributes before or after typing your text.
To add text:
1.

Start Macromedia Flash 8. A Start Page opens.

2.

To open a new Flash document, select Flash Document in the Create New column. Every new document opens with one layer and one empty keyframe.

3.

Double-click Layer 1 on the Timeline, type text, and press Enter (Windows) or Return (Macintosh) to rename the layer. Naming layers helps keep the Timeline organized.

10

Digital Narrative Project for Macromedia Flash 8

4. 5. 6. 7.

Click the Text tool in the Tools panel to select it. Move the pointer to the Stage. The pointer changes to a plus symbol with an uppercase letter A. Draw a text box by dragging the pointer on the Stage.

The text box contains a flashing insertion point. This is where text will appear when you type. You can adjust the width of the text box by dragging the size handle. You can apply text attributes by using the Property inspector.
8. 9.

Type your name. Click away from the text to deselect it. To edit text after it has been created, double-click the text and make your changes. To set text properties, use the Selection tool to select the text box.

10.

Use the Selection tool to select the text. The text is surrounded by a thin blue outline.

11.

Use the Property inspector to apply new text attributes.

Digital Narrative Project for Macromedia Flash 8

11

Drawing Basic Shapes

Flash has some great drawing tools that can help you create the artwork for your interactive movies. Although you can import artwork created in other applications, such as Macromedia FreeHand, drawing tools such as the Pen tool put the same precision drawing capabilities right at your fingertips. Even if you are not a professional artist, making basic shapes is a lot easier than you might think.
To draw basic shapes:
1.

Insert a new layer and name it circle. To insert a new layer, click the Insert Layer button on the Timeline.

2.

Select the Oval tool on the Tools panel. The Colors section displays the color options for the Oval tool. You can change the stroke color and fill color. For this activity, use different colors for stroke and fill.

3.

Drag on the Stage to draw a small circle. You can make a perfect circle by holding down the Shift key as you draw.

4.

Use the Selection tool to click the center of the circle. Only the fill (inside) of the circle is selected, not the stroke (outline).

5.

Double-click the circle. Double-clicking the fill of a shape selects both the fill and the stroke.

6. 7. 8.

Click away from the circle to deselect it. Click the stroke of the circle to select it. Press Delete or Backspace to remove the stroke.

12

Digital Narrative Project for Macromedia Flash 8

Using Symbols and the Library

In addition to text and shapes, your movies can include symbols. You can create new symbols or convert existing objects such as text or shapes. One advantage of working with symbols is that you can easily change attributes such as brightness, tint, and alpha transparency (the opacity of the object). Symbols are stored in the library for the current document. To use a symbol in your movie, drag an instance of the symbol from the Library panel onto the Stage.
To convert a shape to a symbol:
1. 2.

Use the Selection tool to select the circle shape. Select Modify > Convert to Symbol on the menu bar. The Convert to Symbol dialog box opens.

3.

Name the symbol circle graphic, select Graphic as the Type, and click OK. You can tell by the blue outline and small circle in the middle of the circle that it is now a symbol, not a shape. The Property inspector shows that it is an instance of the circle graphic symbol. The actual symbol is stored in the library.

To add symbol instances by using the Library panel:

1.

Make sure the Library panel is open (Window > Library).

Digital Narrative Project for Macromedia Flash 8

13

The Library panel contains the circle graphic symbol. The icon beside the symbol represents the graphic symbol type.

2.

Drag the circle graphic from the Library panel to the Stage. A second instance of the circle graphic is added to the Stage. You can select the instance by single-clicking the object on the Stage to change the size and color attributes without affecting the original symbol. If you double-click the object on the Stage, you switch to symbol-editing mode, and the changes you make apply to every instance of the symbol.

Animating with Motion Tweens

Much of the animation you see on television or the web is created by using a process called keyframe animation. The main artist draws a keyframe for the beginning of the animation and a keyframe for the end of the animation. Then a person called the in between artist draws all the frames that go between the two keyframes to create the effect of motion. This is called tweening for short. In Flash, you create the beginning and end keyframes and let Flash fill in the blanks to create the animation. To animate text or symbols, use a motion tween.
To animate text:
1.

On the text layer, click frame 13 and select Insert > Timeline > Keyframe on the menu bar. The animation will begin in frame 2 and end in frame 13, lasting 12 frames. Because this movie is set to play 12.0 fps (12 frames per second), the animation will last 1 second.

2.

Click frame 1 on the text layer. The text in frame 1 is selected.

14

Digital Narrative Project for Macromedia Flash 8

3.

Select the text with the Selection tool and drag the text in frame 1 off the Stage to the workspace. The text will begin offstage and then animate into view.

4. 5.

Click anywhere between frames 1 and 13 on the text layer. Select Insert > Timeline > Create Motion Tween on the menu bar. You can also add a motion tween by selecting Motion in the Tween menu on the Property inspector. The motion tween is represented on the Timeline by light-blue shading and an arrow extending between the two keyframes.

6.

Position the playhead in frame 1 and press Enter (Windows) or Return (Macintosh) to preview the movie. The text animates into view, but the circles disappear after frame 1 of the movie. You can fix this by adding frames to the circle layer.

7. 8. 9.

Click in frame 13 on the circle layer. Select Insert > Timeline > Frame on the menu bar. Position the playhead in frame 1 and press Enter (Windows) or Return (Macintosh) to preview the movie.

To animate symbols:

A motion tween will not occur on layers with ungrouped shapes or on layers with more than one group or symbol. To animate additional text, shapes, or symbols, add new layers.
1.

Insert a new layer and name it blue circle.

Digital Narrative Project for Macromedia Flash 8

15

2.

Drag another instance of the circle graphic symbol from the Library panel to the Stage.

3. 4. 5. 6.

Click frame 13 on the blue circle layer. Select Insert > Timeline > Keyframe on the menu bar. Click the circle in frame 13 to select it (the one you just added to the blue circle layer). Use the Property inspector to change the tint of the circle.

7. 8. 9.

Click between frames 1 and 13 on the blue circle layer. Select Insert > Timeline > Create Motion Tween on the menu bar. Position the playhead in frame 1 and press Enter (Windows) or Return (Macintosh) to preview the movie. The text animates into view, and one of the three circles slowly changes from green to blue.

10.

Save and close the document.

16

Digital Narrative Project for Macromedia Flash 8

Activity 3

Building a Narrative from a Template

Approximate time to complete: 10 minutes

Flash provides templates that take the heavy programming out of the development process and leave you more time to focus on design and content. For example, you can create a digital narrative by using the Narrative template that is provided with this course.

Creating a New Movie from a Template

To start your narrative, begin a new project document, using the Narrative template, and add your own content. You can also customize the template to include design ideas of your own.
To create a new movie from a template:
1. 2.

Start Macromedia Flash 8. Select File > New on the menu bar. The New Document dialog box opens.

3. 4.

Select the Templates tab. Select Presentations from the Category list.

5.

Select Narrative from the Templates list, and click OK. A new project file opens.

Digital Narrative Project for Macromedia Flash 8

17

Identifying the Parts of a Template

The Narrative template provides several elements that will simplify the process of building your narrative. For example, every page includes a background layer, a print button, and navigation controls.
To identify the parts of the template:

Drag the bottom edge of the Timeline down until all six layers are visible.

Here is a brief description of each layer in the Narrative template: ! The _instructions layer is a Guide layer and will not appear in the finished narrative. This layer contains instructions on using the template. You can hide this layer or delete it. ! The Pages layer contains four keyframes. Each keyframe represents a new page. The first page is a placeholder for the title. You can easily modify the contents of these pages to begin your narrative. To add new pages, simply add additional keyframes. ! The _controls layer provides the navigation controls for your narrative. These include Next Page and Previous Page buttons as well as dynamic text fields that display the current page number and total number of pages. This layer also includes a print button. You can safely delete the print button if you wish. ! The _bkgnd layer contains keyframes for the background images. The Narrative template has a keyframe for the title page background and a blank keyframe you can use to add a background for the other pages in the narrative. The background for the title page is a plain blue rectangle. You can use this background as is, change its color, or replace it with something new. ! The _labels layer contains a named layer that defines the area of the page that prints when the viewer clicks the Print icon. ! The _actions layer contains ActionScriptthe scripting language of Flashthat tells the movie to stop on each page. The movie will not advance to the next or previous page until the viewer clicks one of the navigation controls.

Adjusting Movie Properties

The template comes with several predefined movie (document) properties. These include the size of the Stage, the background color, and the number of frames per second.
To adjust movie properties:
1.

Select Modify > Document on the menu bar.

18

Digital Narrative Project for Macromedia Flash 8

The Document Properties dialog box opens. From here you can change the document title, size of the Stage, the background color, and the frame rate.

If you are creating the narrative Why Do Leaves Change Color? for this project, leave the document settings as they are.
2.

To save your changes and close the Document Properties dialog box, click OK.

Adding Pages to Your Narrative

The Narrative template has one title page and three blank pages. The template is designed to let you add any number of pages. If you add new pages to your narrative, make sure to extend the other layers so they contain the same number of frames as the Pages layer.
To add new pages to the narrative:
1.

Select the keyframe for page 4 on the Pages layer.

Select this keyframe

2.

Select Insert > Timeline > Keyframe on the menu bar. A new page is added. It contains the same content as the previous page. You can continue to add and modify any number of pages.

Digital Narrative Project for Macromedia Flash 8

19

Testing a Movie
You can test your movie at any time as you work on it. It is important to understand that your Flash document is where you create and edit your movie. This file has a .fla file extension. When you publish or test your movie, Flash creates a movie that can play in a web browser. This stand-alone movie has a .swf file extension. When you test your movie, Flash places a new SWF file with the same name in the same directory as the document file. Its a good idea to save your document before you test it.
To test the movie:
1. 2. 3. 4.

Select File > Save on the menu bar to open the Save As dialog box. Navigate to a folder on your computer where you plan to save the movie. Type a name for the document, and click Save. Select Control > Test Movie. Flash creates the SWF file and shows the first page of the narrative.

5.

Use the navigation controls to view the other pages in the narrative. Before you create content in the template, pages 24 are blank. You will use these pages to create your narrative. You can also use the Left Arrow and Right Arrow keys to move from page to page.

6. 7.

Select File > Close to close the movie and return to the project file. Save the document.

20

Digital Narrative Project for Macromedia Flash 8