Learn to Animate

1. In a practice scene, create a level (of any kind) with a single drawing and a step of 50
2. Draw an object that will change during the animation
3. Select the Animate tool (A)
   1. Make sure that the correct layer is selected - Col1 if this is the only level in your scene
   2. Set the animate type from "Position" to "Center"
   
4. Move the center of the image to the center of your drawing by clicking and dragging the pink circle into the correct position

1. Select the cell for the starting position of your tween
2. Add a keyframe by clicking on the keyframe button in the Viewer (changing the position will also automatically set a keyframe)
3. Change the mode of the Animate tool to "Position"
4. Select the first cell for the drawing in the Timeline (or Xsheet) (or the cell where you want the transition to start)
5. Add a keyframe (click on the key icon in the Viewer)
6. Select the last cell in your layer (or the cell where you want the transition to end)
7. In the Viewer, click and drag to move your drawing into it's ending position
   1. Hold down on Opt | Alt while dragging to position slowly/precisely
   2. Hold down on Shift while dragging to lock to the X/Y axis
   3. Type a value in the X/Y fields to move a set number of pixels
   4. Click and drag on the X/Y labels to adjust those values
   5. Click on a lock icon to restrict the direction of movement
   

1. Select the cell for the starting rotation of your tween
2. Change the Animate tool's mode to rotate
3. Set a keyframe for the starting rotation (changing the rotation will automatically set a keyframe)
4. Select the ending cell and change the rotation for the drawing as needed:
   • Click and drag in the viewer to rotate
   • Hold down on Opt | Alt while dragging to rotate precisely
   • Type a different value in the tool option bar to rotate precisely
   • Click and drag on the label in the tool option bar to change the rotation value
   • Play your animation and make adjustments as necessary

1. Change the Animate tool's mode to scale
2. Set a keyframe for the starting scale (changing the scale will automatically set a keyframe)
3. Select the ending cell and change the scale for the drawing as needed:
   • Click and drag in the viewer to change the scale
   • Hold down on Cmd | Ctrl while dragging to resize with the aspect ratio unlocked
   • Hold down on Opt | Alt while dragging to resize slowly/precisely
   • Type a different value in the tool option bar to set the scale to a specific size
   • Click and drag on the labels in the tool option bar to change the scale values
   • Click on the lock icons to restrict size changes to a specific axis (when resizing while holding Cmd | Ctrl)
   • Play your animation and make adjustments as necessary

1. Change the Animate tool's mode to shear
2. Set a keyframe for the starting shear (changing the shear will automatically set a keyframe)
3. Select the ending cell and change the shear for the drawing as needed:
   • Click and drag in the viewer to adjust the shear
   • Type a different value in the tool option bar to change the shear precisely
   • Click and drag on the icons in the tool option bar to change the shear values
   • Click on a lock icon to restrict the direction of the shear
   • Play your animation and make adjustments as necessary

1. Change the Animate tool to the applicable mode
2. On the right of the tool option bar, make sure "Global Key" is checked whenever you will be changing multiple values (ie. scale and rotation or skew and position)
3. Set a keyframe for the starting position/scale/rotation/shear
4. Change the position/scale/rotation/shear in as many middle cells as desired (the more space between keyframes, the longer the transition will take - if there is not enough room between transitions, the transition may be sudden or unequal)
5. Change the position/scale/rotation/shear in the ending cell
6. Play the animation in the Viewer and make changes or additions as necessary

1. In the Timeline (or Xsheet), click on the cell where you want the color transition to start
2. In the Level Palette, click on the color you will be changing
3. Click on the Level Palette's key icon (bottom left) to set the current color as a color keyframe
4. In the Timeline (or Xsheet), click on the cell where you want the color transition to end
5. In the Level Palette, click back on the color you will be changing
6. Click on the Level Palette's key icon (bottom)
7. In the Style Editor, change the color/style as desired
8. Play your animation to see the gradual change from one color to the next and change or add more color keys as desired
   1. Use the arrows next to the key icon to quickly toggle from key to key in the Level Palette
   2. With a key selected, changing that color/style in the Style Editor should update the key

Moving Keyframes

