With Microsoft Liquid Motion, even a novice can create swell-looking animations for Web sites (and personal amusement) in no time.

Microsoft® Liquid Motion™ is not an easy product to describe. It's an animation tool for the creation of Web content, but it's more than that. It's a tool that lets you create interactive content quickly and easily. It lets you script that content, giving you complete control over what's happening on your page. And unlike many popular Web animation tools, it doesn't have a high learning curve or require quite a bit of artistic talent, so you won't need to hire specialists to produce suitable content. Liquid Motion is dead simple to use and the results can be stunning.       The secret to Liquid Motion is a Java engine that allows your animation to run on multiple platforms in any browser that supports Java and JavaScript. This engine allows you to combine text, images, and sound into an animation and give you precise control over the behavior of these objects. Once an animation is created, the project can be published to a directory, an FTP server, or a FrontPage® 98-based Web. Additional features can be added that are specific to Microsoft Internet Explorer 4.0 or higher.       You can download a time-limited demo of Liquid Motion from the Microsoft Web site (http://www.microsoft.com/liquidmotion) and then order the program online during the trial period or after your time runs out. Once you have the program, you can rerun setup and download additional clip art from the Internet. The added artwork is really fab. Building an Animation       When you launch Liquid Motion, you're presented with a Getting Started dialog that allows you to choose between opening a new template, using an existing animation file, or starting a new animation without a template. To get things rolling, I'll take you though building a new animation from scratch.       The large area inside the main Liquid Motion window is called the animation workspace. Inside that workspace you'll see a resizable box that defines the area of the animation scene. To add an object to the scene, you select an object type from the Liquid Motion toolbar. Liquid Motion lets you add images, sounds, text, 2D and 3D objects, effects, and plug-in shape types. You can even add other Liquid Motion animations. You can see in Figure 1 that I've added a couple of text objects to a Liquid Motion scene.

Figure 1: Adding Text Objects to a Scene

If you're used to working in Macromedia Director or Flash, you might be a little baffled by the Liquid Motion user interface. The program uses a single timeline that controls the various objects in your animation. To make things more understandable, you can enable Structure View from either the toolbar or the View menu. Structure View gives you an outline from which you can select objects in your scene. Once an object is selected, you can change its properties, add an animation effect, or add a trigger event. The duration and visibility of an object in a scene is indicated by the bar in the timeline when the object is selected.       In Figure 2, the text object MIND starts off in the center of the scene. I've got the Liquid Motion text object starting outside the scene window so it can't be seen at this point. The line that you see drawn around the MIND object is a motion path that I created by clicking the record button and then dragging the MIND object around the scene. After creating the path, the action can be viewed by clicking the Play button. The speed at which the animation plays back depends on the duration value. You can set this value either by entering the number of seconds in the Duration dropdown listbox, or by stretching the green indicator in the timeline when the motion path is selected beneath the object. The motion path can be edited by selecting the path in the outline and dragging the path line around in the animation workspace.

Figure 2: Motion Path for the MIND Object

To get to the advanced capabilities of the motion path, double-click the motion path in the Structure View. This will bring up the properties dialog for the motion path. The settings on the TimeEffects tab let you exercise quite a bit of control over how the moving object behaves, allowing for acceleration, deceleration, and even slow motion.       Creating a motion path for each of the objects in the scene and then clicking the play button presents two independently moving objects. When the objects move outside the confines of the scene window they disappear. Drawing the path outside the scene window lets you make the actor enter from a different location.       All this animation is great, but the feature that makes using Liquid Motion more compelling than a standard animated GIF image is interactivity. Since each of the objects in any given scene is live, you can adjust the behavior of the object based on user interactions such as mouse clicks. The easiest way to do this while making sure that you're accessing the object that you really want to use is to select the object from the outline in Structure View. The Interactivity menu item lets you select from a URL link, a trigger, a script trigger, or two animation options, avoid and follow.       Adding a URL link to an object is simple. Just select the object, then select Interactivity | URL Link from the Liquid Motion menu. You'll be presented with a properties dialog box that lets you specify the location of the jump and even the frame where you want to display the object. This option is important as it lets you use Liquid Motion to create some super buttons for your pages.       If you'd rather not create a unique motion path for each of your objects, you can try out Liquid Motion's built-in animation effects. You'll find them under the Animate menu selection. You can add multiple animation effects to a single object, once again controlling how and when that effect occurs by selecting the effect in the outline and adjusting the Duration and Play loop in the Liquid Motion toolbar and timeline.

Figure 3: Adding Animation Effects

You can see in Figure 3 that I've added two animation effects to the Liquid Motion text actor. The Jump effect moves the actor around the scene randomly. The Animate Color effect changes the color of the actor. Notice that when Animate Color is selected the green bar in the timeline starts at 10 seconds and ends at 20. I made this adjustment by moving the bar with my mouse. Now, when the animation runs, the color change in the actor doesn't start to occur until 10 seconds into the animation. A Little More Interactivity       Hyperlinks and preset effects let you create animations quickly, but to give the user a true feeling of interaction, you'll want to do things with your animation in response to user events. In the next example, I'll create a simple button, and then I'll insert it into a new animation that will work as a button bar for a Web site.       Buttons are a well-understood concept. But sometimes buttons don't look exactly like buttons; in these cases you might want to give the user a hint that they are about to click on a button. One way to do this is to change something about the button during a mouseover event.       What I'll do is to create a button that uses a color change to indicate that the user currently has the mouse pointer in the correct position for a click. Let's take the button creation step by step, and then I'll discuss what's happening in the scene.       First, create a new scene and make it the size of the button object that you want to create. I created a rectangle approximately 100 pixels high and 200 pixels wide. Make sure that the duration value for the scene is set to forever.       Add whatever shapes you want to create the look you're going for. I decided to do a semi- industrial thing with a circle inside a rounded square. On top of that I put a rounded rectangle and a text caption.       Duplicate the item that you want to show a change, and make sure that the duplicate and original are lined up directly on top of one another. Change the color of the duplicate and then change the Timing property of the duplicate so that Start is set to When Triggered.       Add four trigger effects to the scene. The first effect should Turn Off the Rectangle object when the Mouse Moves Over the scene. The second effect should Turn On Rectangle (2) when the Mouse Moves Over the scene. The third trigger should Turn Off the Rectangle (2) when the Mouse Moves Off the scene. The fourth trigger should Turn On the original Rectangle object when the Mouse Moves Off. Because this animation will be used as a button, you should make sure that all these triggers are added to the scene rather than a particular actor (see Figure 4). This will make the whole button live later on. Add a URL link to the scene, save it to disk, and test it.

Figure 4: Adding Trigger Effects

Moving the mouse over the scene window should cause the Rectangle object to disappear and the Rectangle (2) object to appear. If everything is lined up properly, it will look like the rectangle has simply changed color. When you move the mouse out of the scene, the original rectangle should return.       To test the new animation in Internet Explorer, choose File | Preview in Browser from the Liquid Motion menu. The first time you preview an Figure 5: The Finished Button Bar animation, a wizard takes you though steps that will publish your work to your hard drive for testing, to an FTP server, or to a Front-Page-based Web. After you get though the wizard, a page containing your new animation should pop up in Internet Explorer. If the mouseover event and hyperlink work, then you should be ready to use this new animation in a toolbar.       This step is the easiest one yet. To build a toolbar using the button animation, just open a new Liquid Motion animation and use Insert | LM Animation File to add your button to the animation. Repeat this for the number of buttons you wish to add. You'll notice that these button objects are each held together as an inner scene in the new animation file.       You'll want to change the caption and URL for each of the buttons in your scene. To access the objects with-in any inner scene, just expand the outline and select the object that you want to edit or examine. You can edit any of the buttons in any way you wish. You might want to change the color of the circle or square to make each of the buttons dif-fer-ent—or add or remove shapes. What you do is up to you. The final step is to remove Rectangle (3)—the bar in the background—from the last button object. This will give you a completed bar.       You can see the bar previewed in Figure 5. Remember to check that the duration value for the bar is Forever. If you leave it set for 30 seconds, the bar will disappear after a while. This could be a bit shocking to your viewers, so make sure to watch the preview page for a minute or two before you publish. The code generated for the MIND button is excerpted in Figure 6. Exporting to FrontPage 98       After completing the construction and testing of an animation, you can publish to the Web through the File|Publish As menu selection. This will simply copy updated files to the location from which you tested your animation. If that's where you want to publish, then you're all set.       If you want to publish to a FrontPage 98 Web, you've got a couple of options. Option one is to publish to a new folder. Each Liquid Motion project you publish is added to a unique subfolder in the folder where you are publishing. This directory includes the subfolders containing the Liquid Motion Java engine and other ancillary files.       You'll most likely want to add your animation to an existing Web page, and once you start using Liquid Motion, you'll want to add more than one animation to your Web. To get around this potential folder problem, move the Liquid Motion directories to a common location in your Web folder. The Liquid Motion animation will show up in the FrontPage editor as a bot, so you can just copy the bot from the Liquid Motion HTML file that's created and paste that code into the proper position in the page where you want to publish. Finally you'll need to double-check the paths in the file to make sure they match the position of the Liquid Motion files and directories. It takes a little figuring to get this just right, but once you do, it's pretty easy to publish your animation files efficiently.       The second option is easier. You can export Liquid Motion animation directly into a page currently open in the FrontPage editor. The animation will be placed at the current cursor location and the Liquid Motion support files will be placed in the proper folders in the open Web. I had a problem the first time I did this, but I was able to fix things by getting rid of the Liquid Motion bot that was created on my page and then retrying the operation. You might also make sure that the page where you want the new animation file placed has been saved before you perform the publish operation. Conclusion       If you're looking to add complex animation to your Web pages without spending a fortune, then Liquid Motion is the current leader in the field. What you'll find is a program that's easy for nonprogrammers—and even nonartists—to use. It will allow you to create interactive animation that can rival nearly anything out on the Web today.       This is a tool capable of creating content that can be run in either of the big two browsers and that can add a whole lot of pizzazz to your Web pages. The more I use Liquid Motion, the more I like it. The best thing about Liquid Motion is that it's a fun product. The sky is the limit on the animation that you can produce. There should be an SDK available for Liquid Motion by the time you read this. I can't wait to get my hands on it. See the sidebar "Third Party Add-Ins"

From the November 1998 issue of Microsoft Interactive Developer.