Macromedia Flash 8 Flash Project 1-1

Project 1 Animated Billboard

TABLE OF CONTENTS Project Objectives...... 1 File Listing: ...... 2 Project 1 Overview...... 2 Teaching Tip: Design Specification versus Implementation...... 3 Lesson 1: Creating a New Flash Document...... 4 Teaching Tip: Working with the Layers Stack...... 5 Lesson 2: Adding Shapes and Text to the Timeline...... 6 Teaching Tip: Creating a Proper Cutout...... 7 Teaching Tip: Web-safe Colors and the Depth of the Color Buffer...... 8 Lesson 3: Working with Symbols, Instances, and the Library...... 9 Teaching Tip: The Symbol Work Environment...... 9 Teaching Tip: Arranging Instances of the Filmstrip Symbol...... 10 Lesson 4: Animating Shapes, Symbols, and Text...... 11 Troubleshotting Tip: Managing Layers...... 13 Lesson 5: Making the Animated Billboard Accessible...... 13 Teaching Tip: Condensing Information for the Screen Reader...... 14 Lesson 6: Publishing Flash Elements for the Web...... 14 Teaching Tip: Publishing in a Static Image Format...... 15 Discussion Topic: Tweening versus Frame-by-Frame animation...... 15 Key Terms:...... 16

PROJECT OBJECTIVES

 Create a new Flash document.  Use the Flash drawing tools.  Create text and basic shapes.  Work with symbol instances and the library.  Animate shapes, symbols, and text.  Make a Flash document accessible.  Publish Flash content for the Web. Macromedia Flash 8 Flash Project 1-2

File Listing

LOCATION PROVIDED FILENAME SAVED FILENAME Lesson 1 None FL_Project1_YourName.fla Lesson 2 FL_Project1_YourName.fla FL_Project1_YourName.fla (or FL_Project1_Lesson2.fla) (includes disc.png) disc.png Lesson 3 FL_Project1_YourName.fla FL_Project1_YourName.fla (or FL_Project1_Lesson3.fla) Lesson 4 FL_Project1_YourName.fla FL_Project1_YourName.fla (or FL_Project1_Lesson4.fla) (includes countdown.swf) countdown.swf Lesson 5 FL_Project1_YourName.fla FL_Project1_YourName.fla (or FL_Project1_Lesson5.fla) Lesson 6 FL_Project1_YourName.fla FL_Project1_YourName.fla (or FL_Project1_Lesson6.fla)

NOTES

Project 1 Overview See Figure 1 for an example of an animated billboard and Figure 3 to view a project storyboard.

Animated billboards combine images and text that incorporate motion to achieve a particular goal of the Web site. In this project, students use Macromedia Flash to produce a brief animated billboard to promote an upcoming film festival in Detroit sponsored by SMV. Students will use the design document and storyboards provided by the client to:

 Set the properties for the billboard.  Create the necessary graphics and text.  Create and generate graphical objects to reuse.  Animate graphics and text.

In addition to specifying the structural elements of a site, the design document provides information about key content. Furthermore, it conveys important project drivers, such as site goals, purpose, and target audience. The design document will guide development throughout the project.

Storyboards are used in conjunction with the design document to direct the project workflow. Storyboards comprise a series of panels with pictures and words that specify how to create animation for the Stage. Designers use storyboards to share their design with team members and clients without having to build anything in Flash. The storyboard for the animated billboard Macromedia Flash 8 Flash Project 1-3 project includes a series of images and descriptions of how each section of the finished movie should look.

DESIGN SPECIFICATION VERSUS IMPLEMENTATION Although novice developers do not always agree, the design stage is the most critical portion of a project. Have your students carefully review the design document and first storyboard for the animated billboard project. As they implement the design, they should refer to these documents for both forward guidance and ongoing adjustments.

Figure 1: SMV Web site example showing placement of the animated billboard Macromedia Flash 8 Flash Project 1-4

Figure 3: Storyboard Lesson 1: Creating a New Flash Document See Figure 1-1 to view Storyboard summary information

Lesson 1 Introduction

