Animation and Interactivity How animation works generally (psychology & media) GIF animations Flash animation (motion tweening and motion guides) Flash interactivity with ActionScript Buttons that invoke web pages Input text and dynamic text Drag and drop Building menus Flash for multimedia development Importing video and sound Publishing movies for browsers or stand-alone executables Loading other movies Executing external programs

Animation Adds motion to a piece Draws attention to what you want user to notice As simple as a transition effect, such as a fade, dissolve or zoom Or as elaborate as full cartoon-like animation or 3D animation

Why is animation possible? Biology: persistence of vision Object seen by a human eye remains mapped onto retina for a brief time A series of images that change slightly and rapidly appear to blend, giving illusion of movement

Frames per second TV builds 30 entire frames/second Film shot at camera shutter 24 frames/second, but projector flashes through each image twice Multimedia often makes do with less Flash defaults to 12 frames/second

Cel animation Cartoon animation makes a different cel (celluloid sheet) for each frame Cel animation artwork begins with keyframes for each action, such as character about to take a step Tweening creates frames between keyframes Computer animation does automatic tweening

GIF89a Added simple animation capability Many images included in one GIF file Browsers will show animations in sequence—an exampleexample GIF constructor set makes this easier: see

Macromedia Flash™ Originally called FutureSplash Macromedia acquired it to complement their flagship product Director™ Both use stage, actors and timelines Both play with Shockwave plug-ins Flash reduces bandwidth overhead

Motion tweens Motion tweens make direct animations Create a graphic object to move Create a keyframe in another frame In any frame, right-click and select: Create Motion Tween Ditto in final keyframe: arrow appears Voila! Straight line motion Motion tweens change other properties: Size, color, orientation

Motion guides Motion guides for arbitrary motion path Right-click on layer Select Add Motion Guide With pencil tool, draw a path Drag graphic to start and end points (in first and final keyframes) Voila! Arbitrary path motion

ActionScript How do we make the make it stop? Go to ending keyframe Open Actions window (F9) Select Actions -> Move Control -> stop Or select Expert mode and type stop(); ActionScript: Flash’s programming language Director has Lingo, Authorware has calculations ActionScript is similar to JavaScript for browser

How to make it play twice? Which action? gotoAndPlay(frame) What kind of control structure? if (condition) { } else { } Add this code to last frame in movie: if (firstTime) //set true in frame 1 { firstTime = false; gotoAndPlay(2); } else stop();

Buttons and actions Create a graphic on stage Select whole graphic (double-click it) Convert to symbol (F8) In Actions window: on (release) { getURL(" } Parameters refine function’s behavior Select help icon to read reference manual

Publishing Flash movies File > Publish settings Ctrl-Enter compiles.fla to.swf (“swiff”) Publish.html to tell browser where to find latest Flash player, dimensions of movie Windows projector produces stand-alone.exe program (plays without browser or Flash player) Macintosh player does the same on Mac

Input text and dynamic text With text tool ( A ), draw two boxes In first box: Properties: Static text -> Input text Set Var (variable) to inText (identifier) Click on background box to left of Var In second box: Properties: Static text -> dynamic text Set Var (variable) to dynText (identifier) In button, change action: inText = dynText; Use this capability to let use choose web page

Drag and drop (1) Create two boxes (drag and target) Convert to symbols: both as movie clips Call 1st symbol dragBox, 2 nd targetBox Give each clip an — Call 1 st clip myDrag and 2 nd one myTarget Double-click into dragBox movie clip Double-click on this box again Convert to symbol: this time make it a Button Now we have a button inside a movie clip! Button will contain event action (dragging)

Drag and drop (2) Actions for redButton: on (press) { startDrag(this); } //Drag while pressing on (release)//user lets go of mouse { stopDrag();//button stops following mouse if (this.hitTest(_parent.myTarget))//on target? { _parent.dynText = "bulls eye!"; } else { _parent.dynText = "nope!"; this._x = 100; this._y = 286; //put this back } } See examples in DragDropJeffHeigl.zipDragDropJeffHeigl.zip

Pull-down menu Create a button Drag a few instances from library Align all but one (Window > Align) Make these a movie clip Give this clip an instance name: myMenu Action in first frame: myMenu._visible = false; Action in top level button: on (release, rollOver) { myMenu._visible = true; } How do we get menu buttons to go away? on (rollOut) { myMenu._visible = false; }

Flash for multimedia development Importing graphics File > import (look at All Formats) You can resize or rotate graphics Modify > Break Apart to get effects in Flash Video uses Sorensen Sparc codec Changing quality vastly changes file size Movies play at frame rate of Flash movie Sound wav files converted to mp3 internally Stored automatically as symbols in library Select imported sound from frame properties

Command with fscommand Usage: fscommand("command", "parameters") Send a message to Flash player about how to play: E.g. fscommand(“fullscreen”, true); Send a message to a scripting language such as JavaScript in a Web browser. E.g. In the Flash file: fscommand("messagebox", "This is a message box called from within Flash."); In the HTML file: you can put a function, in format “myMovie_DoFSCommand(command, args)” To call ActiveX control Through JavaScript calls (like above) using the embedded ActiveX control ID in the function In Flash Project files (.exe), you can invoke other exe applications with command=exec and parameters=my_exe_filename

Where to go from here? Experiment with Flash UI components Buttons, radio buttons, etc., made easier Just add functions as event handlers Good web sites and forums: macromedia.com/devnet/mx/flash/ flashkit.com actionscript.org Other vendors provide useful tools Swish for animated text (used in CIMEL) 3D graphics, more components, etc. Is there a presentation topic or two here?