undefined-type

Runtime Fonts for Flash is a wonderful way when building apps, even better if you are as me and creating international apps for a lot of countries, you have the language supports and the problem with characters in fonts when staring to look at Greek, Japanese, Korea, Chinese and so on. I have a old Runtime font for CS3 that works pretty well. But when starting to use CS4 I wanted to improve the loading and sharing.

So the idea was to use Flex to compile Font SWF files, a big problem when I use Flash CS4 (fp9) and Flex 3. Flex will not recognize my font SWF file, it will also not recognize my local fonts to embed bold/italic font sets. Using an exported CS3 (fp9) file it works just fine.
Note; fp9 = Flash Player 9.

So lets look of how to do this.
First we need to create our font file.
1.) Create an Flex ActionScript project (I use framework 3.2)
2.) The Class name will be something that we will get later so I renamed my as file to FontHolder.as
3.) Remove the constructor and add the embed tags, example below. Note the unicodeRange tag, these are used to select characters to be embedded, remove to embed the entire font.

package {
	import flash.display.Sprite;
 
	public class FontHolder extends Sprite
	{
		[Embed(systemFont='Verdana', fontFamily='Verdana', mimeType='application/x-font', unicodeRange='U+0061-U+0074')]
		public static const verdana_regular:Class;
 
		[Embed(systemFont='Verdana', fontFamily='Verdana', mimeType='application/x-font', fontWeight='bold', unicodeRange='U+0061-U+0074')]
		public static const verdana_bold:Class;
	}
}

4.) Now you have your font SWF file to use for the project.

So with your font file it’s time to use it in the project. In this example I use my Flex 3 as CS3 development tool., this is because I create Flash Player 9 project. You can of course use only Flash IDE or any other kind of code editor.
1.) Create a new ActionScript project, change the SDK to CS3.
2.) Click next, “Main source folder”, type “src”, this is just to put the files more pretty =), Click Finish.
3.) Create a CSS file that will control the fonts. “default.css”. Just add two classes that we can work with.

h1{
	font-family: Verdana;
	font-size: 24px;
	font-weight: bold;
}
body{
	font-family: Verdana;
	font-size: 12px;
}

5.) Download the FontManager.swc file and add it to your project.

Add SWC HowTo for Flex
6.1.) Create a folder called swc in project folder.
6.2.) Place the FontManager.swc file into the created folder.
6.3.) Right-Click on project folder and select properties
6.4.) In menu choose “ActionScript Build Path”, Choose the tab “Library path”
6.5.) Click on “Add SWC Folder”,  Select the created swc folder and close the windows, all done.

Add SWC HowTo for Flash
7.1.) Create a folder called swc in project folder.
7.2.) Place the FontManager.swc file into the created folder.
7.3.) Open Flash and Publish Settings.
7.4.) Choose the Flash tab and click on Settings next to the script combobox.
7.5.) Choose the “Library Path” tab and add the swc file to the list, all done. 

So, everything is there. How am I using it? Well, this is a dump on the project playground.

To be able to use the fonts they are needed first to be loaded. By default this is the structure for font swf and css file named default. They can be changed by FontManager.name = ‘default’ (the name) and the path with FontManager.path = ‘fonts/’.

The easiest way is to just get the singleton and load it.

var manager:FontManager=FontManager.instance();
manager.addEventListener(Event.COMPLETE, onManagerComplete);
manager.loadStandalone();

When it’s loading just send the textfield, style and text to the FontManager, you can add only textfield and text if you want to add e.g. multiple styles to one textfield.
Here’s some examples.

private function onManagerComplete(event:Event):void
{
	var tf:TextField = new TextField();
	tf.autoSize = TextFieldAutoSize.LEFT;
	tf.border = true;
	tf.rotation = 6;
	FontManager.instance().register(tf, "h1", "abc");
	this.addChild(tf);
 
	var tf1:TextField = new TextField();
	tf1.autoSize = TextFieldAutoSize.LEFT;
	tf1.x = 150;
	tf1.border = true;
	tf1.rotation = 6;
	FontManager.instance().register(tf1, "body", "abc");
	this.addChild(tf1);
 
	var tf2:TextField = new TextField();
	tf2.autoSize = TextFieldAutoSize.LEFT;
	tf2.x = 300;
	tf2.border = true;
	tf2.rotation = 6;
	FontManager.instance().text(tf2, "<h1>abc</h1>\nabc");
	this.addChild(tf2);
}

Flash, Flex cs4, dynamic, Flash, Flex, font, runtime, sharing

I using ANT + SVN tasks a lot for compiling the startup for projects. Took me a while to setup it to work on MAC but the solutions was pretty easy. This will work on a PC as well.

What you first need.
You need the ANT plug-in and you can get that from Eclipse JDT Development
1.) Open Flex Builder
2.) Help -> Software Updates -> Find and Install…
3.) Select: Search for new features to install
4.) Mark: “The Eclipse Project Updates” and click Finish. (url if needed)
5.) Expand the tree “Eclipse 3.3.2″ or newer.
6.) Find: “Eclipse Java Development Tools”, Mark and install.

This is what you do.
1.) You will need SVN Ant, and for some actions it help to add the jakarta regexp, jakarta oro, commons, commons-net packages. To make it simple, grab this zip file.
2.) Open “Flex folder”/plugins/ and create a folder “svnant” and place all the files.
3.) Open Flex -> Preferences -> Ant -> Runtime
4.) Select “And Home Entries” and then “Add External JARs…”
5.) Select all the JAR files you copied to /Flex Builder 3/plugins/svnant/
6.) Create a new project in Flex. Place the build.xml file in the project root.
7.) Right click on the build.xml and select Open With -> Ant Editor.
8.) Set your properties in the top and then right click on getSVNCode in the “Outline window”, Run As -> Ant Build.

