Animating using symbols and masks and publishing flash movies
Download
1 / 61

Animating Using Symbols and Masks and Publishing Flash Movies - PowerPoint PPT Presentation


  • 284 Views
  • Uploaded on

Macromedia Flash Design & Application. Chapter 6. Animating Using Symbols and Masks and Publishing Flash Movies. Performance Objectives. 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Animating Using Symbols and Masks and Publishing Flash Movies' - issac


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Animating using symbols and masks and publishing flash movies l.jpg

Macromedia FlashDesign & Application

Chapter 6

Animating Using Symbols and Masks and Publishing Flash Movies


Performance objectives l.jpg
Performance Objectives

  • 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 objectives3 l.jpg
Performance Objectives

  • 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


Creating animations using symbols l.jpg
Creating Animations Using Symbols

  • 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.


Creating animations using symbols 2 l.jpg
Creating Animations Using Symbols…/2

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.

Insert, New Symbol or Ctrl + F8

select

Movie Clip

Behavior

key a name


Editing instances of a movie clip symbol l.jpg
Editing Instances of a Movie Clip Symbol

drag instances of the

symbol to the stage

scale, rotate, position,

and change color or

symbols as desired


Animating using a graphic symbol l.jpg
Animating Using a Graphic Symbol

  • 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


Animating using a graphic symbol 2 l.jpg
Animating Using a Graphic Symbol…/2

Insert, New Symbol or Ctrl + F8

select

Graphic

Behavior

key a name

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

insert an instance in the document.


Animating using a graphic symbol 3 l.jpg
Animating Using a Graphic Symbol…/3

insert the frames required

for the graphic symbol animation


Duplicating symbols l.jpg
Duplicating 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 symbol

and click Duplicate

key a new name and change

behavior if necessary


Duplicating symbols 2 l.jpg
Duplicating Symbols…/2

you can also right-click an instance of the symbol

on the stage and then click Duplicate Symbol

assign a name


Stopping playback of a movie clip symbol animation l.jpg
Stopping Playback of a Movie Clip 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


Stopping playback of a movie clip symbol animation 2 l.jpg
Stopping Playback of a Movie Clip Symbol Animation…/2

Assign a name to each instance of a movie

clip symbol to allow you to create actions

directed at a specific target object.


Stopping playback of a movie clip symbol animation 3 l.jpg
Stopping Playback of a Movie Clip Symbol Animation…/3

Window, Actions or F9

Follow the sequence:

- Objects

- Movie

- MovieClip

- Methods

- Stop

click the Insert Target button to

choose the instance name for the

movie clip that you want stopped


Stopping playback of a movie clip symbol animation 4 l.jpg
Stopping Playback of a Movie Clip Symbol Animation…/4

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

Two movie clips are

the target objects for

the stop action.


Converting an existing animation to a movie clip symbol l.jpg
Converting an Existing Animation to 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.

select the frames you want to convert

OR

Edit, Select All Frames or Ctrl + Alt + A

Edit, Copy Frames or Ctrl + Alt + C

OR

Edit, Cut Frames or Ctrl + Alt + X

Edit, Paste Frames or Ctrl + Alt + V


Animating using a mask layer l.jpg

create a

tween or

frame-by-frame

animation

Animating Using a Mask Layer

Animating the objects on the mask layer can simulate effects during a move.

unlock the mask

layer to edit


Using the test environment before publishing a movie l.jpg
Using the Test Environment Before 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


Viewing the movie in the testing environment l.jpg
Viewing the Movie in the Testing Environment

OR

Control, Test Movie or Ctrl + Enter

Control, Test Scene or Ctrl + Alt + Enter

-exports the current movie or scene using the

default options in the Publish Settings dialog box

swf file is created

additional menu options


Controller toolbar l.jpg
Controller Toolbar

-for easy access to playback controls while conducting frequent tests

Window, Toolbars, Controller


Using the bandwidth profiler l.jpg
Using 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


Using the bandwidth profiler 2 l.jpg
Using the Bandwidth Profiler…/2

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

View, Bandwidth Profiler or Ctrl + B

Movie statistics

indicates how long

the user will have

to wait after

downloading starts

and before the

movie begins playing

Frames above safety

line will cause time lags.

Safety line

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


Testing using download speed statistics l.jpg
Testing Using Download Speed 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


