Whether you’re upgrading because you’re using BETA versions that change rather frequently or upgrading to the next major release, you don’t want to lose all your hard work invested in configuring your setup. Here’s how I handle it and hopefully it’s useful to you. If you have other cool ways to persist workflows between upgrades, please share them.

Workspaces

I’ve created a workspaces folder in a custom directory on my HD where I store all the workspaces I like to use with Eclipse-based IDEs. I separate them by IDE and then by purpose. So for Flash Builder, my workspace hierarchy is like this:

/workspaces
  /_fb4
    /air
    /as
    /flash
    /flex

This is where all of my IDE preferences and workbench layout settings are stored. Centralizing them here allows me greater flexibility when upgrading since I never have to worry about any changes to installation procedures overwriting my custom settings. Nevertheless, I backup my workspaces prior to upgrading and since their small text files it only takes a second to archive.

Documents Directory

On OSX, the Flash Builder installer creates an Adobe Flash Builder 4 directory in your Documents directory. The installation instructions advise you to uninstall any previous versions of Flash Builder before installing the new version. Following this advice will delete this folder if it already exists. So, be sure to back this up prior to uninstalling your current version. That way you can cherry pick anything you need after installing the new version.

Applications Directory

You should also backup up your program installation in your Applications directory for the same reasons as with the folder in your Documents directory. If you’ve heavily modified your install with additional plugins, etc., this is vital!

Plugin Restoration

Where are all my cool plugins? They got wiped during the upgrade process but if you followed my advice and backed everything up, you’ll be back up and running in a minute or two. There are generally (2) locations where plugin info is stored for Flash Builder. If you pull the data from your backups and place them in the following locations, you should have full access to all your plugins post-upgrade (provided they still work with the latest release)

#1 – /Documents/Adobe Flash Builder 4/.metadata/.plugins
#2 – /Applications/Adobe Flash Builder 4/plugins

Although this post is slanted more towards upgrading on OSX, it should be similar for other operating systems. Any issues, let me know…

First, this will be a rather lengthy pictorial of the last few days here in Amsterdam. For those that have never been, I’ll also share my insights and tips on visiting the city since I’m a seasoned pro now, LOL (4th time).

The City

Amsterdam is a really cool city. It hasn’t changed that much since my last visit about a decade ago. It has a good mixture of rustic Old European charm and 20th century modernism. It’s almost as vibrant as New York City but tends to slow down during the week around 2am

The locals are generally friendly and often find amusement in the confused faces of the American tourists. This is also definitely a bike-friendly city with a lot of the population opting for beach cruisers and mopeds over cars.

The city is filled with quaint little coffee shops, bars and restaurants where one can enjoy an evening of good conversation and more with friends.

Having traveled abroad during an era when technology wasn’t as prevalent, it’s always amazing to see how it has become so deeply integrated into the fabric of life. On that note, if you have an iPhone, (2) useful apps to have are ATM Hunter and Amsterdam GPS Guide. Both are free and can save you a considerable amount of time. ATM Hunter helps you to locate the nearest Geldautomaat so you can gain access to some local currency. Amsterdam GPS Guide provides offline maps for you to use to scour the city. These free apps will have you motoring about like a local in no time.

Here’s a list of some places, in no particular order, worth checking out when in Amsterdam:
- Kadinsky’s (several locations)
- Abraxas
- Supper Club
- Chipsy King
- Renee’s Croissants
- The Greenhouse
- Coffee Shop Reefer

Amsterdam also has its dark side so enjoy but be wary of your surroundings always. While you’re busy watching the sites, someone is always watching you. Should you feel drawn to de Wallen (RLD), try visiting first during the day then return after 10p when it comes to life. DO NOT take pictures of the girls in the windows and if a local approaches you talking about a “party”, politely tell him no thanks and keep moving (either dealer or thief).

Now, these are just a few of the things I’ve come to learn about the city over the past 2 decades of visits. Hopefully they’ll be helpful to 1st timers or those who have visited previously but a lot of time has passed since their last visit. If you think I’ve got it twisted, let me know.

