Using StageVideo with Adobe Flash Builder and Adobe Flash CS5 Professional

Using StageVideo with Adobe Flash Builder and Adobe Flash CS5 Professional

March 9, 2011, 4:30 pm
Filed under: Rich Internet Applications, Flash Video, ActionScript 3, Adobe AIR, Multi-Screen Flash | Tags: Flash, Adobe, video, Flash Player, Adobe Flash CS5 Professional, Adobe Flash Builder, Adobe Flash, Stage Video, performance, authoring, libraries, compiler, Flash Player 10.2

Using StageVideo with Adobe Flash Builder and Adobe Flash CS5 Professional

Adobe Flash Player 10.2 was recently released, complete with the amazing StageVideo class.

Adobe Flash Player 10.2 includes the new Stage Video API that enables beautiful, high-performance video playback across platforms. Stage Video helps websites deliver best-in-class video across screens and browsers by enabling access to hardware acceleration of the entire video pipeline. Developers can take advantage of this new model to deliver improved playback quality while reducing processor usage by up to 85 percent.

– Adobe DevNet’s StageVideo page

Updating Adobe Flash Builder (formerly known as Adobe Flex Builder)

The easy answer is to join the prerelease for the next version of Adobe Flash Builder which will already be targeting Adobe Flash Player 10.2 and Adobe AIR 2.5.  Or keep reading if you want to use the Adobe Flash Builder installation you already have.

• Are you also creating Adobe AIR applications?  If so, and you are not already targeting Adobe AIR 2.5, download and uncompress the Adobe AIR sdk into a folder called Flex 4.5 AIR 2.5 in /Applications/Flash Builder 4/sdks.

