27 July 2010

Debug a Mobile Flash project using Flash Builder, Flash CS5 & Device Central CS5

Despite the poor bridge implementation between these 3 products, I HAD to find a way to debug Flash 10 mobile code using Flash Builder. Debugging using Flash CS5 is just insane ;)
I finally found 2 ways to do this, based on the same discovery but dependant on the project type.
I'll first explain for a Flash professional project, ie based on a .FLA/.XFL file

the Flash part
Create a Flash project using the previous method (and throught Device Central)
On Flash CS5, select File > Publish settings
on Flash tab, be sure to check "Permit debugging"
On Flash Builder, publish the project (Alt+Shift+F12 or the first Flash icon in toolbar)
You now have a Flash professional project on Flash Builder, which generate a SWF with debug data but doesn't launch Flash CS5
(reminder : don't forget to uncheck the option before deployment !)

the Device Central part
Create a debug.bat batch file on your Flash project folder with this line :

"C:\Program Files (x86)\Adobe\Adobe Flash CS5\Device Central\adcdl.exe" "<mobileSettings><testDevices><testDevice id="%1" selected="yes"/></testDevices><contentType id="HTMLembedded"/></mobileSettings>" %2

Edit Flash CS5 folder path if needed and remove any line break (it MUST be one full line)
This is the command line (used by Flash CS5) to open an SWF on Device Central CS5 with a specific mobile
%1 is the first parameter and is the mobile profile ID
%2 is the full path to the SWF file
open C:\Users\<you>\AppData\Local\Adobe\Adobe Device Central CS5\Devices\<your_device>_Main.xml to get the mobile profile ID
for example, the Nexus One id is 1494, retrieved from Google_Nexus_One_Main.xml :

<adp:deviceProfile xmlns:adp="http://ns.adobe.com/devicecentral/profile/" id="1494" modelVersion="3.0" ....>

Still on Flash builder, add an External tool with Run > External Tool > Open external tools Dialog...
Add a new program (DC for exemple) with these info
In Location, Browse workspace up to your debug.bat
=> this will result in something like ${workspace_loc:/<projectname>/debug.bat}
Define Working directory to ${workspace_loc:/<projectname>} if you load external assets
In Arguments, add the mobile ID (first arg) and the full path to the generated swf file (second arg)
=> this will result in something like 1494 ${workspace_loc:/<projectname>/<file>.swf}
Congratulations! You are now able to open the SWF on Device Central directly from Flash Builder!
(reminder : you'll need one external tool per Flash project since I didn't find a way to make it dynamic using variables)

The final tricky part
Import this Flash Builder project : DebugLauncher.zip
Build the project, which will create the needed files in bin-debug
On project properties, add a new Run/Debug > Web Application
Do not use the default value (bin-debug\DebugLauncher.html) but bin-debug\fake.html
fake.html is an empty HTML (ie w/o Flash) so if you try to debug DebugLauncher, Flash Builder will be in debug mode, waiting for a Flash with debug informations to be loaded.
(reminder : you'll only need one DebugLauncher, not one per Flash project)

Mix the 3 parts
Always open these 2 projects (DebugLauncher and <your fla project>)
When you want to debug, publish your flash (Alt+Shift+F12) -> this will generate a debug swf file
open DebugLauncher.as in editor (mandatory else it will try to debug your flash project file)
launch a debug session of DebugLauncher -> this will put Flash Builder on debug mode
close the browser this will open
Launch the external tool -> this will launch the swf file on Device Central
Close Device Central when finished (mandatory since Device Central finally crashes when you try to launch while it is alread launched !)

Final notes
The process is a hack, it's not that easy to handle and you need to go throught 3 steps to debug (against one : "debug") but it's, for me, easier and less buggy than the 'official' process
I tried to make a better external tool but I wasn't able to find a way to retrieve the full swf file from the current project.
External tool location and arguments can't use double quote, so I had to use a batch file....sorry for Mac users but I don't know how to do this on Mac (using a shell?)
EDIT : find a way on Actionscript project mode

Coming soon See also the Actionscript project way

No comments: