Embedding Fonts in Components

[brachford]

Hello Everyone,

I'm in need of a little assistance. I'm using a specific pixel font (FFF Business) throughout my site - which not everyone will have. I'm fully aware how to embed fonts in dynamic fields ... my problem is I've setup a few forms containing several components (Radio Button, CheckBox, and ComboBox) in which I also need to use the pixel font. However I'm having a difficult time figuring out how to embed the fonts within the components themselves. I've skinned and set the default font family to 'FFF Business' within the Defaults.as file.

So, can anyone assist me with embedding my pixel font within the standard components?

I would really appreciate it.

Thanks in advance.

[v2ikematu]

In you library panel -> Add Font
Then give your font a name and select Export for actionscript. Also j suggest you give it a unique name (maybe something like "fntPixelated"). Then you can set your components font to that unique name. Should work. Although embedding a font in that way can cause some problems (some special chars wont be embedded and so on...).

[brachford]

In you library panel -> Add Font
Then give your font a name and select Export for actionscript. Also j suggest you give it a unique name (maybe something like "fntPixelated"). Then you can set your components font to that unique name. Should work. Although embedding a font in that way can cause some problems (some special chars wont be embedded and so on...).

Above you mention giving the font a name and then selecting 'Export for ActionScript' ... is this all I have to do or will I have to write some AS in order for it to embed?

Keep in mind ... my forms include both 'text area' and 'text input' components ... the pixel font appears just fine in all instances of these two components. So it appears to be embedded somehow in those only.

I really appreciate your feedback, but it's left me a bit confused. Would you mind elaborating a little ... once I -> Add Font, give it a name and select to Export for AS ... will I need to write some AS ... in order for them to embed?

Will I need to add the font to each instance of each component or will I simply be able to get away with 'adding' it once? I would think adding it once, would simply add it to the entire file ... but maybe not.

There are two dynamic fields within this file as well. I have embedded the pixel font into those fields. I really don't have much experience with this. I initially thought if I embed the font once it would simply 'embed' it into the SWF and it would appear in all fields - but that's obviously not the case because ... the fonts show up fine within the dynamic fields but not the components.

Please offer some guidance when you get time.

Thanks in advance.

[glosrfc]

Take a look at the component section of the Help files, in particular the bit about Using styles to customize component color and text. Although you can embed fonts using the Embed button, it only embeds the basic outline of the font and any of the basic formatting that you've applied using the Property Panel.
Embedding fonts through the Library gives you more typographical control so that you can alter the default styles of your components, e.g.
comboBox.setStyle("embedFonts", true);
comboBox.setStyle("fontFamily", "fntPixelated");
comboBox.style.setStyle("fontSize", 8);

Hope that helps.

[brachford]

Take a look at the component section of the Help files, in particular the bit about Using styles to customize component color and text. Although you can embed fonts using the Embed button, it only embeds the basic outline of the font and any of the basic formatting that you've applied using the Property Panel.
Embedding fonts through the Library gives you more typographical control so that you can alter the default styles of your components, e.g.
comboBox.setStyle("embedFonts", true);
comboBox.setStyle("fontFamily", "fntPixelated");
comboBox.style.setStyle("fontSize", 8);

Hope that helps.

I'll give it a shot ... sounds like it will work. I'll keep it posted.

Thanks man!

[brachford]

Would you happen to know how to set the Font Rendering Method to 'Anti-alias for animation'?

I've visited the 'Help' section on 'setStyle' topic on several occasions this weekend with no luck tracking down a way to set the Font Rendering Method. Hopefully this is possible. Keep in mind the font I'm attempting to embed is a pixel font.

With simply using the guide below, the pixel font is embedded but it doesn't appear correctly.

comboBox.setStyle("embedFonts", true);
comboBox.setStyle("fontFamily", "FFF_Business");
comboBox.style.setStyle("fontSize", 8);

Please advise when you get a chance.

Thanks for all of you help.

[brachford]

Hello All,

As stated in my original post ... I've skinned and set the default font family to 'FFF Business' within the Defaults.as file by inserting the two lines of code below. But of course this requires the pixel font to be available on the end users system. Which is typically not going to be the case ... so I'm seeking a way to EMBED it into a few standard components.


o.fontFamily = "FFF Business";
o.fontSize = 8;

I've followed the instructions supplied by 'glosrfc' a few posts back - with some success. There are an absolute ton of instance names contained within the three forms on my site. One the first form alone there are:

6 - text input fields
1 - text area field
2 - radio buttons (which do not even have instance names)
8 - check boxes
1 - combo box
1 - button
----------------------
19 - total on Form #1

Rather than having to enter the code for each of the 19 instances, can I set up the pixel font to embed into all components - perhaps globally?

There are a grand total of 48 instances contained within three forms. Hopefully you can see why I'm interested in embedding globally if possible.

Also please be sure to read my post below about setting the Font Rendering Method. If I absolutely have to set each on each instance I will ... but I would prefer going global if possible.

Thanks in advance for any assistance.

[brachford]

Would you happen to know how to set the Font Rendering Method to 'Anti-alias for animation'?

