Understanding symbol registration in Flash and Animate

Symbol registration and its importance for the flawless functioning of Tweens seems to remain not well-understood within the broader Flash animation community, even among many industry professionals with decades of experience.

One of the reasons for this could be that Adobe who inherited Flash from Macromedia never fully grasped some of the principles behind Tweens and Symbols. When I say 'Adobe', I don't mean the programmers who develop Flash / Animate, but the people who write the help articles and supply the demo files and tutorials.

Often we see top-left or random registration in books, screen grabs and video demonstrations done by prominent presenters on behalf of Adobe.

It truly is painful to watch!

It also perpetuates sub-optimal practices and spreads confusion among new adopters, who never stop to give a second thought to the question why there is at all a Registration Point, when all 'we' ever do is move the 'Pivot' around.

Knowledge, methodology and proper planning are key ingredients to running a successful digital cutout production.

The upfront time-investment in design, rigging and building asset libraries is huge and it's crucial to do as many things right as possible from the start to ensure a smooth ride later on.

Over the years, here at EDAP Tools, we have been trying to create a knowledge base of good practices with the hope to reach as many people within the animation community and make some positive impact in their day-to-day professional lives.

The article below is an attempt to clarify symbol registration and its importance for cutout character animation.

*We are fully aware that in the context of interactive projects top-left registration of Movieclips is common and considered a good practice.
This, however, is a field we are not concerned with.

Registration Point and Transformation Point


Transformation Point and Registration Point are fundamentally different and understanding their functions is crucial for proper rigging and trouble-free character animation process.

Transformation Point is only visible outside of a symbol instance. The symbol itself, i.e. the Library item does not have a Transformation Point; only the instances on the Stage have. Different instances can have different positions of their respective Transformation Points.
Transformation Point looks like a small white circle with black outline and can be moved with the Free Transform (Q) tool.
It serves as the center of transformations such as rotation, scale and skew.
When double-clicked with the Q-tool, the Transformation Point snaps back to the Registration Point. When the two coincide they look like a small circle with a cross inside.

Tweens and the Transformation Point
The Transformation Point's coordinates are what is being calculated and moved from A to B during a Classic Tween.
The symbol is rendered (displayed) in relation to the tweened Transformation Point.
If in the second key the user intentionally or accidentally moves the Transformation Point, the tween will appear to 'break', i.e. the symbol will jump in that second key.
The reason for this is that the tween only calculates the in-between positions of the Transformation Point. It is unaware that the relative position of the object to its Transformation Point has changed in the second key.
This is by design and is not a 'glitch' or 'oddity' as many mistakenly think.
The fix to the 'broken' tween in theory is easy – you just need to move the Transformation Point back to the exactly same position it has in relation to the symbol in your first key.
In practice if the starting position is arbitrary, it is impossible to do so, unless you use a special command. Flash / Animate does not provide such tools out of the box.
If Transformation and Registration match, it is a matter of double-clicking the Transformation point with the Q-tool.

Registration Point is visible both inside and outside of the symbol and is a property of the symbol itself and not the instance. (Think of it as something inside the symbol, while the Transformation point is on the outside.) It is permanent and cannot be moved.

The Registration Point looks like a little black cross. It is the 0,0 point of the symbol's internal coordinate system. (More on this in the next section.)

When a symbol is created, the user has 9 options where to place the Registration Point. The center of the bounding box is usually the best start for character animation. Unless you have a good reason to prefer any of the other 8 options, always choose the center.

Symbols, esp. for character animation, have to be registered in a way that facilitates forward kinematic, where registration of elements is at joints. This means that upper arm has to be registered at shoulder, lower arm – at elbow, hand – at wrist and so on.
When registration is done properly, Transformation Points can stay over Registration Points in 99% of the situations and this ensures trouble-free tweening.

If we follow the simple rule to draw a circle, convert that circle to a symbol with registration in the center and add the artwork inside later, our joints will be perfectly functional from the very beginning. Then if, for some reason, we need to temporarily move the Transformation Point, we will always be able to double-click it. That will restore its position over the Registration Point and fix any accidentally 'broken' tweens.
(For more information and demonstration how to do this, follow this link.)

The Registration Point is unmovable, but we can move the content of the symbol in relation to the Reg Point. If we did not start with a circle, but created the shape for an arm first, then converted it to a symbol, we will have to enter the newly created arm symbol and move its content in relation to the Registration Point so that the Reg Point marks the center of rotation of the shoulder joint.

When this repositioning of content is done from the outside, using a specialized tool such as Set Reg Point To Transform Point we talk about re-registering the symbol.

Is there such a thing called 'Pivot' at all?


Short answer is 'No'.

In Flash / Animate we have Transformation Point which by some is commonly called 'Pivot', borrowing the term from other programs. Using the word 'Pivot' blurs the meaning and can lead to confusion, esp. among people who don't understand the difference between Registration Point and Transformation Point, calling either of them 'Pivot'.

If used at all, the word should only be used as a synonym to Transformation Point.
Best practice would be to stick to the official Flash / Animate terminology.

