Using Flash Player 10.2 in FDT4

In this post I will tell You how you can start playing with the new features of the Flash Player 10.2 Beta in FDT 4. I started using “Flash Builder Burrito” for the examples that I’ve been posting but I really missed the quick code hints and mostly the auto-import features of FDT4 that let me explore the new SDK without leaving my code to read the documentation, that said let’s move on.

Figure 1.

1.- The first thing You need to do is go to the Hero Stable Builds table and download the Flex SDK  build 18623 from there.

I usually have all my SDKs located in the same place in my disk “C:\SDKs” but You can put it on the desktop for easy location, once you have downloaded it decompress the zip in the location you chose. (Note: These builds do not contain any Hero mobile features or runtimes but it appears that the flex.swc that should be located in \frameworks\libs  is also missing you’ll need to include this from a previous build or FDT will output errors when adding the SDK to your project ).

Figure 2.

2.- Open FDT4 and go to >Window>Preferences and open the FDT tab and select Installed SDKs from that menu as shown in figure 3.

Figure 3.

Click on the Add  button and the SDK definition Panel will pop up select the directory where You have downloaded the Flex Hero SDK, if you have a previous Flex Hero SDK installed be sure to give a different name I called mine Flex Hero ( Flash Player 10.2  Beta).

Figure 4.

3.- Go to >File>New>New Flash Project select Empty AS3 project give your project a name and click the next button that will take You to the Flash Project Settings  in the SDK Configuration select your newly added SDK( see figure 5.) you will see that the Player Version changes to 10.2, click finish.

Figure 5.

4.- Right click in the project You just created select properties, go to the FDT Compiler menu and change the -target-player from “playerVersion” to “11”  this will let you test your projects without getting any version errors.

EDIT:   In this step You don’t need to change the “-target-player” argument leave it as is it will use the 10.2 version but you need to add the “-swf-version=11” argument, that way it won’t show errors when compiling.( Thanks to John Olson for pointing it out).

Figure 6.

5.- That’s it now You can test and compile the features including in the beta of  the Flash Player 10.2 and get  all the coding comfort of FDT4.

Figure 7.

Flash Player 10.2 Beta (Native bitmap-based cursors)

One of the new features of the Adobe Flash Player 10.2 is the Native bitmap-based cursors this will let You get rid of the Mouse.hide(), onMouseMove() handler  or starDrag() to display a custom cursor in your Flash projects. You can now directly assign your own custom cursors. So here’s a sample extending Thibault Imbert’s

1.- First we embed the assets( the images that we will be using as our custom cursors) and  an int var that we will be using to switch our cursors.

[Embed (source="/assets/126.gif" )]
public static const NativeCursor:Class;
[Embed (source="/assets/cat1.png" )]
public static const CursorFrame1:Class;
[Embed (source="/assets/cat2.png" )]
public static const CursorFrame2:Class;
[Embed (source="/assets/cat3.png" )]
public static const CursorFrame3:Class;
[Embed (source="/assets/cat4.png" )]
public static const CursorFrame4:Class;
[Embed (source="/assets/cat5.png" )]
public static const CursorFrame5:Class
protected var _state : int = 0;

2.- Then on the class constructor we add the click mouse event listener so on each user click we toggle the cursor.

public function NativeCursorTest() {
  stage.addEventListener(MouseEvent.CLICK, _onClick);
  toggle();
}

3.- The methods that create our cursors this is exactly the same code that Thibault’s sample just divided in two methods so You can see the animated and static cursor working.

private function createNativeCursor() : void {
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursor bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(1, true);
   // we create the bitmap cursor (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var bitmap:Bitmap = new NativeCursor();
   // we pass it to the bitmapDatas vector
   bitmapDatas[0] = bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse with an alias
   Mouse.registerCursor("myCursor", cursorData);
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myCursor";
}

private function createAnimatedCursor() : void	{
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursors bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(5, true);
   // we create the bitmap cursor frames (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var frame1Bitmap:Bitmap = new CursorFrame1();
   var frame2Bitmap:Bitmap = new CursorFrame2();
   var frame3Bitmap:Bitmap = new CursorFrame3();
   var frame4Bitmap:Bitmap = new CursorFrame4();
   var frame5Bitmap:Bitmap = new CursorFrame5();
  // we pass it to the bitmapDatas vector
   bitmapDatas[0] = frame1Bitmap.bitmapData;
   bitmapDatas[1] = frame2Bitmap.bitmapData;
   bitmapDatas[2] = frame3Bitmap.bitmapData;
   bitmapDatas[3] = frame4Bitmap.bitmapData;
   bitmapDatas[4] = frame5Bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse
   Mouse.registerCursor("myAnimatedCursor", cursorData);
   // we just pass a frame rate
   cursorData.frameRate = 5;
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myAnimatedCursor";
}

4.- And finally our Mouse event listener and the toggle method that makes all that cursor magic switch happens.

private function _onClick(event : MouseEvent) : void {
	// we call the toggle function to switch between our mouse cursors
	toggle();
}

private function toggle() : void {
	switch (_state) {
	   case 0:
		// we set the static cursor
		createNativeCursor();
		_state = 1;
		break;
	   case 1:
		// we set the animated cursor
		createAnimatedCursor();
		trace(_state);
		_state = 0;
		break;
		default:
	}
}

Hope this helps You and in case you haven’t already go to adobe labs and download the Flash Player 10.2 beta.

Almost forgot here’s the example: ( You’ll need Flash Player 10.2 in your browser to see it).

Flash Player 10.2 Beta – StageVideo CPU Performance Test (Video)

Flash Player 10.2 Beta – StageVideo CPU Performance Test from Dave Gamez on Vimeo.

This is a example of the StageVideo API performance on Windows 7 (The microphone got messy on me so there’s no audio but anyway You get to see on the monitor how the new Flash Player 10.2 performs).

If You wan’t more info on how to start making some test on Your own reading the Getting Started with stage video article on the ADC by Thibault Imbert will be a good point to start.