Inhaltverzeichnis

Verfasser

Louis Jean-Richard, 27-06-2010
Copyright 2008, 2009 Louis Jean-Richard
  Installierung
See release notes.
  Einführung

Everybody knows from experience that the rapid display of a sequence of slightly varying images creates an illusion of movement. The phenomenon is due to the persistence of vision, and can be created and demonstrated in many ways. As soon as computers were provided with video displays people started experimenting with simple graphical animations and today a wide range of tools exist to create, record or compose films, cartoons, animated images, video games, populating the vast visual media arena.
So what is the point of having created Animat?
The author was in search for a program allowing to compose a simple animation loop from a set of photographs possibly using the portable network graphics ( PNG).

 

The lack of a suitable tool for the task prompted him to create his own tool and this way Animat was born. Its essential purpose is to allow the user to experiment in a creative way with animated images.
Beside the hands on approach of this manual we will try also to give some technical background to help grasp the potentialities of the tool.
To get out the best of Animat it is recommended to use it together with an image manipulation program like Gimp, Krita, Photoshop etc... , this way you can edit the source images to your needs.
The functionality of Animat overlaps to a certain degree with those of an image manipulation program but is not intended to replace them.

  Concepts

We are going to highlight a number of concepts related with the process of creating animations with the help of a computer.

 
  Image

Among the many meanings of the word image we mainly will use the one of "an optically formed reproduction of an object, such as formed by a lens or mirror" (Collins).
The term computer graphics encompasses the representation and manipulation of images in digital form. Digital pictures constitute the basis for creating animations.
With computers we can manipulate digital pictures using various technologies.

 
  Data encoding standards

Digital pictures are coded in form of large arrays of numbers but in order to ensure interoperability, coding standards have to be defined. Animat is able to use all the encoding formats handled by Firefox. Among the various data encoding standards we will throw a closer look to GIF, PNG and APNG.

 
 

GIF

The Graphics Interchange Format ( GIF) encoding format was introduced by CompuServe in 1987 and has come into widespread usage on the World Wide Web due among others to its easy implementation. Today this format is considered quite inadequate due to its limited features.

 

In 1989 CompuServe made an enhanced version that added support for multiple images in a stream. This enabled the creation of simple animations, probably the first to appear on the world wide web.

 

png

The Portable Network Graphics ( PNG) encoding standard was created to obviate to the limitations of the GIF format.

 

It employs lossless data compression and 24-bit RGB colour space. Although PNG was designed mainly for transferring images on the Internet it offers a wide range of encoding options making it a valuable standard.

 

apng

Since the PNG standard does not make provisions for the encoding of animated images a separate standard called Multiple-image Network Graphics ( MNG) was defined in 2001 with the aim to fill the gap but contrary to PNG has not become a popular format.

 

The Animated Portable Network Graphics ( APNG) file format is an unofficial extension to the Portable Network Graphics (PNG) specification proposed by developers at Mozilla in 2004. It allows for animated PNG images that work in a similar way to animated GIF images while retaining the backward compatibility with standard PNG images.
  Animated image

An animated image is made of a stream of single images together with information on how this images shall be presented on the display. The most important parameter is the time elapsed between the display of consecutive images. The timing will determine whether we will perceive the sequence of presented images as continuous motion. When talking of animated images we usually imply a loop since the sequence is continuously repeated.

 

An animated image could equally be seen as a short video sequence if played only once, nevertheless this does not provide the full functionality of a video player where you can stop or replay it. Animat stores an animation in a file using the APNG format. This entails that it can be played only on browsers implementing this encoding standard (actually Firefox 3 and Opera 9.5).

  Frame

A film frame, or simply frame, is one of the many single photographic images in a motion picture. Per analogy this term applies also to a single image part of an animated image sequence.

 
  Lightbox

Traditionally a lightbox is used to examine directly photographic images as slides or as negatives. This term designates in Animat the panel presenting in sequence previews of the images constituting an animation. The sequence can be edited using various commands.

 
  Source image

With source image we designate the original image from which a frame is derived in Animat.

 
  Editing session

An editing session is opened as soon as you start composing an animated image in Animat. The session is persistent, this means you can close the application window at any moment and when you reopen it you will find again its state as you left it.

 

Note that there can be open only one session per user/computer. The state of an editing session can be saved in a separate file, this way you can resume with it at a later time.

  Transformation

