User's Manual
Animation consists of two basic steps. To build the animation, you will need the Firefox Browser, but the animation will run in most browsers.
Step One: Build animation objects
Flow: You need objects that you can animate. You can borrow them from other animations, or you can build them from photos. After you have the objects that you need for your animation, load them all on to the same screen and save the the screen to a file. Let's cover that in more detail.
Browser:At the moment, you must use a recent version (last 6 months) of Firefox. Since the updates are automatic, most users will have the latest version.
Reset: When you feel the need, press "Ctrl"+'r' to reset or click the refresh button on your browser which is sometimes called "reload" when you hover over it. This will rescue you from whatever you are doing, but you will begin life all over.
"Upload" and "Load" are your first options. Upload loads a file from you computer. You would usually upload pictures that are in either a JPG or PNG raster format, but you can upload SVG files that you previously downloaded. Let's consider the raster files first.
"Load" fetches a SVG file from the cloud. The cloud doesn't have raster files. Loading a file from the cloud isn't much different than uploading a SVG from your computer. In either case, you bring the SVG files to the screen immediately before animation. When the "Load" button is clicked, a listing of the files in the cloud are shown. You can load the file by clicking on the file name. You can also enter the first part of the file name into the text box on the left which will help you find the file that you want.
When a file is loaded, the "Save", "Delete", and "Animate" buttons appear. When "Save" is clicked you are taken to a screen that gives you three save options, "Save", "Save As", and "Download".
When a file is loaded, the "Save", "Delete", and "Animate" buttons appear. When "Delete" is clicked you will erase from the cloud the last file that was loaded from the cloud after you confirm that you want it deleted. The image of the file will be removed from the screen.
When a file is loaded, the "Save", "Delete", and "Animate" buttons appear. Before you click "Animate", you want to have everything on the screen that you intend to have in your animation. You do this by building and saving each object. Then you load everthing that will be in the animation. It doesn't matter if some objects cover up other objects. When the "Animate" button is clicked you will be prompted to save the screen to a file. If you haven't already saved it, you will want to save it, because it will save you the trouble from rebuilding it. After the prompt, you will be taken to the animation screen.


Saving Files
When the "Save" button is clicked, the file is written to the cloud with its current file name. When the current file name is already used in the cloud, you will be prompted as to whether you want to overwrite the old file that is in the cloud. When a file is saved, you will be taken back to the panel that has the "Upload" and "Load" buttons. If you want to build more objects before you animate, you can erase object (that was just saved) from the screen by refreshing the browser (button or "Ctrl" + 'r').
When the "Save As" button is clicked, the file is written to the cloud with the file name that you create. If that file name is already used in the cloud, you will be prompted as to whether you want to overwrite the old file that is in the cloud. When a file is saved, you will be taken back to the panel that has the "Upload" and "Load" buttons. If you want to build more objects before you animate, you can erase object (that was just saved) from the screen by refreshing the browser (button or "Ctrl" + 'r').
When the "Download" button is clicked, the file is written to your computer. When a file is saved, you will be taken back to the panel that has the "Upload" and "Load" buttons. If you want to build more objects before you animate, you can erase object (that was just saved) from the screen by refreshing the browser (button or "Ctrl" + 'r').
Handling Raster Images
After you have loaded the raster picture, you can either convert it to SVG, save it as a background, or crop to a smaller size. You must convert to SVG, if you want to animate it later.
The convert features is a setting that can be set from 1 to 127 with a default of 4. Higher settings run faster but are more coarse. This page has a number of settings for the same picture to give you a feel for the setting. The image that you convert needs to be less than 490,000 pixels. The program will take you to the crop area, if the picture is too large. Large files don't make good animations. Convert comes back 4 times larger than the orginal, so it is easier to select. At 4 times larger, the image will not look as good, but when you take it back to normal size (in a few steps), it will look fine (most of the time).
Background Most animations combine several photos. It is better looking, more interesting, and easier. You usually want to have one or more photos as a backgound. Backgrounds do not need to selected or animated. They are ready to go, so you can simply save them by clicking the "Save As Background" button.
Upload It's a good idea to give yourself a hint that the the image in the cloud is a background, because raster background can not be animated. A good hint is to begin the name with "bg". For example, "file_nam" could be saved as "bg_file_nam".


