Case Study: Using Case Study: Using Macromedia DirectorMacromedia Director

Unit HUnit H

2

ObjectivesObjectives

Plan the moviePlan the movie

Understand DirectorUnderstand Director

Get started with DirectorGet started with Director

Set movie propertiesSet movie properties

Use the Tool paletteUse the Tool palette

Assemble the castAssemble the cast

Play the moviePlay the movie

3

ObjectivesObjectives

Animate the movieAnimate the movie

Create Lingo scriptsCreate Lingo scripts

Add a second animationAdd a second animation

Create buttonsCreate buttons

Add soundAdd sound

Distribute the movieDistribute the movie

4

ScenarioScenario

Multimedia Design Center Multimedia Design Center (MDC)(MDC)

Clients like Clients like Learning R UsLearning R Us– Short children’s animations via Web Short children’s animations via Web

or CDor CD

ObjectiveObjective– Create short opening movie for the Create short opening movie for the

FunTime seriesFunTime series

5

Planning the MoviePlanning the Movie

GoalGoalGoalGoal Target AudienceTarget AudienceTarget AudienceTarget Audience

TreatmentTreatmentTreatmentTreatment SpecificationsSpecificationsSpecificationsSpecifications

StoryboardStoryboardStoryboardStoryboard NavigationNavigationNavigationNavigation

ConceptConceptConceptConcept

6

ConceptConcept

Children’s educational titlesChildren’s educational titlesMission:Mission: provide both provide both educational and entertaining educational and entertaining experiences for audienceexperiences for audienceNew series is FunTimesNew series is FunTimes– User has fun by choosing the User has fun by choosing the

“adventure”“adventure”– Each adventure is different educational Each adventure is different educational

pathpath

7

GoalGoal

User should haveUser should have– Entertaining experienceEntertaining experience– Encounter educational objectivesEncounter educational objectives– Based on user inputBased on user input

Increase awareness of companyIncrease awareness of company

Increase sales of educational Increase sales of educational titlestitles

8

Target AudienceTarget Audience

Children ages 4-8Children ages 4-8

Primarily use computer for entertainment and educationPrimarily use computer for entertainment and education

May or may not have access to WebMay or may not have access to Web

9

TreatmentTreatment

SimplicitySimplicity

Ease of useEase of use

Large, cartoon-type Large, cartoon-type graphicsgraphics

Sound animations Sound animations with controlswith controls

Navigation buttonsNavigation buttons

Surprise elementsSurprise elements

10

Target Playback SystemTarget Playback System

Win 95 or later and Pentium orWin 95 or later and Pentium orMac G3 and O7Mac G3 and O756K modem56K modemIE3 or Netscape 3 or laterIE3 or Netscape 3 or laterSound cardSound cardGIFs, BMPs and GIF animationsGIFs, BMPs and GIF animationsArial textArial textButton controlsButton controlsAudio (WAV files)Audio (WAV files)

11

Storyboard and NavigationStoryboard and Navigation

12

SetupSetup

Resolution is 800x600Resolution is 800x600

Colors are 16 bitColors are 16 bit

IE5IE5

Create Create mymoviemymovie folder folder

Copy publisher files Copy publisher files into into mymoviemymovie folder folder

13

Understanding DirectorUnderstanding Director

Movie metaphor using framesMovie metaphor using frames

Cast members put on stageCast members put on stage– Graphics, sound, textGraphics, sound, text

Score is frame where cast Score is frame where cast member appearsmember appears

14

StageStage

15

CastCast

Shows thumbnails/identifiers of Shows thumbnails/identifiers of cast memberscast membersImportedImportedDrag to stageDrag to stageSprite is one instance of cast Sprite is one instance of cast membermember– Can change colors, placement, behaviorCan change colors, placement, behavior– Use Properties Inspector windowUse Properties Inspector window

16

ScoreScore

Frames and channelsFrames and channelsChannelChannel– Consists of framesConsists of frames– Holds multiple cast Holds multiple cast

membersmembers