The term transformation used in Animat is related with the same mathematical concept. It describes in term of functions or matrices the whole process of deriving a frame from a source image.

 

This may encompass something as simple as to cut out a particular area from the source image, or more sophisticated operations like rotate, translate, scale and deform a selected area from the source image and use it to fill the frame.

  User interface

In this chapter will give you an overview of the the user interface together with basic functionality descriptions.

 

For more details consult the Actions chapter.
  Eigenschaften
 

Configuration

The interface layout of Animat can be tailored to the particular user requirements via the ' Preferences' panel.

 

[Fig.1] Preference panels.
 

Context menus

A click with the right mouse button within the Animat application window gives you access to a context menu showing the relevant actions which can be applied to the pointed object.

 

In fact it is possible to work with Animat using only the context menus. If an entry in a context menu appears in bold characters it means that you can activate the command directly with a double click.

 

Menu bar

As with every application, Animat features a standard menu bar detailing all the possible actions, nevertheless you can do everything you need without having ever to resort to it.

 

Depending on the application context options may appear grayed out when they cannot operate.

 

User values

The composition of an animated image requires a lot of data to be managed. As in any application this data can be subdivided in two sets: data proper to the inner gears of the application, let's call them application centered data, and data entered by the user in order to obtain some result which we designate by user centered data. Much of the application centered data is invisible or out of control to the user whereas a subset of the user centered data may equally be provided by the application logic based upon a set of inference rules. Software applications are used like tools in order to do things more efficiently but, as experience learns us, this is a prime source of conflicts between what the user intends to do and what the application understands must be done.
In order to manage properly the intersection between application and user centered data Animat marks data entered by the user with a flag. This allows to guide the application logic in such a way as not to obliterate continually the will of the user, whatever this might entail.

 

[Fig.2] Example: the "R" button is lit, this means the user did enter the setting.


[Fig.3] Example: the "R" button is dimmed because Animat provided the values.
 

Tooltips

Animat uses extensively tooltips to provide short information texts about the element pointed by the mouse cursor. For this to appear you have to keep the cursor a few seconds over the explored element.

 

[Fig.4] Example of tooltip from the edit panel.
 

Numerical input

A numerical input field, beside the standard editing features allows you to alter the value using the up and down arrow keys.

 
 

Drag and drop

Animat allows you to perform the following drag and drop manipulations:

a) drag images from an external directory list onto a preview frame in the lightbox by which a new frame is inserted for each image in the bundle
b) drag a session file onto the parameter panel in order to load and open it
c) drag in the lightbox a single preview frame from one place in the animation sequence to another

 

[Fig.5] Example: Drag and drop of a preview frame.
 

Selection

Selecting a particular area from an image is the most recurrent operation when working with animations. Animat allows you to do this in two ways:

 

via keyboard by entering offset and size in the mapping section of the parameter panel or via mouse by dragging or resizing the rectangular selection area.

[Fig.6] Example: four modes of selection visualisation.
  Structure

The application window of animat can be oriented either vertically or horizontally in order to better fit the format of the frames composing the animation.

 

In either case you will find at the upper edge the menu bar and on the bottom edge the status line whereas the space within the two elements constitutes the work area.

Menu bar
Work area
Lightbox
Preview frame
Default frame
Edit area
Source area
Source image
Source thumbnails
Parameter area
Frame
Local
Global
Animation
Target area
Animated image view
Frame edit canvas
Status line
  Panels

The various panels part of the Animat work area will be described in this chapter as seen in the vertical layout orientation (default), nevertheless the explanations are valid also for the horizontal layout.
The 'switch layout orientation' option in the view menu allows you to change the orientation.

 

The preferred layout can be selected with the orientation preference.
The position of the edit parameter panel and the lightbox can be changed too via the corresponding preference settings, leading this way to 12 possible work area layouts.





[Fig.7] Vertical work area layout. A click on any part of the picture will lead you to the corresponding description.

[Fig.8] Example of horizontal work area layout. (no links)


 

Menu bar

The menu bar gives access to the File, Edit, View, Play, Tools, and Help drop down menus. From the Edit menu you have access to the Source and Frame drop down menus.

 

Note that they document in a simple way the available short cut keys in Animat.





[Fig.9] Menu bar.


 

File

