Macromedia Flash 8 Flash Unit 3-1

Unit 3

Macromedia Flash 8

Table of Contents

Objectives

File Listing...... 2

Overview...... 2

Troubleshooting Tip: Preliminary Tasks for Unit 3...... 2

Getting to Know Macromedia Flash 8...... 2

Teaching Tip: Adjusting the Screen Layout...... 6

Identifying Rich Media Content on the Web...... 6

Teaching Tip:Examining Web Sites Developed Using Flash...... 8

Macromedia Flash 8 Projects...... 8

Teaching Tip:Project Preparation...... 8

Discussion Topic: A Prudent Use of Sound and Motion...... 9

Key Terms:...... 9

Objectives

  • Follow a design document and storyboard to define the properties of an animatedbillboard.
  • Draw and animate simple shapes and text to create an animated billboard for a Web site.
  • Follow a design document and storyboard to produce an online documentary.
  • Use Flash to simulate film-style techniques and effects to tell a story.
  • Create user-friendly navigation and features that provide ongoing feedback and putthe audience in control of their online experience.
  • Follow a design document and storyboard to produce an online gallery of video clips.
  • Create Flash Video (FLV) files and prepare video for display on the Web.
  • Learn methods for improving Flash performance by storing and accessing contentoutside the main FLA document.
  • Ensure that your Flash documents are readable, usable, and accessible for the entiretarget audience.

File Listing

Location / Provided Filename / Saved Filename
Getting to Know Macromedia Flash 8 / Animated_Billboard.fla / Animated_Billboard.fla

NOTES

Overview

Macromedia Flash 8 provides tools to develop animated text, graphics, advanced interactivity, rich content for mobile devices, and high-quality video for Web sites. Three Unit projects presentstudents with the rich media design capabilities of Flash, as well as the skills to implement designs. To prepare for these projects, students should first familiarize themselves with rich media design concepts and the Flash 8 development environment.

Troubleshooting Tip / Preliminary Tasksfor Unit 3
Before starting Unit 3, make sure all student computers have QuickTime 7 or later installed.

Getting To Know Macromedia Flash 8

Understanding Macromedia Flash

With Macromedia Flash, users can create high quality content, such as animation, synchronized sound, engaging interactivity, film-style transitions, and high-quality Web video. Moreover, the rich media content created with Flash technology is compressed for efficient downloading.

What are Vectors and Bitmaps?

See Figure 1 for a comparison of bitmap and vector images.

Bitmap (raster) images are the most common graphics found on the Web. A bitmap file, such as GIF or JPEG, represents an image as a matrix of pixels. There are three major disadvantages associated with bitmaps:

  • A bitmap stretched beyond its intended size appears pixilated (distorted).
  • As image size grows, the supporting file size grows and download times slows.
  • A bitmap image on the Web is reproduced on the local computer pixel by pixel.

Bitmaps may be imported into Flash and optimized for use in a finished document. They are the preferred file format for photographs, and other image types requiring high resolution.

Theuser createsa new image in Flashasa vector.Vector graphics contain a set of commands and image specifications. When a computer loads a vector graphic, it constructs the image using the instructions encoded in the vector. Vector graphics are small in size, scale well, and allow for advanced editing and modification.

Compare bitmaps and vector graphics displayed in Figure 1.

Figure 1: Bitmap and vector images

Streaming Content

Flash improves site usability by streamingcontent to the viewer’s computer, which means that animation can begin before a Flash file has completely downloaded. By providing a steady flow of information during the download process, streaming content maintains viewer interest.

Macromedia Flash Player

A requirement for viewing Flash content on the Web is having Macromedia Flash Player installed. If there is a need to deliver Flash content to people without an Internet connection,a Web browser, or Flash Player, theFlash document can be turned into a projector. A projector is a stand alone executable version of a movie. Macromedia Flash also includes a stand alone version of Flash Player.

Flash File Types

See Figure 2 for Flash file type icons and Table 1 for descriptions.

The term “Flash” isused to describe both the authoring environment and the rich media files produced from aFlash authoring document. The two main file types associated with Flash are FLAand SWF. The FLA file is the source document used to create and edit content. When finished authoring content in the FLA document, the user can publishthe SWF file, which can be viewed on the Web. The SWF file cannot be edited.

Figure 2: Flash File Types

Finding Your Way Around the Flash Interface

See Figure 3 for a view of the Flash 8 interface.

The main components of the Flash interface are the Stage, Timeline, workspace, panels, Tools panels, and Property inspector. The development environment in Flash is based on a movie metaphor. The user creates scenes on a Stage and these scenes play out frame-by-frame along a Timeline. The workspace is the gray area surrounding the stage. To create, place, and modify graphics, select a tool from the Tools panel. Other panels help the user view, organize, and modify document elements. The Property inspector reveals the properties of selected objects for viewing and editing.

Figure 3: Flash interface

The Timeline

See Figure 4 for a view of the Flash timeline.

The Timeline is used to organize and control the movie’s contents by specifying when each object appears on the Stage. When the Flash movie is played, a playhead moves from frame to frame on the Timeline, causing each frame to appear on the Stage in a linear sequence. By stacking objects on separate layers, the usercan create the illusion of depth and gain more control over each object on the Stage.

Figure 4: Flash timeline

The Tools Panel

See Figure 5 for a view of the Tools panel.

The Tools panel contains tools for drawing shapes, adding text, modifying objects, and controlling color. Tool functions can be modified using the Options section at the bottom of the panel.

Figure 5: Tools panel

Opening a New Document and Selecting a Layout

In this introduction, studentscreate a new document. They gainsfamiliarity with the basic layout of the window by organizing panels. Students then open and view an example of a completed Flash project. The first step to creating new Flash content is to open a new document (FLA file).

Each new Flash document opens with one empty layer on the Timeline and one blank keyframe for adding content to the Stage. The user can arrange the document window for easy access to the tools and features relied on most. The user can also modify the document itself according to design specifications by adding additional layers and setting document properties.

Arranging the Flash Window

See Figure 7 for a view of the Show/Hide button.

There a variety of ways to setup the Flash window.To collapse a panel, the user clicks the title of the panel, such as Library. To restore a collapsed panel, the user also clicks the title. Panel groups are manipulated differently in Windows and Macintosh. In Windows, the user clicks the Show/Hide button to hide a group of docked panels. To restore a group of hidden panels, the user clicks Show/Hide again. The Show/Hide button is not available in Macintosh. To show or hide a panel group in Macintosh, the user opens the Options menu for the panel and selects a command.The user may open new panels by clicking the panel name on the Window menu. One way to quickly adjust the magnification of the window is to use the Magnification pop-up menu.

Figure 7: Show/Hide button

Teaching Tip / Adjusting the Screen Layout
Do your students see eye to eye on how the interface should be laid out? Perhaps some see Flash’s interface as a design tool, while others see it as a development environment. Spend a few minutes having the class go from monitor to monitor to examine how their peers have chosen to layout the screen. In addition, discuss how a larger screen or the use of 2 monitors may assist in the Flash design and development process.

Viewing a Completed Flash Document

Students open a completed document and view the Timeline, Layers, and Stage to see how these features work together to produce a finished movie. After clicking File and Open, the student navigates to the location of the data files and then double-clicks Animated_billboard.fla. After clicking Control on the menu bar, the student clicks Play. Students should experiment with other features, such as moving the playhead to another frame.

Identifying Rich Media Content on the Web

A Flash developer will often need to determine when to use Flash and when it is best to restrict a site to simple text and static images. For the purpose of this training, rich media contentrefers to the use of animation, sound, or video on a Web page, or Web content modified by visitor interaction.

Deciding When to Use Rich Media Content

See Table 4 for a description of Best Practices and Things to Avoid

Although sound and motion on a Web page can powerfully influence a targeted audience, static HTML text and images are sometimes preferred. When deciding whether content should be implemented using rich media, the following questions should be asked:

  • Does the content require illustration of change over time?
  • Does the message dependon motion, sound, or video?
  • Is synchronized audio necessary?
  • Is the purpose of the content to attract attention?
  • Is the content intended to entertain?
  • Will the content present cross-platform browser issues?
  • Does the content require unique fonts that visitors might not have installed?

A positive response to one or more questions points to the need for rich media content, the type that can be produced with Macromedia Flash.

Examples of Rich Media Content on the Web

By analyzing and evaluating Web sites, the user can build and maintain good development practices, prevent common mistakes, and get inspiration for future designs. Several examples illustrating the use of rich media content on the Web follow.

Virtual Tours

Virtual tours use Flash to create a virtual experience of a particular location or destination.

Interactive Personalized Shopping Experiences

Macromedia Flash transforms Web site product searches into a rewarding interactive shopping experience.

Hybrid HTML Sites Enriched with Flash Elements

Some sites use Macromedia Flash to add just the right amount of rich media, including Flash animation and video, to an e-commerce site built by primarily using HTML pages.

Examining Web Sites Developed Using Flash
An interesting way to introduce Flash is to examine a few Flash-specific Web sites available from the Macromedia Web site, . Have your students assess the proportion of static to dynamic content. Based on first impressions, how do the students rate the use of sound and/or motion? It would be instructive to revisit these sites and their answers after the three Unit 3 projects have been completed.

Macromedia Flash 8 Projects

This unit contains three projects that develop the skills of designing and implementing rich media content.

Project 1: Animated Billboard

Students follow a design document and storyboard to produce an animated billboardfor a client’s Web site.

Project 2: Digital Documentary

Students incorporate rich graphics, photographs, text, and sound to tell a brief history of the Paradise Beach Boardwalk amusement park.

Project 3: Video Gallery

Students produce a video gallery featuring short video clips from recent surfingevents held at the world-famous surfing location knownas Mavericks. The client, Blue Mountain Riders, will host the video gallery on their Web site.

Teaching Tip / Project Preparation
The Flash work environment may initially appear daunting, but is quite user friendly. Before commencing on project work, have students experiment with simple editing. For example, have students open and revise a sample graphics file, such as drop_shadow_dog.fla. The Property inspector presents object attributes that can be quickly altered, such as size and background.
Discussion Topic / A Prudent Use of Sound and Motion
Judging the appropriate context for adding rich media content can be a challenging task. Visit a site hosted by a major news outlet and determine where and when rich media is used to convey a message. Do any tentative guidelines emerge from the activity? How do these compare to the guidelines presented in Table 4?
Key Terms /
  • Bitmap -image made up of a fixed set of pixels; e.g., JPEG or GIF.

  • Frames - the components of an animation, like the frames of a movie.

  • Layers - organizational levels of a document.

  • Pixel (picture element)- discrete unit of color information in an image.

  • Pixilation - image distortion due to stretching a bitmap beyond it intended shape.

  • Projector – stand alone executable version of a Flash movie.

  • Rasterimage - another term for bitmap.

  • Rich media content- animation, sound, video, or interactive content on a Web page.

  • Stage - place in design window where text, images, and animations appear.

  • Streaming content - animation viewed while supporting image files are downloaded.

  • Timeline – used to control the elements of your movie over time.

  • Workspace – gray background area surrounding the stage.