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.

Flash For Android Meeting | Slides and Recording

Here’s the slides of my preso Flash For Android for Hawaii Flash User Group, thanks everyone who attended and to John Barret for the invitation was my first preso in other language so that makes it special ;), if You didn’t make it to the meeting last night below is the link of the recording.

The recording of the session:
http://experts.adobeconnect.com/p305dn8lpzd/

Thanks again and happy coding.

*UPDATE* Flash for Android Talk for Hawaii Flash User Group

Upate: Unfortunately and due to some problems with the Adobe Connect Add-in on Mac OS Lion the presentation couldn’t be held last Saturday, I apology for the inconvenience and the meeting is being rescheduled to August 27, 2011 05:00 PM – 06:00 PM (GMT-10 Hawaii, Fakaofo).
This meeting will be on-line at:
http://experts.adobeconnect.com/hawaiiflash/

I will be speaking this August 27, 2011 05:00 PM – 06:00 PM (GMT-10 Hawaii, Fakaofo) about Flash for Android, In this session I will be showing the basic workflow in Flash CS5.5 to set up and get Your AIR app running on the Android emulator for testing and then pushing it to the Android Marketplace.

You can RSVP here.

The talk will be streamed on connect, Visit Hawaii Flash User Group in Adobe to get the connect details.

See You in an hour 😉

Flash Player 11 & AIR 3 Betas at Adobe Labs

Adobe in his secret plan of not letting Me catch up with the latests runtimes 😉 has just released new beta versions of Adobe Flash Player 11 and Adobe AIR 3 and are available at Adobe Labs.

Some of the new features are:

Adobe® Flash® Player 11 desktop beta drives innovation for rich, engaging digital experiences with new features for cross-platform browser-based viewing of expressive rich internet applications, content, and videos across devices. Some of the features from the Flash Player Incubator, such as Stage 3D and 64-bit support, have been moved into this beta release.

Key benefits of the Flash Player 11 desktop beta include:

Stage3D APIs — Create highly interactive visuals to improve collaboration on 3-dimensional models.
64-bit support — Support for 64-bit operating systems and browsers on Linux, Mac OS, and Windows.
G.711 audio compression for telephony — Integrate voice/telephony into business apps using G.711 codec.
H.264/AVC SW Encoding — Encode higher quality video locally using H.264 video.
Socket Progress Events — Build advanced file sharing apps like FTP clients that send large amounts of data.
HD surround sound — Deliver full HD videos with 7.1 channel surround sound directly to AIR powered TVs.

More info at Adobe Labs

Adobe® AIR® 3 introduces enhanced features that provide developers a consistent and flexible development environment for the delivery of out-of-browser applications across devices and platforms.

AIR 3 delivers innovation for rich engaging applications with unparalleled performance improvements that deliver advanced graphics rendering, high-definition video, and consistent reach across operating systems and devices. AIR 3 is packed with features that will benefit all developers but has a special focus for those interested in developing console quality games, delivering high quality video, or scalable enterprise applications.

Note: The AIR 3 desktop runtime beta is provided to ensure current AIR 2.7 and AIR apps targeting older version of AIR are compatible if You want to test the new SDK You must enrole in the private prerelease program.
More info at Adobe Labs

Seems like a lot of good stuff to play with.

Happy Coding.
Dave

Robotlegs Modular + Flash CS5 Project Template for FDT 4.5


Click the image to see working example.

So here it is the updated version of my Robotlegs Modular + Flash CS5 Project Template for FDT 4.5, what it does? it will let You create a Flash CS5+Robotlegs Modular project using Robotlegs version 1.4.0 and Joel Hooks version of Stray’s Utility Modular.

Project Settings

The project is set so You can enter your own package structure e.g. “com.yourdomain.project” it will crate a folder called modules with the all the classes needed it will also create a Flash .XFL with the Views( MovieClips) already mapped to Your classes.

I also gave the design a little make over 😉 see the example above.

So where do You get this template and how to use it:

1.- Download the Project Template form GitHub extra points if You make a fork.

2.- Install the project template in Your FDT folder:
On OSX the path is: (Your User Name) > Library > Application Support > FDT
For windows: C:\Users\{Username}\AppData\Roaming\FDT

3.- Create a project with this template in Your project settings will be on Web>Robotlegs Modular + Flash CS5

4.- Compile the Project and Enjoy 😉

What I’ve been up to.

After quite some time of not writing a post due to projects I like to share with You what I’ve been up to, begging this year I decided to leave Grupo W and start working on my own one of the things that influenced that move was the fact that even when working in W was awesome I was spending more and more time at the office and less and less time with my family so based upon that I decided to start working at my place to give more time to my kids and my personal projects, at first I was doubtful that I could pull it off (having 4 kids to feed makes anyone nervous about leaving a stable job) and last time I’d freelanced was a long time ago, but as soon as I started I found out that the lack of projects was the last thing that should worry Me things rolled out just fine and before I knew it I was enrolling in new contracts that had me working full time, the difference of doing it by my own is that I decided what projects to take and when to take them.

To make things shorter and less sentimental most of the projects I’ve been doing are for mobile platforms and even when I had previous experience in that field I’ve really enjoyed the process of learning new tools and development languages I reluctantly moved back to Mac OS after almost 4 years of working with PC but if You plan to do mobile development there’s one platform You don’t want to miss (at least my clients wouldn’t wanted to miss it) Yes I’m talking about Apple’s iOS I decided to go native and get to dusting my old Objective-C books and get a MacBook Pro, and to be sincere I kinda of liked it( I’m talking about the code, to talk about how I feel about Apple cornering You to give them their 30% of almost every app You build is a matter that will need a post of it’s own) but almost immediately Adobe started unveiling the path they where taking for mobile development in the Flash Platform and the sun shined again, it’s not that I hate iOS or xCode but the fact of stop working with the tools that I know and love was something I didn’t like at all. And Adobe sure didn’t let Me down using the newer AIR and Flex SDKs I was deploying a single code based project across multiple devices including iOs, Android and BB Playbook( that last one only on emulator “You should have submitted Your app for that contest Dave”) so event some client’s work was being done native I kept doing Flash based mobile development in all my other projects, one of those projects is a game I’m doing with Cecy Meade and let me say it runs like butter on iOS devices can wait to update it to AIR 2.7 SDK (which Adobe publicly released today) and push to Apple’s AppStore.

So that’s what I’ve been up to, oh yes and Piñatarama 2.0 😉 a project I secretly worked on with Cecy Meade and Vertigo Gallery’s Jorge Alderete and Clarisa Moura  this last few months that features the works of artists from all over the world reinterpreted by Mexican artisans in the form of Piñatas which had it’s opening last weekend in the Museum of Modern Arts of México City if You go to D.F. be sure to pay a visit the artists and artisans did a really amazing work.

So, thanks for reading I promise I’ll keep updating this blog more often.
See You on Twitter and Viva el Flash 😉

Adobe announces The Adobe Creative Suite 5.5 Product Family

Today Adobe has announced a very  significative update to the Creative Suite family of products, The Adobe Creative Suite 5.5 which is also the first time Adobe does a mid-cycle release, according to Adobe this releases will help developers and designers get up to speed on technology changes the milestone releases (such as CS3, CS4, CS5) are moved to a two-year cycle , I was part of the private prerelease beta for Flash Builder 4.5 and Flash Catalyst 5.5 and let me say it comes with a lot of new and cool features. This release has a lot of mobile targeted features “Android, iOS, Blackberry” which will facilitate You targeting various devices using the same codebase there’s also great new features in Flash CS5.5 and all the HTML5 cool stuff in Dreamweaver CS5.5 including the jQuery mobile framework integration for browser-based content. So here is a list of some of the new features and be sure to check out the introduction post and  AdobeFlash PlatformCS5 Twitter timelines.

Flash Builder 4.5

  • Android, BlackBerry and iOS development
  • Lots of new coding enhancement and productivity features
  • Improved workflow between Flash Builder and Flash Catalyst
  • Uses Eclipse version 3.6.1 “Helios”
  • Performance improvements
  • Supports code and design view of the same document
  • Introduces a new version of Flash Builder 4.5 aimed for PHP developers with Zend integration

 

Flash Catalyst 5.5

  • Resizable applications and components
  • Timeline and animation enhancements
  • Custom skinnable components
  • Improved interaction choices
  • Common library panel

 

Flash Professional 5.5

  • Workflow improvements for mobile development
  • Content scaling on stage resizing
  • Performance optimization with rasterization for symbols
  • Enhanced layer controls
  • Code snippet handling improvements and enhancements
  • Inverse kinematics pinning support
  • File auto-save and recovery
  • Incremental compilation with asset caching
  • Seamless mobile testing

Dreamweaver 5.5

  • Multiscreen preview panel
  • CSS3 and HTML5 support
  • JQuery Mobile integration
  • Native Android and iOS apps development and packaging
  • Adobe BrowserLab integration
  • FTPS, FTPeS support