Understanding symbol registration in Flash and Animate

Sym­bol reg­is­tra­tion and its impor­tance for the flaw­less func­tion­ing of Tweens seems to remain not well-under­stood with­in the broad­er Flash ani­ma­tion com­mu­ni­ty, even among many indus­try pro­fes­sion­als with decades of experience. 

One of the rea­sons for this could be that Adobe who inher­it­ed Flash from Macro­me­dia nev­er ful­ly grasped some of the prin­ci­ples behind Tweens and Sym­bols. When I say ‘Adobe’, I don’t mean the pro­gram­mers who devel­op Flash / Ani­mate, but the peo­ple who write the help arti­cles and sup­ply the demo files and tutorials.

Often we see top-left or ran­dom reg­is­tra­tion in books, screen grabs and video demon­stra­tions done by promi­nent pre­sen­ters on behalf of Adobe.

It tru­ly is painful to watch!

It also per­pet­u­ates sub-opti­mal prac­tices and spreads con­fu­sion among new adopters, who nev­er stop to give a sec­ond thought to the ques­tion why there is at all a Reg­is­tra­tion Point, when all ‘we’ ever do is move the ‘Piv­ot’ around.

Knowl­edge, method­ol­o­gy and prop­er plan­ning are key ingre­di­ents to run­ning a suc­cess­ful dig­i­tal cutout production.

The upfront time-invest­ment in design, rig­ging and build­ing asset libraries is huge and it’s cru­cial to do as many things right as pos­si­ble from the start to ensure a smooth ride lat­er on.

Over the years, here at EDAP Tools, we have been try­ing to cre­ate a knowl­edge base of good prac­tices with the hope to reach as many peo­ple with­in the ani­ma­tion com­mu­ni­ty and make some pos­i­tive impact in their day-to-day pro­fes­sion­al lives.

The arti­cle below is an attempt to clar­i­fy sym­bol reg­is­tra­tion and its impor­tance for cutout char­ac­ter animation.

*We are ful­ly aware that in the con­text of inter­ac­tive projects top-left reg­is­tra­tion of Movieclips is com­mon and con­sid­ered a good practice.
This, how­ev­er, is a field we are not con­cerned with.

Registration Point and Transformation Point


Trans­for­ma­tion Point and Reg­is­tra­tion Point are fun­da­men­tal­ly dif­fer­ent and under­stand­ing their func­tions is cru­cial for prop­er rig­ging and trou­ble-free char­ac­ter ani­ma­tion process.

Trans­for­ma­tion Point is only vis­i­ble out­side of a sym­bol instance. The sym­bol itself, i.e. the Library item does not have a Trans­for­ma­tion Point; only the instances on the Stage have. Dif­fer­ent instances can have dif­fer­ent posi­tions of their respec­tive Trans­for­ma­tion Points.
Trans­for­ma­tion Point looks like a small white cir­cle with black out­line and can be moved with the Free Trans­form (Q) tool.
It serves as the cen­ter of trans­for­ma­tions such as rota­tion, scale and skew.
When dou­ble-clicked with the Q‑tool, the Trans­for­ma­tion Point snaps back to the Reg­is­tra­tion Point. When the two coin­cide they look like a small cir­cle with a cross inside.

Tweens and the Trans­for­ma­tion Point
The Trans­for­ma­tion Point’s coor­di­nates are what is being cal­cu­lat­ed and moved from A to B dur­ing a Clas­sic Tween.
The sym­bol is ren­dered (dis­played) in rela­tion to the tweened Trans­for­ma­tion Point.
If in the sec­ond key the user inten­tion­al­ly or acci­den­tal­ly moves the Trans­for­ma­tion Point, the tween will appear to ‘break’, i.e. the sym­bol will jump in that sec­ond key.
The rea­son for this is that the tween only cal­cu­lates the in-between posi­tions of the Trans­for­ma­tion Point. It is unaware that the rel­a­tive posi­tion of the object to its Trans­for­ma­tion Point has changed in the sec­ond key.
This is by design and is not a ‘glitch’ or ‘odd­i­ty’ as many mis­tak­en­ly think.
The fix to the ‘bro­ken’ tween in the­o­ry is easy – you just need to move the Trans­for­ma­tion Point back to the exact­ly same posi­tion it has in rela­tion to the sym­bol in your first key.
In prac­tice if the start­ing posi­tion is arbi­trary, it is impos­si­ble to do so, unless you use a spe­cial com­mand. Flash / Ani­mate does not pro­vide such tools out of the box.
If Trans­for­ma­tion and Reg­is­tra­tion match, it is a mat­ter of dou­ble-click­ing the Trans­for­ma­tion point with the Q‑tool.

