Digital Media Production

1. Digital Media Production Digital Media Production Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com

2. Lecture 12 - Overview • Flash • Flash Templates provided by Knight Digital Media Center • Quick Overview and How to Customize • Save Video as .flv to play inside Flash Template • Build Flash Website with Animated Navigation Structure • Decide on Overall Navigation Layout, Import Images & Organize Assets • Create Animations for Navigation Buttons • Create "UP" Buttons • Create "Down" Buttons • Make Button Instance Interactive • Create Scenes and Swap in “Down” Button • ActionScript 2.0 • Done So Far and Build Upon • Create Function • Create “Button” using ActionScript 2.0 • Name Keyframes • Create “Disjointed Rollover” using ActionScript 2.0 Lectures – Week 12 Contenthttp://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week12

3. Flash Templates – Knight Digital Media Center • http://multimedia.journalism.berkeley.edu/tutorials/using-flash-templates/ • Detailed Instructions provided for how to customize • Create SAME Image Dimensions as in Template • Example: 107x193 for front navigation images • Swap Your Images in place of template images • Double-click image in library • Click on “Import” to import your photo in its place • Click “Update” • Edit Text in some case you need to edit it inside symbol • Specify FLV Video to show • Specify contentPath in FLVPlayback instance

4. Step 0 – Download files, Launch Flash, Create Document • Download Files • http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec12/Steps/Part1 • Launch Flash • Start > Macromedia > Flash • Create Flash Document and Set its Properties • File > New • Modify > Document or use Property Inspector • Frame Rate = 12 Dimensions = 640 x 480 Background color = White 800 x 600 • Using Grid, Rulers and Guides • Rulers View > Rulers • Guides • View > Guides > Show Guides

5. Step 1 – Overall Navigation Layout and Organize Assets • Decide on Overall Navigation Layout • 1) Create layers for "background", "navigation", "stage" ... • 2) Create Guides for Navigation Text and Images • Import Images for Navigation • 1) Resize to fit allocated space (or "create to spec" in image editing program). • 2) Convert images into Graphic Symbols. • Organize Assets • 1) Open "Library" window. • 2) Click on "Folder" icon to create folders for "Images", "Buttons" ...

6. Step 2 – Create Animations for Navigation Buttons • 1) Create "Movie" symbol using "Insert > New Symbol". • 2) Drag "Graphic Symbol“ onto Stage of Animation (creates instance) • 3) Add keyframes. • 4) For each keyframe, apply effects(select instance on stage to apply Alpha effect). • 5) Animate by applying "tweening" • 6) Select last keyframe, open "Actions" window (can use Right-Click) and type "stop ();" (so that the animation does loop). • Make sure "Frame" is selected by checking "Actions for ..." the heading in top left corner.

7. Step 3 – Create "UP" Buttons • 1) Insert "Button" symbol. • 2) Create layers and guides for text and animation. • 3) "UP" state - create text (and possibly background shape) • 4) "OVER" state - insert keyframe, modify text, add animation. • 5) "DOWN state - insert (empty) keyframe, modify text and add static graphic by selecting animation and using "Swap" in the Property Inspector; want graphic to line up with end state of animation. • 6) "HIT" state - define "hotspot" for button (in addition to shapes in other states).

8. Step 4 – Create "Down" Buttons • Use "Duplicate Symbol" to Create Buttons • 1) Select "Button" symbol, Right-Click, select "Duplicate" and name it. • 2) Replace text in the keyframes for the different states. • 3) Use "Swap" to replace animation and position appropriately. • Create "Down" Buttons • 1) Use "Duplicate Symbol" to create "Down" button and name it. • 2) Update states: "down" and "up" become identical (use "Copy Frames" and extra layer for swapping if needed). • 3) "Over" should also contain static image as in "Up" state and the same text color as in "Up" state.

9. Step 5 – Make Button Instance Interactive • Open "Scene" Window • 1) "Scene 1" - name it "Bilbao". • Make Button Instance Interactive • 1) Select instance of button in "Scene 1" and name it • 2) Open "Action" window. • 3) Press "+" and then select action to be triggered: • Global Functions > Timeline Control • 6) Select "gotoAndStop" and for scene select "Bilbao". • Action associated with button is: • on (release) { • gotoAndStop ("Bilbao", 1); • }

