Learn to Animate

Advanced Techniques

Here are a few new and advanced techniques for Animation II.
  • The virtual "camera" has 3 different views, which can be accessed at the top of the viewer:
    1. The default "Camerastand View" Camerastand view button image is missing - like looking straight down at a physical animation stand with the table and assets visible
    2. The "3D View" 3D camera view button image is missing allows the levels to be looked at and worked with in 3d dimensions
    3. The "Camera View" Camera view button image is missing reveals only what is in view of the camera
      • When the camera view is active, the little arrow opens an opacity dial for the viewer background - to show or hide areas outside of the camera view Camera view button image is missing
  • The boundaries of the camera are displayed with a red dashed outline and a small X in the center
  • A "sub-camera" can be set up to see a smaller preview area inside the camera view, to show what the FX look like, while needing less processing power:
    1. In the Viewer controls menu, check: "Define Sub-Camera"
    2. Press the "Define Dub-Camera" button in the viewer controls then click and drag to select an area in the viewer
    3. Turn off the "Define Dub-Camera" button after selecting the preferred sub-view
    4. Turn on the "Sub-Camera Preview" button Sub camera preview image is missing
  • "Safe area" Safe area button image is missing boundaries can also be enabled (outside of the safe area, parts of the animation are more likely to be cut off on some screens or non-HD broadcasts). The safe area displays inside of the camera area, also with a red dashed outline: Safe area boundaries image is missing
    • Action safe - up to the outside boundary
    • Title safe - up to the inside boundary
  • A preview mode can be enabled for the camera Preview on image is missing or for the sub-camera Sub-camera preview on image is missing (if it exists). This shows you exactly what the render will look like with fx applied and without animation aids (such as bones or nodes) visible. It is always a good idea to save all before enabling preview
  • The camera settings can be accessed by double clicking on the camera in the "Stage Schematic" or through the menu under "Scene → Camera Settings"
    • Each camera can ber given a name
    • The camera size aspect ratio is always unlocked
    • You can resize the camera to fit the active level by choosing "Use Current Level Settings"
    • A variety of presets are available for common screen sizes Camera view button image is missing
Cameras can easily be added or removed in the Stage Schematic.
  • Add a camera:
    1. Click on the camera icon in the Schematic's bottom right menubar Add camera button image is missing
    2. or right-click in the Schematic & choose "New Camera" Add camera from context menu image is missing
  • Remove an inactive* camera:
    1. In the "Stage Schematic" select the inactive camera and press "delete" (on Mac keyboards with a compact keyboard, press fn+delete)
    2. or right-click on the camera and choose "Delete"
*if you want to delete an active camera, make another camera active first
  • To change the active camera for the viewer:
    • In the Timeline:
      1. Click on the settings dropdown in the camera layer header
      2. Click on a camera to activate it Camera activation mage is missing
    • In the Stage Schematic:
      1. Right-click on the inactive camera in the Stage Schematic
      2. Select "Activate" Camera activation mage is missing
  • To change the camera that is active for the render:
    1. Go to the output settings (File → Output Settings)
    2. In the camera dropdown, select the camera of your choice
    3. Render
You can set your camera to follow another level's movement. This is only effective if the camera size is smaller than the dimensions of the background level(s).
  1. Create and draw your background level(s) and a separate character/object level
  2. If the background level is the same size of the camera, you may want to shrink the camera (either with the "Animate Tool" (A) set to scale, or through the camera settings)
  3. In the "Stage Schematic", click and drag from the blue socket of the camera node to the red socket of the character/object node
  4. Change the position of the character/object using the "Animate Tool" (A) to create a tween and the camera will follow the character/object
  5. Using motion paths and sub-scenes (for repeating movement - ie. a walk cycle) can be especially effective with this technique
