Targeting Flash Player 11 & AIR 3 Release Candidates in Flash Professional CS5.5

This post was written before Adobe made the announcement that the Flash Player 11 and AIR 3.0 runtime will be available next month.

Although all of my projects are coded in FDT4 I still use Flash Professional on a regular basis that because a great part of those projects have complex timeline animations usually made by the animation artist working in the project so my workflow usually involves the Flash IDE for exporting the final swf, here is a guide on how to set up Your copy of Adobe Flash Professional CS5.5 to target the Flash Player 11 and AIR 3.0 Release Candidates, let’s get started:

Targeting Adobe Flash Player 11 Release Candidate for Desktops.

1.- Download the Flash Player 11 Release Candidate.
First things first go to the Adobe Labs site and download the Adobe Flash Player 11 Release Candidate for Desktops. Download the proper player for Your system ( Is important that You download and install the runtime on Your browser otherwise you won’t be able to test your SWFs as there is no Standalone RC1 version). You need to download the Flash Player 11 Release Candidate Global SWC “playerglobal.swc” as well.

2.- Once You installed Flash Player in the browser and renamed the swc file from flashplayer11_rc1_playerglobal_090611 to “playerglobal.swc” go to “/Applications/Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0” and create a new folder i named mine FP11_RC1 and copy your playerglobal.swc file inside the folder you just created.

 

3.- Now You need a new player profile so You can choose the Flash Player 11 RC1 from the available player versions when working with Flash, go to ” /Applications/Adobe Flash CS5.5/Common/Configuration/Players/”  duplicate the FlashPlayer10_2 2.xml and give it a new name to the file You just copy I named mine FlashPlayer11_RC1.xml.

4.- Open that file in a text editor and change the id and version in the player tag for id give it the name You wish to be displayed in the Player panel inside of Flash I named mine “FlashPlayer11_RC1” and change the version to “13”.


   Flash Player 11_RC1

5.- In the same file change the path tag so it points to the folder You just created:

   

6.- Save the file open Flash CS5.5 and You’re good to go.

 

