Animation l.jpg
Advertisement
This presentation is the property of its rightful owner.
1 / 13

Animation PowerPoint PPT Presentation

Animation Chapter 3 Animation What is it? Anything that moves on the web. Examples? Note, many types of animations require plugins (e.g. Flash, RealPlayer, QuickTime, etc) Goals of Animation Get attention/entertain/advertise Explain Set mood Examples Advertisement Punch the monkey

Download Presentation

Animation

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


Animation l.jpg

Animation

Chapter 3


Animation2 l.jpg

Animation

  • What is it?

    • Anything that moves on the web.

  • Examples?

  • Note, many types of animations require plugins (e.g. Flash, RealPlayer, QuickTime, etc)


Goals of animation l.jpg

Goals of Animation

  • Get attention/entertain/advertise

  • Explain

  • Set mood


Examples l.jpg

Examples

  • Advertisement

    • Punch the monkey

      • Entice viewer to click in the window, which is a link to some commercial site

    • Can distract from the main content of the site

    • Can consume a deal of bandwidth

  • Mood

    • Eyeball Design: FX Zone

      • Adds to the ‘feel’ of the page

      • Does not detract from main content, but enhances it (if done right)


Examples cont l.jpg

Examples (cont.)

  • Entertainment

    • Strong Bad: New Hands


How animation works on the web l.jpg

How Animation works on the Web

  • Frame Animation

    • A series of still images displayed one after the other. Each image differs slightly from the previous.

      • File size depends on the number of frames and amount of change between each image

      • Can produce very large files

      • Most banner Ads are in this form

    • Example

      • Napoleon Dynamite Animated Gif(Buddy Icon)


How animation works on the web cont l.jpg

How Animation works on the Web (cont.)

  • Vector Animation

    • Used when objects move across a defined path

    • Typically requires a plug-in (like Flash)

    • Requires less file space

    • Has little need for compression

      • Why?

        • Uses mathematics to define shapes, paths, and speeds.


Compressing frame animation l.jpg

Compressing Frame Animation

  • Each Frame is compressed as discussed last week.

    • Each frame is an image, thus each one is compressed as a separate still image

  • Frame difference compression is then applied (works best with line drawings)

    • What is Frame difference compression? (discussed more in chapter 5)

      • Rather than storing each frame individually, only the change in pixels is stored between each frame.


Lets look at an animated gif l.jpg

Lets Look at an Animated Gif

  • Open Napolean Dynamite in Adobe Photoshop to se each frame


File formats for animation l.jpg

File Formats for Animation

  • Animated gifs do not require plug-ins

  • Flash: .swf

  • Fireworks: .phg

  • Video

    • QuickTime: .mov

    • RealVideo: .ram

    • Windows Media: .wmv

  • Plus many more (mpg, dcr, etc)


Building animation in flash l.jpg

Building Animation in Flash

  • Check out page 62-64

  • Lets check it out in class!


Creating 3d animation l.jpg

Creating 3D Animation

  • Cinema4D

    • Reasonably priced software

  • GMAX

    • Free learning tool for 3D object creation and animation

  • 3D Studio Max

  • Etc.


Embedding animation in a web page l.jpg

Embedding Animation in a Web Page

  • Animated gifs

    • These are inserted the same way a still image is inserted

  • Check page 68 for information on ebedding flash files (.swf)

  • Good Usablity Note!

    • Rather than placing a video right on the page, put a link allowing the users to choose to view the video or not.


  • Login