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.
- 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.