Start Your Own Internet Business
Where to Start

Research
Creating The Product

E-Commerce
Promotion
Google Adwords
Affiliates
E-mails

E-zines

Offline

Search Engines

Workshop

Forward   

Introduction

Hosting

What You Need

Planning

Composer

Templates

Graphics

Tables

Image Maps

Frames

Forms

Meta Tags

Publishing

Test

Create Ebooks

EBooks
Cover Design

Cover Thin Flat

3D Cover

Graphics & Art

Introduction

Animation

Side Bars

Converting

GIF's & JPEG

Scanning

Site Design

Dimensions

Colours

Artwork

Links

Multimedia

Converting

MP3's

Streaming Audio

Screen Capture
Videos

Radio Shows

Jukebox

Extras

PDF Files

Validate
Scripts
Training Videos
Macromedia

Animation on a page brings life and colour. Most people who surf the Internet appreciate a cleverly designed page and a couple of clever animated Gif's can make all the difference. If your page is just for family or friends you can have a great time with many of the online creations. At this site you can even add your own text.

ORGANIZING YOUR WORK

There are plenty of links below for other animated gif sites, however, we are also interested in helping you to build your own. It will take a little organizing to make sure you get the pictures in sequence and also to keep the colours lining up. The beauty is you can build something even if you are not very artistic.

The best way to start is to build a very simple animated gif first. You will need to make sure that in your graphics program you compile the gif using the same size frame each time. Save each individual gif in sequence so that when your compiling the finished product it will be in order.

Microsoft GIF Animator 1.0 Rick Rovegno (You can download in the software area)

A freely downloadable supplement to the Microsoft Image Composer tool bundled with Microsoft FrontPage 97, Microsoft GIF Animator 1.0 is a simple program that delivers nearly everything you'd want from a GIF animator.

The application opens a floating Window on the desktop rather than a full-size screen. Its interface, completely icon-driven and lacking standard Windows menus, is easy to use but surprisingly non-standard for a Microsoft product. To the screen's left, GIF Animator displays thumbnails of the frame sequence. To the right, a three-tab dialog box lets you control the animation's properties.

These properties are grouped into Options, Animation, and Image. Under Options, you can control aspects of how your animation is displayed in a browser with choices for dithering method and palette selection. Palette options include using the browser palette, an optimised palette, or a custom palette. Under Animation, you can adjust the animation's height, its width, and the number of loops it runs. The Image tab provides settings for the length of time each frame is displayed and the horizontal or vertical position of the image--if the size-setting under the animation tab is larger than the actual image area. You can load existing GIF images, any image on the Clipboard, or .AVI video files. Although GIF Animator does not provide transition settings or effects, you can drag and drop images into Microsoft Image Composer and manually create effects frames yourself.

Microsoft does not provide phone support for GIF Animator, but the help files are clear, and the company hosts an Internet newsgroup for users. Considering how functional and simple this tool is, we can easily recommend it to FrontPage users or anyone else in need of a GIF animation tool.

Microsoft GIF Animator 1.0. List price: Free. Microsoft Corp., Redmond, WA; 800-426-9400, 206-882-8080; fax, 206-936-7329; www.microsoft.com. If you can't find it here try http://www.jhepple.com/gif_animator.htm or do a search on goggle. You will also find a copy in the private files section.

GIF Animation
(Using Microsoft Gif Animator for Windows)

Microsoft Gif Animator allows you to combine several separate images into a single animated GIF file, which can be viewed as an animated sequence in a web browser or other programs which can display animations. Microsoft Gif Animator is part of the Microsoft Image Composer package that is included with some versions of FrontPage for Windows.

This tutorial assumes that you have created a series of separate image files in any draw/paint program. To avoid problems, all of the images should be the same size (i.e. same height and width, usually measured in pixels), file format (GIF is a good choice) and colour palette (256 colours maximum). So that you don't mix up the order of the images, it is a good idea to name these files with a sequence number. e.g. image1.gif, image2.gif, image3.gif, ...

1. Launch the Microsoft GIF Animator application program by clicking on the Windows Start menu / Programs / Microsoft Image Composer / Microsoft  Gif Animator
   
