1. Animation Part I: Interactive Multimedia Authoring with Flash
“Computers and Creativity”
Richard D. Webster, COSC 109 Instructor
Office: York Road, Room 422 | Phone:  (410)
109 website: 

2. What is Multimedia Authoring?
Process of multimedia production
Assembling media elements
Adding interactivity
Export project for distribution to end users
Final product can be:
played back in a Web browser
a stand-alone executable

3. Common Types of Multimedia Production
Business presentations
Advertising kiosks
Games
Educational: training and tutorials
Use of multimedia authoring program

4. Multimedia Authoring Program
Allow you to combine text, images, audio, video, animation into an interactive presentation
May have its own scripting language
to add interactivity
Examples:
Adobe Flash/ActionScript
Adobe Director/Lingo

5. Multimedia Production Process
Collect media elements
Assemble media elements
Add interactivity
By scripting or computer programming
Example: Use ActionScript in Flash
Export the project into a format that your target audience can play

6. Media Elements
Often created outside of the multimedia authoring program
In Flash:
Use pencil and brush tools
Create vector graphics

7. Types of Media Elements Supported by Adobe Flash
Bitmap images
Photoshop (PSD), BMP, GIF, JPEG, PNG, TIFF
Vector graphics
Flash Movie (SWF), Adobe Illustrator
Digital Video
QuickTime (MOV), AVI, Flash Video (FLV)
Digital Audio
WAV, MP3, AIFF, AU

8. Export the Project Web playback Stand-alone version Mobile apps
SWF file
Smaller size than stand-alone
Playable in a Web browser that has the Flash player
Windows, Mac OS, and Linux
Stand-alone version
Mobile apps
AIR app for iOS
AIR app for Android

9. Animation Like video A sequence of images
Create illusion of movement when played in succession
Commonly used in multimedia projects
Animation sequence is created as a sequence of frames
Usually on a timeline

10. What a Timeline Looks Like in Adobe Flash
Frame numbers
A layer with a seqence of frames
Details about timeline is covered in Sections and 8.6, which are in the next two Powerpoints.

11. Types of Techniques to Create Animation in Multimedia Authoring Program
Frame-by-frame
Tweening
Scripting

12. Frame-by-Frame
By explicitly placing different visual content for each frame
Each frame is a keyframe
A frame in which the content is explicitly specified.
Different from a frame in which the content is interpolated between frames.
Like flipbook animation

13. Frame-by-Frame Example1 2 3 4 5 6 7

14. Frame-by-Frame Example
Animation
playing 2 fps
Frame 5

15. Tweened Animation
Content in frames between 2 keyframes is interpolated
These interpolated frames are called in-between frames.

16. Continuing with the Bird Example
In tweened animation,
what you need to do:
create 2 keyframes: frames 1 and 10
only explicitly place the bird at x=11 in frame 1 and x=20 in frame
what the computer does for you:
Creates all the in-between frames automatically
place the bird at x=12 in frame 2
place the bird at x=13 in frame 3
...
place the bird at x=19 in frame 9

17. Example of Bird Tweening Position
Frame 1
Frame 6
Frame 2
Frame 7
Frame 3
Frame 8
Frame 4
Frame 9
Animation
playing 2 fps
Frame 5

18. What can be tweened? Position (shown in the bird example) Rotation
Size
Color
Opacity
Shape

19. Tweening
Both “Classic tween” and “Motion tween can be used to animate symbol instances.
“Shape tween” is used to animate shapes

20. Example of Shape Tweened Bird
Frame 1
Frame 50
Frame 10
Frame 60
Frame 20
Frame 70
Frame 30
Frame 80
Animation
playing 30 fps
Frame 40

21. Example of Shape Tweened Bird
Position (tweened)
Rotation
Size (tweened)
Color
Opacity (tweened)
Shape (tweened)
Animation
playing 30 fps

22. Animation by Scripting/Programming
Does not rely on a sequence of frames on timeline
Dynamic:
Animation can be programmed to respond to the user's interaction
Animation can be different in a different play through

23. Frame-by-Frame vs. Tweened vs. Scripted
Rely on a fixed sequence of visual content on timeline
Always same animation every time you play
Dynamic and interactive
Require scripting

24. Frame-by-Frame vs. Tweened vs. Scripted
Relative work in general required in creating the visual content
longest
shortest
Choice of animation involving complex or organic motion such as walking and dancing
may be
Choice of animation involving continuous motion that can be interpolated

25. Animation Frame Rate Playback speed of the animation
In frames per second (fps)
Too low: choppy
Too high: choppy if the computer is not fast enough to process and display the frames
Maximum rate in authoring programs
not exceed the frame rate setting
not guaranteed to maintain the frame rate (slower computer may play at frame rate lower than the setting)