Crop Cameras produce pictures that are too large for computer screens, and animations even need more room. The cropping tool allows you to only use the best part of the picture.
Upload To crop, you start at the upper left corner of what you want cropped. Hold the mouse key down, and move the mouse to the lower right corner of the cropped selection. Then click "Crop".


Selecting Animation Objects
polygon Polygon Select: After you convert the image to SVG, the screen will come back with options that allow you to edit what you want to animate. The option on the left, "Polygon", allows you to cut your selection. For example, if you converted a picture of a car, you could cut everything out of the picture except the car with the polygon select. Polygon will also give you the option to delete everything except what you have selected. In the example just given, you could delete only the car from the picture.
polygon If you want to select something dark on a light background or vice-versa, it might be faster and easier to select with color. Color will select all the colors that are above a color that you can set. You can also choose to select the colors below the threshold.
Blob After you have made a polygon or color selection, you can trim the edges with blob delete which allows you to eliminate specific blobs. A blob is a group of pixels that are next to each and have the same color. Blobs can be about any size.
Done You want to save each selection individually which gives you the ability to animate the selection in the current and future animations. Saving is free.
Selecting With Polygons

select When you click "Polygon" you are taken to a panel that only has 2 buttons, "Done" and "Help", but the buttons, "Select" and "Delete" will appear when you place your first dot by clicking on the edge of what you want to select.
Upload When you click on the selection edge, the application will place a dot in the image. The dot is only a tool and it will not be in the image after the selection is made. Trace most the way around selection by placing more dots. You make the selection by clicking the "Select" button.
Delete The polygon deletion is nearly the same as the polygon selection which was just described. The difference, of course, is the the selected area will be deleted from the image. You are probably used to working with pixels which are smaller. When a pixel deletion is made the deletion will look a little smoother, but actual image artifacts are destroyed in the process. By deleting blobs, the integrity of the picture is maintained, and the final animation will be more realistic. You can compensate for the rougher edges by using more pixels in your images.
Done When the polygon selection is completed, you can click the "Done" button that will take you back to the screen that allows more editing. In other words, "Done" takes you back to the "Polygon", "Color", and "Blob" buttons.

Selecting With Color
View When you click on the "Color" button, you are taken to a screen that allows you to select or delete color based on a threshold that you can set. For example, you can eliminate all the white hair in an image. The screen has 2 color settings. The three text boxes allow you to set the color. A setting of 0, 0, and 0 is black. The "Color" box shows you the current color that other will be measured against. If the ">" radio button is clicked, all the colors that are lighter than the set color will be chosen. If the "<" radio button is clicked, all the colors that are darker than the set color will be chosen. You can then click, "View" to see what you selection looks like. At this point, the selection is not permanent.
Done When the color selection is completed, you can click the "Done" button that will take you back to the screen that allows more editing. In other words, "Done" takes you back to the "Polygon", "Color", and "Blob" buttons.
Keep When you click the "View" button, you are taken to a screen that shows your selection. If you click the "Keep" button, the changes will be made permanent, but changes are not saved to the cloud. You will have the option to do that later. "Keep" will also eliminate the "Undo" and "Keep" buttons, and redisplay the "View" and "Done" buttons.
Undo By clicking the "Undo" button, you will restore the image to what it was before you hit the "View" button. "Undo" will also eliminate the "Undo" and "Keep" buttons, and redisplay the "View" and "Done" buttons.

Deleting Blobs
Upload When you click on the "Blob" button you are taken to a screen that allows you to delete the blobs one by one which is useful if you need to cleanup the edge.

Deleteblob The blob is deleted by simply clicking on it. The blob that is selected will begin to blink. You can delete the blinking blob by clicking "Delete". The "Delete" is permanent.
Undo When you click on the blob it will start blinking to show you which blob is selected. If you selected the wrong blob, you can save it from deletion by clicking the "Undo" button.
Done When the blob deletion is completed, you can click the "Done" button that will take you back to the screen that allows more editing. In other words, "Done" takes you back to the "Polygon", "Color", and "Blob" buttons.