Reg­is­tra­tion Point is vis­i­ble both inside and out­side of the sym­bol and is a prop­er­ty of the sym­bol itself and not the instance. (Think of it as some­thing inside the sym­bol, while the Trans­for­ma­tion point is on the out­side.) It is per­ma­nent and can­not be moved.

The Reg­is­tra­tion Point looks like a lit­tle black cross. It is the 0,0 point of the sym­bol­’s inter­nal coor­di­nate sys­tem. (More on this in the next section.)

When a sym­bol is cre­at­ed, the user has 9 options where to place the Reg­is­tra­tion Point. The cen­ter of the bound­ing box is usu­al­ly the best start for char­ac­ter ani­ma­tion. Unless you have a good rea­son to pre­fer any of the oth­er 8 options, always choose the center.

Sym­bols, esp. for char­ac­ter ani­ma­tion, have to be reg­is­tered in a way that facil­i­tates for­ward kine­mat­ic, where reg­is­tra­tion of ele­ments is at joints. This means that upper arm has to be reg­is­tered at shoul­der, low­er arm – at elbow, hand – at wrist and so on.
When reg­is­tra­tion is done prop­er­ly, Trans­for­ma­tion Points can stay over Reg­is­tra­tion Points in 99% of the sit­u­a­tions and this ensures trou­ble-free tweening.

If we fol­low the sim­ple rule to draw a cir­cle, con­vert that cir­cle to a sym­bol with reg­is­tra­tion in the cen­ter and add the art­work inside lat­er, our joints will be per­fect­ly func­tion­al from the very begin­ning. Then if, for some rea­son, we need to tem­porar­i­ly move the Trans­for­ma­tion Point, we will always be able to dou­ble-click it. That will restore its posi­tion over the Reg­is­tra­tion Point and fix any acci­den­tal­ly ‘bro­ken’ tweens.
(For more infor­ma­tion and demon­stra­tion how to do this, fol­low this link.)

The Reg­is­tra­tion Point is unmov­able, but we can move the con­tent of the sym­bol in rela­tion to the Reg Point. If we did not start with a cir­cle, but cre­at­ed the shape for an arm first, then con­vert­ed it to a sym­bol, we will have to enter the new­ly cre­at­ed arm sym­bol and move its con­tent in rela­tion to the Reg­is­tra­tion Point so that the Reg Point marks the cen­ter of rota­tion of the shoul­der joint.

When this repo­si­tion­ing of con­tent is done from the out­side, using a spe­cial­ized tool such as Set Reg Point To Trans­form Point we talk about re-reg­is­ter­ing the symbol.

Is there such a thing called ‘Pivot’ at all?


Short answer is ‘No’.

In Flash / Ani­mate we have Trans­for­ma­tion Point which by some is com­mon­ly called ‘Piv­ot’, bor­row­ing the term from oth­er pro­grams. Using the word ‘Piv­ot’ blurs the mean­ing and can lead to con­fu­sion, esp. among peo­ple who don’t under­stand the dif­fer­ence between Reg­is­tra­tion Point and Trans­for­ma­tion Point, call­ing either of them ‘Piv­ot’.

If used at all, the word should only be used as a syn­onym to Trans­for­ma­tion Point.
Best prac­tice would be to stick to the offi­cial Flash / Ani­mate terminology.

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


As men­tioned a few para­graphs ear­li­er the Reg­is­tra­tion Point is the 0,0 of each sym­bol­’s coor­di­nate system.

If we enter a sym­bol, using Edit (NOT Edit in Place) or if we dou­ble-click it in the Library, the con­tent of the sym­bol will be pre­sent­ed out­side of the con­text of the Stage and with­out any trans­for­ma­tions applied to any of its instances.

