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!

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!

Local SVN — January 13, 2011

Local SVN

In this tutorial, you’ll be able to setup a new SVN repository that’s residing on your local directory for your projects so you’ll no longer be creating duplicates for your project’s backup and constantly changing their names using a date token and such. Plus you’ll be able to merge, revert and commit your changes on the fly.


1. Download Tortoise SVN (currently at 1.6.6)
2. Let’s assume we have an existing project called MySpecialProject anywhere in your hard drive. Be sure to back up this folder for now, so you’ll have a copy if you’re unsuccessful in these following steps
3. Create 1 new directory under My Documents called SVNLocalRepository
4. Inside SVNLocalRepository, create 2 new directories:
– MySpecialProject (the same name as your existing project)
– Tmp
5. Right click the newly created MySpecialProject folder, select TortoiseSVN and select Create Repository here
6. Inside Tmp, create 3 folders, tags, branches and trunk
7. Cut and paste all files and folders inside the original MySpecialProject where your existing project files are and transfer them all the way to the newly created Tmp’s trunk folder. By now, your original MySpecialProject folder should be empty. Don’t worry, once we’re done, we’re going to import the versioned MySpecialProject from the repository
8. Right click Tmp, select TortoiseSVN and then Import…
9. Enter the full path of the newly created MySpecialProject repository with an initial path file:/// in the URL of Repository. So in this case it’s file:///My Documents/SVNLocalRepository/MySpecialProject. Your current project is now in the SVN local repository
10. To get started, go to your original MySpecialProject folder, right click and Checkout from the URL of Repository file:///My Documents/SVNLocalRepository/MySpecialProject
11. Remove your project backup that’s stated in step 2
12. Remove the Tmp folder in step 4

To unversion your checked in project, right click the root folder of your project, which is My Documents/MySpecialProject select Export and point to the same exact project folder. It should prompt you whether to unversion the selected project or not.

Enjoy!