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.

Flash vs Animate: PIVOTS

Pivots in ANIMATE are a little more complicated than they are in FLASH. In Flash, when you edit a Symbol pivot in order to reset a rotation/scale point, you enter the Symbol, select the pivot and drag it into place, and that's pretty much all there is to it.

It took a lot of trial and error (and I had to re-do a lot of messed up animation) for me to realize that there are "Pivot settings" in ANIMATE to pay attention to. Not only this, there are Drawing Pivots, Symbol Pivots and Peg Pivots and with Symbol Pivots, there are two levels of editing involved.

1. To reset the Symbol Pivot (for rotation/scaling) when you drag a Symbol's pivot to a new position in the Camera View, this is only a temporary change that applies to that one action. The pivot doesn't actually change position. It's still there.To set a new permanent Symbol pivot, click on the Pivot Tool in the left-side toolbar first, before dragging that pivot. All instances will now have the new pivot position. *This is done on the top level, not inside the Symbol.

2. You can also reset the Drawing Pivots inside the Symbol. These pivots are not linked to the Symbol Pivot unless if you Copy Pivot to Parent Symbol after editing each pivot. Note that your Drawing Pivot and Symbol Pivot will now be the same, and I find it less confusing to work this way especially when I need to add new drawings to my Symbol.




When editing pivots inside the Symbol, note the Set Pivot For All Frames option. If this is enabled, your new pivot will apply to the entire layer of drawings inside the Symbol. If you disable this first, each drawing can have its own pivot position. This is important when the drawings (eg, hands or legs) inside a Symbol are positioned all over the place and they don't share the same pivot position.

And then using the Library Drawing Substitution Feature, when I swap between different drawings, even though they are not drawn registered together, when I am in the Top Level/Camera View, they will appear registered in the right place.

A little word of warning: If a Symbol's pivot point is reset, all CHILD SYMBOLS attached to this Symbol will also be affected.

I hope this makes sense...

Any tips? Questions? Solutions? Please share!

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.

Keyboard shortcuts and Sticky Keys

Sticky Keys! This is a cool timesaver tip that I learned from Eric K. Thanks, Eric!

Some common ANIMATE Drawing Tool shortcuts:

Brush - Alt + B
Contour Editor - Alt + A
Select - Alt + V
Cutter - Alt + T
Line - Alt + N
Paint - Alt + K
Pencil - Alt + Y
Zoom - Alt + Z
Transform (Animation) - Alt + Q

When you press down a key, the tool temporarily changes to whichever tool you want represented by that key. When you de-press the key, it changes back to the original tool. Examples:

DRAWING and EDITING strokes
I toggle between my default BRUSH (Alt + B) and hold down A for Contour Editing and V for moving/scaling.

EYEDROPPER and FILLING
I toggle between my default PAINT (Alt + K) and hold down I for selecting colors from the screen

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

Brush strokes: Flash vs Toonboom

The first thing you notice about drawing in ANIMATE (compared to Flash) is the much improved line quality and accuracy!  

CLICK HERE to see enlarged pic. These are screengrabs of the brush strokes created in Flash and TB Animate. 

FLASH

Unfortunately, what you get on screen is not true to what you draw... Flash tweaks your original linework and as you can see - those looped lines are really messed up (compared to the Toonboom versions). I would have to manipulate the strokes with the Arrow tool and pull them into shape.  

TOONBOOM 

What you see on screen is exactly what you draw which is great! There's a catch though... In the TOONBOOM workspace, you can have Anti-aliasing enabled or disabled. Anti-aliasing adds a "Soft and blurry" effect to the strokes. Some people may not notice this but I do, and I find this blurry effect a bit distracting, like using ink that bleeds. With the Anti-aliasing Disabled (you can toggle this setting under Preferences > Open GL) it's the total opposite effect. The strokes are pixelly and jagged. This is even more distracting so I usually go with the Anti-Alias mode.

In my ideal world, I would love it if ToonBoom's line quality was crisper, like Flash's, while maintaining its smoothness and accuracy... 

Editing Strokes

To be honest though, I am so used to manipulating vectors in Flash it's weird to not have to do this in ToonBoom. Actually it's more time-consuming to edit strokes in ToonBoom because the Contour Editor feature requires a familiarity with Bezier points and handles... something I never had to learn. The thing I like about Flash is that you can just push and pull strokes into their perfect curve at ANY POINT ON THE CURVE without even having to SEE those points.

Smoothening Strokes

Both programs have a smoothening feature. I have yet to figure out how to smoothen only PART of a stroke in Animate. In Flash, you can very quickly select a part of a stroke and smoothen only this part. In Animate, the entire stroke is selected.

Tips, anyone?