1. In the Timeline (or Xsheet), click directly on the keyframe you want to reposition so that it turns blue
2. Rlease the key icon before clicking again and dragging the keyframe to the desired new position
3. Hold down on Opt | Alt while dragging to replace one keyframe with another

Removing Keyframes

1. In the Timeline (or Xsheet), click on the cell with the keyframe you want to remove
2. Delete the key by:
   • Pressing the delete key if the key icon is selected/blue (fn+delete on macbooks)
   • Clicking on the key icon in the Viewer (it should turn grey when there is no longer a keyframe)
3. For color keyframes, use the arrow next to the key icon in the Level Palette to return to a color key and click on the key icon to remove it

In a new scene, spend 1 class period trying out as many of the above tweening techniques as possible. The goal is not to have a perfect, finished animation but instead to thoroughly explore and experiment with these forms of tweening.

Render your exercise at the end of the class period & add the render to the assignment in Classroom.

After 1 day on each tab, you can choose the techniques you prefer to make a longer, more polished animation.

The "StopMotion" room has a tab specifically for making and adjusting motion paths.This can be used to show a motion path overlaid atop the camera view of a connected Canon DSLR or webcam. In this case, the path can help plot out the movement of an object for stop motion techniques. It can also be used in combination with the Animate Tool for tweening.

1. Create a level of any type with a single drawing stretched out across a large number of cells
2. Draw your moving object in the very center (where the x is located)
   1. or use the Select tool to move the object to the center

   →

3. Switch to the "StopMotion" room
4. Add a motion path:
   1. Click on the "+" icon at the top left of the panel to add a new path (if the path panel is missing, just click on the Paths tab)
   2. At the top of the path panel, choose the Brush or Geometric tool
   3. Use the tool to create a custom path in the Viewer
   4. Redraw as needed to get a usable path
5. Make minor corrections to the path as needed:
   1. Click on the path and adjust the control points/handles with the "Control Point Editor"
   2. Click and drag on part of the path to adjust the line with the "Pinch Tool"
6. Connect the path to the layer(s) or etc. as needed:
   1. In the "FX" room , go to the "Stage Schematic" view (camera and table nodes should be visible - press the schematic toggle to change out of the "FX Schematic" view if neeeded)

      →

   2. Drag from the green half circle of the layer node to the green half circle of the path node
   3. Click on the layer node to return the focus to the layer
1. With the the Animate tool set to "Position", select the first cell
2. Move the object to the desired starting position and add a keyframe
3. In the cell where the transition should end, move the object to the ending position
4. Repeat for as many transitions as necessary

If you want the drawings to follow the same path exactly but with different paces or start/stop times:

1. Follow the steps above to create a motion path
2. In the FX room, make sure the "Stage Schematic" is active
3. Drag from the green socket of each layer node (that should follow the same motion path) and connect to the green socket of the motion path
4. Individually set position keyframes for each layer
5. If needed, use the "Animate" tool to change the "Center" of each drawing to add a little position offset

1. Create your drawings on their own columns - close to the center but at the distance the objects should be set apart
2. In the Stage Schematic, add a pegboard:
   1. Drag from the blue sockets of each desired column to the red socket of the pegboard
   2. Select the pegboard
   3. Click on the "new motion path" button
   4. With the motion path selected, draw a path and adjust as needed
   5. In the animate tool, select the pegboard (likely named "Peg1" and add keyframes as needed to animate the position and etc.
   6. Interesting effects can be made by keyframing a couple different positions for one or both layers separately from the pegboard (make sure the Animate tool has the desired layer selected instead of the pegboard)

The Level Strip panel can be used to make corrections to automatic inbetweening. The level strip shows the active level, and switches the Viewer to a level display mode. When the level strip is active, the rest of the scene is hidden. Select a cell in the Xsheet to return to the scene view.

In level mode, the Viewer displays transparent areas of an image with grey, or the viewer background color. Depending on your theme and drawing colors, you may find it helpful to change the viewer background color for better visibility. In "Preferences → Colors", change the "Viewer BG Color". Make sure that "Use the Current Theme's Viewer Background Colors" is unchecked.

1. Add a "Level Strip" panel (Panels → Level Strip)
2. Find the frame where the drawing error is at its worst
3. Use the Control Point Editor to correct the drawing error
4. Correct the inbetween frames going backwards:
   1. In the Level Strip, select the range of drawings starting at the corrected frame and ending at the last/previous frame where the drawing is correct:
      • Click and drag to select the range:
        1. Left-click to select a frame on either side of the the corrected drawing
        2. Click and drag from the corrected drawing to the closest previous frame that was correct (this should select the full range)
      • Or click to select the correct previous frame and hold down on shift when selecting the newly corrected frame
   2. Click on the grey "Inbetween" button on the right side of any frame
   3. Choose the interpolation style and then select "Inbetween"
5. Correct the inbetween frames going forwards:
   1. Select a new range of frames, starting at the corrected frame and ending with the next forwards frame where the drawing is correct
   2. Click on "Inbetween"
6. Scrub or play through the corrected animation
7. Repeat these steps to correct any other errors

In a new scene, spend 1 class period trying out as many of the above motion path techniques as possible. The goal is not to have a perfect, finished animation but instead to thoroughly explore and experiment with these forms of tweening.

Render your exercise at the end of the class period & add the render to the assignment in Classroom.

After 1 day on each tab, you can choose the techniques you prefer to make a longer, more polished animation.

Vector Guided Drawing works with onionskin to display the line order and direction of drawings in a single vector level (keep in mind Vector Guided Drawing is disabled while frame range is enabled for the vector brush).

1. Create a Vector level with the number of frames you would like the animation to last for (you can add additional frames later if necessary)
2. Draw your beginning object in the first frame of the new level
3. Turn on "Vector Guided Drawing":
   1. Right-click in the viewer and choosing "Vector Guided Drawing → Closest Drawings"
   2. In the same part of the context menu, adjust the interpolation as needed and turn on "Auto-Inbetween"
   
4. Add a fixed onion skin marker for the first drawing by clicking in the top edge of the Timeline above frame 1
5. Click on the frame for the key (the next major pose/position) - ie. frame 25
6. Draw the new pose/position of the object by drawing the lines in the same direction and order
   (or copy and paste your vector drawing from the starting frame into the ending frame and make adjustments with the vector tools)
   • The stroke to be drawn next always displays in purple with arrows showing the original stroke direction
   • A red arrow marks the start of the stroke
   • To undo a line, use the undo shortcut (Cmd+Z | Ctrl+Z) two times in a row (the first undo removes the auto-inbetween, the second removes the drawing on the current frame)
   
7. Play or scrub the animation occassionally to see how the strokes are automatically filled in between the 2 key positions
8. Remove the old onion skin marker by clicking on it (this prevents the auto-inbetween function from drawing lines multiple times)
9. Add a fixed onion skin marker for the latest keyframe/drawing
10. Switch to the frame for the next major pose and repeat the previous steps as needed
11. Turn off guided drawing in by right-clicking in the Viewer & then choose "Vector Guided Drawing → Off"

1. Create your drawings on their own columns - close to the center but at the distance the objects should be set apart
2. In the Stage Schematic, add a pegboard:
   1. Drag from the blue sockets of each desired column to the red socket of the pegboard
   2. Select the pegboard
   3. Click on the "new motion path" button
   4. With the motion path selected, draw a path and adjust as needed
   5. In the animate tool, select the pegboard (likely named "Peg1" and add keyframes as needed to animate the position and etc.
   6. Interesting effects can be made by keyframing a couple different positions for one or both layers separately from the pegboard (make sure the Animate tool has the desired layer selected instead of the pegboard)

The Level Strip panel can be used to make corrections to automatic inbetweening. The level strip shows the active level, and switches the Viewer to a level display mode. When the level strip is active, the rest of the scene is hidden. Select a cell in the Xsheet to return to the scene view.

In level mode, the Viewer displays transparent areas of an image with grey, or the viewer background color. Depending on your theme and drawing colors, you may find it helpful to change the viewer background color for better visibility. In "Preferences → Colors", change the "Viewer BG Color". Make sure that "Use the Current Theme's Viewer Background Colors" is unchecked.

1. Add a "Level Strip" panel (Panels → Level Strip)
2. Find the frame where the drawing error is at its worst
3. Use the Control Point Editor to correct the drawing error
4. Correct the inbetween frames going backwards:
   1. In the Level Strip, select the range of drawings starting at the corrected frame and ending at the last/previous frame where the drawing is correct:
      • Click and drag to select the range:
        1. Left-click to select a frame on either side of the the corrected drawing
        2. Click and drag from the corrected drawing to the closest previous frame that was correct (this should select the full range)
      • Or click to select the correct previous frame and hold down on shift when selecting the newly corrected frame
   2. Click on the grey "Inbetween" button on the right side of any frame
   3. Choose the interpolation style and then select "Inbetween"
5. Correct the inbetween frames going forwards:
   1. Select a new range of frames, starting at the corrected frame and ending with the next forwards frame where the drawing is correct
   2. Click on "Inbetween"
6. Scrub or play through the corrected animation
7. Repeat these steps to correct any other errors

In a new scene, spend 1 class period trying out the Inbetweener techniques. The goal is not to have a perfect, finished animation but instead to thoroughly explore and experiment with this form of tweening.

Render your exercise at the end of the class period & add the render to the assignment in Classroom.

After 1 day on each tab, you can choose the techniques you prefer to make a longer, more polished animation.

1. Create a Vector level with the number of frames you would like the animation to last (you can add additional frames later if necessary)
2. Select the brush tool and next to "Range", select the interpolation type (the kind of transition)
   1. Linear - steady transition
   2. Ease in - starts slow
   3. Ease out - ends slow
   4. Ease In/Ease Out - starts and ends slower than the middle
   
   
3. Adjust other brush tool options as needed:
   • Turn on auto-fill in the brush tool options, if making a closed shape with a solid color
   • Turn on auto-close if making a closed shape that will be filled with a different color
   • Leave auto-close turned off whenever drawing lines/strokes that are not a closed shape
   • Enable snapping (set to low) for better consistency (this makes the end of a stroke "snap" to strokes in close enough proximity)
4. Make sure the first frame of your drawing is selected in the X-sheet/Timeline
5. Draw your first line - it will turn red after the stroke is complete with a small "x" at the start of the stroke
6. Switch to the ending frame for the movement
7. Draw the ending position of the line, making sure to draw the line in the correct direction (a small x shows the start of the initial stroke)
8. Continue drawing your image, 1 line at a time - always starting in Frame 1 and then repeating the line in its new position in the ending frame (ie. Frame 50) - always keep track of your line direction
9. Repeat as necessary to create your desired movement
   

1. Select the Fill tool (F)
2. Check "Frame Range" in the Tool Option Bar
3. and make sure your fill color is created/selected in the Level Palette
4. In the first drawing, click in the closed shape you want to fill
5. In the last drawing, click on the closed shape you want to fill
6. Play your animation to see if there are any frames that still need to be filled
   
7. If necessary, use the Tape tool to close any gaps in unfilled shapes
   1. Make sure "Join Vectors" is checked
   2. If the type is set to "Normal":
      1. Choose the mode that applies best then click and drag to tape the gap closed
         1. "Endpoint to Endpoint" is best for connecting the ends of lines together
         2. "Endpoint to Line" can connect the end of a line to any point along a line
         3. Line to Line can connect any 2 points on a line or lines together
   3. If the type is set to rectangular:
      1. Click and drag around the gap to connect the 2 points
      2. If the connection is not perfect, try using CMD-Z to undo and try changing the "Distance" value before trying again
8. With "Frame Range" off, use the fill tool on the now closed shapes

1. To erase the same area across multiple frames:
   1. Use the "Eraser" tool (E) with the type set to rectangular (DO NOT use polyline or freehand) and check "Frame Range"
   2. On the first frame that you want to erase from, click and drag to select the area you want to erase
   3. On the last frame that you want to erase from, click and drag to select the area you want to erase
      
2. In order to redraw your entire frame range animation:
   1. Select the frames in the Level Strip (CMD-A selects all)
   2. Press the delete key to remove the drawings (or right-click → Delete)
   3. Draw your animation again, following the earlier directions
3. To add additional frames (if the transition was too short)
   1. Right-click in the Level Strip
   2. Select "Add Frames"
   3. Specify where you want the new frames to begin and end
   4. In the Timeline, double-click on each cell and type in the frame number so that the drawings will display when you are ready
   5. If necessary, click and drag to select the new frames and set the step to 2 by clicking on "2's" in the Command Bar.

In a new scene, spend 1 class period trying out the above frame range techniques. The goal is not to have a perfect, finished animation but instead to thoroughly explore and experiment with this form of tweening.

Render your exercise at the end of the class period & add the render to the assignment in Classroom.

After 1 day on each tab, you can choose the techniques you prefer to make a longer, more polished animation.

Loading a Different Scene as a Sub-Scene

1. In an empty column, right-click in the first cell (or wherever you want the Sub-Scene to load)
2. Select "Load Level"
3. In the "Scene" folder, select the scene you would like to load
4. Click on "Load" (if the scene is in another project, import the scene)

Creating a Sub-Scene from Levels in the Active Scene

1. Select the columns/layers for the sub-scene by clicking and dragging across the column/layer headers
2. In the Command Bar, click on the collapse button

Entering a Sub-Scene

1. Select the sub-scene layer (click in the header or on the layer's dragbar)
2. Press the "enter" button in the Command Bar (or right-click and select "Enter Sub-Scene")

Exiting a Sub-Scene

1. Select the sub-scene column/layer (click in the header or on the layer's dragbar)
2. Press the "Exit" button in the Command Bar (or right-click and select "Exit Sub-Scene")

Edit in Place

1. Select the sub-scene layer (click in the header or on the layer's dragbar)
2. Enter the sub-scene
3. Press the "Edit in Place" button in the Command Bar (or right-click and select "Edit in Place")
4. Make changes to the drawings, levels, and layers as desired
5. Press the "Edit in Place" button again to see just the sub-scene (if needed)
6. Press the "Close Sub-Scene" button again to exit

Sub-scenes can be manipulated like any other level type in the Timeline. Frames can be moved, stretched, keyframed, repeated, copied, cut, pasted, and deleted. These changes impact the display of all of the layers inside of the sub-scene.

1. Speed Up a Sub-Scene:
   1. Select the frames to speed up (either click on the grab bar to select the whole level or click and drag across the cells)
   2. Right-click on a cell to open the context menu
   3. Under "Each", choose an option to display only every 2nd, 3rd, or 4th frames
2. Slow Down a Sub-Scene:
   1. Select the frames to slow down (either click on the grab bar to select the whole level or click and drag across the cells)
   2. Click on "2's" or "3's" in the command bar
   3. Or right-click on a cell and use the "Step" options
3. Repeat Sub-Scene frames:
   1. Select the frames to repeat (either click on the grab bar to select the whole level or click and drag across the cells)
   2. Right-click on a cell to open the context menu
   3. Under "Edit Cell Numbers" choose "Repeat"
   4. Or click on the repeat button in the command bar
   5. Choose the number of times to repeat - or the frame number to repeat up to
4. Reverse Selected Sub-Scene frames:
   1. Select the frames to reverse (either click on the grab bar to select the whole level or click and drag across the cells)
   2. Right-click on a cell to open the context menu
   3. Under "Edit Cell Numbers" choose "Reverse"
5. Swap out Sub-scene frames:
   1. Select a cell (or group of cells) in the Timeline
   2. Press W to slide the selection forwards
   3. Press Q to slide the selection backwards
   4. Or double-click on the cell and type a new frame number and press enter

Sub-scenes can also be tweened with the animate tool to add great secondary motion to character/object. This works best for sub-scenes that hold a character/object that is moving in place - ie. a propellor rotating, wings flapping, walking in place or etc.

In a new scene, spend 1 class period trying creating and tweening at least 1 sub-scene. The goal is not to have a perfect, finished animation but instead to thoroughly explore and experiment with this technique.

Render your exercise at the end of the class period & add the render to the assignment in Classroom and submit the assignment.

You will have about the next 2 weeks to choose the techniques you prefer to make a longer, more polished animation.