*Note* Remember that there’s no Standalone for Flash Player 11 RC1 so when You test your project in Flash ht command + F12 in order to publish to browser (Where You should have the Flash Player 11 RC1 plugin installed by now.

Targeting Adobe AIR 3 Release Candidate.

1.- Download the AIR 3.0 Release Candidate.
First thing You need is the Adobe AIR 3 SDK Release Candidate.

2.- Unzip Your AIR SDK if You’re on Mac the file will be named ” air3_rc1_sdk_mac_090611.tbz2″

3.- Close Flash Professional CS5.5 and browse o the AIR 2.6 folder, on Mac it will be in the following location
“/Applications/Adobe Flash CS5.5”

4.- Change the AIR2.6 folder name to something like AIR2.6_old.

5.- Rename the folder You previously unzipped to AIR2.6 and place it on the Flash Professional CS5.5 folder “/Applications/Adobe Flash CS5.5”.

6.- Browse to the AIR2.6/frameworks/libs/air/ folder and copy the airglobal.swc.

 

 

7.- Paste the SWC file in the folder “/Applications/Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/AIR2.6” it wil replace your copy of  the airglobal.swf file.

8.- Browse to the “/Applications/Adobe Flash CS5.5/Common/Configuration/Players” folder and open the following files with a text editor:  AdobeAIR2_6.xml, AiriPhone.xml, or Android.xml.

 

9.- Change the version attribute in the player tag from 11 to 13 and save the files:

On the Android xml file:

On the AiriPhone xml file:

On the AdobeAIR2_6 xml file:

10.- Browse to the “/Applications/Adobe Flash CS5.5/AIR2.6/samples/” and open the descriptor-sample.xml file.

11.- Change the “http://ns.adobe.com/air/application/2.6” namespace URL to “http://ns.adobe.com/air/application/3.0”.

12.- Save the file and open Flash.

Testing time:

In order to see that You’re targeting the RC1 versions of the Flash PLayer 11 and AIR 3.0 here are 2 quick tests:

To test Flash Player 11:
1.- Open the Flash IDE go to File > New > ActionScript 3.0 to create a new flash document in the Player section of the Properties panel select the “Flash Player 11_RC1” as your player version.

2.- With the first frame selected go to Window > Actions to open the ActionScript panel and write the following.

import flash.display.Stage3D;

var stage3d = new Stage3D();   

var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0xFF0000;
my_fmt.size = 32;
my_fmt.bold = true;
my_fmt.font  = "Arial";
	
var textF: TextField = new TextField;
textF.defaultTextFormat = my_fmt;
textF.autoSize = TextFieldAutoSize.LEFT;
textF.text = "Hello Flash Player: " + Capabilities.version + "\n" + stage3d;
	
addChild(textF);

Here we are importing one of the classes only available to FP11 “Stage3D” and creating a text field to display the version of Flash Player installed in our browser.

3.- Hit Command + F12 to publish to browser if we did everything ok You should see your swf displaying the player version and the Stage3D object.

To test AIR 3.0:

1.- Open the Flash IDE go to File > New > AIR to create a new flash for AIR document in the Player section of the Properties panel select the “AIR 2.6” as your player version.

2.- With the first frame selected go to Window > Actions to open the ActionScript panel and write the following.

import flash.display.Stage3D;
import flash.desktop.NativeApplication;
import flash.text.TextField;

function air3_test(){
	var stage3d = new Stage3D();
	var my_fmt:TextFormat = new TextFormat();
	my_fmt.color = 0xFF0000;
	my_fmt.size = 32;
	my_fmt.bold = true;
	my_fmt.font  = "Arial";
	var textF: TextField = new TextField;
	textF.defaultTextFormat = my_fmt;
	textF.autoSize = TextFieldAutoSize.LEFT;
	textF.text = "Hello AIR Version No. " + NativeApplication.nativeApplication.runtimeVersion +"\n" + stage3d;
	addChild(textF);
	trace ( "+ Flash CS5.5.air3_test() - args: " + [stage3d,"AIR Version: " + NativeApplication.nativeApplication.runtimeVersion ] );
}

air3_test();

Here we are importing one of the classes only available to FP11 “Stage3D” and creating a text field to display the version of Flash Player using the “NativeApplication” class.

3.- Go to Debug > Debug Movie > in AIR Debug Launcher(Desktop) to publish our file if we did everything ok You should see your swf displaying the AIR version and the Stage3D object.

And that’s it, thanks for reading and Happy Flashing.

Book Review: ActionScript Developer’s Guide to Robotlegs

So quite some time after I got this book on my hands I’ve finally taken the time to sit down and read it and let me open this post saying that I really enjoyed it. ActionScript Developer’s Guide to Robotlegs will guide You through the inner workings of the Robotlegs framework in a very straightforward and concise way, the authors Lindsey Fallow (Stray) and Joel Hooks (who also are part of the Robotlegs core team) do so by taking real-life applications and break them apart showing You how Robotlegs gets things done in the process, each chapter is full of tips equally appealing to Robotlegs newcomers and seasoned users of the framework. The book is written in such a way that has a very “Head First Series” nice feel to it taking You from the basics to more advanced features, troubleshooting, tips, good practices and power-ups in a very clear way.

What I liked the most about this book is the fact that Is really well explained, from the table of contents to the appendixes is a step by step companion as You dive deeper in the core concepts of Robotlegs such as Context, Commands, MediatorMaps and DI ( Be sure to check the Appendix B dedicated entirely on how Robotlegs handles dependency injection).

When You’re entirely new to a framework such as Robotlegs You might find yourself lost in nomenclatures and concepts previously unknown to you, well this book untangles it all for You and gently clears your way as you read along and event when you’ve used Robotlegs before is full of juicy tips and best practices that will surely help you have a better understanding on how you wire your applications using the framework.

You can get the book in digital or print format at O’Reilly in case you haven’t already done so, I definitely recommend it for anyone thinking on using the Robotlegs Framework or anyone who is already using it on a regular basis.

I like to thank Stray and Joel for taking the time to write this book and the Robotlegs team for the efforts on the framework (keep up the wonderful work guys).

Don’t forget to visit Robotlegs.org for the latest on the framework.

Happy Reading.

Greensock’s ThrowPropsPlugin iPad Test

Heres a quick video showing how You can use the Greensock’s ThrowPropsPlugin to emulate the bouncy effect of the iOS devices, on the example I used an image but it can also be used with TextFields or Lists and it performs equally good on the iPad.

ThrowPropsPlugin is a plugin for TweenLite and TweenMax that allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite). This is perfect for flick-scrolling or animating things as though they are being thrown

