Here is the zip of the Project – SOURCE

The Problem

When you embed a lot of fonts you immediately hurt your compile times. In the video I go about showing you how just embedding a few fonts can’t hurt your compile times, I have about 8 fonts embedded and 2 of them with bold font embeddings as well. This slowed down my compile time to 8 seconds, with barely any mxml, it’s all css and embedding fonts that caused the issue. This post goes to show you how to create a separate project to hold your css and how to include it as runtime css in your original project.

A (possible) Solution

The solution is to create a separate project to hold you css and embedded assets, the reason for this is most the time in your development cycle once you are done setting up the style it just sets there… and then you work on the logic of the application…

So what you do is create a separate project put your css and the embedded assets in the seperate project, and set its output folder to be the actual project’s html-template folder, then you right-click the css file and make sure “Compile CSS to SWF” is checked. This tells flexbuilder to compile a swf just for the css file… NOTE: you may have to make a change to the css file to get it to output the swf.

Once the file is a swf, and the output folder is your destination project you simply use StyleManager.loadStyleDeclarations(‘somecss.swf’); to load your css on the “initialize” event of the main application mxml file.

To also help improve compile times you can try using unicode ranges for you font as well, and only embedding what you need Using unicode ranges for fonts

Please see the video for more details

 Here is the zip of the Project - SOURCE

THE VIDEO

(be patient, it takes a minute to load)

No huge surprise so far… but when I started flex builder back up my navigator was showing some sort of error…. some eclipse error, that I fixed before writing down the error…

I remembered something I learned from using cfeclipse and debugging some of the update issues I have had, and I remembered you can start eclipse with a “-clean” argument from the command line, and it will reinitialize the cached classes…

so I opened up the command line and browsed to the FlexBuilder folder (‘c:\Program Files\Adobe\Flex Builder 2\FlexBuilder.exe -clean’)

now all is well… simple fix…

You need to do a couple of things… the first is this post:

it explains what you need to rename your file to for the flex builder to see what to do.

morearty.com/blog … First Post

and the second is this post… it explains how to change the run url, and debug url.

morearty.com/blog … Second Post

First. In your flex project, open up the file “html-template/index.template.html”

THIS IS WHERE ALL OF YOUR CUSTOM JAVASCRIPT goes, that way when you compile, it doesn’t overwrite your contents…

open up that file, and you’ll see little (+)(plus) signs on the left of the code, where it is hidden, just collapse all of the code… i’ve customized my code, so i’m not sure what line it’s on, but I know it’s in the vicinity of line 105

// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

(above is the first line of code in the comment)

This comment is actually processed, and ran.

I added the line

“name”, “${application}”,
“allowScriptAccess”,“sameDomain”,
“wmode”,“transparent”, //<—this line i added

I also added it, in the (else) statement that follows it.

That seemed to work for firefox, but not in IE. I’m now chasing down why the problem is not working, and i’ll post on that later.

HERE IS A TUTORIAL

say you want to develop on a remote machine, say a mapped drive? or something along those lines… but when you go to create your flex project all you get is this error

“Invalid server root. Server root must contain a WEB-INF/flex folder.”

WHAT DO YOU DO?

I’m not sure if this is technically correct or the downsides to this, all i know is that i couldn’t even get started until this was done… Please take a look at the tutorial and follow the steps… if your having the same issue, and find a different way, or more proper way to fix it, please post a comment, and we can exchange links….

Axel

also look at

http://www.kenreiss.com/blog/index.cfm/2006/8/10/Flex-20-with-CFMX-702–SUCCESS

when i installed, the installer asked me if i would like to view the instructions on how to install the coldfusion extensions, but when i clicked yes, nothing happened….

I did some research and found out how to install them

If you installed the Demo from Adobe, these steps should work.

1. Start Flex Builder 2

2. Click on Help > Software Updates > Click “Find and Install” > Click “Search for new features to install” > Click Next > click “New Archived Site” > Browse to

C:\WINDOWS\Downloaded Installations\Adobe Flex Builder 2\ColdFusion Extensions for Flex Builder

You will find 2 files in there, a html file that gives more instructions on how to install, and a .zip file that starts with CF_FB_****.zip file (forgive me i renamed mine to be

ColdFusion_FlexBuilder_Feature.zip

because i was confused by the instructions in the html file.

but when you click on “New Archived site” you run through a wizard that lets you select a .zip file… and then you keep clicking next…

This was written for guidance purposes… and not the exact steps…