10. Step 6 – Make Button Instance Interactive (cont.) • Select ActionScript for "Bilbao" Button • 1) Select instance of "Bilbao" button and open Actions Window • 2) Select ActionScript and copy it • Select Button Instance • 1) Select instance of button (and name it). • 2) Open "Action" window • 3) Paste ActionScript. • 4) Modify "gotoAndStop ("Bilbao", 1) so that another scene (to be created) is referenced, such as "Gehry", "Meret" or "Dance". • Action associated with button is: • on (release) { • gotoAndStop ("SceneName", 1); • }

11. Step 7 – Create Scenes and Swap in “Down” Button • Create "actions" Layer • 1) Insert layer called "actions". • 2) Select first keyframe and open "Actions" window. • 3) Type "stop ();". • Open "Scene" Window to Duplicate Scenes • 1) Open "Scene" window. • 2) Click the "Duplicate Scene" icon in the bottom right. • 3) Name the duplicate consistent with scenes referenced in the ActionScripts associated with the different buttons. • Insert "Down" Button for Each Scene • 1) Select button related to selected scene. • 2) Use "Swap" in Property Inspector and select "Down" button.

12. Recap – How to create Animated & Interactive Button • 4. Button UP = BUTTON Symbol • OVER State 3. Animation = MOVIE Symbol 2. Bitmap Symbol = GRAPHIC Symbol • Import Bitmap • To Change Alpha  Select Instance of Symbol • Animation Stops  Add “stop ()” to last keyframe • Navigation • Select instance of Button and attach ActionScript • Save Time  Use “Duplicate” and Modify

13. Done So Far – Create Flash Website with Animated Buttons • Import Images • Convert Images to Graphic Symbols • “Insert > Convert to Symbol” • Create Movie Clip using “Insert > New Symbol” • Insert Graphic Symbol and Animate • Create Buttons • Insert Movie Clip in “Over” State • Create “UP” and “DOWN” Buttons • Create Navigation Bar in “Scene 1” and add ActionScript • Create Scene for Each Category and “Swap In” “Down” Button •  This Week – Create Secondary Navigationand “Disjointed Rollover” using ActionScript

14. Attach ActionScript • Frame stop (); Function definitions Variables • Button • Movie Clip • Actions panelallows you to select, drag and drop, rearrange, and delete actions • Reference panelto view detailed descriptions of actions  Window > Reference • Flash can detect what action you are entering and display code hint • Scripts attached to a frame execute when playhead enters frame. • first frame in a movie is rendered incrementally • Scripts attached to movie clips / buttons execute when event occurs

15. ActionScript Terminology • Objectsare collections of properties and methods • Methodsare functions assigned to an object • Instancesare objects that belong to a certain class • Instance namesare unique names that allow you to target movie clip instances in scripts • Use Property inspector to assign instance names to instances on Stage. • “this” to movie clips • Target Paths = Hierarchical Addressesmovie clip instance names, variables, objects in movie • Use target path to direct action at a movie clip or to get or set variable value _root.stereoControl.volume

16. Dot Syntax “.” • Indicate the properties or methods related to an object or movie clip • Used to identify target path to a movie clip, variable, function, or object • movieClip._x • movieClip._alpha • movieClip._xscale • movieClip._visible = true; • _parent.movieClip.play ();

17. Defining a Function • // global • _global.myFunction = function (x) { • return (x*2)+3; • } • // local • function sqr(x) { • return x * x; • }

18. MovieClip – Event Handler Actions and Methods onPress onRelease onRollOver onRollOut

19. Step 0 – Download files, Launch Flash, Create Document • Download Files • http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec12/Steps/Part2 • Launch Flash • Open File “Step0.fla” • Using Grid, Rulers and Guides • Rulers View > Rulers • Guides • View > Guides > Show Guides

