The Flex front end interfaces to the traditional HTML version via an API that Kato and I developed.  To see how the two tools interact, you can see the HTML version here. As I have been getting a lot of spam and attacks lately, I won’t be giving out the login details openly but you can leave a comment or contact me via the contact page and I’ll send you the details. If you would prefer to stay anonymous, live chat is also an option.

You can get hold of the latest version of the source code at SourceForge in the Zentrack SVN Repository.

To test the functionality I searched for “Clarisolve” in Google, which has a lot of freely visible text and did not display correctly before FP10. I then entered the search string “Clarisolve ClearCollect” and the results displayed from a specific page on the site. Clarisolve has an html shadow site so I checked to see if it was being picked up instead of the flash version. The results actually displayed both the html and SWF version.

At this time unfortunately I have not implemented deep linking on the Clarisolve site, so no matter what you choose in Google it will always go to the home page. Still this is better than a blank SWF that barely caches right?

The next step will be to determine how SEO works with Flash/Flex text has we don’t have the luxury of traditional html text to add “h” tags.

There are a lot of tutorials for Cairngorm already on the web, so I don’t feel the need to reiterate someone elses good work. Instead, when I release the code for Zentrack (Liger) I’ll point out any of the tricky problems I solved that may be of use to others.

Flex Builder for Linux also has great significance for the Zentrack project too, due to the fact that developers will be able to edit and recompile the new Flex front end on all of the major platforms (Linux, Mac & Windows).

After installation I created two test projects, one browser based project and the other an AIR application. The first thing you notice is the lack of the designer view, which isn’t terrible news to a seasoned Flex developer but isn’t great for newbies. I found that when I was originally learning Flex, the designer was very useful for giving me a nice list of the components available and a visual way of organising them.

I was thrilled to see that the code completion functionality works properly as well as the syntax highlighting. The friendly “Flex Start Page” was also available and all of the main functionality that you would expect, including the debugger. It seems that the decision to develop the tools in Java is paying off, but perhaps the full platform independence that one comes to expect from Java isn’t quite there yet.

Not all of the features are included, below are the main ones that are missing:

• Design view
• States view
• Refactoring
• Data Wizards
• Cold Fusion – Data Services Wizard
• Web Services introspection
• Profiler

Most of these tools are time savers (with the exception of the Profiler) and not essential for the creation of projects, but I know I would really miss the “States view” functionality.

In time I shall try importing each of my projects into the Linux version of Flex Builder and determine once and for all if I can give my poor wheezing laptop a well earned break.

To summarise, my first impressions of Flex Builder for Linux are very positive. The Flex plugin plays nicely with the other plugins and considering this is an alpha version, it is looking very slick already.

My Configuration:

• Linux – Ubuntu 8.04 (the Hardy Heron)
• Eclipse 3.3.2 (installed from the PDT package)

For more information, see the official Adobe page.

Part 1 – Creating a Shadow Site

Creating a beautiful web 2.0 website in Flash/Flex is very satisfying. I really enjoy the development time savings of Flex versus that of general HTML/javascript solutions and the crispness of the interfaces created. The pleasure of Flex development is something I can talk about for hours and I have even been known to evangelise in my local bar on a Friday night.

It’s not all roses though, as Flex solutions do come with one major flaw; They are not search engine friendly (for a number of reasons). Part 1 of this article explores a solution using a “Shadow Site“, which is a term I surfed across recently and feel it accurately describes the subject.

The Problem

You are probably already aware of the issues associated with SEO (Search Engine Optimisation) and Flex, but just in case this is a new concept for you I will briefly explain the issues that are Flex related:

Pure Flash/Flex sites are not crawled for search text

As your SWF is basically a compiled program that is executed through the Flash Player, for a search engine to be able to read any embedded content it would have to effectively decompile your SWF. This is a problem for a number of reasons:

• Google doesn’t do it (presently)
• developers may choose a Flash solution as a means of obfuscation (compared to alternative web 2.0 strategies) so don’t want their precious code available to the world
• the Flash Player/SWF standard is owned by Adobe and it is debatable whether it should be decompilable (see point above)
• decompilation would cause a large processing overhead for a search engine crawler

Pure Flex solutions are all inclusive within a single SWF structure

