Monday, July 24, 2006

Showing list of fonts in a Flash V2 comboBox formatted with the corresponding fonts

I was browsing the actionscript.org forums today and found a query by a user. It read "I have a combobox full of font names. I was thinking that it would be pretty cool to have the actual font format show in the label as well. ...."

I had a lil free time and thought I'd give it a shot.

This is what you need to do:

1. Drag a comboBox component from the components Panel to your FLA's Library.

2. Add the following code:


/* --------------------------- code starts here --------------------------- */
import mx.controls.ComboBox;
var myCB:ComboBox;

function init ()
{
myCB = ComboBox(createClassObject(ComboBox,"myCB", this.getNextHighestDepth()));
myCB.setSize(175,22);
myCB.rowCount = 7;
myCB.dataProvider = TextField.getFontList ();
myCB.open ();
myCB.addEventListener ("change", function ()
{
myCB.textField.setStyle ("fontFamily", myCB.value);
});
myCB.addEventListener ("load", setCBListFonts);
myCB.addEventListener ("scroll", setCBListFonts);
}
function setCBListFonts ()
{
for (var i in myCB.dropdown.listContent)
{
var _tf:TextFormat = myCB.dropdown.listContent[i].cell.getTextFormat ();
_tf.font = myCB.dropdown.listContent[i].cell.text;
myCB.dropdown.listContent[i].cell.setTextFormat (_tf);
}
}

init();
/* --------------------------- code ends here --------------------------- */


3. Test Movie, and you should be done!

This is how the final SWF looks: (If SWF doesnt show up below,check it out here
)



13 comments:

JesterXL said...

Nice! Not even Fireworks does that.

Jason said...

This was my question I posted on actionscript.org. Thanks for posting this. It is people like you that make flash so great for the rest of us. Thanks a ton.

Arul Prasad said...

:)
u guys made my day. Thanks!

Anonymous said...

Hi

How would one go about setting better quality for the fonts? Can you set the antiAliasType for each line item somehow?

Cheers

Anand said...

Wow, thats nice
Good R&D,
Thanks, I will use this, this will make my application some more usable.

Anonymous said...

you should add one more handler to catch keyboard navigation... Try using the down arrow to go to the bottom of the list.

Nice clean code! Good example

Anonymous said...

how could you do the same in AS3 ??

Anonymous said...

I notice that the initial font in the combo box is incorrect until an item in the list is selected. How can this be changed as well?

Anonymous said...

Thnaks for the great thing, Has worked fine in my system.
But when opened same swf in other system , the text in list could not take font type...can you help me ...

Steve said...

Thanks! This just saved me a whole lot of headaches

Anonymous said...

Am I the only one getting 7 compiler errors - Definition mx.controls:ComboBox could not be found
Type was not found or was not a compile-time constant: ComboBox.
Call to possibly undefined method ComboBox.
Call to possibly undefined method createClassObject.
Access of undefined property ComboBox.
Call to possibly undefined method getFontList through a static type Class.

I copied and pasted the code in a blank movie - what am I doing wrong?

Thanks,
Yoon Mi
yoonmi76@hotmail.com

Arul Prasad said...

@yoon Mi -
You would need to have an instance of the Combobox component in your library to get that code to work. Also, remember that this is AS2.0

Cheeers

Ardee Aram said...

Hello all,

I made a blog article regarding creating the font combobox in Actionscript 3.0. For those interested, you may follow this link: http://claustrophobiccoder.wordpress.com/2010/07/10/font-list-combobox-in-actionscript-3-0. Hope this helps someone! :)