The Conference

FITC was filled with many amazing presentations and workshops. Everything from audio to video to 3d to converting images into sound and even workflows for building iPhone apps with the forthcoming Flash CS5. While the general consensus was that the entire conference was outstanding, the talks by Mario Klingermann, Jared Tarbell and Ralph Hauwert seemed to rank high as the crowd favorites. Additional talks that peeked my interest were Joa Ebart’s overview of his open source project and Sam Agesilas’ preview of the forthcoming Orchid open source framework.

The Fellowship

This alone is worth the price of admission + trip. Being able to hang out with industry geniuses after all the tension of putting on a successful conference has passed is priceless. The post-conference wind down is often just a continuation of the past days’ events but in a much more relaxed and social environment.

Here we’re at the Hotel Ambasade participating in a linkup w/Flash Brighton hosted by Seb Lee-Delisle (a/k/a “Awesome”). Pictured from left to right are Jim Corbett, Grant Skinner and Sam Agesilas discussing the mobile platform.

Later on, Ralph Hauwert chimes in on a response to a question from the Flash Brighton group.

Stacy Mulcahy and Masakazu (Mash) Ohtsuka patiently awaiting their turns to share in the discussion.

Influxis co-founder, Richard Blakely, and Seb discussing Rich Media.

Adobe’s Lee Brimelow and Mike Chambers arrive on the scene to share in the festivities.

The evening was definitely off to a good start. Later that night, in a dark, subterranean and smoke filled room, the leaders of the Flash community gathered to pontificate further on the future of the Flash platform. Sorry, can’t show those pictures as I’m under an NSTPA…;)

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!!

So, after thinking about my most recent updates, I decided I wanted to change the way that the commit view looks but just slightly. This is my 1st pass on some things I’d like to have available via the toolbar.

Would also like to tweak the view selector buttons, revise remote selection and add toolbar buttons for all the contextual menu items, which aren’t many.

Previously, I implemented toolbar buttons where each button was tied to a specific remote repository. This was/is fine if you’ll only be working with one or two hosts but becomes cumbersome when dealing with multiple hosts.

Enter the NSPopUpButton. By switching to this UI element I’m able to allow a user to select a remote from a configurable list of remote repositories. I like this UX slightly better than having a button for each remote and the functionality behind the scenes still reaches the same result.

Now with that out of the way, I can move on to some other items on my TODO list…:)

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.

/**
 * Draws a double-headed arrow. Pass in ArrowStyle
 * objects for both arrows to override the default settings.
 * @param graphics
 * @param start
 * @param end
 * @param startStyle
 * @param endStyle
 */