Testing using download speed statistics 2 l.jpg
Testing Using Download Speed Statistics…/2

Debug, click desired speed

you can add up to three

of your own customized

download speed settings

for testing


Optimizing the movie l.jpg
Optimizing 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


Optimizing the movie 2 l.jpg
Optimizing 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


Optimizing the movie 3 l.jpg
Optimizing 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.


Simulating the internet connection speed l.jpg
Simulating the Internet Connection Speed

View, Show 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


Publishing a movie l.jpg
Publishing 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:

    • Select the file formats and options in the Publish Settings dialog box.

    • Use the Publish command to create the files.


Choosing publish settings for a flash player file l.jpg
Choosing Publish Settings for a Flash Player File

File, Publish Settings or Ctrl + Shift + F12

options


Flash player publish settings options l.jpg
Flash Player Publish Settings 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


Flash player publish settings options 2 l.jpg
Flash Player Publish Settings 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


Choosing html settings for a flash player file l.jpg
Choosing HTML Settings for a Flash Player File

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

File, Publish Settings or Ctrl + Shift + F12

options


Html publish settings options l.jpg
HTML Publish Settings Options

  • 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


Html publish settings options 2 l.jpg
HTML Publish Settings Options…/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


Previewing the movie in the browser window l.jpg
Previewing the Movie in the Browser Window

File, Publish Preview

click the format in

which you wish to

preview the movie


Publishing the movie l.jpg
Publishing the Movie

File, Publish or Shift + F12

progress bar

indicates status

of publishing

process

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.


Viewing the html code l.jpg
Viewing 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.


Using html templates l.jpg
Using 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.


Publishing in other formats l.jpg
Publishing in Other Formats

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

File, Publish Settings or Ctrl + Shift + F12

formats


Formats for publishing flash movies l.jpg
Formats for Publishing Flash Movies

  • 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.


Exporting in other formats l.jpg
Exporting in Other Formats

File, Export Movie or Ctrl + Alt + Shift + S

-to export a movie to another file format without creating the HTML page


Exporting the current frame as an image l.jpg
Exporting the Current Frame as an Image

File, Export Image

-to create an image file in another format for the current frame


Commands review l.jpg
Commands Review

How do you display the Actions panel?

Window, Actions or F9


Commands review45 l.jpg
Commands Review

How do you display the Bandwidth profiler?

View, Bandwidth Profiler or Ctrl + B


Commands review46 l.jpg
Commands Review

How do you display the Controller?

Window, Toolbars, Controller


Commands review47 l.jpg
Commands Review

How do you copy frames?

Edit, Copy Frames or Ctrl + Alt + C


Commands review48 l.jpg
Commands Review

How do you cut frames?

Edit, Cut Frames or Ctrl + Alt + X


Commands review49 l.jpg
Commands Review

How do you create a movie clip or graphic symbol?

Insert, New Symbol or Ctrl + F8


Commands review50 l.jpg
Commands Review

How do you export the current frame as an image?

File, Export Image

-to create an image file in another format for the current frame


Commands review51 l.jpg
Commands Review

How do you export a movie in another format?

File, Export Movie or Ctrl + Alt + Shift + S

-to export a movie to another file format without creating the HTML page


Commands review52 l.jpg
Commands Review

How do you paste frames?

Edit, Paste Frames or Ctrl + Alt + V


Commands review53 l.jpg
Commands Review

How do you preview a published movie?

File, Publish Preview


Commands review54 l.jpg
Commands Review

How do you publish a movie?

File, Publish or Shift + F12

progress bar

indicates status

of publishing

process


Commands review55 l.jpg
Commands Review

How do you open the Publish Settings dialog box?

File, Publish Settings or Ctrl + Shift + F12


Commands review56 l.jpg
Commands Review

How do you select all frames?

Edit, Select All Frames or Ctrl + Alt + A


Commands review57 l.jpg
Commands Review

How do you simulate download speed?

View, Show Streaming or Ctrl + Enter


Commands review58 l.jpg
Commands Review

How do you test download speed?

Debug, click desired speed


Commands review59 l.jpg
Commands Review

How do you test a movie?

Control, Test Movie or Ctrl + Enter


Commands review60 l.jpg
Commands Review

How do you test a scene?

Control, Test Scene or Ctrl + Alt + Enter


Slide61 l.jpg

Coming Next

Chapter 7

Using ActionScript and Creating Templates