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
Top Related