What Is It? | Instructions | Possible Errors | Future Versions | Making Animations

#

#
Instructions

#

### Introduction

(As this tutorial proceeds, the first time a keyword is presented it is written in bold. It is usually explained immediately after being mentioned.)

This page explains how to create and edit graphics in the editor. This does not explain animation; see Making Animations for information regarding phases and animations.

The graphics in this program are composed of several layered objects. "Layered" indicates that there is an object that is drawn first, then a second object drawn next (possibly covering part of the first object), and then a third, and so on. There are four types of objects: Shapes, Images, Text and Groups.

All of the actual editing is done in what is called the canvas; the canvas is the large scrollable area in the lower-right area of the screen. The portion of the canvas that is initially white represents the actual content of your cartoon. This is a special object: by clicking the border of the canvas, the canvas can be resized. The buttons at the top of the screen (visible when the canvas is selected) let you adjust the way the canvas is filled.

Clicking on any object adds that object to the current selection. If an object is selected, then the computer assumes you intend to edit it. To select more than one object at time, you can click the canvas and drag the cursor, or shift-click individual objects.

To adjust the layering of objects, you can right-click (or control-click) any object to view the contextual menus. Selecting "Move Up" will switch the selected objects with the objects immediately above them. "Bring to Front" will bring the selected objects to the very forefront of the layering hierarchy. Likewise "Move Down" and "Send to Back" will push objects down the layering hierarchy. (These options are also available via the "Objects" menu.)

Most of the rest of this tutorial is separated into three sections, one for each of the different objects:

- Shapes
- Images
- Text
- Groups

Finally I discuss a few miscellaneous features towards the end.

### Shapes

To create a shape, click the button from the row of buttons at the top of the screen. A square will follow your cursor as you move it over the canvas; this square represents a node of your new shape. Click the mouse once over the canvas to assign this point. A new square will follow your cursor; click once again to set this new node down. Dragging the cursor after clicking will assign a slope to this particular node. Lines (or curves) will connect these nodes, much like connect-the-dots. Continue to add points by clicking until you have the shape you desire. There are two ways to finish creating a shape:

- Click the last node you added. This leaves the shape open.
- Click the first node you created, this closes the shape.

Because certain shapes are used more often, there is a special button to create rectangles, triangles, ovals and stars. Click the button and select the desired shape from the popup menu. The new shape will follow your cursor until you click once to set it down.

The following discusses how to edit specific properties of a shape. In order to edit these properties and access the buttons described, you must have selected the desired shape by clicking on it.

When a shape is selected, the nodes of a shape are highlighted in white boxes. You can click and drag any node to relocate it. (Ovals do not contain nodes. They are always drawn as ellipses, so no single node can be moved outside of the circular path.)

Each node can have a slope, or it can be sharp. By default, all nodes are sharp. That is, the lines connecting nodes are jagged and have sharp corners. Double click a sharp node to give it a slope. Two green arrows will appear on either side of the node. Drag the arrow tips with the mouse to change the magnitude and direction of the slope. Double click the node again and the arrow tips turn blue. Now if you drag one arrow tip the other one doesn't move: this is useful for shapes that may come to a sharp point from a curved path (like the tip of a leaf). Double click one more time to make the node sharp again.

There are three different ways to fill a shape:

- Fill with solid color. Click the button. The inspector window will appear. By selecting a color from the color chooser inside, the shape will become filled with that color. Note that you can drag the mouse outside the color chooser over any pixel on the screen to grab that color. If the colors in the color chooser aren't adequate, you can select "More Options" to go to a larger, more detailed color chooser. There is also a slider at the bottom of the color chooser called "Opacity." This changes the transparency (or opacity) of a color: dragging the slider to the far right makes a color 100% opaque, and dragging the slider to the far left makes a color 100% transparent. (The effects of transparency are only really noticeable if the current shape is layered above other objects.) To "turn off" the fill of a shape, set the fill to transparent. Also, by clicking within the provided colors and dragging away, you can select any color on the screen.
- Fill with gradient color. (A gradient is a transition frome one color to another.) Click the button. The inspector window will appear again. Now by selecting either the tab "Begin" or "End," you can access the color choosers to edit the beginning and ending points of the gradient. The locations of these points are represented on the canvas as two triangles. Click and drag these points to relocate the beginning and ending points of the gradient. There is also a checkbox "Repeating Gradient" in the inspector window. If this is selected, the gradient you create is repeated over and over in the filled space before and after the beginning and ending points.
- Fill with pattern. Click the button. Click the "From File" button in the inspector window. The file you select will be repeated like a tile pattern across the shape. This does not yet animate well, so proceed with caution.

To edit the pen (or "stroke") properties of a shape, select the button. Three adjustable properties will appear in the inspector window:

- Stroke width. Slide this to adjust the thickness of the pen. The value that this slider represents is written immediately below the slider in parentheses. To "turn off" the frame of a shape, set the stroke width to 0.0.
- Color. This color chooser controls the color of the frame.
- Closed checkbox. This controls whether the shape is closed or not.

Each object has adjustable rotation. To rotate a shape, select the button. Eight orange boxes framing the shape and one orange diamond will appear. The orange diamond represents the anchor point. Click and drag the anchor point to relocate it. Drag any of the eight boxes to rotate the shape around the anchor.

Shapes are scaled slightly different than other objects: double-click a shape to create the eight framing boxes. (Double-click again to remove them.) Drag any of these boxes to scale the shape to a new proportion.

