• L2709_Presentation.ppt
• L2709_Workbook.pdf
• FlashP2PLib.fxpl
• MAX2011MobileVideoChat.fxp
• EyeChat.fxp
• EyeChatDesktop.fxp

The last two projects are completed versions that you can use for testing or to skip ahead.

I plan to follow up with posts related to the P2P logic used in this sample application. Any questions, let me know. Thanks to all who attended!!

L2709_DSMVCA.zip

First thing you want to do is to signup for a GA account or create a tracking account that can be used by your AIR app if you’ve already signed up for GA. As part of the tracking account creation, you’ll supply a domain to track which should be related to your application but doesn’t have to be. I’d advise it to be though because it keeps everything cohesive by grouping your app usage metrics with your product site metrics. If you’ve done everything correctly, you’ll now have access to a unique web property ID that maps to your newly created tracking account. This will be very important later on.

Now that you’ve got your tracking account setup, it’s wise to take the time to create your conversion goals. These goals are completely up to you but they need to be defined to allow GA to calculate goal conversion metrics for you. I personally consider the following goals essential to any desktop application:

• Downloads
• Installs
• Trials
• Purchases
• Registrations
• Errors

With the exception of Downloads, all of the above will be tracked via your AIR application through the definition of pageview patterns and application events. When you create your conversion goals you have the option to set the goal’s type as a URL destination which is perfect for generating your pageview patterns because it allows you to specify a goal URL. This URL now becomes the trigger for this metric. So, anytime GA registers a hit on the specified URL it also registers a hit on the corresponding goal. GA allows you to create up to 20 goals split into 4 sets. Here’s what the goal config would look like for a goal that tracks # of registrations via a virtual URL:

Once you’ve setup your conversion goals, you’re pretty much done on the GA side. You can now take the JS embed code that GA generates for you and add it to all the physical pages of your product website before moving on to your AIR application.

Now that the GA side is setup, you can concentrate your efforts on the AIR side of things. First on the AIR todo list is to grab the latest GA library SWC from the gaforflash project site. Once you’ve done that, you want to add the SWC to the library path of your Flex or Flash project. With the SWC on your library path, you can now start wiring your application’s events and user interactions to your pageview patterns that you previously defined.

In a project that I’m currently working on, I chose to tackle this through the use of a value object (VO) that transports the tracking data collected throughout my application to a proxy that handles data submission to GA. The VO includes read/write properties for everything required by the GA methods supplied via the SWC, as well as, static constants for the pageview patterns that I want to track:

package labs.otuome.air.myapp.model.vo.google
{
	/**
	 * Value object representing 
	 * application analytics data.
	 * @author Hasan Otuome
	 */
	public class AnalyticsData
	{
		///////////////////////////////////////////////////////////////////////
		// PRIVATE PROPERTIES
		//////////////////////////////////////////////////////////////////////
 
		/////////////////////////////////////////////////////////////////////
		// PUBLIC PROPERTIES
		/////////////////////////////////////////////////////////////////////
		//------------------- Track Types ---------------------------------//
		public static const URL:String 			= 'myapp_pageViewTrack';
		public static const EVENT:String 		= 'myapp_eventTrack';
		//------------------- Virtual URLs ---------------------------------//
		public static const INSTALL:String 		= '/app/installed';
		public static const TRIAL:String 		= '/app/trial';
		public static const PURCHASE:String 		= '/app/purchase';
		public static const REGISTRATION:String 	= '/app/registered';
		public static const HELP:String 		= '/view/help';
		public static const BUG:String 			= '/report/bug';
		/**
		 * The type of data this instance 
		 * represents, either AnalyticsData.VIEW 
		 * or AnalyticsData.EVENT. 
		 */		
		public var type:String;
		/**
		 * The data value to associate with this track. 
		 */		
		public var value:Object;
		//------------------- Event-only ---------------------------------//
		/**
		 * For event tracks, a custom event category. 
		 */		
		public var category:String;
		/**
		 * For event tracks, the action related to the event. 
		 */		
		public var action:String;
		/**
		 * For event tracks, a custom label to 
		 * associate with the event. 
		 */		
		public var label:String;
		/////////////////////////////////////////////////////////////////////
		// PUBLIC METHODS
		/////////////////////////////////////////////////////////////////////
		/**
		 * Constructor 
		 */		
		public function AnalyticsData(){}
 
		/////////////////////////////////////////////////////////////////////
		// OVERRIDES
		/////////////////////////////////////////////////////////////////////
 
		/////////////////////////////////////////////////////////////////////
		// PRIVATE METHODS
		/////////////////////////////////////////////////////////////////////
	}
}

And here’s the GA proxy class:

