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
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
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
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
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.
Independently animate attributes such as position, opacity, rotation, scale, skew, and color, among many other elements. Because LiveMotions timeline is object-based, and not layer-based, each attribute can be keyframed separately.
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.
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:
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.
1. Design the basic buttons using geometric tools
2. Apply Style from the Styles palette. Results:
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
1. Open the Timeline window
Rotation effect --> RotateMan
Scaling effect --> ScaleMan
Opacity effect --> OpacityMan
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.
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.
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)
A good introduction to scalable vector graphics is given at:
A good review of Flash is available at
A good presentation of LiveMotion features is given at
A comparison of LiveMotion and Flash is given at: