Tutorial Update: In Progress (missing pictures)ASCII Animator: Guide
The Basics
ASCII Animator is a modified version of ASCII Paint. Like MS Paint, the drawing system works on a pixel by pixel system. However, it differs in a few aspects:
1) You're not limited to just normal pixels. You can use ASCII characters, which allows you to add an extra point of detail into the drawing.
2) Since you can use ASCII Characters, it allows you to define foreground and background colors. Foreground color defines the character color, while the background the background pixel.
3) Last of all, you can export the image into different types of images, for example .gif, .bmp, .png, etc.
When you start up the program, it should look something like this:
(1) ASCII characters. Click on one to choose it. The arrows and highlighted row will move accordingly.
(2) Colors. Right click to set background, left click to select foreground. If the two colors are the same an X will appear over the color.
(2a) Palette selector. Click the arrow to scroll through the available palettes.
(3) Draw Tools. Pretty much exactly as Paint except for two options:
(3a) Copy - This provides a selector which you drag over the area you want to copy. After a copy the pixel image will become a single pixel again.
(3b) Paste - After selecting something to copy, select Paste to be able to paste your copied section.
Note - Try it out in the interface itself and you'll understand.
(4) Draw Options
(4a) Pick - Select a pixel's colors and characters
(4b) Undo and Redo - Straightforward, undos the last command or what you just pasted.
Note - You can ignore the options "menu" underneath this section for now. It comes into play when exporting files, however.
(5) File - Options on what to do with the currently opened file. Straightforward, except for the following options:
(5a) Save - This saves the file to the animator folder as a special ASCII Paint/Animator file.
(5b) Open - This checks for a ASCII Paint/Animator file by that name in the ASCII Animator folder.
(5a) Export - Changes the option menu to show export options
(6) Info - General info, such as where your cursor is relative to origin (top left corner) and FPS, and workspace size.
(7) Your Workspace - Moving your cursor here displays the pixel/paste image currently selected. Left click to place.
tl;dr: important basics covering the interface. go back and read it.
Animating
The fun part begins!
Setup
Before you can get animating you'll have to understand some parts of the workspace.
(1) Workspace Corners - Show the workspace edges
(2) Marker dots - Periodically appearing dots that denote specific pixel distances (default is ten by ten, ie one dot appears every ten pixels in any one direction)
By default, when taking the base pictures the .gif, they will conform to the marker dot distances. You can edit these distances in the ascii-paint setup file, along with the window size.
Time to draw!
Here's a demo image of what a fully-equipped workspace with all the images completed looks.
Note the fact that the images are taken from left to right, top to bottom. This results in the following image when created using the default .gif properties:
Note that it takes EVERY image, including the last box.
Customizing the .gif
When exporting to the .gif format, this mini window will appear:
Pretty simple to understand. However, there's an annoying thing that the animator does when you try to save it (at least for me).
For some reason, special ASCII characters get in the final file name. Just deleting them and leaving the automatic .gif file extension will still result in an unexported file. In order to get it to save correctly you must delete everything in the box and typing in the name, then the extension manually.
If we tweak the settings a bit...
...we get a image like this:
note that the blackout "image" is not included since the frame count has been reduced to three. Also the delay before cycling to the next image has been reduced, resulting in a much faster ocillating image.
Hoped you guys learned a lot from that. To make your .gif postable without attaching it, upload it to tinypic (imageshack doesn't store .gifs right for some reason).
Comments?
ASCII Animator: Layers TutorialRecently, eigenbom added a new feature supporting layers, allowing you to construct animations on multiple layers. This allows more control over the interface as you can dedicate layers for background, creating a separate image/animation on top.
This new feature simplifies animation as now you don't have to constantly edit the background when editing frames for "bugfixes." It also allows you to isolate separate animations (hatch door, spaceship, lasers, etc) to simplify the editing process.
Layers: The BasicsLayer?First, lets define exactly what a layer is.
A layer is simply what it sounds like: a layer! Imagine multiple layers as multiple transparent sheets; you can draw separately on each sheet, which will be visible through the sheet above, and the sheet above that. Layers limit your editing area to that layer specifically, after all, you can't erase a line if a paper is between your eraser and the line!
Let's get animating already!Let's have a look at the updated menu...
1) The "Layers" menu. To select a layer click on its name.
1a) Up/Down: Moves the selected layer up/down
1b) +/-: Removes the selected layer or adds a new one.
1c) R: Renames selected layer. Max 4 characters
1d) fg/bg: Don't mess with these. I don't know what they do, but whatever they do it probably isn't very important.
2) A visible "hole" through all the layers. Having a hole is easily seen due to the default "checkerboard background"
Layer order is defined from top to bottom; the first layer listed is the top, while the last layer listed is the bottom.
A layer being a layer, sometimes we want to be able to see the layer beneath the upper layer to make it easier to see what exactly we are drawing. To toggle layer visibility, click the white dots next to each layer name.
Note: When exporting the file, it will only export the visible layers. Any "holes" in the layers showing the "background" checkerboard will result in pink, as shown in the following compiled .gif.
This means you'll now have to manually fill in backgrounds, but that shouldn't be much of an issue since its easily resolved by creating a background layer and filling it in with a single color.
To select the "invisible" color, use the "T" visible just beneath the current colorset.
NOTE: There is a glitch involving transparency. If you select an ASCII character and set the background color as transparent (with the foreground as a visible color), when placing the character, the character will not show up. When the foreground (ASCII Character) is transparent (and background visible), when placing the character, the ASCII Character will be pink. Here is an example image:
That's about it, if you have any questions, refer to my post on page 7 or PM me. Hope this helped.
