This is exercise
12: developing an animated banner ad. You may want to walk through this warm-up
before creating your own. You're also welcome to jump right into coming u p
with your own original creation, skipping all the preliminaries.
Save the following four
banners to a storage device by right clicking on the images
(save to a diskette or to the desktop). You have two
file formats from which to choose: .jpg and .bmp. Save
each in .jpg format. Then
open each in Microsoft Image Composer and re-save in .gif
format.
Launch the Microsoft Gif Animator.
It's located in the same place as Microsoft Image Composer.
Click on the Open icon (yellow folder;
alternately, press CTRL + O) and select tgt1.gif from where
you saved it.
Press CTRL + I (or alternately,
push the appropriate icon) and insert tgt2.gif. Press CTRL +
I and insert tgt3.gif. Press CTRL + I and
insert tgt4.gif.
Click on the Animation tab. Check
the Looping and Repeat Forever boxes.
Click on the Image tab. The first
frame on the left hand side of Microsoft Gif Animator should
be selected. On the right hand side, type 100 in the
Duration (1/100 s) box.
Select the second frame, then type 100
in the Duration (1/100 s) box.
Select the third frame, then type 100
in the Duration (1/100 s) box.
Select the fourth frame, then type 100
in the Duration (1/100 s) box.
Press CTRL + A and save the animated file
as animated.gif.
Test your file by inserting it on to the page in your DW MX
account that you created for the static banners. Save the page as 'banners'. Now visit the page you
just created with your banner inserted on it in Internet Explorer. You're
in business if the page loads and the banner displays as you intend it to.
If your image doesn't work correctly, you may need to rearrange
the order of the frames. Do this by selecting the panel you wish to
move, and then click the navy blue
up or down arrows to move the panel to a new location.
If you've done everything correctly, you should now have
an animated gif banner that looks like this.
Now you create an original animated ad on your own.It may be any IAB
approved standard size. Use at least four frames as in the example
above. Display
your ad image using 'Image Placeholders' on
a new Dreamweaver created webpage. Display it in 1 x 1 table centered horizontally
on the page.
ALSO Include an alt tag in your image indicating the dimensions
in pixels of your image so
I know which IAB approved standard size it's supposed to be.
Save this work with the file name 'animatedbanner' and put the page to your Dreamweaver
account.
If I were doing this exercise, the URL would be