• Download [but don't yet decompress] the most recent Hero build from Adobe’s Open Source wiki — as of the time of this blog entry this was 4.5.0.19786 dated Feb 3, 2011.  Pour yourself a cup of coffee however — it’s a hefty 203 MB file.  If there isn’t a Flex 4.5 AIR 2.5 folder already created in the sdks folder, then decompress the newly-downloaded Hero SDK zip and replace the contents in /Application/Flash Builder 4/sdks/Flex 4.5 AIR 2.5 – however merging contents on a Mac can be tricky.  So copy the uncompressed ZIP into the Flex 4.5 AIR 2.5  folder, open a Terminal window and type “cd /Applications/Adobe Flash Builder 4/sdks/Flex 4.5 AIR 2.5” then type “tar jxvf AdobeAIRSDK.tbz2” — this is a non-destructive merge where some of the previously existing content in the target directory is preserved.  On a Windows machine, you can simply copy one directory onto another and it will preserve the unique contents of the target folder..

• Start Adobe Flash Builder and ctrl-click on one of the projects and select properties, click on the Flex Compiler tab on the left, and click on the link that says Configure Flex SDKs…, click add, and then select the FLEX 4.5 AIR 2.5 folder you created and call it FLEX 4.5 AIR 2.5 and click OK.

• For each new StageVideo project you start, you will want to go into project properties, “Flex Compiler”, click “use a specific SDK” and then select FLEX 4.5 AIR 2.5 and click OK.

• While on the Flex Compiler tab, you will want to add –swf-version=12 to the compiler options field, such as below:

 

You will have to do this for each 10.2 project. If you don’t want to have to remember this for each and every project, then just change the specified version in the custom SDK itself.

Change the following line in /Applications/Adobe Flash Builder/sdks/FLEX 4.5 AIR 2.5/frameworks/flex-config.xml:

<flex-config>
 ...
 <swf-version>12</swf-version>
 ...
</flex-config>

Updating the Adobe Flash CS5 Professional Authoring Environment

• Make sure that the Adobe Flash CS5 Professional application is not running.

• Obtain the playerglobal.swc from the frameworks/libs/player/10.2 folder in the Flex Hero SDK (Flex 4.5 SDK – build 4.5.0.19786):

• Rename the existing /Applications/Adobe Flash CS5/Common/Configuration/ActionScript 3.0/FP10/playerglobal.swc to playerglobal_old.swc

• If you’re on a Mac, you will want to copy the playerglobal.swc into the destination directory: /Applications/Adobe Flash CS5/Common/Configuration/ActionScript 3.0/FP10.2

• You also might want to download the new Adobe Flash Player and Adobe Debug Flash Player from the Adobe Flash Player 10.2 download center.

• And replace the corresponding files in the Adobe Flash CS5/Players Players/Release and Players/Debug directories, as well as running the dmg to install the ActiveX plugins.

• Create a file in /Applications/Adobe Flash CS5/Players called FlashPlayer10_2.xml which should contain:

<?xml version="1.0" encoding="UTF-8"?>
<players>
 <player id="FlashPlayer10.2" version="12" asversion="3">
 <name>Flash Player 10.2</name>
 <path builtin="true"/>
 <path platform="WIN">Device Central/adcdl.exe</path>
 <path platform="MAC">Device Central/adcdl</path>
 <playerDefinitionPath as2="$(UserConfig)/Classes/FP10;$(UserConfig)/Classes/FP9;$(UserConfig)/Classes/FP8;$(UserConfig)/Classes/FP7" as3="$(AppConfig)/ActionScript 3.0/FP10.2/playerglobal.swc" />
 <feature name="multiScreenPublish"                 supported="true" />
 <feature name="mobileAuthoringIntegration"           supported="true" />
 <feature name="deviceSound"                     supported="false"/>
 <feature name="exportStreamingSound"            supported="true"/>
 <feature name="exportEventSound"                supported="true"/>
 <feature name="FSCommand2"                      supported="false"/>
 <feature name="gradient_linearRGB"             supported="true" />
 <feature name="gradient_overflow"             supported="true" />
 <feature name="shape_strokeHint"             supported="true" />
 <feature name="shape_cap"                 supported="true" />
 <feature name="shape_join"                 supported="true" />
 <feature name="shape_mitre"                 supported="true" />
 <feature name="shape_scale"                 supported="true" />
 <feature name="linkage_exportForActionscript"     supported="true" />
 <feature name="linkage_exportForRuntimeSharing"     supported="true" />
 <feature name="linkage_exportInFirstFrame"         supported="true" />
 <feature name="linkage_importForRuntimeSharing"     supported="true" />
 <feature name="linkage_importAndAddToCache"         supported="false" />
 <feature name="publish_localPlaybackSecurity"     supported="true" />
 <feature name="publish_hardwareAcceleration"     supported="true" />
 <feature name="symbol_blendMode"             supported="true" /> 
 <feature name="actionScript_documentClass"         supported="true" />
 <feature name="symbol_blendMode"             supported="true" />
 <feature name="filters"                 supported="true" />
 <feature name="component_binding"             supported="true" />
 <feature name="component_schema"             supported="true" />
 <feature name="screens"                 supported="true" />
 <feature name="video"                 supported="true" />
 <feature name="deviceVideo"                supported="false"/>
 <feature name="accessibility"             supported="true" />
 <feature name="dynamic_text_kerning"         supported="true" />
 <feature name="static_text_charwidth_nondeviceFont"    supported="true" /> 
 <feature name="static_text_charwidth_deviceFont"    supported="true" />
 <feature name="advanced_anti_alias_text"         supported="true" /> 
 <feature name="nine_slice_scaling"             supported="true" />
 <feature name="runtimeNumberMinMax"             supported="true" />
 <feature name="use8kSampleRate"                      supported="true" />
 <feature name="useDefineFont4ForDeviceText"          supported="true" />
 <feature name="useDefineFont4ForEmbeddedFonts"       supported="true" />
 <feature name="textLayoutFramework"       supported="true" />
 <encodingPresets>
 <preset uuid="da5cac1a-417a-4d86-b7f7-ef21010a5d7d"  name="FLV - Match Source Attributes (High Quality)" ext="flv" default="true"/>
 </encodingPresets>
 
 <testmenu> 
 <menu name="ID_testInFlash" default="true"/>
 <menu name="ID_testInDeviceCentral" />
 </testmenu>

 <debugmenu>
 <menu name="ID_debugtInFlash" default="true"/> 
 <menu name="ID_debugInDeviceCentral"/> 
 </debugmenu>


 </player>
</players>

You will need to restart Adobe Flash CS5 in order for these changes to take affect.

In order to target this version of the Flash Player, you should set the Player to the new “Flash Player 10.2” option that we just created (in File | Publish Settings, Flash)

Validate that Adobe Flash CS5 can now author content for Adobe Flash Player 10.2.

• Create a new project.

• Create a new class called Test.as, and fill with:

package  {
 import flash.display.MovieClip;
 import flash.media.StageVideo;
 import flash.media.Video;

 public class Test extends MovieClip {
   var sv:StageVideo;

   public function Test() {
      trace("test");
   }
 }
}

• In your main project, click on the stage and look in the property inspector.  Type Test as the main class name, or navigate to Test.as

• Go to File | ActionScript Settings | ActionScript 3 and add a reference to the new playerglobal swc in the  FP10.2 directory

• Test Movie will probably not work as the old Flash Player is hard-wired in — but if you do a Debug Movie instead (shift-command-ENTER), it will use the Flash Player that you placed into the Players/debug directory.

• You may get one of two errors — if you get a syntax error, that’s an authoring issue, meaning that somehow Adobe Flash CS5 didn’t see Playerglobal.swc; otherwise it’s a run-time issue and you might be using a pre-10.2  player. When using the debug standalone player, you can easily determine the version number by going to the application menu Flash Player Debugger | About Adobe Flash Player.

Disclaimer: The opinions expressed herein are my own and do not represent my employer’s views. My statements should not be considered official or sanctioned by my employer or any other organization I’m affiliated with.

About these ads

1 Comment

1 Comment so far
Leave a comment

RSS feed for comments on this post. TrackBack URI