Flash 8 Font/Text Scaling. Bug?

This week while working on another multilingual flash site, this time in Flash 8 I came across this interesting feature/bug with the new Flash 8 text anti aliasing. Let me explain the move below.

The top section of the movie uses text fields with the anti-aliasing setting set to “anti-alias for readability” which is placed inside a movie clip symbol. This clip is then placed on the main stage of the movie. The button at the top simple scales the movie clip that contains these fields from 100% to 200%.

The bottom section of the movie uses script to create a movie clip, and then create 2 text fields into the new movie clip. This time we use embedded fonts and text formatting to get the text to appear the same way as the top fields. The button then does the same scale operation on this newly created clip.

if the movie is missing below view it here for now

link

placeholder for flash movie

As you can see the flash 8 text does some very strange wrapping of the text as the parent clip is scaled. This effect was displayed in the project I was working on, and as you can imagine the client was not so pleased with this funky text effect.

The only fix I could come up with was to create and display the text as per the bottom section of the movie. I hope that all makes sense and is of use to someone.

Code from the movie is after the split, I apologise for the state of it, its is for example only.

[as]
import mx.transitions.Tween;
import mx.transitions.easing.*;

var str_fieldvalue = “Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut”
var str_fontName:String = “Arial Unicode MS”;
var int_fontSize:Number = 10;
var bln_f0Scaled:Boolean = true;
var bln_f1Scaled:Boolean = true;
var bln_embed0:Boolean = false;
var bln_embed1:Boolean = true;

mc_flashText_0.txt_field_1.autoSize = mc_flashText_0.txt_field_0.autoSize = “left”;
mc_flashText_0.txt_field_0.text = str_fieldvalue;
mc_flashText_0.txt_field_1.text = str_fieldvalue;

but_field_e0.onPress = function()
{
_root.mc_flashText_0.txt_field_1.embedFonts = _root.mc_flashText_0.txt_field_0.embedFonts = _root.bln_embed0;
_root.bln_embed0 = !_root.bln_embed0;
}
but_field_0.onPress = function()
{
if(_root.bln_f0Scaled)
{
_root.twn_field0 = new Tween(_root.mc_flashText_0, “_xscale”, Regular.easeOut, _root.mc_flashText_0._xscale, 200, 3, true);
_root.twn_field0 = new Tween(_root.mc_flashText_0, “_yscale”, Regular.easeOut, _root.mc_flashText_0._yscale, 200, 3, true);
}
else
{
_root.twn_field0 = new Tween(_root.mc_flashText_0, “_xscale”, Regular.easeOut, _root.mc_flashText_0._xscale, 100, 3, true);
_root.twn_field0 = new Tween(_root.mc_flashText_0, “_yscale”, Regular.easeOut, _root.mc_flashText_0._yscale, 100, 3, true);
}

_root.bln_f0Scaled = !_root.bln_f0Scaled;
}
/*
code below here is specific to to generating a text feild that can be scaled
*/
var tf_textFormat_0:TextFormat = new TextFormat();
tf_textFormat_0.font = str_fontName;
tf_textFormat_0.size = int_fontSize;
tf_textFormat_0.color = 0x000000;
var tf_textFormat_1:TextFormat = new TextFormat();
tf_textFormat_1.font = str_fontName;
tf_textFormat_1.size = int_fontSize;
tf_textFormat_1.color = 0xffffff;

// create a movie clip to hold the fields and position it
var mc_flashText_1:MovieClip = this.createEmptyMovieClip(“mc_dF”, 0);
mc_flashText_1._x = 10;
mc_flashText_1._y = 190;
// create 2 text fields in teh new clip
mc_flashText_1.createTextField(“txt_field_0”, 0, 1, 1, 100, 1);
mc_flashText_1.createTextField(“txt_field_1”, 1, 0, 0, 100, 1);

// set the properties of the 2 text fields
mc_flashText_1.txt_field_1.embedFonts = mc_flashText_1.txt_field_0.embedFonts = bln_embed1;
mc_flashText_1.txt_field_1.autoSize = mc_flashText_1.txt_field_0.autoSize = “left”;
mc_flashText_1.txt_field_1.multiline = mc_flashText_1.txt_field_0.multiline = true;
mc_flashText_1.txt_field_1.wordWrap = mc_flashText_1.txt_field_0.wordWrap = true;
mc_flashText_1.txt_field_0.text = str_fieldvalue;
mc_flashText_1.txt_field_1.text = str_fieldvalue;
mc_flashText_1.txt_field_0.setTextFormat(tf_textFormat_0);
mc_flashText_1.txt_field_1.setTextFormat(tf_textFormat_1);

// set the on press function to control the scaling of the movieclip that holds the fields
but_field_1.onPress = function()
{
if(_root.bln_f1Scaled)
{
_root.twn_field1 = new Tween(_root.mc_flashText_1, “_xscale”, Regular.easeOut, _root.mc_flashText_1._xscale, 200, 3, true);
_root.twn_field1 = new Tween(_root.mc_flashText_1, “_yscale”, Regular.easeOut, _root.mc_flashText_1._yscale, 200, 3, true);
}
else
{
_root.twn_field1 = new Tween(_root.mc_flashText_1, “_xscale”, Regular.easeOut, _root.mc_flashText_1._xscale, 100, 3, true);
_root.twn_field1 = new Tween(_root.mc_flashText_1, “_yscale”, Regular.easeOut, _root.mc_flashText_1._yscale, 100, 3, true);
}

_root.bln_f1Scaled = !_root.bln_f1Scaled;
}
but_field_e1.onPress = function()
{
_root.mc_flashText_1.txt_field_1.embedFonts = _root.mc_flashText_1.txt_field_0.embedFonts = _root.bln_embed1;
_root.bln_embed1 = !_root.bln_embed1;
}
stop();
[/as]

7 thoughts on “Flash 8 Font/Text Scaling. Bug?”

  1. Hey Dave, This is standard behaviour for “saffron” text in the FP and it’s definitely the down-side to using it, but I guess anyone could argue that if you are animating the text, its .antAlias prop should be temporarily switched to “anti-alias for animation”.

    One thing to watch out for though is that TextFields created dynamically in 8.5 default to “anti-alias for readability”, and so you have to manually make them old-shool TextFields to avoid this whole scaling glitchyness.

  2. I did also run a test using the “anti-alias for animation”. Unfortunately this didn’t improve the situation.

    One thing I haven’t had time to test is switching from Embedding the font using the old style TextField and then using code to set the .antiAlias property once the animation is complete. I suppose this would be one way to get the best of both worlds. I will try and post something using that idea later in the weekend.

    Thanks for the heads up on teh 8.5 fields 😀

  3. Doesn’t the gridFitType property fix this?

    textField_txt.gridFitType = ‘pixel’;

    Seemed to fix all my issues? Of course you can only use this when your text is left justified.

  4. Unfortunately, as in the example code, the text fields are embedded using ActionScript. It isn’t possible to “select alias for animation” from ActionScript.

Leave a Reply

Your email address will not be published. Required fields are marked *