Brush Ninja is a super simple animation tool - designed to make it as easy as possible for people to get started with traditional animation skills. This document outlines how to use the Brush Ninja animation creator, and covers some of the more advanced features that may not be immediately obvious.
The editor is divided into three sections.
- The big white square is the current frame. This is what you should draw on.
- The group of circles are your brushes. The different sizes represent the size of the brush. Click to select the size you want.
- The group of colours are the paint colours. Click to swap between colours.
- Above the circles is the tool palette. Click on this to swap tools.
Underneath the frame canvas is a control panel. From here you can change the animation settings, and play the animation.
Playing the animation is as simple as pressing the play button. When you do this all of the controls will fade out so that you can focus on watching the animation. To bring the controls back press the play button (which will have changed to a stop button).
There are a variety of tools in Brush Ninja that allow you to create fun animations.
- Pencil - a classic drawing tool. Draws curves and lines that follow your pointer movement.
- Shapes - Quickly draw squares (or rectangles), circles (or ovals), triangles and stars. Press shift whilst drawing to draw perfect shapes (squares and circles).
- Lines - An easy way to draw a straight line. Press shift whilst drawing to constrain the lines to nice angles (perfectly horizontal/ vertical, or 45 degrees).
- Eraser - Uses the same drawing technique as the pencil tool and erases the drawing so you can see the background properly.
- Text - Type text to add notes, or speech to your animations.
- Tools - Move, Rotate and Scale your drawings. The move tool wraps the image across borders. The Scale and Rotate tool transform the image around the center of the frame.
The timeline shows the frames that make up your animation. Each frame will be displayed for a fraction of a second before showing the next frame. By default only one frame will be displayed. Click the big green ‘add frame’ button to add more frames.
To change the selected frame in the editor simply click the frame you want to work on.
Under each frame in the timeline we have 2 buttons. The 2 documents copy the frame. The trash can deletes the frame.
You can also drag and drop frames to change their order. This also works with the add frame button. The advantage of being able to move the add frame button is that you can add new blank frames wherever you like.
Note that you must always have at least one frame in the timeline.
At the top of the screen is a toolbar that gives you common actions to perform on your animations.
- New - Press the new button to erase the current animation and start again.
- Save - The save button will save the animation in the browser. If you close and reopen the browser then your animation will remain. Note that in some situations the animation may not save, for example on some networked setups in schools the browser data is removed between sessions. This can cause a loss of information.
- Undo - Undo the last action performed.
- Redo - Redo the last action that was undone.
- Onion Skin Before - Display a transparent version of the previous animation frames.
- Onion Skin After - Display a transparent version of the subsequent animation frames.
- 1 - Select paint brush.
- 2 - Select shape tool.
- 3 - Select line tool.
- 4 - Select eraser tool.
- 4 - Select text tool.
- 6 - Select tools (move, rotate etc).
- Ctrl + z or Command + z - undo. This only undoes drawings on the current frame and is reset when you change frame.
- Space - Play animation.
- Left arrow - Select previous frame.
- Right arrow - Select next frame.
- delete or backspace - Delete current frame.
- Shift - When painting with shapes this constrains the shape to a square. When painting with lines this constrains the lines to 45 degree angles.
- n - New frame.
- d - Duplicate current frame.
- f - Set the currently selected frame as the first frame in the animation.
- Escape or right click whilst drawing - Cancel current drawing operation.
- [ & ] - Move through the brushes for the current tool. For most brushes this increases or decreases the size of the brush.
- o - Toggle onion skinning. This flips both before and after settings, so if one is on and one off then they will invert.
- t - Change transparency of the brush.
- p - Display quick palette selection window.
- l - Display the quick tool selection window.
- r - Clear the current frame.
- Frame Rate - The speed at which the animation plays in frames per second.
- Background Color - A background colour that shows behind the animation. Remove this to have a transparent background. If there’s a background image set then it will override the background colour.
- Animation Credits - Text that will be added to the bottom right of the animation. Remove this to hide the text.
- Background Image - Select an image that will display behind your animation.