A step-by-step guide to creating an edaptable* rig from start to finish
Important prerequisites
To be able to follow, readers need to already know Flash well and to be familiar with at least some animation and design terminology.
This is a tutorial on how to create a fully functional and edaptable rig, not how to use Flash / Animate.
* Edaptable – Ready to be turned into a Smart Magnet Rig, with properly positioned Reg points and functional joints.
A few introductory words
Our free downloadable character rigs – KineFox and SMR MagneBot – have proven to be very popular with users.They provide good examples how Flash character rigs are structured for digital cut-out animation.
In the article on Smart Magnet Rigs and in some of the SMR-related videos I have previously explained the process of converting an already existing edaptable build into a Smart Magnet Rig ™.
The article on Classic Tween Workflow also has chapters dedicated to character specifics, but none of them covers the actual process in a step-by-step manner.
The Internet and esp. YouTube these days are full of Flash rigging advice, much of it incompetent and misleading.
Many times over the past few years, users have asked us similar questions about registration of symbols, joints, nesting, etc., etc. Many times these same users have expressed the opinion that we should make a 'full character build' tutorial.
I have been using these methods in my professional practice as an animator and character designer for many years with much success; constantly refining them and pushing the boundaries of what can be achieved in Flash with the help of EDAP Tools.
Certain things can, of course, be done in different ways, but these are the ones I find most flexible or suitable for this particular design.
If you have questions or would like to share your way of doing things, please, post in the comment section below.
For a while I hesitated what type of character would be most useful to create to demonstrate rigging.
After giving consideration to the different aspects of the problem, I settled on an anthropomorphic rabbit. Stylistically it will match our KineFox and both rigs may be of use to students who want to start animating right away and dig into building their own characters later.
Because it is anthropomorphic, the knowledge would be applicable to humans and humanoids with various degree of realism and in the section on joints I will make sure we stop and look into four-legged creatures too.
Table of Contents
- Design
- Types of joints
- Creating the structure
- Filling the body symbols with content
- Rigging the head
- Transitioning to SMR
1. Design – objectives, process
It's a topic to which many books on character design have been dedicated and is a question almost as big as “How to draw well?”.
I always recommend Preston Blair's “Advanced Animation”, first edition as the one book that has the highest concentration of great advice and inspiring examples. It has entered the public domain and is available here
. Before starting this project I had to decide what character I will be designing.
After serious consideration of various options, I settled on an anthropomorphic rabbit.
I'm an experienced character designer.
This means that in most cases I can skip stages, leaning on past experience and intuition, and usually arrive at the desired destination quite fast.
These days I tend to draw the sketches directly into Flash, using a medium-sized Wacom Intuos.
In the past, for many years I preferred to draw character designs on paper with a 2B pencil, using a lightbox. Depending on the complexity of the design, this may still be a better option,
but for the intended style I considered Flash's drawing tools to be perfectly adequate.
For this project I chose to work in Flash CS6.
Before laying down the first stroke I defined three main objectives:
- To make the rabbit a fairly neutral, but appealing and friendly-looking character. Nothing extreme…
- To make it stylistically compatible with KineFox.
- To consciously stay away from well-known rabbits, such as Bugs Bunny, Roger Rabbit, Pooh's Rabbit, Peter Rabbit and so on.
With the above in mind, I did two rough passes outlining the silhouette and proportions. These only took no more than 5 minutes. Then I left them.
On the next day I did a few clean passes exploring different facial structures.
The image below shows all the variations I tried in chronological order, documenting the design process.
When I was finally happy with the face, I made the head a little larger in relation to the body, but shrunk the ears to maintain the same total height.
It didn't take much time and I did it all in one sitting. Evaluated again on the next morning, but did not identify any areas which needed revision or more work.
At this stage I'm thinking of a beige or cream-colored coat with lighter belly and muzzle in gamma.
Below is a short video in which I say a few more words about the design process.
All our videos are 1080p. If for some reason full HD is not available here, try watching them on YouTube.
2. Types of joints – a necessary detour
Before diving into the clean-up and rigging, we have to make a short detour and say a few words about the typical types of functional joints we can use when creating rigs in Flash.
The most universal kind (1) is a joint based on two overlapping circles. Rotation pivots in the circle's center and therefore the joint never breaks.
This is probably the most widely used type of joint, because it does not require any special attention or additional clean up.
The drawback of this is the clearly visible rounding of the joint, which is not always desired stylistically.
Variations of the circular joint exist (2) where the overlapping circles occupy only a part of the limb surface, while the rest is asymmetrical. This can yield more natural organic looks.
The drawback here is that such joints have a much smaller range of flexibility and the elements often need several different states inside the containers to make them look natural at various angles.
The third type (3) is an angular joint, which is not based on a circle. The elements meet at a point and that's it. Stylistically it can have specific appeal, but has the disadvantage of needing multiple states of the elements inside the container. Also the limbs may appear shorter as they bend, so some correction of length might also be necessary.
All of the described above types of joints can be present in the same character.
Joints can be further concealed and made to look more organic via carefully positioned decorations, wrinkles and so on.
The video below shows how the different types of joints function and how the character drawing dictates what kind of joint would be suitable for each particular case.
All our videos are 1080p. If for some reason full HD is not available here, try watching them on YouTube.
3. Creating the structure – properly registered symbol containers
Armed with all the important knowledge of joints, we can now go back to our rabbit.
First we analyze the sketch and roughly mark the location and type of joints.
Then we draw circles and precisely position them exactly where the joints will be. We convert these circles to Graphic Symbols, naming them according to what they will become.
We end up having an empty joint system – a shell that will be filled with content in the next step.
The video demonstration below shows the process of analyzing the drawing, positioning the circles and creating symbols out of those circles.
All our videos are 1080p. If for some reason full HD is not available here, try watching them on YouTube.
4. Filling the symbols of the body with content
During this stage we start cleaning up the body parts one by one by adding shapes inside the empty containers we created in the previous step.
All shapes that we draw must seamlessly flow in and out of the circles that define the joints. We draw these shapes on separate layers inside each symbol.
Only one of the circles defining a particular joint is left permanently visible; the other one is hidden (guided).
For example:
The 'knee' circle in the upper leg is always visible. The 'knee' circle in the lower leg is guided and hidden, but the shape that defines the lower leg tangents this guided circle, which guarantees proper functioning of the joint.
When cleaning up I tend to always favor the outer edge of the free-hand strokes.
At the end of this stage the work on the body is more or less complete, while the head is only a place-holder.
The video demonstration below shows the process of filling the body symbols with content, i.e. cleaning up the character at the same time as we build the rig.
All our videos are 1080p. If for some reason full HD is not available here, try watching them on YouTube.
5. Rigging the head
The head is quite time-consuming, but straight-forward. The difficulty here is that each detail requires a lot of attention and precision. Humans are naturally extremely sensitive to the slightest nuances in facial proportions and details. So we must make sure that volumes are solid, cranial and facial structures are well-built and the eyes give life to the character.
We start with the main head shape, the 'skull'; then clean up all elements separately and convert them to symbols as we go:
ears, muzzle, eye sockets, eye whites (used also as mask for the irises), irises, eyebrows, etc.
All these symbols should be stopped. Later inside those symbols we will add frames with variations such as eye blinks, different mouth positions and so on.
Layering is based on common sense and varies depending on design.
The head itself is usually played in sync with the main Timeline, so the head symbol should be set to “Play once”.
The video demonstration below captures the process of cleaning up, layering and converting to symbols of all the elements of the head. Special attention is given to how the eyes and the eye mask are organized for maximum flexibility of facial expressions, looks and blinks. Thumbnails for the eyes are created in Smart Graphic Control panel and the eye mask is synced with the eye symbol.
At the end all symbols are placed neatly in a Library folder and named with a prefix to avoid symbol conflicts.
With this the work on the traditional Flash build (in the sense of the article on Classic Tween Workflow) is complete. This rig is fully edaptable with proper registration of all symbols and will be converted to a Smart Magnet Rig ™ as described in the next section.
All our videos are 1080p. If for some reason full HD is not available here, try watching them on YouTube.
6. Transitioning to SMR
The Electric Dog team introduced Smart Magnet Rigs in 2013 and since then countless studios and individual animators around the world have adopted this ground-breaking approach to flexibility, efficiency and control. With chain selection, magnetic joints and automatic clean up of arcs, Smart Magnet Rigs are unmatched in the current Flash or Animate landscape and light years ahead of Adobe's own attempts at layer parenting or IK.
The EDAP Tools team is actively working on constantly expanding the scope of the SMR toolset, adding features and tools, while always maintaining compatibility with older files.
Smart Magnet Rigs and EDAP Tools work with all versions of Flash and Animate from Macromedia Flash 8, providing power, flexibility and unseen before features to all animators reluctant to move on to Animate and its monthly subscription model.
In preparation for the final step in our rig creation, I drew several different mouths inside the muzzle symbol and also added more eyebrow states and an extra closed eye. These in various combinations can produce a wide range of facial expressions.
With this as our starting point, we first add Center Markers to all elements. Then we create Magnet Targets to define the points where displaced elements should go back to. When we have all Magnet Targets for all elements in place, we create a node-based representation of our character in the Smart Magnet Rig panel and tag each symbol instance of our rig with Smart Magnet Rig metadata (SMR info).
This makes all elements in the rig aware of their place in the hierarchy, their parent and their children.
It allows quick chain selections up or down the chains with Smart Transform, interactive posing with KineFlex, instantaneous reassembly of accidentally dislocated parts with Smart Magnet Joint and automatic clean up of tweens along arcs with Clean Up.
In other words our rabbit is ready for animation!
The video demonstration below shows the process of converting the symbol structure we built in the previous parts into a Smart Magnet Rig.
Below is a little animation I did when testing the functionality of the rig, its joints and general appeal.
A few closing words
I had wanted to do such a step-by-step guide to character rigging for a very long time, literally since my teaching days 7–8 years ago.
What was holding me back was the thought that the process itself is not exciting to watch and a video demonstration would be hours long, even if parts of it were sped up. This would make it unwatchable and the effort, and the valuable information in there would go in vain.
Only recently I realized I could break the process into smaller parts. This type of delivery stood better chance at holding attention and communicating all the many specifics of rig production.
The final push came from watching several videos on YouTube, which, sadly, provided a lot of bad advice and wrong information.
It made me realize that while good practices are rarely shared
by professionals (often just because they are too busy), there is a huge abundance of very active amateurs who confidently and tirelessly spread misinformation and bad advice.
This not only wastes young animators a lot of time, but contributes to the bad reputation of Flash / Animate.
Dysfunctional character rigs lead to unappealing and cheap-looking animation.
In future tutorials I intend to also show some good animation practices.
I hope that this has been helpful!∎
February 2019
TransPoser workflow
Hi Nickolay,
I think you are doing Great work and education. I'm not an animator myself, more a 'constructivist' with AnimateCC, but I watched your video part 2 about joints and I have to say it is briliantly made and entertaining. You started a discussion in the Animate Forum today and this brought me here.