It's a common trick in animation to leave a character or object stationary and move the background instead to create the illusion that the camera is tracking a character/object that is traveling through an environment.
  1. Create your background level and set the width (for horizontal panning) or the height (for vertical panning) to be larger than the same dimension of the camera - going about twice the size of the camera width (horizontal panning) or camera height (vertical panning) is recommended as a starting point
    • If you need to resize an existing raster/toonz raster level:
      1. Click on a frame in the level
      2. In the program menu, go to "Level → Canvas Size"
      3. Click in the anchor area to choose where the extra space will be added (if left in the center, extra space will be added equally on each side)
      4. Change the width or height values as needed
      5. Select "Resize"
    • Vector levels are not limited by any size - draw out of view of the camera and the frame will be extended - though you can use the "Select Tool" (S) to increase the size of any drawings if necessary
  2. Draw your background level(s) as desired
  3. Create, draw your character/object levels using the methods of your choice
  4. Animate your character/object using the methods of your choice to create a walking/running/hovering in place effect
  5. Use the "Antimate Tool" (A) and create a position tween for your background level
  6. Play throught the animation and make adjustments if necessary
By using the 3D camera and the 3rd (z) axis, we can create a subtle 3D effect when simultaneously zooming and panning.
  1. Create at least 4 separate background levels (ie. foreground, midground, background, sky)
    • When drawing the levels, make sure to leave overlapping edges - ie. draw all the way to the bottom
    • Use highlights and shadows to create some dimensionality
  2. Set up the workspace:
    1. Add a second Viewer into the "Draw n Paint" room - to the side of the original Viewer
    2. Change the view of one Viewer to the camera view and the other to the 3D view 3D camera view button image is missing
      1. To pan in the 3d viewer, press the space key
      2. To rotate the view, press CMD+space
  3. In the first frame for each level, set a different "Z" value using the "Animate" Tool set to "position" - you can just type the value in the tool option bar
    1. For the sky level, something around 120 fld
    2. For the background level, something around 100 fld
    3. For the midground level, something around 70 fld
    4. For the foreground level, something around 40 fld
  4. Also set the value next to the Z value (in parentheses) to the same number as Z for each level
  5. With the animate tool still active, change from having a column active, to selecting the camera (either in the dropdown on the right of the tool option bar or in the schematic)
  6. Add position and scale keyframes to zoom in as you pan from one side to the other

Special FX (short for Special Effects) are usually intended for the post-processing stage of an animation - after drawing/coloring/animating/sound is completed but before the final rendering. A large variety of FX can be added to a single level or multiple levels as needed in the FX Schematic Window.

  1. Adding FX
    1. Through the FX Browser:
      1. Click on the "FX Browser" button in the bottom right of the FX Schematic and
      2. Navigate through the folders to choose the FX of your choice
      3. With the FX selected, click on "Add"
      4. Close the FX Browser when no longer needed by clicking on the red x in the top left corner
    2. Through the context menu:
      1. Right-click on the grey background of the FX Schematic
      2. Hover over "Add FX" and navigate through the menu to choose an FX
      3. Click on an FX to add it to the Schematic
  2. Inserting FX
    1. Select a column/node that you would like to apply an fx to (or click on the connection between 2 nodes)
    2. Through the FX Browser:
      1. Click on the "FX Browser" button in the bottom right of the FX Schematic and
      2. Navigate through the folders to choose the FX of your choice
      3. With the FX selected, click on "Insert"
    3. Through the context menu:
      1. Right-click on the grey background of the FX Schematic
      2. Hover over "Insert FX" and navigate through the menu to choose an FX
      3. Click on an FX to add it to the Schematic
  3. Replacing FX
    1. Through the FX Browser
      1. Select an FX node that you want to replace
      2. Click on the "FX Browser" button in the bottom right of the FX Schematic and
      3. Navigate through the folders to choose the new FX
      4. With that new FX selected, click on "Replace"
    2. Through the context menu
      1. Right-click on the fx node you would like to replace
      2. Hover over "Replace FX" and navigate through the menu to choose a new FX
      3. Click on that new FX to replace the old one
  4. Removing FX
    1. Click the FX node to select it and:
      • Press the "Delete" key (or FN+Delete on a compact Mac keyboard)
      • Or right-click on the node and select "Delete"
  5. Using the same FX for multiple levels
    • Copy (CMD-C) and Paste (CMD-V) the FX and connect as necessary between the Scene node and other column nodes
    • Or place an "Over FX" node between the column nodes and the other FX node(keep in mind the Over FX can change the stacking order of your columns - lower source numbers display in front of higher source numbers)
  6. Reordering columns linked to an FX
    1. Click and drag from the socket of a column (connected in the wrong place) to the socket you want that column connected to