[Fig.10] File menu.
 

Edit

[Fig.11] Edit menu.


[Fig.12] Edit source menu.


[Fig.13] Edit frame menu.
 

View

[Fig.14] View menu.
 

Play

[Fig.15] Play menu.
 

Tools

[Fig.16] Tools menu.
 

Hilfe

[Fig.17] Help menu.
 

Work area

The work area comprises the lightbox and the "edit area".

 





[Fig.18] Work area.
 

Lightbox

The lightbox primarily embodies the order in which the single frames will be displayed. It is the starting point for most editing actions.

 

The position of the lightbox in the work area is controlled by two preference settings, the ' Horizontal lightbox position' for the vertical layout orientation and the 'Vertical lightbox position' for the horizontal layout orientation.





[Fig.19] Lightbox.

The preview frames in the lightbox can represent two kind of objects:

a) animation frames having a source image and a transform defined
b) default frames which serve as template for parameters to be used by the directly preceding frames

 
 
Preview frame

The preview frame displays the original animation frame scaled down to a preset size controlled by the ' Preview size' preference. When an error occurs with a frame its header gets coloured in red and an explanatory message is available as tooltip if you move the cursor over the preview image. The first frame of an animation provides the default size of the animated image and is subject to restrictions: the target selection in the mapping must select exactly the entire frame.

 

[Fig.20] Example: preview frame as it appears depending on its state.
 
Annotation

It may also display as annotations the frame delay if it diverges from the local default and an asterisk if the rendering is different from the local default setting.

 

[Fig.21] Example: annotated preview frame having a specific delay and modified rendering.
 
Context menu

[Fig.22] Preview frame context menu.
 
Default frame

The global default frame, always located at the end of the preview frame sequence, is linked to the global defaults panel and therefore is permanent. Optionally any number of local default frames can be inserted into the frame sequence.
By itself, a default frame does not contribute a frame to the animation .

 

[Fig.23] Global default frame.

[Fig.24] Example: Annotated local default frame.
 
Annotation

The local and global default frame too may display an annotation; it is the content of the last field from the corresponding edit panel.

 
 
Context menu

[Fig.25] Default frame context menu.
 

Edit area

The edit area is subdivided into a source panel, parameter panel, and target panel based on the following paradigm:

 

[Fig.26] Operating paradigm.

What is displayed in the edit area is controlled by the selected preview frame in the lightbox and subsidiarily by the last activated panel. Most of the time this will be all the data making up an animation frame.

 





[Fig.27] Edit area.


 
Source area

The main purpose of the source area is to display the image used to build the frame.

 

Accessorily it will also display the source thumbnails panel, once implemented.





[Fig.28] Source area.


 
Source image

Animat accepts any image source that can be handled by the Firefox browser. If the dimension of an image is greater than the edit work area Animat will compute for the image an optimal work size so as to make it fit into the allowed area.

 

A source image can be rotated 90° and 180° clockwise or counter-clockwise (-90°) as well as be flipped horizontally or vertically (Mirror ...).

 
Context menu

[Fig.29] Source image context menu.
 
Source thumbnails
The source thumbnails functionality is not yet implemented.
 
Parameter area

The Edit parameter panel is subdivided into four tabbed panels named Global, Local, Frame, and Animation. Which one of the first three is displayed depends on what is currently selected in the lightbox.

 

The fourth panel gets displayed when the user clicks on its tab or selects Animation from the view menu.





[Fig.30] Parameter area.

Animat uses the following order to determine the settings to be used for a given transformation:

1) specific settings for the frame (Frame tab)
2) local settings taken from the first placeholder found in sequence advancing to the right (Local tab)
3) settings from the global placeholder (Global tab)
4) size setting from the animated image (Animation tab)

 

[Fig.31] Example: the red arrows point to the fields that are source of default values.


 
Global

Clicking on the 'Global' tab will display the panel with the global default settings. For example, instead of specifying for every frame a given delay you can set it as default for all frames, this way only a few particular cases may eventually have to be edited.

 

[Fig.32] Example of global default settings
 
Local

Local default frames are optional therefore the 'Local' tab may be grayed out if you don't use them. The purpose of a local default frame is to characterise a sub-sequence of contiguous frames. All directly preceding frames will refer to it for default values instead of referring to the global defaults. The local default frame itself will still refer to the global defaults.

 

