Animate Images for Your Ecommerce Website

Think animation is too hard and too pricey? Helen Bradley explains how to create a simple animation using the affordable Swish MiniMax software.
animation screen shot; ecommerce web design
Start by setting the movie size and the frame rate for your animation.
(Click for larger image)
.

Subtle animation is a wonderful way to give your ecommerce website visual appeal. Now, we don't mean frantic spinning, blinking Flash cartoons that distract and annoy. Instead of placing a static product image on your site, you can just as easily add an animation that pans slow across an image or that zooms slowly into it.

If you think animation software is expensive and hard to use, you may be surprised at just how quickly and affordably you can this. I'll show you how to make a sophisticated animation in minutes using a program called Swish MiniMax 3.

Download the Animation Software

The full-featured Swish MiniMax 3 is available as a free 15-day trial download. This program was designed to make it easy for anyone to make website animation. And at $69.95, it costs a lot less than some other big name programs. Swish MiniMax 3 creates standard SWF format files so they behave just like regular animations, and your visitors to your small business ecommerce site can view them on virtually any Web browser.

animation screen shot; small business ecommerce
Place your cropped image over the movie box. Here we're panning this image so it's aligned to the left edge of the box and extends past it on the right.
(Click for larger image)
.

Create a Movie

Once you’ve installed Swish MiniMax 3, launch the program. From the New Movie or Project dialog choose Movie Templates. Click Default, and then click OK. In the middle of the screen you'll see your movie, which is way too big right now.

Right-click it, choose Movie > Properties and adjust the size until it's how you want it to appear on your website. For a banner you might size it to around 600 x 100 pixels, or as a side image something like 160 x 200 is a good start. If you're replacing an existing image on your website then size the movie to that image size. In this tutorial, I've sized it at 400 x 100 pixels.

When selecting a Frame Rate, use the default value of 25 frames per second as a start. Don't choose less than 15 or the movie will be choppy, and while more than 25 will result in smoother animation you will also get a much larger file size. Next, select the Stop Playing at End of Movie checkbox, and click OK.

animation screen shot; ecommerce design
Once your image is in your movie you need to determine what kind of effect you will use. Here we use the Move effect.
(Click for larger image)
.

Add Your Image

The next step is to find an image to use and to insert it into your movie. Choose Insert > Import Image and open the file that you want to use. The file should be larger than the movie so that you can zoom it or pan it in your animation. I like to crop my image to size in a photo-editing program before I start. For this project, my image is 550 x 104 -- just a little taller than my movie and 150 pixels wider.

From the editing area, drag your image on top of the movie box outline -- make sure to cover the outline completely. If you want your animation to pan across the image -- a smart look that's easy to create -- then place the image so that its left side butts up against the left side of the movie. It will extend some distance over the right side of the movie.

animation screen shot; ecommerce design
In the Effects tab set the animation effect. We've moving this image 150 pixels to the left.
(Click for larger image)
.

Locate the timeline at the top of the window. Click in the timeline just opposite the name of the image. Right-click the blue marker and choose Move. The marker will jump forward about 10 frames, which is not sufficient, so drag the end of the marker to around frame 75 -- at 25 frames per second this gives you a three-second animation.

In the bottom right of the screen is an Effect tab, and it should show the word Move in its text box. Locate its Motion tab and set the _x: value to 'Move Left by' to indicate that you want the image to move to the left. Then set the number of pixels. My image is 550 pixels wide and my movie is 400 pixels wide so my image can move 150 pixels.

Click the Play button on the main toolbar to play your animation. Make sure that your image covers the movie box at all times; if the image moves too far to the left so that the movie box shows, then reduce the number of pixels it moves to the left.

Test and Save Your Animation

When your animation works properly, export your movie by choosing File > Export > HTML + SWF. Select a folder in which to store the movie and the web page file, and click OK. Swish MiniMax will create an SWF file and a web page that will play the file for you.

animation screen shot; small business ecommerce
To render your movie choose File > Export, and Swish MiniMax creates the swf and html files for you.
(Click for larger image)
.

Test your animation by opening the page Swish MiniMax created in your browser, and watch as the movie plays.

You can now take the code from this page and place it in your webpage where you want the image to appear. Alternately you can use the web page Swish MiniMax built as the basis for your own web page. Remember, to upload both the html page and the swf file to your website.

If you save your Swish MiniMax project file by choosing File > Save, you can open and edit it again later, if desired.

Once you have seen how easy it is to create a simple yet sophisticated pan animation in Swish MiniMax, you'll want to explore its other animation features -- for example, you may want to add some text and animate it moving in the opposite direction to the image.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com

Do you have a comment or question about this article or other e-commerce topics in general? Speak out in the SmallBusinessComputing.com E-Commerce Forum. Join the discussion today!


Comment and Contribute
* Required Field
Your email address will not be published


Note: No advertising, no spam, no keyword in name/nickname field. Thank you!

Free Resources

  • eBook
    The Threat Landscape Hardly a day goes by without the discovery of a new cyberthreat somewhere in the world! But how do you keep up with new malware and evolving...
  • eBook
    Case Study: NetApp A global data storage provider whose business is booming needed a best-in-class data center to serve as the backbone of its technical operations...

Subscribe To Our Daily Newsletter