Chroma Keys allow you to remove a specific color and replace it with transparency. This technique is commonly done when using a "green screen", but could be used to remove any color.

  1. In the FX Schematic, right-click on the connection between the column with the unwanted color and the Scene
  2. Select "Insert FX" → "Matte" → "RGB Key"
  3. Save All (CMD-S)
  4. Turn on preview in the top right of the Viewer
  5. Double-click on the RGB Key node to open the settings
  6. Double-click on the color square
  7. Use the RGB Color Picker RGB color picker image is missing to select the color to be removed
  8. Close out of the color wheel and reopen the FX settings
  9. Change the values of the "Red range", Green range" and "Blue range" to the same value as the equivalent setting along the top
  10. Make adjustments as necessary
Chroma key gif is missing

Fading in and out can be done in several ways using several FX nodes, depending on the necessary impact. If fading to/from black, adding a "Color Card" background FX (Add FX → Background → Color Card) can save a little time - though it is only visible during preview/render.

  1. Fading in:
    1. Add a "RBGA Cut" FX (Image_Adjust → RGBA Cut) between the column node (either a single column or a sub-Scene node that contains any required columns) and the Scene Fade nodes setup image is missing
    2. Save All (CMD-S)
    3. In the RBGA Cut FX settings:
      1. Expand the "Swatch Viewer" at the bottom and resize the window as necessary
      2. Turn on the preview icon at the bottom of the Swatch Viewer then scroll as necessary to find your image
      3. Set your initial keyframe to start the transition
        1. Make sure the frame number in the bottom right of the Swatch Viewer is the same frame number where the transition should begin in the Timeline Swatch Viewer setup image is missing
        2. Change the right "Alpha" value to 0 and press the key icon next to Alpha Transparent keyframe for fading image is missing
      4. Set the ending keyframe to complete the transition:
        1. Change the frame number in the Swatch Viewer to the frame number where the transition should end and press enter
        2. Change the right "Alpha" value back to 255 and press the key icon next to Alpha Opaque keyframe for fading image is missing
      5. Close out of the settings window and Save All (CMD_S)
      6. Preview your animation (CMD_R) ad make adjustments as necessary
  2. Fading out:
    1. Follow the same directions as above but change the Alpha keyframe values to:
      1. 255 for the start of the transition Opaque keyframe for fading image is missing
      2. 0 for the end of the transition Transparent keyframe for fading image is missing
  3. Fading between any 2 columns:
    1. Fading from black into an animation or between one cut to another requires 2 columns:
      • Place the levels so that they are overlapping in the Timeline for the length of the transition
      • The starting level should be placed behind the ending level (ie. left/below)
    2. Add a "RBGA Cut" FX between the ending column node and the Scene (Image_Adjust → RGBA Cut) Fade nodes setup image is missing
    3. Save All (CMD-S)
    4. Set keyframes just as you would for the above "Fade In" effect:
      1. Add a keyframe for Alpha set to 0 for the start of the transition Transparent keyframe for fading image is missing
      2. Add a keyframe for Alpha set to 255 for the end of the transition Opaque keyframe for fading image is missing

Matte FX's allow you to matte (also called mask) areas on one column by using a separate column. This allows display of one level to be limited to the area inside or outside of the other level's boundaries. Combining Matte FX's with other FX or animation techniques opens up a huge range of possibilities! The FX can be used to create the illusion that a character is passing behind an object in the background. It could be used to gradually reveal or hide text. In can gradually reveal a trail left behind as a vehicle moves.

  1. Create a level to use as a mask:
    • Vector levels can be really useful as mattes since they are so easily adjusted
    • Make sure the drawing(s) are filled with an opaque color
  2. Select the column that will be partially visible
  3. In the FX schematic, insert a Matte FX
    • Preview showing Matte In FX image is missing Matte In FX (Insert FX → Matte → Matte In) to show only what is inside the boundaries of the mask level
    • Preview showing Matte Out FX image is missing Matte Out FX (Insert FX → Matte → Matte Out) to show only what is outside the boundaries of the mask level
    • Preview showing Matte In FX image is missing Visible Matte In FX (Insert FX → Matte → Visible Matte In) to show only what is inside the boundaries of the mask level and will also show the mask level in any transparent/trnaslucent areas at the same time
  4. Connect the mask column's node to either the "source" or "down" port for the Matte FX node (make sure it is only connected to the Matte FX - not the Scene) Preview showing Matte In FX image is missing
  5. Save-All and enable Preview to see the Matte FX
  6. Make adjustments as necessary

The sandwich technique is a classic cut-out animation technique where you stack multiple images together in order to hide the joints/seams. While some artists do this by using additional levels, we can get the same effect with a combination of the Over, Palette Filter, and Erode/Dilate nodes. This can get quite complicated, so it's a great place to make/use a macro FX. This technique is specific to vector levels.

Sandwich effect preview image is missing
  1. Insert a "Palette Filter" node (Insert FX → Toonz_Level → Palette Filter) between your top level and the Scene node
  2. Insert an "Erode/Dilate" node (Insert FX → Matte → Erode/Dilate) between the Palette Filter node and the Scene node
  3. Add an "Over" node (Add FX → Layer Blending → Over)
  4. Connect the levels to the Over node in the order that they should overlap (higher = in front, lower = behind)
    1. The Erode/Dilate node should connect higher up
    2. The other overlapping level for the joint should be connected to the Over node after the Erode/Dolate connection
    3. The original overlapping level should be connected a second time to the Over node after the second overlappng level
    4. Other levels should be connected based on their needed stacking order
    5. Remove extra connections to the Scene node (Delete or CMD-X)
    Sandwich effect nodes image is missing
  5. Save-All (CMD-S)
  6. Adjust the FX Settings:
    1. For the Palette Filter:
      1. The numbers refer to the style numbers in the Level Palette (bottom right corner of each style thumnail) Index number placement image is missing - adjust as necessary for the styles you are targeting
      2. Set "Apply to" to "Areas(Delete All Lines)"
      3. Set "Action" to "Keep"
      Palette Filter settings image is missing
    2. For Erode/Dilate:
      1. Set the numeric value to a negative number (this shrinks the fill area slightly so that the outline looks the same as the other levels)
      Palette Filter settings image is missing
  7. Save All (CMD-S) and enable preview
  8. Make adjustsments and repeat as necessary for other areas of overlap

In Tahoma2D, using the "Type Tool" creates artistic text that is no longer editable as text after leaving the type tool. It works well for artistic effects and titles but not as well for large areas of text. The "Text Iwa" FX (Iwa is short for the creator's name) allows text to be editable at any time but like all FX is only visible during render/preview.

For text that changes from frame to frame (ie. subtitles), add a Note Level (Scene → New Note Level). With a Note level, you can double-click on empty note cells to type text where needed. These cells can be moved/reorganized/stretched like you would in a drawing level.

  1. Click on the frame number in the Timeline where the text should begin displaying (for text that changes from frame to frame - this should be in a column directly next to your note column)
  2. In the FX Schematic, right-click and add a "Text Iwa" node (Add FX → Render → Text Iwa)
  3. Open the settings for the FX:
    1. Add your text by either:
      1. Typing your text in the text field or
      2. Changing the "Source" to a "Nearby Note Column" (this uses a Note column as the source if it is directly next to the Text Iwa column)
        • If the note column is not directly next to the FX column, use "Specified Note Column" as the source instead
        • For "Specified Note Column" as the source, set the Note level's column number as the "Column Index"
    2. Set alignment, font, and color choices as needed - note many of the settings can be keyframed
    3. Width and height mark the boundaries of the text box - these can also be manually adjusted by pulling on the square corners of the blue text box outline if the Text Iwa node is actively selected
    4. The text box can also be animated with the Animate tool if the Text Iwa node is actively selected
  4. Close the settings and Save All (CMD-S)
  5. Adjust the length or position of the Text Iwa FX in the Timeline if needed just as any other level (it will end at frame 200 by default)
  6. See your text with preview on
  7. Make adjustments as needed

Macros allow you to compress multiple FX nodes into a single node. A macro node allows all of the settings for the individual nodes to be accessed on separate tabs. It can be saved as a preset for use in other scenes or projects. Macros can also be shared with other animators.

More information to follow.

Create an original animation (or series of short animations) that includes the following:
  • Camerawork:
    • The camera following an object/character (or the illusion that the camera is following an object/character)
    • 3D panning
  • Multiple FX:
    • A matte FX
    • Particles
    • A minimum of 1 other FX