[Fig.33] Example of local default settings
 
Frame

The Frame parameter panel displays the transform settings resulting in the frame displayed in the target area (edit canvas).

 




[Fig.34] Frame parameter.


 
Mapping

As mapping we intend a portion of the source image projected onto a selected area of the target frame. For this we must exactly determine the source and target area by specifying offsets and sizes.

 

[Fig.35] Example of mapping

Offset

The offset of the top left corner of the selection is measured in pixels from the left and top edge.

[Fig.36] Example of offset setting.


Offset lock

[Fig.37] Offset lock button in active state.


Copy offset to other selection

[Fig.38] Copy offset button.

 

Size

The size is measured in pixels for the selection width and height.

[Fig.39] Example of size setting.


Ratio lock

[Fig.40] Ratio lock button in active state.


Copy size to other selection

[Fig.41] Copy size button.

Source-Frame coupling

The toggle button with the diamond shape couples or uncouples the corresponding source and target selections.
When active, an input on any one side will be translated into corresponding changes on the other side.

 

[Fig.42] Couple selections button in active state.
 
Rendering

The rendering section holds parameters describing what is done with the frame when the animation is played.
The delay in milliseconds determines how long the frame will be visible. The "overwrite alpha channel" flag is used when working with transparent images. If checked the frame is composited onto the previous image based on its alpha, using a simple OVER operation.
The last parameter tells how the frame is disposed.

 

[Fig.43] Example of rendering
 
Annotation

In the field at the bottom of the panel you can make any annotations that help you organise the animation.

 

[Fig.44] Example of annotation
 
Animation

Clicking on the 'Animation' tab will, beside displaying the panel, also regenerate, if necessary, the animated image before playing the animation in the Target area.

 

[Fig.45] Animation parameter.


 
Parameter

The animation parameters are global and will be stored together with the image.
The animated image size is the most important setting and should be chosen as early as possible. You can change it at any time later in which case the settings will be automatically converted. In some cases this may lead to non optimal transformation settings that have to be revised. If the 'skip first frame box' is checked the title of the first preview frame is put between brackets in order to evidence this particular animation mode.

 

[Fig.46] Example of animation settings
 
Status

The status info box displays for the current animated image the total duration in seconds, the number of frames composing it, and the estimated size of the resulting APNG file.

 

[Fig.47] Example of animation status
 
Context menu

[Fig.48] Edit context menu.
 
Target area

The target area displays either the frame edit canvas or the animated image or a frame shadow depending on the parameter panel selected .

 
 
Frame edit canvas

The frame edit-canvas appears whenever an animation frame is selected, either by clicking on the 'Frame' tab or by selecting a preview frame in the lightbox.

 

Any rectangular area in the edit canvas can be selected by entering the offset and size in the mapping section of the parameter panel or by moving and/or resizing directly the selection area with the mouse.





[Fig.49] Example of edited frame.
 
Animated image view

The animated image is displayed in the target area when the Animation panel is displayed, either by clicking on the animation tab or by selecting the Animation option in view menu.

 

A click into the target panel will stop or start the animation. The animated image can be saved into a file with the ' Save the animated image' option in the file menu.







[Fig.50] Example of animation display.
 
Context menu

[Fig.51] Animated image context menu.
 

Status line

The status line will display the name of the source image and its original size for the frame currently selected in the lightbox.

 





[Fig.52] Status line.


  Work examples

Now that you got a little acquainted with Animat let's see with real examples what you can do with this tool.

 

You can experiment with this work examples by copying the link to the session file stated below the animation and pasting it into the "Load session" dialog.

  Slide show

[Fig.53] Mini roses blossom. (Click to see animation)


Strictly speaking this is not an animation but still a valuable and rapid mean to organise a slide show.
Session file: mini-roses.animat

 

[Fig.54] The labels in the slide show have been added separately by creating an image with the desired texts and inserting them via overlaid frames.
  Simple animation

[Fig.55] Pendulum. (Click to see animation)


Session file: pendulum.animat
  360° view

[Fig.56] 360° Panorama. (Click to see animation)

The problem with this kind of animation is that, depending on size and number of the frames, you will get rapidly very big files.

 

Session file: panorama.animat

  One source image ...
One source image is all you need to make an animated image...

