My talk about MojoFont at L.A. Flex User Group

Unfortunately the picture quality is not really good but if you want to know more about Font Embedding with MojoFont read my post about Font Embedding in Actionscript 3.

Example 1: Font Embedding During Runtime With SWF
Embedding a font with SWF has the advantage that it can be loaded on run-time. This will make the file size of the start-up application smaller and improves loading times. The font will be only loaded if there is a need for it. You will need to have Adobe Flash CS4 or higher for this example.
1) Open a new Actionscript 3 file in the Flas IDE and save it as American.fla
2) Open the action panel and type following:

[Embed(systemFont="American Typewriter", fontName="American",
	   mimeType="application/x-font", unicodeRange="U+0061-U+007A")]
var american:Class;
 
Font.registerFont(american);

systemFont is the actual name of the font on your system.
fontName can be named what ever you want to name it.
unicodeRange is used to define the avaible characters.

I used for this example only lowercase characters. You can change the unicodeCharset to add more characters. A good website to generate the required unicode is http://rishida.net/scripts/uniview/conversion.php

3) Compile the SWF. You will be asked for the Flex SDK Path on your first compile. If you have the Flex SDK press OK and compile again otherwise download first the Flex SDK from opensource.adobe.com/wiki/display/flexsdk. Now you should have a blank SWF.

4) Start a new Actionscript 3 file and save it as Fonttest.fla in the same directory as the other file.
5) Open the action panel and type the following code:

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, fontloaded);
 
loader.load(new URLRequest('AmericanTypewriter.swf'));
 
function fontloaded(e:Event):void{
	var tf:TextField = new TextField();
	tf.width			= 400;
	tf.embedFonts = true;
	tf.defaultTextFormat = new TextFormat('American', 30, 0x000000);
	tf.text = 'hey you';
	addChild(tf);
}

6) Save the file and compile it. You will now load the font from the SWF.

This example is based on the video tutorial from Lee Brimelow. Make sure that you watch his video Tutorial at http://gotoandlearn.com/play?id=102 to dive deeper into loading fonts with external SWF.

Download Sourcecode including FLA

Example 2: Font Embedded In Flash.

Using the [Embed] tag: The font needs to be accessible in your Actionscript project during compile time.

package {
	import flash.display.Sprite;
	import flash.text.AntiAliasType;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class FontEmbeddingEmbedTag extends Sprite
	{
 
		[Embed(source="Arial.ttf", fontFamily="foo")]
		public var bar:Class;
 
		public function FontEmbeddingEmbedTag()
		{
			var format:TextFormat              = new TextFormat();
			format.font                      = "foo";
			format.color                = 0xFFFFFF;
			format.size                 = 30;
 
			var label:TextField         = new TextField();
			label.embedFonts            = true;
			label.width                    = 300
			label.defaultTextFormat     = format;
			label.text                  = "Hi michaelfretz.com!";
			addChild(label);
		}
	}
}

Download Sourcecode

Example 3: The MojoFont Way
My favorite way of embedding a font into an Actionscript project is using MojoFont.
You may ask, what is MojoFont? MojoFont is an Eclipse Plugin for embedding Fonts, developed by Philipp Laeubli. MojoFont is still in private beta but will be released soon as a public beta.

Example 3.1: Embedding A Single Font For Basic Textfields With MojoFont
1) Apply for a private beta account at http://mojofont.badmojo.ch and install it as soon as you get the url for the eclipse update-site.
2) Start Flex or FDT and open a new or existing Actionscript 3 project.

3) Go to File -> Import ->Other

4) Choose MojoFont -> Import and convert Font

5) For the First Tutorial we choose the import mode: “Import a font with a single style”. This option will allow us to use only one style of th font. A single style font can not be used for HTML textfield. You can make a font bold or italic but to do that you have to import the font with “import font with multiple font style”. I will show the import of fonts for HTML textfield in the next example further down.

6) Choose a font you want to use and press “Next >”.

7) Select a location in your project where the compiled SWC should be saved. The path to this SWC will be automatically added to your project properties and if you decide to delete a font you have to delete this path too. (Right-click on your project name->Properties->Actionscript Build path->Library path) For the Charset Range we use “Default / All”. If you only need some caracters and want to keep the filesize low you can change the settings to “Predefined” or “Custom”.

8) A quick example how to use it will be shown before you press Finish.

9) This is how your Sourcecode should look like if you want to embed a font with MojoFont.

package {
	import flash.display.Sprite;
	import flash.text.TextField;
 
	public class MojoFontBasic01 extends Sprite
	{
		public function MojoFontBasic01()
		{
			var txt:TextField 	= ComicSansMSRegular.createTextField();
			txt.text		= 'Hi michaelfretz.com';
			addChild(txt);
		}
	}
}