Step Two: Animate your sprites
Step Two: Animation
  1. Frames:
  2. The first step is determine how many frames you need. Certain events dictate when you need a new frame.

    Different Objects: If an object is added or subtracted from the view, a new frame is required. For example, let's suppose that in your animation two cars are approaching each other as in a head on collision. When the cars collide a huge explosion occurs and the two cars disappear. The addition of the explosion and subtraction of the two cars requires a new frame.

    Object Order: If an object is in front of another object, but then needs to go behind it, a new frame is required. For example, let's suppose that in your animation moon is in front of the earth. If a little later the moon goes behind the earth, a new frame will be needed for that.

    Scaling Direction: If an object is scaled in one direction (e.g., smaller to larger), but then needs to scale in the opposite direction (e.g., larger to smaller), a new frame is required. For example, let's suppose your animation has a boy staring at a girl. The boy's heart is throbbing (growing larger than smaller). The boy's heart can go from small to large in one frame and then from large to small in the next frame.

  3. Order
  4. At this point, you probably have a good idea of what objects should be in each frame, but you also should determine which objects are in front of other objects.

  5. Times
Try to imagine about how long each frame should be.
layers You are now ready to click the "Layers" button, and set the viewing order (e.g., what objects are in the front verses those in the back). If your animation only has one frame and the order that you see on the screen is correct, you can skip this step. Click the layers button on the left for more help with the layers panel.
Upload The frame times need to be set before you move or scale (assuming that you don't want to simply use the default times) in the area that is labeled "Timing". You can set the frame with either the arrows or simply by entering a number into the box. The times are set by entering numbers into the "Begin" and "End" text boxes.
scale You can go to the panel that changes the sizes of the objects by clicking on the "Scale" button. The scale panel also has the settings which allows the objects to change size during animation. Click the scale button on the left for more help with the scale panel.
You can position an object on the screen by simply dragging (hold left mouse key down, move the mouse, and let the mouse key up - drop) the object to the desire place. Don't click the move button when positioning, because that will animate the object when the animation is run.
Upload Click "Move", and drag and drop which will cause a straight line movement during animation. The application is limited to straight lines, but but you can have 100 line movements per frame. Drag and drop the sprite as many times as you need (up to 100) to get the movement that you want. Be sure to let the mouse key all the way up to ensure the drop. Then click "Move" to finish the movement for this object. Repeat this exercise for all the objects that you want to move in this frame.









run When the "Move" and "Scale" are set for all the objects that you want in the current frame, cycle through the remaining frame while setting the "Move" and "Scale". When everything is set, click the "Run" button to start the animation.
download When you click "Run", the controls disappear, and a single button, "Download", is presented. You can save the animation by clicking "Download". During the saving process you will be given a chance to set the size of your animation in pixels. Of course, you can also accept the default size.
Moving Objects to the Front or Back
Upload When the layer panel becomes visible, the screen will show all the objects of the current frame. When the "One" button is clicked, the "Layer" button will become visible. Click to the sprite that you want to set by using the blue arrows below "Sprites". Sprites that have lower layers will be in back of Sprites that higher layers. You can make an object disappear by setting the sprite layer to 0, but you have to click the "All" to see what you have. In other words, you use the "One" mode to set the sprite one at a time, and you use the "All" mode to see what have on the screen (sort of like a dress rehersal). Cycle through the frames and set the order for each frame.
done When all the layers have been selected, you can click the "Done" button that will take you back to the animation panel. In other words, "Done" takes you back to the "Layers", "Scale", and "Move" buttons.
Setting and Animating Size
Upload You can scale an object by clicking on the object that you want to scale. Then click the "Beginning" radio button, and set the scale with either the text box or scale bar. Click the "Ending" radio button and set the ending scale the same as the beginning scale.

The size of an object can be animated in the same way it was set in the last paragraph, but make the beginning and ending a different number. When you set the scale animation for one frame at a time. The frame that is display on the screen is the frame that is being set. You can scale more than object in a frame.
done When all the layers have been selected, you can click the "Done" button that will take you back to the animation panel. In other words, "Done" takes you back to the "Layers", "Scale", and "Move" buttons.