Dm 11 – Intro. To FlashDm 11 – Intro. To Flash

Macromedia Flash MXMacromedia Flash MXGETTING STARTED WITH

Chapter A

• Understand the Macromedia Flash Understand the Macromedia Flash environmentenvironment

• Open a document and play a movieOpen a document and play a movie

• Create and save a movieCreate and save a movie

• Work with layers and the timelineWork with layers and the timeline

• Plan a Web sitePlan a Web site

• Distribute a Macromedia Flash movieDistribute a Macromedia Flash movie

Chapter LessonsChapter Lessons

Chapter A

• What is Flash MX?What is Flash MX?– A animation and interactive authoring A animation and interactive authoring

programprogram– Has tools for complex animation, as well Has tools for complex animation, as well

as excellent drawing toolsas excellent drawing tools

Using Flash MX Using Flash MX

Chapter A

• What can Flash MX be used for?What can Flash MX be used for?– Web sitesWeb sites– Web-based applicationsWeb-based applications– CD-Rom and interactive applicationsCD-Rom and interactive applications– VideoVideo

Using FlashUsing Flash

Chapter A

Optimized for the WebOptimized for the Web

• Flash’s Native format is vector Flash’s Native format is vector images, which reduce the size of images, which reduce the size of graphic files.graphic files.– Vectors are scalableVectors are scalable

• Flash provides streaming content Flash provides streaming content over the internetover the internet– instead of waiting for the entire instead of waiting for the entire

contents of a web page to loadcontents of a web page to load

Chapter A

The Development The Development EnvironmentEnvironment

• You can customize your workspaceYou can customize your workspace

• Flash works on a movie metaphorFlash works on a movie metaphor– Create Scenes on a StageCreate Scenes on a Stage– Scenes run in frames on a timelineScenes run in frames on a timeline– You create a movie by arranging You create a movie by arranging

objects on the stageobjects on the stage– You can play the movie on the stage You can play the movie on the stage

using VCR-like controlsusing VCR-like controls

Chapter A

Playback of Flash contentPlayback of Flash content

• Movies are viewable through a Movies are viewable through a browserbrowser

• Macromedia Flash Player is Macromedia Flash Player is required (free download available required (free download available on Macromedia’s Web site)on Macromedia’s Web site)

• Movies can be played through the Movies can be played through the browser, the player, or as a stand-browser, the player, or as a stand-alone “projector”alone “projector”

Chapter A

How Flash Starts upHow Flash Starts up

• Three parts to the Development Three parts to the Development EnvironmentEnvironment– StageStage– TimelineTimeline– WorkspaceWorkspace

• You can display other parts of the You can display other parts of the programprogram– The toolboxThe toolbox– The properties panelThe properties panel

Chapter A

toolbox

stage

timeline

panels

stage

Chapter A

The StageThe Stage

• Contains all objects that are seen by the viewer in the Contains all objects that are seen by the viewer in the final moviefinal movie

• You can draw objects on, or import objects to the stageYou can draw objects on, or import objects to the stage

Chapter A

The TimelineThe Timeline

• Used to organize and control the movie’s content by specifying when each object Used to organize and control the movie’s content by specifying when each object appears on the stageappears on the stage

• Images are contained within Images are contained within framesframes, which are units of the timeline, which are units of the timeline

• The timeline has separate layersThe timeline has separate layers

• The timeline has a playback headThe timeline has a playback head

Chapter A

The ToolboxThe Toolbox

• Contains a set of tools used to draw and edit graphics and textContains a set of tools used to draw and edit graphics and text

• Divided into four sections: Tools, View,Colors, OptionDivided into four sections: Tools, View,Colors, Option

• Panels, such as the Properties Panel are used to organize and modify Panels, such as the Properties Panel are used to organize and modify objects and features in a movieobjects and features in a movie

Chapter A

Opening a movie in FlashOpening a movie in Flash

• The .fla extension is native, The .fla extension is native, and can only be opened in and can only be opened in FlashFlash

• Flash exports web-ready files Flash exports web-ready files as .swfas .swf

• .swf files should be tested .swf files should be tested before being publishedbefore being published

• Always keep the original .fla fileAlways keep the original .fla file

Chapter A

Previewing a moviePreviewing a movie

• Flash movies can be previewed Flash movies can be previewed in the development in the development environmentenvironment

• Control menu commands:Control menu commands:– Play, rewind, step forward, step Play, rewind, step forward, step

backward.backward.

• The Controller acts similar to a The Controller acts similar to a VCR ControllerVCR Controller

Chapter A

Testing a movie Testing a movie

• When previewing a movie, When previewing a movie, some interactive functions do some interactive functions do not work unless the movie is not work unless the movie is played using the Flash Player.played using the Flash Player.

• Use Control > Test Movie to Use Control > Test Movie to test using the Flash playertest using the Flash player

Chapter A

Creating a Macromedia Creating a Macromedia Flash MovieFlash Movie

• Movies are created by placing Movies are created by placing objects on the stage, editing objects on the stage, editing these objects, animating them these objects, animating them and adding interactivityand adding interactivity

• You can create graphics in You can create graphics in Flash,or import them from Flash,or import them from another program such as another program such as PhotoshopPhotoshop

Chapter A

Creating a Macromedia Creating a Macromedia Flash MovieFlash Movie

