[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]

[an error occurred while processing this directive]homeback about/faq features tutorials resources members search

Tutorial - Adobe LiveMotion 1.0 - Beginner to Intermediate

Learn Basic Animation with Adobe LiveMotion 1.0

Screen shot of the LiveMotion project

Tutorial & Viewlets by Bonnie Bucqueroux

Getting a move on with LiveMotion

Welcome to the tutorial that will teach you the basics of creating Flash animations (.swf files) with Adobe LiveMotion 1.0.

If you don't own it yet, Adobe offers a free 30-day trial so that you can follow along with the tutorials.

Click here to see the simple animation that I have created using the program. The tutorials will take you through the process step by step.

This week, I present the first two tutorials:

  • Adobe LiveMotion - Part I - Opening and saving a project and adding text. Download approximately 60 seconds on a 56K modem. Runtime for the Viewlet is almost three minutes.
  • Adobe LiveMotion - Part II - Changing position and opacity and adding images. Download approximately 60 seconds on a 56K modrm. Runtime for the Viewlet is just over three minutes.

Note: The tutorials were created in ViewletBuilder 2.5, as Viewlets, from Qarbon.com. For ideal viewing, your resolution should be set on 800 by 600 or higher. On some monitors, you may still need to scroll right (horizontal) to access the playback controls located on the right-hand side of the Viewlet. Viewlets will typically run on their own, but you can use the playback controls on the right-hand side of the Viewlet (or your arrow keys) to scroll through the frames at your own pace, if you prefer.

The lure and danger of animation on the Web

The Internet proves that people love to click and people like to watch things that move. We have all seen people run their cursor back and forth over a simple rollover, almost as if mesmerized. So why doesn't every site feature animation?

The first challenge is to do animation well. We all shudder at the thought of pseudo-animation like the dreaded Blink tag. And who among us has not felt duped after waiting minutes for an animation to download, only to find it dull or annoying.

Another obvious problem is that animations almost always add significantly to the bandwidth requirement. There is good reason to worry that visitors will leave before seeing those bells-and-wonderfully-animated-whistles if you make them wait too long. Flash, with its lean. fast-loading .swf files, was a vast improvement over animated gifs. But even then, asking visitors to watch the little loading graphic for two or three minutes on a modem connection is asking a lot.

Flash's .swf files also come with their own set of problems. Flash is now bundled with most new browsers, but there are still visitors who will need to download and install a plug-in to see your masterpiece. Flash animation also remains inaccessible to the disabled, at least so far.

Frustrating as well is that .swf files work like a runaway freight train -- once the train takes off, you are stuck until the end of the ride unless you jump off and abandon the trip. You cannot fast forward, back up or skip segments. (And designers who fail to offer a 'Skip intro' button to spare repeat visitors from having to watch the entire opening sequence again and again when all they want is the company's phone number deserve to find themselves serving time in hell being forced to watch their own creations over and over.)

Like so many things in life, done well, Flash movies are utterly captivating -- as Ferry Halim's site demonstrates. Then there are efforts that are, shall we say, less successful.

Yet my problem has always been that learning how to create Flash movies with Macromedia Flash inevitably dropped to the bottom of my To-Do list. I bought a copy back in the days when it was SunSplash and FutureSplash, before it became part of Macromedia's web empire. Yet after paying for all the upgrades, I never even mastered the basics. I never seemed to get the rhythm of the interface. With Photoshop, I was a ballerina floating across the stage. With Flash, I lurched from one treacherously icy step to another.

The learning curve

Adobe has decided to compete with Macromedia for the market of people like me who want a product that is more familiar and easier to master. LiveMotion is still in its infancy, but the Adobe interface makes it intuitive for me in a way that Flash never was.

LiveMotion is a bit of a toy compared to Flash, and we hope Adobe resolves some of the major issues with the next upgrade. Using masks turns the vector drawings into bitmaps, which defeats the benefits of creating lean vector graphics. And LiveMotion does not have the scripting capabilities that make Flash such a stellar product. But for a newbie who already knows Photoshop, LiveMotion may mean the difference between dreaming about creating .swf files and actually producing them.

Please note that I do not have a financial interest in Adobe or any of the companies or products mentioned in this article.

Photo of Bonnie Bucqueroux

Bonnie Bucqueroux consults on online training initiatives through her company Digital-training.net , and she assists her husband with his web design business Newslink Associates. Bonnie co-hosts the Mid-Michigan Chapter of Webgrrls at Michigan State University and is a frequent presenter at the WEBCities series produced by CMP Media. She also continues to work for progressive police reform and victim advocacy.

[an error occurred while processing this directive]


Learning Podcasting by Carolyn Wood.


Complete list of past tutorials.


Printable version of this page

Link to us

Join the discussion lists

passionate about the web