6-1 obj copyright 2003, paradigm publishing inc. animating using symbols and masks and publishing...

6-6-11OBJOBJ

Copyright 2003, Paradigm Publishing Inc.

Animating Using Symbols and Masks and Publishing

Flash Movies

Macromedia FlashMacromedia FlashDesign & ApplicationDesign & Application

6-6-22OBJOBJ


Create and use an animation in a movie clip symbol. Edit instances of a movie clip symbol. Create and use an animation in a graphic symbol. Describe the differences between animating using

movie clip symbols and animating using graphic symbols.

Duplicate and edit a symbol to reuse existing objects. Assign a name to an instance of a symbol. Stop a movie clip playback using ActionScript. Convert an existing animation to a movie clip symbol. Create an animation using a mask layer. Understand the test environment within Flash. Simulate download performance for various

bandwidths.

Performance ObjectivesPerformance Objectives

6-6-33OBJOBJ


Optimize a movie before publishing. Choose appropriate Flash Player options in which to

publish a movie. Choose appropriate HTML options in which to

publish a movie. Use Publish Preview to view the published movie

within a browser window. Publish a movie. Describe the HTML tags that instruct the browser to

display a Flash movie. Publish and export a movie in formats other than

Flash Player format. Publish a document as a self-running standalone

movie. COMMANDS REVIEW

Performance ObjectivesPerformance Objectives

6-6-44OBJOBJ


Creating Animations Using Creating Animations Using SymbolsSymbols

Creating Animations Using Creating Animations Using SymbolsSymbols

Advantages: The main movie Timeline is less cluttered

with layers and frames. Movie clips provide continuous movement

during the main movie and can continue after the main movie has completely played back.

Movies clips can be reused within the same movie or reused in other movies.

Reused symbols within a movie minimize file size.

Animations that include movie clip symbols must be previewed in the Flash Player.

Animations that include movie clip symbols must be previewed in the Flash Player.

6-6-55OBJOBJ


Creating Animations Using Creating Animations Using Symbols…/2Symbols…/2

Creating Animations Using Creating Animations Using Symbols…/2Symbols…/2

IInsert, nsert, NNew Symbol or Ctrl + F8ew Symbol or Ctrl + F8

selectMovie ClipBehavior

key a name

Creating a movie clip symbol animation involves the same process as creating animations on the main movie Timeline with the exception that you

are doing so in symbol editing mode.

6-6-66OBJOBJ


Editing Instances of a Movie Editing Instances of a Movie Clip SymbolClip Symbol

Editing Instances of a Movie Editing Instances of a Movie Clip SymbolClip Symbol

drag instances of thesymbol to the stage

scale, rotate, position,and change color orsymbols as desired

6-6-77OBJOBJ


Animating Using a Graphic Animating Using a Graphic SymbolSymbol

Animating Using a Graphic Animating Using a Graphic SymbolSymbol

The main difference between animating using a graphic symbol and animating using a movie clip symbol resides in the way in which Flash treats the symbol's Timeline during movie playback a movie clip's Timeline is independent of

the main movie and uses only one frame a graphic symbol's Timeline must be

synchronized with the main movie Timeline with respect to the number of frames that must be inserted

Graphic symbol animations cannot include sound or interactivity

6-6-88OBJOBJ


Animating Using a Graphic Animating Using a Graphic Symbol…/2Symbol…/2



selectGraphicBehavior

key a name

After you have completed creating the symbol, exit symbol editing mode, and

insert an instance in the document.

6-6-99OBJOBJ




insert the frames requiredfor the graphic symbol animation

6-6-1010OBJOBJ


Duplicating SymbolsDuplicating SymbolsDuplicating SymbolsDuplicating Symbols

A new symbol can be created by duplicating an existing symbol and

then editing the duplicated symbol's content in symbol editing

mode.

right-click existing symboland click Duplicate

key a new name and changebehavior if necessary

6-6-1111OBJOBJ


Duplicating Symbols…/2Duplicating Symbols…/2Duplicating Symbols…/2Duplicating Symbols…/2

you can also right-click an instance of the symbolon the stage and then click Duplicate Symbol

assign a name

