better looking embedded font for input, radio, button, check box and combo box components (Flash 8)

Sunday, 23 March 2008

For dynamic Flash pages, you might need to add a component with action script and if you embed the fonts all you will see is a blurry text hard to read and not attractive at all. This will ruin your page look!

The only solution for this problem is to set the anti-alias of the component. But you will not going to find in AS docs a way to do this so all you have to do is to go inside component, find that text field and set the anti-alias.

Here are the paths for this components:

  • TextInput.label
  • RadioButton.labelPath
  • Button.labelPath
  • CheckBox.labelPath
  • ComboBox.text_mc.label (not for the dropdown, but it is possible to add anti-alias to it)

Here is an live example with font embedded and here are the source files.

Tags: , , , , , , , , ,

The entry 'better looking embedded font for input, radio, button, check box and combo box components (Flash 8)' was posted on March 23rd, 2008 at 7:57 am and last modified on October 17th, 2008 at 9:34 am, and is filed under Flash AS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

41 Responses to “better looking embedded font for input, radio, button, check box and combo box components (Flash 8)”

  1. kAd writes:
    No. 1 — April 14th, 2008 at 7:44 pm

    Is there any solution to do the same with a comboBox ?

  2. scuty writes:
    No. 2 — April 14th, 2008 at 8:05 pm

    Sure! You can use ComboBox.text_mc.label. I will add an example today.

  3. kAd writes:
    No. 3 — April 14th, 2008 at 8:55 pm

    Thanks :)

  4. kAd writes:
    No. 4 — April 14th, 2008 at 8:58 pm

    I tried :

    myComboBox.label.antiAliasType = “advanced”;

    myComboBox.textField.antiAliasType = “advanced”;

    myComboBox.labelField.antiAliasType = “advanced”;

    but it didn’t work … :(

  5. scuty writes:
    No. 5 — April 14th, 2008 at 9:03 pm

    it’s ComboBox.text_mc.label so you have to use text_mc to get to label but it’s working only for the top label not for the dropdown.

    so:

    myComboBox.text_mc.label.antiAliasType = "advanced";
myComboBox.text_mc.label.gridFitType = "pixel";
myComboBox.text_mc.label.sharpness = 200;

    but I am trying now to find a way to get to the dropdown. but it might be messy.

  6. kAd writes:
    No. 6 — April 14th, 2008 at 9:08 pm

    woot !! :D

    How to apply the antialias on the list labels ?

    For now, only the selected one is full-embedded.

  7. scuty writes:
    No. 7 — April 14th, 2008 at 9:11 pm

    I’ll add an example soon. but I can tell you from now that is very messy!

  8. scuty writes:
    No. 8 — April 14th, 2008 at 9:21 pm

    ok! the example now have a combo box component with anti-alias text on it. it is very messy but it works.

    have fun!

  9. kAd writes:
    No. 9 — April 14th, 2008 at 9:31 pm

    Thx,

    yep it’s a little messy; antialias is applied only when you open the droplist – not before.

    Anyway it’s a big trick.

    Another question – how did you find this tip ?

  10. scuty writes:
    No. 10 — April 14th, 2008 at 9:33 pm

    I just uploaded a new one now! it removes the listener to update the anti-alias just one time!

    so I think is better then the old one!

    about the tip … there are certain ways you can look inside a component.

    1. use shift+ctrl+enter to publish and then look for all the movies that are inside of the component.
    2. look like this:

    for (var i in component_name) {
    trace(i + ' - ' + typeof(component_name[i]));
}

    and look for ‘movieclip’ type.

    then go inside of that movie and look for variables like antiAliasType, gridFitType and sharpness with:

    for (var i in mc) {
    trace(i);
}

    there might be a better way to look inside them but I use this one.

  11. kAd writes:
    No. 11 — April 14th, 2008 at 9:38 pm

    great :)

    many thanks

  12. scuty writes:
    No. 12 — April 14th, 2008 at 9:41 pm

    you’re welcome! I am glad that I could help!

  13. kAd writes:
    No. 13 — April 14th, 2008 at 9:48 pm

    A day without learning something is a wasted day.

    Many thanks – going to sleep now (3:48am).

    Cheers

  14. addallaa writes:
    No. 14 — July 23rd, 2008 at 12:46 pm

    For the dropdown you can use this code :

    var row_count:Number = 5; // this var represents “rowCount” property of your ComboBox element

    for(var i:Number = 0; i<row_count; i++) {
    myCB.__dropdown.content_mc["listRow1"+i].cll.antiAliasType = “advanced”;
    myCB.__dropdown.content_mc["listRow1"+i].cll.gridFitType = “subpixel”;
    myCB.__dropdown.content_mc["listRow1"+i].cll.sharpness = 400;
    }

  15. scuty writes:
    No. 15 — July 23rd, 2008 at 1:04 pm

    yeah, that’s nice! thanks for the tip!

    I will change the source files soon.

  16. Alex writes:
    No. 16 — August 16th, 2008 at 5:22 pm

    Your blog is interesting!

    Keep up the good work!

  17. Mark writes:
    No. 17 — October 22nd, 2008 at 12:02 pm

    After finding this article, I would like to add how to do this in AS3 for a radio button.

    var tf:TextFormat = new TextFormat();
    tf.color = 0×333333;
    tf.font = “Helvetica”;
    tf.size = 12;

    radioBtn.textField.antiAliasType = AntiAliasType.ADVANCED;
    radioBtn.textField.sharpness = 100;
    radioBtn.setStyle( “textFormat”, tf );
    radioBtn.setStyle( “embedFonts”, true );

  18. scuty writes:
    No. 18 — October 22nd, 2008 at 12:09 pm

    Thanks Mark!

  19. papercrate writes:
    No. 19 — March 22nd, 2009 at 10:00 am

    How about for a List component? Having trouble getting it to work.

  20. scuty writes:
    No. 20 — March 22nd, 2009 at 11:33 am

    I just updated it! You can get the source files, is there. Also I updated the example.

  21. papercrate writes:
    No. 21 — March 22nd, 2009 at 9:58 pm

    Thanks for that! I’m still having trouble getting it to work though. I already have a List component on the stage with an instance name of nav_static and I’d just like to get the anti-aliasing to work with that. But I’m having problems stripping apart the code o get it to work. Any help is much appreciated, thanks!

    Here is my simple bit of code which poluates my nav_static List:

    //STATIC NAVIGATION AND CONTENT

    onEnterFrame; {
    _root.createEmptyMovieClip(“container”, 1);
    container._x = 194;
    container._y = 32;
    }

    nav_static.addItem({label:”About”, data:”about”});
    nav_static.addItem({label:”Contact”, data:”contact”});

    nav_static.change = function(evt:Object) {
    container.attachMovie(evt.target.selectedItem.data, “loadedContent”, 1);
    };
    nav_static.addEventListener(“change”, nav_static);

  22. scuty writes:
    No. 22 — March 23rd, 2009 at 5:41 am 

    nav_static.addEventListener("draw", function() {
	var mc:MovieClip = this.content_mc;
	for (var i in mc) {
		mc[i].cll.antiAliasType = "advanced";
		mc[i].cll.gridFitType = "pixel";
		mc[i].cll.sharpness = 200;
	}
});
nav_static.setStyle("embedFonts", true);
nav_static.setStyle("fontFamily", "my_font");
nav_static.setStyle("color", "0x000000");
// add items to the list here!

    Try not to use onEnterFrame because it’s a proc killer if it runs forever.

    ‘nav_static.addEventListener(“change”, nav_static);’ – you don’t have any function to run here.

    This should look like:

    nav_static.addEventListener("change", some_function_here);
