shared font library, programatic textfields, and css

Filed under Lab Work, Programming | Tags:,,,,,

recently, i was tasked to do a gallery of images with captions. A few cavates to the request:

  1. we must use a shared library.
  2. we can not embed fonts to the working fla
  3. captions must be html enabled

…and so begins the dissection of Flash and Fonts Read the rest of this entry »

Embedding fonts (TextFormat vs StyleSheet)

Filed under Lab Work, Programming | Tags:,

This always gets me confused, so i have to write it down now. For me, it’s alwasy a matter of trial and error to get those frustrating fonts to embed correctly into flash files.

Situation: You have a font (or few) in your Library. In order to use that obscure font that nobody would have installed, you have to embed the font into your text field. However, after doing so, it either gives you that ugly system defualt (Roman Times, ugh) or nothign at all.

Solution(s): There may be two, depending on how you are approaching the text fields’ need for the font(s). Remember, using TextFormat vs StyleSheet have different ways to declare those fonts that you are trying to pull from your library. The good news is they both need the magic embedFonts=true . After that, things change…Let’s start with TextFormat.

TextFormat:


The image above is a snapshot of some fonts in the library. 1 is what you are going to call this font in terms of your styling, 2 is the way your operating system knows this font. (improtant for style sheets). In this case, the operating system knows this font as Paskowy (it’s a cool Barcode looking font). To really exagerate this exercise, i choose to name this font BarCode in the library. You can name it whatever you like…it’s just for the library. Now the fun part- highligh/right click the font you want to embed:


Choose ‘Linkage’. It is here that the magic begins. Check the ‘Export for Actionscript’ box…give this font a class name…it is this class name that you will need to declare when you are ready to use this font.


Like with the properties, i chose to give this a class name of BarCode…click ok, and prepare to add your code (save your file).

For the sake of time i am simply showing an example snippet of code where i create a text field and apply the new format:

private function button(title:String):MovieClip
{
var mc:MovieClip = new MovieClip()
var tf:TextField = new TextField()
with(tf)
{
mouseEnabled = false;
autoSize = 'left';
embedFonts= true;
defaultTextFormat = tformat();
text = title;
alpha=0
}
mc.addChild(tf)
return mc;
}
 
//text format
private function tformat():TextFormat
{
var bc:BarCode = new BarCode(); //FONT IN LIBRARY OF FLA
var tf:TextFormat = new TextFormat()
tf.font = bc.fontName;
tf.size = fontsize;
tf.color = 0xffffff;
return tf;
}

StyleSheet: The style sheet is a bit different. Obviously, you have to import that stylesheet first. While not difficult, i am not going there today. (later, though)- As well, the text field will need the htmlText, as opposed to the text property. Ok, so, here are the main differnces. The text field is much simpler to build

var tf:TextField = new TextField()
with (tf)
{
tf.width =100;
tf.autoSize='left'
styleSheet = PrimaryAssets.style;
embedFonts = true;
htmlText = title + date + content;
}
addChild(tf)

knowing what we know from the snapshots above, refer back to the first (with numbers 1 & 2)- It is #2 that you will be using IN YOUR STYLE SHEET . You do not need to declare a new BarCode() instance.

p
{
font-family:Paskowy;
font-size:10px;
color:#ffffff;
}

That’s pretty much the points to note

UPDATE (Nov23-2008)

just to note for mac users…if you plan to use css, be sure you are calling the correct font name in terms of how he OS sees things. For example Flash lists my Avant Garde Book BT like this:

while my os sees things like this (note the name difference for AvantGarde):

in terms of calling the embeded font to a flash TextField, you must use the OS style in your css.

Letterize [random text letter effect]

Filed under Lab Work, Programming | Tags:,,,,

letterize in action

letterize in action

i always liked the random letter effect, so i decided to give a go in AS3 and make a class of it. All you have to do is pass the text field…i have not tested it on an html text field…(hmmmmmm, looks like i just found the next version)-Anyway, it’s pretty straight forward… for the demo you can update the text to be whatever you type, adjust the speed, and play with random vs orderly. The orderly version was more straighforward than the unorderly… could probably be cleaner, but this will do.

source is here

sample is here