posted on: Sep 30, 2006 at 01:29:34
by Scott Bicknell
AC7ZZ
|
|
|
Tutorial: Using the GAP (Gimp Animation Package)
(First published at Wilber's Wiki)
This tutorial was last tested for the Gimp '' 2.2.12 ''
Overview
This tutorial first explains how GIF animations are treated by the
Gimp and then expands on that foundation by explaining how the Gimp
Animation Package takes Gimp animation to the next level. It will
explain how to install the GAP from the Redhat package--even for
non-Redhat systems, how to obtain the GAP documentation that the Redhat
package apparently leaves out, and, most importantly, de-mystifies the
GAP for creating GIF animations for the Web.
It will be as complete as I can make it, providing a solid
foundation for understanding how the GAP treats animations and then
explaining the finer points of the package to illustrate some of its
more useful features for GIF animation. My goal is to provide a
one-stop tutorial for Gimp animation that goes from complete beginner
to intermediate knowledge that other tutorials skip or gloss over.
Steps
Simple Gimp Animations
GIF animations are sequences of grayscale or indexed color images
with timing information attached. The Gimp allows the creation of
animated GIFs by placing each frame of an animation in its own layer
and attaching timing information through modification of the layer
comment.
The Gimp provides some script-fu add-ons that create animations
that may be integrated with more complex GAP animations as well as a
way to play animations either created by or loaded into the Gimp. These
add-ons are found in the <Image>Script-Fu/Animators menu. For those unfamiliar with the preceding menu path, <Image> refers to the window containing your image. Script-Fu is a top-level menu in this window. And Animators is a submenu of the image window's Script-Fu menu. To play animations in the Gimp, open the <Image>Filters/Animation/Playback...
item. This will open a new window containing a view of the first frame
of the animation along with controls for playing the animation in a
loop or for stepping through it frame-by-frame.
Another useful Gimp feature for creating GIF animations is the <Toolbox>Xtns/Script-Fu/Logos
menu. Here you can create very cool text logos that can be animated
with Gimp's built-in animators or incorporated into GAP animations.
Together with the Gimp's Layers dialog, these tools make creating
simple GIF animations easy. (I'm a big fan of automation, so
whenever I see an opportunity to offload work onto the computer, I take
it. So, when you see me referring to logo and animator script-fu's,
it's not because I'm suggesting that they are the best way to get
esthetically pleasing results. It's just that I'm like a kid in a candy
store when it comes to automating things.)
To get started, create a new Gimp image by opening the <Toolbox>File/New... or <Image>File/New... dialog, or by pressing Ctrl+N on the keyboard.
Alternatively, open an existing image by using the <Toolbox>File/Open or <Image>File/Open dialogs, by pressing Ctrl+O
on the keyboard, or by dragging an image icon from your desktop to the
Gimp's toolbox (my personal favorite file-opening shortcut). If the
Layers dialog is not already open, open it by chosing the <Toolbox>File/Dialogs/Layers or <Image>Dialogs/Layers menu item, or by pressing Ctrl+L on the keyboard.
This simple example will not go into a lot of detail about
hand-crafting animations other than to show you the general procedure.
I only want to explain it in enough detail so that if you need to, you
can fine-tune an animation once it is created by one of the other
automated methods I will describe. More detailed tutorials for simple
GIF animations already exist at gimp.org.
Add images to your animation by copying and pasting or by
duplicating the current layer and modifying the new copy. New layers
can be created with the <Image>Layer/New Layer... dialog or <Image>Layer/Duplicate Layer
menu item, by pressing the New Layer or Duplicate Layer buttons in the
Layers dialog, or, after pasting an image into your animation, by
pressing the New Layer button in the Layers dialog to turn the pasted
image from a floating selection (Pasted Layer) into a new layer.
Once you have collected all of the images of your animation and
pasted them as layers into your Gimp file, you can modify each layer's
comment and add timing information. To do so, double-click the bottom
layer in the Layers dialog, which is the first frame of the animation.
This will enable you to edit the layer's comment. Timing information
should be formatted as follows:
The number inside the parentheses indicates that this frame of the
animation should be displayed for 2000 milliseconds, or 2 seconds. The
layers can be named any way you wish, otherwise. Numbering them
sequencially helps identify them, but is not strictly necessary. Press
the Enter key on the keyboard when the comment is complete, then the up
arrow key, and press Enter again to edit the comment for each layer in
turn.
When you have finished entering timing information for all of the frames you can view the results by opening the <Image>Filters/Animation/Playback... dialog.
When you are satisfied with the results, optimize your animation with the <Image>Filters/Animation/Optimize (for GIF) menu item. This will create a copy of your animation. Save it with a .gif extension. Be sure to select the Save as Animation radio button in the following dialog. Otherwise, the Gimp will flatten the image by combining all layers into a single layer.
These steps:
creating a Gimp image file
adding image layers
modifying the layer comment by adding timing information
optimizing for GIF
and saving as a GIF animation
are all there is to creating animations with the Gimp. Except, of
course, that there is a whole lot more to it than that if you want to
create ultra-cool effects and complex transitions, which we will get
into next.
Simple Gimp Animators
Now we will move on to some more interesting features of the Gimp
for generating animations automatically. For this process we will be
taking advantage of the Gimp's logo creation script-fu's. These scripts
allow you to create and customize cool-looking text that you can
animate with the Gimp's built-in animators.
Begin by opening the <Toolbox>Xtns/Script-Fu/Logos menu and selecting Alien Glow....
For now, accept the defaults in the dialog that pops up and watch
this script go to work. It will create a new image with the word ALIEN
in green, glowing text on a black background. Make sure the new image's
window is selected and go to the Layers dialog. Right-click on every
layer and click Merge Down from the pop-up menu until only one layer remains. Then, from the new image, open <Image>Script-Fu/Animators/Rippling....
Accept the defaults in this dialog for now. Again, a new image will
be created, this time with a warped version of the ALIEN text from the
first image. From this second new image, select <Image>Filters/Animation/Playback....
A new window appears containing a view of the first frame of the
animation. Click the Play/Stop button. The Gimp now plays back your
newly-created animation. When you are done, click the Close button. You
can now save the animation as a GIF using the procedure outlined above
for creating simple Gimp animations or as a Gimp .xcf file for use
later in other animations.
The script-fu's for logos offer the ability to change the text,
font, and colors used for creating images and the animation script-fu's
allow you to customize the number of frames and other parameters
specific to each animator. Some require your image to have multiple
layers; some only work with one. Play around with both the logo and
animator script-fu's to see what kinds of cool text effects you can
create and to see what other interesting animation effects you can
generate.
Installing GAP
Windows users have it easy. There is a setup program available that installs the GAP at the win-gimp website.
Download the most recent version to your desktop. (Version numbers are
NOT decimal the way mathematical numbers are, so version 1.2 is older than version 1.15.)
It is a zip file. Open it and drag the setup program to your desktop.
Then double-click on the setup program to install it. Red Hat users
have it easy. There is an RPM package that does the same. Just type sudo rpm -Uvh gimp-gap-2.0.2-4.i386.rpm. Debian users have it easier still... sudo apt install gimp-gap.
They don't even need to download it first. Blah, blah, blah. I use
SuSE, which normally has nice packages available. Not so with the GAP.
The source code for GAP is at the gimp-gap download page. If you have development files installed on your system, you may be able to compile and install it from source:
CODE:
$ ./configure
$ make
$ su
password:
# make install |
An alternate method for installing the GAP on an RPM-based Linux
system without a development environment is to install the Red Hat
package and move the installed files to where your distribution
installs the Gimp, so that the next time you start it up there is a
nice, new Video menu added to your image windows. The RPM package can
be downloaded from rpmFind.net.
It is not the most recent version of the GAP, however. After installing
this package with your package manager you will find the GAP plugins at
/usr/lib/gimp/2.0/plug-ins and the GAP scripts at /usr/share/gimp/2.0/scripts . To locate the system directories used for plugins and scripts by your version of the Gimp, open the <Toolbox>File/Preferences
dialog and look in the Folders section. There will be sub-sections
there for plug-ins and scripts. The Gimp's system directories will be
listed there. Alternatively, you can copy the GAP files to the
directories listed in the same dialog for your user account.
The RPM package neglects to include the documentation for the GAP.
It is included in the source tarball for the GAP, though, so if you
download and untar it from the gimp-gap source repository, the doc files will be there. They are quite instructive once you have a basic grasp of how the GAP works.
If everything goes smoothly, the next time you open an image in the
Gimp, there will be a new menu on all of your image windows labeled Video. If not....
Introduction to the Gimp Animation Package
The Gimp Animation Package does much more than allow you to create
GIF animations; full-blown videos can be edited with it. But for our
purposes, the GAP's GIF animation features will do. (If you are
looking for a tutorial explaing how to create avi's or mpeg's, this it
not it. There are tutorials for those features, and I have links to
them at the end of the tutorial. In particular, the tutorials at carol.gimp.org may be of help, and Carol can be contacted directly on the GIMP User's mailing list if you have questions about any of the material.)
As I said earlier, the GAP takes Gimp animation to a whole new
level. Where the Gimp treats each layer of a multi-layer image as a
frame of an animation, the GAP treats each Gimp XCF file as a
multi-layered frame of a single animation. The process of editing
animations with the GAP creates as many Gimp XCF files as there are
frames in your target animation. And each of those frames will contain
multiple layers.
If you have ever created GIF animations with the Gimp that
contained fading between different graphical elements and had to merge
layers over and over for each frame by hand, you will appreciate what
the GAP has to offer. (I used to do that with 300-frame banners
that contained quite complex transition sequences. The process took me
about 10 hours to complete and I had to use a spreadsheet to keep track
of my work. That is what motivated me to learn GAP.) It eliminates
all of that by handling it automatically. Instead of having to
calculate opacity changes yourself, you specify a starting opacity and
an ending opacity and the number of frames for the transition. The GAP
does the rest. It does the same for moving graphical elements from
point to point in your animation and for perspective and rotation
affects as well.
In order to create and edit animations with the GAP, your
destination files will have to be able to handle layers and both source
and destination files will have to have the same color mode, RGB or
indexed. Mixing the two color modes will not work. The Gimp's native
XCF format is perfect for your destination file format. Source images
can be any format as long as their color mode matches that of your
destination frames. The GAP is very particular about the names you use
for your destination files, also. The format is
any-old-filename_000001.xcf. The part of the name it is picky about is
the _000001.xcf part. The other part doesn't matter. If you try to
operate on a file with any other file name format, the GAP will simply
display an error message and exit.
Getting Started
So, to get started with the GAP, create a Gimp XCF file, end its
name with _000001.xcf, and store it in its own folder. If you don't put
it in its own folder you will end up with as many XCF files as there
are frames in your animation populating whatever directory you happen
to store it in. If that is your desktop, you'll have a huge mess to
clean up later. Better to corral your animation in its own folder ahead
of time and avoid the cleanup job altogether.
Now that you have a correctly named Gimp XCF file you need to
create some frames for the GAP to work with. Remember, frames are just
Gimp XCF files that have the correct file name format. You can create
copies of the initial frame yourself from the shell or use the <Image>Video/Duplicate Frames... dialog.
The bottom slider of this dialog is labeled N times, and it will
duplicate your animation frame as many times as you specify. So, if you
want to create a 200 frame animation, set this slider to 199.
Incidentally, the slider will only increase to 99, but the spin box
next to it may be used to increase the number of frames duplicated
beyond 99.
When you click the OK button your frames are created in the same
directory where your initial frame resides without any further
interaction from you. If you look in that directory, you will see many
Gimp XCF files with _000002.xcf, _000003.xcf and so on as the final
part of their file names.
The next step is to create a source image. This may be an XCF file
or some other file format, but it may be named anything you like. You
may place it in the same directory as your animation frame files. This
file may contain multiple image layers, each being a different source
image. Be sure that this file and your animation frame files have the
same color mode set, either RGB or indexed. Otherwise, the GAP will not
recognize it as a valid source image.
This is a good place to store the logo text created with the Gimp's
script-fu's. If you delete the background layers from the images
created by these logo scripts, animating them against the background
layers in your animation will be much easier. Also, placing them in the
upper left-hand corner of the source image will make it easier to
precisely position them in your animation; the GAP calculates the upper
left-hand corner of your source image's source layer from the upper
left-hand corner of the image canvas, not the layer's upper left
corner. I find it convenient to place horizontal and vertical guides at
positions 0 and 0 on the source image canvas, so that when I move my
source layers into position they snap into the upper left-hand corner.
I also give them meaningful names to more easily identify them in the
GAP's Move Path dialog, where they are identified by their layer
comment.
The Move Path Dialog
Once you have your source image created and populated with layers
of graphics and text, it's time to start making things move. With one,
and only one, of your animation frames open and one or more source
images open, open the Video menu on the animation frame window and select Move Path....
The reason I put it that way is that having more than one animation
frame open may cause corruption of your animation files. So be sure you
only have one animation frame open at a time. You can have multiple
source images open. Just be sure that they and your animation frames
all have the same color mode, e.g. Gimp xcf files that are all either
indexed or rgb, or Gimp xcf destination files that are indexed and gif
source image files, which are always indexed. Also, be sure that you
open the Move Path dialog from your animation frame window's Video
menu, rather than from your source image's Video menu. The Move Path
dialog expects the image where it was invoked to be a valid GAP frame
file and will stomp its finicky feet if it isn't.
If you have followed my instructions precisely, the Move Path dialog should appear and the Source Image/Layer combo box at the top of the dialog should have one of your source layers selected.
Incidentally, there is no reason to keep your source layer on
screen for any of this; you will not be referring to it from here on.
It only needs to be open so that the Move Path dialog can use it. The
Move Path dialog will show you everything you need to see, (well, almost everything).
The Move Path dialog initially selects the upper-most layer of your
source image. If this is not the one you want to work with, select
another layer from the Source Image/Layer combo box. Two other settings in this dialog will make working with your source layer possible. The first is the Instant Apply check box found near the bottom left of the dialog.
This will instantly update the preview pane of your animation,
which is located just above it. This allows you to see what you are
doing. The second is the Step Mode combo box located directly below the Source Image/Layer combo box.
This box is always initially set to Loop. What this means is that
the GAP will loop through each layer of your source image, mapping each
layer to one frame of your animation. If your source image were an
animation of its own, this might be a good setting to keep, as it would
allow you to integrate an existing animation file into your GAP
animation. But if what you want to do is animate a single layer of your
source image, then set the Step Mode combo box to None.
This combo box has several other settings available. They are Loop, Loop Reverse, Once, Once Reverse, Ping Pong, and None.
As you might guess, these will loop through each layer of your source
image (loop), repeatedly mapping layers to frames, do the same thing in
reverse (loop reverse), map each layer only once (once), only once in
reverse (once reverse), map forward and then backward repeatedly (ping
pong), and none (none), which will stick with a single layer. The other
options, which are the same as the ones above, but prepended with Frame are for integrating other GAP animations into the current GAP animation and work the same way as just described.
So, to animate a single layer of your source image, select None from the Step Mode combo box.
Points
The GAP operates on your animation by calculating the changes that
you specify between defined points. A point is a sequencially numbered
collection of attributes that defines the state of your animation at a
given point in time. By default, the first point corresponds with the
first frame of your animation and the last point corresponds with the
last frame. For instance, you may specify that at point 1 your source
image is fully transparent and that at point two it is fully opaque.
You may further specify that your source image is located at the bottom
left corner at point one and at the upper right corner at point 2. This
allows you to think only about the starting and ending state of your
animation sequence. You don't need to think about how to get from point
A to point B (or, in GAP's terms, point 1 to point 2); the GAP handles
all of the details of calculating opacity changes and movement of
images from one place to another. If you preview your animation at this
stage, your source image will slowly come into view as it moves from
the lower left corner to the upper right corner, where it will reach
full opacity before the animation loops and begins again. I'll use this
simple animation sequence to explain the GAP's features.
These two changes, opacity and position, are controlled by the Opacity slider and by the X and Y sliders.
Additionally, how your source image is placed depends upon what
part of it is used to measure its position. This is controlled by the Handle combo box and may be any of the following values: Left Top, Left Bottom, Right Top, Right Bottom, or Center, which refer to the source image corners and center.
These handle positions are influenced by where in your source image
the source layer resides. If your 50 pixel by 50 pixel source layer is
at the bottom right corner of an image with a 300 pixel by 300 pixel
canvas, the upper left corner will be at 0, 0 of the source image's
canvas, not the source layer's upper left corner. And the center will
be measured from that same corner of the canvas to the lower right
corner of the canvas. Thus, to get the behavior you want from these
settings, it is advisable to always place your source layers in the
same position you expect to use as a handle in the Move Path dialog.
For instance, if you want to use the center handle in the Move Path
dialog, center the source layer in the source image. If you want to use
the right bottom handle, place your layer at the lower right corner of
your source image. To center a layer in your source image, make sure it
is active in the layers dialog, then cut it and immediately paste it
back into the source image and click the New Layer button in the layers
dialog. Rename it if you want a descriptive label for the Move Path
dialog's Source Image/Layer combo box.
So, to work with one layer of your source image, set the Step Mode combo box to None. To position the upper left corner of the source image at the lower left corner of your animation, check the Instant Apply check box so you can see what you are doing and move the X and Y sliders until your source image comes into view in the preview pane at your animation's lower left corner. Adjust the Opacity
slider to zero to make the source layer transparent. Now you have
completed the settings for the first point in your animation, which is
created for you automatically by the GAP.
One thing you need to know about the preview pane of the Move Path
dialog is that it does not always show you a complete view of your
animation, particularly the right side and bottom edges of your
animation. It sometimes appears that your source layer is beyond the
right edge, when, in fact, it has not reached it yet. To move source
images to the exact right edge of your animation sometimes requires
knowing how many pixels wide your source layer and animation both are.
Then, by using the X and Y spin boxes, you can precisely position your source layer. I usually keep a calculator close by when creating animations.
Incidentally, you can position source layers by clicking and
dragging in the preview pane. If you can see how the source layer
interacts with other elements of your animation at that point, this can
be a convenient method of moving images. To make this easier, you can
set the frame shown by the preview pane by adjusting the Frame slider at the bottom of the Move Path dialog.
This will update the preview pane by showing you the corresponding
frame of your animation. Then you can drag your current source layer to
visually position it in relation to existing elements of your
animation. That way you don't have to work blind.
To adjust the settings for the second point you must first create one by clicking the Add Point button.
When you do, the Current Point indicator above the X and Y sliders will read [2] of [2] and your settings from point one will be copied to point two. Now, move the Opacity slider back to 100 and adjust the X and Y
sliders to position your source layer at the upper right corner of your
animation. You are done adjusting the values for point two and are
ready to preview your animation to see how it plays.
Click the Anim Preview button at the bottom of the dialog. Another dialog pops up.
Select Exact Object on Frames and set the Scale Preview slider to 100. Then click the OK
button. The GAP creates an animation file containing your settings and
brings up the Gimp's Animation Playback dialog. Click Play/Stop to play
the animation. Click the close button and close the file generated for
the preview without saving.
At this stage you can add more points to your animation, delete the
current point, delete all points, and insert points. You can navigate
between points with the Next Point, Prev Point, First Point, and Last Point buttons.
If you add a third point, the time between points 1 and 2, and
between points 2 and 3, will be divided equally. By default, point 2
will be half way through the animation. To change this, make point 2
the current point and adjust the Keyframe spin box located below the X and Y
sliders to make point 2 occur at a particular frame of the animation.
In a 100-frame animation point 2 will usually occur at frame 50.
Setting it to 25 will speed up the animation from point 1 to point 2
and slow it down between point 2 and point 3.
Keyframes can only be set for points 2 through the next to last
point. So, how can you key point 1 to a frame other than frame 1 and
the last point to a frame other than the last one? That is set with the
From Frame and To Frame sliders in the lower right corner
of the dialog. This allows you to work with a subset of your animation
without affecting every frame, so that you can, for instance, insert a
source image midway through your video. When working with a subset of
your animation frames the Anim Preview button only generates
previews of the subset of frames you are working with. To see a preview
of your entire animation will require generating an animation file from
your frames using the <image>/Video/Frames to image...
dialog, which I will get to later. This can only be done after
dismissing the Move Path dialog, unless you are working with every
frame of your animation at the time. Unfortunately, the GAP only allows
you to have one of its dialogs open at a time. This is really a
limitation of the Gimp, rather than GAP. The GAP is really a set of
plugins. Each dialog is a separate plugin, and the Gimp only allows one
plugin to be active at a time.
Now, let's suppose you are happy with how the first source layer
looks in your animation. You want to save the state of your animation
by clicking the OK button in the Move Path dialog. Until you are ready to save your changes, avoid this button like the plague.
You cannot easily undo your changes if you accidentally click this
button prematurely. It can be done, but not automatically. Clicking
this button closes the dialog and commits your changes to each frame of
your animation without any further interaction from you. If you are not
done adding images and text to your animation and you want to add more,
that's Okay. Just open the Move Path dialog again and select a
different source layer from the Source Image/Layer combo box
and begin again. All of the settings from your previous use of the Move
Path dialog will be gone. It will be like starting over, only your
previous work will be visible in the preview pane if you cycle through
the existing frames.
Perspective, Layer Stack, Scaling, Rotation, Paint Mode, and Selection Handling
At this stage you may want to play with the other settings the Move
Path dialog offers. The Perspective tab has 8 spin boxes, one for each
source layer corner's X and Y component. It will allow you to shear or
adjust the source image perspective and, of course, to animate changes
in perspective.
Using Instant Apply, you can adjust these spin boxes one at
a time in small increments or decrements to see the effect on your
source layer's appearance. Be careful, though, about doing so with
large images. It can take a lot of processing power to use this feature
with Instant Apply enabled. But used together with the Opacity slider and the X and Y position sliders, interesting effects can be created.
The Layerstack slider in the lower right corner of the dialog controls how your source layer is inserted into your animation.
At 0, your source layer is placed above all other layers of your
animation. Larger values place it progressively farther down in the
stack of layers, behind other elements.
You can scale the source layer using the Width and Height spin boxes on the Scale and Modify tab.
By default, these spin boxes scale the source layer to 100% of its
size. You can scale it smaller or larger as you wish, and you can scale
it vertically and horizontally by arbitrary amounts if you click the
chain link to the right, which will allow independent adjustments to
each spin box.
The Rotate slider, located under the Opacity slider
on the Scale and Modify tab, will rotate the source layer clockwise or
counterclockwise depending on whether it is given positive or negative
values, respectively.
And your image may be rotated by arbitrary amounts. Amounts are
measured in degrees of rotation and may be multiples or fractions of
complete circles. The rotation will occur on the Z axis. That is, your
view of the rotation will be along the line of the axis. If you want
the rotation to occur from front to back/back to front, there is a rotation script-fu animator
available from the Gimp's plugin repository that will do that for you.
Just use it to create a separate animation and integrate it with your
GAP animation following the instructions I will give later in this
tutorial.
The Mode combo box, located to the right of the Source Image/Layer combo box, lets you determine the blending mode used for the current source layer.
See the Gimp's documentation for more information about the paint modes available here.
If you make a selection in your source image, you can use just that selection in your animation by setting Use Selection (from initial source image) or Use Selections (from all source images) from the combo box on the Selection Handling tab.
Feathering of the selection(s) is controlled by the Selection Feather Radius slider on the same tab.
Tweensteps
To smooth out the appearance of rapidly moving images in your
animation, there is a cool setting on the Advanced tab of the Move Path
dialog called Tweensteps. It allows you to create a fading
trail of copies of your source image that overlap each other. This
creates the illusion of smooth motion in your animation. Try a setting
of between 6 and 8. Too high a setting will result in massive
processing and will slow down the generation of previews and of saving
your animation, and there is a diminishing return of effect beyond a
certain number of steps. Experiment to find a good value.
You can adjust the starting and ending opacity of the tweensteps, but the defaults seem to work well.
Tracelayer
The Tracelayer checkbox will create a comet tail effect for objects
that move. The difference between this and tweensteps is that the trail
is smoother and longer lasting than the tweensteps effect.
Bluebox Filter
The bluebox checkbox allows you to change the opacity of a
particular color. That color is controled by the Keycolor button, which
shows the currently active keycolor. Clicking this button brings up the
Bluebox dialog.
Opacity, threshold, and feathering can be very finely tuned. The
main controls to pay attention to are the keycolor dialog, source alpha
and target alpha sliders, and the preview button, which allows you to
see the effect of your choices in the other controls. By keeping the
Feather Edges box checked and adjusting the feather radius you can
create a kind of ghosting of images that consist of a single, solid
color.
Setting the Frame Rate
When you are done adding source layers to your animation and
setting points, it is time to create a real animation from your GAP
frame files. The first step in this process is to open the Video
Navigator dialog from your frame image's <Image>Video/VCR Navigator... menu item.
This dialog has a spin box labelled Framerate. Set this to the number of frames per second desired and close the dialog. Your setting is saved automatically.
The next step is to create an image file that contains the animation you've been working on. Open the <Image>Video/Frames to Image... dialog.
This dialog's default settings are appropriate for our purposes. Simply click OK. The gap generates an animation file and opens it.
At this stage the steps are identical to creating a simple animation. You can preview it using the Gimp's <Image>Filters/Animation/Playback... dialog and you can optimize it with the <Image>Filters/Animation/Optimize (for GIF) menu item. Save the resulting image as a GIF and select Save as Animation from the following dialog to create your animation file.
Combining Animations
One of the nice features of the Gimp is the ability to animate
still images with its script-fu animators. These scripts create simple
animation files that you can incorporate into your GAP animations. To
do so, use the animation file as your source image and set the Stepmode combo box to something other than None. As stated above, this combo box defaults to Loop,
which will fetch one layer of your source animation and map it to one
frame of your target animation and will loop repeatedly through the
source image's layers until there are no more frames in your animation
to apply the source image layers to. All layers of the source image
will be used. In this case there is no need to select a source layer,
unless you need to start animating at a particular position in the
source animation. If that's the case, just select the source layer you
want the animation to begin with.
But it gets even better. You can incorporate other GAP animations
into the current GAP animation in the same way. Just open the first
frame of the other GAP animation as your source image and set the Stepmode to Frame Loop or one of the other Frame values. These settings are designed for combining GAP animations into the current animation. If you use Frame None
as the setting, you can select a single frame from the source animation
and insert it in its entirety into your current animation, treating a
multi-layered frame as a flat image.
The Move Path dialog has a SpeedFactor spin box located under the Source Image/Layer combo box. This controls how fast a source animation is "played back" when integrating it into a GAP animation.
This setting controls the frame rate of the source animation in
relation to the target animation's frame rate. 1.0 exactly matches
source and target frame rates. 0.5 maps one source frame to two target
frames, i.e. plays the source at half speed. 2.0 doubles the source
animation's speed in the target animation.
Animating Layer Masks
Some really cool transitions and other effects can be created using
animated layer masks in GAP. The problem is getting the masks into your
GAP animations and making them move. It isn't exactly straightforward,
especially when you are used to quickly adding a layer mask to a single
image layer in the Gimp's layer dialog.
How do you add a mask to a whole set of GAP frames? And how do you make that mask move?
The answers are somewhat irritating at first, because they seem so
complicated, just like the GAP itself does when you first start using
it. But the procedure is really quite simple once you understand it.
Create a gray scale image to use as a mask, animate that image either
separately or as part of your main animation, and then turn the layer
stack containing your mask image into actual layer masks for your
frames Delete the original layer stack afterwards.
Begin by making a gray scale image you want to use as a mask and
animating it using the techniques I outlined above. Here is the
animation mask I created.
I kept this as a GAP animation and used a stepmode setting of Frame
Once in the Move Path dialog to integrate it with my animation. Place
your animation mask just above or just below the layerstack you want to
use your mask on. Once you finish inserting it into your animation you
need to convert it into a layer mask for the layerstack it is to apply
to.
To do this open the <Image>Video/Frames Modify... dialog.
Select the Copy layermask from layer above option from the function
combo box and enter the layerstack number to which you want to add a
layer mask in the layer pattern text box. If you want to operate on
only a subset of frames, change the From Frame and To Frame sliders.
But be careful in this case that you set the layerstack correctly. Once
you are done click the OK button.
After the operation completes you need to delete the mask layer or turn off its visibility. You can delete it using the <Image>/Video/Frames Layer Delete... dialog.
The result of doing all of this with an animation I created using
two night time skylines, one for Melbourne and the other for Las Vegas
is here. Compare the animation mask above with this image.
Many, much more interesting effects can be created using animated masks in GAP. Have fun.
Tweaking Animations
One limitation of the automation offered by the Gimp's animator
script-fu's and of the GAP is that the timing information for all
frames is usually uniform. You can tweak the settings for individual
frames after creating an animation file from the frame image's <Image>Video/Frames to Image... dialog simply by editing each target image layer's comment in the Layers dialog.
You can use one of two modes for each frame of your animation, freely mixing modes from frame-to-frame--(combine) and (replace).
Typed into the layer comment after the timing information exactly as
shown, these modes allow your animation frame to combine with
previously displayed frames or to replace them, respectively. For
example, if you want to display layer 2 for 3 seconds and to completely
replace layer 1, type the layer comment as follows:
CODE:
layer 2 (3000ms)(replace) |
(combine) is the default mode.
There are two general paths you can take to optimizing your
animation. You can optimize it as an RGB image and then convert it to
indexed, or you can convert it to indexed and then optimize the indexed
version. I suggest you try both methods to see which results in smaller
images for each project.
Documentation
At this point you should be able to create nice animated logos
using the GIMP's Logo script-fu's, animate them using the script-fu
animators, and incorporate them into GAP animations along with other
text and images. The documentation that should come with the GAP rpm's
(it does come with the source code) explains all of the GAP's features
in detail. I'll leave the rest up to you.
Other Resources
Gimp Simple Animations Tutorial
Gimp Using GAP Tutorial
Gimp Advanced Animations Tutorial
Advanced Animation Simplified
Flash Effect Using GAP
Sniper Scopt Effect Using GAP
GAP Overview
Toteu Advanced Animations Tutorial
Advanced Animation Techniques Using GAP
Fading Frames With Gimp GAP
Fading Transitions With GAP
Inserting Animated GIF's
Flashing Text Tutorial For GAP
Flash-Based GAP Tutorial (Excellent!)
|
|
|
|