Zapimator is an animation program designed to help you help quickly get ideas out.
Enjoy!
If you make stuff with my app, I'd love to see it, if you got a Twitter, please @ me with your cool animations! @capercube
Here's the planned feature list
This is not my main project at them moment, so changes may happen quite slowly.
How to use:
- A blank project starts with a 400 x 400 canvas (currently this cannot be changed without editing the project) and an empty layer, on which you can draw an image, you can view the borders of the layer by clicking "Debug" (debug graphics will be visible in the rendered video if you neglect to turn this off). You can also import an image with the "Add image layer" button on the left panel.
- Layers can be renamed by double-clicking them in the layer list.
- Layer duplication is a planned feature that is not currently working :( sorry!
- Layer order can be changed by using the up and down arrow buttons on the left panel.
- Layer blending-mode can be changed by using the blending-mode list on the right panel. The default mode is "Normal".
- Layers can be hidden and locked buy using the bottom two buttons on the left panel.
- The Top panel contains the play, frame step, loop toggle, record on click, brush, brush color, brush size, and eraser buttons as well as the timeline.
- The right panel contains the selected layer's properties as well as the length and frame-rate fields at the bottom.
- To animate a layer, select it from the list on the right, click the property animation toggle for the property you would like to animate, then click play. While a layer's property is toggled on, it records any changes, even during play-back.
- After recording, do not toggle off the layer's property you've just changed, as this will delete the recorded frames. This can be done to reset an animation.
- The "Save" and "Load" buttons on the bottom panel save your project as a .json file on your computer.
- The "Render" button will export the animation as a .webm (other video formats are planned to be supported). Once the render is complete, a preview of the video will appear at the bottom of the app. If you hover your mouse over the video, you should see a menu button which will include the option to download the video.
Whew, one of these days I'll make an proper tutorial on how to use this.
Keyboard shortcuts:
P - Play / Pause < - Frame step back > - Frame step forward Shift < - First frame Shift > - Last frame V - Switch to move mode B - Toggle brush mode E - Toggle eraser mode [ - Brush size down ] - Brush size up Alt (in brush mode) - Pick color at mouse for brush Alt (not in brush mode) - Pick color at mouse for background
Disclaimer: This app currently only works when using Chrome. Firefox almost works, but you might not be able to draw or export projects. This app also tends to run just a tad slow, so... uh, yeah.
WARNING: This app is an early prototype, use this for large projects at your own risk! The app won't hurt your PC, but it might break, causing you to lose your progress. HTML-based apps don't exactly crash, BUT the code can decide side to just stop working if a fatal error is encountered. Save often if you care about your projects!
WARNING AGAIN!!: I will try my best to maintain the load-ability of projects, however it is sometimes necessary to change the save-file structure, and this often breaks the program's ability to load old projects. I hope to have a sold system in place by version 1.0