[center]


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 40 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 over! I'll use a background of 150x420, Remember this can be anything, even photos! Once you are happy with your image go on to the next step.



3. Ok now you need to save this in a file Format that the GAP can work with. (GAP only works with certain file types.) Here is the way to save: Name__000001.xcf. Change the part that says "Name" to whatever you want and leave the rest exactly the way it is! I.e. - "_000001.xcf" I'll save mine as "Animationtut_000001.xcf". Remember that folder we made? ... It needs to be saved there so we can keep track of it!



4. New image! I made mine the same size as the background filled with transparency. What do you want to move? Text maybe? Perhaps a picture? Both? Whatever you decide, they need to be on different layers if you want them to move independently. I've shown my example below. Don't get confused, the layers shown are just a Copy and Paste of the layers window to show how I set the different items for animation.

Do you have your choices for background and the thing you want to move? Ok, then you need to save them as an .XCF file, I saved mine as AnimationItems.xcf in the same folder



5. Before continuing, please confirm that you have both A BACKGROUND and an .XCF of ANIMATION Items.

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:



Insert these values for this Lesson! Click ok, and then go to that file we've been working on and you'll see a whole lot of frames! Now you know why the special folder. Remember the more frames, the smoother the animation will be! Yea! Now we get to animate our project!

Making our Animation Animate!

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




**WAIT**

Study this and its parts. I will refer to them later and their corresponding Letters as shown.

8. As you can tell, my settings are different than yours, you'll need to change a few to match mine! First change "B" to "none", "G" needs a check mark, "C" is up to you, it determines how to hold your source image, "A" to the first Item you want to move.

[You need to keep in mind that this plug-in acts like a 'plotter' The first point is the beginning and the ending point is the end, What it does is calculate the difference and adds the value along the time line! "AKA FRAMES"]

Ready?

9. Lets make our first (Beginning) point which will be our current settings in "D" and "E", mine are based on center handle "C"...



10. When you have you first point (Beginning) click "F" Add Point, Now we determine where this image will go to point 2...



*DO NOT YET CLICK "F" AGAIN!*


11. At this point I want you to click "J". A window like this will pop up and I want you to add the values I have and click "OK".



12. Now two new windows will pop up. 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! I want you to take notice that the movement takes place through all 40 frames. If you do like the preview, close the windows without saving anyway!

13. Click "F" one more time and don't change any settings If you want you can preview again and you will notice that the movement now goes to frame 20 and then stays in place the remander to frame 40. DO NOT SAVE PREVIEW!

14. Click "L" and your path will be recorded by GAP, You will not see it but trust me it is, and you will see it in a few steps.

15. From background image select Video/Move Path again and you will get the MOVE PATH Plug-in again. First change "B" to "none", "G" needs a check mark, "C" is up to you it determines how to hold your source image, "A" to the Second Item you want to move, in my example it's a text layer that says, "(GAP)Animation Lesson".

16. Plot the first point, I used a new setting, "K", on this image to make the text lean and I hope for you to experiment with these for a few minutes to see the effects they have. Below is the First point, and I set the "I" From Frame number to 10 to make a delay effect. You can see how it applies to each line of text in my example.



*Note, for alignment reasons you can now use "H" so long as you have a check mark in box "G" in my example I went to preview frame 21 where the Wilber was in its resting place. This setting does not affect the work, it is a tool used to quickly preview where stuff is! Try it out!*



17. Plot the Second point of the text, above^ (Ending). I decided for all the text to come together in frame 40 so when I have my second point plotted I can click "L" and move on to the next Animation of Text. I'll leave the rest to you, now that your getting the hang of it! :h: When you're done follow on to step 18.

You can also preview with "J" but, as I said before, don't save the previews!

18. So now that you have two images on your animation. If you think you might be done in this step, I'll show you another tool! It's cool! From the Background image Select Video/Playback... and you get another tool. Play a little bit if you wish! After all your almost done, right!?! :h:



19. From the 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 believe I ended up choosing 10fps When you're 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 40 animated frames!



20. You have a frame by frame animation now, which is great! However, the data size if saved in this condition would be huge! You want to have a smaller file size, right?...especially for use on the web! So from your new image, select Filters/Animation/Optimize (For GIF). After a few moments you will get a new image that may look 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.

21. If you want to change specific frame rate times like I did with the example this is a good time to do it. Here is my example:



22. Save your image as .gif and enjoy! :w:


[/center]

Excellent work, Sean-Michael! I can't wait to get home and give this a shot. You've really outdone yourself. :l: I think this one is worthy of submittal to pixel2life.com. Not sure if I've ever seen a tut this detailed anywhere for GAP.

Art

OMG :, we got that talanted person, I dont have words to say.
Tutorial is brilliantly organized and written in a way that person like me who never touched the GAP and crossed the "gap", out standing. I succeeded moving a single line of text 'gimptalk'.

