Cel Assembler 1.2 User's Guide
Welcome to Cel Assembler 1.2's User's Guide. Hopefully, this document will answer any questions you have about using this product to its fullest. Enjoy!
Basics
Cel Assembler
is a tool for building GIF animations. A GIF animation is nothing
more than an ordered list of separate GIF images, much like a
slide show, with instructions on how long to delay between
images. The original GIF 89a specification was extended by adding
the ability to loop, paving the way for animation on the World
Wide Web that is simple to build and quick to download. The
end result is what looks like a plain old GIF file (i.e.
"filename.gif") but actually contains a small
animation.
Terminology
First, some notes
on terminology. A cel or a frame (the terms are
used interchangeably) is a single image in an animation. An
ordinary bitmap image becomes a cel once it is inserted into an
animation. An animation refers to the collection
of cels, complete with all related timing and color instructions. A GIF animation defines a screen
size which defines a rectangle in which the animation is
visible. Individual cels are clipped to this screen.
Program
Layout
Below is a
screen shot of Cel Assembler displaying the gamanim.gif
animation. The sample file is located in the help folder
of Cel Assembler's installation location.
The window contains four main parts: the menu bar, two toolbars,
the animation view, and the status bar. The menu bar contains all
of the program's commands. The top toolbar contains a subset of
those commands in a quickly accessible format, and the lower
toolbar contains "shortcuts" to the frame and animation
properies. The status bar displays four pieces of information:
the current selection, the total number of frames in the
animation, the current zoom setting of the view, and the total
running time of the animation.
The most interesting area, of course, is
the main window area. The animation's frames are displayed as a
collection of filmstrips that can be oriented either horizontally or vertically. Each
strip is shown as a raised bar with "sprockets" along
one side (on the left for vertical strips and on the top for
horizontal strips) and contains as many frames as can fit in that
direction in the window. Multiple strips are then displayed next
to each other and scroll to show more strips (in the above
example, if the window was smaller, the strips would scroll
horizontally). The frames are ordered starting from the top left
of the window, follow along the current strip, and then continue
on the next strip. When viewed in a Web browser, the animation
displayed above looks like:
Cel Assembler's toolbars contain some
nonstandard buttons. Holding the mouse cursor over any one of the
buttons will display a ToolTip window identifying the function of
that button. Below is a brief summary of what the buttons do with
links to more information in this document.
The upper
toolbar contains buttons for file management, clipboard
operations, viewing controls, and global functions. Specifically,
from left to right:
|
New Animation | Starts a new animation. |
| File Open | Open an existing GIF file. | |
| File Save | Save current document; file name is requested if necessary. | |
| Insert Frame | Insert a new frame (or frames) into animation | |
| Cut | Cut currently selected frame. | |
| Copy | Copy currently selected frame. | |
| Paste | Paste contents of clipboard (clipboard must contain a frame to add to animation). | |
| Delete | Delete the currently selected frame. | |
| Show Animation Preview | Shows animation preview window. | |
| Stop Animation Preview | Closes animation preview window (if open). | |
| Optimize Animation | ||
| Unoptimize Animation | ||
| Zoom In | Increase current zoom; cannot exceed 100%. | |
| Zoom Out | Decrease current zoom; cannot zoom below 20% magnification. | |
| View Actual Size | Set zoom to 100%. | |
| Default Orientation | Allow Cel Assembler to pick filmstrip orientation. | |
| Horizontal Strips | Use horizontal filmstrips. | |
| Vertical Strips | Use vertical filmstrips. | |
| Help | Brings up this document. |
The lower
toolbar contains information and settings for the currently
selected frame and for the animation as a whole. From left to
right:
| Frame Properties | Displays current frame's property sheet. | |
| Name
of the Frame |
(Not saved with animation in version 1.2) | |
| Delay
|
In 1/100th of a second | |
| Type
of Removal |
Leave Alone, Restore Background, or Restore Previous | |
| Toggle
Transparency |
||
| Pick Transparent Index |
||
| Toggle
Local Palette |
||
| Show
Local Palette |
(Enabled only when local palette present) | |
| Toggle
Interlacing |
||
| Animation Property Sheet | Displays animation's property sheet. | |
| Number of
Iterations |
0 means continuous loop | |
| Show
global palette |
Loading Cels and Animations
Choose Open from the File menu to open a GIF file. The GIF file
may contain either a single image or a collection of images
making up an animation. Additionally, more than one file can be
opened at once; all of the opened files are automatically
concatenated into a single animation. Using the multiple-open
feature is the quickest way to go from individual GIF images to
an animation. For alternative ways to add cels to an animation,
see Adding
Cels below.
Previewing the Animation
Hit the
"Play" button on the toolbar or choose Animation
Preview from the View menu to see a preview of the animation.
This brings up a new window that plays the animation. There are
two ways to view the animation: in a continuous loop or a frame
at a time. By default, the animation preview displays in a
continuous loop using the delay setting specified in the
animation. Clicking on the Stop button stops the animation; this
also causes the button text to change to Loop -- to restart the
animation loop, click the button again. Clicking the Single Step
button stops the animation loop (if running) and advances the
animation one frame at a time; one click advances by one frame.
To close the animation preview window, either click on the 'x' at
the upper right of the window, hit the "Stop" button on
the main window toolbar, or select Animation Preview from the
View menu.
Notice that
the animation window can continue playing as the animation is
being edited and changed. This means that changes can be viewed
in the preview as they are made. This is especially useful for
fine-tuning the delay settings.
Managing
Cels
Frames can be
selected, inserted, deleted, and moved around. Most of the
functions are found in the the toolbar.
Selecting a Cel
To select a cel, click on it with the mouse
using the left mouse button. Clicking on a cel with the right
mouse button also selects the cel and additionally brings up a
context menu allowing you to view more information about the cel.
Double-clicking on a cel with the left mouse button selects the
cel and automatically invokes the cel's Image Properties dialog box. The
currently selected cel is highlighted with a red rectangle and
its frame number is show in the lower left part of the status
bar. For example, in the screen shot show above,
the 12th cel is selected.
To deselect a cel,
either select another cel or click on the window background where
there are no cels (so that no cels are selected).
Deleting a Cel
To delete a cel, it
must first be selected. Once
selected, the cel can either be permanently deleted using the
Edit.Delete menu item or by hitting the Del key on the
keyboard. The cel can also be cut and placed in the keyboard
using the Edit.Cut menu item or the Ctrl-X keyboard
shortcut. The clipboard can then be used to paste the cel back
into Cel Assembler with its animation information intact or into
another application as a single bitmap image.
Adding Cels
Cels may be inserted into an animation using
several methods, but first, a note about insertion. The insertion
point of an animation is defined as follows: if a cel is
currently selected, the inserted cel(s) is(are) placed before the
currently selected cel. If no cels are selected, the inserted
cel(s) is(are) placed at the very end of the animation. The
exception to this rule involves files that are
dragged&dropped directly into Cel Assembler; more on that
below. Insertions can take several forms:
Insert Frame
The File.Insert Frame menu item (or corresponding toolbar button) can be used to open one or more image files and insert their contents into the current animation. It brings up the standard "File Open" dialog. Select the file or files that you wish to insert and hit OK.
Pasting
Two types of objects can be pasted into Cel Assembler using the Windows clipboard: 8-bit Device Independent Bitmaps cut or copied from another application and cels that were cut or copied from within Cel Assembler. In either case, the inserted image is placed immediately preceding the currently selected cel or at the end of the animation if no cel is currently selected.
Drag & Drop
GIF files can be dragged from the Windows Explorer and dropped directly into Cel Assembler. The effect is the same as using the File.Insert Frame menu item, the only difference being that using Drag&Drop, the insertion location depends on where exactly the files are dropped. If the files are between two cels, that's where the new cel(s) will be inserted. If the file is dropped in an area beyond the existing cels, the new cel(s) will be inserted at the end of the animation.
Insertion
Conflicts
When a cel is inserted into an existing animation,
there are a few issues that might need resolving to ensure that
the final animation is displayed optimally. The two issues
involve the cel's size and the cel's palette.
Sizing Conflict
There is a sizing conflict if the current animation's dimensions are smaller than those of the cel being inserted. Canceling at this point cancels the entire insertion. There are two choices presented in the conflict dialog:
- Clip the inserted cel to fit within the animation. Note that the original cel is not physically clipped; instead, it is only effectively clipped by the size of the final animation. To minimize the storage required for the cel, it is recommended that the animation be optimized before saving.
- Enlarge the dimensions of the animation to accommodate the inserted cel. As of version 1.0, the extra space added to the animation by this operation is not "filled in" with anything. In order to keep the animation working nicely, the first image might need to be enlarged to fill in the background for the subsequent cels in the animation.
Palette Conflict
Unfortunately, the GIF file format limits the number of colors that can be used in an image to 256 colors. The actual number of colors that can be displayed on a given display and how those colors are displays vary with the application used to view the image. To make a long story short, it is usually a good idea to make sure that all of the cels in a GIF animation use the same global palette for specifying colors. When a cel is inserted into an animation, one of several situations may occur:
- The cel shares the same palette with the current global palette. This is the ideal situation and means that there is no conflict to resolve.
- The cel's palette can be cleanly merged with the current global palette so that the total number of colors used does not exceed 256. This type of merge does not present a conflict and is performed automatically.
- Neither of the above is true, and there is a need to resolve the palette merge. Cel Assembler offers the user several choices for dealing with this conflict and presents the user with a palette conflict dialog.
Current global palette The new cel(s) will be mapped to the current global palette. Only the inserted cel(s) are affected by this mapping. Merge with global palette The palette of the new image(s) is merged with the current global palette and all the images. Because the global palette is changed with this choice, all of the cels in the animation will be mapped to the new resulting palette. Adaptive Palette Used for pasting images containing more than 256 colors. A palette is generated based on the colors used in in the cel to be inserted. With this type of palette, the number of colors to be used in the adaptive palette can be set using the drop-down list below the palette selection box. More colors means better color accuracy but probably worse compression in the final image. Web "Color Cube" Palette This predefined palette of 216 colors presents a fair representation of the color spectrum. It is the palette used by most browsers to display on 256-color display and therefore essentially guarantees that the animation will be viewed as is during Web browsing. With this as the new global palette, all of the cels in the animation will be remapped. Local Palette The cel's global palette will be used as its local palette in the animation. This means that the inserted cel(s) will have its(their) own palette for display. Using a local palette preserves color information, but it makes the resulting file larger and slower to process.
Moving
Cels
Cels can be moved within an animation using a
number of techniques. The simplest is to select a cel, and
keeping the mouse button pressed, to drag the cel to its intended
position. When a cel is being dragged, the cursor changes to the
multi-arrow move cursor and the "drop spot" for the cel
is illustrated with an "insertion bar." You cannot drag
a cel outside of the Cel Assembler application.
The other way to move a cel is to use
cut&paste: Select the cel, cut it (see Deleting a Cel) and then pasting it in the desired position
(see Pasting).
Copying Cels to an Image Editor
Once a cel has been
inserted into an animation, most image editors can no longer edit
that cel from within the GIF file. To transfer a cel to an image
editor, select the cel and copy it to the clipboard using either
the Edit.Copy menu item or the Ctrl-C keyboard shortcut.
This places a copy of the image in the clipboard that can then be
pasted into an image editor. To return the cel to the animation,
either save it to a GIF file in the image editor and use Insert Frame or copy it to the clipboard in the image editor
and paste it into Cel Assembler.
Frame
Properties
A frame's properties, or settings, can be
viewed and edited by using either its property sheet or the
toolbar. Once a frame is selected,
its properties are visible on the lower toolbar. The property
sheet dialog can be activated in three ways: 1) select the cel
and choose the Edit.Frame Properties menu item, 2) right-click on
the cel and choose Frame Properties from the context menu, or 3)
select the cel and hit the Frame Properties button on the
toolbar. The dialog contains a comprehensive collection of
settings, but the most imprtant settings can also be conveniently
viewed and set directly from the toolbar. A frame's properties
tell a lot about the frame:
|
Name | The source file of the cel. (In version 1.x, this information is not maintained once the animation is saved.) |
| Width & Height | The size of the image represented by the cel. This is not accessible from the toolbar and is not editable in the dialog. | |
| Offsets | The offset from the upper left corner of the animation "screen" to the upper left corner of the cel's image. This is not accessible from the toolbar. | |
| Transparency | The GIF format allows an image to specify one color index to be treated as transparent. Transparency is toggled on or off using the checkbox in the dialog or the button on the toolbar. Turning the transparency on also requires picking the transparent color index. Both the dialog and the toolbar offer the ability to pick the transparency color index at any time by clicking the appropriate button. | |
| Interlacing | Is the image to be stored interlaced? Interlacing is a method for storing a GIF image so that it can be displayed progressively as it is downloaded; it does not significantly affect the size of the GIF file and depending on the displaying browser may be ignored for all but the first image in an animation. This flag be toggled on or off in either the dialog or the toolbar. | |
| Local Palette | The cel has a local palette (or not). If present, the local palette may be viewed using the Show... button. The use of a local palette can be eliminated by unchecking the box (or button on the toolbar); note however that this operation may require handling a palette conflict. A local palette cannot be added to a frame after the frame's initial insertion into the animation. | |
| Delay | The delay (in 1/100ths of a second) following the displaying of the frame before the next frame is shown. | |
| User Input | This setting is provided for completeness with the GIF89a specification and is not currently supported by any Web browsers. When enabled, this option indicates that a user input (i.e. a click on the animation) should interrupt the current delay, resuming the animation. This option is supported in Cel Assembler's animation preview. It is not availaible through the toolbar. | |
| Removal Method | There are four choices for how an image is removed before the next cel is drawn. Three are actually meaningful: do nothing (i.e. simply draw the next cel on top of the current one, represented by "Leave alone" and by default "No disposal method"), replace the background behind the current cel before drawing the next one (represented by "Background color"), and restore the animation to the state it was at before the current frame was drawn ("Restore previous"). All four choices and presented in the dialog for completeness with the GIF 89a specification. The toolbar choices are limited to the three meaningful choices. |
Picking the Transparent Index
A frame's
transparency color is selected in the "Pick Transparent
Index" dialog. The dialog presents two ways to select the
index: 1) click on one of the colors in the color table (on the
left) or 2) click on any pixel within the image (on the right).
When a new index is selected, the image on the right flashes the
affected pixels and then displays them as transparent.
Animation Properties
The
"Animation Properties" dialog is invoked by either
choosing the Edit.Animation Properties menu item, by
right-clicking in the Cel Assembler window and choosing Animation
Properties from the context menu, or by clicking on the Animation
Properties button on the toolbar. At least one cel must be
present for this dialog to be available. These settings affect
the animation as a whole. The lower toolbar offers direct access
for setting the number of iterations and for showing the global
palette.
|
Name | The name of the GIF file. This value can be changed by using the File.Save As menu item. |
| Width & Height | The width and height of the animation. This rectangles defines the size of the animation "screen" (the term used in the GIF specification). All cels are clipped to this rectangle. Changing these values may affect the final look of the animation by either clipping it or by leaving parts of the rectangle undrawn (if is sized larger than the largest cel). | |
| Auto Size | Calculates the size of the animation so that it completely encompasses all of the current cels. | |
| Global Palette | A global palette is present (or not). If one exists (recommended), the Show... button displays the palette. | |
| Number of Cels | Number of cels in the animation. This value is for reference purposes only. | |
| Enable Animation | Adds looping information to the GIF file. When disabled, the animation is played exactly once. See more information below. | |
| Number of Iterations | The number of times that the animation loop should be played. 0 indicates a continuous loop. Note: the animation preview plays the animation in a continuous loop regardless of the specified number of iterations. |
Setting Preferences
Selecting Preferences from the Edit menu brings
up the Preferences dialog box and allows the setting of some
default values that can be useful when building an animation from
scratch. The settings are broken into four pages, each specific
to a certain type of operation.
The default delay
setting is assigned to any frame that does not already have an
associated delay value when it is inserted into the animation.
Similarly, a default number of iterations can be set to be used
for any animation being built from scratch.
The next two pages
deal with palette conflicts. Two
distinct types of conflicts are covered, merging among 256-color
images and mapping a high-color image down to 256 colors. One of
the choices is to always ask the user for guidance, resulting in
the palette conflict dialog coming up every time a conflict is
encountered.
The last page deals
with sizing conflicts. One of the
choices is to always ask the user for guidance, resulting in the
sizing conflict dialog coming up every time a conflict is
encountered.
Setting these default
preferences as needed before starting to build or edit an
animation can save time and thought by avoiding the conflict
dialogs altogether.
Additional Functions
Optimizing Animations
Often only a small section of an animation
changes from cel to cel. In these cases, having each cel contain
a full frame of the animation is just a waste of space. That's
where animation optimization comes in. Choose Optimize Animation
from the Tools menu or the toolbarl to reduce each cel to the
smallest rectangle that is necessary to maintain the animation.
The resulting animation consists of cels smaller than the
"screen size" of the animation and offset to line them
up properly. Depending on the specifics of the animation, file
size reductions of 20-50% are easily possible. It's always a good
idea to optimize the animation before the final save.
The sample animation,
gamanim.gif, happens to be a very good example of what
optimization can do with a simple animation. The following screen
shot is what the animation looks like after optimization. When
played in a browser, the animation still looks the same, but its
size has decreased from 15K to 10K (results will vary depending
on the animation). The optimized file, gamopt.gif, can
be found in the help
folder of Cel Assembler's installation location.
Animation optimization does not affect any cel with a local
palette. It is recommended that local palettes be removed for the best
optimization results.
Unoptimizing Animations
Selecting Unoptimize Animation from the Tools
menu or the toolbar performs the opposite of the optimization
operation: it "fills in" every cel to show the full
view of the animation. This operation is useful for editing a cel
after an optimization. Note that unoptimizing will not restore
the animation to its pre-optimized state in cases where the
original animation was already partly optimized.
Editing
Comments
The GIF89a format allows for several types of data
beyond the basics of animation cels. While Cel Assembler does not
provide full editing support for these structures, it does
provide the ability to edit GIF comments. These comments are
located within the GIF file and can contain information such as
copyright notices or contact information. The comments are only
displayed by specialized applications, such as Cel Assembler, and
are not accessible from most image editor/viewers or Web
browsers.
To edit the
GIF's comments, choose GIF Comments from the Edit menu. The
dialog box contains a list of the current comments located in the
file. Multi-line comments are shown with "..."
following the first line. To edit a comment or view all the lines
of a multi-line comment, select the comment, and click the Edit
button. Double-clicking on a comment also opens the comment
editor.
To remove a comment
block, select it and click the Remove button or hit the Del key.
To add a new comment,
use the Add button. The comment can then be entered in the
comment editor. The comment is inserted preceding the currently
selected comment or at the end of the comment list if no comment
is selected.
Changing
the View
The way that the animation's cels are
displayed on the screen can be altered in several ways. First,
the orientation of the filmstrips can be changed from horizontal
to vertical or vice versa using either the appropriate toolbar
buttons or the View.Orientation menu item. The Default orientation
uses a vertical filmstrip when the cel size is wider than it is
tall; otherwise, horizontal strips are used.
Changing
the zoom setting also alters the way the animation data
is viewed. The toolbar offers buttons for zooming in, zooming
out, or viewing at actual size (100% zoom). The View.Zoom menu
item presents the zoom choices available. Note that zooming only
affects the viewing of the animation cels and does not actually
change the animation. Zooming abilities are provided to allow all
of the cels of animation to be viewed at once in those cases
where they cannot fit into the window at full size.
Recommendations
for Animating on the Web
When creating GIF animations for viewing off
of the World Wide Web, there are some issues that should be taken
into consideration. The first and foremost is file size. The
smaller the final file, the quicker it will download and the less
annoyed the audience will be. The following recommendations will
help minimize the file size:
And a small note on backward compatibility: not all Web browsers support animated GIFs. Older browsers usually display either the first frame or last frame of an animation, so to be extra safe, it is a good idea to have the first and last cels contain enough information to be useful by themselves. Setting the last frame's delay to 0 makes it essentially invisible within an animation.
Copyright,
Licensing, Trademarks, Warranty, Etc.
This software product is copyright ⌐
1996-1997 gamani productions. All rights reserved. All title and
copyrights in and to the software product (including but not
limited to any images, animations, and text incorporated into the
software product) are owned by gamani productions. The software
product is protected by copyright laws and international treaty
provisions. Therefore, you must treat the software product like
any other copyrighted material.
Once the user registers this software, the user is
restricted to the use of a single copy on only a single personal
computer or workstation which is not used as a server. The user
is restricted from modifying or copying the software, except that
the user may make one copy solely for backup or archival
purposes.
GIF is a trademark of
CompuServe.
The compression
technology used in the GIF file format covered by a patent owned
by Unisys Corporation. This software is licensed under U.S.
Patent No. 4,558,302 and foreign counterparts. Note that the
Unisys patent applies to software which reads and writes GIF
files, not to the GIF files themselves.
Disclaimer of Warranty
THIS SOFTWARE AND THE ACCOMPANYING FILES ARE PROVIDED "AS
IS" AND WITHOUT WARRANTIES AS TO PERFORMANCE OF
MERCHANTABILITY OR ANY OTHER WARRANTIES WHETHER EXPRESSED OR
IMPLIED. Because of the various hardware and software
environments into which this software may be put, NO WARRANTY OF
FITNESS FOR A PARTICULAR PURPOSE IS OFFERED.
Good data processing
procedure dictates that any program be thoroughly tested with
non-critical data before relying on it. The user must assume the
entire risk of using the program. ANY LIABILITY OF THE SELLER
WILL BE LIMITED EXCLUSIVELY TO PRODUCT REPLACEMENT OR REFUND OF
PURCHASE PRICE.
Registration
Cel Assembler is distributed as a
fully-functional demonstration program that expires 30 days after
first use. Information about obtaining a registered, non-expiring
copy of Cel Assembler is found here.
Contacting Us
Technical
Support
Please email technical support
issues to gamtech@gamani.com. Include your registration
number in the email to ensure a prompt response. Registered users
will get priority.
Feedback
We are always striving to make our
products better. If you have any bugs to report or features and
improvements to suggest, please email them to gamtech@gamani.com.
Updates
To find out about the latest
updates to Cel Assembler and (possibly) other tools being
developed by gamani productions, visit us at http://www.gamani.com/tools.
Copyright ⌐ 1997 gamani productions. All rights reserved.