In this view the only point of ref­er­ence will be the Reg­is­tra­tion Point, a small cross.
If we show the rulers and from them drag two per­pen­dic­u­lar guides they will appear per­fect­ly hor­i­zon­tal and per­fect­ly vertical.

If inside the sym­bol we draw a rec­tan­gle that is orthog­o­nal, i.e. its ver­ti­cal and hor­i­zon­tal sides are par­al­lel to the ver­ti­cal and hor­i­zon­tal guides and then exit the sym­bol, we will see that the bound­ing box of this sym­bol instance is trimmed and orthog­o­nal to the rec­tan­gle we just drew.

If we rotate the box on Stage and then dou­ble-click to ‘Edit in Place’, we will notice that the ver­ti­cal and hor­i­zon­tal guides are now at an angle, i.e. the whole inter­nal coor­di­nate sys­tem of the sym­bol has been rotated.

If we cre­ate a new sym­bol, but instead or rotat­ing the instance on the out­side, we rotate the con­tent of the sym­bol on the inside, its inter­nal coor­di­nate sys­tem will remain orthog­o­nal, but upon exit­ing we will notice that the exter­nal bound­ing box is not aligned with the shape inside the sym­bol, but rather it is aligned with the inter­nal coor­di­nate sys­tem. The shape appears at an angle to the bound­ing box.

This oblique posi­tion, in turn, affects how skew­ing and scal­ing work, because these trans­for­ma­tions are applied to the bound­ing box of the sym­bol instance.
The off­set bound­ing box also cre­ates visu­al noise when deal­ing with mul­ti­ple objects, for exam­ple a whole char­ac­ter rig.

What is the prac­ti­cal appli­ca­tion of all this?

Depend­ing on what kinds of trans­for­ma­tions we will need for our sym­bol instances, we decide how to ori­ent the con­tent in rela­tion to the inter­nal coor­di­nate sys­tem of the sym­bol, so that we get the bound­ing box we need.
The gen­er­al rule is that a limb should be par­al­lel to the ver­ti­cal axis. This will allow clean squash­ing and stretch­ing with­out any oth­er distortions.

The importance of proper registration for well-functioning character rigs


Well… If you have read and under­stood all the infor­ma­tion above, I believe by now it should be self-evi­dent why prop­er reg­is­tra­tion of sym­bols is of cru­cial importance.
Rig cre­ation requires a sig­nif­i­cant time-invest­ment and plan­ning, and it makes no sense to do that much work, but neglect sym­bol reg­is­tra­tion and leave it ran­dom or top-left. Such rigs are not uncom­mon, but show lack of knowl­edge and expe­ri­ence, and are much more like­ly to cause tween and trans­for­ma­tion com­pli­ca­tions when animated.

Just to summarize:

The Trans­for­ma­tion Point is flex­i­ble, but some­how prone to being moved acci­den­tal­ly, which can lead to ‘bro­ken’ tweens.

It is much bet­ter to build your rigs and joints around some­thing more reli­able and per­ma­nent such as the Reg­is­tra­tion Points.
This will cov­er most of the trans­for­ma­tions that you need to do – prob­a­bly over 90%. Then for the rest, you can build them around off­set Trans­for­ma­tion Points, while being extra careful.

Prop­er reg­is­tra­tion does not only con­cern itself with the posi­tion of the sym­bol con­tent in rela­tion to its Reg­is­tra­tion point, but also its ori­en­ta­tion in rela­tion to the X and Y axes of the sym­bol­’s coor­di­nate system.
The con­tent has to be aligned in such a way as to ensure the best pos­si­ble ori­en­ta­tion of the exter­nal bound­ing box for opti­mal con­trol over the trans­for­ma­tions applied to the instances of that symbol.

Available tools to edit symbol registration


Make Edaptable

Make Edapt­able (intro­duced in EDAPT v.6) is a new pow­er­ful tool to batch edit Reg­is­tra­tion Points or to resolve Trans­for­ma­tion Point mis­match issues in Clas­sic Tweens. The Make Edapt­able but­ton is locat­ed in the SMR Helpers pan­el.

