1.) First look on how to setup and use the FontManager
2.) Download UnicodeHexCreator I created to create the unicodeRange.

The AIR Unicode app is used to create the correct unicode range to optimize the amount of bytes that is needed to be loaded. To get the range it’s really simple.

1.) Copy/Paste your entire XML file to the input field (top field)
2.) Select font to use and set class name.
3.) Press convert
4.) Copy/Paste the unicodeRange to the Flex Project that creates the font file.

Download UnicodeHexCreator.

1.) Get the SDK
1.1.) Goto http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3/
1.2.) Download latest “stable build” and choose the “Adobe  Flex SDK”.

2.) Install the SDK
2.1.) Unzip and place the files under /Applications/Adobe Flex Builder 3/sdks/
2.2.) Open /Flex../sdks/flex_sdk_3.4.1.10084/frameworks/flex-config.xml
2.3.) change to, line 17; <target-player>10.0.0</target-player>
2.4.) change to, line 52-54;
<external-library-path>
<path-element>libs/player/10/playerglobal.swc</path-element>
</external-library-path>

2.5.) change to, lines 70-74;
<library-path>
<path-element>libs</path-element>
<path-element>libs/player/10</path-element>
<path-element>locale/{locale}</path-element>
</library-path>

3.) Setup Flex
3.1.) Open Window->Preferences->Flex->Installed Flex SDKs
3.2.) Add new SDK and choose the path that you copied to the Flex/sdks folder.
Lets create a Project and test it out.

4.1.) Create a new Flex Project.
4.2.) Right click on the project and choose Properties->Flex Compiler
4.3.) In the Flex SDK version, choose Use specific and Select the new SDK.
4.4.) To help the express install make sure to update the “require flash version”.

Now you are done to Rock n Roll !!!

Wanna try it? Test the 3D functionality.
<mx:Canvas backgroundColor=”#3FCEDF” width=”110″ height=”89″ x=”304″ y=”184″ rotationY=”30″ rotationX=”-30″ />

What we are looking at is the FOV (focal length), the flash convert value is (xv / (2 * Math.tan(Math.PI * fov / 360))) /1.5;

Bojidar Dimitrov has an 1.5 lens converter that works excellent:
http://www.bdimitrov.de/kmp/technology/fov.html

By using the Maya Focal Length thru the converter and adding that to this formulas variable xv, you will get a Papervision 3D camera that is the same.

1
2
3
4
5
6

// FOV from Maya
var fov:Number = 35;
// FOV to F from http://www.bdimitrov.de/kmp/technology/fov.html
var xv:Number = 45.741390734365076;
var focus:Number = (xv / (2 * Math.tan(Math.PI * fov / 360))) /1.5;
camera.focus = focus;

Please visit Papervision 3D blog for great info.

(Please open the article to see the flash file or player.)

I could publish the Flash files without any complication but the other two team members couldn’t, and we have the same set of workstations. After a lot of searching it seems somehow that it’s a memory problem and some suggestions points to changing JAVA memory, well, we didn’t get that to work either so we took another solution.

By making the Papervision package to a SWC file it’s already compiled and takes less memory for Flash. If you have a bigger framework you should as well take your time to create a SWC package for it. The publish time will decrease and your will be working happily ever after =)

TIP: Use more SWC, will speed up your work & use less memory.

If you have Flex, here is an easy tutorial on how to create your SWC package.
1.) Create a “Flex Library Project”.
2.) Add your code that you want to compile.
3.) Right click on the project, Properties->Flex Builder Path
4.) Mark all the packages that you want to compile
5.) Finish, just refresh the project to make sure everything is compiled when you change anything. The SWC file is placed in the /bin folder. Ready to use for Flex & Flash.

Did a really short video;
(Please open the article to see the flash file or player.).

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);
}

First you need to download and install Gumbo for flex.
1.) Download Gumbo: http://opensource.adobe.com/wiki/display/flexsdk/Downloads
2.) Place it inside the Flex SDK folder: /Applications/Adobe Flex Builder 3/sdks
3.) Go into the library directory: /Applications/Adobe Flex Builder 3/sdks/{sdk version}/frameworks/libs/
Remove all files except the /player/10/playerglobal.swc.
Before: After:

4.) Open the “flex-config.xml” in the /Applications/Adobe Flex Builder 3/sdks/{sdk version}/frameworks/ folder
Replace the text “{targetPlayerMajorVersion}” with “10″.

5.) Open/Restart Flex and add the SDK to flex: Preferences/Flex/Installed Flex SDKs

6.) Create a empty ActionScript Project, In the window make sure to change the SDK (use a specific SDK).

Now you should be able to use Flex Builder as a code editor when building Flash CS4 projects. You can also look on how to develop for CS3. A tip is not to click finish, click the next button and in the field “Main source folder” enter src. Cleaner place for putting the fla & as files.

With Flex you get the asdoc compiler, and by using Flex + ANT it’s simple to create some docs.

Make sure that you have ANT enabled and working.
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.

Now you can create a new Actionscript or Flex project. Place the ANT XML file in project root file and run the “create_asdoc”, a new folder “docs” will be created and there is where you find your documentation.

Download ANT Script here.
For Windows users change the paths (C:/Program Files/Adobe/Flex Builder 3/sdks/3.0.0/bin/asdoc.exe)

Good links
ASDoc Tool
Example on how to document code

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

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”.