[center]

Inserting a pre-made animated .gif onto a background of your choice
By Sean-Michael




Getting Started.

[*]1. You will need to create a new folder for your work. The reason for this is because you will soon have many frames, in this lesson you will have 8 video frames! I'll call my folder "Animationlesson" and I keep it handy.

[*]2. Create your background, meaning create What you want the animation to move on! I'll use a background 150x362, Remember this can be anything even photos! Once you are happy with your image go to next step.



[*]3. Ok now you need to save this in a file Format that the (GAP) can work with "GAP only works with certin file types". Here is the way to save Name__000001.xcf only change the Name leave the rest exactly the way it is! "_000001.xcf" I'll save mine as "Animationtut_000001.xcf" and remember that folder we made... It needs to be save there so we can keep track of it!



[*]4. Prepair the Animated .gif for insertion to you background. Ill include a pre-prepaired .gif for you to work with but there are lots of sites that share pre-maid .gif for you to use... just search the web.

**This One**

[*]5. Before continuing Please confirm that you have both "A BACKGROUND" and "PREMADE.gif"


[*] Make sure to set you animated gif and Background to RGB color mode! "Image Window" Image/Mode/RGB


[*]6. This is where it gets fun! LOL Open both Images...With the "Animationtut_000001.xcf" selected select Video/Duplicate Frames... you get a window like this,



If your useing the animated.gif I supplied enter 7 for number of times duplicated! Click ok and then go to that file we've
been working on and you'll see 8 video frames! Now you know why the special folder. Yea, now we get to animate our project!

[*] Make sure to set you animated gif and Background to RGB color mode! "Image Window" Image/Mode/RGB


Making our Animation Animate!

[*]7. From background image select Video/Move Path... and you get a window like this...




**WAIT**
Mines is a screen shot from my previous (GAP)Tutorial

Study this and its parts I will refer to them later and there corresponding Letters like shown.

[*]8. As you can tell my settings are different than yours, you need to change a few! First change "B" to "Loop", "G" needs a check mark, "C" is up to you it determines how to hold your source image, "A" to the first Frame of your .gif

Ready?

[*]9. Now you decide where you want your .gif inserted... I put mine on the right side and adjusted it exactly where I wanted it... when you done move on to #10.

[*]10. At this point I want you to click "J" A window like this will popup and I want you to add the values I have and click

"OK"



[*]11. Now two new windows popup these are only for preview *Do not save them!* If you don't like the way it looks you can close these "BOTH" without saving and edit the current point and preview again! If you do like the preview close the windows *without saving!*

[*]12. Click "L" and your work will be recorded by GAP, You will not see it but trust me it is and you will see it in a few steps.

[*]13. So now that you have placed you .gif Ill show you the next cool tool! From Background image Select Video/Playback... and you get another tool. Play a little bit if you wish! After all your almost done right!?!:)


When you none click [/u]C[/u]lose


[*]14. From Background image Select Video/VCR Navigator... and you get this,



With this tool you get to specify the frame rate in frames per second "FPS" I've ended choosing 5fps I believe. When your
done close this tool and then from BackGroundImage select Video/Frames to Image... You'll get something close to this, maybe the Layer Basename will be different but you shouldn't worry, simply click "ok". and you'll get an image with 8 animated frames!



[*]15. You have a frame per frame animation know which is great however the data size if
Saved in this condition would be

Huge!

You want to save some size right! Especially for use on the web! So from you new image select Filters/Animation/Optimize
(For GIF).A few moments you get a new image that may looks like it's missing stuff but it isn't, it is only combining frames
to cut down on data size! You can preview by selecting from new image Filters/Animation/Playback... and you get a preview. When you done go to step 16

[*]16. Save you image as .gif and enjoy!



Please share your work or thought or let me know if Im missing something :l: Lol
Sean-Michael

Great job, SM!

Looks like I'm gonna have to really try and figure out the GAP :w:

That is called brilliant :h:. Many have been waiting for this tutorial. Thank you for you time and effort Mic. I go and add it to homepage.

regards

Very nice.

Might try that later

How do you make the signatures move? I was wanting a Bart Pwn Signature that moved so the the words "Eat My Shorts" showed up like he was actually writing it but, I don't know how to make the signature move like that. And how do you put a signature to show?

For something like that I would use the tutorial http://www.gimptalk.com/topic.php?a=v&t=171&f=8 and just add one letter at a time to each frame... You could try to make it in the GAP but it would be more difacult, but you could get real creative if you wanted :l:

Sean-Micheal your animatedtag.gif any chance of a tutorial on that?
I was wondering if you are using Gap for the blending transition and if so how?
One other thing where did you learn to use Gap? I have not found any tutorials nearly as good as yours.......

Thankyou for the complement on my tutorial :l:

For me learning to use the GAP it took many nights of banging my head against the keyboard. Lol, Really!

As for the Tutorial on fading the frames I will make a tutorial on this when I have time.

LOL! My forehead is now flat and has multiple "dimples" from the keys! :w:

Art

I see key board dimples on my forehead in the future........



Oh boy I can't wait......... I will be playing around with it in the mean time, and will see what I can come up with on my own.

BTW did I mention your tutorials are the best???

Wow I've been looking for this for a long time. There no photoshop tutorials this good even! Thanks a ton I will use it alot!

Nice, though is it possible to add an existing gif along with the current animation you are trying to make in GAP?

Yes. My flash text tutorial uses that same concept. I'll have it posted this weekend sometime.

Art

May I ask where the video button is? I've been looking for some time and I cant find it. Thanks

Greetings,

The "Video" menu (what you called a button) is part of the GAP (GIMP Animation Plug-in) and the GAP does not come standard with the GIMP, you have to install it as a separate package. I don't know my way around here too well yet but I do know that this location has a half-way decent tutorial for downloading the Windows version of the GIMP and instructions on how to install the GIMP along with the GIMP-GAP.

Once the GAP is installed, the next time you open the GIMP you should see a new "Video" menu at the far right of any open file's menu bar.

Hope that helps. If not, I am sure others here can do a better job because I don't use Windows.

Thank you very much saul, I appreciate the help :h:

verry nice!!

my result

Best tutorial ever. Took what would have been hours of duplicating frames and merging them, then did it in five minutes. The result is my first ever animated signature that I created for my WoW guild forums.


Still needs some tweaking and I want to fix the loss of color depth on the stationary parts, but it did exactly what I wanted it to.

Just finished up this one for a friend, since he loves chuck norris.

this is my result, nice tut

lol i added the text afterwards so it only comes up once. why does my brushing in the bg affect how the video plays????

probly because the animation was optimized first? Or the brushing was differnt on the layers, I think it was optimized when you brushed, Its always best to get the background done before you do any animation! If you only add to one layer some text it will only show on that layer unless you know a few tricks...

what does the gif was optimized mean? is there any way to un optimize them?

thanks

Very good tutorial. Was very beneficial in helping me to learn more about how to use GAP. Thanks. :l:

.