10) The compiled version will look like that

Download Sourcecode

Example 3.2: Same As Before But With TextFormat

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class MojoFontBasic02 extends Sprite
	{
		public function MojoFontBasic02()
		{
			var txtFormat:TextFormat 	= ComicSansMSRegular.createTextFormat(20);
			txtFormat.color			= 0xff8c00;
			txtFormat.kerning		= 2;
			var txt:TextField		= ComicSansMSRegular.createTextField();
			txt.defaultTextFormat		= txtFormat;
			txt.text			= 'hi michaelfretz.com';
			txt.selectable			= false;
			txt.width			= 300;
			txt.rotation			= 20;
			addChild(txt);
		}
	}
}

Download Sourcecode

Example 3.3: Text As HTML Textfield

If you want to use HTML text with your MojoFont import, you need to use “Import multiple Font Style” instead of “Import a font with a single style”. This will bring you up this window.

You can choose for all styles a suitable font. You can even mix fonts in a HTML textfield. The rest will be more or less the same. Here the sourcecode.

package {
	import flash.display.Sprite;
	import flash.text.TextField;
 
	public class MojoFontAdv01 extends Sprite
	{
		public function MojoFontAdv01()
		{
			var txt:TextField = Helvetica.createTextField();
			txt.htmlText = '<strong>Hi</strong> <em>michael</em> fretz';
			addChild(txt);
		}
	}
}

Download Sourcecode

Example 3.4: HTML Text Same As Before But With TextFormat

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class MojoFontAdv02 extends Sprite
	{
		public function MojoFontAdv02()
		{
			var txtFormat:TextFormat	= Helvetica.createTextFormat();
			txtFormat.size				= 20;
			txtFormat.color				= 0xff8c00;
			txtFormat.underline			=  true;
			var txt:TextField			= Helvetica.createTextField();
			txt.defaultTextFormat		= txtFormat;
 
			txt.multiline				= true;
			txt.width					= 300;
			txt.wordWrap				= true;
			txt.rotation				= 30;
			txt.htmlText				= '<strong>hi</strong>
<em>michaelfretz.com</em>'
			addChild(txt);
		}
	}
}

Download Sourcecode

Live Demo

If you want to see a live demo of MojoFont join me at the LA Flex User Group meeting in Santa Monica January 13, 2010 from 7:00pm – 10:00pm where I will held a short presentation about MojoFont. We meet at 12304 Santa Monica Blvd, Suite 215A. California, USA.

or

Join us for the Los Angeles Flash User Group meeting on January 20, 2010 at 525 Venezia Ave. Venice, CA 90291 www.laflash.org where I will talk about FontEmbedding in Actionscript projects.

Thanks

Many special thank to Philipp Laeubli who is the developer and founder of MojoFont. Please visit his project website.

Font Embedding

Because most time you visualize data you need to write some text to it. If you have done any pure ActionScript projects in Flex or FDT you know this stuff sucks. The resulting code looks like this and it takes hours of googling to get to the right embed parameters/tags.

But now the way of font handling in Actionscript changed. My colleague Philipp Laeubli created a plugin for eclipse which makes font embedding a piece of cake. If your interested in this, just apply for a private beta account on mojofont.badmojo.ch.
Here a little example how to embed a font with the mojofont plugin.

Instead of writing a whole bunch of metacode and doing some strange font registration, you import your font, and then you can use ist like this: Helvetica.createTextField(). Thats it. All the nasty embedding code and other things are completely handled by the plugin which generates a simple to use and embed swc file.

Tweening
For the hole tweening I used the tweenlite library from http://blog.greensock.com/tweenliteas3/. In my opinion it is one of the best tweening libarys and very easy to use.

XML Loading
I wrote a XMLLoader class. The XMLLoader class loads the hole data of the XML into a String. As soon as its finishes with loading, it dispatches an event. With the getter methods its easy to recive the data and use it afterwards in your programm.

PHP File to generate XML
Many of you will ask why I id use XML. In my opinion its the easiest way of recieving data and its easy to generate it from a database. To generate the XML file I developed a PHP file. This file connects to a MySQL database and loads the whole content of the defined table.  At the moment you will have to define the used fields by hand. First of all, be sure you have all the needed fields in your database. Afterwards change the values in the begin of the mysqlToXML.php file. You have two options. 1: Make the PHP file look like an XML after loading it or 2: let it generate an external file. The first one is the better way if you change often data but dont have to many visitors. The option with the external file is a good option if you want to save database connections because you only ned to generate the XML file once you have changed some data. If you use the external XML file option, be sure that you have the write permission set on your webspace. After you generated your XML just make sure your XML loader class in your Actionscript project knows the path to the file. If you use the other option just add the path of the mysqlToXML.php in your Actionscript project.
Download mysqlToXML.php