415.738.4758
Blog Home

Unexpected Tracking with Flash Text Fields Transformed with Horizontal Flip

June 16, 2008
Chadwick Meyer

Chadwick Meyer PortraitFile this one under "stuff that drives you crazy about Flash". I spent hours troubleshooting this, so hopefully this simple explanation will be useful to someone else. The short of it is, Flash will not apply "Advanced Anti-Aliasing" to text fields that are flipped. This causes a large variancein tracking between letters and which results in a different length for the text field (yes it is recorded in their voluminous, an often unhelpful, documentation, if you happen to look up the right combination of keywords).

We recently launched some new free design skin templates for our Gutensite clients, one of which included a dynamic text field for the client's name. There is limited space in the design, so we made an elegant Actionscript function to decrease the font of the text field until the name fit within the specified width and height of the text area. This way long names will fit in the area, albeit at a smaller font size. Simple stuff, it works well.

Reflected Name Fixed

However, to complicate matters, this design needed to put a fake "reflection" of the name below a horizon line. So we simply made two text fields, with identical content, and flipped the second one upside down (transform > flip horizontal, or manually _yscale = -100).

But we observed the oddest phenomenon. The letters in the second text field, didn't quite line up with the letters of the top text field, in fact they were off sometimes by 20px or more. And for the effect to work, of course the letters needed to line up perfectly, giving the illusion of a reflection. To make a long story short, the reason for this discrepancy is due to Flash's "Advanced Anti-Aliasing". It turns out, that it won't work if the text field is flipped. And so the flipped text field, defaults to "Anti-Aliasing for Animation" and with different anti-aliasing, the tracking between letters is thrown off. 

Broken Reflected Name

Now I'm sure most people would never notice the slight difference in tracking, if the field stood by itself. But because we transposed both versions one above the other, it was dreadfully obvious. In case you are wondering, it does not help to put the text field right side up in a movie, and then flip the movie. Flash still sees this as a flipped text field.

Simple Is Good Free Design Skin Template with Reflected Name

So of course the solution is that we had to make both fields use "Anti-Aliasing for Animation". It doesn't look as nice, but it works. That's the sacrifice people will have to make to have a template site I suppose, there will always be small sacrifices, as opposed to customizing the design from start to finish without the need to adjust for dynamic content.



Comments

Name*
Comment*
Verify Word
To help us fight spam, please enter the word shown below.
 

Your Name*
Your Email*
Your Friend's Name*
Your Friend's Email*
Subject*
Body*
Verify Word
To help us fight spam, please enter the word shown below.
  * Privacy: Don't worry, we respect your privacy and do not collect any information from this form.
 
Get RSS Feed

The Archives


Brand Perception

May 27, 2008
Have you ever wondered what the public thinks about certain brand names and logos? Check out Brand Tags, a "collective experiment in brand perception". It's simple, a brand is placed on the screen,...

Robots and Bugs

May 22, 2008
Recently one of our clients (www.accordancebible.com) informed me that they were no longer being found on Google. They used to rank at number one for certain keyword searches, and in the top three...

Manipulations and Thumbs

May 22, 2008
In addition to the regular CMS's uploading power, the CrateUploader application will give the user the optional ability to manipulate image processing - similar to Adobe Photoshop - as well as...

The Company You Keep

May 21, 2008
They say the company you keep says a lot about a person, presumably the same applies to a company. One thing we never considered, when picking a name to promote our new CMS, was the type of sites we...

A Plea From 16 Most Overused Fonts

May 14, 2008
Inspiration Bit brings us A Plea From 16 Most Overused Fonts. Example: Times New Roman (#2) says, "I curse the day when I became the default font in all Microsoft applications."

A first glimpse into CrateUploader

May 14, 2008

Welcome!

May 13, 2008

15 Great Examples of Web Typography

May 13, 2008

25 Reasons You Might Be A Hardcore Graphic/Web Designer

May 13, 2008