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 sequencean
  example
• GIF constructor set makes this easier see
  http//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 selectCreate
  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 -gt Move Control -gt stop
• Or select Expert mode and type stop()
• ActionScript Flashs 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) ltactiongt else ltactiongt
• 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 functions behavior
• Select help icon to read reference manual

13
Publishing Flash movies

• File gt 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 -gt Input text
• Set Var (variable) to inText (identifier)
• Click on background box to left of Var
• In second box
• Properties Static text -gt 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, 2nd targetBox
• Give each clip an ltInstance Namegt
• 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 gt 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 gt import (look at All Formats)
• You can resize or rotate graphics
• Modify gt 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 commandexec and
  parametersmy_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?