package labs.otuome.air.myapp.model.proxy.google
{
	import com.google.analytics.AnalyticsTracker;
	import com.google.analytics.GATracker;
 
	import flash.display.DisplayObject;
 
	import labs.otuome.air.myapp.model.proxy.AbstractProxy;
	import labs.otuome.air.myapp.model.vo.google.AnalyticsData;
 
	import org.puremvc.as3.interfaces.IProxy;
 
	/**
	 * The <code>AnalyticsProxy</code> class 
	 * provides access to the AnalyticsData, which 
	 * contains all of the associated analytics data. 
	 * 
	 * @author Hasan Otuome (core)
	 */	
	public class AnalyticsProxy extends AbstractProxy implements IProxy
	{
		/////////////////////////////////////////////////////////////////////
		// PRIVATE PROPERTIES
		/////////////////////////////////////////////////////////////////////
		/**
		 * The GA tracker object. 
		 */		
		private var _googleAnalyticsTracker:AnalyticsTracker;
		/////////////////////////////////////////////////////////////////////
		// PUBLIC PROPERTIES
		/////////////////////////////////////////////////////////////////////
		/**
		 * Reference to class name for framework caching. 
		 */		
		public static const NAME:String = 'AnalyticsProxy';
		/**
		 * The web property ID associated with this application. 
		 */		
		public static const GOOGLE_ANALYTICS_PROPERTY_ID:String = 'UA-12346578-1';
		/**
		 * Returns the AnalyticsData.
		 */		
		public function get track():AnalyticsData{ return getData() as AnalyticsData; }
		/////////////////////////////////////////////////////////////////////
		// PUBLIC METHODS
		/////////////////////////////////////////////////////////////////////
		/**
		 * Constructor
		 *  
		 * @param aName
		 * @param aData
		 */		
		public function AnalyticsProxy( aName:String, aData:Object=null )
		{
			super( aName, aData );
		}
		/**
		 * Starts the GA tracker. 
		 * @param displayObject
		 * @param debug
		 */		
		public function initializeGoogleTracker( displayObject:DisplayObject, debug:Boolean=false ):void
		{
			_googleAnalyticsTracker = new GATracker( displayObject, GOOGLE_ANALYTICS_PROPERTY_ID, 'AS3', false );
		}
		/**
		 * Submits the analytics data to 
		 * the analytics tracking service.
		 */		
		public function submitUsageData():void
		{
			if (track.type && track.value)
			{
				switch (track.type)
				{
					case AnalyticsData.URL:
						_trackPageView();
						break;
					case AnalyticsData.EVENT:
						_trackEvent();
						break;
				}
			}
		}
		/////////////////////////////////////////////////////////////////////
		// OVERRIDES
		/////////////////////////////////////////////////////////////////////
		/**
		 * Proxy registration handler.
		 */
		override public function onRegister():void
		{
			debugTrace( '[ AnalyticsProxy :: onRegister() ]' );
 
			data = new AnalyticsData();
		}
		////////////////////////////////////////////////////////////////////
		// PRIVATE METHODS
		////////////////////////////////////////////////////////////////////
		/**
		 * Submits a virtual page view. 
		 */		
		private function _trackPageView():void
		{
			if (_googleAnalyticsTracker) 
			{
				_googleAnalyticsTracker.trackPageview( track.value.toString() );
 
				// reset the VO
				track.type = null;
				track.value = null;
				track.category = null;
				track.action = null;
				track.label = null;
			}	
		}
		/**
		 * Submits a virtual event. 
		 */		
		private function _trackEvent():void
		{
			if (_googleAnalyticsTracker) 
			{
				_googleAnalyticsTracker.trackEvent( track.category, track.action, track.label, Number(track.value) );
 
				// reset the VO
				track.type = null;
				track.value = null;
				track.category = null;
				track.action = null;
				track.label = null;
			}
		}
	}
}

In this scenario, the GA tracker is initialized at application startup and from there, anytime usage data needs to be relayed to GA, the VO tied to the proxy is updated and then the submitUsageData() method is called.

That’s all there is to it. If it seems eerily similar to GA implementations for browser-based SWFs, that’s because it’s pretty much the same except usage from AIR apps is currently unsupported by Google or Adobe. Even still, it’s nice to know that AIR developers don’t have to be left out in the cold completely.

One additional thing to note, it can take up to 24hrs before you’re able to see the analytics data via your GA dashboard but after that period just look under the Content and Goals tabs and you should start seeing data trickle in for all your virtual pageviews and events.

Features:
1 GHz dual core processor
1 GB RAM
Pair PlayBook with your BlackBerry smartphone via Bluetooth
Uses the same tech Cisco uses to power the World Wide Web (QNX)
Dual HD cameras (3MP front cam/5MP rear cam)
Video codecs supported: 1080p, h.264, mp4, wmv
HDMI video out
micro USB + HDMI
Weighs < 1lb (400g)
Multitouch gestures (4 touch points)
802.11 a/b/g/n WiFi
Support for POSIX, Open GL, BB 6, WebKit, Flash, Java and AIR