some_function_here() {
	// your code here.
}

    Also make sure you embedded the font correctly in the library. It’s all in the source files.

  23. rajesh writes:
    No. 23 — April 18th, 2009 at 3:32 pm

    can we set the font size for radio button in action script 2.0.
    How we can do that
    please help

  24. scuty writes:
    No. 24 — April 18th, 2009 at 7:27 pm 
    your_radio_button.setStyle("fontSize", 20);
  25. MrJingle writes:
    No. 25 — May 13th, 2009 at 2:12 pm

    Is there any solution for numericStepper component ?
    I try a lot of things but without success.
    Thank you :-)

  26. scuty writes:
    No. 26 — May 13th, 2009 at 4:06 pm

    I’ll look into it.

  27. MrJingle writes:
    No. 27 — May 14th, 2009 at 5:27 am

    I have try your method (describe in your reply n°10) and I have found !

    myNumericStepper.inputField.label.antiAliasType = “advanced”;
    myNumericStepper.inputField.label.gridFitType = “pixel”;
    myNumericStepper.inputField.label.sharpness = 200;

    Thank you very much ! :-)

  28. scuty writes:
    No. 28 — May 14th, 2009 at 11:06 am

    any time! :)

  29. papercrate writes:
    No. 29 — June 4th, 2009 at 11:00 am

    Any chance on a AS3 version of this?

    Also, don’t know if this is an error because I’m working in AS3, but when I add the following to my actions for a ComboBox (instance name nav_cb)–

    nav_cb.text_mc.label.antiAliasType = “advanced”;
    nav_cb.text_mc.label.gridFitType = “pixel”;
    nav_cb.text_mc.label.sharpness = 200;

    I get this error–

    1119: Access of possibly undefined property text_mc through a reference with static type fl.controls:ComboBox.

  30. scuty writes:
    No. 30 — June 4th, 2009 at 11:57 am

    Well in AS3 things are different. I’ll look into it to see how this can be done.

  31. Matt writes:
    No. 31 — June 10th, 2009 at 2:35 pm

    Hmmm, does Marks code work for everyone else? I converted the quotes to render correctly but I get nothin’.

  32. scuty writes:
    No. 32 — June 24th, 2009 at 7:30 am

    @Matt
    Did you embed the text?

  33. Jean writes:
    No. 33 — July 13th, 2009 at 1:34 pm

    First, thank you for sharing your solutions, great stuff!

    Is there any way to use your List solution to achive a multi line list that autosizes the cells based to match the text requirements & if not do you have a text antialias solution for the Grid component?

  34. scuty writes:
    No. 34 — July 13th, 2009 at 1:37 pm

    I will look into it.

  35. Jean writes:
    No. 35 — July 13th, 2009 at 8:31 pm

    Hi Scuty,

    Thank you for looking into this. I don’t know if this helps, but I was able to get the List’s text field to accomodate multiline with the following script added to your code:
    “mc[i].cll.wordWrap = true;
    mc[i].cll.multiline = true;
    mc[i].cll.autoSize = true;”

    but I was unable the match Cell’s parameters to the text field!??
    and also, on the rollOver reflesh the text field moves up, not to attactive, so this direction might not be apppropriate.?

  36. scuty writes:
    No. 36 — July 14th, 2009 at 9:41 am

    About that you need to look into cellRenderer. I’ve looked over the documentation and it’s nothing for List component only for DataGrid. I’ve tried to use the cell renderer from DataGrid to List, because it should be the same cell but I got some funny results. The cell would not resize.

    I will look more intro it and if I get any good results I will post it.

  37. Jean writes:
    No. 37 — July 14th, 2009 at 10:27 am

    I have the “Advanced DataGrid” that resizes the rows based on content, but I’m unable to get your Anti-alias code to work with it? Can I send you the “Advanced DataGrid” source code for you to look at?

  38. scuty writes:
    No. 38 — July 14th, 2009 at 10:33 am

    Sure! But before that … if you use a cell renderer then you have to set the Anti-alias inside the cell renderer class to the Label, TextArea or whatever you are using to display your text.

  39. Jean writes:
    No. 39 — July 14th, 2009 at 11:13 am

    yes, I’ve tried to. The “Advanced DataGrid” package comes with 5 classes, and I’ve been unable to locate where I need to set these parameters.

  40. scuty writes:
    No. 40 — July 14th, 2009 at 11:43 am

    OK. I will send you an email and you can reply me the source files.

  41. Pim writes:
    No. 41 — September 11th, 2009 at 4:01 pm

    I can’t get this work on a Datagrid can someone tell me?

Leave a Reply


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

for better code support use: <pre lang="the_language">
where "the_language" can be: actionscript, actionscript3, php, java etc.

»