Set Reg Point To Transform Point

Set Reg Point To Trans­form Point is a dual func­tion com­mand which pro­vides two dif­fer­ent meth­ods of re-reg­is­ter­ing symbols.

1. First we have the Sim­ple mode which takes the cur­rent posi­tion of the Trans­for­ma­tion Point and re-reg­is­ters the sym­bol based on that. It asks no ques­tions and does not look for oth­er instances of that sym­bol. If such instances exist, they will jump as the con­tent of the sym­bol is moved in rela­tion to the Reg­is­tra­tion Point, but com­pen­sa­tion is only done to the one select­ed instance on the Stage.
This Sim­ple mode is best suit­ed for use dur­ing char­ac­ter creation/rigging when you have just cre­at­ed a sym­bol and need to re-reg­is­ter it or if you don’t have oth­er instances of that symbol.
EDAPT short­cut for it is Ctrl+T

2. Zero Trans­form mode (intro­duced in EDAPT v.5.0) is the more ‘intel­li­gent’, fea­ture-rich tool, which pro­tects oth­er exist­ing instances from chang­ing posi­tion. Because of this it can also be much slow­er, depend­ing on the cur­rent doc­u­ment size.
It moves the Reg­is­tra­tion Point to match the loca­tion of the Trans­for­ma­tion point as well, but also sets the scale of the sym­bol to 100% by mod­i­fy­ing the trans­for­ma­tion matrix, and also re-sets the rota­tion to 0°. Zero Trans­form checks the whole doc­u­ment recur­sive­ly and com­pen­sates all oth­er exist­ing instances so that they don’t jump after the re-registration.
This is a very pow­er­ful com­mand which should be used when you need to reset the rota­tion of a sym­bol, its scale or both, or if you need to re-reg­is­ter when you already have mul­ti­ple instances or keys on the Stage. EDAPT short­cut is Ctrl+Shift+T for CS and Shift+T for CC.

Video demonstration


The video below demon­strates all top­ics and issues dis­cussed in the article.
It also presents some exam­ples how the knowl­edge can be uti­lized in practice.


All our videos are 1080p. If for some rea­son full HD is not avail­able here, try watch­ing them on YouTube.

Time Stamps:
00:00 — Introduction
00:57 — Sym­bol Instances and Symbols
02:25 — Trans­for­ma­tion Point vs. Reg­is­tra­tion Point
04:12 — Tweens that break and how to fix them
09:15 — How Tweens actu­al­ly work. Com­mon misconceptions
13:24 — Sym­bol­’s coor­di­nate sys­tem and its rela­tion to the exter­nal bound­ing box
17:33 — Prop­er reg­is­tra­tion of Sym­bols and the avail­able tools to re-reg­is­ter them
23:21 — Good exam­ple of prop­er­ly reg­is­tered char­ac­ter rig vs. bad example
28:00 — A real pro­duc­tion exam­ple. How to reg­is­ter Tiger’s ears for best control


I hope that this has brought some more clar­i­ty to a top­ic that is of extreme impor­tance, but very rarely talked about. In an ide­al world all sym­bols would be prop­er­ly reg­is­tered and noone will suf­fer from trans­for­ma­tion dis­tor­tions or ‘bro­ken’ tweens.
Nick­o­lay Tilch­eff
April 2019
 
Comments

Thank you for this . I final­ly got a chance to read this and indeed this solved my prob­lem . Plus it was very infor­ma­tive espe­cial­ly for a begin­ner like me.

You’re most wel­come, Mark!

The tes­ti­mo­ni­als con­stant­ly mov­ing is dis­tract­ing. Please remove.

Ha ha, I’m sure you will be able to sur­vive the distraction.

how to reset trans­form point back to the middle?

Hel­lo Heidi,

Dou­ble-click the Trans­for­ma­tion point with the Free Trans­form tool (Q‑tool) and it will snap back over the Reg­is­tra­tion point (if Reg point is in the middle).

This was bril­liant. I was strug­gling with this for not hours, but days. A hun­dred thanks Nick. Please keep putting up more such tips and tricks!!!

You are wel­come, Sam!
Real­ly glad to hear the arti­cle helped.

Leave a Reply