Print
Discuss
Send to friend
RSS feedsAnimation can either bring a website alive or turn it into a slow-loading and tacky disaster. The trick is in the implementation. Web animation is most often seen in those familiar banner ads with changing text and images that most commercial websites use.
But animation can be as simple as a button that changes when you pass your mouse cursor over it, or as clever as series of frames that give the impression of movie footage. Homepages crammed with complex and file-heavy animation can have visitors immediately searching for the Skip Intro option.
But a little of the simple stuff can be a major enhancement instead of an annoying obstruction. And, thankfully, features such as scrolling text, changing images and motion menu buttons are relatively easy to set up.
Behind the scenes of an animated website, there are often a few simple files, which load up along with the rest of the page whenever a visitor lands on your site. For example, banner ads and other animated images are often a GIF file - a series of images (at least two), which, when viewed through a web browser, are displayed in sequence to either give the impression of animation or a moving image.
You can create one of these animated GIFs yourself in an image editing program, or download and use a preconstructed one from sites that specialise in such things.
Many other simple animations, such as text that changes colour or scrolls across the screen, and basic rollover images, can be set up in web design programs such as Dream-weaver and FrontPage. In this edition of Build Your Own Website, we'll look at some of the most popular varieties of web animation and demonstrate how best to use them on your site.
Free animation
Further on, we have included step-by-step instructions on creating your own animation in an image-editing program. But there are also plenty of websites offering free animation that anyone can download and include in their own websites.
Once you have found an animated image that you want, it's usually just a case of right-clicking on it and choosing Save Picture As. A Save Picture dialogue box will appear whereby you can change the name of the picture and store it on your computer. Most animated pictures will be saved as a GIF file, and must remain as this file type to ensure they can be played as animation.
More sophisticated animation can be created in the Macromedia Flash format. The full version of the Flash MX animation program is fairly expensive (about £500 from Macromedia's online store). However, individual pre-built Flash animations can be copied for free from a number of websites, including Flashiness.
Flash animation requires your visitor to have the Shockwave/Flash browser plug-in installed so that it can be viewed correctly. However, Flash is so widespread these days that most surfers will have added the free Flash player to their systems.
Flash animations can be extremely powerful and are useful for opening screens or introductions and animated banners. Some websites require you to register with them before downloading a Flash movie. Others have a limited number of free samples and require a paid subscription to access a wider choice.
Banner ads can be produced for free via some websites such as AdDesigner at www.addesigner.com. All you need to do is provide the text for your ad and it's created for you. Constructing your own banner using an animation program is equally effective and we have included instructions on how to do this. Also, remember that animated text may be just as good as a banner ad.
DIY animation
Some image editing programs enable you to create your own animation for inclusion in a website. Jasc's Animation Shop (part of Paint Shop Pro) can create an animated GIF using a series of images. The file size of a GIF is usually quite small, so it's quick to open on a web page.
However, if a series of large images are used to create an animated GIF, the resulting file size may be too cumbersome and slow to load and/or run. For smooth-flowing animation, make sure the images you use are all the same size, and don't get too ambitious.
Web design programs such as FrontPage have a number of easy-to-use animation features. Scrolling text that moves across the screen can be quickly set up by clicking on the Insert menu, selecting Component and choosing Marquee. From the dialogue box that appears, enter the text you want to display and change the settings that dictate how it will appear.
FrontPage also offers page transitions, whereby the entire page can fly in or dissolve, for example. Other animation options from FrontPage include DHTML transitions for images and text. Available on the DHTML Effects toolbar (right-click on any toolbar button and choose DHTML Effects), select an object such as an image, then use the drop-down lists on the toolbar to choose an animation style.
Unfortunately, some web browsers don't support these FrontPage features, so it's worthwhile testing them thoroughly first and weighing up the pros and cons of using them.
It's a rollover
Dreamweaver contains some simple but effective animation including rollover images. This is where an image can change when the mouse pointer is positioned over it.
When editing a page in Dreamweaver, click on the Insert menu, choose Interactive Images and select Rollover Image. From the dialogue box that appears, browse for two images you want to use. Using two similar, yet slightly different images (two pictures of the same face but with different expressions, for example) is a good way to simulate a simple bit of motion.
Text can also be changed in Dreamweaver in a similar way to a rollover image. By inserting Flash text into a web page, the text can be used as a hyperlink, and can change colour when the mouse pointer hovers over it. This is particularly useful for creating links to other pages in your website. Flash text is on the same submenu as a rollover image.
Dreamweaver has some more complicated animation features including the facility to move objects around the screen. This is achieved by creating a layer, then using a timeline to move the layer. Dreamweaver's sister program - the full version of Flash MX - can also be used to create more sophisticated animation.
Watch out for ...
One of the biggest problems concerning animation is file size, which slows down the loading of a web page. As a general rule, the more complex the animation, the larger the image files, so keep things simple. Don't add too many animations to the same page and keep the size of each frame down to the absolute minimum.
A flashy animated intro page might seem like a good idea, but not everyone has broadband. It's a good idea to include a 'Skip Intro' button to give dial-up users the option of getting straight to the main part of your site.
Don't cram too many images into a GIF, but bear in mind that the animation may seem jerky if too few are used. Incorporate a transparent background into the GIF to reduce its file size.
Test the download time of a web page containing animation, and test it using a variety of computers and internet connections. If an animated page takes a long time to download, consider adding a message such as 'Loading', or look at ways of reducing the size of the files making up the page.
Some animation features may not appear through certain web browsers. Once again, thorough testing is vital to find out whether all the elements of your page are compatible with the most common versions of Internet Explorer, Netscape Navigator, and any other browsers. To be on the safe side, it's worth testing your site on different operating systems and different types of net connection.
There is a very fine line between the effective use of animation and a slow, overcrowded clutter of flashing and moving objects. It's easy to get carried away, too. Use animation subtly, tastefully and sparingly and it can make for an impressive addition to your website.
Creating an animated GIF in Animation Shop
There are a number of animation programs that can produce animated GIFs from a series of pictures. Jasc Animation Shop is supplied with Paint Shop Pro. The following instructions show how to create an animated GIF using Animation Shop version 3.04, supplied with Paint Shop Pro 7. You will need at least two images ready to use before you begin.
Step 1
With Animation Shop open, click on the File menu and choose Animation Wizard. An Animation Wizard dialogue box will appear. An animated GIF can be created using a pre-defined size, or using the size of the first image. Choose one of these options, then click on Next.
Step 2
Choose the default canvas colour (transparent or opaque), then click on Next. You will then need to choose some options concerning how an image is positioned on screen in the event of it being a different size to the first image or frame size specified in step 1. Click on Next when you have done this.
Step 3
Options concerning the number of repeats for animation (indefinitely or a specific number of times) and the amount of time a frame is displayed will appear. To change the time setting, click inside it and type a new time, or click on the triangles next to it. Click on Next when you have finished.
Step 4
You're now ready to add some images to the animation. Click on the Add Image button. Another dialogue box will appear. Select one or more images (use Ctrl+click), then click on the Open button. The images will be listed in the first dialogue box. Use the buttons in this dialogue box to reorder or remove them.
Step 5
After selecting two or more images to use, click on Next. The Animation Wizard is now ready to build your animation, so click on Finish. The different images (frames) will appear on screen. To see them animated, click on the View menu and choose Animation. The animated GIF will appear in a separate window.
Step 6
To stop the animated GIF, close the window. Returning to the separate images (frames), click on the File menu and choose Save. A Save As dialogue box will appear. Enter a name for your GIF, choose a location in which to save it, and click on Save. Some settings for quality and file size will appear. Make any changes and click on Next.
Step 7
According to the settings chosen in step 6, the GIF will be saved and optimised for the web. Once this is complete, click on Next and a preview screen will appear showing the original image and the optimised one. If the quality of the optimised GIF is too poor, click on Back and change the settings. Otherwise, click on Next for a summary of the GIF, then click on Finish.
Creating animated text
These instructions show how to create animated text using a free program on a website. There's nothing to download or install, just complete the following four steps over the internet.
Step 1
Connect to the internet, launch your web browser and go to www.3dtextmaker.com. The screen that appears will enable you to enter some text to animate and specify its colour, font, size and style of animation. Start by choosing a font, using any of the six drop-down lists for different font categories. A sample of the selected font will be displayed below.
Step 2
After selecting a font, scroll down the screen and select a colour for your animated text using the colour palette on screen. Scroll down further and select any dimensions (under Step 3). Under the Step 4 heading, click on the first drop-down triangle and choose an animation effect for your text. Choose any other settings below, such as the speed of animation.
Step 3
Once all the settings have been chosen for your text, enter the words themselves in the white box at the bottom of the screen. Click on the button labelled Make 3D Text! If you have omitted any required settings, a message will appear on screen and you will need to complete the relevant section(s). Otherwise, the animated text will appear on screen.
Step 4
With the animated text displayed on screen, right-click on it and choose Save Picture As. A Save Picture dialogue box will appear. Enter a name for your animated text and save it onto your computer. Make sure it's saved as a GIF file with a .gif extension. You can now insert the animated GIF into a web page.
Summing up:
Avoid cluttering a website with too much animation.
Animated GIFs are some of the easiest and most effective motion images to include in a website. You can create your own or copy some from specific websites.
Web design programs such as Dreamweaver and FrontPage include features to create your own animation.
Animation programs such as Jasc Animation Shop can create animated GIFs using a series of images.
If you don't want to create your own animation, there are lots of websites on the internet offering free animation to copy and include in your own website.
See also:
If you want to offer advice or share your thoughts with the masses, set yourself up with a blog. We show you how to get involved in this growing phenomenon 30 Sep 2004
Creating your very own corner of cyberspace needn't be hard work. In this feature we cover the design aspect of building a website 05 Jul 2004Whether you want to promote your business, share your hobby with like-minded folk, or show off your photography skills, we tell you how to get started ... 03 Jul 2004
All Online
del.icio.us
Digg this
reddit!
