Trick Banners in Zoner GIF Animator 5

Zoner GIF Animator offers the world's simplest method for creating "trick" Web banners. These look like ordinary Windows controls and therefore get a higher click-through rate than any other type of banner.

Why are trick banners showing Windows controls so successful?

These banners are clear and easy-to-read. Every user is accustomed to Windows' buttons and system font.

It is often not clear at first sight where the banner leads. But be careful - make sure the target page offers something worth your reader's time: this is the only way to make a click-through into a sell-through!

These banners work on, above all, beginning Net users, who interact with them as if it were a real Windows dialog.

How to Create a Trick Banner

Let's take a look at how to create a banner like this one:

1. Configure Zoner GIF Animator for the creation of a 468 x 60-pixel banner. We recommend that you set the thumbnails to the same size as the animation: in the dialog for the View | Thumbnail Size | Define Custom Size command, enter a custom thumbnail size of 468 x 40. Then activate this size using the View | Thumbnail Size | Custom command.

2. Activate the dialog for generating simulated system controls, using the Frame | Insert Simulated-Control Frame menu item. Select "Dialog" (the default) in the Control drop-down list, and set the simulated dialog's parameters: Top 0, Left 0, Right 468, and Heigth 60.

3. Add text using the Frame | Insert Text Frame item. For our example, you'll be using 18-point Arial Bold text. You can position text within the banner directly, using this dialog's preview area, or in the Zoner GIF Animator 5's work area. You can position a text object precisely using the Frame tab of the Control Panel (to the left of the work area): use its Left position and Top position boxes.

4. Add system icon with exclamation mark, again using the genrator for simulated controls. Select "Icon" in the Control drop-down list, and choose "Exclamation" in the Type drop-down list. An icon's position can be set either visually and directly in the dialog, or in the main window.

5. Add OK button, again using the generator for simulated controls-the Frame | Insert Simulated-Control Frame command. Use a Width of 65 and a Height of 25, and type in the button's text. Just as for a text object, a button's position can be set either visually and directly in this dialog, or in the main window.
Tip: if you select several frames at the same time (using the Ctrl key), they will be displayed "on top of each other" in the work area, so you can check their positions relative to each other.

6. Now you've created all the elements of the animation, and the only step remaining is to get them moving. (If at this point you preview the animation by clicking Player button [] the frames will animate like this:

To get back to editing mode, stop the animation by clicking the same button []again.)

7. Our goal now is to show the dialog and occasionally show the button being "pressed." We'll start by copying button (the animation's 4th frames). The animation frames are most simply copied by holding the Ctrl key and dragging them. Our sample animation now contains a total of five frames. Using the Merge function, we'll merge the first four so that the banner starts out with the whole dialog showing. Select the first four frames at the same time, and use the Frame | Merge Frames menu item. Two frames will remain in the animation.

8. Now set the "pressed" button state for OK button. Double-click the copy of OK button, to call up the dialog for simulated controls, and click the Pushed checkbox here. The animation will look like this:

9. Now you just need to set an appropriate time for each animation frame. You set this time using the Duration box in the Frame tab of the Control Panel. The values here are measured in hundredths of seconds. For the first frame in the example, the value 150, i.e. 1.5 sec., has been used. For the second frame, the value is 20, i.e. 0.2 sec.

10. Now all you need to do is optimize the animation file. If you've been creating the animation exactly according to the above steps, you'll find optimization shrinks it from an original size of 88,294 bytes to a mere 5,985 bytes.

The final version of the banner:

You can download the source file for the animation (in its state from step 6) by clicking here and using, for example, the Save As command in your browser's File menu.