I think, the more you play with GAP the more you learn and get more purified results.
IF this kind of tutorials continue comming to gimp community, one day or another all will start saying 'who needs flash', also because GAP has unlimited options that we cannot master completely.

Indeed a great resource for gimp users.
I highly appreciate the time and effort your spent to educate us using GAP.

Thanks again.

regards

Very much agreed, Ali.

A tutorial like this should really get a lot of people in the GIMP community (new and old alike) very excited.

Art

:h: Thankyou for the perks! I remimber the first and only tutorial on the GAP that I read and it stoped @ Step 11. It was a good lesson but it left alot out and I wanted to make sure that every base step coverd so no one had to guess! Actully I learned alot while making this Tutorial also! :l: Im also working still on getting together more info for the theme application of GTK and Gimp like what is shown on my "Gimp Screen Shots"

*So Stay tuned members and visitors Gimp Talk is bringin you more!*

woah looks damn good.. thanks Sean! i'll follow it now!

Just wanted to say, thanks for simplifying GIMP GAP, but I have one suggestion. The users can save it as an avi for a higher quality animation.
I will post my results soon.

AVI would be great! I got all excited but I couldnt find an extension for .avi in my Gimp :a:
Possibly this is a feature on a differnt OP system or I'm missing something :a:

Any Ideas???

Now this is Strange, none of the Keyboard Shortcuts are working for me, so I am kinda stuck on where you are recording your path on GAP (pressing L key). Could it be my current version? I am working off of Gimp Version 2.26 so should I just upgrade to the next version to see if that helps or not? :s:

I dont think I used any shortcut keys... and I used 2.2.6 to make this?

As far as the "L" I mean to only click it with you cursor over it.

Does this help???

MY MISTAKE!!!!! All this time I thought you were talking about Keyboard Shortcuts with these Buttons but I forgot completely about the diagram that you drew. I am sorry for the inconvience, Now back to this tutorial.....

[center]Here's a new one I made with the (GAP)...



Please do share your work so I know if I need to add anything to the tutorial, so far theres been 1,393 views and no ones shown any of there art... Is there something Missing?

Thanks, Sean-Michael :l:

Hey great tutorial. It helped me a bunch. This was my first time using GIMP and the tutorial made it extremely easy. Here is what I made although I don't think it is very good.

http://img99.imageshack.us/my.php?image=mysoccersig6ue.gif

This looks great! :l:

One thing I would sugest is to make the last frame longer... I set mine to like (4000ms) or (3000ms) I think thats like 3 or 4 seconds. That way all the text is readable and the veiwer is doesnt strain trying to read it.

And you asked me about my user tag bar... This actually rather easy and Ill explain here... :l:

[*] I made the tags

[*] I made a solid black background named_00001.xcf

[*] Duplicated 79 times and went to the move path... "79 + origional = 80"

[*] Only adjustment I made was with the opacity... 3 points 1=0% 2=100% 3=0%

[*] I set the GAP to work on 40 frames 20 fading in and 20 fading out.

[*] One thing that was tricky was the begining and end, I had to start fading the first tag and end fading the same tag back... That way it keept looping continously.

[*] My final touch was adding three layers and inserting the tags in the middle with full opacity and then I set those frames to a longer time like I sugested to you above... :l:

I hope that helps... and thanks againg for sharing :w: Good work!

Edit I think I overlaped tags by 10 frames...

Thank you so much. I love this site. Yall have made it extremely easy for me to start making my own grpahics without any previous PS or GIMP knowledge. :h: :h: :h:

Welcome to gimptalk, coolchris!

Nice work on the animation!

Glad Sean was able to help you out. It's a great tutorial, isn't it? Hope you become a regular member.

Art (fencepost)

Yes it is an incredible tutorial and I will most definitely become a regular memeber. I am currently making the changes to my animation that Sean suggested and should be able to post a new image very soon.

Looking forward to it :l:

Art (fencepost)

Well there it is. I definitely like the longer pause at the end. It allows the reader to actually read wut it says.

well im new here but ive had gimp for a while. im a sig maker on the runesaperealm forums. heres my animation thing

Looks good wilrecar77! Thankyou for shareing!

Im currently working on a new tutorial for fading frames, currently it takes me a long time and alot of energy to make my tutorials because I try to cover each tricky step. Im planing on simplifing my tuts as my next project so I can pump more tutorials out and quicker lol

well this may be a bit off topic but if u save a non-animated thing as a .gif u loose alot of quality. im working on more animated pics

[center]Depends on how you save... Try these settings and see if it helps...

Here is my first crack at it. ... It does not loop so copy and paste the url into a new window.......

http://www.trademarkclan.net/troop98/images/header.gif

Great job, SW! The only thing I would change is maybe increase the time of display for your "A Boy Scout is" frame. Other than that I think it's great.

A