When you compile your Flex programs they ultimately produce a single SWF file (not including all of the associated html, javascript, shared resource files, etc.). This single file contains the whole program (and therefore navigation structure) so there is no need to leave the SWF just because you are moving to a different page, effectively making the whole URL structure irrelevant. Although this has a lot of advantages, it makes linking to a particular point in your application something you really have to think about. That particular problem is solved in Flex 3 with the improved “Deep Linking” functionality, but how does a search engine know about your deep links?

A Solution

What I have currently implemented as a solution on the Clarisolve project is a “shadow site”. Historically the term “HTML version” or “Text only” has been used, but in this case the symantics are slightly different because I don’t really want people to see underlying site, I only want the search engine to. In my implementation, the shadow site is basically a WordPress blog used as a content manager with all the relevant HTML articles stored in the associated MySQL database. WordPress 2.5.1 offers a number of interfaces with which to extract the pages and articles, so I can very easily use the same source text in my Flex application too. WordPress also has a great publishing element and user manager, so makes for a very rich content management system. You can of course use any CMS of your choice, but I chose WordPress.

The most important part to creating the shadow site is the javascript that queries the current version of Flash Player installed, then either displays the trailing HTML (derived from PHP) or redirects to the Flex version of the site. On redirect, the javascript also interprets the current URL parameters and rearranges them into a friendly format for “deep linking”.

The main reason for using WordPress is the great slug support, which is useful on Google as each page is separately displayed. Make sure that the “PermaLink” settings are not using the default format as historically search engines could not cope with GET notation very well.

Currently, this solution does need some polish as the way I have implemented it is fairly static, resulting in the RSS feed being broken. Solving the problem should be fairly simple by making the javascript text conditionally addable by a PHP function (based on the URL).

To see the shadow site you need to disable Flash in your browser. The easiest way I found to do this is to use Internet Explorer and go to the “Tools->Manage Add-ons->Enable or Disable Add-ons..” and disable the “Shockwave Flash Object”. At the time of writing, the HTML site is actually looking prettier than the Flex site but that will change in time

Hopefully that is all the information you’ll need to create your own shadow site.

The PHP/javascript for selecting whether to use the Flash or HTML looks like this:

<script src="/AC_OETags.js" language="Javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasRequestedVersion ) {
	// MMdoctitle is the stored document.title value used by the installation process to close the window that started the process
	// This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed
	// DO NOT MODIFY THE FOLLOWING FOUR LINES
	// Location visited after installation is complete if installation is required
	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
	var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

	AC_FL_RunContent(
		"src", "playerProductInstall",
		"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
		"width", "100%",
		"height", "100%",
		"align", "middle",
		"id", "ClarisolveWebSite_v2",
		"quality", "high",
		"bgcolor", "#869ca7",
		"name", "ClarisolveWebSite_v2",
		"allowScriptAccess","sameDomain",
		"type", "application/x-shockwave-flash",
		"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);
} else if (hasRequestedVersion) {
    var strReturn = "";
    var strHref = window.location.href;
    if ( strHref.indexOf("/") > -1 ){
        var aQueryString = strHref.split("/");
        for ( var iParam = aQueryString.length-1; iParam > aQueryString.length-3; iParam-- ){
		    if ( isNaN(aQueryString[iParam]) ) {
	            strReturn += "page=" + aQueryString[iParam];
				iParam = 2;
			} else {
	            strReturn += "archives=" + aQueryString[iParam] + "&";
			}
	    }
    }

    window.location = "/ClarisolveWebSite_v2.html#" + strReturn;
}
// -->
</script>
<noscript>
  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="ClarisolveWebSite_v2" width="100%" height="100%"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="ClarisolveWebSite_v2.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#869ca7" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed src="ClarisolveWebSite_v2.swf" quality="high" bgcolor="#869ca7"
				width="100%" height="100%" name="ClarisolveWebSite_v2" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="sameDomain"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
</noscript>

<?php
define('WP_USE_THEMES', true);
require('./wordpress/wp-blog-header.php');
?>

Conclusion

SEO is quite a large subject, so I haven’t gone into the details of how to understand the inner workings of Google or the use of “<strong>” and “<h1>” tags. Instead I have concentrated on how to get your HTML recognised in a search engine and how to alter your URL to something more “Deep Link” friendly.

