User's manual - how to create animated GIF and APNG images

The list of the tutorials given below describes how to work with animated and static images using the tools available in the Animizer.net tool:

• 1. Animizer - a special form for editing an animated image
• 2. Assembler - combines static (non-animated) images into an animated image
• 3. Splitter - splits an animated image into separate static images
• 4. Converter - Converts GIF image to animated PNG (APNG) and back
• 5. Animating static image - create an animated GIF/APNG image from one static image
• 6. Animating text - enter text and get it animated

Animizer - a special form for editing an animated image

On the Animizer tool main page you can see a form for uploading. Click on the "Browse" button and select all animated and/or static images that you would like to be included in your animated image. You will see the "Continue to editor" button that will get activated if you have only image files selected (in case non-image files are selected, you will see an error):



Having selected your images, click on the "Continue to editor" button and wait until your images get uploaded. After that you will see the Animizer form displayed on the left hand side of the screen and an animation preview in the right hand side with the options to download it. The Animizer form includes the following options for you to select from:

	In case you would like to add some images to your animation, click on the "Upload" button next to "Add more frames", select the desired images and wait until your images get uploaded
	Provides you options for image type you would like your animation to be - animated GIF or PNG. Note that NOT all browsers support animated PNG images. If you still need the PNG format and you would like it to be functional in all browsers you can still use the "Download as sprites" option and "Animated by pure JavaScript" or "Animate by canvas and JavaScript" option in the "download" section (in the animation preview window). The image below helps you identify if your browser supports APNG: Note: .GIF format supports only absolute transparency or no transparency at all. Therefore, when you select the GIF format and set background to transparent you will still be able to set a background color that will fill the back layer of semi-transparent parts of your image. Example:
	Set the background of an animated image to transparent. For animated GIF images all semi-transparent pixels will be in front of the selected background color. NOTE: The background of the image is transparent only for the transparent pixels of the uploaded image.
	This feature allows to generate animated images with the default coloring scheme provided.
	The color of the image itself. The overlay of the selected color is placed in regards to colorization algorithm (the more pixel color is close to black the more it is close to the color selected in this field). In order to invoke the color picker just click on the foreground color textbox
	The background color of an animated image. All transparent pixels will be filled with the given background.
	Identifies the interval of time between frames switching. The closer the slider is to + the faster the animation goes and vice versa. You can also set a delay between each separate frame in the "Frame settings".
	Denotes width and height of an animated image in pixels. The default size of each image is set depending on the first frame size. In order for the image to have proportional width and height when entering the size in the size textboxes, check the "Constrain proportions" box and it will change the other parameter in regards to the entered one. If you want to get back to the original size of the image, click on the "Reset sizes" link under "Image size" title. If you need all frames in your animated image to have their original proportions or get it stretched throughout the image size, then use the "Keep all proportions" option available in the "advanced settings"
	Opens up advanced settings for the animated image
	Opens up the interface for modifying frames settings. You can also open it up by pressing the dark line on the bottom of the page with the "Frames" title: In the frames settings window you can: - Enable or disable a frame - click on the "Enable" checkbox in order for the frame image to be used in the animation - Change position of a frame - simply click and drag each frame to the left or to the right to change the position - Set the delay of a frame - in the dropdown box select the delay used before the next frame is shown
	When you upload images for the animation with different proportions and you set the "Keep all proportions" option to "Yes", all images will fit within the image borders but keep it's original proportions. If the option is set to "No", the image will be fully stretched to the edges of the whole image.
	Inverts all colors of the image. Example:
	Flips images vertically and/or horizontally. Note that some images are not affected by this feature as they may be absolutely symmetric in respect to center point
	Set the sequence of animation frames in reverse order, so animation goes backwards if the option is selected
	Amount of times the animation should be played for. Setting the amount to 0 makes the animation play infinitely

Generator preview area

In this area you can see the animation preview



This tool provides 3 different download options:

• - Download as sprites - Allows you to download the animated image in the form of image sprites (one non-animated image with frames of the animation placed one after another horizontally)
• - Animate by pure JavaScript - Allows you to include a special JavaScript code that makes the image sprites animated
• - Animate by Canvas & Javascript - Allows you to include a special JavaScript code that makes the image sprites animated with the Canvas technology