Microsoft Liquid Motion by Design: An Example-packed Guide to Creting Web Animations Using Microsoft Liquid Motion

Microsoft Liquid Motion by Design: An Example-packed Guide to Creting Web Animations Using Microsoft Liquid Motion

by Gavin Schmitz
     
 

Create a better Web experience by creating more appealing and memorable Web pages. Microsoft Liquid Motion is the easiest way to quickly add interactive animations and special effects to Internet sites. They're playable in Java-enabled browsers, viewable without downloading plug-ins, and take advantage of Dynamic HTML and Direct Animation capabilities of Microsoft

Overview

Create a better Web experience by creating more appealing and memorable Web pages. Microsoft Liquid Motion is the easiest way to quickly add interactive animations and special effects to Internet sites. They're playable in Java-enabled browsers, viewable without downloading plug-ins, and take advantage of Dynamic HTML and Direct Animation capabilities of Microsoft Internet Explorer 4. The technology integrates well with Microsoft Office and Microsoft FrontPage, and features a similar interface. This product is targeted for the FrontPage user. "Microsoft Liquid Motion by Design" covers Microsoft's hot new Web animation tool with two resources in one: a detailed features guide and a hands-on projects book. The features guide takes the reader step-by-step through using tools, menus, wizards, and other functions, from creating instant animation without programming to adding color, motion and interactivity with just a few mouse clicks. The projects section of the book shows several designs that users can tailor for their own needs, such as adding complex movements and actions. A companion CD includes a trial version of Liquid Motion.

Product Details

ISBN-13:
9780735605268
Publisher:
Microsoft Press
Publication date:
10/01/1998
Series:
Web Titles
Pages:
255
Product dimensions:
9.12(w) x 7.24(h) x 0.94(d)

Read an Excerpt


Chapter 11: Adding Files and Transitions to Animations

Adding Filters to Animations

Liquid Motion features a number of filters, which highlight entire animations. For instance, you can add a drop shadow to the animation borders, instantly change all colors to their opposites on the spectrum, and add a rippling wave distortion over the animation. You can even make everything appear partially transparent as if seen through a mist or hazy screen.

Many of the filters affect all actors within an animation. For example, the Negative filter reverses the colors of all actors in the animation, including images. A Wave filter creates a rippling distortion over the scene (which can be a great way to introduce a "dream sequence"). Two of the filters, Glow and Drop Shadow, can also be made to appear outside animation borders; for instance, Your animation can have a glowing halo around the edges. In this case, objects within the scene are unaffected.

For all of these effects, if the background of the root scene is transparent, the filter is visible on the actors within the animation.

Adding a Drop Shadow to an Animation

The Drop Shadow filter adds a colored drop shadow outside the animation borders on a Web page. If the root scene background is transparent, a drop shadow will appear to fall from each actor within the animation (as pictured here), rather than around scene borders.

By default, the color of the drop shadow is gray, but you can change that to any color (basic or custom). You can also adjust the position of the drop shadow in relation to the borders of the animation.

It's important to note that if your animation has an opaque background (filled with color or an image), when you view it in a browser, the Drop Shadow (or Glow) filter may be barely visible around the animation borders. As a workaround, you can increase the size of the window in which the animation plays on your Web page (to allow more space for the filter). You can do this by editing the HTML file created from the animation during publishing.

Adding a Halo Glow to an Animation

The Glow filter is a dynamic effect that adds a col-ored "halo" around the animation borders on a Web page. The glow brightens and faces repeat-edly the entire time the animation plays. If the root scene background is transparent, a halo glow will appear around each actor in the animation (as pictured here), rather than around scene borders.

By default, the glow color is yellow; however, you can change it to any basic or custom color. You can also adjust the intensity of the glow.

Changing Animation Colors to Grayscale

If you want to create a black-and-white film effect, you can convert all colors to grayscale by applying a Gray filter to the animation.

Reversing Animation Colors Using a Negative Filter

You can create an eye-catching effect with a Negative filter, which instantly reverses all color values in an animation to their opposites on the color spectrum. For example, an interesting technique is to combine this filter with interactivity, so when a viewer moves the mouse over the scene, all the colors change.

The color reversal applies to all actors in the animation, including images. Furthermore, if a color animation behavior is applied to any actor, animation the Negative filter reverses the color cycling as well. For instance, if the behavior is set to cycle from red to blue, the cycle will now flow from light blue to yellow (the opposites of red and blue on the color wheel).

Making an Animation Partially Transparent

As we saw in Chapter 2, you can design a scene background to be transparent. However, using a Transparency filter, you can make an entire animation (including all actors within it) partially transparent, for a translucent effect.

In scenes that are less than 100 percent opaque, the Web page color will affect colors in the animation, showing through the partial transparency. For example, a white Web page will lighten all colors in the animation; the extent of this lightness (or darkness) depends upon the scene's opacity.

Adding a Wave Distortion Over an Animation

Perhaps the most versatile and unusual filter is Wave, which adds a dynamic rippling distortion over the animation. You can change the appearance of the effect in a variety of ways. For in-stance, you can adjust the number of waves, the direction they flow, the strength of the distortion, and more.

The color and look of the Wave effect depends largely upon the de-sign of the root scene background:

  • Image background. The waves appear black. The background image and actors within the scene appear unchanged, with waves scrolling over them.
  • Colored background. Waves appear the color of the background. Actors within the scene appear unchanged, with waves scrolling over them.
  • Transparent background. Waves appear black and are seen only over the actors within the scene. No waves appear in the transparent areas of the background....

Customer Reviews

Average Review:

Write a Review

and post it to your social network

     

Most Helpful Customer Reviews

See all customer reviews >