Pixel Everywhere

There are only 10 types of people in this world. Those who know binary and those who don't.

Solving Class Name Conflicts in Flex APEngine — January 20, 2011

Solving Class Name Conflicts in Flex APEngine

If you ever encounter two classes named Vector and Group under higher versions of Flex 3.5 from Tour de Flex’s ActionScript Physics Engine, then just rename the files using Flash Builder 4. It has a great way of refactoring in many ways. One of them is renaming files.

Try to create a new project and add a new directory to the Source Path under Flex Build Path properties. Right click the Vector class and rename it anything you like. Let’s say APEVector and APEGroup for the Group class.

When you rename these files, Flash Builder 4 will automatically update the files that are linked to it. It will change all the imports, variable declarations, instantiations, method returns and much more.

Now go and create those motor cycles. Enjoy!

Advertisements
Font Manager —

Font Manager

It’s a good practice to separate your embedded fonts so as not to bloat your main file. One example for this is the embedding of fonts that are contained on a particular .SWF file. This class will act as a font factory for registering those embedded fonts. It can also provide the style and weight properties of a certain standard font.

package Managers
{
	import Interfaces.IFont;	
	import flash.display.Loader;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.IOErrorEvent;
	import flash.net.URLRequest;
	import flash.text.Font;
	import flash.text.TextFormat;
	public class FontManager extends EventDispatcher
	{
		public static const REGULAR:String = "Regular";
		public static const BOLD:String = "Bold";
		public static const ITALIC:String = "Italic";
		public static const BOLD_ITALIC:String = "Bold Italic";
		public static const UNDERLINE:String = "Underline";
		//
		private var aFonts:Array;
		private var iCtr:int;
		public function FontManager()
		{
			this.iCtr = 0;
			this.aFonts = new Array();
		}
		/**
		 * Sets the target's appropriate fontFamily name according to 
		 * its current style and weight.  Assuming that the fontFamily
		 * naming conventions are:
* FontName Regular
* FontName Bold
* FontName Italic
* FontName Bold Italic

* @param target A DisplayObject that supports TextFormat. * @return The newly styled TextFormat. * */ public static function setStyle(target:*, style:String):TextFormat { var t:* = target; var i:int = t.selectionBeginIndex; var j:int = t.selectionEndIndex; var tf:TextFormat = t.getTextFormat(i, j); var name:String = tf.font ? tf.font : t.getTextFormat(i, i + 1).font; var prefix:String = name.substring(0, name.indexOf(" ") + 1); switch(style) { case FontManager.BOLD: tf.bold = !tf.bold; tf.font = prefix + style; break; case FontManager.ITALIC: tf.italic = !tf.italic; tf.font = prefix + style; break; case FontManager.UNDERLINE: tf.underline = !tf.underline; break; } if(tf.bold && tf.italic) tf.font = prefix + FontManager.BOLD_ITALIC; else if(!tf.bold && !tf.italic) tf.font = prefix + FontManager.REGULAR; t.setTextFormat(tf, i, j); return tf; } public final function addFont(name:String):Boolean { var i:int = this.aFonts.length; for (var a:int = 0; a < i.valueOf(); a++) if (name == this.aFonts[a]) return false; this.aFonts.push(name); return true; } public final function removeFont(name:String):Boolean { var i:int = this.aFonts.length; for (var a:int = 0; a = this.aFonts.length ? this.dispatchEvent(new Event(Event.COMPLETE)) : this.loadFonts(); } public final function get fonts():Array { return this.aFonts.slice(0); } public final function loadFonts():void { var s:String = this.aFonts[this.iCtr.valueOf()]; this.iCtr++; var l:Loader = new Loader(); l.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, this.onError); l.contentLoaderInfo.addEventListener(Event.COMPLETE, this.onFontLoaded); l.load(new URLRequest(s)); } private final function onFontLoaded(e:Event):void { var d:IFont = IFont(e.target.content); if (e.type == Event.COMPLETE) { if (d.regular()) Font.registerFont(d.regular()); if (d.bold()) Font.registerFont(d.bold()); if (d.italic()) Font.registerFont(d.italic()); if (d.boldItalic()) Font.registerFont(d.boldItalic()); } this.iCtr.valueOf() >= this.aFonts.length ? this.dispatchEvent(new Event(Event.COMPLETE)) : this.loadFonts(); } } }

Here’s the CSS format for embedding the fonts.

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face
{
	src:url("arial.ttf");
	font-family:"Arial Regular";
	embedFonts: true;
	embedAsCFF: false;
}
@font-face
{
	src:url("ariali.ttf");
	font-family:"Arial Italic";
	embedFonts: true;
	embedAsCFF: false;
}
@font-face
{
	src:url("arialbd.ttf");
	font-family:"Arial Bold";
	embedFonts: true;
	font-weight:bold;
	embedAsCFF: false;
}
@font-face
{
	src:url("arialbi.ttf");
	font-family:"Arial Bold Italic";
	embedFonts: true;
	font-weight:bold;
	font-style:italic;
	embedAsCFF: false;
}

Here’s an example of embedding fonts using a metadata on a .AS file that will be converted in to a .SWF file.

package Fonts
{
	import Interfaces.IFont;
	import flash.display.Sprite;
	public class Arial extends Sprite implements IFont
	{
		[Embed(source = "Fonts/Arials/arial.ttf",
						fontFamily = "Arial Regular",
						embedAsCFF="false")]
						private static const Regular:Class;
		[Embed(source = "Fonts/Arials/arialbd.ttf",
						fontFamily = "Arial Bold",
						fontWeight = "bold",
						embedAsCFF="false")]
						private static const Bold:Class;
		[Embed(source = "Fonts/Arials/arialbi.ttf",
						fontFamily = "Arial Bold Italic",
						fontWeight = "bold",
						fontStyle = "italic",
						embedAsCFF="false")]
						private static const BoldItalic:Class;
		[Embed(source = "Fonts/Arials/ariali.ttf",
						fontFamily = "Arial Italic",
						fontStyle = "italic",
						embedAsCFF="false")]
						private static const Italic:Class;
		public final function regular():Class
		{
			return Arial.Regular;
		}
		public final function bold():Class
		{
			return Arial.Bold;
		}
		public final function italic():Class
		{
			return Arial.Italic;
		}
		public final function boldItalic():Class
		{
			return Arial.BoldItalic;
		}
	}
}

And here’s the interface.

package Interfaces
{
	public interface IFont
	{
		function regular():Class;
		function bold():Class;
		function italic():Class;
		function boldItalic():Class;
	}
}

If you’re going to use the metadata embedded mechanism, just load and automatically register the public classes of the generated .SWF file such as Arial.swf using FontManager.addFont(“Arial”) method.

To use the setStyle method on a Flex 4 project, you can do so like:

<mx:HBox>
<s:Button label="Bold" click="FontManager.setStyle(this.txtTgt, FontManager.BOLD);" />
<s:Button label="Italic" click="FontManager.setStyle(this.txtTgt, FontManager.ITALIC);" />
<s:Button label="Underline" click="FontManager.setStyle(this.txtTgt, FontManager.UNDERLINE);" />
</mx:HBox>

Enjoy!