Animation and Interactivity

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

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

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

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

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

6. GIF89a • Added simple animation capability • Many images included in one GIF file • Browsers will show animations in sequence—an example • GIF constructor set makes this easier: seehttp://www.cse.lehigh.edu/~glennb/mm/gifcon/

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

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

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

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

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

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

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

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

15. Drag and drop (1) • Create two boxes (drag and target) • Convert to symbols: both as movie clips • Call 1st symbol dragBox, 2ndtargetBox • Give each clip an <Instance Name> — • Call 1st clip myDrag and 2nd 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)

16. 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.zip

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

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

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

20. 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?