The next part of this article will be related to importing WordPress articles and deep linking.

I tried two approaches to creating the map, one which involved the TileContainer and another which created a single image.

The TileContainer Approach

The advantage of using a TileContainer is that it deals with all of the mechanics of placing the tiles in the correct alignment (providing you specified the appropriate properties). Each Tile in the container maintains its original properties and can be identified in a MouseEvent. This would have a lot of advantages in a game that uses tiles (such as Carcassonne or even Dominoes) but does not serve the purposes of a game board too well. If no aspect resizing (i.e. zooming in/out) is required then the TileCointer would be satisfactory, but of course my game board does require this functionality.

The Image Approach

After wrestling with the TileContainer for a day, I decided to scrap this approach to the game board implementation in favour of a single image with multiple “hit areas” (i.e. one hit area per city). The advantages this gave me were:

• the localX and localY coordinates were preserved, even after resizing
• problems with the MOUSE_OUT event were resolved when dragging the image around
• more control over where each image tile was placed, i.e. no fighting with the TileContainer styles

I created a class for the game board image called MapTile which extends the Image class.

The next challenge I faced after deciding to drop the TileContainer approach was how to deal with each image as it loaded. Initially I attempted a simple for each loop which added each image to the map, but this didn’t work due to the unpredictable time it takes to load each tile. I could have embedded the images, but I am trying to keep the size of the .swf down so opted to use a COMPLETE event which signalled the need to load the next tile. It works nicely, and in the current version allows you to watch each tile load into the map.

Conclusion

This was ultimately a pretty simple problem. I needed to create an image that could be used by the main map component to zoom in and out of, as well as drag operations. This class takes in the array of tiles to be used, then creates one image at run time.

MapTile Code

All of the images used for the map board can be found here.

The full code for the MapTile class is listed below:

package com.gamecomponents
{
	import mx.controls.Image;
	import flash.events.Event;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.net.URLRequest;
	import flash.geom.Rectangle;
	import flash.geom.Point;
	import flash.display.Sprite;

	public class MapTile extends Image
	{
		private var mapBitmap:Bitmap;
		private var mapBitmapData:BitmapData;
		private var loader:Loader;

		private var row:int;
		private var column:int;
		private var creationCounter:int;
		private var tileChooser:Array;
		private var sideLength:int;

		// Location of tile images and file extension
		private const sourcePath:String  = "assets/board/";
		private const filenameExt:String = ".png";

		// All map tiles must be 500 pixels square
		private const tileWidth:int = 500;

		public function MapTile(inMapConfig:Array = null):void {
			if (inMapConfig == null) {
				tileChooser = [
					"A7", "B7", "C6",
					"D6", "E5", "F5",
					"G4", "H4", "I3",
				];
			} else {
				tileChooser = inMapConfig;
			}

			// Calculate how many tiles per side
			sideLength = Math.sqrt(tileChooser.length);

			row    = 0;
			column = 0;

			// Tiles are all currently 500 pixels square
			var mapSize:int = tileWidth * sideLength;
			mapBitmapData   = new BitmapData(mapSize, mapSize);
			mapBitmap       = new Bitmap();

			// Create map image
			creationCounter = 0;
			getNextTile();
		}

		private function getNextTile():Boolean {
			if (tileChooser.length <= 0) {
				return false;
			}

			// Get the next tile in the array
			var tileName:String = tileChooser.shift();

			// Load new tile
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, picLoaded);
			loader.load(new URLRequest(sourcePath + tileName + filenameExt));

			return true;
		}

		private function picLoaded(event:Event):void
		{
			// Define a BitmapData object with dimensions identical to the sprite
			var loadedBitmapData:BitmapData;
			loadedBitmapData = new BitmapData(loader.width, loader.height);
			// Draw the image into the BitmapData object.
			loadedBitmapData.draw(loader);

			mapBitmapData.copyPixels(loadedBitmapData,
									 new Rectangle(0, 0, tileWidth, tileWidth),
									 new Point(column * tileWidth, row * tileWidth)
			);

			mapBitmap   = new Bitmap(mapBitmapData);
			this.source = mapBitmap;

			if ((creationCounter+1)%sideLength == 0) {
				column = 0;
				row++;
			} else {
				column++;
			}

			creationCounter++;

			if (!getNextTile()) {
				// All tiles have been loaded
				loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, picLoaded);
			}
		}
	}
}