[Fig.57] Picture with details: ladybird, flower, grass-tip. (Click to see animation)


Not every thing must to be pictured at high resolution.
Session file: meadow.animat

[Fig.58] In what kind of space are they flying? (Click to see animation)


It takes some patience to build this kind of animation...
Session file: swiss-patrol-1.animat

[Fig.59] Another example using the same source image. (Click to see animation)


You will get some hints by examining the editing session.
Session file: swiss-patrol-2.animat
  Actions

This chapter aims to be a thorough reference for all the commands proper to Animat.

 
  About
A panel displaying version and license information.
  Copy

Copy the selection offset

[Fig.60] Copies the source selection offset to the frame selection offset.

 

[Fig.61] Copies the frame selection offset to the source selection offset.

Copy the selection size

[Fig.62] Copies the source selection size to the frame selection size.

 

[Fig.63] Copies the frame selection size to the source selection size.

  Couple selections

When the button with diamond shape is lit the source selection is coupled to the frame selection. At the moment of activation the magnification ratios between frame selection size and source selection size get locked. Any modification of the selection on one side will be applied also to the other side so as to respect the coupling constraints. If you need the offset on the other side to remain fixed you can obtain this with the lock offset action.

 

[Fig.64] Couple source selection with frame selection button.
  Delete

Delete the currently selected frame. Note that this does not delete the source image.

 
  Disable/Enable frame

This command toggles a frame between enabled and disabled state. When a frame is disabled it will not be included into the generated animated image and its title background turns to gray. This is useful for testing variants. Note that the first frame cannot be disabled, but can be skipped when the animation plays.

 

[Fig.65] Example: enabled preview frame.

[Fig.66] Example: disabled preview frame.
  Drag/Drop

Drag and drop images as frames

A bundle of image files from an external directory can be dragged and dropped on any preview frame in the lightbox: a new frame is inserted for every image in the bundle before the pointed preview frame. If the ' Insert sorted' preference is checked they will be inserted in alphabetical order of their names.

Drag and drop a session file

A session file saved with the ' Save the editing session' action can be loaded by dropping it onto the edit parameter panel.

Drag and drop a preview frame

The sequence of animation frames can be reordered by dragging and dropping single preview frames within the lightbox.

Drag and drop a duplicate of a frame

If you keep the control key pressed while dragging a preview frame in the lightbox, the dropped frame will be a duplicate of the original.

 
  Edit

Whenever you select a preview frame in the lightbox the parameter settings can be edited in the frame parameter panel.

 
  Extend

Extend the selection

Hovering the cursor near the edge inside a selection will mutate it into an extension symbol related to the chosen side. Moving it while keeping the left button pressed allows to change the position of the selection border. The new position is recorded as soon as the button is released.

Extend the selection to the edge

The selection area can be extended to one of the image edges by hovering the cursor near the border to be moved until the cursor mutates into the extension symbol, then while keeping pressed the shift make a click in place.

 
  Hilfe

The manual for Animat can be consulted in a separate browser window. You have further the possibility to report a malfunction or to make a suggestion for an enhancement of Animat.

 
  Insert

Insert frames

Insert one or more frames before the currently selected one using the images from the file selection dialog (Inserted in alphabetical order by name if ' Insert sorted' preference is checked).

Insert a local default frame

A click on the Insert default frame in the edit menu will insert a new default frame before the currently selected frame. Local default frames serve as template for default values for the immediately preceding frames.

 
  Load

Load an editing session previously saved with the ' Save the editing session' action. The session file is assumed to have its name terminated by .animat. Note that any current data will be lost unless you saved it before. A session file contains absolute image URLs, therefore you must ensure that this images are still present in the same location otherwise the loading will fail.

 
  Lock

Lock the offset

The lock offset button has only an effect when the source selection is coupled with the frame selection. When active the offset will not change when the other selection is modified.

 

[Fig.67] Lock offset button.

Lock the size ratio

When the lock size ratio is active the ratio between height and with is maintained constant as it was at the moment of activation.

 

[Fig.68] Lock size ratio button.
  Mirror

Mirror horizontally

[Fig.69] The source image is flipped horizontally; what was on the right side will be on the left side and conversely.


Mirror vertically

[Fig.70] The source image is flipped vertically; what was on the top side will be on the bottom and conversely.
  New

