FontBook: AS3 Font and CSS stylesheet management class

I developed this singleton FontBook class to function as a font and CSS stylesheet manager for flash and flex projects. It loads fonts from an external swf and registers them so they can be accessed by the parent swf and all children of the parent swf. If a CSS Path is passed into the FontBook instance, FontBook loads and parses the external css stylesheet to use with the fonts.

FontBook should be used for managing text treatment in mini-sites and other multi-page/ multi-swf applications. By keeping the fonts separate from the content swfs and only needing to load them once FontBook helps keep file sizes low.

Implementation:

1. Open a new fla, right click in the library and select "new font"
2. Choose the font you wish to embed. Select "export for Actionscript" and give it a class name
3. Add as many fonts as you need
4. In the first and only frame of the fla, open the actions panel and populate a fontClassArray array with the class names of the fonts chosen to embed (NOTE: use the class names specified in the "export for Actionscript" settings, NOT the proper font names) :

   
   var fontClassArray:Array = ["MyFontClassName1", "MyFontClassName2", etc, etc];
   

5. Save the fla and export the swf (i.e. fonts.swf)
6. In the target application instantiate FontBook and pass the location of the font swf and css stylesheet to the FontBook constructor.

   public var fontBook:FontBook;
   private var _cssPath:String = "stylesheet.css";
   private var _fontsPath:String = "fonts.swf";
   
   fontBook = FontBook.getInstance(_fontsPath,_cssPath);
   fontBook.addEventListener (FontBook.FONT_DATA_ERROR, onFontDataError);
   fontBook.addEventListener (FontBook.CSS_DATA_ERROR, onCSSDataError);
   fontBook.addEventListener (FontBook.FONTS_LOADED, onFontsLoaded);
   fontBook.addEventListener (FontBook.CSS_LOADED, onCSSLoaded);
   
   private function onFontsLoaded(event:Event):void
   {
   trace (Fonts.enumerateFonts()); // will trace out the embedded fonts
   }
   

7. To retrieve fonts and stylesheet for use with htmlText:

   var tField:TextField = new TextField();
   tField.styleSheet = fontBook.css;
   tField.embedFonts = true;
   tField.htmlText =   "<'span class="cssClass">lorem Ipsum...<'/span>"
   // where 'cssClass' is a class style in the stylesheet
   

8. To retrieve fonts from FontBook for use with Flash's TextFormat:

   var tFormat:TextFormat = new TextFormat();
   tFormat.font = fontBook.fontByClass("MyFontClassName1");
    //where "MyFontClassName1" is the font class name in the fontClassArray of fonts.swf

download FontBook

A Calendar Wallpaper

Every year at Walt Disney Parks & Resorts Online we get asked to create a company desktop calendar for internal use. This year I was asked to create a piece and I chose June as it is my birthday month.

My intention here was to play on the reversals that happen in June. On June 21, the summer solstice in the Northern Hemisphere, the sun begins to reverse its path across the sky. An observer who has watched the sunrise/set position move from south to east between December and June will now see the sun reach a standstill and within a few days begin to move from north to south across the horizon. As a result of the solstice, the days will begin to shorten (i.e. less periods of sunlight) and the moon begins to gain dominance over the northern hemisphere sky.

So reversals is the driving force behind this artwork. Hence, I have the female figure (Tinkerbell) created from fire (traditionally a solar and masculine element/force), while the male figure (Mickey) is reflected in the water (traditionally a lunar and feminine element/force). Reversals in gender according to traditional symbolism! Also, you may notice that Mickey and his reflection form a crescent moon, a little visual wink speaking to the increasing periods of moonlight that happen after the summer solstice. Finally, as a final pun on reversals, I placed the Sorcerer from Disney's Fantasia in the upper left. For those who do not know, this characters name is Yensid, which, fittingly, is Disney spelled out in reverse!

Phidgeting Around

We know Flash can do some pretty amazing things on our computer screens, but now it may be time to start thinking outside the box! If you haven't heard about phidgets yet, I'm guessing you soon will. Simply put, phidgets are low-cost "plug and play" building blocks composed of USB sensing and control for your PC. You start out with an interface module and attach to it as many sensors, motors, and other gadgets as you desire. The possibilities are only limited by your imagination. You can create anything from a automated sprinkler system for your home to a wearable interface for playing games. The greatest things about phidgets is their ability to be programmed by several languages including ActionScript 3!

With phidgets we can now start thinking about creating interfaces for just about anything. Imagine controlling your home entertainment center or home-made robot servant through a flash/flex application.

Here is a youtube video showing the interaction between various phidget sensors and a 3D object in Papervision:

Check out www.phidgets.com for more information and the Actionsript API for phidget programing.

Disneyland's Summer Nightastic Mini site

This mini site for the Summer nights and Disneyland campaign just launched today. I worked with another developer on the project which had a rather exigent deadline to say the least. We chose to adopt the Pure MVC coding framework for development and IMHO it was a great success as it allowed us to rapidly develop the site infrastructure while simultanously working on visual compents under the tight deadline. The site is entirely deep-linked using swf address, meaning that the url will change even within the flash. This allows for a fully functioning back button and determines the behavior of the flash (i.e. what carousel item or detail page to open to) based on the url.

Be sure to check out the carousel pages, particularly the "New This Summer" section to see an interesting use of audio in a faux 3-D carousel.

You can check out the site here