Time to create tutorial...nine and a half hours roughly, continuous... It shouldn't take that long to make just a userbar, but remember, I was slowly making a userbar, taking screens, saving to format, making an HTML file and writing steps during this time... It is highly reccomended that you be comfortable with ordinary userbar creation first... (if not, it may seem as if I am leaving things out...).
Hi! First off(of course), you'll need The Gimp and The GAP. Use google, or a search engine of some kind, to find where to download(the major one is Sorce Forge, but there are different places). Once you aquire and install both, you can begin(but, as I say, it's a good idea to have made several ordinary userbars first, because you do not want to continually make anims wrong and have to fix them...it's not hard, just a little time consuming...).
Now, create your userbar background and text as one layer and the glare and border as another(Using Image- Merge Visible Layers[or Ctrl-M] with the appropriate layers hidden. This way, you can make the anim on the background and behind the border/glare. If your bar needs text in the top layer[a.k.a. pic is as wide as the bar, or pic will go towards the text side], you can do that also). This is my result.
Then, create a seperate folder to fill with frames. Save your two layer file(do not flatten totally!) as a native Gimp *.xcf using the format..."name-0001.xcf"(mine is GFfan-0001.xcf). Name is whatever you wish, but dash forward is unchangable, aside from adding zeros to make a higher maximum number of frames. (9999 should suffice, eh.) This is how GAP recognizes you are starting an animation. After that, click on video, scroll down to duplicate frames and click. You will see duplicate frames from 1 to 1, 1 times.
Change the last bar to the number of frames you want minus one(the file you just saved is the first frame). So, if you want 40 frames, set to 39 and you will have a directory filled with files named "name-0001.xcf though name-0040.xcf". To navigate; go to Video, scroll to Go To, slide over and click the button you need. To make navigating easyer, I set keyboard shortcuts for Next Frame and Previous Frame.
Next, open another window and fix the image you want to animate in your bar. Make it a proper size to fit in the userbar how you like, and make the background transparancys as neccicary(Go to Layer-Transparancy scroll to Add Alpha Channel... select the bakground and cut....Viola!). Also, you can flip or modify as you wish. My result is here.
Next, we set the animation path. Have your setup image you want to animate open, click on your first frame .xcf window, click Video, scroll down to Move Path. This is what you will see.
Don't be intimidated. You won't use nearly all of the features GAP has for animation. Here's what you do use(in this case, anyway). As you can see, you start with you first animation point at (0,0) when the window is opened. Click the Refresh button to see how your image lines up. Mine starts at the top of Gordons hair. Just mess with the (x,y) cordinants. Just think back to algebra class...this is just the same, using the top-left as the origin (0,0), the image being the bottom right quadrant. It is possible to use all four(A.K.A. have your anim go outside the original image...which is the point of making anim userbars!), using corisponding (x,y) numbers in negitive-negitive, negitive-positive and visa-versa. Adjust your first point as desired, mine was moved up to start at Gordons glasses instead of at the hair, like my originals(Third time I've made this exact bar!). Then, click add point. This is your second POINT not frame. If you have two points of anim, first point starts frame one, second is the last-therefore, fourtyth frame. More points will be divided evenly as possible between the anim points, unless key frames are implemented. This just makes an event happen sooner or later in the animation, so it's not really needed for my anim, since I'm just doing a up-down smooth scroll. I'm going to use all forty for the up stroke, and animate by ping-pong to create the effect I want, so two is all I need. You can preview the anim by clicking Anim Preview(In case you didn't figure it out...). It will create small scale images to animate for the preview, so don't think it's messed up when you see the tiny, pixelated anim. It's enough to give you a good idea about how your anim is going to look. Plus you can change the scale to 100 to see a full-size preview. When you anim path is done, click OK. My result thusfar, is this.
Yea, anim made! Now we have a series of 3 layer images. They won't be right at first, as you can see, but this is fixable whith some time. This is where those keyboard shortcuts come in handy. What you have to do is drop the new "Backgrount#1" layer down in the layer list in all frames. Time consuming, yes, but I haven't figured out a better way to do it.... What you do is click the down arrow to drop the layer in between the for and background, click in the userbar window, go to Video-Go To-Next Frame to advance to the next frame, repeat for rest of frames. With my example and my sortcuts(not default)... click down arrow, click in window, ctrl-right arrow to advance to next frame, repeat. A little faster...here is my result...
See what I mean? When that is complete, the hard parts over! Go to Video-Frames Flatten to flatten all of your frames to one layer images. To make the Ping Pong, I copyed from frame 40 to frame 1, 1 time, to make an 80 frame animation. To make an animated userbar you need to use the *.gif format, and to do that you need the animation to be layers in one image instead of one layer images as frames. To do this, click Video-Frames To Image. My next result is here...
It will open a new image with layers as frames. Now click Filters-Animation-Optimize for GIF. Gimp will now make another image....
Now, the image is much smaller in bytes size. When you try to save as GIF, Gimp will display this...
Click the save as animation radial button and the Convert to Indexed if not pressed and press Export. Then at next window, OK. The FINAL result is here!
Wow, time consuming, eh? It gets easyer, really, quite quickly. Just practice. I've only made 5 animated userbars and I've written a tutorial just now! ...maybie it's just me, though...
Thanks for reading! Hope I helped....
Kenny Lewis A.K.A. rotary_turbo
