Seminar 4

Vector Graphics on the WWW

© M. Firebaugh


I. Introduction


II. Vector vs. Raster Graphics

Review 2D Graphical Object Types 


 


What are the advantages of vector over bit-mapped graphics?


File size efficiency

Consider the following file from ArtWorks:

ArtWorks File Size [Vector Graphics] = 11Kb

GIF File Size [Bit-Mapped graphics] = 47 Kb


Consider the following file from Adobe Illustrator:

Illustrator File Size [Vector Graphics] = 12Kb

JPEG File Size [Bit-Mapped graphics] = 42 Kb


Infinite Resolution






The three main players in Vector Graphics for the WWW

  • Macromedia Flash [supported by 92% of WWW browsers]
  • Adobe LiveMotion 1.0
  • Scalable Vector Graphics (SCG) - The W3C Standard


III. Macromedia Flash Features and Basic Design

Flash offers exciting new features for creating immersive, lush interactive web sites.

  • MP3 streaming audio
      Export both streaming and event audio with MP3 compression to create compelling movie sound tracks while maintaining files small enough for efficient, low-bandwidth delivery.

  • Text fields for placing user-editable text in a movie
      Place text fields in a movie to let your audience edit text while a movie plays. Use text fields to create password entry fields, registration forms, surveys, and other forms for collecting data from users.

  • Enhancements to Flash actions that let you create sophisticated games, forms, and surveys
      The addition of sophisticated actions that can evaluate events and information while a movie is playing, and change depending on the result, let you create fully-functional interface elements such as slider controls, radio buttons, application menus, and more. Use the new actions to duplicate much of the functionality that can be performed with JavaScript and other scripting languages to create movies that maintain cross-browser, cross-platform compatibility so viewers have the same experience regardless of their configuration.

  • Sophisticated Library of Objects
      The redesigned Library window now makes it much easier to manage hundreds of assets for large projects. Create folders to organize and store assets. In addition to the name of a symbol, Library window columns now display symbol type, the number of times the item appears in the movie, and the last modification date. Sort library items by any of the columns.

  • Streamlined web publishing
      The Publish command is a one-step process for exporting a movie in multiple formats, as well as the supporting HTML file. Customize the individual properties of each format prior to publishing. You can also create your own external template file that instructs Flash how to write out specific HTML syntax.


Flash Basic Design

The basic design of Flash consists of four components:


    1. The Toolbar




    2. The Stage




    3. The Symbol Library




    4. The Timeline




Flash Symbols and Drawing Tools

Flash supports a minimal but powerful set of drawing tools:



The power of some of these tools is illustrated by the pencil tool



Another versatile tool is the PaintBrush



Perhaps the most impressive drawing tool is the reshape feature:




Symbols

"A symbol is a reusable image, animation, or button. An instance is an occurrence of a symbol on the stage. Symbols help you keep a file's size low and make editing a movie easier. "

To create a symbol:



To work with instances of symbols:



This nomenclature is consistent with OOP design.


Flash Layers

You can think of layers as transparent sheets of acetate stacked on top of each other. Where there is nothing on a layer, you can see through it to the layers below. Layers are used to organize artwork in a movie. You can draw and edit artwork on one layer without affecting artwork on another layer.


The basic idea of layers:




They can be re-ordered:




Layers help solve the z-depth problem:




Sound and Animation

Shockwave offers Streaming Radio Music

URL: http://v2.shockwave.com/bin/v2/entry.jsp


Animation

Example 1: Linear Motion - Tweening

    1. Insert an object (Eagle) on the stage

    2. Modify Layer 1 to name the layer "Eagle"

    3. With layer Eagle active, click on frame 25, and Insert --> Frame

    4. Click on the Eagle layer (to select the object) and Insert --> Create Motion Tween

    5. Click on Frame 25 and drag the eagle to the desired position (RedX)

    6. In the Controller window, click play

    7. Under File, choose Export Movie as Animated GIF, Quicktime, or Flash




Example 2: Shape Animation

    1. Insert or draw an object on the stage and name it Shape

    2. Click on frame 25 and Insert --> Key Frame

    3. Click on Key Frame 1 (Frame 1) and go to Modify --> Frame

    4. Select Tweening Tab, then select Shape

    5. Use Controller to play movie

    6. Export as Animated GIF



Example 3: Motion Along a Curved Path

1. Open Flash 4 and open the Graphics Library

2. Drag the objects you wish to appear in the animation scene to the stage, adding each object to a separate layer. (E.g., Aliens, Running Man, and Mouthman)

