A quick look at Inverse Kinematics (I.K.)

This is a demo of what I.K. looks like in ANIMATE using one of our "Karaokean" characters. This mode of animation is useful for arms and legs or where joints play a big part in movement. It is almost as if your 2D character were a 3D-puppet.

Intro to Inverse Kinematics

On Vimeo, Justin of CartoonSmart.com has posted some very detailed video tutorials on using a combination of "Inverse Kinematics" and "Forward Kinematics" (aka the "normal" way with Transform Tool)  to animate a walk cycle. Check out the tutorials HERE and HERE.

ROCQUITA: work in progress, notes on Layer organization

Sharing a capture of the ANIMATE workspace as I animate the characters in this scene.
CLICK HERE TO SEE THIS BIGGER

Notice that each character has their own single Master PEG layer on the main timeline. It took me a while to get my head around what Peg layers are and do because this feature is unique to ToonBoom and doesn't exist in Flash. In Flash, we tend to organize body parts in symbols within symbols within symbols and there is a lot of double-clicking deep into symbols within symbols to do what we need to do.

ANIMATE favors organization on parent-child layers that are all visible and accessible on the main timeline.

In a nutshell, a Peg layer is like a "controlling layer" under which all the layers of a character are registered. The Peg layer is expandable and collapsible.

Here is the Indigo Master Peg layer expanded:



CLICK HERE TO SEE THIS BIGGER

In ANIMATE, Keyframes are represented by black dots on the timeline and these can be Motion Keyframes (tweening, as represented by arrow on the timeline) or Stop Motion Keyframes (no tweening).

Interesting distinction: In Flash we MUST add a keyframe on the timeline to change a drawing from one frame to the next.

In Animate, it depends on how the drawing is being changed. If the drawing is to be repositioned, scaled, rotated etc. from one frame to the next, then we need to insert keyframes. If the drawing is to be replaced by a different drawing or an edited version, there is no need to add a keyframe. We use the "Drawing Substitution Window" OR > "Duplicate Drawings" to create an edited version. In the timeline screengrab above, the vertical lines separating the grey frames show where there are "drawing substitutions". I am still getting used to this concept.

*When the "Animate mode" button is enabled , ANIMATE will automatically insert keyframes on the timeline where needed... this is a timesaver!! And the beauty of having a Master Peg layer is that if you move something on one layer, all the other layers remain linked/registered.

Tip: If I want to edit a drawing and not be distracted by other drawings/layers or don't want to accidentally select something on another layer, this button above the timeline will hide ALL layers except the one that I am currently working on.

We are learning new things each day and as with learning any new program, it will take a little while before we settle on a working system or pipeline that feels right for us.

Painting with Texture, Drawing with Invisible strokes

Before vector animation hit the scene, back in the "traditional animation" days we created character color palettes in Animo (remember Animo?) We LOVE that there are character color palettes in ToonBoom ANIMATE!

A screengrab below shows that you can name the swatches and if you edit one color, then all drawings of that item painted with that color will change accordingly. There is also no confusion which color goes where. Color palettes are saved in a Palette library external to this file so you can easily share palettes with other artists.

I had actually created Rocquita color palettes in Toonboom DIGITAL PRO last year and imported them into this ANIMATE file.

Here are some screengrabs showing the Import Texture/Painting with Texture feature in Color Palettes.



To import a texture into the palette (In my case, it's the pattern of "stars" on Rocquita's tights), I generated a PSD file. I had already drawn this pattern in Flash so I exported the image to .bmp and saved as a .psd in Photoshop. I was originally going to create a "Mask" layer for every Leg drawing and add the stars this way, but it seemed like way too much work. This is so much more convenient! :)

Below is another example with our character Indigo, who wears a dark blue leopard print suit.

First the PSD file of the "leopard print"



I imported the PSD into my Palette and it generate a swatch which I renamed "indi suit print". Then painted the character as normal.



The texture fill naturally conforms to the shape that needs to be filled. So if you have a teeny weeny shape, you'll get teeny weeny leopard prints. If you have a large shape, the pattern increases in size... which was NOT what I wanted ... At first, the leopard print shape on Indigo's long pants were massive...



CLICK HERE TO SEE THIS LARGER

What's cool is that ANIMATE lets us edit the texture (scale, skew, rotate etc.) and then we can save the transformation to keep it consistent whenever we paint it.