Students should identify requirements that can be implemented as properties of the Flash document, such as size, background color, frame rate, and duration. Layers should be implemented, as needed, after document properties have been set. New Flash documents should be named and saved.

Figure 1-1: Storyboard summary information Macromedia Flash 8 Flash Project 1-5

Setting Document Properties See Figure 1-2 to view the Document Properties dialog box.

Setting document properties is the first step to creating any new Flash document. According to design criteria for the animated billboard, students should set the following:

 Title to SMV Digital Impact Trailer.  Description box text to Detroit Film Festival.  Page dimensions 360 pixels x 360 pixels.  Background color to gray (#666666) to match the color of the Web page.  Frame rate to 12 frames per second (default).

The student opens the Modify menu and then clicks Document to apply the values.

Figure 1-2: Document properties dialog box. Setting Duration by Extending the Timeline

According to the storyboard, the duration of the movie is 5 seconds. At 12 frames per second, the Timeline will play for 60 frames (5 seconds × 12 frames/sec = 60 frames). Since the playhead starts at frame 1, students will need to extend the Timeline to 61.

Adding and Naming Layers on the Timeline See Figure 1-7 to view a stack of layers.

To gain greater control over objects, users should draw them on separate layers. Layers are arranged vertically and represent the stacking order of objects as they appear on the Stage. Using the stacking order, objects may be arranged from background to foreground.

The animated billboard includes a border, a background effect, a disc, text, and an animated film reel countdown. Students will add each of these elements on a separate layer of the Timeline. In order from top to bottom, these layers are named: border text, disc, border, countdown, event text, location and date, gradient, film, backlight. Macromedia Flash 8 Flash Project 1-6

Figure 1-7: Named Layers

Teaching Tip WORKING WITH THE LAYERS STACK You should advise your students to add layers in two steps: first insert all required layers and then revise the layer names. A paper-based list of layers is likely to represent a top to bottom order from left to right. Because the stack uses a LIFO (last-in, first-out) storage policy, jointly adding and naming layers by reading such a paper-based list from left to right will reverse the proper ordering of layers.

Saving and Naming a Document

When a Flash document is saved for the first time, the user provides a file name and specifies a storage location on the local computer. Flash documents are saved with the .fla filename extension. Each student should save the new document with the name, FL_Project1_YourName. The new file should reside in the project folder.

Lesson 2: Adding Shapes and Text to the Timeline Lesson 2 Introduction

In this lesson, students use simple shapes and lines to draw the border and background for the animated billboard. They also add descriptive text that provides information about the Digital Impact Film Festival and import the disc logo to create the title outlined on the storyboard.

Drawing Shapes See Figure 2-2 for an example of creating a cutout shape.

Objects produced by using the drawing tools in Flash are called shapes. New shapes replace portions of existing shapes they are painted over (see Figure 2-2). Paint of the same color merges together to create a single object. Paint of different colors remains distinct. The user can work with these features to create masks, cutouts, and other negative images. To avoid inadvertently altering shapes by overlapping them, shapes should be grouped or drawn on separate layers. Macromedia Flash 8 Flash Project 1-7

Figure 2-2: Drawing with ungrouped shapes Drawing the Border See Figures 2-11, 2-12, and 2-15 to view three stages of border construction.

To create the border for the animated billboard, students will first draw a black rectangle about the same size as the Stage. Then they will draw a smaller rectangle (any color) and use it to cut a hole in the first rectangle. The corners of the border will be rounded and the upper interior edge will be curved downward.

Figure 2-11: The red and black shapes blend Figure 2-12: Deleting the red interior cuts a hole and together to form a single object creates the outer border Macromedia Flash 8 Flash Project 1-8

Figure 2-15: Drag the inside edge of the border to create a curved shape

CREATING A PROPER CUTOUT Before students begin to draw the border for the animated billboard, impress the importance of created the outer and inner rectangles on separate layers. The inner rectangle should not be coupled with the outer rectangle until both have been specified and aligned.

Creating a Backlight for Background Effect

The background of the animated billboard changes from a dark background to illuminating strips of film. Students will create the effect by using three layers: a dark semitransparent gradient background over a light background, with an image in between. The initial tasks involve adding a light blue rectangle to the backlight layer.

Creating Custom Fills by Using the Color Mixer See Figure 2-23 to view a custom fill of a rectangle.

The Web-safe (or Netscape) palette is a limited range of colors designed to display properly in any Web browser. To access colors that are not found on the Web-safe palette, the user refers to the Color Mixer. The Color Mixer is also used to add gradient fills that fade from one color to another.

The background effect is made up of three layers. At this point, only the backlight layer is modified. Next, students will create the darker blue gradient that will sit above the backlight layer. Macromedia Flash 8 Flash Project 1-9

Figure 2-23: Use Gradient Transform Tool to rotate the gradient

WEB-SAFE COLORS AND THE DEPTH OF THE COLOR BUFFER There are a total of 216 Web-safe colors, although an 8-bit color buffer can accommodate 256 colors. The creators of the Web-safe palette chose only 216 colors to reserve shades for the computer system and to balance the contributions of the three primary colors; 216 colors corresponds to 6 shades each of red, green, and blue.

Importing Vector Graphics See Figure 2-24 to view the disc graphic over the border.

The animated billboard storyboard calls for a disc logo to be placed alongside the title. To add the disc logo to the Flash document, students will import the graphic to the Stage.

Figure 2-24: The disc graphic positioned over the border

Entering and Formatting Text for the Border See Figures 2-29 and 2-30 to view three text objects added to the billboard.

According to the project storyboard, the animated billboard contains multiple blocks of text that are different sizes and in different positions on the billboard. The user can add new text with the Text Tool on the Tools panel. To set formatting options before typing, the user may employ the Property inspector. Existing text may also be modified by selecting the text block and then adjusting values on the Property inspector. In the Step-by-Step for this section, students will add three text blocks to the animated billboard: Macromedia Flash 8 Flash Project 1-10

 DIGITAL IMPACT.  FILM FESTIVAL.  TICKETS 313.123.4567.

Figure 2-29: Text positioned in the curve of the border

Figure 2-30: Text positioned over the bottom of the border Lesson 3: Working with Symbols, Instances, and the Library Lesson 3 Introduction

A symbol is a graphic, button, or movie clip created once in Macromedia Flash for reuse any number of times throughout a movie. An instance is a copy of a symbol located on the Stage. An instance can be different from its symbol in color, size, and function. To create an instance of a symbol, the user drags the symbol from the Library panel to the Stage. If the user updates the instance, the source symbol will not be affected. On the other hand, if the user edits the original symbol, every instance is updated to reflect the changes.

The animated billboard background contains an effect that illuminates several strips of film. In this lesson, students finish the background effect by creating the strips of film that go between the backlight layer and the gradient layer. To keep from drawing multiple graphics, students can create one strip of film and convert it to a reusable symbol.

THE SYMBOL WORK ENVIRONMENT Students should be advised that all three symbol types have their own workspace and timeline where they can be created or edited. The separate work environment reinforces the independence of the symbol from a particular context.

Creating Graphic Symbols See Figure 3-4 to view five instances derived from the film_cell symbol.

To complete the background effect, students will create a new graphic symbol that resembles a strip of film. There are two ways to create graphic symbols in Flash: opening a new blank symbol and create the image from scratch, or converting existing objects, such as text, shapes, and imported graphics. This section demonstrates both techniques. Macromedia Flash 8 Flash Project 1-11

Figure 3-4: Adding instances of the film_cell symbol to the Stage

Adding Symbol Instances to the Main Timeline See Figure 3-8 to view an arrangement of four filmstrips.

To continue creating the background effect, students will use instances of the symbol and then modify each instance to generate the look outlined on the storyboard.

Figure 3-8: Four instances of the filmstrip symbol transformed and arranged on the Stage

ARRANGING INSTANCES OF THE FILMSTRIP SYMBOL The task of arranging the filmstrip instances as in Figure 3-8 can be simplified with a divide-and-conquer approach. Students can first position the two rear elements as if constructing a flattened letter X. When the two rear objects are in place, the two forward strips can be positioned with the guide of a tepee outline in mind.

Editing Symbols See Figure 3-13 to view the result of using a symbol to update film_cells. Macromedia Flash 8 Flash Project 1-12

When a symbol is modified, Flash updates all instances of the symbol. In this section, students will change the gradient fill of the film_cell symbol and update all instances that appear on the Stage.

Figure 3-13: All symbol instances change automatically Lesson 4: Animating Shapes, Symbols, and Text Lesson 4 Introduction

The animated billboard storyboard calls for motion in the countdown graphic, the strips of film showing and illuminating, and the theater location text entering. In Flash, motion is created by changing the content of successive frames along the Timeline. In this lesson, students will animate shapes, text, and symbols by using both frame-by-frame animation and tweening.

Creating Frame-by-Frame Animation

The countdown is an example of a frame-by-frame animation. In frame-by-frame animation, a series of frames represents an object as it changes over time. Keyframes indicate a change, while a modified object implements the change. In this section, students use four frames to create a 4- step countdown animation. The countdown number lies on a white circle divided into four quadrants. As the count moves from 4 to 1, a unique quadrant is highlighted with a distinct color. After constructing the countdown animation, students press Enter (Windows) or Return (Macintosh) to play the movie. Macromedia Flash 8 Flash Project 1-13

Figure 4-4: Each instance of the countdown displays a different color and number

Animating Symbols with Motion Tweens See Figure 4-9 for a representation of a tween on the Timeline.

The background effect of the animated billboard has a gradient look that gradually shows and illuminates filmstrips as the movie plays. The technique for transforming the background from opaque to semitransparent is known as tweening (from inbetweening, a traditional animator's term). Motion tweens are used to move text across the screen, animate grouped objects, or animate between two instances of a symbol that have different properties. In this section, the third approach will be applied. Students will create a motion tween that makes the gradient layer translucent, thereby revealing the backlight and film layers.

Figure 4-9: Motion tweens are represented by light blue shading

Animating Text with Motion Tweens See Figures 4-11 and 4-12 to view the addition of new text to the animated billboard.

As the storyboard shows, the location of the festival animates into view after the countdown occurs. Students can animate this text by using motion tweens. Two new text blocks are required: one for the event text and one for the location and date text.

Macromedia Flash 8 Flash Project 1-14

Figure 4-11: Event text Figure 4 -12: Location and date text

Creating Shape Tweens See Figures 4-24 and 4-27 to view two stages in the construction of shape tweens.

Flash allows shape tweening to animate between two shapes on the Stage. By moving the position of the shape, the user creates the illusion of motion. By altering the shape itself, the user can create the illusion of one shape morphing into another shape. To fulfill the requirements of the storyboard, students will create shape tweens that reveal the message and morph into colored borders. The effects require two stage curtains and two borders.

Figure 4-24: Mid position of the orange Figure 4-27: Green and blue inner border curtain animation

Troubleshooting MANAGING LAYERS Tip As new layers are added to a project, the Timeline will progressively crowd out the document window. To better manage the workspace, students can organize the Layers panel using a small set of folders. For each new folder, students locate a destination layer and then click the folder icon at the bottom of the panel. Next, they move layers into each new folder from top to bottom to retain their original ordering.

Testing a Flash Document Macromedia Flash 8 Flash Project 1-15

Testing allows the user to see potential errors with positioning and timing of objects. The user can test an SWF file by viewing it in Flash Player. To view the movie in the Flash Player, the user selects Test Movie from the Control menu.

Controlling the Timeline with ActionScript See Figure 4-30 to view the script pane of the Actions panel.

Students can control the looping of the billboard by directly adding ActionScript. By using the Flash Actions panel, however, students can add basic controls to movies without knowing a single line of code. The most basic action in Flash is the stop action, used to prevent a movie from advancing to the next frame. A movie encountering a stop action in the last frame of the Timeline will be prevented from looping back to the beginning and repeating. In this section, students use the Actions panel to add a stop action to the animated billboard timeline.

Figure 4-30: Actions panel Lesson 5: Making the Animated Billboard Accessible

The animated billboard was designed as a visual presentation with descriptive text and no audio. To make this information available to people with limited vision, students will incorporate text for a screen reader using the Flash Accessibility panel. Understanding Accessibility

A Flash document is considered accessible when it can be used by someone with a disability. Disabilities are broad and difficult to categorize, but according to the U.S. Census Bureau, one out of every five people in the United States has some sort of disability. Severe disabilities include visual, hearing, cognitive, or physical impairment. By incorporating accessibility features into a site, students can greatly improve site usability for the disabled.

Making a Flash Document Accessible See Figure 5-1 to view the Accessibility panel for the entire document.

Students need to provide descriptive text for a screen reader to translate into a spoken description. The screen reader should detect and read the most important information about the upcoming film Macromedia Flash 8 Flash Project 1-16 festival. The way to handle this is to make child objects inaccessible to screen readers. To make the entire animated billboard accessible, students should ensure nothing on the Stage is selected. They may then work in the Accessibility panel to add a description that will be visible to screen readers.

Figure 5-1: Accessibility panel for the entire document.

Teaching Tip CONDENSING INFORMATION FOR THE SCREEN READER The Accessibility panel description of the Digital Impact Film Festival should capture all critical information about the upcoming event. Test the text with your students. Read them the event information and then solicit their feedback. Were they interested by the announcement? Did they clearly understand how they could acquire event tickets? Can they offer any guidelines for how to create such descriptions for future projects?

Lesson 6: Publishing Flash Elements for the Web

In this lesson, students preview the animated billboard in a browser, adjust the publish settings, and publish the document for viewing on the Web.

Previewing a Flash Document

When the user previews the animated billboard in a browser, Flash generates a new HTML file and plays the SWF file in a browser of choice. In this section, students are instructed to preview the animated billboard. Publishing a Flash Document See Figure 6-3 to view the HTML tab of the Publish Settings dialog box.

Although the user may produce a variety of file types, to view Flash content on the Web, the SWF file must be output and added to an HTML page. Students should view the contents of each tab. This movie will be added to an existing HTML page, so students will not need to generate a Macromedia Flash 8 Flash Project 1-17 page for the SWF file. To publish the SWF file only, students can go the Formats tab and deselect the HTML option.

Figure 6-3: HTML tab on the Publish Settings dialog box

Teaching Tip PUBLISHING IN A STATIC IMAGE FORMAT Flash enables the user to publish images in GIF, JPEG, and PNG formats. The image published is based on the layer and frame selections on the Timeline.

Discussion TWEE N ING VERSUS FRAME-BY-FRAME ANIMATION Motion and shape tweening offer sophisticated movement effects with minimal effort. However, they cannot entirely replace the more labor-intensive movement effect, frame- by-frame animation. Discuss the differences between these two categories of animation. How does the regularity of object change influence the selection of an animation technique? Macromedia Flash 8 Flash Project 1-18

Key Terms  Accessibility – Web site usability features for individuals with disabilities.

 ActionScript - sophisticated scripting language that allows people with programming expertise to develop powerful Web applications by using Macromedia Flash.

 Animated billboard - combines images and text that incorporate motion to achieve a particular goal of the Web site.

 Child object - any object stored in a movie, or within an individual movie clip symbol.

 Design document - form providing general information about the structure and content of a Web site. It also expresses the goals, purpose, and audience for a site.

 Frame-by-Frame animation - movement created by manually changing the content of successive frames along the Timeline.

 Instance - copy of a symbol located on the Stage.

 Library - storage area for the current document.

 Screen-reader - software enabling site visitors to hear a description of screen events.

 Storyboards - series of panels that use images and words to specify how action will unfold on the Stage.

 Symbol - a generic graphic, button, or movie clip created once in Flash.

 Tweening – Motion created by Flash between the first and last keyframes of an animation.

 Web-safe palette - range of colors that will display properly in any Web browser. Macromedia Flash 8 Flash Project 1-19