All your fonts are belong to us...

Overview

There is quite a lot going on here, so I'll keep the explanation and example simple. In a nutshell we are going to make a Flash applet talk to JavaScript and vice-versa using External Interface.

  1. Ok so what's going on here?
    • We're going to print out a list of all the fonts you have installed on your computer. To do this some functionality from both Flash and JavaScript is required.
  2. Steps involved to achieve this...
    • If a few client side conditions are met the SWF is embedded...
    • ...to do that we use the SWFObject API to create a new SWF object with some attributes and parameters, and insert that into the DOM.
    • The SWF will then load, initialise and say hello to the Web page, by calling the JavaScript function: init.
    • Init then calls an exposed function from the ActionScript API via a wrapper function in the SWF called getSystemFonts (pretty obvious what this does).
    • We then use jQuery to append a list of all fonts installed on your system to the screen.
  3. Some things to note:
    • I will probably post a much better explanation than this sometime in the future.
    • It's very important we execute any scripts and calls after the page has fully loaded, we will use the AJAXLibs API to listen for the DOM event onLoad and start our script after that.
    • The first thing we need to do is check if the client has the correct version of the Flash Player Plugin installed, this example requires Player 9 or greater (release candidate 31+ works on most major Linux browsers). You should see a message if the plugin is out of date or not installed.

Files, Links & Downloads

Resources