Movie plays Movie plays sequentially through sequentially through framesframes– Can change this via scripts Can change this via scripts

(branching)(branching)

17

Tool PaletteTool Palette

Create text, buttons, shapesCreate text, buttons, shapesCreate text, buttons, shapesCreate text, buttons, shapes

Use with new or Use with new or selected items on stageselected items on stage

Use with new or Use with new or selected items on stageselected items on stage

18

AnimationAnimation

19

Getting Started Getting Started

Window menu Window menu optionoption

Toolbar, tool Toolbar, tool palette, stage, palette, stage, score and castscore and cast

Resize and Resize and move windowsmove windows

Step #1Step #1

20

Getting Started Getting Started

HelpHelp

File and SaveFile and Save

mymovie foldermymovie folder

planefun filenameplanefun filename

Step #1Step #1

21

Movie PropertiesMovie Properties

Modify > Movie > Properties > Movie tabModify > Movie > Properties > Movie tab– Change stage sizeChange stage size– Change stage color to blueChange stage color to blue

Step #2Step #2

22

Tool PaletteTool Palette

Click Text tool buttonClick Text tool button

Drag box in center of stageDrag box in center of stage

Type text: Type text: Plane Fun from Plane Fun from Learning R UsLearning R Us

Highlight text: Modify > FontHighlight text: Modify > Font– Arial, bold, 18 point, redArial, bold, 18 point, red

Step #3Step #3

23

Changing a SpriteChanging a Sprite

Modify > Sprite > PropertiesModify > Sprite > Properties

Click list arrow next to CopyClick list arrow next to Copy

Click Background TransparentClick Background Transparent

Click Member tabClick Member tab

Type Type HeadingHeading in name box in name box

Close inspectorClose inspector

Step #4Step #4

24

Assembling the CastAssembling the Cast

Can create using Tool palette Can create using Tool palette and Paint windowand Paint window

Can import into the Cast windowCan import into the Cast window

Once in cast window, you can Once in cast window, you can drag them onto the stage as a drag them onto the stage as a spritesprite

25

Importing the CastImporting the Cast

Click Cast window title bar Click Cast window title bar File > Import File > Import – Click each filename and AddClick each filename and Add

• cloud1, cloud2, hotair, hotair-snd, cloud1, cloud2, hotair, hotair-snd, plane, plane-sndplane, plane-snd

– Click ImportClick Import– Click Bitmap ImageClick Bitmap Image– Click Same Format for Click Same Format for

Remaining Files, Click OKRemaining Files, Click OK– Click Stage (16 bits)Click Stage (16 bits)– Click Same Settings for Click Same Settings for

Remaining Images, click OKRemaining Images, click OK

Step #5Step #5

26

Placing Cast on StagePlacing Cast on Stage

Click Cast View Style Click Cast View Style button; resize windowbutton; resize window

Click Score windowClick Score window

Click frame 1, channel 2Click frame 1, channel 2– Drag cloud1 to stageDrag cloud1 to stage

Modify > Sprite > Modify > Sprite > PropertiesProperties– Make background transparentMake background transparent

Step #6Step #6

27

Placing Cast on StagePlacing Cast on Stage

Click frame 1 in channel 3Click frame 1 in channel 3– Drag plane to stageDrag plane to stage– Change to Background TransparentChange to Background Transparent

Click frame 1 in channel 4Click frame 1 in channel 4– Drag cloud2 to stageDrag cloud2 to stage– Change to Background TransparentChange to Background Transparent

Note: the higher the channel, Note: the higher the channel, the more “on top” the sprite isthe more “on top” the sprite is

Click frame 1 in channel 3Click frame 1 in channel 3– Drag plane to stageDrag plane to stage– Change to Background TransparentChange to Background Transparent

Click frame 1 in channel 4Click frame 1 in channel 4– Drag cloud2 to stageDrag cloud2 to stage– Change to Background TransparentChange to Background Transparent

Note: the higher the channel, Note: the higher the channel, the more “on top” the sprite isthe more “on top” the sprite is

Step #6Step #6

28

Playing the MoviePlaying the Movie

