Free Web Site - Free Web Space and Site Hosting - Web Hosting - Internet Store and Ecommerce Solution Provider - High Speed Internet
Search the Web



Animation


This class was conducted for the HTML_HELP List by one of the moderators, Larry, on 28 August 2000.


Introduction -- Page 1

Making an Animated Banner.

In the previous 2 classes you have learned how to resize. composite, add a border, and anotate. So we will skip over those steps in this class. I will supply a ready made banner for you to start with. You will need a homepage directory where you can create an empty directory to transload the banners to.
If someone has missed the first 2 classes and wants to see how it is done from scratch, the URL to a complete tutorial page will be provided at the end of the class.
Okay, let's get started with the class...!
Larry


Part One -- Page 2

Here is the URL of the banner blank we will be using, http://members.tripod.com/~Momp54/flowers/rosebnr.gif

We will add the wording and make 2 banners that will be used to make our animated banner.

Step 1: In your file manager make a directory titled banner, or what ever name you wish. This is where we will store the 2 banners used in our animated banner. You will need the URL of this directory later to animate the banner.

This step is necessary and must be completed before continuing on to Step 2.

Step 2: Okay...lets make our banners.....!! Take the URL of the banner blank to Image Magick

http://magick.iacta.com/index.html

Click on Use Image Magick.

On the next page enter the URL for rosebnr.gif, and click on the VIEW button.

On the next page click on the Annotate tab.

On the next page remove rosebnr from the textbox and enter Welcome to...

Location and gravity textbox: enter +50+60 (button should read Northwest)

Fill textbox: enter #ba55d3

Font: click on the Font Box and press the letter "U" on your keyboard to scroll down to the fonts beginning with "U", now check Utopia Bold Italic

Point size: enter 36

Now click on Annotate button

On the next page view your banner.

http://members.tripod.com/~Momp54/banner/rosebnr1.gif

Scroll back up and click on the Output tab.

On the next page check "gif",
storage type check "single file", then click on the Output button.

On the next page click on the image with the "0" beneath it to get the URL, now you can transload the banner to the directory we made in Step 1.
When transloading the banner rename it rosebnr1.gif

Continue on to page 3.........


Part Two -- Page 3

Step 3: Okay, one more time...!

http://members.tripod.com/~Momp54/flowers/rosebnr.gif

Take the URL of the banner blank to Image Magick

http://magick.iacta.com/index.html

Click on Use Image Magick.

On the next page enter the URL for rosebnr.gif, and click on the VIEW button.

On the next page click on the Annotate tab.

On the next page remove rosebnr from the textbox and enter: Granny's (now hit Return key, then tap the space bar 4 times and enter)
Homepage Note: you can replace "Granny's" with any name.

Location and gravity textbox: enter +60+40 (button should read Northwest)

Fill textbox: enter #ba55d3

Font: click on the Font Box and press the letter "U" on your keyboard to scroll down to the fonts beginning with "U", now check Utopia Bold Italic

Point size: enter 36

Now click on Annotate button

On the next page view your banner.

Scroll back up and click on the Output tab.

On the next page check "gif",
storage type check "single file", then click on the Output button.

On the next page click on the image with the "0" beneath it to get the URL, now you can transload the banner to the directory we made in Step 1.
When transloading the banner rename it rosebnr2.gif.

http://members.tripod.com/~Momp54/banner/rosebnr2.gif

NOTE: that the banners are numbered consecutively. This is done so that the blanks are placed in the proper order in the directory, and will appear in the proper order in the animation.

On to page 4..........!


Part Three -- Page 4

Step 4: Now take the URL of the directory where the banners are stored to Image Magick

http://magick.iacta.com/index.html

Example:
http://members.tripod.com/~Momp54/DirectoryName/

Click on Use Image Magick.

On the next page enter the URL of the directory, and click on the VIEW button.

NOTE: be sure you add a backslash (/) at the end of the url.

The first image in the directory will be displayed, scroll up and click on the Output tab.

On the next page fill out the following fields.

Format: check gif

Storage type: check "multi-frame file"

Delay in/100th of a second: enter 100

Loop: enter 0 (zero)

Scroll up and click on the Output button.

On the next page you will see the finished animated banner, click on the finished banner to get the URL and transload to your site.

Here is the url of the tutorial page:

http://members.tripod.com/~Momp54/WebTV2/tutorial02.h tml Click Here

Thank you for taking the class, and I hope you enjoyed it. It has been fun preparing, and I have learned a lot in the process.

Thank You...!
Larry(Momp)


Homework Assignment

Homework Assigment for Animated Banner Class.

Make a new directory titled homework.

Take the banner to Image Magick and add new text (of your choice)to both banners.

Change the color (again your choice) and size of the text.

Then send finished banner to the list.

Again I apoligize for being late...and wish eGroups and the web would have co-operated a little more. But you guys came through like champs...did a great job. And thanks to everyone who helped out.

You guys are the best...!

Larry



Class Dismissed