public static function drawArrows( graphics:Graphics,
        start:Point,end:Point,
        startStyle:Object=null,
        endStyle:Object=null ):void
{
	// variables used for arrow 1
	var startArrowStyle:ArrowStyle;
	var startHalfWidth:Number;
	var vect1:Point;
	var startNorm:Point;
	var start1:Point;
	var start2:Point;
	var end1:Point;
	var end2:Point;
	var startHeadPnt:Point;
	var startHeadPntNorm:Point;
	var startEdge1:Point;
	var startEdge2:Point;
	var startShaftCenter:Point;
	var startInter1:Point;
	var startInter2:Point;
	var startEdgeCenter:Point;
	var startEdgeNorm:Point;
	var startEdgeCntrl1:Point;
	var startEdgeCntrl2:Point;
 
	// variables used for arrow 2
	var endArrowStyle:ArrowStyle;
	var endHalfWidth:Number;
	var vect2:Point;
	var endNorm:Point;
	var end3:Point;
	var end4:Point;
	var start3:Point;
	var start4:Point;
	var endHeadPnt:Point;
	var endHeadPntNorm:Point;
	var endEdge1:Point;
	var endEdge2:Point;
	var endShaftCenter:Point;
	var endInter1:Point;
	var endInter2:Point;
	var endEdgeCenter:Point;
	var endEdgeNorm:Point;
	var endEdgeCntrl1:Point;
	var endEdgeCntrl2:Point;
 
	if (start.equals(end)) return;
 
	///////////////////////////////// start arrow config \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
	if (startStyle == null)
	{
		startArrowStyle = new ArrowStyle();
	}
	else if (startStyle is ArrowStyle)
	{
		startArrowStyle = startStyle as ArrowStyle;
	}
	else
	{
		startArrowStyle = new ArrowStyle( startStyle );
	}
 
	vect1 = end.subtract( start );
	startHalfWidth = (startArrowStyle.headWidth != -1) ? startArrowStyle.headWidth / 2 : startArrowStyle.headLength / 2;
 
	//Figure out the line start/end points
	startNorm = new Point( vect1.y, -vect1.x );
	startNorm.normalize( startArrowStyle.shaftThickness/ 2 );
	start1 = start.add( startNorm );
	start2 = start.subtract( startNorm );
	end1 = end.add( startNorm );
	end2 = end.subtract( startNorm );
 
	//figure out where the arrow head starts
	startHeadPnt = vect1.clone();
	startHeadPnt.normalize( startHeadPnt.length - startArrowStyle.headLength );
	startHeadPnt = startHeadPnt.add( start );
 
	//calculate the arrowhead corners
	startHeadPntNorm = startNorm.clone();
	startHeadPntNorm.normalize( startHalfWidth );
	startEdge1 = startHeadPnt.add( startHeadPntNorm );
	startEdge2 = startHeadPnt.subtract( startHeadPntNorm );
 
	//Figure out where the arrow connects the the shaft, then calc the intersections
	startShaftCenter = Point.interpolate( end, startHeadPnt, startArrowStyle.shaftPosition );
	startInter1 = GeomUtil.getLineIntersection( start1, end1, startShaftCenter, startEdge1 );
	startInter2 = GeomUtil.getLineIntersection( start2, end2, startShaftCenter, startEdge2 );
 
	//Figure out the control points
	startEdgeCenter = Point.interpolate( end, startHeadPnt, startArrowStyle.edgeControlPosition );
	startEdgeNorm = startNorm.clone();
	startEdgeNorm.normalize( startHalfWidth * startArrowStyle.edgeControlSize );
	startEdgeCntrl1 = startEdgeCenter.add( startEdgeNorm );
	startEdgeCntrl2 = startEdgeCenter.subtract( startEdgeNorm );
 
	///////////////////////////////// end arrow config \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
	if (endStyle == null)
	{
		endArrowStyle = new ArrowStyle();
	}
	else if (endStyle is ArrowStyle)
	{
		endArrowStyle = endStyle as ArrowStyle;
	}
	else
	{
		endArrowStyle = new ArrowStyle( endStyle );
	}
 
	vect2 = start.subtract( end );
	endHalfWidth = (endArrowStyle.headWidth != -1) ? endArrowStyle.headWidth / 2 : endArrowStyle.headLength / 2;
 
	//Figure out the line start/end points
	endNorm = new Point( vect2.y, -vect2.x );
	endNorm.normalize( endArrowStyle.shaftThickness / 2 );
	start3 = start.add( endNorm );
	start4 = start.subtract( endNorm );
	end3 = end.add( endNorm );
	end4 = end.subtract( endNorm );
 
	//figure out where the arrow head starts
	endHeadPnt = vect2.clone();
	endHeadPnt.normalize( endHeadPnt.length - endArrowStyle.headLength );
	endHeadPnt = endHeadPnt.add( end );
 
	//calculate the arrowhead corners
	endHeadPntNorm = endNorm.clone();
	endHeadPntNorm.normalize( endHalfWidth );
	endEdge1 = endHeadPnt.add( endHeadPntNorm );
	endEdge2 = endHeadPnt.subtract( endHeadPntNorm );
 
	//Figure out where the arrow connects the the shaft, then calc the intersections
	endShaftCenter = Point.interpolate( start, endHeadPnt, endArrowStyle.shaftPosition );
	endInter1 = GeomUtil.getLineIntersection( end3, start3, endShaftCenter, endEdge1 );
	endInter2 = GeomUtil.getLineIntersection( end4, start4, endShaftCenter, endEdge2 );
 
	//Figure out the control points
	endEdgeCenter = Point.interpolate( start, endHeadPnt, endArrowStyle.edgeControlPosition );
	endEdgeNorm = endNorm.clone();
	endEdgeNorm.normalize( endHalfWidth * endArrowStyle.edgeControlSize );
	endEdgeCntrl1 = endEdgeCenter.add( endEdgeNorm );
	endEdgeCntrl2 = endEdgeCenter.subtract( endEdgeNorm );
 
 
	///////////////////////////////// draw the graphics \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
	// draw 1st arrow
	graphics.moveTo( start1.x, start2.y );
	graphics.lineTo( startInter1.x, startInter1.y );
	graphics.lineTo( startEdge1.x, startEdge1.y );
	graphics.curveTo( startEdgeCntrl1.x, startEdgeCntrl1.y, end.x, end.y );
	graphics.curveTo( startEdgeCntrl2.x, startEdgeCntrl2.y, startEdge2.x, startEdge2.y );
	graphics.lineTo( startInter2.x, startInter2.y );
	graphics.lineTo( start2.x, start2.y );
	graphics.lineTo( start1.x, start1.y );
 
	// draw 2nd arrow
	graphics.moveTo( end3.x, end4.y );
	graphics.lineTo( endInter1.x, endInter1.y );
	graphics.lineTo( endEdge1.x, endEdge1.y );
	graphics.curveTo( endEdgeCntrl1.x, endEdgeCntrl1.y, start.x, start.y );
	graphics.curveTo( endEdgeCntrl2.x, endEdgeCntrl2.y, endEdge2.x, endEdge2.y );
	graphics.lineTo( endInter2.x, endInter2.y );
	graphics.lineTo( end4.x, end4.y );
	graphics.lineTo( end3.x, end3.y );
}

