I’ve always had a something of a love hate relationship with Flash, so sitting here at Flash Camp ’09 listening to Adobe laying it on thick about the virtues of the latest release I’m compelled to weigh up the arguments for myself, consider the bigger picture, and try to figure out the real story.

I first came to use Flash in the mid 90′s after a couple of years of building experimental projects in Macromedia Director. Flash was very much the poor cousin of Director at the time, which was then able to render 3D objects, handle VRML, plus a massive range of audio & visual formats, making it an incredibly powerful application. Flash, on the other hand, with only a small set of commands, had very limited functionality, in time this would in fact prove to be its most important attribute.

As more functionality was added to Director, the files it produced became heavier, making it progressively less suitable as an internet format – at the time most people were using dial-up connections. So when Flash 4 was released it was very well positioned to hit the spots that Director just wasn’t able to reach, leaving it stuck on the ill fated CD-ROM.

The advertising industry played a big part in driving the development of Flash, making the it jump through hoops technologically and devising intricate optimization techniques – sites hosting advertising were very strict about file size and what a banner should and shouldn’t do at the time. As a result of this activity a group of people emerged able to produce very lean and very creative technical pieces of Flash. It didn’t take long for creative departments to take notice spawning hybrid designer-programmers and leading to a mushrooming of internet advertising agencies.

Enter the search engine

Fast forward a few years and couple of ‘dot.com’ disasters. The World has finally seen the light and everyone agrees that going digital is indeed the future, but all is not well for Flash. The ugly search engine called Google had seen fit to systematically rearranged the Internet’s periodic table and has filled Flash away with the obscure and exotic elements.

As search position became the yard stick for successful design sites encapsulating content into a single impenetrable shell became less important therefore leaving the typical internet advertising agency approach more and more reliant on print and TV campaigns, the very things that the early Flash pioneers promised to destroy.

To compound the woes of Flash, its close cousin Javascript seems intent on supplanting it from its interactive throne. And as Javascript is able to dynamically change the make up of a web page (the DOM), deliver rich interaction, and interface with a database all without the aid of an embedded file, the future is not looking rosy.

Back to Flash Camp, and we’re treated to a fantastic demonstration by Seb Lee-Delisle from the Brighton based gurus Plug-in Media of the cutting edge technology Augmented Reality, where Flash positions and renders a 3D object onto an live video feed, exciting stuff no doubt, but I do have a nagging feeling of déjà vu, Director 8.5 and the scenario that happened in paragraph three. Namely, an incredibly powerful application deeply compromised by the technological climate that surrounds it.

So what could the future hold for Flash?

One thing that was not discussed at Flash Camp was the incredible success, and blanket proliferation of Flash video, or YouTube as it’s more commonly known. Real Player, Shockwave, Quick Time, and VRML are now essentially de funked video formats. But hold on, it’s not quite as simple as that.

Currently YouTube doesn’t allow the direct upload of .flv files. This prevents the inclusion of meta data embedded into the movie time-line and disables both the alpha channel (a green screen) and the interaction layer (the scripting component) of a Flash movie.

As Flash video is completely ubiquitous if a third party (YouTube) was able to track and retain the meta data contained in a movie after they were sliced and diced we could see an explosion of interactive films. And if the third party was also able to separate the interaction layer of a Flash movie from the data stream passive viewing could be replaced by active engagement.

To Flash or not to Flash?

Flash has come a long way in the last ten years from an obscure animation package to a heavyweight multimedia platform. This transition has however moved the application away from the designer and towards the programmer – the latest Colin Moock epic ‘Essential Actionscript 3.0′ details the language in 900 pages compared to the original edition that covered everything in an anorexic 400.

Another major step change to impact Flash is the Open Source movement, which has driven the success of Javascript and many other technologies. If we compare free for Javascript to a £750 bill for a copy of Flash there’s a real danger that it will simply price itself out of the market.

There are a number of bright spots out there, particularly when applying Flash to a specific problem and there are many talented developers to fight the cause too. But given the inability to be read by Google, if I was starting a career as a web developer today or if I was an advertiser looking to get the content that I paid for out to the the largest possible audience, I know which platform I would choose.

After migrating a WordPress site to a new domain (renaming the root folder) I found that my new site kept forwarding to the development domain. As I was unable get into the admin screen of WordPress to change the base URL of the site I had to alter it directly in the database.