All objects have adjustable completion. This is controlled by the slider at the top of the screen. The completion of a shape controls how many points are drawn: 100% completion draws 100% of the points, and 0% completion draws 0% of the points.

###

Image

To create an image, select the button. A file dialog will appear for you to select an image to import. Most standard file types will be supported; please let me know if you have trouble importing any certain type of file.

There's something important to bring up before I continue: a saved cartoon file does not store imported pictures. All it stores is the location of the imported pictures. This means that if you move your pictures to another folder, or if you try to view the cartoon file on another computer, you will be asked to help the computer locate the pictures again.

The following discusses how to edit specific properties of an image. In order to edit these properties and access the buttons described, you must have selected the desired image by clicking on it.

Select the to adjust the viewable area of an image. A dialog box will appear containing another copy of the image. By default, the entire image is drawn, and four white nodes will appear in each corner of the new image. Drag these white nodes inward to frame a new "viewable" area of the image. Only the part of the image enclosed in the white nodes will appear in the cartoon. At the bottom of the window you can adjust the magnification of the image: 1.0 represents 100% of the original width/height, 0.5=50%, 2.0=200%, etc.

Select the to change the actual file this image displays. A new file dialog will appear, and you can select a new image.

To rotate an image, select the button. Eight orange boxes framing the shape and one orange diamond will appear. The orange diamond represents the anchor point. Click and drag the anchor point to relocate it. Drag any of the eight boxes to rotate the image around the anchor.

To scale an image, simply select one of the eight blue boxes framing the image. Drag any of these boxes to resize the image.

The completion of an image (adjustable via the slider at the top of the sreen), controls the transparency of the image: 100% completion means the image is 100% opaque. 0% completion draws the image at 0% opacity.

### Text

To create a text object, select the button. To enter text, first double click the text object. If there is no cursor blinking, then the editor is not ready to receive your text. Once the cursor is blinking, selections can be made with the arrow keys or with the mouse like any other text editing program.

The font and size of your current selection can be changed with the button. A list of all possible fonts will appear in the inspector, and a sliding knob in the bottom of the inspector will let you change the font size.

Text can have special transformations applied. Select the button to experiment with rotations, shearing, scaling, and displacement. Text can always be selected by clicking where it would be without any transformations. This makes it slightly difficult to select severely transformed text, but it is necessary so no single click can reference more than one character. (Text can overlap if several transfomations are applied; if two characters overlap, which one gets selected if you click them?)

Finally you can adjust the text color with the button. The inspector will now let you assign 4 properties: text color, text outline color, box color, box outline color. (You can adjust which color you are editing with the popup button at the top of the inspector.) Note that the text outline color cannot be applied to individual selections; it must be applied to the entire text.

To rotate a text object, select the button. Eight orange boxes framing the shape and one orange diamond will appear. The orange diamond represents the anchor point. Click and drag the anchor point to relocate it. Drag any of the eight boxes to rotate the text around the anchor.

To resize a text object, simply select one of the eight blue boxes framing the image. Drag any of these boxes to resize the enclosing rectangle.

The completion of an text (adjustable via the slider at the top of the sreen), controls the number of characters drawn: 100% completion means 100% of the characters are drawn, 0% completions means that no characters are drawn.

In transitioning between phases: text will transform across phases if and only if: the actual text is the same in both phases, and the fonts are all the same. The only properties that can vary are the color, transformations, and size of the text. If it cannot transform across phases, the phases will transition as one text object fades behind the other.

###

Groups

To create a group, select several objects and right-click any one of them. Select "Group" from the contextual menu. The objects are now clustered into 1 object. This is useful when you want to scale or drag several objects at once.

To ungroup a group, select "Ungroup" from the contextual menu. The objects can again be selected individually.

To rotate a group, select the button. Eight orange boxes framing the shape and one orange diamond will appear. The orange diamond represents the anchor point. Click and drag the anchor point to relocate it. Drag any of the eight boxes to rotate the group around the anchor.

To scale a group, simply select one of the eight blue boxes framing the group. Drag any of these boxes to resize the group.

The completion of a group (adjustable via the slider at the top of the sreen), controls the number of inner objects drawn: 100% completion means that 100% of the objects will be drawn. 0% completion means that 0% of the objects will be drawn. 50% means that the bottommost 50% of the objects will be drawn.

### Miscellaneous Features

Just below the canvas is a sliding knob that controls the magnification of the canvas. By default this is set to 100%. This can be adjusted to anywhere between 50% and 300% to zoom in or out of the image.

Under the "Options" menu you can enabled the autogrid or autoalign features. Autogrid simply snaps the mouse to the points of an invisible grid. This is useful to create diagrams, simple polygons (such as octagons), or maintain a certain symmetry. Autoalign snaps the mouse towards important hotspots of other objects. A hotspot is an important point. For example, every node of a shape is a hotspot. Every corner of an image or group is a hotspot. In this way, autoalign helps snuggly fit objects together.

There are two ways to duplicate objects: You can option-click selected objects, or you can select copy and paste from the "Edit" menu.

Also under the "Edit" menu, you can resize or translate the cartoon. Resizing a cartoon can either crop or scale the cartoon; translating shifts the cartoon a certain amount horizontally and vertically.

To capture the cartoon in the current phase, select "Export As Picture" under the "File" menu. You can export as either a .jpg or a .pict file.