Tech Blog

Note - this was done with flexsdk-4.0.0.13875, which was the most recent stable build at the time.

Phase 1: Get Flex3 code compiling with Flex4

Fix up stylesheets:

If you have a current Flex3 project and you are migrating to Flex4 you need to add the following lines at the top of your stylesheet.

This makes the default non-namespaced items in your stylesheet refer to the MX components. eg:

To statically link or not?

Flex 4 defaults to dynamically linking runtime shared libraries. This produces smaller files, but if you are making desktop type applications or developing code while not connected to the internet you'll probably want to statically link the files. Add this to your compiler option:

You now should have a happily compiling app, however, to use all the new goodness of flex 4 there are still some more steps to be done.

Phase 2: Using all of flex 4

Update namespace to 2009

To update the namespace references for flex 4 I did the following search and replace:

Replace mx with fx namespace

Similarly for other tags like this:

Add Declarations for non visual components

Wrap tag around non visual compoents. The compiler will complain about all these errors so just follow through and wrap them in

Migrate States

This shows up as the following error:

So if you had something like this before:

It would now look something like this:

Migrate StyleManager References

Stylemanager is not called as a global class any more and you need to use fully qualified references so:

When these have all been converted, your application should compile.

Then you can start leveraging the new functionality of flex4 and begin migrating your components to spark if necessary.

If you have a current Flex3 project and you are migrating to Flex4 you need to add the following lines at the top of your stylesheet.

This makes the default non-namespaced items in your stylesheet refer to the MX components. eg:

Note there were lots of ones that I found that were wrong.

Do NOT use:

This info was sourced from the Flex SDK Wiki.

These have advantages of making flash movies using them work very well, but they can also require more http requests the first time they are used, and are not good for application development with Northcode.

To turn them off you need to add the following compiler flag:

Thanks to Flex Butterflies and bugs for the info.

One which is coming to light very early is a new text framework for actionscript which leverages flash 10 text engine.

It's very early alpha but is a good proof of concept and already solves some problems for us - namely the ability to simply create rich text area's that have superscript and subscript text.

It uses XML and CSS and completely seperates the formatting from the content.

It can now:

• Render a simple XML document
• Apply styles including color, font and opacity
• Plug in custom code for rendering images, video or any other XML tag you want to create.

The screenshot highlights a number of these features:

• Bold, italic, super and subscript text
• Text wrapping around custom display classes (Red and Green boxes)
• Opacity applied to display objects (green box)

There is still a lot more to be done - including editing of text which is the next hard piece to knock over.

You can get it from the google code site

Keen to hear any feedback.

Cheers, Mark

By adding the 'Accept-Encoding':'gzip' header we were telling our apache server to serve up the compressed version of the content and we could see the content was compressed coming through Charles Proxy, and our application was working perfectly.

However, I started working on the exact same code the next day and straight away got an error - the application was erroring because it was getting binary data where it expected the decompressed XML data.

I turned Charles back on to see what was going on and it started working again. With my best sherlock holmes head on I rapidly deduced that Charles as well as proxying the request was also decompressing it helpfully for me.

Luckily I'd already come across the solution to the problem courtesy of Anirudh Sasikumar (GzipHTTPService) and Paul Robertson (Gzip Encoder).

I made some minor modifications to Anirudh's Gzip HTTP Service to do two things.

• Always send the header 'Accept-Encoding':'gzip' if running a Desktop (Aka AIR) app.
• Handle the case where the Gzip response that comes back is not gzip compressed. I.e. Charles already decrypted it or the server doesn't support gzip compression.
• Change it to use version 0.2.0 of the gzip encoder

With these changes it is a drop in replacement for the <mx:HTTPService/> tag.

The changes are as follows:

For convenience you can download the modified files from here.

Hope it helps.

Cheers, Mark

This means that response packet is compressed by Apache web server and your client will need to decompress it. Fortunately, both Flex and AIR 1.5.1 natively support GZIP compression. However there are a couple of things you need to watch out for.

Firstly, you need to enable Apache Module mod_deflate in your virtual host.

In your AIR application, you need to tell HTTPService component to accept gzip encoding and AIR will take care of the rest:

If you are in a Flex project, specifying gzip encoding will throw the following error:

This is because Flex apps run in a browser and the browser is responsible for determining encoding type and decompression (if required). Therefore, you cannot specify encoding type in Flex apps.

Our problem is that we use one core library for AIR and Flex applications. So the issue above can be avoided by conditionally specifying encoding type depending on the framework used. This can be done in 2 lines of code:

Note: this is not the complete solution - check out this entry for the rest of it :-)

Cheers Marko

instantiate BulkLoader object:

add assets into the queue:

To start loading assets you simply call the start() method:

To get asset content, you would normally call getContent() method, which would return Bitmap for images or AVM1Movie for swf files. You could also call methods like getBitmap() and getAVM1Movie() to target specific file types.

The problem I encountered was that assets I was loading were encrypted. Therefore, I needed to read them in as ByteArray type and then decrypt them. Fortunately the latest version of BulkLoader has getBinary() method, but there is a trick to it. You need to tell BulkLoader to load assets in binary format when adding items into the queue:

Setting the type to binary did the trick for me, so I thought I'd share it in case someone else falls into the same trap.

Oh, and I should thank Mark Lynch for helping me figure this out :-)

Marko

Whenever I clicked run it would just sit there for ages and never launch the app. If I clicked debug I got the following error:

Turns out the solution is easy when you know how, thanks to this post.

The solution is a simple as changing the namespace in the app.xml file from:

Which is fine if you want to upgrade you app to 1.5 - not sure if there is still a way to compile apps for AIR 1.0 though.

Cheers, Mark Lynch

Download Code

I finally got some time to play with Flash 10 and the new text functionality including the Text Layout Framework Beta

It gives very powerful control of the text layout but with this power come a few gotcha's which can trip you up.

The basic process for using the TextFlow for advanced text rendering is as follows:

• Create a sprite container to hold the text
• Import the text into a TextFlow object
• Attach the container to the textflow object
• Call updateAllContainers() on the textflow object
• We also need to add event handlers for resize and graphics loading if we are using these features.

Create a sprite

Import the text into a TextFlow object

This loads the XML and stores it in the _textFlow object.

Note: the XML.ignoreWhitespace is important otherwise it all the whitespace between tags will get stripped out and any formatted text will lose it's spacing.

Attach the container to the textflow object

Call updateAllContainers() on the textflow object

That's it.

For bonus points you can add the event handlers to handle graphics loading and resize etc.

Make it selectable

I'm looking forward to implementing the rest of this in our projects that use flash text. It's so much simpler and cleaner.

Cheers, Mark

So you need something like Flash Media Server or Red5 to record it.

However, once you record it to the server it is an flv and the audio codec is stored as a NellyMoser encoded audio portion. This codec is not supported by many applications and after a quick google found the nelly2pcm project on google code.

This will convert a flv sound file to a raw pcm file - which you can then do useful stuff with. So here's how to do it on a Ubuntu machine.

• Ensure you have build tools: (apt-get install build-essential)
• Download nelly2pcm from google code
• Extract and Compile it,

You can run it as follows:

This will create a raw sound file with no headers and output the line above which you'll need for the next part.

To play this file back you can use sox (apt-get install sox)

If you've got all the options correct then this will play the file back. Once you got it correct you can then use sox to create a wav file which is essentially the same except that it has a header which contains all the settings (eg bitrate etc)

From a wav you can convert to whatever you like. I'm looking forward to the Flash Player 10 release as this messing will no longer be necessary as it will support encoding with the free Speex codec.

Cheers, Mark

Update: