[AS3] Embedded Fonts & ComboBoxes

[Walter]

I'm attempting to have an embedded font be displayed as the textfield on a combobox. But it's spotty, at best.

Some fonts work - like Arial Black. However, Arial Black quits working on the combobox if I deactivate it on my machine. But it still works on textfields!

Then other fonts don't work on comboboxes even if they're active - like Brush Script. (Note - Brush Script on my machine is an otf file, whereas Arial Black is a ttf.)

To make matters more confusing, when the combobox's font is working, the font styling is lost when the combobox's enabled property is set to false! Argh!

Anyone know what I'm doing wrong? Is this just a bug? Will I have to write custom comboboxes?

Zip file available here (http://waltercoots.com/cb_test.zip). I tried uploading to the forum, but it was too big.

package com.adventure
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.Font;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.AntiAliasType;
import fl.controls.ComboBox;
import fl.data.DataProvider;

public class Main extends Sprite
{
private static var Reaction:FFFReaction = new FFFReaction();
/*
Note that FFFReaction was the
original font I was working with. I changed
the font in the library to Arial Black and Brush Script
for testing purposes, but didn't change any linkage or code
*/
private var textStyle:TextFormat = new TextFormat();
private var textLabel:TextField = new TextField();
private var combo:ComboBox = new ComboBox();
private var dp:DataProvider = new DataProvider();

public function Main()
{
textStyle.font = Reaction.fontName;
textStyle.color = 0xFF00FF;

with(textLabel)
{
embedFonts = true;
autoSize = TextFieldAutoSize.LEFT;
antiAliasType = AntiAliasType.ADVANCED;
defaultTextFormat = textStyle;
text = "Bear Hello.";
}
with(combo)
{
prompt = "I AM A COMBOBOX";
x = 45;
y = 100;
width = 150;
height = 25;
textField.setStyle("textFormat", textStyle);
}
dp.addItem({label:"One"});
dp.addItem({label:"Two"});
dp.addItem({label:"Three"});
dp.addItem({label:"Four"});
combo.dataProvider = dp; // Tried before and after items were added; no apparent difference

// combo.enabled = false;

addChild(textLabel);
addChild(combo);
}
}
}

[dr_zeus]

Don't forget to tell the ComboBox to embed the font too.

combo.setStyle("embedFonts", true);

[Walter]

Thanks Dr. Z! Applying that to the textField within the combobox fixed the problem. OTF, TTF and PostScript fonts all seem to work great.

The only remaining problem is that the embedded font (entire prompt, actually) disappears when the combobox is disabled. I can live with this, since it looks good in the context I need it for immediately. But in the future, I may want to have a disabled combobox's font be an embedded one. I tried setting the styles after the combobox was disabled, but that doesn't make a difference.

Combobox Text Revised (http://waltercoots.com/cb_test2.zip)

package com.adventure
{
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.text.TextField;
import flash.text.Font;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.AntiAliasType;
import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.events.MouseEvent;

public class Main extends Sprite
{
private static var Reaction:FFFReaction = new FFFReaction();
private var textStyle:TextFormat = new TextFormat();
private var textLabel:TextField = new TextField();
private var combo:ComboBox = new ComboBox();
private var dp:DataProvider = new DataProvider();

private var abledToggle:ToggleButton = new ToggleButton();

public function Main()
{
textStyle.font = Reaction.fontName;
textStyle.color = 0xFF00FF;
with(abledToggle)
{
x = 200;
y = 15;
}
with(textLabel)
{
embedFonts = true;
autoSize = TextFieldAutoSize.LEFT;
antiAliasType = AntiAliasType.ADVANCED;
defaultTextFormat = textStyle;
text = "Bear Hello.";
}
with(combo)
{
prompt = "I AM A COMBOBOX";
x = 45;
y = 100;
width = 150;
height = 25;
textField.setStyle("textFormat", textStyle); //<-- By itself, works only when font is installed on user's machine
textField.setStyle("embedFonts", true); //<-- Causes Arial to show up, not Arial Black? Even when font IS installed.
}
dp.addItem({label:"One"});
dp.addItem({label:"Two"});
dp.addItem({label:"Three"});
dp.addItem({label:"Four"});
combo.dataProvider = dp;

addChild(abledToggle);
addChild(textLabel);
addChild(combo);

abledToggle.addEventListener(MouseEvent.CLICK, handler_abledToggle_click);
}
private function comboToggle():void
{
if(combo.enabled == true)
{
combo.enabled = false;
} else {
combo.enabled = true;
}
combo.textField.setStyle("textFormat", textStyle); //<-- Doesn't make a difference
combo.textField.setStyle("embedFonts", true); //<-- Doesn't make a difference
trace('Prompt says: '+combo.prompt);
}
private function handler_abledToggle_click(evt:MouseEvent):void
{
comboToggle();
}
}
}

[MSFX]

I dont suppose either of you (or anybody for that matter) knew how to do this in AS2 if you used to use it before 3 which is quite likely...

If you do I would really appreciate yourhelp over at: link (http://www.actionscript.org/forums/showthread.php3?p=733290#post733290)

[Walter]

Sorry, I can't help you out. This is the first project I've really used components on.

[mdogggg]

Im getting the same problem with embedded fonts, when I set my checkBox enabled = false, my label text disappears. Cant figure it out :(

[alyda]

can anyone show me how to embed the fonts on a comboBox with actionscript on the timeline (and not within an external package?). i dont understand how to write external packages, so all my script is on the timeline.

i can see the "selected item" of my combobox on the stage:

http://sailboats.urnge.com/images/test/Picture2.png

but when i test the swf, i can only see the items in the list component, and not the selected item:

http://sailboats.urnge.com/images/test/Picture3.png

i want to use "ArialBlack" if that helps, thanks

[BCartfall]

When embedFonts is true and you are disabling you must set the disabledTextFormat attribute in addition to the textFormat attribute.


combo.setStyle("disabledTextFormat", disabledTextStyle);

[saravanan]

HI,

Follow this this tutorial..

http://www.designscripting.com/2011/06/as3-combobox-font-embedding-problem-flash-cs5/

var arial:Font = new ArialFont();

var myFormatBlack:TextFormat = new TextFormat();
myFormatBlack.font = arial.fontName;
myFormatBlack.size = 18;
myFormatBlack.color = 0x000000;

myComboBox.textField.setStyle("embedFonts", true);
myComboBox.textField.setStyle("textFormat", myFormatBlack);
myComboBox.dropdown.setRendererStyle("embedFonts", true);
myComboBox.dropdown.setRendererStyle("textFormat", myFormatBlack);
myComboBox.setStyle("embedFonts", true);
myComboBox.setStyle("textFormat", myFormatBlack);
myComboBox.prompt = "Select State";
myComboBox.width = 248;
myComboBox.height = 25;
myComboBox.x = 100
myComboBox.y = 100
myComboBox.setStyle("textPadding", 1);