The symbol's internal coordinate system and its relation to the external bounding box


As mentioned a few paragraphs earlier the Registration Point is the 0,0 of each symbol's coordinate system.

If we enter a symbol, using Edit (NOT Edit in Place) or if we double-click it in the Library, the content of the symbol will be presented outside of the context of the Stage and without any transformations applied to any of its instances.

In this view the only point of reference will be the Registration Point, a small cross.
If we show the rulers and from them drag two perpendicular guides they will appear perfectly horizontal and perfectly vertical.

If inside the symbol we draw a rectangle that is orthogonal, i.e. its vertical and horizontal sides are parallel to the vertical and horizontal guides and then exit the symbol, we will see that the bounding box of this symbol instance is trimmed and orthogonal to the rectangle we just drew.

If we rotate the box on Stage and then double-click to 'Edit in Place', we will notice that the vertical and horizontal guides are now at an angle, i.e. the whole internal coordinate system of the symbol has been rotated.

If we create a new symbol, but instead or rotating the instance on the outside, we rotate the content of the symbol on the inside, its internal coordinate system will remain orthogonal, but upon exiting we will notice that the external bounding box is not aligned with the shape inside the symbol, but rather it is aligned with the internal coordinate system. The shape appears at an angle to the bounding box.

This oblique position, in turn, affects how skewing and scaling work, because these transformations are applied to the bounding box of the symbol instance.
The offset bounding box also creates visual noise when dealing with multiple objects, for example a whole character rig.

What is the practical application of all this?

Depending on what kinds of transformations we will need for our symbol instances, we decide how to orient the content in relation to the internal coordinate system of the symbol, so that we get the bounding box we need.
The general rule is that a limb should be parallel to the vertical axis. This will allow clean squashing and stretching without any other distortions.

The importance of proper registration for well-functioning character rigs


Well… If you have read and understood all the information above, I believe by now it should be self-evident why proper registration of symbols is of crucial importance.
Rig creation requires a significant time-investment and planning, and it makes no sense to do that much work, but neglect symbol registration and leave it random or top-left. Such rigs are not uncommon, but show lack of knowledge and experience, and are much more likely to cause tween and transformation complications when animated.

Just to summarize:

The Transformation Point is flexible, but somehow prone to being moved accidentally, which can lead to 'broken' tweens.

It is much better to build your rigs and joints around something more reliable and permanent such as the Registration Points.
This will cover most of the transformations that you need to do – probably over 90%. Then for the rest, you can build them around offset Transformation Points, while being extra careful.

Proper registration does not only concern itself with the position of the symbol content in relation to its Registration point, but also its orientation in relation to the X and Y axes of the symbol's coordinate system.
The content has to be aligned in such a way as to ensure the best possible orientation of the external bounding box for optimal control over the transformations applied to the instances of that symbol.

Available tools to edit symbol registration


Set Reg Point To Transform Point is a dual function command which provides two different methods of re-registering symbols.

1. First we have the Simple mode which takes the current position of the Transformation Point and re-registers the symbol based on that. It asks no questions and does not look for other instances of that symbol. If such instances exist, they will jump as the content of the symbol is moved in relation to the Registration Point, but compensation is only done to the one selected instance on the Stage.
This Simple mode is best suited for use during character creation/rigging when you have just created a symbol and need to re-register it or if you don't have other instances of that symbol.
EDAPT shortcut for it is Ctrl+T

2. Zero Transform mode (introduced in EDAPT v.5.0) is the more 'intelligent', feature-rich tool, which protects other existing instances from changing position. Because of this it can also be much slower, depending on the current document size.
It moves the Registration Point to match the location of the Transformation point as well, but also sets the scale of the symbol to 100% by modifying the transformation matrix, and also re-sets the rotation to 0°. Zero Transform checks the whole document recursively and compensates all other existing instances so that they don't jump after the re-registration.
This is a very powerful command which should be used when you need to reset the rotation of a symbol, its scale or both, or if you need to re-register when you already have multiple instances or keys on the Stage. EDAPT shortcut is Ctrl+Shift+T for CS and Shift+T for CC.

Video demonstration


The video below demonstrates all topics and issues discussed in the article.
It also presents some examples how the knowledge can be utilized in practice.


All our videos are 1080p. If for some reason full HD is not available here, try watching them on YouTube.

Time Stamps:
00:00 - Introduction
00:57 - Symbol Instances and Symbols
02:25 - Transformation Point vs. Registration Point
04:12 - Tweens that break and how to fix them
09:15 - How Tweens actually work. Common misconceptions
13:24 - Symbol's coordinate system and its relation to the external bounding box
17:33 - Proper registration of Symbols and the available tools to re-register them
23:21 - Good example of properly registered character rig vs. bad example
28:00 - A real production example. How to register Tiger's ears for best control


I hope that this has brought some more clarity to a topic that is of extreme importance, but very rarely talked about. In an ideal world all symbols would be properly registered and noone will suffer from transformation distortions or 'broken' tweens.
Nickolay Tilcheff
April 2019
 
Comments

No comments yet.

Leave a Reply

*

 
Comments