Logo for Creative Shadows Ltd

Apps and Games for a Mobile World

Doodlemate icon


Animate Your Doodles

Challenge your creativity: choose your colours and get drawing. Stick-men doing crazy things, animated sprites or your very own cartoon movie, you can do it all with Doodlemate.

  • Draw animations from a colour palette: challenge your artistic side and make the most of each colour.
  • Turn your animations into animated GIFs and email them to yourself and your friends.
  • Don't like how a colour looks? Change it in the palette and all your animations will be updated with your new choice.
  • Show or hide the preview window while editing: view your changes when zoomed in for detailed drawing without constantly re-zooming the frame.
  • Create animations from small to large: from 20 pixels up to 300 pixels.
  • Choose palettes with 2, 4, 8, 16, 32 and 64 colours.
  • Default colour palettes taken from the dawn of computing: ZX Spectrum, C64 and CGA!
  • Like one of your animation frames? Save it and use it as a background, or send it to your friends.

Doodlemate Description

The following describes the Doodlemate app and the features and options it supports.

If you have any other questions about Doodlemate please contact support@creativeshadows.co.uk

Animation List

Main Screen Screenshot

The first screen is where you can find all your animations.

  • Lists all of your animations.
  • Shows the title and thumbnail for each animation.
  • Shows the author and notes, if they are set.

There are a few things you can do from this screen:

  • *New* Email your animations - Tap the email icon to send your animation to yourself or your friends.
  • View an animation - Tap the thumbnail square to view your animation.
  • Edit an animation - Tap anywhere else on the row to start edit your animation.
  • Create a new animation - Tap the "Create New Animation" row at the bottom of the list.

Viewing Animations

Animation Viewing Screenshot

Tapping the thumbnail image for an animation in the list view lets you view that animation without the clutter of the drawing view.

Your animation is shown at its actual size and you can zoom in if you want to view a smaller animation more clearly. Tap the toolbar over "Zoom: xxx%" to reset your animation to its actual size.

Simply tap the display or the play/pause button to start and stop the animation.

Animation Settings

Animation Settings Screenshot

The Settings screen is the first screen you see when creating a new animation, and is linked to the edit screen by the icon on the right of the title bar. Here you can edit all details for the animation.

  • Name - Choose a name for your animation. This is required before your can create an animation.
  • Thumbnail - Pick a frame from to be shown in the animations list.
  • Palette - Edit the palette colours, select a different palette or create a whole new one to use for your latest creation.
  • Size - This is the width and height of your animation in pixels. This should be selected when you create your animation. Changing it after the animation is created wipes all existing frames and can't be undone.
  • FPS - (Frames per Second) The speed of your animation. This is the number of frames from your animation shown in a second. Decrease it to slow your animation down, increase it to speed your animation up.
  • Frames - The current number of frames in the animation. This is updated automatically as you doodle more frames.
  • Author - Who made this animation? Make sure you get the credit.
  • Notes - Add a description, reminders on what to do in the next frame or any other information you fancy.
  • Delete Animation - Right at the bottom of the list, be careful with this one. Deleting your animation can't be undone, so make sure you really (really) mean it!

Palette Selection

Palettes List Screenshot

What's palette based doodling without some palettes to start you off? Back from the early years of computing are the palettes from the Commodore 64, ZX Spectrum and the original CGA colour mode. Be dazzled by the sheer variety of colours these early computer game pioneers had to work with. If they could create masterpieces using them, why not you?

The palette selection screen is split into two sections, with your palettes at the top and the default palette options at the bottom. Simply tap a palette to select it for your animation.

The edit button lets you change an existing palette.

Palette Colours

Palette Colours Screenshot

The Palette Colours screen shows a grid of colour patches, one for each colour in the palette. Tap on a colour to change it.

Note: The colours for default palettes can not be edited. Copy the palette if you want to create a variation of a default palette.

Palette Settings

The Palette Settings view lets you change the name and size of a palette or change the description associated with it. This view also lets you copy the palette if you want to create a variation of it without losing the original colours. You can also delete the palette if you wish.

Note: The name, size and description of a default palette can not be changed. Default palettes can be copied but not deleted.

Colour Editing

The colour editing view shows a grid of colours along with a brightness bar. Drag your finger on either to change the colour. The new colour is shown alongside the original colour, as well as the current RGB values (tap the RBG button to cycle between RGB, HSB and HEX). Select save to accept a new colour or back to discard your changes.

Draw Animations

Draw Animation Screenshot

The drawing screen is where your animation drawing takes place. The view contains a toolbar at the top of the screen and a preview pane underneath it on the right. The rest of the screen is the edit area for your animation.

The drawing screen is linked to the Animation Settings screen by the icon on the right of the title bar.

Draw Your Animation

The draw view shows the current animation frame. To draw in the frame you simply tap or drag with your finger in the frame area. Don't forget to select a colour to draw with from the palette.

Zoom and move the frame view using the standard pinch and drag controls.

The Toolbar

The toolbar contains several controls to help you with your doodlemations.

Drawing Options Screenshot

The first button in the toolbar opens the general tools menu. This menu contains a variety of options that apply to the current frame.

  • Brush Size - Choose your brush: small, medium or large. Once you're happy, tap the back button to return to editing.
  • Clear to colour - Paints the entire frame with the selected colour. The default colour is your current editing colour, shown on the right side of the row. Tap the colour patch to select a different colour.
  • Copy Previous Frame - Don't fancy redrawing an entire frame from scratch? Use this option to copy a previous frame to use as the foundation for your next frame.
  • Fit to Screen - Lost your animation? Will zooming back in or out take too long? Simply tap this option show and fit the frame on screen.
  • Actual Size - Want to see your current doodle at its real size? Tap this option to scale the edit view to the frames actual size.
  • Insert Frame Before - Add a frame to your animation right before the current frame. Handy if you decide you want an extra step before your current frame.
  • Insert Frame After - Add a frame to your animation right after the current frame. Handy if you decide you want an extra step after your current frame.
  • Save Frame As Image - Like this frame? Want to use it as a background or send it to a friend? Save the current frame as a picture in your Photo folder.
  • Delete Frame - Remove the current frame from the animation.
Select Colour Screenshot

The second control in the toolbar is the colour selection button. This shows which colour you are currently drawing with. Tapping it lets you select a different colour and, if you need to, edit the colours currently in your palette.

The biggest control is for frame navigation and consists of three buttons: previous, select frame and next (or add frame). The previous button moves to the previous frame in the animation, if possible. The next button moves to the next frame in the animation. If you're already at the last frame in the animation then the next button will change to a '+' symbol, and tapping it will add another frame to the animation. The current frame button shows the number of current frame, and tapping it lets you jump straight to any other frame.

The Preview View

The handy little preview view shows your current frame while you're editing: useful when zoomed in and you want to see how your changes look. It's also handy to preview your animation and see how it looks while you're editing: tap the preview view and it will play your animation.

Don't like it? Tap the arrow and it will hide itself. Tap the arrow again to show it.

The Frame Strip

Frame Strip Screenshot

The frame strip view can be found next to the preview view and is minimised by default. Tap the down arrow on the left under the toolbar to reveal it.

The frame strip view contains all the frames in your animation and can be used to easily copy a previous frame. Simply touch one of your frames for a moment to activate the drag and drop feature, then drag the frame over the edit view. If you change your mind, drop the frame back over frame strip to cancel the copy.

Want use a previous frame as a guide for your next frame instead of copying it? Tap on a frame in the frame strip and it will be added as an overlay. Tap again to remove the overlay when you're done, or tap on a different frame to use that as a guide instead.

Wondering about the colours around some frames in the frame strip? Well, there are two markers in the frame strip:

  • The Green marker indicates the current frame being edited. This will move as you change frames using the toolbar controls.
  • The Red marker indicates the frame being used for the overlay. This will be added, moved and removed as you tap on frames in the frame strip.