As Flash 10.1 is currently accessible in beta. I thought it would be nice to have some tutorial to build applications targeting this new version of the player to take advantage of the new APIs (like multitouch for example). This tutorial will provide a generic solution to enable the creation of Flash 10.1 capable projects in both Flex Builder 3 and Flash Builder 4.

Step 0: Download the latest Flex SDK

This step is not mandatory and should not be necessary if you already have a Flash 10 capable Flex SDK. Still, keeping your SDK up to date is always a good thing and this tutorial might be a good opportunity to do it!

As the Flex 4 SDK was just released a few days ago, I recommend you download, install and use it for the rest of the tutorial.

In the rest of the tutorial, $SDK_DIR will designate the path to the Flex SDK you want to use (ie. "C:\Program Files\Adobe\Flash Builder 4\sdks\4.0.0" for example).

Step 1: Download and install playerglobal.swc

• Go to $SDK_DIR\frameworks\libs\player and create a new folder called "10.1"
• Download the new Flash 10.1 capable playerglobals.swc library from Adobe Labs
• Extract playerglobals.swc from the downloaded ZIP file to the new "10.1" directory you just created

Step 2 : Setup your Flash 10.1 project

• Open Flash Builder 4
• Create a new Flash/Flex project or open the project you want to setup
• Open the properties of your project (right click on your project in the Package Explorer > Properties)
• If you are using Flash Builder 4, go to the "ActionScript compiler" panel and in the "Adobe Flash Player options" section, check "Use a specific version" and enter 10.1.0 as the version number

• If you are using Flex Builder 3, go to the "Flex compiler" panel and in the "Additional compiler arguments" text input add "-target-player=10.1.0"
• Click "OK"

Step 3 : Build your project

Press F11 to build and run your project. Everything should work fine and you should now be able to use the new Flash 10.1 APIs!

You can now create as much projects as you want and you just have to do Step 2 to make sure it will target Flash 10.1!

The Problem

The main problem is that even if you select a Flash 10 Flex SDK, Flex Builder configure the compiler to use Flash 9 only. In my first article, I explained that a simple solution was the following :

1. Open the Properties of your Flex Project (right click on the project in the Flex Navigator tab then “Properties”)
2. Go to “Flex Compiler”
3. Check “Use a specific SDK” and select the SDK you just installed
4. Check “Require Flash Player version” and set the value to 10.0.0

But the thing is you can not specify a "Required Flash Player version" for a Flex Library Project. When you will try to compile, any reference to a Flash 10 class will cause an error even if you have selected the right Flex SDK (steps 1, 2 and 3 above).

The Solution

The solution is rather simple :

1. Close Flex Builder
2. Go to the root folder of your Flex Library project
3. Open the file named ".actionScriptProperties" with your favorite text editor
4. Search for  htmlPlayerVersion="9.0.28" and change it to  htmlPlayerVersion="10.0.0"
5. Launch Flex Builder 3
6. Try to compile your Flex Library Project

Your project should compile normaly and Flash 10 classes wont cause any error anymore.

Nevertheless, it is quite weird to have to change the "htmlPlayerVersion" to "10.0.0" in order to compile properly. It seems the "htmlPlayerVersion" is actualy used to do more than just setting the HTML wrapper...

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 !