.
Lesson 3
Now we'll be going back to Image Magick, and again, we'll be using the
BLANK banner we used a few minutes ago, to make our second frame.
A small note. On this banner, we'll be putting the description of our site.
Like mine is going to say "Webtv tutorials, tricks, tips and information.
Since that wont fit in one line across the banner, we'll divide it into
3 lines of text, which means 3 seperate times you'll have to annotate on
the banner. So decide what your second banner will say, and divide it as
evenly as possible into 3 lines of text. We'll annotate each line
seperately. Here's how I divided mine into 3 lines.
Webtv tutorials, tools,
tricks, tips, codes,
and information!
We'll center each line of text, onto our second banner.
*Type in the URL of your banner blank, in the URL field, and
press view.
*After checking to be sure your image made it, go up to the top
of the page, and click on "annotate".
*In the "text" field, type in the first line of text that describes
your website. (mine is Webtv tutorials, tools,)
*In the location and gravity field, type in +20+30, and be sure you
choose "north".
*Scroll down farther, and choose your "font Style". Mine is
Comic Sans MS.
*go down to "fill Color", and type in the color you want the text.
*Then type in how big you want the text, under "pointsize". I usually
use 18, for the second banner in an animation.
*Go half way back up the page, and click the gray annotate button.
*The next page will have the first line of text.
Now we add the second line of text.
*push the "annotate" tab at the top of the page.
*In the text field, type in your second line of text.
(mine is tricks, tips, codes)
*location and gravity will be +20+50, and "north" should still be
chosen. Notice we are raising the second number by 20 for each
line of text. That should put the same distance between each line.
And since we are using the "north" attriute, the second number is
also how far down from the "north" (top of banner), that it brings
the text.
*Make sure your font style, color and pointsize, are the same as they
were for your first line of text. (it should still be there from
the last time.)
*Now push the gray annotate button.
*Then next page will have your banner with 2 lines of text.
Now we'll do the third line of text.
*Scroll back to the top and push the "annotate" tab at the top of
the page.
*In the text field, type in your third line of text. (mine will be
and information!)
*Change the numbers to +20+70, and be sure it still says "north".
*Make sure everything else is the same, the font style, color and
pointsize, and then click the gray annotate button one more time.
*The next page will have your finished second banner!
Now you need to transload it to the "animations" directory, just
like you did the first one. THIS IS VERY IMPORTANT
! The first banner and
second banner HAVE To be the only 2 things in that directory, in order
for the animation to work.
*Click the "output" tab at the top.
*On the next page, choose "gif" for the format.
*For storage type, choose "single file".
*Now click the gray output button. (not the one on top)
*On the next page, click on your image.
*The next page will be your temporary URL. Now you need to
transload it to your site.
Here is my second banner.
Lesson 4
Now we get to animate the banners! Please go to the directory that you created
called "animations", and be sure BOTH your banners are in there, and that
they are the ONLY things in there. If they are there, move on to the final
step!
*Go back to the first page at Image Magick. The page that you can
enter a URL.
*Where it asks for the URL, you are going to enter the URL of your
animations directory! (mine will look like this http://www.wtv-zone
.com/animations/). Be sure and put a slash (/), after your
directory name, or it wont work. Then press view.
*the next page will show the first banner that is in that directory.
*Scroll to the top, and click the "output" tab.
*Now this is where the information we choose on the output page,
will be different than normal.
*Your gonna choose "gif", and then you'll choose "MULTI-FRAME
FILE".
*Scroll down past the gray output button
*You'll see something that says "Delay in 1/100th of a second"
your gonna put in the number 200. (this means 2 seconds will
elapse, in between the 2 animated frames. YOu can make it faster
or slower, by going up or down 100.
*Now look for "loop". Put a zero (0) in that box.
*Now scroll back up the gray output button in the middle of the
page. Press it.
The next page should show your animated banner.
Now just click on the banner
for a temporary URL, and transload it to your site!
Sometimes Image Magick
isnt very nice, and it shows your animation looking horrible, and you
think you've goofed. Before drawing that conclusion, click on the banner
and go to the temporary URL, and check it first.
Here is my animated banner.
NOTE
If you have a rather long description of
your site, you may want to use a third frame. If your description is
shorter than 3 lines of text, you may want to only divide the description
into 2 lines of text, rather than the 3 I used here. You'll just have
to play around with the location and gravity numbers, to center the 2 lines
of text. Remember we used numbers like +20+40. It is the second number
that raises or lowers a line of text.
A few notes on getting more creative
If you'd like to get even more fancy, and create an animated banner
from scratch, maybe even put your own logo on it, then refer to my Basic Banners
tutorial, and create a BLANK banner from scratch, (just leave all the
writting off), then come back
here and use that blank banner, for your banner blank.