I've visited the 'Help' section on 'setStyle' topic on several occasions this weekend with no luck tracking down a way to set the Font Rendering Method. Hopefully this is possible. Keep in mind the font I'm attempting to embed is a pixel font.

With simply using the guide below, the pixel font is embedded but it doesn't appear correctly.

comboBox.setStyle("embedFonts", true);
comboBox.setStyle("fontFamily", "FFF_Business");
comboBox.style.setStyle("fontSize", 8);

Please advise when you get a chance.

Thanks for all of you help.

OKAY quick update. I've actually setup each of the 48 instances as instructed by 'glosrfc' ... thanks for the guidance. However I'm still dealing with the issue outlined above. The pixel font in question, FFF Business, doesn't appear correctly on screen. I need to change the Font Rendering Method to 'Anti-alias for animation' ... is this possible through ActionScript?

Please advise. Any help would very much be appreciated.

Thanks in advance.

[glosrfc]

Have you tried the antiAlias property?

combobox.my_text.antiAliasType = "advanced";

[brachford]

I've taken your advice and tried setting the antiAlias property. However my code looks a bit different than yours. I'm not sure which syntax is correct.

You recommended:
combobox.my_text.antiAliasType = "advanced";

I used:
name.antiAliasType = "advanced";
radio1.antiAliasType = "advanced";
latitudes.antiAliasType = "advanced";

'name' is the instance name of a text input field
'radio1' is the instance name of a radio button
'latitudes' is the instance name of a check box component

According to a Flash 8 Help Document I stumbled upon (ActionScript 2.0 Language Reference.pdf) the sample code is as follows:

my_text1.antiAliasType = "advanced";

Something worth mentioning that I found in the above mentioned help document ... the availability of 'the antiAlias property' is ActionScript 1.0 and Flash Player 8. I'm using ActionScript 2.0.

Take a look at the image below ... take a second to compare the letters. The letters in the 'static' fields appear correctly. Since there's no need to embed them. Although they are pixel fonts they do appear to have curves. However, the text in the visible text input fields and combo box, along with radio buttons and check boxes (not visible) appear much differently (they appear to be a bit 'pointy').

Pay specific attention to the following letters ... C c S s e

http://test.deckguysonline.com/sample.jpg

Hopefully this helps. I've determined the only Render Method that allows the font to appear correctly is 'Anti-alias for animation' - somehow I need to set it in ActionScript. Surely I cannot be the only person to have ever encountered this.

You know something just hit me ... I purchased the 'FFF Business' font off FontsForFlash.com ... perhaps I should contact them with the issue. What do you think?

Thanks for all of your help.

[glosrfc]

The example I used was simply a generic one....you need to target the correct path to your text. Something like this would probably work:
latitudes.radio1.name.antiAliasType = "advanced";

The fact that it's available from AS1.0 is a red herring....that's simply when it was introduced and it will still work in AS2.0

The other thing is to make sure that your combobox _x and _y is positioned on a whole pixel.

[brachford]

I didn't realize you could list the instance names like that. I have 19 instances in Form #1 alone (48 between the three forms). It took forever, but I had been listing exactly like I stated in my previous email, like this:

name.antiAliasType = "advanced";
radio1.antiAliasType = "advanced";
latitudes.antiAliasType = "advanced";
Are you saying in the example above I could get away with:

latitudes.radio1.name.antiAliasType = "advanced";
BTW ... I sent an email to FontsForFlash.com. I'll keep you posted on the solution if they supply one.

Thanks for all of your help 'glosrfc' - have a nice evening.

[glosrfc]

That is the only way you should target instance names...by including the full path. As far as Flash is concerned, the instance "radio1" doesn't exist on the timeline - it only exists within the combobox instance called "latitudes". And the instance "name" only exists with the "radio1" instance. Think of it like the directory (or folder) structure on your hard disk.

Your timeline:

_root
.
.
..latitudes (OK)
.
.
..latitudes..radio1 (OK)
.
.
..latitudes..radio1..name (OK)



Compare that with:

_root
.
.
..latitudes (OK)
.
.
..radio1 (not OK)
.
.
..name (not OK)
.
.
..radio1..name (not OK)

[brachford]

As promised, here's the solution ...

This solution will allow you to Embed Pixel Fonts directly into Standard Components (Ex: Button, CheckBox, ComboBox, Radio Button, TextInput, TextArea)


1) In you library panel -> Add Font
2) Be sure to give your font a name and select Export for actionscript.
3) Inserting the code below (into the frame in which your component resides) Embeds the font into EVERY/ALL components used (globally), which means all you need to do is enter the three lines of code and you're finished.
_global.style.setStyle("fontSize",8);
_global.style.setStyle("fontFamily" , "FFF Business");
_global.style.setStyle("embedFonts", true);

In the sample code above the Embedded (pixel) font is FFF Business (the name given to it in Step #2 above). Simply replace the number following "fontSize", with the size required for your pixel font to appear correctly. Many times '8' will be correct, but not always.

Hopefully these instructions help many others in the future.

Enjoy!