Embedding Fonts in Flash CS4
We’ve been often asked how we embed fonts in out Flash Components, so we’ll do a simple step by step tutorial for Flash CS4 (AS3). We are using a MAC, but the same applies for Windows.
Step 1
Right click on the library and select New Font.
Step 2
After clicking the New Font item, the Font Symbol Properties window appears.
Select the font and the style, give the font a name and a size, and check Export for ActionScript.
Step 3
Create a Dynamic Text Field and give the instance a name. (we used the name txt)
Select the text field and the font you just created.
NOTE: If you embedded the font correctly, a * should appear at the right of the font name in the fonts list, and all embedded fonts are positioned at the top of the list, exactly as in the image below.
Step 4
The last step is to add the ActionScript code in your .as file or in the timeline. In this example we’ll add it in the timeline, although all our Flabell Flash Components use Classes. :)
// AUTO SIZE txt.autoSize = TextFieldAutoSize.LEFT; // SCROLLABLE txt.selectable = false; // MOUSE ENABLED txt.mouseEnabled = true; // HTML text txt.htmlText = "Flabell - New Flash Components Every Week!";
The code should be self-explanatory. You can download the source files here: Flabell – embedding_fonts_in_CS4.
This post has 67 comments | Post your comment
That is correct. You need to embed the right property for a particular font.
So if you need it as bold, you import the BOLD version of it.
Do your products take infos from fonts’ file? If I change name of font and leave a name of Turkish font, do application work?
If you embed a Turkish font, it works.
Does this work for AS3? It’s asking me to change my AS to 1.0 or 2.0. Can you explain how to do it for AS3? Thanks very much.
This is for AS3. ;)
You say this is for AS3 but Flylet is right: Flash CS4 will not let you do this without either changing to AS1 or AS2 or giving a ClassName instead of an identifier.
But if you give a ClassName you have to create a class for the font, and I can’t find info on what properties and/or methods that class needs.
Can you give us an idea how to do this in AS3?
Well, the above example is for CS4, AS3 – and as you can see it works properly. No need for a separate class.
You said “this is for AS3. ;)”
Actionscript 3 replaced using identifiers with Class names.
This tutorial uses actionscript 2.0 or lower.
Nope, it is for as3. :)
Hi … First, thank you Andrei for doing this. Youre doing us all a HUGE favor by sharing your knowledge.
Ive uploaded a screenshot of the Font Symbols Properties window here…. http://www.eliteeventscompany.com/images/no_id.jpg … so you can see what Im seeing.
Can you help?? ~Angel
Oh, I forgot to mention that I tried this with other fonts as well, and I get the same problem… no Identifier field available.
Yes, the identifier field is enabled only when an AS1 or AS2 project is created.
For AS3 you’ll need to just enter a Class name for the font and set the Base class to “flash.text.Font”. After you hit OK, you’ll find the font named the way you wrote under the Class name, with a “*” (star character) at the end.
If you don’t use runtime sharing, you can uncheck that checkbox at the bottom.
I hope this is helpful and you’ll enjoy the fonts in Flash.
This works slightly for me in CS4 (my text no longer vanishes) however it still wont display a bold version of my font.
I have imported both bold and regular versions of a font, the display as expected in the authoring environment, (and preview of the font) but on publish both appear as regular.
This is slightly better than the text vanishing but still dosn’t give me bold.
For bold text, you need to do the same thing, but make sure you give the font a different name, and select the bold property.
Like.. ArialBold for example. Same goes for italic.
For bold text, you need to do the same thing, but make sure you give the font a different name, and select the bold property.
Like.. ArialBold for example. Same goes for italic.
I have the same problem as Matt. I did it all but bold doesn’t show in my htmlText. If all the field is bold I see it, so I think bold’s embed. But if my html has a tag, everything’s regular. Any ideas?
Thank’s in advanced.
I work, loading swf files into my main flash, to incorporate the font, in all, it is cleared when I load a new swf, which has the same font!
why this happens?
what is the correct way to work with font in several SWF files?
I’m creating a symbol and exporting to other swf!
Not sure how you do it. But this is the way we do it and it works flawlessly.
I’d sweetie to be aware that too!
Thank you bobocel for the post!
It was straight forward and exactly what I needed…you are a gentleman and a scholar.
You only need to embed fonts for dynamic and input fields for Flash CS4 / Actionscript 3.0 right?
No, this was needed for CS3 with AS2 as well.
Hi i’m trying to follow this Tutorial but the problem is that I can’t name the identifier since Flash won’t let me.
Why not? How did you do it?
I have Flash cs4 and a document AS3.
Hope to hear from you soon.
regards,
Roy
Roy, what do you mean Flash doesn’t late you set the name?
I got more and more complicated with the fonts, I used khmer Unicode (http://www.khmeros.info) at the begining it’s ok but when i try to get from xml and show in the list nothing character.
Please email us the file so we can see what you did.
In Flash Mp3 Player, I write unicode xml file by vietnamese but it could not display. Do I have to change font in source flash? Or anyway to resolve this problem?
Please help.
Hi Ken, I have succeeded in implementing displaying Vietnamese in uft-8 coded XML. You have to embed Verdana font in every text field from the source file then export the new player. So follow the above for embedding the new font then go to library of source and embed text field with Verdana font one by one. Hope this can help you
Regards
Hi Hoai Nhan,
I did but it’s happened some errors. Can you send me your email with your changed flash that I check it?
My email: [email protected], admin cakhucvietnam.com. Thanks for your help.
Hi Ken,
I just sent it to ur gmail account. Look at my homepage: http://www.lotusmedia.net to see how I have implemented
I am using Flash CS4 (AS3.0) on Windows. The “Identifier” field is disabled, only “Class” and “Base Class” fields are enabled. If i specify the “Class” the text is not displayed any longer. What’s wrong?
I’m not sure I follow you. Did you follow the steps described above precisely?
well i tried to follow it precisely, but as Scott wrote, using AS3.0 i cannot specify the “Identifier” for linkage as described in the example as the field is disabled. Only “Class” and “Base Class” fields can be edited. If I use the “Class” field to specify the id, then it’s not going to work, i.e. no text is displayed by banner rotator.
Ok, I checked and some fonts don’t allow for an identifier, but there’s no issue, don’t add one.
The remaining steps remain available. Let me know if you have any other issues.
This is a wonderful post. Thanks so much. My embedded font text was visible when the SWF was viewed on a Mac, but on Windows, it disappeared. (This might have been a Flash Player version issue — I don’t know.) Luckily I had read your post here, and it solved the problem.
Note that my problem concerned a dynamic text field ON THE TIMELINE — I had embedded the font in the old way (using only the Properties panel). The ActionScript in the SWF is changing the text when a button is clicked.
So even though I was not using a Flash Component, I had to use the technique you have documented here.
This works good if I am putting the text field on the stage manually but what if I am building the text field in a class file? Say I created my own button and inside the button is a label and I want to use this method to format the text inside that button class.
How would I go about doing that?
You should attach the appropriate font to that text field. What matters is that the font needs to be embedded as we showed.
I think you should do more posts like this. Help is appreciated.
Adding to my bookmarks! An explanation is appreciated.
I`ve a problem with the fonts, too. Ihave on my mac 1100 fonts they are all shown in PS but just 200 are shown in Flash cs4 and cs5 how can I resolve the Problem?
Anybody an Idea?
Hello. I had same problem: bold dynamic text changed back to regular one. I embedded both of them, i attached them to right text and i saw them in my flash generate report. When I put them directly without change the text of dynamic text it worked, but when i changed the text, it didn’t. Someone could tell me where I missed?
Thank you so much before.
I have found a way to correct it. So, it looks like that although way that you mentioned works well on CS3, it doesn’t on CS4. For CS4, you need to embed bold font, and instead of using .text, use .htmlText and “your text here ” to produce bold text.
Thank you.
Thanks for this. It works perfectly. I think what I and possibly some others here need to know how to dynamically create the text field itself. With your tut the textfield is crated in the timeline and stored in the library – what if one needed to create 1000 of these?
Do you have the code to dynamically create the textfield?
Many thanks.
When I click on identifier for the new font, it gives me a message “this action is not supported by Actionscript 3.0. To use this feature , you must target ActionScript 2.0-1.0
September 30, 2010 at 12:31 pm
[...] need to embed if it's not a default font… Best to embed anyway, looks nicer on all PCs that way. Embedding Fonts in Flash CS4 – Flabell blog if you're on CS4 __________________ [...]
Hi there.
I am trying to embed the unicode to display Greek characters.
Steps I followed so far:
- Opened all XML files and saved them as utf
- Opened the .fla file and replaced the fonts in the library with Arial Greek font type.
- Changed the XML text into Greek chars.
When I test the .swf , instead of Greek I just get a blank text.
Any help??? I would really appreciate it..
ps. the poll is magnificent!!!!
something I forgot to mention.. I used Flash CS3 Pro
Sci-Fi-Si you would have to do them manually with this method. But 1000 fonts would make a HUGE swf file! :)
Antonis, please follow the steps precisely. (note the *)
I have a similar problem as fosforo.
I have a DynamicText field which I dynamically set the content of at runtime via .htmlText.
I am able to embed a font and have that be used by the field, but if the content for the field includes HTML bold or italic tags then that part of the text simply does not appear.
Is there a way to do what I need?
I’m afraid not. It needs to be a single type of font.
i made all the steps and i received only these “δ α” instead of “δα” i wrote, i embed a greek font but i receive the full name of the letter
ty very much
i received & d e l ta; &al pha ;
Hi,
Please make sure that the external files that store your Greek text have Unicode (UTF-8 or UTF-16) encoding. Also, if you used an XML file on the first xml tag you should have the following attribute:
encoding=”utf-8″
If still doesn’t work, can you please paste a link or email us at support [at] flabell.com. If you can, send us your files and we’ll figure what the problem is.
hello to all,
Could you pls tell me how to embed characters in dynamic textfield with as2 in cs4. i mean i want to add chines characters then what coding i have to write pls help me..
Thanks,
Vanita
Hi,
To use Chinese, you’ll have to embed a Chinese font, first of all. A font that has those special characters. This article was written to help you with this.
Then you’ll have to use that font for your dynamic text field. You can do that using the Flash IDE, in the Properties panel; you won’t need AS2 coding for this.
You’ll use the code just to enter some text in the text field.
Hi All, I’m using AS3 with CS4.
I’ve inherited a project with multiple runtime-loaded SWF files. I think our strategy is to embed as many fonts as we can but I’m not sure the actual implementation is sound.
Here’s what I can describe:
Our main SWF embeds .OTF fonts directly from disk. We have a set of these OTF files that are available to all developers of this project.
Authors of dynamic swfs (artists hooking up a new dialog box, for example), create dynamic text, but the font they choose from aren’t exported in that FLA file. They choose from one of the OTF fonts mentioned above, which are also installed as system fonts on our machines. The author also specifies that the proper characters (digits, punctuation, etc) are embedded in the text field.
When those runtime swfs are loaded and we want to replace their text (with something localized), I see that the textfield’s ‘embedFonts’ member is set to false. I use the font specified in the Textfield’s defaultTextFormat member to look up a mapping in our main SWF, and then poke an embedded font back into the default text field.
This kinda longwinded but it sums up how things work. My questions are:
1) When someone specifies a character embedding on a textfield in Flash, shouldn’t the AS3 representation of that textfield have its ‘embedfont’ member variable already set to true?
2) Is it even proper to specify a character embedding (character ranges) in the textfield if we’re not exporting any fonts from the SWF that contains that text field?
Thanks very much in advance,
Jeff
Hi Jeff,
I don’t understand everything you wrote about what you’re trying to do in your project, but, I guess, these would be my answers to your questions:
1) Yes, you have to set the embedFonts property to true
2) I don’t think you can specify character ranges when you embed an external font in Flash. You said you load the fonts directly from disk.
This will not work with certain fonts (e.g. Myriad Pro on Windows).
Hello Toby,
I tested Myriad Pro on Windows and it worked. Maybe the font you have is not good.
what font do I have to use to display arabic characters
We don’t know arabic fonts, but you’ll have to find one that can display the characters you need. I just searched on google and found this page:
http://freearabicfonts.com/Free_Arabic_Fonts
I’m not sure this is what you’re looking for since I’m not familiar with the language.
how can I change the width and height this XML Flash Voting Script?? I use setting2.xml file for my poll.
Pls help…need your respon as soon as possible…n thank u for your cool poll script!!!!!
Hi,
In the code you’ll find in our index.html file, you’ll just need to edit these two values:
var stageW = 560;//”100%”;
var stageH = 330;//”100%”;
I assume you copied our code and put it in your webpage. If you didn’t do it like that you’ll just need to set the stage size when you embed the component and update the componentWidth and componentHeight flashvars.
If you have trouble with this process, please buy a support ticket and send us the link, where the component is embedded in, at support [at] flabell [dot] com.
Enjoy!
Please help me. I want to use input text with my customized font.It is like utf-8. So how i do i please help me. I use flash software CS4. I am so not good write English. Please…
Hi,
You’ll just need to use that font for the text field, just like this tutorial explains at step 3. Of course, you’ll need to go through the other two steps as well. It doesn’t matter if it’s an input text field or a dynamic text field.
Leave a Reply
blog entries 
Products RSS Feed
Follow us on twitter
Senthil
August 17, 2009 at 10:05 am
But when you embed fonts and try to apply bold or italics through formating which never works, have you ever tested it