Purpose

This project has primarily been initiated to demonstrate the following key Flex skills:

• General Flex aptitude
• Flex Data Services
• Messaging
• PureMVC Framework
• OO competence
• Skinning
• Rich Media
• Video (if technically viable and appropriate)

The motivation and choice for this project comes from extensive play of the original Power Grid board game by Friedemann Friese. My aim is to improve upon the original German implementation of the online version which I found unplayable.

Components

The solution is broken into three main parts.

Intro Screen

The intro is purely for demonstrating animation and creativity. As the majority of Flex/Flash adopters are media companies, it is essential for me that this skill is demonstrated effectively.

Animation Description

At the start of the animation there is a long shot of a power station with a blue sky and the sound of birds singing. The scene then zooms in and the sound changes to that of fuel burning and smoke starts to emerge from the chimneys. The camera follows the smoke upwards as the sky turns darker, then pans downwards back to the power station. During the pan, the whole scene turns to black and white with a dark blue tint. The Power Grid logo then stamps onto the screen in full colour and pauses.

Game Lobby

There needs to be an area for people to meet up and set up individual games. This site isn’t being designed to be the next MSN gamin zone, so only a simple screen is required at present.

Login Dialog

If an unauthenticated visitor enters the site, they need to provide a name for themself so they can be recognised. A dialog box appears requesting that the person enter a unique username.

User List

Along the right hand side is a box with a list of users.

Game Set Up

A window showing games open/in progress.

Main Chat Window

IRC style chat. Individual chat windows do not seem necessary at this point as users could use other messaging tools such as Jabber instead.

Game Board

The main gaming area, once a game has been initiated from the lobby.

Markets

A thin vertical border on the left hand side with coloured numbered squares. Each square represents a power station card in the “actual market”. When the user hovers the mouse over the border, the full market is displayed.

Map

The map displays the game board itself and contains cities that can be interacted with. By using the mouse or a set of buttons, the user can pan the map and zoom in/out using the scroll wheel. Clicking on a city may result in a marker being placed on it at certain points in the game.

Player Status

Along the right hand side of the screen a minimised status of all players is displayed. They are listed in player order (as a result of stage 1). Hovering or clicking on a players stats results in a larger window appearing with more detail.

Raw Materials

At the bottom of the screen a horizontal border will be displayed with a summary indicator of each raw material. Hovering on the border results in the full display of currently available materials.

Chat Area

An IRC style area displaying any chat messages from players/observers.

Game Mechanics

The rules of the game are clearly defined in the Power Grid rule book (available with the physical board game).

First of all, what skills/experience do I need to demonstrate?

1. General Flex aptitude (MXML, CSS, ActionSctipt3)
2. Dealing with data (Web services, Flex Data Services/Flash Remoting, etc.)
3. Frameworks (Cairngorm, PureMVC, etc.)
4. OO competence
5. Charting
6. Large scale applications
7. Skinning
8. Rich Media
9. Video
10. Deep Linking

Now how am I going to do it? Well, below are a number of projects I have initiated and I have associated the numbered points above to each one. This is all my own work and (at time of writing) needs a lot of polish:

• ClearView – Graphing example for a Telecoms Revenue Assurance project. (1, 2, 5)
• Clarisolve – Simple website using some nice Flex effects and custom components. Have a look at the “Ask the Experts” page for a neat FAQ component. (1, 2, 10) (in progress)
• HavenShade – Complex website designed by a web designer using custom skins and some custom blogging components. (1, 2, 7) (in progress)
• Power Grid – Online multiplayer game (1, 2, 3, 4, 6, 7, 8 and maybe 9) (in progress)

The final and most important project to mention is Zentrack (an open source PM and trouble ticket tool), which I have devoted a considerable amount of time to. Currently, I am working with the original author of the tool to create a Flex front end for version 3. You can find me in the Zentrack forums as “donkeyb”.

I realise that games aren’t necessarily the best development work you can do to land a job in a telco or bank, but there is nothing better for demonstrating design eloquence and coding skill in one project. Hopefully the decision to implement “Power Grid” will work out!