The path to the base URL of the site is:

Server: yourServer.com > Database: Database_name > Table: wp_options

In the options table you’ll find a value named ‘URL’, change this to the new domain name and you should be good to go.

Just spent the last hour trying to figure out why a simple php form was breaking WordPress. The answer was a variable name clash. I used a variable called ‘name’ in my form which seems to be linked the WP tag tags (!).

To get things working I renamed ‘name’ to ‘signUpName’.

Whilst scrabbling around for answers I did come across a good article about a security vulnerability when using the PHP_Self command, it’s well worth a read before you build your next form.

Web accessibility is an attempt to make content available in equal measures to every user of the internet, regardless of any physical or mental disability.

Accessibility is not just our moral obligation as reasonable human beings, but also a legal obligation too. Fortunately designing with accessibility in mind from the beginning, means that implementation is nothing more complicated than the addition of a few extra lines of code.

Restricting accessibility

A web application can be thought of as having three very distinct layers:

• The Content Layer (xhtml) – The raw material of every website; text, images and links.
• The Style Layer (css) – The visual design of the content on the screen; positioning, font size, colours etc.
• The Behaviour Layer (JavaScript, VBScript) – This deals with how the user interacts with the page.

Accessibility is always compromised when the Content Layer becomes dependant on either the Style or Behaviour layer. For example if a site were to rely on a JavaScript Event Handler to display a menu the site would be said to have device dependency and therefore poor accessibility.

Even the likes of Google can make this mistake. In their latest redesign they neglected to make a non JavaScript version of the menu on their home page, cutting off functionality (and potential revenue) from thousand of users. (Gilbertson, 2007)

As the web itself becomes the dominate computing platform – as opposed to an operating system like Windows relying on every user sitting behind a desktop PC using Internet Explorer is a strategy that will ultimately prove unsustainable.

A modular design approach to the Content, Style and Behaviour layers will allow more users to interact with the a site in the richest way possible, regardless of the User Agent they use; from iPhone to screen reader to the highest spec PC.

Improving accessibility

Improving accessibility involves optimising the visibility of content for any given User Agent. This can be achieved by following best practices with coding such as the W3C specifications.

Practically this means using the <noscript> tag whenever we have JavaScript functionality. Inside this tag we provide an alternative means of achieving the behaviour.

With images we always provide ‘alt’ (alternative) text.

Redundant tags attached to the JavaScript functionality should also be removed.

As well as being tested for good accesibility with sites such as www.cynthiasays.com the code should undergo real world testing with a range User Agents such as screen readers like JAWS and Window-Eyes .

Ultimately a site should aim to build a device matrix taken from information supplied in the HTTP Accept header. Based on this a number of XHTML templates would be used to deliver the site in a range of formats to optimize the experience for everyone.

Why waste time thinking? Let the Ad-o-matic take the strain.

Coming up with award winning ads day after day is hard work. But thanks to the Ad-o-matic, with a few clicks you can create great ads in an instant. Leaving you free to get on with the important jobs – like deciding what trainers to wear to the next award ceremony.

So the next time the Creative Director comes knocking, you know what to do.

You can see a prototype version of the widget by clicking here.

Template engine

I attempted this built as single piece of php but it quickly became obvious that this was not the right approach. Instead I adapted a simple template engine from my faithful O’Reilly book. This allowed me to separate the logic from the markup

function FillTemplate($inName, $inValues = array()){

	$theTemplateFile = $_SERVER['DOCUMENT_ROOT'].'/templates/'.$inName;
	if($theFile = fopen($theTemplateFile, 'r')){
		$theTemplate = fread($theFile, filesize($theTemplateFile));
		fclose($theFile);
	}
	$theKeys = array_keys($inValues);
	foreach($theKeys as $theKey){
		$theTemplate = str_replace("\{$theKey}",$inValues[$theKey],$theTemplate);
	}

	return $theTemplate;
}

Map Logic

Here’s the source for the Map Logic. As an attempt to make the script secure you can see I’ve used a UK Postcode Regex from Stuart Wade to validate the form input. And also mysql_real_escape_string() on any database calls.

Any security tips would be greatly appreciated

The Map Logic uses four separate templates to handle the interaction, and the error state.

<?php
//Pin counter
connectDB();
$result = mysql_query("SELECT * FROM mapPins");
$num_rows = mysql_num_rows($result);
$bindings['PINCOUNT'] = $num_rows;