26. Adjusting Speed of a Frame-based Animation
Suppose you have a frame-based animation and want to change its playback speed.
General Strategy: Avoid eliminating frames if possible
To speed up:
Increase frame rate if possible and keep the number of frames (preferred)
Keep the frame rate but reduce the number of frames (not preferred)
To slow down:
Keep frame rate but add more frames (preferred)
Reduce frame rate but keep the number of frames

27. Example of Adjusting Speed
Suppose you have this 5-frame animation and you want to slow it down.
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5

28. Example of Adjusting Speed
Suppose you have this 5-frame animation and you want to slow it down.
If you reduce the frame rate and keep the same frame number:

29. Example of Adjusting Speed
Suppose you have this 5-frame animation and you want to slow it down.
If you reduce frame rate and keep the same frame number:
If you keep the frame rate and add more frames:

30. Flash - Most Essential Workspace Elements
Tools
Stage
Timeline
Property Inspector
Library

31. Tools Panel Contains tools to select the visual content
modify the content (like using the appropriate tools to draw vector graphics)
draw
scale
rotate
erase

32. Most Essential Workspace Elements
Stage

33. Stage Where a Flash movie plays Background color can be set:
in Property Inspector, or
by choosing Modify > Document...
Area outside of the stage:
Gray color
Objects placed there will not be visible when the movie plays.
Note that if a graphic is in the gray area outside the stage, that graphic will not be visible when the movie plays

34. Most Essential Workspace Elements
Timeline

35. Timeline and Keyframes
A stack of layers
Content in a layer cover the ones beneath it
A series of frames across
A circle in a frame: a keyframe
A solid circle in a frame: a keyframe with content on the stage
An empty circle in a frame: a keyframe without any content on the stage

36. Keyframes in Flash In this example: Which frames are keyframes?
Which keyframes have content on the stage?
Which keyframes do not have content on the stage?
1. 1,5,11,15,21,30
2. 1,5,15,30
, 21

37. Frames and Keyframes
Any non-keyframes frames subsequence to a keyframe has the same content as that keyframe

38. Frames and Keyframes Examples
Keyframe: frame 1
Frames 1 – 4 has the same content as in frame 1 in Layer 1 on stage

39. To Create Keyframes in Flash
Do any of the followings:
Select a frame in the Timeline and select Insert > Timeline > Keyframe
Select a frame in the Timeline and hit the F6 key
Right-click (Windows) or Control-click (Mac OS) a frame in the Timeline and select Insert Keyframe.

40. To Convert a Keyframe into a Regular Frame
Do any of the followings:
Select a frame in the Timeline and select Insert > Timeline > Clear Keyframe
Select a frame in the Timeline and hit the Shift-F6 keys
Right-click (Windows) or Control-click (Mac OS) a frame in the Timeline and select Clear Keyframe.

41. To Insert Frames in Flash
Do any of the following:
Select a frame in the Timeline and select Insert > Timeline > Frames
Select a frame in the Timeline and hit the F5 key
Right-click (Windows) or Control-click a frame in the Timeline and select Insert Frame.

42. To Remove Frames Do any of the following:
Select a frame in the Timeline and hit the Shift-F5 keys
Right-click (Windows) or Control-click (Mac OS) a frame in the Timeline and select Remove Frames.

43. Most Essential Workspace Elements
Property Inspector

44. Property Inspector
Displays the information and properties that can be edited
If a frame on the Timeline:
displays the frame property
If the frame selected is a keyframe, you can also assign a frame label and a tweening to that frame.
If an object on the Stage is selected:
displays the object’s properties that you can edit, e.g.,
x and y
width and height

45. Property Inspector This object on stage is selected.
Its x, y, width and height are displayed and can be changed by entering different numbers.

46. Most Essential Workspace Elements
Library

47. Library
Stores symbols, imported bitmaps, and sounds to be used in the project.
Symbols are explained in Section 8.6 and next Powerpoint.

48. Review
When publishing a Flash movie as a stand-alone executable, you would publish the movie in its .fla format.
When publishing a Flash movie for the web, you would publish the movie as a .swf file.
A dynamic animation technique which allows animation to respond to user interaction is animation by scripting.

49. Review . . .
The timeline is the panel made up of a stack of layers with frames indicated across.
The tools panel provides you with the tools needed to draw vector graphics.
Graphics must be located on the stage to be visible when the movie plays. Graphics in the gray area outside of the stage will not show up when the movie plays.

50. Review . . .
Both Classic Tween and Motion Tween can be used to animate symbol instances.
Shape Tween is the tweening used to animate shapes.
The color and width of the path in the motion guide have no effect in an object’s motion.

51. Review . . .
A mask item acts as a window that reveals the area of linked layers that lie beneath it. The rest of the mask layer conceals everything else on the linked layers.
In the Timeline panel, the mask layer should be directly above the maskee layer.
The resulting effect will be seen on the stage by locking the mask layer.