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

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 Navigation and “Disjointed Rollover” using ActionScript

Frame  stop (); Function definitions Variables Button Movie Clip Attach ActionScript Frame  stop (); Function definitions Variables Button Movie Clip Actions panel allows you to select, drag and drop, rearrange, and delete actions Reference panel to 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

ActionScript Terminology Objects are collections of properties and methods Methods are functions assigned to an object Instances are objects that belong to a certain class Instance names are 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 Addresses movie 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

movieClip._visible = true; _parent.movieClip.play (); 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 ();

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

MovieClip – Event Handler Actions and Methods Event handler methods onClipEvent (load) onLoad onClipEvent (enterFrame) onEnterFrame onClipEvent (mouseDown) onMouseDown onClipEvent (mouseUp) onMouseUp onClipEvent (mouseMove) onMouseMove onClipEvent (keyDown) onKeyDown onClipEvent (keyUp) onKeyUp onPress onRelease onRollOver onRollOut

Step 0 – Download files, Launch Flash, Create Document 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

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; }

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

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); }

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");

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”

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");

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”

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

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");