Reorganizing my Workspace for Character Design

ANIMATE comes with a few default workspace layouts but when I am designing or drawing a character using imported bitmaps or jpegs, the imported images only show up in Camera View, not the Drawing View.

Yes, it is possible to vectorize images into Symbols, then expand the Symbols to make them visible in the Drawing View (this is if you want to trace your scanned artwork) but if I only wish to use my imported jpegs as visual reference while I am designing or drawing, then it makes no sense to vectorize them.

Francisco from ToonBoom offered a cool little tip - We can rearrange the modules so that both the Drawing and Camera Views are positioned side by side and visible at the same time.

This is a great idea for Character Designing: I can draw in one window (Drawing View), and refer to the imported jpeg in the adjacent window (Camera View).

*As we can't publicly display some of our work due to confidentiality agreements, this pic below is something I whipped up quickly for the purpose of this blog post.

I imported the "Character Lineup" .jpeg which is what you see in the Camera View on the right, and represented as a Symbol in the timeline below. I do my rough drawing on the left in the Drawing View, which will then be cleaned up and colored. Note that the Drawing layer on the timeline is "hidden"/disabled so that it doesn't show up in the Camera View. I have the Lightbox enabled so that I can still see it in the Drawing View.



Note also that I have shifted the Tool Properties, Color and Library modules over to the left side next to the Tool bar - this is just a personal preference.

To move modules around, grab the tab and drop it wherever you want it to go.

• If you drop it ON TOP OF another tab, you will be able to toggle between these tabs in the same module.
• If you drop your tab ON ONE SIDE of another tab, then you will have separately-docked modules.
  
• If you drop your tab anywhere else, it becomes a free floating module.
  

I don't know about anyone else, but the process of painting in ToonBoom Animate with Windows Vista O/S is still slow as hell. When I am choosing colors using the Color wheels, the program hangs and sometimes crashes. Solution: Disable Anti-aliasing in Open GL properties when working with color.

I like my new workspace for character designing. When animating, I would switch back to the Default/Animation workspace.

UPDATE: Here is a screencap video

Record your screencast online

Or click HERE.

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...

Flash vs Animate: SYMBOLS

In ANIMATE, Symbols do pretty much the same thing as what they do in Flash, but there are some differences.

Here are the similarities:

In both FLASH and ANIMATE, Symbols are like containers that live in the Library and can be dragged out and reused. They have their own internal timelines and nested layers. You can have Symbols within Symbols. Symbols are important if you intend to use motion tweening or effect changes to a drawing over time. To edit a Symbol, double-click on it to be taken inside the Symbol. All instances will be edited too.

Off the top of my head, here are the main differences that I have noticed so far:

In FLASH: Symbols can be easily swapped out for other symbols. (select > properties >swap)
In ANIMATE: Symbols cannot be easily swapped for other symbols. You have to delete a symbol from the timeline and drag out the other symbol from the Library.

In FLASH: Symbols can be reused across different Scenes.
In ANIMATE, each file is ONE Scene (no multiple scenes per file) and the Symbols only exist in that scene and cannot be accessed from any other scene. If you want to reuse a drawing for another scene, you have to save it as a Template (.tpl) - which can contain Symbols. If you create a bunch of Symbols in one scene, save them in a .tpl and drag that .tpl out into another Scene, you can then access those Symbols, however.... ANIMATE will make a copies of those symbols in the Library. This can be useful or confusing.... like finding multiple identical copies of a Symbol in your Library....

Question: Is it safe to delete duplicates in the Animation Library? Will my other scenes will be affected?

In FLASH: When you convert a drawing on the stage to a Symbol, it appears in the Library becomes a Symbol right there and then. To convert several frames/layers to a Symbol you have to "Create New Symbol" and copy/paste those frames into the new empty Symbol and then make sure the Symbol is in the correct position on stage. There are different ways to do this.
In ANIMATE: Life is much much easier!!!! You can drag anything (one drawing or multiple frames/layers) from the timeline into the Symbol Library to Symbolize. One difference though is that the drawings and layers in your timeline don't get Symbolized right there and then. You have to delete what's on your timeline, and drag the Symbol out of the Library onto the timeline. Notice that the drawings automatically appear in the same position where they were created.

In FLASH: When you "break apart" a symbol, it becomes a Drawing Object. If you have multiple layers in your symbol, they all appear on the same layer when broken apart. You lose your symbol's timeline too.
In ANIMATE: When you "expand" a symbol, the internal layers and drawings are expanded on the timeline underneath the original symbol, with timeline intact!

In FLASH: Symbols can be positioned anywhere on the stage, with pivot points that you can edit knowing that other instances won't be affected.
In ANIMATE: Every symbol is registered to the position on the stage where it was created. This is useful when you are rigging a character and want body parts to always have the same placement to each other. It's not so useful if you accidentally move a symbol (without creating a keyframe) which could screw up your animation. All instances will shift out of place.

In FLASH: Instances of Symbols can be modified by the same tools that you use to modify all drawings. Scale, Skew, Flip ... you can also change Alpha and Tint.
In ANIMATE, Symbols are not visible in the program's Drawing View, only in the Camera View. This is kinda frustrating when you are constructing a character and want to use Symbols. (In the manual they suggest that you do ALL your drawing first, before converting to Symbols.. but this isn't really feasible to me.) To modify or move a symbol on specific frame, insert a keyframe on the timeline. With no keyframe, you will risk modifying the source symbol and all other instances of it on stage. (I learned this the hard way!) Similarly if you want to move the Symbol's pivot point for one frame, make sure you insert a keyframe first.

In FLASH: there are Graphic Symbols and Movie Clip Symbols. By default, these all "loop" when played.
In ANIMATE: All Symbols behave more like Flash's Movie Clips. They have their own layer (nothing else can exist on a Symbol's layer). They don't loop. You have to copy cells from the timeline and "Paste Cycle" to create the loops.

In FLASH: Using Symbols is efficient practice and keeps your file size down.
In ANIMATE: File size isn't affected whether you use Symbols or Drawings. Via this forum thread: "you can call back drawings that were previously made and this won't create anything new in the file structure (basically it will simply call an existing drawing regardless of it being in a symbol or not)."

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.