//Place Pins
$pinQuery = "SELECT Latitude,Longitude FROM mapPins";
$pinArray = mysql_query($pinQuery)or die('Query failed: '.mysql_error());
$pinCode="";
while ($row = mysql_fetch_array($pinArray, MYSQL_NUM)) {;
	$i++;
	$pinCode .="var latlng$i = new GLatLng($row[0] ,$row[1] );";
	$pinCode .="map.addOverlay(new GMarker(latlng$i));";
}
$bindings['MAPPINS'] = $pinCode;

$bindings['DESTINATION'] = $PHP_SELF;

function centerFromDB($postcode){
	//Connect to the database
	connectDB();
	//Convert the Postcode to all uppercase
	$postcode = strtoupper($postcode);

	//Break the Postcode into array
	$postcode = explode(' ', $postcode);

	//Pull out the relevant fields from our database
	$query = "SELECT Latitude,Longitude FROM postcodes WHERE Pcode= '$postcode[0]'";
	$result = mysql_query($query) or die('Query failed: '.mysql_error());
	return mysql_fetch_array($result, MYSQL_ASSOC);

}

if (isset($_POST['submitPostCode']) & $_POST['code']!="") {
	if(eregi("^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$",mysql_real_escape_string($_POST['code']))){
		$line = centerFromDB(mysql_real_escape_string($_POST['code']));

		//Grab the Postcode from the form
		$postcode = mysql_real_escape_string($_POST['code']);

		//Uppercase
		$postcode = strtoupper($postcode);

		//Break the Postcode into array
		$postcode = explode(' ', $postcode);

		//Output Results
		$bindings['INITIALCENTER'] = "var center = new GLatLng(".$line['Latitude'].", ".$line['Longitude'].");";
		$bindings['OUTCODE'] = $postcode[0];
		$bindings['SECONDHALF'] = $postcode[1];

		$template = "map02.template";
	}else{

		$template = "mapError.template";
	}
}elseif(isset($_POST['plotPoints'])){

	$outCode = mysql_real_escape_string($_GET['outCode']);
	$secondHalf = mysql_real_escape_string($_GET['secondHalf']);
	$mapLat = mysql_real_escape_string($_GET['mapLat']);
	$mapLng = mysql_real_escape_string($_GET['mapLng']);
	$today = date("Y-m-d");

	$line = centerFromDB($outCode.' '.$secondHalf);
	//connect to db
	connectDB();

	//add point to db
	mysql_query("INSERT INTO mapPins (outCode, secondHalf, Latitude, Longitude, theDate) VALUES('$outCode', '$secondHalf', '$mapLat', '$mapLng', '$today') ") or die(mysql_error()); 

	$pinQuery = "SELECT Latitude,Longitude FROM mapPins WHERE outCode='$outCode' AND secondHalf='$secondHalf'";
	$pinArray = mysql_query($pinQuery)or die('Query failed: '.mysql_error());

	$pinCode="";
	while ($row = mysql_fetch_array($pinArray, MYSQL_NUM)) {;
		$i++;
		$pinCode .="var latlng$i = new GLatLng($row[0] ,$row[1] );";
		$pinCode .="map.addOverlay(new GMarker(latlng$i));";
	}
	//new
	$bindings['CURRENTPC'] = $outCode.' '.$secondHalf;
	$bindings['MAPPINS'] = $pinCode;
	$bindings['NEWCENTER'] = "var center = new GLatLng(".$line['Latitude'].", ".$line['Longitude'].");";

	$template = "map03.template";
}else{

	$template = "map01.template";

}

echo FillTemplate($template, $bindings);
?>

Integrating script with WordPress

After developing this script I discovered that WordPress can’t run PHP in the body of a post without a plugin. Strange. So I had to put the prototype on a loose page.

Take a look at the trick I used to capture the output of a WordPress tag so I could incorporate it into Map Logic, and then my templates. In this example I captured the footer code, then bound it to a template tag.

<?php
require('./wp-blog-header.php');
ob_start();
get_footer();
$footer = ob_get_contents();
ob_end_clean();
$bindings['FOOTER'] = $footer;
?>

The Easypeasy Database

Today I’ve been testing the Easypeasy database for my widget project.

I began by installing the data to MySQL. Very easy to do as the downloadable zip comes with a file you can import directly into MyAdmin.

