CPU optimizations on the Flash Platform

Looking for CPU optimizations in your Flash Platform app or game? Chapter 3 of theĀ  Optimization Guide for the Adobe Flash Platform can help. See a summary of its CPU tips and tricks here.

Advertisements

Hello, Starling!

Featured

I recently spent a few hours exploring the new open source Starling API for generating 2D graphics with hardware acceleration. It’s a pretty cool new feature in Flash Player 11 and AIR 3. You can download it from http://www.starling-framework.org/.

To get going I used Thibault Imbert’s article Introducing the Starling 2D framework. Since I’m also very new to Flash Builder 4.5, I ran into a few rough patches in getting Thibault’s example to run. Here are the problems I encountered and how I solved them. (To more experienced users, these issues may seem trivial, but for me, they caused someĀ  real head-scratching.)

1. I kept getting an inexplicable runtime error saying that flash.display3D.textures::Texture was not defined. Even when I removed all active code from the project, I still got this error. Clearly, the problem had to do with libraries or project settings, but I thought I had followed Thibault’s instructions to a T. As it turns out, I had gone beyond the T and made a change that seemed logical but was not listed in Thibault’s article. In Project Properties, under ActionScript Compiler–>Adobe Flash Player options, the radio buttons force you to choose either “Use the minimum version required by the Flex SDK” or “Use a specific version” (and specify that version.) I decided to choose “Use a specific version” and specify 11.0.0. This setting caused the runtime error. Switching to “Use minimum version required by the Flex SDK” solved it.

2. Though the project now built and ran, the browser showed only a warning message when I ran the app in the debugger. The message said, “The application is not correctly embedded (wrong wmode value).” Thibault’s article explains why this warning is posted but doesn’t tell you exactly how to address it. The question for me was where to set wmode for debugging in Flash Builder 4.5. At first I tried adding it to the attribute line above the main class definition:

[SWF(width="1280", height="752", frameRate="60", backgroundColor="#002143", wmode="direct")]

This change had no effect. Then I realized that the setting must occur in the <projectName>.html file that was created along with the project. This HTML file resides in the bin-debug directory under the project folder. In my case, I needed to change the script call in the header of this file that calls swfobject.embedSWF(). The original script block looked like this:

<script type="text/javascript">
// For version detection, set to min. required Flash Player version,
// or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "10.2.0";
// To use express install, set to playerProductInstall.swf,
// otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#002143";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "StarlingExperiment3";
attributes.name = "StarlingExperiment3";
attributes.align = "middle";
swfobject.embedSWF(
"StarlingExperiment3.swf", "flashContent",
"1280", "752",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not
// replaced with a SWF object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>

Because I’m using a browser that has Javascript enabled, I had to make the change here. In the attributes argument that I passed to swfobject.embedSWF(), I simply added the following new attribute:

attributes.wmode = "direct";

The resulting script block looks like this:

<script type="text/javascript">
// For version detection, set to min. required Flash Player version,
// or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "10.2.0";
// To use express install, set to playerProductInstall.swf,
// otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#002143";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "StarlingExperiment3";
attributes.name = "StarlingExperiment3";
attributes.align = "middle";
attributes.wmode = "direct";
swfobject.embedSWF(
"StarlingExperiment3.swf", "flashContent",
"1280", "752",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not
// replaced with a SWF object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>

To handle the same situation in browsers that don’t support Javascript, you’ll need to use the <noscript> block to apply the wmode setting. In this case, you can simply add wmode as a param on the SWF object: The following <object> block applies to non-IE browsers:

<object type="application/x-shockwave-flash" data="StarlingExperiment3.swf" width="1280" height="752">
<param name="quality" value="high" />
<param name="bgcolor" value="#002143" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="direct" />
...
</object>