6-6-1212OBJOBJ


Stopping Playback of a Movie Stopping Playback of a Movie Clip Symbol AnimationClip Symbol Animation

Stopping Playback of a Movie Stopping Playback of a Movie Clip Symbol AnimationClip Symbol Animation

Stop a movie clip playback by inserting in the same layer as the movie clip symbol either a blank keyframe a keyframe with new content a keyframe with ActionScript statements

that stop the movie clip

6-6-1313OBJOBJ


Stopping Playback of a Movie Stopping Playback of a Movie Clip Symbol Animation…/2Clip Symbol Animation…/2


Assign a name to each instance of a movieclip symbol to allow you to create actions

directed at a specific target object.

6-6-1414OBJOBJ




WWindow, indow, AActions or F9ctions or F9

Follow the sequence:- Objects - Movie - MovieClip - Methods - Stop

click the Insert Target button tochoose the instance name for themovie clip that you want stopped

6-6-1515OBJOBJ




The event handler onClipEvent (load) { is required at the beginning of the ActionScript to stop a movie clip.

Two movie clips arethe target objects forthe stop action.

6-6-1616OBJOBJ


Converting an Existing Animation Converting an Existing Animation to a Movie Clip Symbolto a Movie Clip Symbol

Converting an Existing Animation Converting an Existing Animation to a Movie Clip Symbolto a Movie Clip Symbol

An existing animation in the main movie Timeline can be converted to a movie clip

symbol by selecting and cutting or copying the frames and then pasting them in symbol

editing mode.

EEdit, Cdit, Coopy Frames or Ctrl + Alt + Cpy Frames or Ctrl + Alt + C

OROR

EEdit, Cut Fradit, Cut Frammes or Ctrl + Alt + Xes or Ctrl + Alt + X

select the frames you want to convertselect the frames you want to convert

EEdit, Select All Framdit, Select All Framees or Ctrl + Alt + As or Ctrl + Alt + A

OROR

EEdit, Paste dit, Paste FFrames or Ctrl + Alt + Vrames or Ctrl + Alt + V

6-6-1717OBJOBJ


Animating Using a Mask LayerAnimating Using a Mask LayerAnimating Using a Mask LayerAnimating Using a Mask Layer

Animating the objects on the mask layer can simulate effects

during a move.

Animating the objects on the mask layer can simulate effects

during a move.

create atween or

frame-by-frameanimation

unlock the masklayer to edit

6-6-1818OBJOBJ


Using the Test Environment Using the Test Environment Before Publishing a MovieBefore Publishing a Movie

Using the Test Environment Using the Test Environment Before Publishing a MovieBefore Publishing a Movie

Testing is a critical component of Flash development should be performed on a regular basis

Testing within the authoring environment is limited cannot view movie clips cannot test many ActionScript commands

6-6-1919OBJOBJ


Viewing the Movie in the Viewing the Movie in the Testing EnvironmentTesting Environment

Viewing the Movie in the Viewing the Movie in the Testing EnvironmentTesting Environment

CControl, Test ontrol, Test MMovie or Ctrl + Enterovie or Ctrl + Enter OROR

CControl, Test ontrol, Test SScene or Ctrl + Alt + Entercene or Ctrl + Alt + Enter

-exports the current movie or scene using thedefault options in the Publish Settings dialog box

swf file is created

additional menu options

6-6-2020OBJOBJ


Controller ToolbarController ToolbarController ToolbarController Toolbar

WWindow, Tindow, Tooolbars, Colbars, Coontrollerntroller

-for easy access to playback controls while

conducting frequent tests

6-6-2121OBJOBJ


Using the Bandwidth ProfilerUsing the Bandwidth ProfilerUsing the Bandwidth ProfilerUsing the Bandwidth Profiler

Bandwidth the amount of data that can be transmitted

from a server to a user's computer within a fixed time interval

usually expressed in terms of bits per second (bps)

also called the transmission rate Broadband

connection that is capable of transmitting a large amount of data within a short period

Narrowband connection transmits a smaller amount of

data at a slower speed

6-6-2222OBJOBJ


Using the Bandwidth Using the Bandwidth Profiler…/2Profiler…/2

Using the Bandwidth Using the Bandwidth Profiler…/2Profiler…/2

Allows you to view statistics about the movie's download performance at a specific speed.

VView, iew, BBandwidth Profiler or Ctrl + Bandwidth Profiler or Ctrl + BMovie statistics

Frames above safetyline will cause time lags.

Safety line

You can also choose to view the bar graph frame by frame by clicking View, Frame by Frame.

You can also choose to view the bar graph frame by frame by clicking View, Frame by Frame.

indicates how longthe user will have

to wait afterdownloading starts

and before the movie begins playing

6-6-2323OBJOBJ


Testing Using Download Testing Using Download Speed StatisticsSpeed Statistics

Testing Using Download Testing Using Download Speed StatisticsSpeed Statistics

Flash tests download speed using estimates based on a typical Internet connection actual download time will vary depending

on the volume of Internet traffic at the time the user requests movie playback

Present research indicates 80 percent of American households are connected to the Internet using a dial up connection means testing a movie using the 56K and

28.8 options is a minimum testing standard

6-6-2424OBJOBJ


Testing Using Download Testing Using Download Speed Statistics…/2Speed Statistics…/2

Testing Using Download Testing Using Download Speed Statistics…/2Speed Statistics…/2

DDebug, click desired speedebug, click desired speed

you can add up to threeof your own customizeddownload speed settings

for testing

6-6-2525OBJOBJ


Optimizing the MovieOptimizing the MovieOptimizing the MovieOptimizing the Movie

Bitmap Graphics avoid animating bitmaps compress to reduce file size consider alternatives

Vector Graphics Pencil tool lines require less space minimize use of line types other than solid group drawn objects optimize curves

Gradients and Transparency use gradient fills sparingly an object with an alpha effect plays back at

a slower rate

6-6-2626OBJOBJ


Optimizing the Movie…/2Optimizing the Movie…/2Optimizing the Movie…/2Optimizing the Movie…/2

Symbols convert an object to a symbol and then

place symbol instances where it needs to be duplicated

Animated Symbols create whenever possible instead of graphic

symbols Sounds

compress to reduce file size delete unnecessary sound effects and files

Keyframes remove unnecessary keyframes motion tweened frames use less space than

frame-by-frame animations

6-6-2727OBJOBJ


Optimizing the Movie…/3Optimizing the Movie…/3Optimizing the Movie…/3Optimizing the Movie…/3

If an optimized movie file is still experiencing a time lag, consider adding a simple animation before the problem frame to provide a time buffer in which the content can be downloaded in the background.

A preloader is an animation at the beginning of a movie that keeps a user amused while content is downloaded.

6-6-2828OBJOBJ


Simulating the Internet Simulating the Internet Connection SpeedConnection Speed

Simulating the Internet Simulating the Internet Connection SpeedConnection Speed

VView, iew, SShow Streaming or Ctrl + Enterhow Streaming or Ctrl + Enter

-simulates a Web connection download at

the specified modem speed

-the streaming progress statistics are displayed in the Loaded section in

the left pane of the Bandwidth Profiler

6-6-2929OBJOBJ


Publishing a MoviePublishing a MoviePublishing a MoviePublishing a Movie

Exporting the file makes a copy of the movie in the default drive and folder in Flash Player file format (swf) and any other formats that you specify

Exported files are then copied to a Web server and linked to a Web page

Two-step process:1.Select the file formats and options in the

Publish Settings dialog box.2.Use the Publish command to create the

files.

6-6-3030OBJOBJ


Choosing Publish Settings Choosing Publish Settings for a Flash Player Filefor a Flash Player File

Choosing Publish Settings Choosing Publish Settings for a Flash Player Filefor a Flash Player File

FFile, Publish Settings or Ctrl + Shift + F12ile, Publish Settings or Ctrl + Shift + F12

options

6-6-3131OBJOBJ


Flash Player Publish Flash Player Publish Settings OptionsSettings Options

Flash Player Publish Flash Player Publish Settings OptionsSettings Options

Version to publish using an earlier version of the Flash Player

Load Order set the order in which layers within the first frame are

loaded as the data is streamed to the user's computer Generate size report

to have Flash generate a text file with information about the movie

Protect from import to make sure other people cannot import the swf file back

into Flash Omit Trace actions

to prevent Flash displaying the information from trace actions in an Output window

Debugging Permitted to allow remote debugging of a movie while it plays over

the Web

6-6-3232OBJOBJ


Flash Player Publish Flash Player Publish Settings Options…/2Settings Options…/2Flash Player Publish Flash Player Publish Settings Options…/2Settings Options…/2

Compress Movie selected by default when Flash Player 6 is the version

option Password

only active if Protect from import or Debugging Permitted is turned on

JPEG Quality drag the slider or key a value between 0 and 100 to set the

default value for compressing bitmaps upon export Audio Stream

to change the default compression options for streamed sounds

Audio Event to change the default compression options for event

sounds Override sound settings

causes Flash to override any individual compression options

6-6-3333OBJOBJ


Choosing HTML Settings for Choosing HTML Settings for a Flash Player Filea Flash Player File

Choosing HTML Settings for Choosing HTML Settings for a Flash Player Filea Flash Player File


options

Flash automatically generates the HTML page with the necessary tags and codes.

6-6-3434OBJOBJ


HTML Publish Settings HTML Publish Settings OptionsOptions

HTML Publish Settings HTML Publish Settings OptionsOptions

Template to choose a template upon which to base the HTML code

Dimensions to specify the values for the width and height of the movie

Paused At Start click if you do not want the movie to begin playing until

the user clicks a button Loop

deselect if you want the movie to stop after the last frame is played

Display Menu deselect to have the shortcut menu display only two

options: Settings and About Macromedia Flash Player 6 Device Font

fonts will be substituted in text that is not animated Quality

settings that determine the movie's playback speed and quality of images

6-6-3535OBJOBJ


HTML Publish Settings HTML Publish Settings Options…/2Options…/2

HTML Publish Settings HTML Publish Settings Options…/2Options…/2

Window Mode Window: movie plays within its own window Opaque Windowless: other elements on the Web page

move behind the Flash movie and do not show through Transparent Windowless: other elements on the Web page

move behind the Flash movie with those objects showing through any transparent areas within the movie

HTML Alignment how to position the movie within the browser window

Scale determines how the movie is displayed within the

boundaries of the browser window Flash Alignment

options for positioning the movie Show Warning Messages

if you choose settings that conflict, a warning message displays that provides you with the opportunity to correct the problem

6-6-3636OBJOBJ


Previewing the Movie in the Previewing the Movie in the Browser WindowBrowser Window

Previewing the Movie in the Previewing the Movie in the Browser WindowBrowser Window

FFile, Publish Previewile, Publish Preview

click the format inwhich you wish topreview the movie

6-6-3737OBJOBJ


Publishing the MoviePublishing the MoviePublishing the MoviePublishing the Movie

FFile, Puile, Pubblish or Shift + F12lish or Shift + F12

progress barindicates status

of publishingprocess

When publishing is complete, copy the swf and html files to the Web

server and create a link to the HTML page to make the movie accessible

from the Web.

6-6-3838OBJOBJ


Viewing the HTML CodeViewing the HTML CodeViewing the HTML CodeViewing the HTML Code

The HTML generated code created by Flash includes the commands necessary for the browser to open the Flash Player and launch the movie.

Tags are identified between angle brackets (< >). Internet Explorer uses the <OBJECT> tags and

Netscape Navigator uses the <EMBED> tags. You can open the HTML page in any text editor program

such as Notepad.

6-6-3939OBJOBJ


Using HTML TemplatesUsing HTML TemplatesUsing HTML TemplatesUsing HTML Templates

Flash provides several HTML templates with the necessary code to display movies using a variety of options including detecting an earlier version of the Flash Player and providing alternative images if the Flash

Player is not found.

6-6-4040OBJOBJ


Publishing in Other FormatsPublishing in Other FormatsPublishing in Other FormatsPublishing in Other Formats


formats

-to accommodate users on the Web who might not have the Flash Player installed

6-6-4141OBJOBJ


Formats for Publishing Flash Formats for Publishing Flash MoviesMovies

Formats for Publishing Flash Formats for Publishing Flash MoviesMovies

Flash (.swf) to create the file that opens in the Flash Player

HTML (.html) to generate the code that the browser will use to load and

launch the movie GIF Image (.gif)

to use as an alternative for the user who does not have the Flash Player installed

JPEG Image (.jpg) to produce the movie as a compressed bitmap without

animation or interactive frames PNG Image (.png)

to create a cross-platform bitmap Windows Projector (.exe)

to create a standalone copy Macintosh Projector

to create a standalone copy QuickTime (.mov)

to view with the QuickTime player

Flash adds tabs to the Publish

Settings dialog box for each

format with which you have the ability to set

options.

6-6-4242OBJOBJ


Exporting in Other FormatsExporting in Other FormatsExporting in Other FormatsExporting in Other Formats

FFile, Export ile, Export MMovie or Ctrl + Alt + Shift + Sovie or Ctrl + Alt + Shift + S

-to export a movie to

another file format without

creating the HTML page




6-6-4343OBJOBJ


Exporting the Current Frame Exporting the Current Frame as an Imageas an Image

Exporting the Current Frame Exporting the Current Frame as an Imageas an Image

FFile, ile, EExport Imagexport Image

-to create an image file in

another format for the current

frame



frame

6-6-4444OBJOBJ


Commands ReviewCommands Review

How do you display the Actions panel?

WWindow, indow, AActions or F9ctions or F9

6-6-4545OBJOBJ



How do you display the Bandwidth profiler?

VView, iew, BBandwidth Profiler or Ctrl + Bandwidth Profiler or Ctrl + B

6-6-4646OBJOBJ



How do you display the Controller?

WWindow, Tindow, Tooolbars, Colbars, Coontrollerntroller

6-6-4747OBJOBJ



How do you copy frames?

EEdit, Cdit, Coopy Frames or Ctrl + Alt + Cpy Frames or Ctrl + Alt + C

6-6-4848OBJOBJ



How do you cut frames?

EEdit, Cut Fradit, Cut Frammes or Ctrl + Alt + Xes or Ctrl + Alt + X

6-6-4949OBJOBJ



How do you create a movie clip or graphic symbol?


6-6-5050OBJOBJ



How do you export the current frame as an image?

FFile, ile, EExport Imagexport Image



frame



frame

6-6-5151OBJOBJ



How do you export a movie in another format?

FFile, Export ile, Export MMovie or Ctrl + Alt + Shift + Sovie or Ctrl + Alt + Shift + S







6-6-5252OBJOBJ



How do you paste frames?

EEdit, Paste dit, Paste FFrames or Ctrl + Alt + Vrames or Ctrl + Alt + V

6-6-5353OBJOBJ



How do you preview a published movie?

FFile, Publish Previewile, Publish Preview

6-6-5454OBJOBJ



How do you publish a movie?

FFile, Puile, Pubblish or Shift + F12lish or Shift + F12

progress barindicates status

of publishingprocess

6-6-5555OBJOBJ



How do you open the Publish Settings dialog box?


6-6-5656OBJOBJ



How do you select all frames?

EEdit, Select All Framdit, Select All Framees or Ctrl + Alt + As or Ctrl + Alt + A

6-6-5757OBJOBJ



How do you simulate download speed?

VView, iew, SShow Streaming or Ctrl + Enterhow Streaming or Ctrl + Enter

6-6-5858OBJOBJ



How do you test download speed?

DDebug, click desired speedebug, click desired speed

6-6-5959OBJOBJ



How do you test a movie?

CControl, Test ontrol, Test MMovie or Ctrl + Enterovie or Ctrl + Enter

6-6-6060OBJOBJ



How do you test a scene?

CControl, Test ontrol, Test SScene or Ctrl + Alt + Entercene or Ctrl + Alt + Enter

6-6-6161OBJOBJ


Using ActionScript and Creating Templates

Coming NextComing Next

6-1 obj copyright 2003, paradigm publishing inc. animating using symbols and masks and publishing...

Documents

movie clip symbols

published movie

movie clips

movie clip symbol animation

movie clip playback

movie clip behavior

main movie timeline

selfrunning standalone