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

Adventures By Disney Redesign

This redesign of the Adventure By Disney recently won a Internet Advertisement Award for Best Travel Site. I designed and developed the flash media for this site. I am particularly satisfied with how the regional page slideshows turned out as they depart from the traditional slideshow paradigm and present a unique and engaging user experience.

Here is the link to the site

Disneyland's Celebration Central

I worked in conjunction with several Flash designers/developers to build this mini site for Disneyland. The project goal was to create an online application to help guests plan their day at the park and send invitations to their friends. All in all it turned out to be a fun playful application. I specifically developed the scrapbook navigation, papervision3D Showcase carousel, and a custom messaging system.

You can check out the site here

Towers of Brahma Game

A few months back, I came across a puzzle that I could not stop playing. The puzzle goes by various names: Towers of Hanoi, Towers of Brahma, and Towers of Benares. Apparently there is a legend connected to this puzzle. It states that there is a Hindu temple with a room containing 64 discs and three pegs. The priest of Brahma are charged with moving the stack of discs from the first peg to the third, one at a time, and only placing smaller discs atop larger ones. According to the legend, the completion of the last move will herald the end of the world. If the legend were true, and if the priests were able to move disks at a rate of one per second, using the smallest number of moves, it would take them roughly 600 billion years to complete the puzzle. Naturally, I decided to build the puzzle out in Flash.

The objective is quite simple: Move the stack of discs from the first platform to the third platform by stacking smaller discs atop larger ones. The puzzle begins with three discs. Each time you complete the puzzle, you enter a new level where an additional disc is added. Easy, right? But trust me despite its absolute simplicity, it is addicting… and a huge waste of time.

You can check out the puzzle in two slightly different versions. The first one is themed for the holiday season as the “Build a Snowman Game”. You can play it on the Disneyland Resort Holiday minisite, and the second, “Order a Short Stack” themed with photography and graphics from Disney’s Animal Kingdom, is the feature monthly game for Walt Disney World's Backstage Pass.

Create a username, password, login and play!