Latest Entries »

An important decision came to my attention this morning.  Apple has lifted the ban on third party apps being distributed through the Apple Store.  One of the most important aspects of this decision is that is shows us that Flash Player is an important part of the future web.  Anyone reading this article already knew that, it’s just nice Steve is comin back to reality after loosing touch there for a few months.

Check out:

http://www.canadianbusiness.com/markets/market_news/article.jsp?content=D9I4FUC80

We are working hard these days on an Android version of the WMN.fm Mobile Player.  After getting all the SDKs, and reading through the prerelease documentation, I decided it was time to use Flash Builder 4 to manage and debug the application.  This is very easy to setup, so here are a few tips to help you on your way.

First, read this blog post

1. If you haven’t already, download all the SDKs, install the CS5 extension, and successfully create a few Android test apps using Flash CS5 Professional.

2. Now that you know you’ve got everything you need to build Android apps it’s time to try and get Flash Builder to play nice.  The first step is to create an SDK folder Flash Bulder can use.

  • Locate the SDKs folder inside the Flash Builder  application folder.  On OSX: /Applications/Adobe Flash Builder 4/SDKs
  • Duplicate the folder of the most recent version (for me this is 4.0.1) and rename it appropriatly.  I used: /4.0.1-air2.
  • Using the ditto command, copy the AIR SDK files into your new folder:
ditto -V /path/to/air/prerelease /path/to/new/flashbuilder/sdk

3. Now fire up flex builder, and create a new air project. Select AIR for the Application Type, and click the Use a specific SDK dropdown.  If you completed the last few steps properly you should now see AIR for Android in the drop down list.  Select it!, Next Next Finish!

4. Change the root node of the main Application.mxml file from WindowedApplication to just Application.  Now edit the -app.xml file to reflect the app your building  The initialWindow node is where you really need to change a few things.


<!-- Settings for the application's initial window. Required. -->
 <initialWindow>
 <!-- The main SWF or HTML file of the application. Required. -->
 <!-- Note: In Flash Builder, the SWF reference is set automatically. -->
 <content>AndroidDebugTest.swf</content>

 <!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
 <systemChrome>standard</systemChrome>

 <!-- The window's initial width in pixels. Optional. -->
 <width>480</width>

 <!-- The window's initial height in pixels. Optional. -->
 <height>800</height>

 <!-- The window's initial x position. Optional. -->
 <x>0</x>

 <!-- The window's initial y position. Optional. -->
 <y>0</y>

 </initialWindow>

5. Throw a couple buttons in the application, that simply trace a few different test messages.
6. Create a Debug Run Configuration that doesn’t require a local swf. Click the little drop down arrow beside the debug icon in Flash Builder and select Other.
7. Create a new Web Application configuration.
8. Enter the project details… the trick to this is to add “about:blank” in the URL or path to launch field.
9. In my copy of Flash Builder, the Apply button would not activate, and it tells me ” Project must be an ActionScript or Flex project.” I resolved this by hitting entering in the Name of the launch configuration, and the URL (about:blank) first. Then when you fill the Project Name in, hit Enter, and it saved for me.
10. Compile you app using the command line compilers, I’ve modified and posted Renaun’s script here:


APP_NAME=$1
USER_WORKSPACE=/Volumes/Data/sandbox/wmn/workspace
ANDROID_SDK=$USER_WORKSPACE/Devices/android/android-sdk-mac_86
AIR_SDK=$USER_WORKSPACE/FlexSDKs/4.0.1-air2.5

$AIR_SDK/bin/amxmlc -target-player 10.0.0 -debug=true $APP_NAME.mxml

$AIR_SDK/bin/adt -package -target apk-debug -connect 192.168.1.2 -storetype pkcs12 -keystore $USER_WORKSPACE/wmnAndroid.p12 -storepass m3d14st4t10n $APP_NAME $APP_NAME-app.xml $APP_NAME.swf icon48.png icon72.png

$ANDROID_SDK/tools/adb install -r $APP_NAME.apk

Now from the source directoy, I am able to run: ../compile.sh AndroidDebugTest  (passing the app name as the only parameter)

This will compile, and push the application onto my Nexus One device.  I verifiy the app installed, and force quite it.

Now, all that’s left is to run the remote debug configuration we created, and while it’s waiting for the connection to the flash debugger (it will timeout if your too slow) open the app again on your android.  You should now see the android connect to the remote debugging session, and the flash builder 4 console tracing your test statements.

This article was written to quickly get experienced developers up and running with Flash Builder 4 and Android, let me know your thoughts!

The mobile version of WMN.fm for Nokia phones will target symbian^3 devices running Flash Lite 4.0. After researching Nokia’s WRT, we decided to build the app primarily using Javascript for managing the views or screens in the application, and Actionscript for streaming media playback.

This quickly lead to creating JSLogger, a dirty little utility class that will let you centralize your debugging statements in the javascript console.

File: /fm/wmn/utils/JSLogger.as

package fm.wmn.utils
{
	import flash.external.ExternalInterface;
	
	public final class JSLogger
	{
		public static function log(p_msg:Object, p_type:Object=null, p_trace:Boolean=false) : void
		{
			if (p_type)
				ExternalInterface.call("console.log", { type: p_type, msg: p_msg } );
			else 
				ExternalInterface.call("console.log", "["+new Date().toTimeString()+"]: " + p_msg);
			
		}
	}
}

One of the biggest challenges when creating social-linkable flex applications, is deeplinking the application state.  This is pretty straight forward once you get the basic idea, and this tutorial should get you up and running in a few minutes.

1. Create a new Flex 4.0 Project

2. Download the SWFAddress SWC @ http://www.asual.com/swfaddress/

3. Add the swc to the projects class path by throwing it in the default flex /libs folder

4. copy the javascript files into /html-template

5. Edit /html-template/index.template.html to include the javascript files


<script type="text/javascript" src="swfaddress-optimizer.js"></script>
<script type="text/javascript" src="swfaddress.js"></script>

Now your flex project is ready to import the SWFAddress class and start using it. It’s worth noting that SWFAddress is a static class so you never instantiate SWFAddress, instead just invoke it’s goodness on our app.  Let’s rig-it-up and see the basics.

1. Create your new application, and strat listening for the SWFAddress.onChange event.  The applications initialize handler is a great spot to setup your event listeners, so lets start there.

import com.asual.swfaddress.*;

protected function application1_initializeHandler(event:FlexEvent):void
{
SWFAddress.onChange = swfURL_changeHandler;
}

private function swfURL_changeHandler():void
{
var newURL:String = SWFAddress.getValue();
Alert.show(newURL, "URL Change");
}

Now, add some user inputs so we can change the Browser Title, and URL.  Use a viewstack for the minimal implementation, and link the button id’s with the page names.

Have a look at the source code for this example: SWFAddress Flex Example

Deeplink to page 2: http://fms.wmn.fm/swfaddress/#/page2/

Deeplink to page 3: http://fms.wmn.fm/swfaddress/#/page3/

Deeplink to WMN.fm page: http://fms.wmn.fm/swfaddress/#/page4/

You will notice the Back/Next buttons do not work properly, this is because with the Flex 4 release, there was not a spark equivalent of the ViewStack class.  Adobe has changed the way the recommend handling BrowserHistory, and so I will cover a work around in the next article.