Click Play button on taskbarClick Play button on taskbar

Playback head moves across all Playback head moves across all channels from frame 1 to frame 28channels from frame 1 to frame 28

Default is to loopDefault is to loop

Click the Stop and Rewind buttonsClick the Stop and Rewind buttons

Step #7Step #7

PlayPlayRewindRewind

StopStop

29

Animating the MovieAnimating the Movie

Change sprite’s position or Change sprite’s position or appearance across framesappearance across frames

Path animation:Path animation: dragging sprite dragging sprite and recording movementand recording movement

Cell animation:Cell animation: create series of create series of sprites and use tween functionsprites and use tween function– Must specify keyframesMust specify keyframes

30

Tweening AnimationTweening Animation

File > Preferences > Sprite > Tweening File > Preferences > Sprite > Tweening is checked on is checked on

Click circle (frame 2, channel 3)Click circle (frame 2, channel 3)• Insert > KeyframeInsert > Keyframe• Click plane on stageClick plane on stage• Drag diagonally off the top of the stageDrag diagonally off the top of the stage

Step #8Step #8

31

Tweening AnimationTweening Animation

Click circle (frame 28, channel 3)Click circle (frame 28, channel 3)– Insert > KeyframeInsert > Keyframe– Modify > Sprite > Tweening > Path is onModify > Sprite > Tweening > Path is on

Step #8Step #8

32

Lingo ScriptsLingo Scripts

Script instructs Director to Script instructs Director to carry out a particular functioncarry out a particular function

Can assign to sprites or framesCan assign to sprites or frames

Scripting language called LingoScripting language called Lingo

When playback head reaches When playback head reaches a frame, script executes (can a frame, script executes (can pause or restart movie)pause or restart movie)

33

Creating Lingo ScriptsCreating Lingo Scripts

Double-click Double-click frame 1 in frame 1 in script script channelchannelType: Type: go to go to the framethe frame Same as a Same as a Pause; loops Pause; loops on first frameon first frame

Step #9Step #9

34

Creating Lingo ScriptsCreating Lingo Scripts

Click Button on Tool Click Button on Tool palette and draw the palette and draw the buttonbutton

Type: Type: PlanePlane

Click the Plane buttonClick the Plane button

Modify > Sprite > ScriptModify > Sprite > Script

Step #9Step #9

on mouseUpon mouseUp

go to frame 2go to frame 2

on mouseUpon mouseUp

go to frame 2go to frame 2

35

Animations for BranchingAnimations for Branching

Movie is linear by Movie is linear by defaultdefault

Create a new Create a new animation so user animation so user can jump to different can jump to different part of moviepart of movie

Place in same Place in same channel as planechannel as plane

36

Setting Up For Second Setting Up For Second AnimationAnimation

Window > Cast Window > Cast

Modify > Movie > Modify > Movie > PropertiesProperties

Extend frame 28 Extend frame 28 to frame 85 by to frame 85 by draggingdragging– Channels 1, 2 & 4Channels 1, 2 & 4

Step #10Step #10

37

Creating Plane AnimationCreating Plane Animation

Drag plane to stage and make background Drag plane to stage and make background transparent (frame 30, channel 3)transparent (frame 30, channel 3)

Insert keyframes (frames 30 & 57, channel 3)Insert keyframes (frames 30 & 57, channel 3)

Drag plane behind top cloudDrag plane behind top cloud

Modify > Sprite > Tweening > check PathModify > Sprite > Tweening > check Path

Step #10Step #10

38

Creating Hot Air Balloon Creating Hot Air Balloon AnimationAnimation

Drag balloon to stage (frame 58, channel 3)Drag balloon to stage (frame 58, channel 3) Background transparentBackground transparent

Insert keyframes (frames 58 & 85, channel 3)Insert keyframes (frames 58 & 85, channel 3)

Drag hot air balloon off top of stageDrag hot air balloon off top of stage

Modify > Sprite > Tweening > check PathModify > Sprite > Tweening > check Path

Step #10Step #10

39

Button InteractivityButton Interactivity

