Flash Demonstration – Unit 5

1. Flash Demonstration – Unit 5 • Done So Far and Build Upon • Create Function • Create “Button” using ActionScript 2.0 • Name Keyframes • Create “Disjointed Rollover” using ActionScript 2.0

2. 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 Unit – Create Secondary Navigationand “Disjointed Rollover” using ActionScript

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

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

5. 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 ();

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

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

8. Step 0 – Download files, Launch Flash, Create Document • Download Files • http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoVis_ITI/videodemosFlash.html • Launch Flash • Open File “Step0.fla” • Using Grid, Rulers and Guides • Rulers View > Rulers • Guides • View > Guides > Show Guides

9. 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; • }

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

11. 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); • } • }

12. 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"); • } • }

13. 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”

14. 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"); • }

15. 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”

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

17. 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"); • } • }