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.

* Edit, June 2023: The extremely useful and well designed Flash guides system was destroyed by the incompetence of the new Animate team in AA 2019 with the introduction of the so-called Advanced Layers. After this point the guides do not belong to the local coordinate system of the symbol. They are now global lines which can be of only very limited assistance.
If users still need to have visual indication of the space distortion in Animate, they need to open the symbol in isolation and manually add real vertical and horizontal lines on a guided layer.

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.

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.


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

Available tools to edit symbol registration


Make Edaptable

Make Edaptable (introduced in EDAPT v.6) is a new powerful tool to batch edit Registration Points or to resolve Transformation Point mismatch issues in Classic Tweens. The Make Edaptable button is located in the SMR Helpers panel.

Bounding Box Trim (FreeStyle Rigging tool)

While FreeStyle Rigging is the current tool, holding down [ Shift ] will activate Bounding Box Trim mode (v.7+). Clicking on a symbol and dragging will show 3 parallel, interactive arrows. Upon release, the bounding box of the symbol will become aligned with the direction of these arrows.
This is similar to Zero Transform, but it only affects the rotation component of the matrix – a very fast and intuitive way of trimming the bounding boxes of limbs or other rig elements.

 
Comments

Thank you for this . I finally got a chance to read this and indeed this solved my problem . Plus it was very informative especially for a beginner like me.

You're most welcome, Mark!

The testimonials constantly moving is distracting. Please remove.

Ha ha, I'm sure you will be able to survive the distraction.

how to reset transform point back to the middle?

Hello Heidi,

Double-click the Transformation point with the Free Transform tool (Q‑tool) and it will snap back over the Registration point (if Reg point is in the middle).

This was brilliant. I was struggling with this for not hours, but days. A hundred thanks Nick. Please keep putting up more such tips and tricks!!!

You are welcome, Sam!
Really glad to hear the article helped.

Thank you so much. This is very helpful for me as a high school teacher.

Hi Kyrah,
Thank you for the kind words!

All the best to you and your students!

Muhammad Kashif

Thanku..it is realy helpful

Hi, very interesting while I am recreating games from .fla with more modern technologies.
Just this question : if the transformation point has a 10,20 offset from the registration point and that my symbol instance position in the scene is defined as 100,100 by actionscript… is it the registration point or the transformation point that will be at 100,100 in the scene coordinate system ? If the answer is "registration point" that means that the transformation point in the scene will be at 110,120. Right?

Your calculations are correct.

In fact, the Info panel can switch and show you the coordinates of both the Registration and the Transformation point of the selected symbol:

It's rather subtle, but the little icon changes as well.

Thank you for your article and your answers ! 🙂
That explains a lot for me. It is a little bit boring because in the .fla I have a symbol that is positioned with x and y values (registration point) but also rotated by script (transformation point). In my game traduction, I can only set the registration point. I will need to find a trick ! But without your article, I would still try to understand, so thank you !

Hi Julien,

I see.
It's kind of tricky that the original creators of the FLA did not unify the Registration and Transformation points as this creates potential conflicts and so much unnecessary complexity.

I wish you good luck in going through it all and solving the problems you face!

Leave a Reply