Plane ButtonPlane Button– Double-click frame 28 (script channel) & type: Double-click frame 28 (script channel) & type: go to frame 2go to frame 2

Fun ButtonFun Button– Click frame 1, channel 6Click frame 1, channel 6– Use button tool and draw a Fun buttonUse button tool and draw a Fun button– Modify > Sprite > Script and type: Modify > Sprite > Script and type: go to frame 30go to frame 30– Double-click frame 85 (script channel) & type: Double-click frame 85 (script channel) & type: go to frame 30go to frame 30

Step #11Step #11

40

Button InteractivityButton Interactivity

Stop ButtonStop Button– Click frame 1, channel 7Click frame 1, channel 7– Use button tool and draw a Stop buttonUse button tool and draw a Stop button– Modify > Sprite > Script and type: Modify > Sprite > Script and type: go to frame 1go to frame 1– Extend button over to frame 85Extend button over to frame 85

Next Button (inactive for now)Next Button (inactive for now)– Click frame 1, channel 8Click frame 1, channel 8– Use button tool and draw a Next buttonUse button tool and draw a Next button– Extend button over to frame 85Extend button over to frame 85

Step #11Step #11

41

Button InteractivityButton Interactivity

Channels 5 and 6 Channels 5 and 6 – Have plane and fun buttons on stage for Have plane and fun buttons on stage for

only 1 frame by dragging frame 28 down only 1 frame by dragging frame 28 down to frame 1to frame 1

Play moviePlay movie

Try plane, stop, and fun buttonsTry plane, stop, and fun buttons

Save movieSave movie

Step #11Step #11

42

Adding SoundAdding Sound

Window > CastWindow > CastClick Hide/Show Effects Click Hide/Show Effects Channels button in scoreChannels button in scoreDrag plane-snd from cast Drag plane-snd from cast windowwindow– Frame 2, sound channel 1Frame 2, sound channel 1– Extend to frame 57Extend to frame 57

Drag hotair-snd from cast Drag hotair-snd from cast windowwindow– Frame 58, sound channel 1Frame 58, sound channel 1

Play and save moviePlay and save movie

Window > CastWindow > CastClick Hide/Show Effects Click Hide/Show Effects Channels button in scoreChannels button in scoreDrag plane-snd from cast Drag plane-snd from cast windowwindow– Frame 2, sound channel 1Frame 2, sound channel 1– Extend to frame 57Extend to frame 57

Drag hotair-snd from cast Drag hotair-snd from cast windowwindow– Frame 58, sound channel 1Frame 58, sound channel 1

Play and save moviePlay and save movie

Step #12Step #12

43

Distributing the MovieDistributing the Movie

1)1) Save and play as .dir Save and play as .dir movie with Director movie with Director programprogram

2)2) Create Projector for Create Projector for stand-alone versionstand-alone version

3)3) Publish a movie in Publish a movie in Shockwave format Shockwave format for Webfor Web

3 Ways to Save Movie3 Ways to Save Movie

44

Creating a Projector MovieCreating a Projector Movie

File > Create ProjectorFile > Create ProjectorFiles of Type = Director MovieFiles of Type = Director MovieClick planefun in your folderClick planefun in your folderClick AddClick AddClick CreateClick CreateType Type fun-moviefun-movieClick SaveClick SaveDouble-click fun-movie.exe to Double-click fun-movie.exe to runrun

45

Creating a Shockwave MovieCreating a Shockwave Movie

File > Publish File > Publish SettingsSettingsChange settings to Change settings to match dialog boxmatch dialog boxFile > PublishFile > Publish– Save if necessarySave if necessary

Open browserOpen browserOpen planefun.htmOpen planefun.htm

File > Publish File > Publish SettingsSettingsChange settings to Change settings to match dialog boxmatch dialog boxFile > PublishFile > Publish– Save if necessarySave if necessary

Open browserOpen browserOpen planefun.htmOpen planefun.htm

Case Study: Using Case Study: Using Macromedia DirectorMacromedia Director

Unit HUnit H