Internet Marketing 470 TT 0800 - 0915, 0930 - 1045 in Showker lab fall 2007
JMU College of Business logo. link to James Madison University

 

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.

  1. 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.
This is tgt01 for exercise 14: creating animated banner ads.
This is tgt02 for exercise 14: creating animated banner ads.
This is tgt03 for exercise 14: creating animated banner ads.
This is tgt04 for exercise 14: creating animated banner ads.

  1. Launch the Microsoft Gif Animator.  It's located in the same place as Microsoft Image Composer.

Microsoft Image Composer gif animator options tab

 

  1. Click on the Open icon (yellow folder; alternately, press CTRL + O) and select tgt1.gif from where you saved it.

  2. 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.

  3. Click on the Animation tab.  Check the Looping and Repeat Forever boxes.

Microsoft Image Composer gif animator animation tab

 

  1. 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.

Microsoft Image Composer gif animator image tab

 

  1. Select the second frame, then type 100 in the Duration (1/100 s) box.

  2. Select the third frame, then type 100 in the Duration (1/100 s) box.

  3. Select the fourth frame, then type 100 in the Duration (1/100 s) box.

  4. Press CTRL + A and save the animated file as animated.gif.

  5. 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.

  6. 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.

  7. If you've done everything correctly, you should now have an animated gif banner that looks like this.

  1. 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

http://student.jmu.edu/mktg470/williamson/animatedbanner.htm

This work must be live online NLT 2100 hrs Tuesday.06.Nov.

 


This site is produced by Dr. Ken Williamson, prof of mktg, College of Business, James Madison University, Harrisonburg, VA 22807.  Updated Tuesday.30.Oct.2007.  Contact williakc@jmu.edu with comments or questions.  Thanks for visiting.   Also visit James Madison Christian Faculty Fellowship @ www.faithatJMU.com
For I am not ashamed of the gospel, for it is the power of God for salvation to everyone who believes ... Rom 1:16