20. Step 1 – Create Global Function • Insert Layer “functions” in first scene “Bilbao” to contain global functions • Want to create function that changes transparency and scale of movie • Open Actions Window • Enter function definition • _global.changeVisuals = function (movieClip, alpha, scale) { • movieClip._alpha = alpha; • movieClip._xscale = scale; • movieClip._yscale = scale; • }

21. Step 2a – Create Secondary Navigation Buttons Using ActionScript • 1) Create “Movie” Symbol = “Furcup Button” • 2) Create Button Background and Text • 3) Create Secondary Navigation Area in “Meret” Scene • 4) Add instance of “Furcup Button” movie clip to “Meret” scene and name it “Furcup” • 5) Select “Furcup” instance • 6) Open Actions window

22. Step 2b – Create Secondary Navigation Buttons Using ActionScript • With “Furcup” movie clip instance selected, add in Actions Window • onClipEvent (load) { • var alphaOut = 50; • var alphaOver = 75; • var alphaPress = 100; • var scaleOut = 100; • var scaleOver = 110; • var scalePress = scaleOver; • // set transparency • this._alpha = alphaOut; • this.onRollOver = function () { • trace ("Over"); • changeVisuals (this, alphaOver, scaleOver); • } • }

23. Step 2c – Create Secondary Navigation Buttons Using ActionScript • onClipEvent (load) { • var alphaOut = 50; • var alphaOver = 75; • var alphaPress = 100; • var scaleOut = 100; • var scaleOver = 110; • var scalePress = scaleOver; • // set transparency • this._alpha = alphaOut; • this.onRollOver = function () { • trace ("Over"); • changeVisuals (this, alphaOver, scaleOver); • } • this.onRollOut = function () { • trace ("Out"); • changeVisuals (this, alphaOut, scaleOut); • } • this.onPress = function () { • trace ("Press"); • changeVisuals (this, alphaPress, scalePress); • _parent.gotoAndStop("Furcup"); • } • }

24. Step 3a – Label Keyframe, Create “DOWN” Button • 1) Create layer = “labelled” • 2) Select frame = 20, Insert Keyframe and Name it “Furcup” • 3) Add “stop ();” to “actions” layer at frame = 20(need to add insert keyframe) • 3) Insert Keyframe at frame = 20 in layer “furcup” • 4) Select instance of movie clip and name it “FurcupDown”

25. Step 3b – Modify attached ActionScript • Modify ActionScript attached to “FurcupDown” instance • var scalePress = 120; • this._alpha = alphaPress; • this._xscale = scaleOver; • this._yscale = scaleOver; • this.onRollOver = function () { • trace ("Over"); • changeVisuals (this, alphaPress, scaleOver); • } • this.onRollOut = function () { • trace ("Out"); • changeVisuals (this, alphaPress, scaleOut); • } • this.onPress = function () { • trace ("Press"); • changeVisuals (this, alphaPress, scalePress); • _parent.gotoAndStop("Furcup"); • }

26. Step 4a – Create “Disjointed” Rollover • Create “Furcup Animation” • 1) Import “Furcup” image and convert to Graphic Symbol • 2) Create new movie clip symbol called “Furcup Animation” • 3) Create Animation (make sure image expands from origin of movie clip). • 4) Add instance “Furcup Animation” to “Meret” scene at frame = “Furcup” • 5) Name instance “FurcupImage” • Create “Furcup Text" • 1) Create new movie clip symbol called “Furcup Text” • 2) Create Text • 3) Add instance “Furcup Text” to “Meret” scene at frame = “Furcup” • 5) Name instance “FurcupText”

27. Step 4b – Create “Disjointed” Rollover • Make “FurcupText” Invisible • 1) Select “actions” layer at frame = 20 • 2) Add ActionScript • FurcupText._visible = false;

28. Step 4c – Create “Disjointed” Rollover • Add “Disjointed Rollover” to “FurcupImage” • Select “FurcupImage” instance and in Actions window • onClipEvent (load) { • this.onRollOver = function () { • trace ("Over"); • _parent.FurcupText._visible = true; • } • this.onRollOut = function () { • trace ("Out"); • _parent.FurcupText._visible = false; • } • this.onPress = function () { • trace ("Press"); • } • }