With the database installed I used two scripts to look at the data in more detail. Firstly, one to establish the initial database connecion – it’s an idea to keep this file separate so you only have to write it once. Then, a second script that builds a form and processes the results.

Once I started to plot my results it quickly became apparent that although Latitude and Longitude is returned for each entry, the numbers are all rounded up. This puts W10 and SE13 on the same spot, so there’s still a bit of work to do to figure out how to the x and y fields effect the results.

Here’s the code I wrote for the form:

<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
Input Post Code:</br>&ltinput type="text" name="code" size="30">
<input type="submit" name="submit" value="submit">
</form>

<?php

//Connect to the database
include 'connect.php';

//If the form has been submitted then process the form
if (isset($_POST['code'])) {

//Grab the Postcode from the form
$postcode = $_POST['code'];

//Convert the Postcode to all uppercase
$postcode = strtoupper($postcode);

//Break the Postcode into two
list($outcode, $partTwo) = split(' ', $postcode);

//Pull out the relevant fields from our database
$query = "SELECT latitude,longitude FROM hwz_postcodes WHERE
outcode = '$outcode'";
$result = mysql_query($query) or die('Query failed: '.mysql_error());
$line = mysql_fetch_array($result, MYSQL_ASSOC);

//Print Results
print $postcode.' : ';
print $line['latitude'].','.$line['longitude'];

//We've finished with the database, so close the connection
mysql_close($conn);
}

?>

Click here to see a working version

Here’s an experimental Google map made using some excellent software from UCL Centre for Advanced Spacial Analaysis (Casa). The application slices up a large digital image – the one used here is 8000 x 8000px 30mb into a 256 x 256 pixel tiles (you might have noticed the how the map image builds up from these unit blocks).

The tiles correspond to the magnification of the map. At the lowest level the entire image is contained within a single 256 pixel square repeated left and right – this is the maps initial state. As you zoom in the tile samples are closer to the original image resolution.

The plan for the map is to lay a data layer on top of the map corresponding to each individual badge. This will hook up to the eBay API so when it comes time to sell the badges we can see a live data feed.

References:

Casa
http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp

Background

After playing around with Google maps for a few days it became apparent that having a list of UK postcodes plus the corresponding latitude and longitude to each would come in very handy for a lot of people. If you had such a thing you could build loads of exciting applications, from route planning to food mile calculators.

The problem is that here in the UK the list doesn’t exist in the public domain. It’s available from the Post Office, but it’ll cost you, making it effectively useless for most small groups and enterprises.

What’s currently available from Easypeasy is the first half of the code. With this you can break the UK into about 3,000 separate parts, narrowing a location to within a few kilometres.

Project Brief

There appear to be two groups pushing the Postcode into the public domain, Free the Postcode and New Popular Edition Maps.

What I’d like to do is build a widget that people can put on their website that makes it easy for the general public to enter their Postcode, and help build the free database. Currently you are required to specifically visit either of the two website and with Free the Postcode know by heart your latitude and longitude.

Using the Google Map API combined with the first half of the postcode the widget would pull up a map of your local area, from here it’s easy to stick a pin where you live or work, and then after (an email?) authentication your postcode is added to the database.

References

Free the Postcode: www.freethepostcode.org

New Popular Edition Maps: www.npemap.org.uk

Postcode Schema: www.govtalk.gov.uk/gdsc/html/frames/PostCode.htm

Easypeasy: www.easypeasy.com/guides/article.php?article=64

I know I’m a little late to the party on this one but I finally cracked Flash Classes last weekend – yay!

To be honest there wasn’t really a whole lot to crack, just the definitions of private and public functions.

Essentially a public function will execute when the class is initialised, and a private function will wait to be called, and that’s all there is to it .

Try this out:

In a text editor create a file and name it TestClass.as

Type the following:

class TestClass{

	public function foo(){
		trace(“Hello from Foo”);
	}

	private function baa(){
		trace(“Hello from Baa”);
	}

}

Now create a new Flash document and save it in the same folder as TestClass.as

On frame one (or any other) type:

var myTestClass = new TestClass();

now publish your movie and you should get the output “Hello from Foo”

If you now add the following line:

myTestClass.baa();

publish your movie and you should get the output “Hello from Foo”, “Hello from Baa”

Yes, it really is that easy!