Frame disposal:
Frame disposal is a technique used to clear the previous frame before the next frame is loaded in an animated sequence. This prevents the trailing effect that occurs when objects are moved on screen with transparent backgrounds although the technique is not intended to reduce file size. Animations with frame disposal enabled are larger than those without the option enabled as information for each whole frame must be stored alongside the disposal commands even if a frame is no different to the previous one or only changes slightly. Running frame disposal with an animation will also require more processing time at the client end therefore putting more load on the display device due to the extra screen clear operation that must be completed.
Animations created without frame disposal will be smaller in size as only the difference between frames has to be stored within the file and will demand less processing time at the client end with less operations to complete per frame load, allowing them to run smoother on low powered devices but sacrificing the flexibility of a disposed sequence.
Frame disposal in Photoshop example:
Once all the required layers/frames have been created within Photoshop and converted into a timeline of frames the frame disposal settings can be adjusted as required. All frames must be selected and then the disposal menu can e accessed by right clicking any of the selected frames. Menu shown below.
Frame Disposal:
No Frame Disposal:
N
Auto Crop
Auto crop is an option that can be selected to remove unwanted image data from a frame in order to reduce it's size. For example; If an object was drawn in the center of the stage and only took up a small area then, with Auto crop selected, all the unused space around the object would be cropped off (Excluding motion paths) and the location of the object stored so that it can be placed on the stage.
Auto crop is an effective method of reducing file size by significantly reducing the overall quantity of pixel data that has to be recorded for an animation to function.
Auto-crop can be selected within fireworks by selecting all states of an animation and right clicking to open this menu.
Clicking auto crop will crop all frames down to the minimum required space to contain only the image data and motion paths in order to reduce animation file size.
Auto crop example:
No Auto Crop:
Auto Crop:
The above animation was cropped within Adobe fireworks with the black border added in order to show where the frames were cropped to. In the first animation a large amount of empty space can be seen whilst the second animation has had this empty space removed by the fit canvas/auto-crop feature in order to remove unwanted content and reduce the animation size.
The auto crop feature is referred to as "fit canvas" although performs exactly as an auto crop operation. Simply click the fit canvas button as shown above to shrink the canvas to the minimum size whilst still including all objects and motion paths.
When animating for the web there are several factors that can effect the file size of a sequence:
The color depth or number of colors within an animation will determine the amount of data that is required to store one entire frame with higher color depths requiring more data, therefore making the overall file size greater. (Assuming comparison between an animation of equal length and resolution at a lower color depth)
The use of either vector or bitmap graphics can have a significant effect on the overall size of an animation due to the different ways that image information is stored. With bitmap frames each individual pixel must be stored separately in turn resulting in a larger file size whilst with vector graphics, frames are stored as a set of mathematical equations which means that each pixel is not recorded but the image is rendered or drawn when displayed on screen. Because of this, files are significantly smaller than bitmap types.
The physical size of images animated will directly effect the size of a finished animation. Images have to be stored may times throughout an animation so when large images are multiplied by the number of frames they are displayed on the total size can grow quickly.
The physical size of images animated will directly effect the size of a finished animation. Images have to be stored may times throughout an animation so when large images are multiplied by the number of frames they are displayed on the total size can grow quickly.
Each frame added to a sequence will increase file size and with more frames added, the sequence will grow in size accordingly. Longer sequences comprised of the same frame resolution and color depth will therefore take up more space than those with fewer frames.
The rate at which frames are replayed will have a direct impact on the number of frames required for a set animation length. For an animation with a length of 10 seconds at 24 frames per second a total of 240 frames will be required whilst at a frame rate of 48 fps a total of 480 frames will be required. The animation at 48 fps would therefore theoretically have a size double that of the animation run at 24 fps. Running an animation at more than 24 fps is impractical for web applications as the human eye cannot distinguish individual images from one another.
Resolution, or the number of horizontal versus vertical pixels in a frame, will directly dictate the amount of pixel data to be recorded so that with higher resolutions more data must be recorded in turn increasing file size whilst with lower resolution frames the total number of pixels will be smaller and require less information to be recorded resulting in smaller file sizes.