Before you fill an area, click on the Enable/Disable Saved Texture button (I think this is what it's called) in the Paint Properties window. When Enabled is on, you get a consistent-looking pattern or texture regardless of what size the fill area is.

The screengrab above shows two sizes of leopard print - the top shape is using my Saved Texture size (same as Indigo's suit). The larger bottom shape has the feature disabled so the leopard print fill is much larger.

Drawing with invisible strokes

Our characters have no outlines and painting both strokes and fill areas is quite time-consuming. ANIMATE has a "flatten" tool feature so that you can merge outlines and fills that are the same color... but still.... you have to paint both first...

I was thrilled to learn recently that I can draw with "invisible strokes" in ANIMATE so I did this with my construction of Indigo. To draw with invisible strokes, create a Pencil tool setting with 0 width. In this case I was drawing with the Line and Contour Editor tools and I enabled the "Display Strokes" setting (keyboard shortcut = D) so that I could see my strokes.



CLICK HERE TO SEE THIS LARGER

I wish I had drawn Rocquita and Joe 101 this way (instead of using the Brush tool). Or maybe I could convert those brush strokes to pencil lines (I have yet to try this ANIMATE feature) to have more control over curves...

JOE 101 - contd.

I have so far, created a 5 point turnaround for our Joe 101 character (will add more poses later). All the body parts are Symbols - indicated by the blue-colored film-strip-style frames. Here is a short video of the turn:

Simple turnaround/Character rigging in ToonBoom Animate

And then, a simple walk:

Joe 101:  3/4 WALK

Inside Joe's head - Z AXIS demo

Here I am rigging JOE 101 (Character from ROCQUITA).... trying out a different procedure here from the previous character.

I created the linework in Flash and imported the SWFs into Animate. I had "grouped" the body parts in Flash and what's cool is that they remain grouped when imported into Animate. Which makes it easier to assign them to separate layers. (Less painstaking than "cutting out" parts from a drawing)

In Animate, I painted and symbolized the body parts. Notice that the headphones, arms, legs... are Symbols which are identified by blue-colored cells in the main timeline. Below is a screengrab of inside Joe 101's HEAD Symbol.



In the video below, a demo of Toonboom's Z AXIS (forward <--> behind) in relation to character design and rigging.

Toonboom Animate: Z-AXIS demo

How to shift something backwards or forwards on the Z Axis:

1. Insert a keyframe for where the Drawing or Symbol is.
   
2. Select the Layer
   
3. Click on both these tools (lower left of toolbar) - the ANIMATE tool (little person in yellow circle) and the TRANSFORM tool (square thing right below it). These will put you in "Animation Mode".
   
4. Make sure that the Layer is still selected.
   
5. Click on the Layer Properties tab up top right - this will show you the X, Y, and Z Axis options. Click on the little button on the right side of the Z Axis line.
   
6. Drag the cursor thing up and down according to Frame position.
   Dragging UP = "F" value = forward; Dragging DOWN = "B" value = backwards.
   
7. Click on Camera View tab to see changes.
   

Eddie: It's the same principle with creating a Multiplane Camera.

Designing and rigging ROCQUITA

Rigging ROCQUITA

I am following the exact steps in the ToonBoom Kickstart Tutorials (downloaded from the website), which are basically as follows:

1. Draw character turnarounds, 1 pose per frame in the timeline. In this case, 4 poses.
2. Paint character - create a palette
3. Cut out parts of the character and assign to separate layers, doing this one pose at a time. *interestingly, in Flash we usually symbolize first, then "Distribute to layers". Here, it is suggested that you distribute first, before Symbolizing. Why? I think because Toonboom's Symbols are not free-floating objects. ToonBoom Symbols are registered to the stage/camera....
4. Fix articulations and gaps  in each cut-out part (Eraser, brush tools)
5. Then go back and do steps 2 to 4 for all the other turnaround poses. Assign parts to the layers that you have set up... Cutter tool & F9
6. Drag each layer to the SYMBOLS directory in the Library. 
7. Delete everything on the current timeline, and drag the Symbols out of the Library onto stage. Because the Symbols were registered to the stage to begin with, they will all appear in their correct positions. 
8. Set Symbol pivots. eg, Hand to arm, arm to shoulder, etc.
9. Set heirarchies (see pic above) 
10. Select all layers and frames and drag to Library  - the rigged character will be stored as a .tpl (= template) and can be reused in any scene.

This is as much as I have done so far...

An interesting observation:

ToonBoom Animate has a z-axis in addition to x and y axes. When a character turns and the other arm goes BEHIND the body... instead of creating a new layer UNDER the body... you can keep the other arm on its same layer but change it's Z-AXIS position so that the arm goes under the body. This is really cool.