The feature set alone should tempt you and if you're already developing apps with Flash Builder 4, PlayBook dev is as simple as adding another SDK in your config properties and setting up the VMWare simulator for testing. Once you're set up, create a new AS3 project and code away. When you compile your project, the AS3 is compiled into a SWF which is then converted to a BAR file before launching inside the simulator. There are even techniques to convert your APKs from your Android projects to the BAR format.

RIM is serious about helping you get started with your PlayBook development career. They’ve compiled a ton of resources to help you get up and running. Here’s a short list:

us.blackberry.com/developers/tablet/devresources.jsp
supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/bd-p/tablet
devblog.blackberry.com
labs.adobe.com/technologies/flash/blackberrytabos
adobe.com/devnet/devices/articles/blackberry_tablet_os_sdk.html

And, RIM not only wants you developing applications, they want you earning money as well. Some of the features of their monetization program include:
- Carrier billing, credit card and PayPal in over 70 countries and 21 currencies
- 70/30 revenue split (70% Developer/30% RIM)
- In-app payments (unlockables, powerups, etc)

They’re also arming you with an integrated advertising service that allows you to earn even more revenue from your PlayBook adventures. Here’s a brief overview of the ad service’s features:
- 60/40 revenue split (60% Developer/40% RIM)
- Ability to leverage RIMs existing vendor network to get you earning more ad revenue faster
- Maintain full control over which ads you want to display
- Benefit from an open/transparent platform whose goal is to enable devs to generate revenue

Now, if you’re still undecided, RIM is even offering a FREE PlayBook. That’s right FREE!! Full details here. The basics are create a PlayBook app, submit it to BlackBerry AppWorld and once it’s approved, you’ll get a free PlayBook when it ships!!

The excitement surrounding the PlayBook is most definitely brewing so, I strongly encourage you to take advantage of RIM’s generosity to join the forefront of this new mobile application revolution.

To view the demo in its own window, click here.

1. Open the following files:
a) /install_dir/sdks/3.5.0/bin/jvm.config
b) /install_dir/sdks/4.0.0/bin/jvm.config

2. Locate the following line found under # Arguments to VM:

java.args=-Xmx384m -Dsun.io.useCanonCaches=false

3. Increase the memory size to a larger value like the following example:

java.args=-Xmx512m -Dsun.io.useCanonCaches=false

The max you set this value to is determined by your available memory along with some workflow considerations but this should alleviate your heap issues and smooth out Flash Builder compilations considerably…

Dear Steve,

After reviewing your recent comments regarding Flash and the recent amendments to the Apple Developer TOS, I decided to share with you my response to a few of your positions. First, with regards to 3.3.1, Apple should only do QA based on app quality and NOT on app origin. Are we to seriously believe that an iPhone app built with Unity, Flash, etc. pails in comparison technologically to one built via Xcode? Are we to further believe that there are ABSOLUTELY NO poorly written Obj-C apps in the app store? If so, where are the benchmarks and metrics to support these claims?

Logical decisions are typically made based on data collection in some form or fashion. In the absence of such information, those “logical” decisions are eventually revealed to be more subjective in nature vs. being purely objective. Again, if there is data to support the claims against iPhone apps developed in Flash and compiled to *.ipa, please point us to that data.

Now, as to your assertion that Flash is the #1 reason Macs crash, again, we’d like to see empirical data that supports this claim. Having used apple desktop and laptop computers for more than a decade, I’d have to respectfully disagree with you. I’ve personally experienced kernel panics resulting from locked up processes with non-Flash applications (eg, iTunes, Safari, etc). To my knowledge, iTunes makes no use of Flash but yet it has caused my system to enter into a kernel panic on several occasions. Are we still to believe that Flash is the only big bad wolf lurking in the OSX forest? I seriously hope that’s not your intention. Will your position change when Adobe produces a Flash Player version that takes full advantage of hardware acceleration? I certainly hope so because then we’ll know that you’re truly the visionary tech leader that we all hope you to be.

Does this absolve the Flash development community from doing our part to improve the situation? NO!!! Unfortunately, many Flash apps are created by would-be developers that have no clue about memory management, garbage collection and the like. It is far too easy to create Flash apps that consume all of a browser’s memory, don’t close properly and eventually obstruct a user. But, I submit that this same fact holds true regardless of the language or platform used to create said applications. In other words, sloppy coding is the problem not the technology. This is from the perspective of a developer fluent in several languages including Obj-C and ActionScript.

