Promethe’s Blog Web, RIAs and chocolate spaghettis…

Work with Flash 10 in Flex Builder 3

UPDATE: you can also read the new "Build Flash 10.1 applications with Flex Builder 3 or Flash Builder 4" tutorial.

Flash 10 Beta is a good occasion to test some of the new features that the next version of this incredible piece of software will provide. This short step-by-step "how to" tutorial will teach you how to install the new Flex SDK and configure Flex Builder 3 in order to use it.

1. Install Flex Builder 3

As we start, only Flex Builder 3 (and eventually the Flash 9 Player) is installed.

2. Download the last nightly build of the Flex SDK

Here are the download pages :

• Flex 3 SDK download page
  
• Flex 4 codename "Gumbo" SDK download page

I'm currently working with the Flex 4.0.0.2862 SDK myself, but any Thursday May 15, 2008 or later release will do the trick.

3. Install the new Flex SDK

Extract the SDK wherever you want. FLEX_SDK is used hereafter to refer to the directory where you unzipped the SDK. I recommend to extract the SDK in your FLEX_BUILDER\sdks\SDK_VERSION directory, where FLEX_BUILDER refers to your Flex Builder 3 installation directory ("C:\Adobe\Flex Buider 3\sdks" by default) and SDK_VERSION refers to the version number of the nightly build SDK you downloaded (4.0.0.2862 for me). Here is how it should look :

4. Install the Flash 10 Debug Player Plugin

ATTENTION : before installing the Flash 10 Player Plugin for your browser, make sure to uninstall any previous version. You might want to follow Adobe's instructions in order to do that well. Refer to those instructions if you encounter any Flash 10 Player Plugin installation issue.A good thing would be to have two different web browsers : one to actually daily browse the internet, with the stable Flash 9 Player Plugin installed, and a second one to debug/run Flex projects with the Flash 10 Player Plugin.

To find the suitable Flash 10 Player Plugin installer for your favorite web browser, go to "FLEX_SDK\runtimes\player\10" and then browse the folder that matches your OS ("win" for Windows for exemple). The idea here is to install the Flash 10 Player Plugin for the web browser that is used by Flex Builder 3 to debug/run your projects. This default web browser can be changed in Flex Builder 3 in the "Window\Preferences...\General\Web Browser" configuration menu.

5. Configure Flex Builder 3

Now we have to configure Flex Builder 3 in order to be able to use this very SDK. Launch Flex Builder 3 and then go to "Window\Preferences...". You should have this window :

You should have the first two lines only at first. Then you click on "Add...", and browse into your drive to select the FLEX_SDK directory. If you select the right path, Flex Builder should be able to retrieve the SDK name all by itself. Then click on the "OK" button. It is better to keep your old Flex 3 SDK as the default SDK fpr compatibility purposes.

The Flash 10 enabled SDKs are messing up with Flex Builder 3 auto-completion, so you might want to have the new ActionScript 3.0 Language Reference which provides information on the syntax and usage of the new APIs. Just create the "FLEX_SDK\doc" directory and extract the ZIP archive in it.

Because Flex Builder will not fully recognize this new Flex SDK, it might erase some of your "import" directives that seam to be wrong (but that are not...). It happens a lot especially when you use the "flash" package. To avoid this, you might want to uncheck "Keep imports organized" in the "Window\Preferences...\Flex\Editors\ActionScript Code" configuration panel. I know automated imports organizing is a great feature, but "import" directives vanishing all by themselves is a real mess and it does areally happend a lot. Thus, do not forget to re-enable this great feature when the Flex SDK will be fully integrated and functional.

6. Create a new Flex project

Now that the new SDK is available in Flex Builder 3, create a new Flex project. In the project properties (right click on the project in the Flex Navigator tab then "Properties") go to "Flex Compiler".  Check "Use a specific SDK" and select the SDK you just installed ("Flex 4" in my case), then check "Require Flash Player version" and set the value to 10.0.0.

7. Update the Flash Player detection system

As the Flash 10 player is still a beta, the version number is not well recognized by the Flash Plugin detection system. You have to edit the HTML template that is used to generate the HTML document where your SWF is going to be embed. In the directory of your Flex project, go to "html-template" and open the file "AC_OETags.js" with a text editor. Replace the whole "GetSwfVer" function with this one :

function GetSwfVer()
{
  // NS/Opera version >= 3 check for Flash plugin in plugin array
  var flashVer = -1;
 
  if (navigator.plugins != null && navigator.plugins.length > 0)
  {
    if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"])
    {
      var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
      var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
      var descArray = flashDescription.split(" ");
      var tempArrayMajor = descArray[2].split(".");
      var versionMajor = tempArrayMajor[0];
      var versionMinor = tempArrayMajor[1];
      var versionRevision = descArray[3];
 
      if (versionRevision == "")
      {
        versionRevision = descArray[4];
      }
      if (versionRevision[0] == "d")
      {
        versionRevision = versionRevision.substring(1);
      }
      else if (versionRevision[0] == "b")
      {
        versionRevision = versionRevision.substring(1);
      }
      else if (versionRevision[0] == "r")
      {
        versionRevision = versionRevision.substring(1);
        if (versionRevision.indexOf("d") > 0)
        {
          versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
        }
      }
      var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
    }
  }
  // MSN/WebTV 2.6 supports Flash 4
  else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1)
    flashVer = 4;
  // WebTV 2.5 supports Flash 3
  else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1)
    flashVer = 3;
  // older WebTV supports Flash 2
  else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1)
    flashVer = 2;
  else if (isIE && isWin && !isOpera)
  {
    flashVer = ControlVersion();
  }
  return flashVer;
}

8. The end...

And... that's it ! You should now be able to debug/compile your Flex project using your brand new Flex SDK with the new Flash 10 Beta features !