Those are the basics. It can be tweaked to taste, etc. Kudos to Noel for the such a useful class…

I was pushing some commits earlier this morning and realized that I never made the changes to GitX public. It was always my goal to share the updates with the community but I always kept getting sidetracked. Well, today I forked the master project and even added GitHub integration.

You’ll need the latest version of Xcode to compile from source. If you just want access to the customized application, you can download a ZIP of the forked project and you’ll find the application in /path/to/download/build/Debug/GitX.app. Hope others find this as useful as I have…

1. Duplicate my Flex 3 SDK path
2. Rename the duplicate to flex_sdk_3.x_air_sdk_2.x
3. Download the latest AIR 2.0 SDK (currently AIR20_mac_sdk_120209.tbz2)
4. Place the AIR SDK zip in the root of the new Flex SDK directory

/flex_sdk_3.x_air_sdk_2.x/AIR20_mac_sdk_120209.tbz2

5. Open up Terminal in the new Flex SDK directory and execute the following command:

tar -xjf AIR20_mac_sdk_120209.tbz2

6. Open Flex Builder and add the new SDK -> Flex Builder > Preferences > Installed Flex SDKs > Add

Now, when I want to create an AIR app that targets the 2.0 SDK all I have to do is

1. Update the project compiler settings to use the new SDK -> Project > Properties > Flex Compiler > Use a Specific SDK
2. Update the application descriptor file to use the AIR 2.0 namespace

<application xmlns="http://ns.adobe.com/air/application/2.0beta">

All of the above steps can be repeated for the Flex 4 SDK as well.

For those interested, these are the items that were updated and added to the SDK for 2.0:
/bin/adl
/bin/adt
/frameworks/libs/air
/frameworks/projects/air
/lib/nai
/lib/adt.jar
/runtimes/air
/samples
/templates/air
/AIR SDK Readme.txt
/SDK license.pdf

CAVEATS:

1. There’s a new certificate process started in AIR 1.5.3 that may disrupt your workflow if you’re creating signed applications.
2. If you want to utilize the new native process features, you’ll have to implement multi-platform builds (native installers for Win, Mac and Linux) and these must occur on the target platform (ie, can only create DMGs on Mac, etc)