I understand you have your business goals and a board of directors to please, but I implore you to work with Adobe rather than against them. Work with Google, Facebook and the like to make the future of technology truly open which benefits us all. Ultimately, we MUST support a free market economy in order to achieve this technological utopia, the results of which will be exponential growth that lasts for a millennium. Yes, it truly can be that explosive. The only thing standing in the way is our present day greed for money and power.

I sincerely hope that you soften your stance and work with the other technology leaders to usher us into that state of tech bliss…

P E A C E

Hasan

First step is building the renderer. You can use either MXML or ActionScript but for this example we’ll use ActionScript.

package labs.otuome.ui.renderers
{
  import mx.controls.Button;
  import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
 
  /**
   * Custom header renderer for displaying 
   * a graphical image in the column header.
   * @author Hasan Otuome
   */
  public class StatusHeaderRenderer extends AdvancedDataGridHeaderRenderer
  {                                                                                          
    /////////////////////////////////////////////////////////////////////////////////////////
    // PRIVATE PROPERTIES                                                                    
    /////////////////////////////////////////////////////////////////////////////////////////
    private var _btn:Button;                                                                 
    private const LEFT_PADDING:int = 12;                                                     
    /////////////////////////////////////////////////////////////////////////////////////////
    // PUBLIC PROPERTIES                                                                     
    /////////////////////////////////////////////////////////////////////////////////////////
 
    /////////////////////////////////////////////////////////////////////////////////////////
    // PUBLIC METHODS                                                                        
    /////////////////////////////////////////////////////////////////////////////////////////
    /**
     * Constructor 
     */		
    public function StatusHeaderRenderer()
    {
      super();
    }
 
    /////////////////////////////////////////////////////////////////////////////////////////
    // OVERRIDES
    /////////////////////////////////////////////////////////////////////////////////////////
    /**
     * Override to add the custom component. 
     */		
    override protected function createChildren():void
    {
      super.createChildren();
 
      _btn = new Button();
      _btn.width = 16;
      _btn.height = 16;
      _btn.setStyle( 'skin', StatusMarkerHeaderIconSkin );
 
      addChild( _btn );
    }
    /**
     * Override to layout the children 
     * @param unscaledWidth
     * @param unscaledHeight
     */		
    override protected function updateDisplayList( unscaledWidth:Number, 
                                                  unscaledHeight:Number ):void
    {
      _btn.x = LEFT_PADDING;
 
      super.updateDisplayList( unscaledWidth, unscaledHeight );
    }
    /////////////////////////////////////////////////////////////////////////////////////////
    // PRIVATE METHODS
    /////////////////////////////////////////////////////////////////////////////////////////
  }
}

Here we’ve added a 16×16 button with a custom skin that will serve as our column header and we adjust the position of the custom skin so that it displays where we’d like it to.

Now, we can provide this class name to our AdvancedDataGridColumn that we wish to customize. We do this by assigning our custom class to the headerRenderer property of the AdvancedDataGridColumn. This property can be set via MXML or ActionScript. I’ll show an example in ActionScript as that approach is slightly more involved.

import mx.core.ClassFactory; 
myADGColumn.headerRenderer = new ClassFactory( StatusHeaderRenderer );

Here we’ve used ClassFactory to get an instance of our custom renderer and we’ve assigned that instance to our chosen data grid column. Now, all that’s left to do is compile our application to see the result.

I’m truly honored to have been chosen as a member of this select group and look forward to expanding my community efforts throughout this new year. Having missed FlashCamp Brasil this past weekend, this revelation makes the trip to FITC Amsterdam that much more rewarding. See you there!!

Opticon is a runtime debugging console useful for Flash/Flex developers. It’s simple to start using in your projects. To use, follow these steps after installing the application:

1. Launch the application
2. Click the Settings button
3. Click on the SWC icon to add the OpticonConnector to your project’s build path
4. Replace your trace statements with one of the following:

• a) Opticon.log(‘message to display’)
• b) Opticon.warning(‘warning to display’)
• c) Opticon.error(‘error to display’)

Download available from:
Adobe AIR Marketplace
RIAForge

Some might ask why? This idea first appeared when AIR was Apollo and was born out of necessity (I always forget some trace statements during cleanup). Could I use global find and replace? Sure, when I’m developing with Eclipse-based IDEs but that’s not always the case.

Why not use one of the other great tools out there? After 2 years in the shadows, it’s ready to be shared with the world and, because I have a vision of where I’d like to take this so hopefully you’ll come along for the ride.

Where can I submit any bugs I find? I’ll have the bug reporting mechanism in place shortly. You’ll be notified via the application or you can subscribe to this post to be notified once that goes live.

My version doesn’t include the connector. What can I do? This happened as a result of a build error. Visit this link to download the connector Get Opticon Connector.