• Objects placed on the stage are Objects placed on the stage are automatically placed in a layer, automatically placed in a layer, and in the currently selected and in the currently selected frame of the timelineframe of the timeline

• A A keyframekeyframe represents a represents a frame which contains an objectframe which contains an object– Always the first frame of every Always the first frame of every

animationanimation

Chapter A

An object in a keyframeAn object in a keyframe

Object on the stage

Keyframerepresentingobject

Chapter A

Creating an animationCreating an animation

• A basic animation requires two A basic animation requires two keyframeskeyframes– The first keyframe sets the The first keyframe sets the

starting positionstarting position– The second keyframe sets the The second keyframe sets the

ending positionending position

• The number of frames between The number of frames between two keyframes determines the two keyframes determines the length of the animationlength of the animation

Chapter A

Motion animationMotion animation

Arrow between keyframes indicates motion animation

Chapter A

Adding an Effect to an Adding an Effect to an ObjectObject

• In addition to animating an In addition to animating an objects location, you can also objects location, you can also animate an objects appearanceanimate an objects appearance– ShapeShape– ColorColor– BrightnessBrightness– TransparencyTransparency– RotationRotation

Chapter A

Understanding the TimelineUnderstanding the Timeline

Playhead FramesFrame View

Icon

Status BarLayers

• Understanding how to read the timeline Understanding how to read the timeline can help you determine what’s happening can help you determine what’s happening in your movie frame by framein your movie frame by frame

Chapter A

LayersLayers

•Like transparent acetate sheets Like transparent acetate sheets of content stacked on top of one of content stacked on top of one anotheranother

•Adding a layer causes it to be Adding a layer causes it to be placed on top of the other layersplaced on top of the other layers

•Can be re-ordered by dragging Can be re-ordered by dragging up or downup or down

Chapter A

Using FramesUsing Frames

•The timeline is made up of The timeline is made up of individual units called framesindividual units called frames

•Content is displayed in frames Content is displayed in frames as the playhead moves over as the playhead moves over them when the movie playsthem when the movie plays

•The status bar indicates The status bar indicates current frame the playhead is current frame the playhead is onon

Chapter A

Using the PlayheadUsing the Playhead

•The playhead indicates which The playhead indicates which frame is playingframe is playing

•Can be dragged left or rightCan be dragged left or right

•Dragging back and forth allows Dragging back and forth allows you to check some animations in you to check some animations in Flash without exporting to swfFlash without exporting to swf

Chapter A

Understanding ScenesUnderstanding Scenes

•A section of the timeline A section of the timeline designated for a specific part of designated for a specific part of the moviethe movie

•You can create and name scenes You can create and name scenes as you wishas you wish

•Great way to manage your Flash Great way to manage your Flash movie productionmovie production

Chapter A

Adjusting the Timeline viewAdjusting the Timeline view

Chapter A

Modifying the frame rateModifying the frame rate

Change movie dimensions

Adjust theframe rate

Adjust theBackgroundcolor

Chapter A

Plan a Web sitePlan a Web site

•First step in any site First step in any site productionproduction

•Step 1: State the Step 1: State the Purpose(Goals)Purpose(Goals)

•Step 2: Identify the Target Step 2: Identify the Target AudienceAudience– Who will use the Web site?Who will use the Web site?

Chapter A

Plan a Web sitePlan a Web site

•Step 3: Determining the Step 3: Determining the TreatmentTreatment– What is the look and feel?What is the look and feel?– ToneTone– ApproachApproach– EmphasisEmphasis

Chapter A

Plan a Web sitePlan a Web site

•Step 4: Develop the Step 4: Develop the SpecificationsSpecifications– Playback SystemPlayback System– Elements to IncludeElements to Include– FunctionalityFunctionality– User InterfaceUser Interface

Chapter A

Create a StoryboardCreate a Storyboard

Chapter A

Using Screen Design Using Screen Design guidelinesguidelines

•BalanceBalance

•UnityUnity

•MovementMovement

•User InterfaceUser Interface

Chapter A

Using Interactive Design Using Interactive Design guidelinesguidelines

•Make it simple, easy to Make it simple, easy to understandunderstand

•Build in consistency in the Build in consistency in the navigation schemenavigation scheme

•Provide feedbackProvide feedback

•Give the user controlGive the user control

Chapter A

Distributing Flash MoviesDistributing Flash Movies

•File > Publish to export File > Publish to export movies out of Flashmovies out of Flash

•Export to .swf formatExport to .swf format

•Generate the HTML code that Generate the HTML code that references the Macromedia references the Macromedia Shockwave fileShockwave file

Chapter A

HTML codeHTML code

Code specifying the Macromedia Shockwave Movie that the browser will play

.swf extension indicates aMacromedia Shockwave file

Chapter A

Other Publish optionsOther Publish options

•Stand-alone Projector FilesStand-alone Projector Files

•Quicktime .mov filesQuicktime .mov files

Chapter A

Chapter A TasksChapter A Tasks

• Understand the Macromedia Flash Understand the Macromedia Flash environmentenvironment

• Open a document and play a movieOpen a document and play a movie

• Create and save a movieCreate and save a movie

• Work with layers and the timelineWork with layers and the timeline

• Plan a Web sitePlan a Web site

• Distribute a Macromedia Flash movieDistribute a Macromedia Flash movie