AS3 + Css + Embedded Fonts

If you what to see the the breadth and rich variableness of flash and as3, you need look no further than the multitude of methods hacks and approaches to dressing text in as3.

It one of  the flash platforms greatest curses and greatest assets, that it is one tool for many peoples, all from different disciplines, so there are a multitude of ways of achieving the same result.  There is a rich spectrum of user knowledge based solutions, from the no brainer way of dressed text, static text fields through to heavy scripted OOP Gandalf level coding.

Here’s what I set out to do.

I wanted my text in an XML file.

I wanted its appearance to be controlled by CSS, to allow for maximum flexibility, and comparability e.g  porting copy to or from Html for non flash browsers.

Firstly I looked into the ‘@ font face’ route within css, using url to an available ttf, oft font.  Although this may ultimately be the way forward, but in the time I had available it proved inconclusive, to be followed up at a later date.

For further reading have a look at the following links.

http://blog.typekit.com/2010/06/17/new-specimens/

http://webfontspecimen.com/

http://www.fontsquirrel.com/fontface/generator

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://www.miltonbayer.com/font-face/

Here’s what I eventually went with:

First embed a font, into an FLA libary http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/

In the css file reference the font family to the name you used in the library;

.para {

font-family: Serena;
font-size: 20px;
text-align: left;
font-weight: normal;
color: #990000;
}
In your as3 code include;
field = new TextField();
field.embedFonts = true;
You must included  ’ [ TEXT_FEILD_NAME ].embedFonts = true;’
Once you have imported your stlye sheet into flash, apply it to the textfield
public var sheet:StyleSheet= new StyleSheet();
field.styleSheet = sheet;
(sheet is the name I used in this instance).
Should be good to go.
Good tut for importing Css and xml text
http://active.tutsplus.com/tutorials/actionscript/build-an-actionscript-30-html-box-with-xml-and-css-support/
A great post about non library font embeding
http://mx.coldstorageonline.com/index.php?bid=48
Bookmark this on Digg
Bookmark this on Delicious
Share on Facebook
Bookmark this on Yahoo Bookmark
Share on FriendFeed

About The Author

30 something South East England / London Based Designer

No Comments

Leave A Reply



+ seven = 15