2. The following window will appear.
   
   
    
3. Open a file directory window which shows the icons for the sequence of image files you have prepared (to do this go to the desktop, double-click on My Computer, then double-click on the icon for the disk where your images are located and open the correct folder if necessary). Position the directory window so that it is visible right next to the Microsoft Gif Animator window, similar to the example below. This will enable you to drag and drop files from one window into the other.
   
   
    
4. Click and hold your mouse on the first image, then drag the file icon over to the blank rectangle near the top left of the Microsoft Gif Animator window, then release the mouse.
   
   
    
5. Similarly, drag the second image into the second blank rectangle which appears in the Microsoft Gif Animator window. Continue on until all of your images have been dragged.
   
   Note: A quicker way to do the above is to highlight ALL of your image icons at once (Click the mouse above and to the left of the first image, and hold-drag to form a dotted selection rectangle around all of the image file icons, then release the mouse - all of the files should be highlighted. Then click on any highlighted part of the selected icons and drag over to the Microsoft Gif Animator window. Presto! - all images are brought in at once, instead of doing each file separately.
   
   
    
6. After all of your images have been dragged in, your Microsoft Gif Animator window should look similar to the following.
   
   
    
7. In the above window, you can click on the Preview Button to view your animation so far. You will see that it only goes through the cycle one time (and perhaps too quickly) and then stops moving.
   
8. You can control the number of times that the animation loops - often animations are set to loop indefinitely. Click on the Animation tab, then click on the Looping box to put a check mark in it.
   Limited looping: In the Repeat Count box, click on the up arrow until the number of iterations you want appears (or type in a number).
   Endless looping: Click in the box next to Repeat Forever to put a check mark in it.
   If you wish, click on the Preview button to see your animation again.
   
   
    
9. If your animation moves too fast, you can slow it down by changing the duration that each frame is displayed. A quick way to do this is to select all frames (use the Select All button from the Gif Animator toolbar shown on the left below) and then click on the Image tab. In the Duration (1/100 s) box, click on the up arrow until the desired number (e.g. try 25) is displayed - or just type in a number - units are in hundredths of a second. Click on the Preview button again. If the speed still isn't right, experiment with the duration time until you get you get the speed you like.

   Note: It is also possible to select individual frames and give them each different durations if you want.

   Select All:

   Image Tab:

10. In the above window, you may also want to set an option to make the background of your images transparent - ensure that there is a check mark in the Transparency box on the Image tab shown above, and the transparent colour is set to the background colour of your images. This option is recommended if you will be using this animation on a web page with a background of a different colour than the background of the GIF image. A transparent image allows the background of the web page to show through, with only the foreground of the image displayed. For example, you wouldn't want a rectangular white background to show up around your image when it is displayed on a webpage with a blue background; however, if both image and webpage background are white, it wouldn't matter.

    Transparent GIF

    Non Transparent GIF

11. Finally, save you file by clicking on the Save As button in the toolbar.
    
     
12. A standard file save window will appear. To the right of the words Save in, locate the disk and folder where you would like to store your file. To the right of File name provide an appropriate name for your gif animation file. Finally, click on the Save button.
    
    
     
13. To verify that your animation works correctly, locate the file directory containing your animation file (go to the desktop, double-click on My Computer, then double-click on the icon for the disk where your animation file is stored and open the correct folder if necessary), and then drag and drop its file icon on an open Netscape or Internet Explorer window. The web browser should be able to display your animation with the timing and looping as you set it.

© Copyright 2001, University of Alberta

TUTORIAL by David Geller

The Article below is compliments of David Geller, a director of online engineering for Bellevue, Wash.-based Starwave Corp.

GIF89aD New Life for a Familiar Format

The GIF format has exploded in popularity, thanks largely to the fact that it was one of the first formats supported by graphical Web browsers. GIF images offer fairly good compression and can be edited using a variety of commercial and shareware imaging programs. GIF images support interlacing, which allows for more realistic progressive rendering, and transparency--the key to making images that can sit nicely on top of other graphical backgrounds. But the most exciting feature of this now-mature format (GIF89a standard) is its ability to store multiple images or frames and display them in a controlled, sequential manner.

Netscape 2.0 was one of the first browsers to support animated GIFs, and a quick survey of some of the Internet's most popular sites indicates that the use of animated GIFs has started taking off in a very big way. During the NBA finals, for example, animated GIFs were used to demonstrate basketball highlights.

Many advertisers have turned to animated GIFs to draw attention to their products. Now that Microsoft's Internet Explorer 3.0 has been released (also with support for animated GIF images), there's little reason not to consider using this versatile and compact file type. Beside being easy to create, animated GIFs now support image looping, and they don't require special programming on the server side, which used to be required with server-push animations.

GIF Construction Set

On the PC, the most popular program for creating animated GIFs is GIF Construction Set from Alchemy Mindworks. This easy-to-use, inexpensive shareware package supports image looping, interlaced GIF images, and transparency. It also features an Animation Wizard that will guide you through the process of selecting and preparing an animation sequence.

Two other notable features in Construction Set are the "banner" and "transition" tools. The banner tool allows you to type in a text message, which is then turned into a scrolling GIF image.

The transition tool lets you select an image and then apply one of several special effects to create one that's animated. The release I tested supported four types of wipes, several splits, tiling, and an interlaced effect.

ActiveX

Microsoft is pulling out all the stops to make sure you learn about the ActiveX framework. Cantered in part around OLE (Object Linking and Embedding) Controls, ActiveX is the vehicle that the software giant hopes will carry interactive content on the Internet. If you had to compare ActiveX to something more familiar, a Java applet would probably be the closest thing. But unlike Java, ActiveX controls aren't platform-independent. Even with Microsoft promoting cross-platform awareness and eventual support for ActiveX on other platforms (Metrowerks is driving support for ActiveX through Java on the Mac), a majority of ActiveX controls will be designed expressly for Intel-based PCs running Windows 95 or NT. If you're targeting animations for an intranet consisting primarily of Windows PCs, then this shouldn't be a concern.

The ActiveX site at Microsoft provides links to information, demonstrations, and software. One of the ActiveX samples that Microsoft provides is a marquee control that you can use for scrolling animation purposes. What's really neat about this control is that instead of referencing an image that you want scrolled, you specify another HTML page. The marquee control will read that page and then smoothly scroll it within whatever rectangular region you specify. And since the source for this control is HTML, you can put just about anything into it--even pages that contain animated GIFs.

Which Way do we go?

The question of whether to use GIF images or Java applets for your animation depends on what you want to do. If you want to use both GIF and JPEG images, tie in sound, support navigational control, and can rely on your users to have a Java-enabled browser (which will be practically everyone very soon), then Java is a great way to go. Applets like Animator and ClickBoard offer ready-to-use solutions that don't require any programming. All you do is create the artwork, store some Java class files on your Web server, and add an <APPLET> tag in your HTML file.

The downside to using Java applets, compared to GIF89a images, is the additional download time. The two Java applets we've described are each approximately 20 KB in size. Plus, they both use separate image files for each frame. If you had an animation sequence that required 10 images, that would mean 10 separate GETs your Java applet would be performing back to a Web server. Animated GIF images, on the other hand, are completely self-contained, with no extra code to download.

What makes Enhanced CU-SeeMe great for Webmasters is that you can add a few lines of HTML to your page and point people to reflector software residing on your server, so that they only have to click on a link to start up their own CU-SeeMe software and join your conference automatically. The White Pine Reflector software, needed to run conferences with more than two people, is currently available on 11 Unix platforms, as well as for Windows 95 and Windows NT.

For simple animations intended for Netscape 2.0 or later and Internet Explorer 3.0, consider going the GIF route. Both GIF Construction Set and GifBuilder are capable tools. For animation purposes, ActiveX components are, for now, a relative unknown. They have the potential to do almost anything a Java applet can do, but faster. Some of the early ActiveX animation controls, such as FutureWave's FutureSplash, are very impressive. Expect your choices in this arena to mushroom. The hardest part is preparing artwork that strikes a balance between appearance and compactness. On the Web, the name of the game, besides looking good, is loading fast. -- WD

David Geller is director of online engineering for Bellevue,
Wash.-based Starwave Corp.