chapter 8 interactive multimedia authoring with flash animation n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Chapter 8 Interactive Multimedia Authoring with Flash: Animation PowerPoint Presentation
Download Presentation
Chapter 8 Interactive Multimedia Authoring with Flash: Animation

Loading in 2 Seconds...

play fullscreen
1 / 46

Chapter 8 Interactive Multimedia Authoring with Flash: Animation - PowerPoint PPT Presentation


  • 196 Views
  • Uploaded on

Chapter 8 Interactive Multimedia Authoring with Flash: Animation. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Chapter 8 Interactive Multimedia Authoring with Flash: Animation' - teleri


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
what is multimedia authoring
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
common types of multimedia production
Common Types of Multimedia Production
  • Business presentations
  • Advertising kiosks
  • Games
  • Educational: training and tutorials
  • Use of multimedia authoring program
multimedia authoring program
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
multimedia production process
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
media elements
Media Elements
  • Often created outside of the multimedia authoring program
  • In Flash:
    • Use pencil and brush tools
    • Create vector graphics
types of media elements supported by adobe flash
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
export the project
Export the Project
  • Web playback
    • 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
animation
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
what a timeline looks like in adobe flash
What a Timeline Looks Like in Adobe Flash

Frame numbers

A layer with a seqence of frames

Details about timeline is covered in Sections 8.5.3 and 8.6, which are in the next two Powerpoints.

types of techniques to create animation in multimedia authoring program
Types of Techniques to Create Animation in Multimedia Authoring Program
  • Frame-by-frame
  • Tweening
  • Scripting
frame by frame
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 animationhttp://www.youtube.com/watch?v=zO8MlSjo0T0
frame by frame example1
Frame-by-Frame Example

Frame 1

Frame 6

Frame 2

Frame 7

Frame 3

Frame 8

Frame 4

Frame 9

Animation

playing 2 fps

Frame 5

tweened animation
Tweened Animation
  • Content in frames between 2 keyframes is interpolated
  • These interpolated frames are called in-between frames.
continuing with the bird example
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 10
  • 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
example of bird tweening position
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

what can be tweened
What can be tweened?
  • Position (shown in the bird example)
  • Rotation
  • Size
  • Color
  • Opacity
  • Shape
example of shape tweened bird
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

example of shape tweened bird1
Example of Shape Tweened Bird
  • Position (tweened)
  • Rotation
  • Size (tweened)
  • Color
  • Opacity (tweened)
  • Shape (tweened)

Animation

playing 30 fps

animation by scripting programming
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
animation frame rate
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)
adjusting speed of a frame based animation
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
example of adjusting speed
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

example of adjusting speed1
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:

example of adjusting speed2
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:

flash most essential workspace elements
Flash - Most Essential Workspace Elements
  • Tools
  • Stage
  • Timeline
  • Property Inspector
  • Library
tools panel
Tools Panel

Contains tools to

  • select the visual content
  • modify the content
    • draw
    • scale
    • rotate
    • erase
stage
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.
timeline and keyframes
Timeline and Keyframes
  • Timeline
    • 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 keyframewith content on the stage
    • An empty circle in a frame: a keyframewithout any content on the stage
keyframes in flash
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?
frames and keyframes
Frames and Keyframes
  • Any non-keyframes frames subsequence to a keyframe has the same content as that keyframe
frames and keyframes examples
Frames and KeyframesExamples

Keyframe: frame 1

Frames 1 – 4 has the same content as in frame 1 in Layer 1 on stage

to create keyframes in flash
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.
to convert a keyframe into a regular frame
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.
to insert frames in flash
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.
to remove frames
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.
property inspector
Property Inspector
  • Displays the information and properties that can be edited
  • If a frame on the Timeline is selected:
    • 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
property inspector1
Property Inspector

This object on stage is selected.

Its x, y, width and height are displayed and can be changed by entering different numbers.

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