Well, if you're reading this post, you've probably have already searched a dozen web pages to find one final good solution for embeding fonts in flash in the most appropriate way.
be happy, you have just found it finally here I try to talk about what I have understood from fonts and how to embed them into your flash. (Personally, I don't code in flex but this method will also work in flex of course)
what you gotta know, well of course you know, is that every font usually has four faces, regular, bold, italic and bold italic. some fonts don't but let's talk about Verdana which has all the faces.
I'm not a fan of importing anything into my FLA libraries and I try to code as abstract and dynamic as possible so I'm going to embed fonts with the flex approach of:
[Embed(source="verdana.ttf", fontFamily...
ok, what I'm doing is that I will be using a lot of fonts in an application that I'm building and I don't want to load up all the fonts into the main file and instead I want to load fonts only when they are needed or asked for.
so, I open a new FLA file and on the first frame, type the below code:
Now, let's see what is happening exactly. Firstly we have source="verdana.ttf" .This is the path to your font file and in this case, I have put the font file where I have my FLA. note that only .ttf files can be used (or you tell me if I'm wrong?!).
then we have fontFamily="Verdana" and this will be the font name you'll be using in your project to call the font.
if you're embeding a regular font, that's all and you're done but if you're embeding another fon't file like verdanab.ttf which includes bold verdana, you have to use the folwloing fontWeight="bold" also when embeding italic version, you should use the follwoing fontStyle="italic" and even use both of them if you're embeding bold and italic version together anyway, the above code will work fine.
that's it, just save the file and test your movie... if you're doing that in a flash IDE, most probably you will see an error plus a warning page saying something about some flex library path lab, lab, lab... just feel relax and hit the button "update library" and hit "Ctrl+Enter" again and this time you won't see any error message... that's it you're done.
now you can simply load your swf file into your project and use the "fontFamily" attribute to show the font
If you have read the previous posts, you know that we are trying to build a drop down menu and till here we have the scrollbar ready. and as you know we need a container for our items which are going to be placed under the drop down menu. so we here we create a Box class which enables us input three different parameters in it. Of course we are going to make the box in a way which the parameter are optional so in result we can have different kinds of Box instances which all may look different when we change the input.
we need a class which itself can be used as a MovieClip so we will make sure to extend the MovieClip class. I thought that it's not always a good idea to create dynamic classes through library and reference them via new class() as little by little they can make our code dirty, so wherever we can create classes which they can act as a movieclip or something, it would be better to just extend it.
Alright, for our box to appear on the stage, we will use the follwoing.
myBox.floorWidth > will be used to set our box's width myBox.floorHeight > will be used to set our box's height myBox.font > will be used as our font but remember to create an empty dynamic text object and place it somewhere off the stage and embed the characters you would need in it. You need to do this because in the class later you will see that we will embed the fonts. (Some where I read that it is possible to embed fonts dynamically into classes which was not possible in SA2. I will look into that later as it will be another nice improvements in AS3) myBox.fontSize > This will be the size of our fonts in the Box myBox.fontColor > This will be the color of our fonts myBox.addInfo({}); > I like this part a lot! as we can call the addInfo method within the Box class and add our information to it easily as you can see the sample above. Note that we want our Box class to accept optional features so if we insert "--" for the object values, it will simply ignore it which in result you can have a Box with thumbnails and label and details all available or just a label you can find the final look of our box below.
Notice that we have added no mouse events because OOP is telling us not to make the classes very complicated. so we will just have a box which shows the input. later if we needed a Box which should do something on a click or something, then we can nicely extend our current Box and add listeners to the new sub class.
And here is the Box class below.
As you see, in this class I have learned how to deal with a couple of important functionalities like TextField and Loader which I try to give some brief explanation on them.
then, introduce your variable in the class block which will later hold your string.
protected var myLable:TextField;
protected var myFormat:TextFormat = new TextFormat();
Note that in this example, "myLable" will hold our text string later and myFormat will hold all the necessary properties for the style of our text.
After that you should start the text field class by calling new TextField(); and set any different settings you want for the text field (This is NOT the style of your text but the properties of the text field itself)
There are a lot more properties for text fields that I'm sure you can easily find the list in flash's help documents, but here I have mentioned just the properties that I needed to set in my Box class. so feel free to play around with different properties, I assure you that it's will be fun
OK, after you have your text field set, you need to set the format (or the styling of your text) ready.
After you set the text field and the format ready, it will be the time to link these two objects together like this.
myLable.defaultTextFormat = myFormat;
You're almost done, now insert your string in plain string or html like this.
myLable.text = "my first text!";
myLable.htmlText = "my <b>first</b> text";
That's it, I remember a couple of years ago when I was learning AS2 and found about how text fields are organized, I used to say why we should do a lot of work to display a simple text?! well, these things are necessary, every piece of them are necessary. Computers are dumb, we need to tell them every details
And by the way, please note how differently AS3 treats the auto size thing... I'm not going to talk about the details here, I'm sure you will find a lot of detailed articles talking about other small things here and there, here you just understood how to make a text field appear on your flash movie. If you found something nice with it, make sure to let me know though!
Anyway, there will be a lot of talks about text fields later as in our application we are going to do a lot of crazy things with the text fields.
here I try to talk about what I have understood from fonts and how to embed them into your flash. (Personally, I don't code in flex but this method will also work in flex of course)
My Flash Lab