Pixel Everywhere

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

LocalConnection Bug In IE — September 29, 2011

LocalConnection Bug In IE

If you’re planning to communicate two Flash movies using the LocalConnection class and constantly removing the other Flash movie by removing its HTML tag container, you need to close the connection first.  Unlike Firefox, IE has a tendency to store the previously opened connections.  Otherwise you’ll have a connection that looks like it’s intermittent or on a certain on and off interval every time you open a new connection.

Have fun!

Advertisements
Using htmlText in Flash AS3 CS Versions —

Using htmlText in Flash AS3 CS Versions

There’s a tricky part in using the htmlText property of a text field when using any latest versions of Flash.  One thing to point out is that if you’re not using an embedded font to render an htmlText property of a text field, its  only available characters will depend on another text field that’s being on the stage that’s not using htmlText.  Try this:

1.  Place two dynamic TextFields in the stage and name one as myTextField

2.  In the Actions Panel, type in myTextField.htmlText = “<b>hello world</b>”;

3.  Go back to the stage and manually enter a text to the TextField that has no instance name.  Try placing just one letter like “o” without the quotes

4.  Preview the movie and see what happens to the myTextField’s value and the style.  Looks weird huh!

So, to correctly use htmlText, do the following:

1.  Embed the needed fonts

2.  Use device fonts

*A note on device fonts is that they won’t work on masking.

Enjoy!

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!