For the code part I just used Jack’s sample with some minor tweaks to use an image instead of a TextField.
Here is the class:

package com.swfgeek.mobile.ThrowPropsPlugin {
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.utils.getTimer;
	import com.greensock.TweenLite;
	import com.greensock.easing.Strong;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.ThrowPropsPlugin;
	import flash.geom.Rectangle;
	
	public class MainApp extends MovieClip {
		private var bounds : Rectangle;
		private var mc : MovieClip;
		private var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number;
		
		public function MainApp() {
			TweenPlugin.activate([ThrowPropsPlugin]);
			initialize();
		}
		
		private function initialize():void {
			bounds = new Rectangle(-128, 0, 768+128, 1024);
			mc = getChildByName("robots_mc") as MovieClip;
			setUpTPBounds(mc, bounds);
			mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		}

		
		private function mouseDownHandler(event:MouseEvent):void {
			TweenLite.killTweensOf(mc);
			x1 = x2 = mc.x;
			y1 = y2 = mc.y;
			t1 = t2 = getTimer();
			mc.startDrag();
			mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}

		private function enterFrameHandler(event:Event):void {
				x2 = x1;
				y2 = y1;
				t2 = t1;
				x1 = mc.x;
				y1 = mc.y;
				t1 = getTimer();
		}

		private function mouseUpHandler(event:MouseEvent):void {
			mc.stopDrag();
			mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
			var time:Number = (getTimer() - t2) / 1000;
			var xVelocity:Number = (mc.x - x2) / time;
			var xOverlap:Number = Math.max(0, mc.width - bounds.width);
			var yVelocity:Number = (mc.y - y2) / time;
			var yOverlap:Number = Math.max(0, mc.height - bounds.height);
			ThrowPropsPlugin.to(mc, {throwProps:{
										 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
										 x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
									 }, ease:Strong.easeOut
									}, 10, 0.3, 1);
		}

		private function setUpTPBounds(container : MovieClip, bounds : Rectangle):void {
			var crop:Shape = new Shape();
			crop.graphics.beginFill(0xFF0000, 1);
			crop.graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
			crop.graphics.endFill();
			container.x = bounds.x;
			container.y = bounds.y;
			container.parent.addChild(crop);
			container.mask = crop;
		}


	}
	
}

To know more about this plugin visit Greensock’s ThrowPropsPlugin page and check out the ASDocs.

Note: ThrowPropsPlugin is a membership benefit of Club GreenSock (“Shockingly Green” and corporate levels). If you’re not a member yet,I suggest you sign up, believe Me is really worthy.

Happy Coding

Quicktip: Uninstall Your Android App from the AVD Emulator

This post is more of a self-remainder but hopefully it will help other mobile developers with the same issue, when working with the Android Emulator You might be in the situation that You’ll need to wipe Your app entirely and there’s no drag and drop in thrash when using the emulator, so in order to delete Your app without erasing Your AVD image just follow the next steps:

1.- Start Your Eclipse IDE (FDT or Flash Builder).

2.- Run the emulator.

3.- Using the terminal navigate to the Android SDK “platform-tools” directory, mine is located at:

/Users/dave/development/flash/SDKs/android-sdk-mac_x86_r12 /platform-tools

 

4.- Do the command “./adb shell” remember that commands must have the “./” before the command name otherwise You’ll get a bash error (-bash: adb: command not found).

5.- Navigate to the app directory using the cd command  ” cd /data/app/”.

6.- Then list the apps using the list command “ls” (This will display the names of the .APKs installed in Your emulator.

 

7.- Then use the remove command “rm YourApp.apk”

8.- You can now type “Exit” to leave the adb shell, relaunch the emulator and Your app will be gone for good.

Happy Coding.