Start a new editing session. Any current data will be cleared. This command helps also to reset Animat to a working state in case a major dysfunction occurred.

 
  Open
Reconstruct an editing session for a given APNG file.
At the moment not available.
  Play
Play the current frame sequence.
  Preference

The preference menu entry gives you access to the preferences panel. For more details see Preferences.

 
  Quit

Close the application.
The name "quit" for the command is somewhat misleading since in Animat the editing session is persistent. When you open the editor you will find it exactly in the state

 

as you left it the last time with one notable exception however: if any of the source images is removed you will get errors. To restore in such a case the editor state just recover the deleted source images.

  Reload

Beside reloading the source image (supposed eventually to have changed) this command has the effect to perform a fresh transformation which may also help to clear an error.

 
  Reset to default

When the "reset to default" button attached to a data field (or set of data fields) is lit you can revert the parameter values to defaults. The default value if any is available is made visible through a tooltip. Default values are determined as explained in the ' Parameter area' panel section.

 

[Fig.71] Example of lit "reset to default" button and relative tooltip.
  Resize

Resize the selection with locked ratio

The selection area can be resized with locked ratio by keeping pressed the control key while extending the selection with the mouse.

Resize the selection centered

The selection area can be resized with its center staying fixed by keeping pressed simultaneously the control key and the shift key while extending the selection with the mouse.

 
  Rotate

Rotate by -90°

[Fig.72] The source image is rotated by 90° counter-clockwise (noted as -90° and equivalent to 270° clockwise)


Rotate by 90°

[Fig.73] The source image is rotated by 90° clockwise.


Rotate by 180°

[Fig.74] The source image is rotated by 180°.
  Save

Save the animated image

The animated image is saved into a file with the APNG format.

Save the editing session

All the data data collected in an editing session is comparable to a recipe that describes how the animated image is made. This data can be stored in a file with the 'Save session' action found in file menu.
This file can be loaded again at a later time with the ' Load' action. These action is optional since animat is an application with a persistent state. The filename usually ends with '.animat' .

 
  Select

Select the global defaults panel

At any moment you can switch to the global default frame panel by clicking on the Global tab or by clicking the the Global option in the view menu.

Select the local defaults panel

Provided you have added local default frames, Animat will display the local defaults for a frame if you click on the Local tab or the local option in the view menu. Each frame refers always to the next nearest local default frame when it needs default values. In turn a local default frame refers always to the global default frame permanently positioned at the end of the whole animation sequence.

Select the frame parameter panel

Animat remembers always the last frame you were editing. If the edit frame parameter panel is not visible, a click on the Frame tab will redisplay it with the last edited frame.

 

Select any frame

Clicking on a preview frame in the lightbox will immediately display the involved source image, transformation parameters and resulting frame in the main work area. You may also step through the sequence of frames in both directions by using the PageUp and PageDown keys.

 

[Fig.75] Example: unselected preview frame.

[Fig.76] Example: selected preview frame.

Select the whole source image

To select the whole source image click in the edit menu Source -> select all. This can also be obtained by Shift + click while pointing with the cursor in the middle of the source image.

Select the whole frame

To select the whole source image click in the edit menu Frame -> select all. This can also be obtained by Shift + click while pointing with the cursor in the middle of the edit frame panel.

 
  Swap

Swap with next frame

By clicking in the edit menu 'Swap with next' the currently selected frame is exchanged with the following frame.

Swap with previous frame

By clicking in the edit menu 'Swap with previous' the currently selected frame is exchanged with the preceding frame.

 
  Switch layout orientation

The layout orientation is a setting proper to every session. It can be changed at any time but a user, depending on the animation context, must be prepared in that case to revise some animation parameters. The switching entails the conversion of various parameters which eventually may not to be optimal, therefore it is good practice before switching in the middle of an editing session to save it in a file.

 

[Fig.77] Example of switch from vertical to horizontal layout orientation.
  Preferences

The preferences are organised into five thematic panels named general, source, frame, animation, and lightbox.

 

The changes applied will take effect as soon as you confirm them on exit. If they affect the layout the session will be automatically restarted in order to reflect the changes.

  General

Orientation

This preference determines the layout orientation of the user interface, either 'vertical' or 'horizontal'. If changed this setting will take effect only for new sessions.

State file

The name (without directory path) given to the state file. Leaving the field blank deactivates the permanent state feature.

Parameter panel position

The edit parameter panel can appear at the left, in the middle, or at the right side of the work area for both layout orientations.

 


[Fig.78] General preferences panel.
  Source

Selector parameters

You can chose how the selected area on the source image is put in evidence. Depending on the selected mode additional parameters may be specified like the colour used for the frame, or the fill colour and transparency to be used with dim or highlight modes. Note that the setting will take effect only after selecting a new frame.

Work size

Source images to be used in the animation may vary greatly in size, therefore they will be reduced to the selected source work size in order to keep the use of system resources within reasonable limits.

Load timeout

This setting determines how long Animat will wait for a source image to be loaded before declaring it failed. If many large pictures are loaded at the time you may need to increase this value in order to be able to work without interruptions.

Base path

The string entered here will be used as base path for relative source file names retrieved from a session file. Source file names will be stored in a session file relative to this base path. This can facilitate the transfer of session files between different computer systems.

 


[Fig.79] Source preferences panel.


[Fig.80] Example: four modes of selection visualisation.
  Frame

Selector Parameters

You can chose how the area selected in the target frame is put in evidence. Depending on the selected mode additional parameters may be specified like the colour used for the frame, or the fill colour and transparency to be used with dim or highlight modes. Note that the setting will take effect only after selecting a new frame.

Delay

This is the default delay used when a new session is started.

Dispose

This is the default dispose mode for frames.

Blend

The alpha channel setting determines how the blending will be handled.

Work size

This setting determines the work size of the frame edit canvas. It should also implicitly be considered as the limit size for the animated image.

 


[Fig.81] Frame preferences panel.


[Fig.82] Example: four modes of selection visualisation.
  Animation

Size

This is the default size (width and height) given to an animated image.

Image file name

This name (without directory path) will be used to pre-fill the file name field when saving an animated image.

Play count

This is the default number of times an animation is played.

Skip first frame

This sets or resets by default the flag indicating whether the first frame has to be left out when playing the animation.

Autoplay

This flag tells Animat whether to play automatically the animation whenever the context justifies this.

 


[Fig.83] Animation preferences panel.
  Lightbox

Preview size

Desired with and height for the image presented in the preview frame.

Horizontal lightbox position

When the layout orientation is set to vertical the lightbox extends horizontally. Here you can choose to place it either at the top or the bottom margin of the work area.

Vertical lightbox position

When the layout orientation is set to horizontal the lightbox extends vertically. Here you can choose to place it either at the left edge or at the right edge of the work area. Note that this setting is implicitly influenced by the setting controlling the edit parameter panel.

Insert sorted

If you insert a bundle of images they will be inserted in alphabetically order if the box is checked.

Checker pattern background

You can select here whether the preview image should have a checker pattern as background otherwise the default fill colour for the panel will be used.

 


[Fig.84] Lightbox preferences panel.
  Work area layouts

[Fig.85] Orientation=horizontal; Parameter panel position=left; Vertical lightbox position=left edge


[Fig.86] Orientation=horizontal; Parameter panel position=middle; Vertical lightbox position=left edge


[Fig.87] Orientation=horizontal; Parameter panel position=right; Vertical lightbox position=left edge


[Fig.88] Orientation=horizontal; Parameter panel position=left; Vertical lightbox position=right edge


[Fig.89] Orientation=horizontal; Parameter panel position=middle; Vertical lightbox position=right edge


[Fig.90] Orientation=horizontal; Parameter panel position=right; Vertical lightbox position=right edge


[Fig.91] Orientation=vertical; Parameter panel position=left; Horizontal lightbox position=bottom edge


[Fig.92] Orientation=vertical; Parameter panel position=middle; Horizontal lightbox position=bottom edge


[Fig.93] Orientation=vertical; Parameter panel position=right; Horizontal lightbox position=bottom edge


[Fig.94] Orientation=vertical; Parameter panel position=left; Horizontal lightbox position=top edge


[Fig.95] Orientation=vertical; Parameter panel position=middle; Horizontal lightbox position=top edge


[Fig.96] Orientation=vertical; Parameter panel position=right; Horizontal lightbox position=top edge
  Literaturnachweis
  1. Wikipedia
  2. Collins English Dictionary
  3. Better animations in Firefox 3, by Justin Dolske
  4. Creating Applications with Mozilla