TIP.
ANT scripts can grab properties files and run ANT tasks from other ANT files. So you could setup a structure how to read scripts and unique project data to make it more generic.

Documentation to read.
SVN: http://subclipse.tigris.org/svnant/svn.html
ANT: http://ant.apache.org/manual/tasksoverview.html

Flex ant, Flex, svn

Having problem when developing Flex sites with the memory, is it to slow? No probs, lets kick it up a notch.

1.) Go into Flex Package Content, CTRL+”Mouse Click” on the Flex Builder 3 file and select “Show Package Content”

2.) Go into Contents -> MacOS and open “FlexBuilder.ini”.

3.) Change memory to what you want.
-Xms = Minimum Memory
-Xmx = Maximum Memory

So change the Xmx to a higher value, e.g.
-Xmx1024m

Ant Script
This doesn’t work if memory isn’t enought for running ant scripts. If this is your problem, try this.
1.) Open Flex Builder
2.) Window -> Preferences -> Java -> Installed JREs
3.) Mark the JVM package that you are using when running the Ant script and click “Edit”.
4.) Add memory properties to the “Default VM Arguments”, e.g. “-Xmx1024m”.

Flex Flex, memory

Did you know that Flex Builder has support for comparing file (even from different projects) and keeping a local history for your files without that you need to use SVN/CVS.

Example #1 : Local History
1.) Right click on your file.

2.) Select Compare With -> Local History
3.) Select when you want to compare with.

4.) Do the comparison =)

Example #2 : File Compare
1.) Select 2 files and right click.

2.) Select Compare With -> Each Other
3.) Do the comparison =)

Flex compare, Flex, versions

Flex Builder doesn’t have all the tools for your development, take XML for e.g.
So here is some plugins that might help. To install:
1.) Open Flex, Goto menu Help -> Software Updates -> Find and Install.
2.) Select “Search for new features to install”.
3.) Add a “New Remote Site…”, enter a prefered name and the url.
4.) Mark the site checkbox and Finish next and then just follow the instructions.

Aptana
It has some XML, JavaScript, PHP, Ruby on Rails, AIR and so on. The best thing that it’s totally free as long as you can stay away from the Pro version.
Install Path: http://update.aptana.com/install/3.2/

Subversive
Excellent SVN tool for your development, note here that Aptana has the plugin “Subclipse” that as well is a SVN software. Don’t know why but I like subversive more.
Install Path: http://www.polarion.org/projects/subversive/download/2/update-site/

Flex Flex, plugin

I’ve played around a little with Flex 3 Builder. I love the FDT plugin to Eclipse. But I think it’s a little to expensive and for having a use for it I need the enterprise to get debugger functionality.

So I started to search and to play around with my Flex 3 Builder, why can’t I use this??? Well, as it looks like it’s actually possible.

I created a little video tutorial how to set it up. This is my first video tutorial so sorry if it’s a little strange. If anyone got some good tips of how to create video tutorials please let me know because this was harder than I thought. The files are very big so will try to record them all over.

Read more…

Flash, Flex development, Flash, Flex, tool

Did some testing with Papervision 3D – Great White (2.0), strangly when I change my dataProvider for the Menu the memory kicks up a bit and never goes down. Tried to add weak listeners and nothing worked.

Then I started to look at the Profiler, by setting a “Memory Snapshot” in the end after a lot of clicking I can compare the 2 Snapshots and saw that the 2 classes RenderRecStorage and Vertex3DInstance was never collected by the garbage collector.

Using Flex 3 I can search All Files in the project and noticed that it’s the BitmapMaterial class that is never destroyed, even if I remove the DisplayObject3D;s from the Scene.
So I simply put all the material in a Array and when removing the DisplayObject3D from stage I make sure that I run *.destroy(); on the BitmapMaterial classes.

So this is how it looked like before.

And now. Problem solved, the memory profile looks like it should

Flex Flex, profiler

When using viewstack I notice that it shows to early for me. The mxml page that I want to display is to heavy to create so the page shows up and isn’t completly ready too be shown.

Problem here is that the viewstack has to many private functions so it’s not possible to override the functions needed. This is my solution.

1.) In every mxml to be shown i created build(); and destroy(); functions. These are used to add listeners, set text, remove listeners and so on. I also added a variable :
public var INITIALIZED:Boolean=false;
Then to show that my build () function has run I broadcast an event.
It looks like this;

public var INITIALIZED:Boolean=false;
public function build() : void
{
    this.INITIALIZED = true;
    dispatchEvent(new Event(Page.INITIALIZED));
}
public function destroy() : void
{
    this.INITIALIZED = false;
}

Then I extend the viewstack that the pages lies in. on addChild I added my listener. Override the validateDisplayList to make sure the build function is runned and in the listener I showed the page.

override public function addChild(child:DisplayObject):DisplayObject
{
    child.addEventListener(Page.INITIALIZED, this.pageInitialized);
    return super.addChild(child);
}
 
override public function validateDisplayList():void
{
    super.validateDisplayList();
    var child:Object = Object(getChildAt(selectedIndex));
    if(!child.INITIALIZED)
    {
        child.visible = false;
        child.endEffectsStarted();
        Object(child).build();
    }
}
 
private function pageInitialized(event:Event):void
{
    var child:Container = Container(event.target);
    child.visible = true;
    child.dispatchEvent(new FlexEvent(FlexEvent.SHOW));
}

Flex delay, Flex, latency, viewstack