So you need a little help eh? I'll see what I can do.
ToonZoom Animate is an online frame based 2D animation, stop motion maker, flip book, story board, diagram / chart maker or whatever you can think of creation tool.
If you are looking to create animitated diagrams of any sort or something funny that hopefully goes viral, then ToonZoom may be just what you need. Oh yeah, it's totally free!
Still interested? Read on....
Tip: Turn your creations into viral GiFs by using the render to GIF button or uploading your finished video to Cloud Convert.
You can make some interesting things with ToonZoom. How advanced you get is up to you.
Here are some examples Videos and Guitar Tabs of mine.
Note: This help file is currently being written as you read this! There may be mispellings and grammatical errors. There is so much to cover about how to use this app for animation / diagramming that I may mistype a thing or two. Check back frequently for updates or contact me if you need help!
Rule #1: Be patient and take your time. This is supposed to be fun. There is a slight learning curve. If something is not going right perhaps you are doing it wrong or maybe you have found a bug. If you think you have found a bug please contact me so I can fix it!
First things first, make sure you are using a computer with a big enough screen. The stage is set at 854x480 for 16:9 aspect ratio so that animations will fit Youtube. Please don't use a phone or tablet. Use a 17 inch screen or larger to fit the stage and all the tools nicely. You don't want to be frustrated do you?
Next, load your assets. You can choose from ToonZoom's library of customizable symbols as well as upload your own art.
Upload your art assets by clicking the 
button.
When choosing image assets to upload, choose images that will fit on the stage. On full size screens like desktops, the stage is set to fit Youtube 480p resolution at 854x480 pixels. If you are using a small laptop style screen you will need to adjust the stage size to fit your needs. Upload images that are cropped without to much surrounding white space. Try to use PNG images that have white space as transparency. Adding images that are too large with too much surrounding transparency or white space can overlap other assets and lead to confusion. If this happens and you find yourself stuck, you can always click the wipe stage button.
Once an upload is successful the image will appear in the library and on the stage. Library items act as symbols that you can add to the stage as many times as you want.
Art can be any image even SVG vector graphics. SVG have the benefit of scaling without losing quality. Ideally your art should have all surrounding backgrounds/whitespace as transparent. Your art assets should also be cropped as close as possible to the actual item in the image.
Once your art is on the stage you can move it around with your mouse and even manipulate it in various ways using the object tools above the stage.
Essentially ToonZoom let's you combine all your art assets on the screen and turn them into frames. So move your items into position then press the Add frame button or press your Spacebar on your keyboard.
When making a frame notice that the play button turns into an animated spinner like [
]. That means it is currently working on making/rendering that frame. You can't/shouldn't do anything while that is going. How long the wait is depends on how fast your Internet connection is. Most buttons/options won't do anything while in this wait state but some will. It's best just to wait until the spinner goes away then continue working. Use that small bit of wait time to plan your next move.
When you are done making frames press the play button 
to test your animation. Keep in mind, playback starts at the last clicked frame. If you have clicked a frame to edit it, playback starts there even if it was the last frame. To start playback from the beginning, you have to let the playing finish then press play again.
Repeat the add frame process until you are satisfied with the results.
The ToonZoom stage has three main layers. The Foreground layer, the Background layer and the Onion layer. You can also add any object over another by adding in its symbol from the library. Let's go over the functions of each layer.
Foreground layer: This layer is always on top. This is where most of your action / changes occur.
Background layer: This layer can be used as an ordinary layer or as a Parallax layer. In other words, the whole layer and all objects inside of it can be moved as a whole or each object in it independently. To move the layer as a whole use Z and X keys for left and right, U and B keys for up and down.
Onion layer: This layer when turned on shows all the objects from the layer on previous frame. It can also be turned on with grid lines visible. Use this layer for moving objects with precision according to their state in the previous frame.
Once you have made a frame You may need to go back and edit it. To do that click on the frame you want to edit. Make your changes on the screen then press the Update Frame button
Insert / copy an existing frame by first clicking a frame then clicking the Copy Frame button. Copied frames are inserted directly after the frame that has been copied. Copied frames can be clicked on and updated too!
There is no undo button, but there is undo!. If you mess up something on a frame you are currently on DON'T update the frame! Just click on another frame then click back on the frame you want to edit and everything will be back to normal. You can also make a copy of a frame before editing it. If you delete a frame it will be gone forever...just make a backup of it or create it again. Accidentally delete an object? No worries just click on its symbol in the library to add it again. Delete a symbol from the library? Re-upload it :)
I'll be writing in depth functions about each tool soon but until then read the descriptions for each tool (if available) by hovering your mouse over them or experimentation!
There are two ways to group objects, temporary and semi permanent. Grouping objects is used primarily for moving groups of objects around while maintaining distances in relation to each other.
To group objects temporarily in order to move the entire group, first enter select mode by press the "g" key on your keyboard or by clicking the select button: 
then click and drag on the stage to make a selections. Once your selection is made you can then click and drag on any object with the selection to move the entire group.. Unselect the group by clicking on a blank area of the stage.
To group objects into semi permanent groups, select objects as described above then press the group 
button. Objects will then be grouped and can be moved together until you press the ungroup button. The ungroup button must be pressed while the group is active/highlighted.
Move objects with mouse or WASD or ARROW keys. Move Parallax background with Z, X and U, B keys. You can not move Text objects with your keyboard :( You have to use your mouse for that. You can make your text as an image, upload it, then keyboard keys will work for movement. Also, keyboard movements will not work if any text item in the app is focused. Click on any image on the stage to enable keyboard movement.
There are two ways to get your animation to video. Each has its own drawbacks.
#1 - Press the render icon: 
This is probably the easiest way to get your animation on video. Some drawbacks are: A) Some browsers can only use one (the first Sound) sound as a soundtrack. If you are making silent movies or intend to add sound later then this is not important. See below to have more than one sound. B) The resulting video is in WebM format and can not be viewed on Apple products. Sorry, it's not my fault. Switch to a PC and use Chrome browser or see below.
#2 Use a screen capture program. Yep that's right, use something like Camtasia or some other screen capture software to capture your animation as it is playing. If you use Linux there are several free programs out there. I like Vokoscreen. The benefit of using a screen capture program is that you can use multiple sound files that play at your specified frames if your browser doesn't let you do that. Latest Chrome browsers seems to let you use all your sounds during Render. Video quality may be higher too.
*** Note - The last frame is not rendered. So add an extra frame so that your second the last frame gets rendered and treated as last.
ToonZoom does not save any of your sound assets or art. All sounds you upload are only good during your current session. It's a good idea to do any sound work last when your animation is complete. When you save your project ToonZoom will save a list of the sound files you used with frame numbers you had them set to play on. You can use that list recreate them if necessary. All other art symbols are saved as you had them. As stated above, Chrome seems to be the best at playing all your sounds during Render.
Save your project by clicking the save icon 
. Download the file which is a text file. DO NOT EDIT the saved file with anything other than ToonZOOM!
Your project file size is as big as the combined size of all your art assets plus extra in other data. When uploading assets, try not to use the same files over and over. To duplicate an asset select it's symbol in the libray instead of uploading it again.
In this section I will be adding helpful tips. It's amazing how I find new things about using an app that I built. I hope others out there will share tips with me too. Anyway here goes:
Fading: If you fade and object all the way out, delete it! If you forget to delete an object that you have faded out, it will still be there on every frame you create afterward. This can lead to some confusion when you try to click on objects near the faded out object. So get in the habit of immediately deleting any objects that you fade out entirely. EDIT: I just put in some protection against fading objects all the way out. It is still possible to do it if you really wanted but now this should help avoid confusion.
Uploading file problems: Sometimes you may have the need to make changes to an image you already have uploaded and when trying to re upload it nothing happens. If this is the case re-name the file on your end and then try to upload it. The app sometimes doesn't allow you to upload a file into the library if it already exists.
End Frame Padding: Add an extra few frames after last frame to ensure everything plays back and renders fully.
Explore
