Flash Player 10.2 With FlashDevelop (and a quick Cursor Manager)

For that large population of you out there using FlashDevelop for pure AS3 development, here’s a quick overview on how to start publishing to the beta version of Flash Player 10.2:

  1. Install the beta player into the browser of your choice (i.e. Chrome).
  2. Download the most recent build of the Flex SDK (4.5.0.18623 at the time of writing this) and unzip it to the location of your choice.
  3. Now, because FlashDevelop currently only supports up to Flash Player 10.1, it will look for the playerglobal.swc in the path [FLEX SDK]/frameworks/libs/player/10.1. To get around this, simply copy the ‘10.2’ directory, paste it in the same place and rename it ‘10.1’. In other words, you should wind up with two directories located at [FLEX SDK]/frameworks/libs/player, ‘10.1’ and ‘10.2’, both containing the same playerglobal.swc file.
  4. Now fire up FlashDevelop (3.3.2 is available, by the way, in case you may have missed it) and create a new AS3 Project in the directory of your choice.
  5. Most likely you won’t want to use the beta Flex SDK for all your AS projects, so, rather than change the ¬†Flex SDK Location in the global program settings, open up the project settings dialog box. Be sure you’re targeting Flash Player 10.1 in the output panel then pop open the Compiler Options panel. In the Custom Path to Flex SDK box, browse to the new SDK you downloaded and saved. Finally, in the Additional Compiler Options box add the line ‘-swf-version=11’ (with no quotes). At this point you’re ready to roll with one last point to keep in mind.
  6. You won’t be able to preview your 10.2 .swf files in an external player, pop up or new tab, so, rather than using the ‘Test Movie’ button to compile your output (as I, personally, most often do), you’ll have to just use the ‘Build Project’ button then preview the generated index.html file within the bin directory of your project directory within the browser in which you’ve installed with the 10.2 player.

Of course now you’ll probably want to play around with the new 10.2 player capabilities, so here’s a quick CursorManager test I put together to check out the new Native Cursor potential of the latest player.

This CursorManager.as file embeds a couple .png files – one with an open hand and one with a closed hand and registers the bitmap data of those two images as MouseCursorData.

package ui.cursors {
	
	import flash.display.BitmapData;
	import flash.ui.Mouse;
	import flash.ui.MouseCursor;
	import flash.ui.MouseCursorData;
	
	public class CursorManager {
		
		public static const HAND_OPEN:String 		= "handOpen";
		public static const HAND_CLOSED:String 		= "handClosed";
		public static const AUTO:String			= MouseCursor.AUTO;
		
		[Embed(source = 'assets/grab_closed.png')]	private static const CLOSED:Class;
		[Embed(source = 'assets/grab_open.png')]	private static const OPEN:Class;
		
		public function CursorManager() {
			// do not instantiate -
			// use static init() method
		}
		
		public static function init():void {
			initCursors();
		}
		
		private static function initCursors():void {
			var c1:Vector. = new [new OPEN().bitmapData];
			var mcd1:MouseCursorData = new MouseCursorData();
			mcd1.data = c1;
			Mouse.registerCursor(HAND_OPEN, mcd1);
			
			var c2:Vector. = new [new CLOSED().bitmapData];
			var mcd2:MouseCursorData = new MouseCursorData();
			mcd2.data = c2;
			Mouse.registerCursor(HAND_CLOSED, mcd2);
		}
	}
}

The Main.as file simply creates a draggable Sprite instance which changes cursor on mouse over and mouse down (to drag):

package {
	
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.DropShadowFilter;
	import flash.ui.Mouse;
	import ui.cursors.CursorManager;
	
	/**
	 * Quick example of implementing a Cursor Manager in Flash Player 10.2
	 * @author Devon O.
	 */
	
	[SWF(width='640', height='480', backgroundColor='#666666', frameRate='31')]
	public class Main extends Sprite {
		
		private var _square:Sprite;
		
		public function Main():void {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(event:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			CursorManager.init();
			initObject();
		}
		
		private function initObject():void {
			_square = new Sprite();
			_square.graphics.beginFill(0x006600);
			_square.graphics.drawRect(0, 0, 150, 150);
			_square.graphics.endFill();
			_square.x = (stage.stageWidth - _square.width) >> 1;
			_square.y = (stage.stageHeight - _square.height) >> 1;
			_square.addEventListener(MouseEvent.ROLL_OVER, onOver);
			_square.addEventListener(MouseEvent.ROLL_OUT, onOut);
			_square.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
			_square.addEventListener(MouseEvent.MOUSE_UP, onUp);
			_square.filters = [ new DropShadowFilter(2, 90, 0x000000, 1, 4, 4, 1, 3) ];
			addChild(_square);
		}
		
		private function onDown(event:MouseEvent):void {
			Mouse.cursor = CursorManager.HAND_CLOSED;
			_square.startDrag();
			stage.addEventListener(MouseEvent.MOUSE_UP, onStageUp);
		}
		
		private function onStageUp(event:MouseEvent):void {
			stage.removeEventListener(MouseEvent.MOUSE_UP, onStageUp);
			_square.stopDrag();
		}
		
		private function onUp(event:MouseEvent):void {
			Mouse.cursor = CursorManager.HAND_OPEN;
		}
		
		private function onOver(event:MouseEvent):void {
			Mouse.cursor = CursorManager.HAND_OPEN;
		}
		
		private function onOut(event:MouseEvent):void {
			Mouse.cursor = CursorManager.AUTO;
		}
	}
}

And compiled, that will give you the below (of course you’ll need Flash Player 10.2 installed to view it):

[kml_flashembed publishmethod=”static” fversion=”10.2.0″ movie=”http://blog.onebyonedesign.com/wp-content/uploads/2010/12/cursor_test.swf” width=”640″ height=”480″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Hope that might help out. Now to play around with a little StageVideo action.

Date: