Converting Flex 3 Microphone application to Flex 4 (part 1)

Posted on April 28, 2010 | 2 comments

For AIR 2.0 release on I created a Microphone Example application showcasing the new feature that allows access to raw microphone data in Flash Player 10.1 and AIR 2.0. This application is a custom chrome AIR application that uses a lot of CSS and embedding of assets, both fonts and images. I figured it would be a good use case for migrating from Flex 3 mx components to Flex 4′s Spark components. As there is a bit to cover in detail I’ll share the step by step changes needed for the migration over a series of posts.

You can still build applications in Flash Builder 4 with Flex 3 sdk, or even Flex 4 sdk with mx compatibility mode on. The purpose of this exercise is to actually convert/migrate the application to the Spark architecture.

Converting Flex 3 Microphone application to Flex 4

Changing the SDK

The original application was created with Flex 3.2 and AIR 2.0 on When switching to the Flex sdk, which comes with Flash Builder 4, and overlaid AIR 2.0 sdk the project compiles with no errors. Although it compiles with no errors the application doesn’t look much like the original, you can see the difference below.

Note: Flex 4.1 has AIR 2.0 SDK included and is the best approach since the release of AIR 2.0 SDK, until Flash Builder 4 gets and update you need to download it here.

Microphone Original UI

Flex 4 sdk, no changes yet:
Flex 4 sdk no changes

Changing the Application Namespaces

In the main, MicrophoneExamples.mxml application file I removed the old


and replaced it with


Changing the old namespace to the new halo and spark namespace separation yields 2 errors. The simple fix is to change the mx:Style and mx:Script to fx:Style and fx:Script. Simple enough for the application namespace changes.

Adding the CSS Namespaces

Continuing, I opened up the embed_assets/stylesheet_common.css file and added the spark and mx namespaces.

@namespace s "library://";
@namespace mx "library://";

Note: I removed the references to components not used in the application from the css file at this point too, which included ComboBox, HSlider, RadioButton, and Application.

With the new namespaces you now have to add the namespace to the component, in this case its really only WindowedApplication and Window, the rest of the styles are specific style names. This means I added “mx|” to the css block, at this point I also took care of the warning that theme-color is not used and changed it to chrome-color, the changes looked like this:

    /* make app window transparent */
    font-family: "Myriad Web";
    font-size: 12;
    disabled-overlay-alpha: 0;
    chrome-color: #444444;
    color: #AAAAAA;
    text-roll-over-color: #AAAAAA;
    text-selected-color: #AAAAAA;

Warning Cleanup

Just because I wanted to clean up the all the Flash Builder 4 warnings I went ahead and made some code changes that used Application.application in a binding scenario in the InformationPanel.mxml. The usage of Application.application is deprecated and the new way is to use FlexGlobals.topLevelApplication, but the new FlexGlobals can’t be bound. This led to a change in the InformationPanel.mxml to have a public bindable property that I then bound to in MicrophoneExamples.mxml. Here is the two code segment changes.

InformationPanel.mxml code section:

            public var applicationVersion:String = "";
    <mx:Label styleName="titleText" text="CREDITS {applicationVersion}" />

MicrophoneExamples.mxml code section:

    <view:InformationPanel id="pnlInfo" width="100%" height="100%" styleName="mainPaddedBox"
                applicationVersion="{applicationVersion}" />

Next Steps

This is enough for this blog post. In part 2 we’ll start actually changing the application’s components into Flex 4 Spark components where possible.

  • Pingback: Renaun's thoughts on Converting Flex 3 Microphone application to Flex 4 (part 2)

  • Pingback: Renaun's thoughts on Converting Flex 3 Microphone application to Flex 4 (part 3)

  • Jack

    HI Renaun,
    The microphone app looks great, but will not seem to hear my mic on my macbook pro. I set the sample rate to 44.1 to match the code in the app but still nothing shows up. Have you tried it on a mac? Any idea what could be the problem? I really want to move forward with a recording app for an idea I have so I’m excited to get this working. Also – do you know if anyone has created an mp3 writer for the bytearray of the recording? Thanks – Jack

    • Renaun Erickson

      Check to make sure your microphone device is selected as the input device for Flash. In the AIR application you can click on the device text to select another input device. Also you will want to make sure the input device level is high enough. It was tested on Mac and Windows.