http://nquale.com/tutes/annotate/fairyblank.gif

Step #1
To annotate an animated graphic we need to take the graphic to gifworks and split it into frames.

a.click onto the "File" tab at Gifworks

b.click onto "open image"

c.paste the sample graphics url into the http window (first delete the http://)

d.click onto the "Optimize" tab

e.click onto "split into frames"

f.on the next page you`ll see the graphic split into 4 frames.Click onto the the first frame (closest one to the top)

g.on the next page click the "File" tab again

h.click "Save"

i.on this page you`ll see in the middle of the page a "Save Image" button and right below that will be "webtv users click here",click there and use the Go To method to get the graphics url.


Step #2
A.For those of you using pagebuilder take that graphic to webscissors and delete the http:// in the url window and paste your graphic`s url,then click "Show Image".On the next page click onto "import" next to the image and it will be uploaded to your scrapbook.
Now you need to do the same for the other 3 frames (a tip that "my-turn-mom" gave me was that all you need to do to upload the other 3 frames is paste your first frame`s url into webscissors again and change the 001.gif part of the url to 002.gif,003.gif and 004.gif to upload the other frames).
By using MTM`s tip you won`t have to go back to gifworks and resplit your graphic to get each frame`s url.

Here`s the end result of splitting your graphic into frames

Frame #1
Frame #2
Frame #3
Frame #4

B.For those of you using a webhost other then pagebuilder,the steps you need to go through are

a.if you have an open directory then create 2 seperate directory,name the 1st directory 1,you`ll use this directory for only your blank frames.Create a 2nd directory and name it 2,you`ll use that directory for your annotated frames.

b.for those of you with a closed directory you will only have to make one new directory because you can put both your blank & annotated frames into the same directory.

c.transload all 4 of the frames in correct order into that newly made directory

d.rename each frame in numerical order
1.gif
2.gif
3.gif
4.gif

C. For those of you using pagebuilder, here are the next steps for you

a.at pagebuilder create a page using the "grey" background--you must use grey because with any of the other colored pages,the color becomes part of the reanimated image.

b.you will need to put the graphics on a webpage in their correct order.(helpful hint--images in your scrapbook are placed in your scrapbook in this order-from left top row to the right and then left bottom row to the right).

c.when you add the images in correct order to your webpage,view the image to get it`s import number and write it down but do not type anything into the "Type a title" box or the "Type a caption" box.

d.after adding all 4 of the images to your webpage then click onto "publish" in the index.

e.on the next page give your page the title of 1 and then click "Done".

f.on the next page write down your webpages url and then click "Done" again.

g.you`ll be taken back to your editing page where you need to click onto "Edit Title" in the index.

h.on the next page "unclick" the "Show this title on page" box and click "Done" again.

Now go back and create a 2nd new webpage the same way as above only leave this page empty and give it a title of 2

Step#3
The next step now that you have your frames in a directory or published on a pagebuilder webpage is to take each of your frames to
Image Magick and annotate them.

a.at IM add frame #1`s url to the http:// window and click "View"

b.click the "Annotate tab"

c.in the "Text box" add your text,I used WolfPack in my example

d.click onto "center" in the "Gravity box"

e.in the Location box change the numbers to +0+23.
I`ll explain at the end of Step #3 what both these numbers mean and how they relate to the "Gravity" setting

f.in the "Fill Color" box I put #FFFAF0
When using hex numbers at IM you must always use the number symbol "#" before the hex number

g.I changed the "Point Size" to 45

h.in the grey "Font" box I clicked onto "Black Chancery"

i.click onto the "Annotate button",
at this point if you didn`t like how your annotation looks you can click your "Back key" and redo everything

j.after annotating your graphic click the "Output" tab

k.click "gif" in the "Format" box

l.click the "single file" radio button

m.click onto the "Output" button

n.on this page you`ll see your graphic,click onto it and use the Go To method to get it`s url

o.now upload it to pagebuilder or your webhost

p.you need to repeat the above steps with your other 3 frames and to do that you must use the same above settings with each frame so write down all of the info from steps "C" through "H" as you do them

Here are my 4 frames annotated

Frame #1
Frame #2
Frame #3
Frame #4

For those of you using pagebuilder you`ll need to annotate each frame in their correct order and I think but not positive that you`ll need to upload each frame in a row so that they`ll have consecutive import numbers.If you decide to annotate only one frame each day then don`t upload any other graphic in between your frame graphics.That way your frames will still have consecutive numbers.After uploading your annotated frames to your scrapbook,publish them on your newly created webpage titled "2"

For those of you using a "open directory" webhost you will need to put your annotated frames into directory number 2 and name them
1.gif
2.gif
3.gif
4.gif

For those with a "closed directory" you can place your annotated frames within the same directory as your nonannotated frames but rename your annotated frames to
01.gif
02.gif
03.gif
04.gif

XXXXXXXXXXXXXXXXXXXXXXXXX

Here are some hopefully helpful notes about annotating

In Step#3 "e" the first Location number "+0" is how many pixels the annotation is from the left.The 2nd location number "+0" is how many pixels down from the top of the graphic that the annotation will be.Because I used "center" as the Gravity in Step#3 "d" the first location number "+0" is how many pixels left of center that I want to place my text.If I was to use a +10 then my text would be moved towards the right of center by 10 pixels.If I used -10 then my text would be moved 10 pixels to the left of center.The 2nd number "+23" moves the text downwards from the center point by 23 pixels.If I used -23 pixels it would move the text up from the center by 23 pixels.As you can see the combination of Gravity and Location numbers will determine where your text is located.

Your Font Type will determine what point size you can use.I always leave the point size as it already is in that box for the first annotating so that I can determine if I need to make the Point Size larger or smaller.If the first annotation is the wrong size then I just "Back key" out of the annotation and then change the point size until it suits me.

When you change the point size you`ll also find you`ll probably have to change the Location numbers too.

Lastly--I found that if I try backing out of an annotation too many times to change something,then when I go to output the image I`ll get an "error" message and I`ll have to start over by clicking the "input" tab and repasting the original frame url in the http box--it may still be there.

XXXXXXXXXXXXXXXXXXXXXXXXX

Step#4

For those of you using a Closed Directory webhost skip down to Step#4 "B"

For those of you using pagebuilder you may have to turn off your lbb and then turn it back on before doing this next step.The reason for turning off your lbb is because the info about your webpage being publish needs to be downloaded to your server.

A.The next steps are for Pagebuilder and Open Directory webhosts

a.take your newly created titled 2 webpage/directory url to Image Magick and delete the http:// in the url window and paste your webpage url there and add a backslash / to the end of your url--you must add the backslash in order for IM to pull up all of the images on that webpage.

b.your webpage will be input as a "mpc"

c.go directly up to the output tab and click it

d.on the next page click "gif" in the Format box

e.click "multi-frame file" under storage type

f.in the delay box I put 50 to slow down the animation.If you want the animation to speed up put a smaller number in the Delay box.To slow down the animation more then add a larger number to the Delay box

g.in the loop box place a 0,that will make the animation loop continuously

h.click the "Output" button.

i.click onto your finish graphic and use the Go To method to get it`s url

B.For those of you using a Closed Directory webhost before you can do Step #4 you need to make a New File within your frame directory.As long as I don`t have a Tripod or Angelfire account I can only tell you how to do this at TL/2.At TL/2 you would depending on how you have your account set up,either go down to your 2nd "New" button or the "New" button in the right column.Type index.html in the New box and then click the New button,that will take you to an editing page.Paste the below code into the editing box making sure the <<>html><> is all of the way up in the left corner.

Place the urls of your 4 frames in correct order between the "" marks in the above code on your index.html editing page.

Here`s what my viewable index.html page looks like
http://nquale.com/tutes/annotate/a/index.html

Then take your index.html url to Image Magick and place it in the http:// window and delete the index.html part of the url before clicking the "View" button.This is how my index.html url looked liked when I entered it at IM

At this point you can go up to Step #4 "b" and follow those directions.



Here`s my finish product
Animated WolfPack Fairy

XXXXXXXXXXXXXXXXXXXXXXXXX

I know this tute is long with quite a few steps but I didn`t know how to shorten it so if you`ld like to make this lesson a little bit easier the first time you try it, you can just take one of the frames from Step #2 and annotate it in order to get the feel for annotating graphics.Then you could take all 4 of my annotated frames in Step #3 and upload them to your host and then take them to IM and try Step #4 with them,that way you can get the feel of putting them on a pagebuilder page or directory and you can get a feel for reanimating them too without going through all of the work.

Here`s a more printer friendly version of this tute

http://nquale.com/tutes/annotate/annotatelesson1.html