(R561) Interactive Animation Using MS Liquid Motion

Liquid Motion is a moderately powerful and very easy-to-use package which lets you build user-controlled animations for the Web. You create animations that:

• Follow prescribed pathways that you can build, test, and modify
• Are invoked using various mouse actions, such as "Mouse Click", "Mouse Moves Over", and others
• Can interact with the mouse in terms of attraction or avoidence
• Can interact with other "actors" (images, text, icons) in the scene, in terms of attraction or avoidence, or control of attributes such as size, color, location, rotation, and motion
• Let you control the magnitude, frequency, and lifetime of actions
• Provide "z-stacking" for control over the layering of objects
• Provide limited 3D animation with control over positioning and lighting

Acquiring Liquid Motion

Using Liquid Motion

You can use Liquid Motion to:

• Create a motion path for an object: click on the object, click on Animate > Record Motion, move the object with the mouse in a series of straight lines terminated with a single click, and terminate the sequence with a double mouse click. You can subsequently edit the line by draging parts of it with the mouse.
• Control the operation of object "B" through object "A":
  • For object "B" you create some behavior:
    • Click on the object on the right side to highlight it
    • Click on a behavior in the toolbars or menu above the split window (e.g., Grow, Shrink, Animate > Record Motion etc.)
    • Click with the right mouse on the behavior icon which appears underneath the object icon on the left side of the split window to expose the "Properties" menu.
    • Specify the various properties of the operation including the all-important "Timing > Start" sub-menu which must be set to "When Triggered". In most cases you need only alter the elements in the first 2 tabs of this sub-menu and can leave the other tabs with their default values.
  • For object "A", you
    • Click object "A" on the right side of the split window to hightlight it
    • Click on the "Trigger" icon in the extreme right hand side of of the 2nd toolbar
    • Select the "Action" (such as "Mouse Click", or "Mouse Moves Over"), the "Result" (Turn On or Turn Off), and the "Target" (the action for object "B"). In most cases you need only alter the elements of the "Trigger" tab in this menu and can leave all of the other tabs with their default settings.
• Publish a Liquid Motion animation to the Web:
  • Enlarge the split window to the size you wish to appear on the web
  • Click on Save As to save it first in some directory in your PC
  • Click on Publish. This exposes a submenu which you work through. To publish to the Homer web server you make the following choices:
    • Select "FTP Server" as your publish option
    • Select the name of your HTML file (or accept the name you saved it with)
    • Select "None" for the "Splash" image file names
    • Decide if this will appear alone or with other animated objects
    • Enter your FTP Server: "homer.u.washington.edu" and supply your Homer login name and password
    • Enter the complete directory path on homer of the sub-directory where you wish to place this animation, e.g., "/hw00/d11/larryg/Lmotion3" in my case.
    • Then click on "Upload" to finish the process

The following example Fun with text demonstrates user-controlled animation. Click on the Coffee cup before you try to click on "Click This", and pass the mouse over the apple to see what happens to "Goodbye World".

Class Topics

Graphics Design Based on Edward Tufte's Principles

Using the Graphics Equipment in the Vislab

Clickable Image Maps

Scrollable Frames

Clickable Image Maps with Frames

Simple Animated GIFs Using MS FrontPage

Interactive Animation Using MS Liquid Motion

Exporting PowerPoint and Other Graphics to the Web

3D Animation Using VRML

Incorporating Plugins in Your Browser

Using and Adapting Java Applets

©1998 UW Computing & Communications