These directions are for Windows machines but they should work for Mac as well. The only difference should be the file system paths.

Introduction

I”ve been testing the new capabilities of Flash Player 11.2 (and FP11 for that matter) and the addition of Stage3D is sick. You can get a breakdown of all the new additions from the release notes found here.

Anyway, I’ve noticed on forums that <many>some</many> people don’t use Flash Builder (I use/love FlashDevelop by the way) and have a hard time targeting newer runtimes of the Flash Player in Flash Professional. As a result I want to show you how to target newer Flash Player runtimes (specifically FP11.2) using Flash Professional CS5. I can attest that this solution works for both Flash Pro CS5 and CS5.5. It may just as easily work for Flash Pro CS4 and earlier, I just haven’t tested it (let me know if you get it to work). This also is not specific to targeting FP11.2, you should be able to do this for any new Flash Player release. Let’s get started.

Step 1 – Get the Goods

First you need to download the following from Adobe Labs. Reference the image below.

  1. Flash Player 11.2 Plugin for your Browser.
  2. Flash Player 11.2 playerglobal.swc.

The first download is important because it enables you to view what you’ve created targeting Flash Player 11.2 in a browser. Currently, Stage3D content cannot be viewed through publishing in Flash Professional, it must be viewed in a browser.

The second download is important because the playerglobal.swc is what provides the new API’s in Flash Player 11.2 for you to publish against. In essence, it is the new code available to you to compile into your SWF.

Step 2 – Hook Up Flash Professional – Place the playerglobal.swc

Now you need to make some quick changes so you can prep Flash Professional for Step 3. Reference the images below.

  1. Go to your “Actionscript 3.0″ folder for Flash Professional, for me on Windows 7 it is C:\Program Files (x86)\Adobe\Adobe Flash CS5\Common\Configuration\ActionScript 3.0. This folder is responsible for providing the “playerglobal.swc” files (which again contain the AS3 code to publish against for a specific Flash Player target) to Flash Professional. Now create a new folder in this directory, I named mine FP11_2.
  2. Now place your downloaded playerglobal.swc in this folder you just created. If when you downloaded the SWC its name was not playerglobal.swc rename it so.

Step 3 – Hook Up Flash Professional – Target the playerglobal.swc

Now you need to set up an XML file so Flash Professional knows where to look to publish against the Flash Player 11.2 playerglobal.swc you just set up. Reference the images below.

  1. So go into your “Players” folder for Flash Professional, for me on Windows 7 it is C:\Program Files (x86)\Adobe\Adobe Flash CS5\Common\Configuration\Players. Here you should duplicate the XML file with the highest Flash Player target (the file I copied was FlashPlayer10_1.xml) and rename it. I renamed mine to match the folder I created in Step 2, I named it FlashPlayer11_2.xml.
  2. Now open this new file in any text editor you’re comfortable with and change the following XML elements to match what is italicized below.
  3. Change the XML player element to <player id=”FlashPlayer11.2″ version=”15″ asversion=”3″>. Version 15 is Flash Player 11.2, Version 14 is Flash Player 11.1, Version 13 is Flash Player 11, Version 12 is Flash Player 10.2, Version 11 is Flash Player 10.1, and Version 10 is Flash Player 10 – FYI.
  4. Change the <name> element to <name>Flash Player 11.2</name>. This name shows up in Flash Professional when choosing your .FLA project target.
  5. Finally change the as3 attribute of the <playerDefinitionPath> element to <playerDefinitionPath as3=”$(AppConfig)/ActionScript 3.0/FP11_2/playerglobal.swc” />. This is what tells Flash Professional where to find the Flash Player 11.2 playerglobal.swc you set up in Step 2 above. Just make sure the folder name matches, again I named my folder FP11_2 and this is defined in the as3 attribute of the <playerDefinitionPath> element you must change.

Step 4 – Open Flash Professional (Restart if Open)

Simply create a new AS3 project and go to File > Publish Settings and select the drop down for the player version. Select Flash Player 11.2 as highlighted below.

Step 5 – Create a Test .FLA

Save this FLA and follow the directions below to set up a quick test. Reference the image below.

  1. Name the current layer txt, create a TextField instance on this layer, and ensure in the Properties Panel that it is a Classic TextField instance and that it has an instance name of txt.
  2. Create a new layer and title it actions (normally I would use a Document class but for this tutorial I will use an Actions layer).
  3. Open the Actions Panel (Window > Actions or use the shortcut F9) and paste the following code on Frame 1 of the actions layer.
import flash.system.Capabilities;
import flash.events.MouseEvent;

//have your txt TextField instance print the Flash Player version that is currently running your SWF
txt.text = "Version = " + Capabilities.version;

//try to use the new MouseEvent.RIGHT_CLICK event introduced in FP11.2
stage.addEventListener(MouseEvent.RIGHT_CLICK, onClick, false, 0, true );
function onClick(e:MouseEvent):void
{
    txt.x = Math.random() * stage.stageWidth;
    txt.y = Math.random() * stage.stageHeight;
}

Step 6 – Publish

Now we will publish a SWF and an HTML page to test in the browser. Make sure you run this test in a browser where you’ve downloaded the Flash Player 11.2 plugin mentioned in Step 1 above. Remember, Flash Professional currently does not allow you to preview your SWF content (that targets new APIs) without running it in a browser. As a result when you hit Ctrl + Enter (Control > Test Movie > Test) in Flash Professional you may get this error.

TypeError: Error #2007: Parameter type must be non-null.
    at flash.events::EventDispatcher/addEventListener()
    at flash.display::Stage/addEventListener()
    at FlashPlayer11_fla::MainTimeline/frame1()

This error can be ignored. Again the real test is when you run your content in the browser. Reference the image below.

  1. Now publish your test by selecting File > Publish. A SWF and an HTML file should be created. Now simply open the HTML file in a text editor and replace <param name=”wmode” value=”window” /> with <param name=”wmode” value=”direct” /> (notice that you need to define this change in two places). By changing the wmode to direct you are giving the Flash Player plugin permission to allow your content to be rendered with the GPU of the machine (if possible, check here to see if your GPU is supported).
  2. Now simply run this HTML file in a browser where you have the Flash Player 11.2 plugin installed.


You can download the test I created here.

Conclusion

Now when you test your HTML file you should see the version printed out in your txt TextField. You can also use the right button of your mouse to position the txt TextField instance randomly on the stage. Congrats! You’ve officially targeted FP11.2 with Flash Professional. Now dig into the new APIs and create some Stage3D content!

Leave a Reply