Click to return to the Design home page    
Web Workshop  |  Design

Cooking with Liquid Motion: An Easy Recipe for Animation


June 17, 1998

Nadja Vol Ochs
Interactive Media Designer, Microsoft Corporation

The following article was originally published in the Site Builder Network Magazine "Site Lights" column. (Now MSDN Online Voices "Design Discussion" column.)

Serves: Animation to thousands of viewers

Preparation Time: 2 hours

Follow this easy recipe if you would like to reduce Web animation production time, quickly meet a deadline, or create a fully interactive multimedia experience for your Web site.

Ingredients:

Scott's tip #1: Adjust your parameters

"Because Liquid Motion is object oriented, you can take an actor and assign a behavior to him and then forget about him; he is now "alive" in the world you created. In a frame-based program, you have to maintain and control that actor with script or positioning every moment of your animation; you have a fixed movie, and if you're good at scripting, you can create the illusion of a dynamic world.

With Liquid Motion, you can have a truly dynamic world -- one that reacts to parameters you set, from interactivity from the user, the time of day, the phase of the moon, to the price of tea in China. To take advantage of this difference, it is important to create media and scenes that can be used in a wide variety of ways. It is also easy to adjust the parameters you set, so there is no end to the tinkering and playing you can do to your animation, just to see what happens!"

Scott's tip #2: Beware of moving GIFs

"Because of how easy it is to animate in Liquid Motion, you should consider any object can (will) move against what you have in the background. Transparent GIFs should be cleaned, so there is as little anti-aliasing against the background as possible. Also, because it is for the Internet, it's important to watch the K size."

Scott's tip #3: Think 'Design'

"Web designers and graphic artists need to realize that a Liquid Motion animation can be a design element for an existing site. They can be placed and used just as you would a GIF or JPEG, so they can be designed into a page from the beginning. For example, you could create an animation the same size and shape as a JPEG that was originally in your page, and start your animation off with the same JPEG. For Internet Explorer 4.0 users, the background for your entire animation can be transparent, so your elements can appear to play over your actual page."

Directions:

Download and install your trial version of Liquid Motion Non-MSDN Online link. Start up Liquid Motion, and begin to play. Next, take a look at the user interface of the tool. Become familiar with the smart timeline, the structure view, the animation recorder, and other UI elements Non-MSDN Online link.

Choose a scene, import some graphics, and start to play.

Results:

I followed the recipe above and created the Elements animation for my last Site Lights article in about an hour.

Screen shot of Liquid Motion sample
Figure 1. Screen shot of the Elements Liquid Motion sample

Over all, I am very impressed by how easy this tool is to use. I found it quite intuitive; I didn't need to look anything up in help. A long time ago, I created a CD-ROM prototype using Apple's Media Tool Kit. This process enabled me to learn about authoring object-oriented interactivity. Interactivity authoring all came back to me as I started to create Liquid Motion triggers, which enable interactions. I realized how easy it was to author interactivity using Liquid Motion.

For more Liquid Motion recipes, visit the Liquid Motion Web site Non-MSDN Online link.

Nadja Vol Ochs is the design consultant in Microsoft's Developer Relations Group.

Photo Credit: PhotoDisc



Back to topBack to top

Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.