3. Name the layers appropriately by Modify --> Layer

4. Move to frame 1 and set a keyframe by Insert --> Keyframe for all three layers

5. Select a final frame (e.g., 40) and set a keyframe for all three layers

6. Select the "Man" layer and choose Insert --> Motion Guide

7. Select frame 1 and use the pencil tool to draw a curve from the beginning point (Mouthman) to the end point (Aliens) of the animation curve

8. Select the Arrow tool and click the Snap modifier (Magnet), and drag the center of the man to the beginning point. A black ring appears when it locks to the motion guide.

9. Choose Insert --> Create Motion Tween

10. Select the last keyframe (#40) and move the man to the end point in Aliens

11. Select Modify --> Frame to open the Frame Properties dialog box, click the Tweening tab, and select "Orient to Path Direction", then OK

12. Use the Controller to play the resulting Curve Animation

13. Save the animation using File --> Export Movie --> Flash


    or GIF


Example 4: Flying Text Logo


Example 5: Show/Hide Flash Layers


IV. Adobe LiveMotion

Adobe LiveMotion is a synthesis of

  • PhotoShop
  • Illustrator
  • AfterEffects

Adobe says:

Adobe LiveMotion provides designers with a rich set of content creation tools for creating both vector and raster graphics in one application for increased productivity. We took a bit of Photoshop, then added a touch of Illustrator and a dash of After Effects to create a powerful Web graphics and animation tool focused on the needs of today's Web designers. LiveMotion provides the integrated drawing tools you'd expect in a professional vector application, such as a fully functional Bézier Pen tool for creating and editing precise paths, as well as standard Polygon, Ellipse, and Rectangle shape tools. Rulers, Guides, and Grids, and multiple Selection and Transformation tools, round out the tool set, while the Preview mode allows you to test the interactive elements of your composition without exporting to a Web browser first.


Features of LiveMotion

Object-Based Timeline

Independently animate attributes such as position, opacity, rotation, scale, skew, and color, among many other elements. Because LiveMotion’s timeline is object-based, and not layer-based, each attribute can be keyframed separately.


Animation Styles

With the Adobe LiveMotion™ Styles palette, you can save any combination of creative effects - including color, texture, opacity, gradients, and fills, among other elements - as a style that can then be applied to other objects in your composition. LiveMotion also saves motion attributes as Animation and Rollover Styles. This makes formerly complicated motion tasks like animating text a breeze. For example, select any animated text object and save it as a style. The next time you animate a new text object, simply apply your saved style to the new text and you're done.


Seamless Integration with Illustrator and Photoshop

LiveMotion makes it easy to incorporate your native layered Photoshop and Illustrator files into your LiveMotion composition and add motion, interactivity, and sound. No need to flatten your files. No need to convert them into non-native file formats. No hoops to jump through - just drop your layered files into LiveMotion and you're ready to animate. Use the Edit Original command to edit your placed Photoshop and Illustrator images back in their native applications - any changes you make to the image in Photoshop or Illustrator will instantly update the image in your LiveMotion composition.


Batch Replace HTML Elements in GoLive with LiveMotion Images

Transform your site quickly by turning tagged HTML text into eye-catching banners, elegant icons, or other graphics on the fly. With LiveMotion, you can batch-update these graphics any time, meaning easy updates and maintenance. Drop these graphics into Adobe GoLive™ to update your site instantly. The original text remains in the Web page, making further changes and refinements possible. The secret is object-oriented bitmaps.


Vector and Raster Objects

Even though vector images are generally smaller than raster graphics, there are occasions when you may want the richness that only raster graphics can provide. LiveMotion recognizes your need for flexibility by allowing you to create both raster and vector objects in a single authoring environment. Turn on the Active Export Preview and LiveMotion will indicate if a selected object will export as a bitmap or as a vector image in addition to its exported file size.

Comparison of LiveMotion vs. Flash


LiveMotion Basic Design

LiveMotion provides a fairly complete toolset:

and an impressive array of attributes and methods menus to support objects created by the tools:

LiveMotion design is made easier using grids, rulers, and guides:

Using LiveMotion Layers to Create Drop Shadows

1. Create the object, select it, and click the New Layer button in the Object Layers palette:

2. With Layer 2 selected, click the layer offset tool and drag the new layer to the right and down about 4 pixels.

3. With Layer 2 still selected change its color to some darker version of the primary color.

4. With Layer 2 still selected, slide the Softness slider to the desired softness.


Designing Buttons using Styles

1. Design the basic buttons using geometric tools

2. Apply Style from the Styles palette. Results:


Creating RollOvers using LiveMotion

1. Select Oval Tool and drag oval onto new document

2. Under Styles palette, click "View Styles with RollOvers" button and select "JavaSWcrpt Magenta Gradient"

3. Note that the rollover image is automatically generated.

4. In the RollOver Palette, select "New RollOver State" and assign the color green to the automatically selected "down" state

5. Verify its operation by clicking on LiveMotion RollOver Button


Animating Objects with LiveMotion

1. Open the Timeline window

2. Create or import from library the object to animate into the Composition window

3. In the Timeline, click down arrow beside object name ("Purple ESP") to open attributes of the object. Open Transform and click Stopwatch icon to insert a Keyframe at time t=0.

4. Drag time marker to t = 2 sec, and drag the object to a new position (down and to the right). LiveMotion automatically inserts another keyframe at this point.

5. Drag the time marker to t = 4 sec, and drag the object to a new position (upward and further to the right. Again, a third keyframe is inserted and the parabolic path dotted in.

6. Export the animation as an HTML file.

Examine result--> ParabolaMan

It is straightforward to extend the transformations to rotation, scaling, skewing, and opacity:

Rotation effect --> RotateMan

Scaling effect --> ScaleMan

Opacity effect --> OpacityMan


V. Scable Vector Graphics - The New Standard

Scalable Vector Graphics (SVG) Standard

The World Wide Web Consortium has issued the SVG Specification

Here is what Adobe has to say about SVG:

Jaded by JPEGs? Had it with GIFs? Dithered until you can't dither no more? Sounds like you've got a case of the bitmap blues.... Time to wake up to the vector-graphics revolution and discover the wonders of SVG.

Besides being Something Very Good, SVG stands for Scalable Vector Graphics, the emerging XML-based vector-graphics format that is currently being developed by theW3C, a consortium that includes companies such as Adobe, IBM, Netscape, Sun, Corel, and Microsoft, among others. However, SVG is not your average image format: It gives Web designers precise control over the layout, fonts, color, and printing of their Web pages - among many other very cool things. Go on: Scale your graphics, use any font you want, and even print your Web designs - you've got resolution to spare, all at file sizes that make the dinkiest GIF look positively porcine.

The Scalable Vector Graphics (SVG) format is set to revolutionize the way graphics look on the Web. What is it? Quite simply, SVG is an open-standard vector graphics languagethat lets you design Web pages with high-resolution graphics that can contain sophisticated elements, such as gradients, animation, and filter effects, using plain text commands. SVG promises to bring precision and quality to Web graphics and design, delivering the layout capabilities, choice of fonts, interactivity, and colors that make a site shine.


Examples of SVG from Adobe


Advantages of SVG over GIF and JPEG

SVG offers a number of important advantages over bitmap or raster formats such as GIF:

Zooming. Users can magnify their view of an image without sacrificing sharpness, detail, or clarity.

Text stays text. Text in SVG images remains editable and searchable. There are no font limitations and users will always see the image the same way you do.

Small file size. SVG files are, on average, smaller than other Web-graphic formats such as JPEG and GIF and are quick to download.

Display independence. SVG images are always crisp on screen and print out at the resolution of your printer, whether it's 300 dpi, 600 dpi, or higher. You will never experience ugly "jaggy" bitmaps.

Superior color control. SVG offers a palette of 16 million colors, support for ICC color profiles, sRGB, gradients, and masking.

Interactivity and intelligence. Since SVG is XML-based, it offers unparalleled dynamic interactivity. SVG images can respond to user actions with highlighting, tool tips, special effects, audio, and animation.


Note: SVG, as an XML standard, needs a plug-in SVG player. Adobe provides a free, down-loadable one at



References:

Books

Using Flash - MacroMedia FLASH 4, MacroMedia, San Francisco, CA (1999)

Graphics, Animation & Interactivity with FLASH 4.0 by James L. Mohler, Delmar Thompson Learning, Albany, NY (2000)

Adobe LiveMotion User Guide by Adobe, San Jose, CA (2000)

Web Sites URLs

A good introduction to scalable vector graphics is given at:

A good review of Flash is available at

http://www.macromedia.com/software/flash/productinfo/features/

A good presentation of LiveMotion features is given at

A comparison of LiveMotion and Flash is given at:

SVG Specifications: