© 2010 Delmar, Cengage Learning Chapter 6: Preparing and Publishing Movies.

© 2010 Delmar, Cengage Learning

Chapter 6:

Preparing and Publishing Movies

© 2010 Delmar Cengage Learning

Chapter 6 Lessons

1. Publish movies

2. Reduce file size to optimize a movie

3. Create a Pre-loader

4. Use HTML Publish Settings

© 2010 Delmar Cengage Learning

Preparing and Publishing Movies

• Using Flash– Generate files for delivering movies over

the Internet– Test movies to determine where the

problems might arise during download– Optimize movies

© 2010 Delmar Cengage Learning

Publish Movies

• Use Publish Settings feature to publish a movie

• Create a GIF animation• Create a JPEG image from a movie

© 2010 Delmar Cengage Learning

Using Publish Settings

• Publish generates files necessary to deliver movies on the Web

• By default, an .swf Flash file is created• HTML file instructs browser to play the Flash

file

© 2010 Delmar Cengage Learning

Fig. 1: Publish Settings Dialog Box

Selectedformats

Use to create a profile

Click to select a different profile

Click to open tab and select settings for the Flash format

© 2010 Delmar Cengage Learning

Fig. 2: Flash Tab

Click to open tab andselect settings for the HTML format

© 2010 Delmar Cengage Learning

Fig. 3: The GIF Tab

© 2010 Delmar Cengage Learning

Using Publish Preview

• Use Publish Preview from File menu– To publish a movie– To display a movie in your default browser

or in the Flash Player

– To view HTML, GIF, JPEG, PNG, Projector, and QuickTime files

© 2010 Delmar Cengage Learning

Fig. 4: Three planeLoop Files

The Flash document file

Your browser icon may vary

The Flash Player file

Your file extensions may not appear

The HTML document file

Your browser may be listed as the file type

Your file sizes may differ

© 2010 Delmar Cengage Learning

Create a JPEG Image froma Movie Frame• Click a Frame on the movie layer• Click File on the menu bar, then click Publish

Settings• Accept the default settings in the JPEG tab• Click Publish, and then click OK

© 2010 Delmar Cengage Learning

Reduce File Size to Optimize a Movie

• Play a movie stored on your computer in a browser

• Test the download time for a movie• Use the Bandwidth Profiler• Optimize a movie by reducing file size

© 2010 Delmar Cengage Learning

Testing a Movie

• Guidelines for optimizing movies– Use symbols and instances for every

element appearing in movie more than once – Use tweened animations instead of frame-

by-frame– Use movie clip symbols instead of graphic

symbols– Confine area of change to keyframe

© 2010 Delmar Cengage Learning

Testing a Movie

• Guidelines for optimizing movies– Use bitmaps as static elements only– Group elements– Limit fonts and font styles– Use gradients and alpha transparencies

sparingly

© 2010 Delmar Cengage Learning

Using the Bandwidth Profiler

• Test movie and determine which frames may create a pause during playback

• Set a simulated Internet connection speed for your target audience

© 2010 Delmar Cengage Learning

Fig. 7: The Bandwidth Profiler

Playback head at frame 38

Height of bar represents size of the contents for that frame

Information on selected frame (38)

Simulated bandwidth set in the View menu

© 2010 Delmar Cengage Learning

Using the Simulate Download Feature• When testing a movie, you can simulate

downloading Flash movies using different connection speeds:– Dial-up– Broadband (both DSL and cable)– T1

© 2010 Delmar Cengage Learning

Fig. 9: Selecting the Connection Speed for Simulated Download

Click even if already checked

© 2010 Delmar Cengage Learning

Optimize a Movie by Reducing File Size• Click Frame that causes pause during movie

playback• Reduce size of image on stage• Test movie and notice that the animation

does not pause

© 2010 Delmar Cengage Learning

Create a Pre-loader

• Prevents browser from playing a specified frame or series of frames until all frames have downloaded.

• Includes a simple animation that starts in Frame 1 and loops until rest of movie has been downloaded.

© 2010 Delmar Cengage Learning

Create a Pre-loader

• Indicates to viewer that movie is being loaded

• ActionScript code on separate layer checks if all movie frames are loaded– If not, a loop continues until last frame of

movie has been loaded

© 2010 Delmar Cengage Learning

Fig. 12: Completed Pre-loader with Animation and ActionScript

The preloader ActionScript code in

frames 1 and 10

The preloader animation plays in frames 1 through 10

The startofMovie frame label in frame 11

© 2010 Delmar Cengage Learning

Fig. 14: Actions Panel Displaying Pre-loader Script

The ActionScript that is to be developed will be applied to frame 1 on the preloaderScript layer

ScriptAssist feature is off

© 2010 Delmar Cengage Learning

Fig. 17: Bandwidth Profiler Showing Delay in Downloading Frame 48

Delay at download process at frame 48

Pre-loader animation plays until all frames are loaded

© 2010 Delmar Cengage Learning

Understanding HTML Publishing Options

• HTML file automatically generated during the publishing process

• HTML allows Flash movie to be displayed on the Web

© 2010 Delmar Cengage Learning

Understanding HTML Publishing Options

• The HTML document specifies:– Background color– Placement in the browser– Size– EMBED and OBJECT tags used to direct

browser to load Flash Player

© 2010 Delmar Cengage Learning

HTML Publishing Options

• Template• Dimensions• Playback• Quality• Window Mode• HTML Alignment• Scale• Flash Alignment

© 2010 Delmar Cengage Learning

Determining Movie Placement in a Browser• Movie displayed within movie window• HTML settings control placement• Publish Settings example:

– Movie window width: 400 pixels– Height: 100 pixels– HTML alignment: right– Flash alignment: right

© 2010 Delmar Cengage Learning

Fig. 19: Change HTML Publish Settings

This affects the size of the Flash movie window in the browser

This affects the placement of the Flash movie window in the browser. Default is center aligned.

This affects the placement of the Flash movie in the Flash movie window

© 2010 Delmar Cengage Learning

Fig. 20: Changing HTML Code

Your code may vary

© 2010 Delmar Cengage Learning

Chapter 6 Summary

1. Publish movies

2. Reduce file size to optimize a movie

3. Create a Pre-loader

4. Use HTML Publish Settings