Multimedia applications often have interactive elements based on video: For example, a pre-rendered 3D scene that moves according to a user’s interaction. The trick, in such a scene, is to play specific parts of the movie forward and backward to fake movement.

This sculpture has been rendered as a movie, with the camera panning 360˚around the object.
(Drag with the mouse to turn the object)

Embedding Animations

There are three basic ways to embed an animated scene into Flash:

• In the Flash Video format (FLV);
• As a sequence of images, e.g. PNG or JPEG;
• As a sequence of vector graphics.

The latter is often forgotten. Tools such as Cinema 4D’s FlashEx renderer can export a scene as a vector animation. If the scene doesn’t contain many objects and has simple texturing, a vector animation would probably be the way to go. The file size stays relatively small, plus the graphics are scalable.

A simple 3D object rendered as a vector sequence with FlashEx 2.
(Drag with the mouse to turn the object)

The other two methods, FLV and image sequences, are both pixel based, but have their own pros and cons. FLV has a decent quality/size ratio. Flash CS4 does not allow F4V files to be embedded directly, so the best codec is the older and less compressing On2 VP6. Interacting with FLV, e.g. jumping between frames quickly or playing it backward, is heavy on the processor. Presumably, the Flash Player has to jump to the nearest proceeding keyframe and process the changes to the current frame each time. On the other end of the spectrum is the image sequence. The compression is on a per-frame basis, so the overall file size will usually turn out much bigger. The display performance, however, is far better than FLV.

Eliminating the Cons

A combination of the reduced file size of FLV and the performance of an image sequence is possible, if the data gets decompressed on the client side. H.264 encoded video data could be sent through the wire and then be processed into an uncompressed image sequence before being displayed. I wrote a class named BitmapAnimation that parses each frame of a MovieClip (including any FLVs within) and adds it to an array of bitmap data. BitmapAnimation has the same methods as a MovieClip (gotoAndPlay, currentframe etc.), so the two can be interchanged. For instance, I was able to use a BitmapAnimation in place of a MovieClip to create a MovieMaterial in Papervision3d – polymorphism works.

When compared with simultaneously running FLVs, BitmapAnimations showed a 500% performance increase on my system. The difference was even bigger with the clips running backward. There may be a performance benefit in converting complicated vector animations to a BitmapAnimation before they are displayed. I have, however, not recently come across a scenario where a pure vector animation alone caused the frame rate to stagnate.

The MovieClip option cacheAsBitmap requires, to my understanding, the frame to be rendered in the Flash display list before it takes effect. This would be the only major difference to BitmapAnimation (where the image is rendered before being displayed). Enabling cacheAsBitmap on MovieClips containing FLV did not show a change in performance in my tests. Because a video is usually viewed once, it makes sense not to cache FLV by default.

There is one known drawback when using a BitmapAnimation: Depending on the size of the video and the client’s processor speed, the Flash Player could “freeze” for a few seconds while decompressing the video data. I created an additional class, where I lengthened the processing time by decompressing one frame per half-second. This would allow the video to be prepared in the background without noticeably slowing down the rest of the application. Delayed processing would work best during a loading sequence, where the video is loaded first, then converted to a BitmapAnimation, while the rest of the assets are being retrieved.

Usage

Simply pass a MovieClip to the draw method.

bitmapAnimation = new BitmapAnimation();
bitmapAnimation.draw(movieClip);
addChild(bitmapAnimation);

The imported bitmap data can be reused with multiple BitmapAnimations.

var bitmapAnimation1:BitmapAnimation = new BitmapAnimation();
bitmapAnimation1.draw(movieClip);
var bitmapAnimation2:BitmapAnimation = new BitmapAnimation(bitmapAnimation1.bitmapSequence);

Conclusions

Pre-rendering a complex MovieClip, such as embedded FLV, using the BitmapAnimation class, may likely show a performance increase. Also, this method may remove the need to embed an image sequence where display performance is an issue. Due to the computation time required for conversion, BitmapAnimations should not be used for long clips. Inputs and feature requests are welcome, just add a comment below.

Download the classes BitmapAnimation and DelayedBitmapAnimation.

Download the blimp example.

Screenshot from the 1995 racing game Destruction Derby

It seems that the graphics performance is comparable to games that came out in 1995 on the PC, before graphics hardware became widespread. Imagine running a game like Dark Forces or Destruction Derby inside the browser. In a nutshell, on today’s average computer, the Flash graphics performance is Quake 1 tops. Broad statements aside, it is important to know what code flies on the Flash Player when developing games and interactive applications.

I’d like to know what basic code will perform best in a given situation. Therefore, I have started to extract these parts of code from my projects and test them against alternative methods, attempting to quantify the execution speed on the AVM. Unlike Javascript, ActionScript usually runs on the same engine; This makes such specific tests worthwhile.

I have gathered performance tests from a couple of my projects and put them into the ActionScript Performance Wiki. It is open to anonymous editors, so anybody is free to add their own tests.

A lesser known feature of browsers, such as Firefox 2 or Internet Explorer 7, is that users can add search functionality to the browser’s search bar directly from within a page. The data structure containing the search information has (so far) been agreed upon as OpenSearch. Since the format is open, any browser software can implement this functionality.

The Firefox search bar with a linked OpenSearch example on the bottom.

The Internet Explorer search bar listing an OpenSearch example.

When to use OpenSearch

OpenSearch makes sense on any site that provides search functionality. When active, Firefox and Internet Explorer include an option to add the site’s search in the search bar.

In my opinion, adding a notice or a link on the page to enable the search functionality is overkill for most sites. I personally wouldn’t use it for my own weblog. On the other hand, an online store with thousands of products could greatly benefit from this feature as a brand touchpoint; And informing the user about this functionality would be worthwhile. Once a user adds a site to their browsers search bar, it is a constant reminder of the site’s existence. Every time a user activates the search bar drop-down menu, that site will be there.

Implementation

Versions of Firefox before 2.0 had a different way for adding search to the search bar. It was similar, but included a different XML structure. The data was saved in files ending with “.src”. I decided not to add this method anymore, since it is specific to a small user base (who still uses FF 1.0?).

Only two things need to be done to add OpenSearch:

1. Create an XML-File containing data about the search engine;
2. Link to the XML-File in the head of the site’s HTML.

The XML, for example, would be structured as follows; Simply adapt the URLs for your site. To get the correct search URL, perform a search on your site, copy the URL and replace your search term with “{searchTerms}”.

<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
	<ShortName>OpenSearch Example Name</ShortName>
	<Description>OpenSearch Example Description</Description>
	<InputEncoding>UTF-8</InputEncoding>
	<Image height="16" width="16" type="image/x-icon">http://yoursite/favicon.ico</Image>
	<Url type="text/html" template="http://yoursite/?s={searchTerms}" />
</OpenSearchDescription>

This file could then be saved as “search.xml” to the root folder of the site and linked to by placing the following code in the HTML header:

<link rel="search" type="application/opensearchdescription+xml" title="OpenSearch Example Title" href="/search.xml">

Including an OpenSearch Link to the Page

window.external.AddSearchProvider("search.xml");

An unobtrusive way to add the link, is to first check if the browser supports the AddSearchProvider function before adding it. Further details can be found on Mozilla’s developer site.

<p id="add-opensearch">OpenSearch not supported</p>
<script type="text/javascript">
	if (window.external && ("AddSearchProvider" in window.external)) {
		document.getElementById("add-opensearch").innerHTML = '<a href="#" onclick="window.external.AddSearchProvider(\'/search.xml\')">Add this site’s search to your browsers search bar.</a>';
	}
</script>

Possible Future Browser Features

I have a hunch that the usability of web-browsing in general, would be enhanced if the browser could detect OpenSearch and enable it temporarily in its search bar. The use case could be:

A user visits a site and the browser toggles the search bar to the site’s search. Instead of looking for a search form in the page, the user enters the query via the browser. Upon leaving the site the search bar switches to the new site’s search functionality, or defaults to the preferred search engine.

The search bar could be highlighted with another color to indicate that it’s linked to the current site.

For this feature to be useful, OpenSearch would have to become more commonly adopted. But I think sites would follow quickly once a browser vendor starts pushing the feature.

Conclusion

In my opinion, the creators of OpenSearch got it right. The specification is clear and it blends in perfectly with the existing technologies, HTML and Javascript. Plus, it is quick and easy to implement. I could recommend any web content management system with search functionality to enable this feature as standard.

I would also recommend adding a favicon to the OpenSearch XML, so the site stands out more in the browser’s search bar.

Download the Code

In my opinion, it looks like Flash will gradually return back to it’s roots as an animation tool. Unlike today, where it has become a multimedia behemoth in which entire sites are created. Flex and a new product named Flash Catalyst (formerly Thermo) will take over the rolls of creating user interaction. I got a preview copy of Catalyst and it looks pretty good. Page elements, and their states, can be assembled visually based on an imported Illustrator or Photoshop composition. It reminds me somewhat of Dreamweaver, but instead of HTML in creates MXML (the declarative language used in Flex).

I took a preview of Flex 4 (codename Gumbo) for a spin, but it still can’t keep up with the sheer awesomeness of FDT. I think Adobe should just buy FDT, employ all the Powerflasher dudes, mash the two products together, and give it a snappy name like Adobe Insane.

In one of the general sessions held on Tuesday it was mentioned that BlazeDS should soon be compatible with the .Net framework. I was exited about BlazeDS when I first heard of the product a couple months back, but my excitement eroded away like a soaked sandcastle when I heard it required Java. Nothing against Java of course, but the company I work for uses .Net. BlazeDS may yet make it onto the company servers.

One of the Max sessions showed a sneak peak of peer-to-peer capabilities in the Flash Player on the basis of RTMFP. A peer-to-peer mesh would open up some amazing data sharing possibilities. We could build a Skynet of SWFs! Historians in two hundred years would say things like: “At first it played simple animations and cheesy banners, but then it gained consciousness ant launched a nuclear attack”. We could also just use this technology for video streaming I guess.

I had a great time at Max, and I am looking forward to continuing my work as a Flash Developer with all the great new Tools coming up.

I made another attempt to get the Flash Tracer plugin from Sephiroth to work and I was successful (turns out my User Settings folder at work is saved on the 486 down the hall). With a few tweeks to the mm.cfg file I even get warnings about Security issues:

ErrorReportingEnable=1
TraceOutputFileEnable=1
PolicyFileLog=1
PolicyFileLogAppend=1

Apart from the dreadfully slow performance, I think this is the simplest way to debug a Flash App from within the browser.

A quick test gave the answer: Practically nill. 30 really long variable names compared to 30 short ones resulted in a file size difference of a measly 5 bytes.

Conclusion

For file size optimization, limiting the length of variable names should be considered an extreme measure. Rather, leave the code readable and optimize the images instead.

Update

Short variable names perform better than long ones. But again, not enough to make it worthwhile throughout the entire application.

The biggest issue I had was that the keyboard input would somehow get “reset” to the English layout. This means that anybody using a non-English keyboard would get strange results while typing. This keyboard bug has been known since at least 2005.

In the end I just loaded a dummy image into the background of the SWF instead of making it transparent. All the other browsers behaved fairly well with the WMODE setting.

If anybody else is having these issues, head over to bugzilla and vote for getting the bugs fixed.

In conclusion, consider WMODE=”transparent” a last resort for even the simplest Flash projects.

• Powerflasher SOS
• Flash Tracer Firefox Plugin
• Xray
• Thunderbolt

SOS looked sweet for a moment, because it used an XML Socket for the Logging statements. However I ran into some cross-domain issues on an external development server, so I put it aside. The Flash Tracer plugin for Firefox would have been sweeeet, but I gave up trying to get it work in Firefox 3. Xray is a debugging behemoth. I didn’t quit like having to include a connector component to my SWF. All these debuggers are pretty darn good, but they all involved some twisted procedures to get them up and running. I then stumbled across a super simple answer to my browser debugging issue. Why not just do what the Javascript guys do? Trace it out to Firebug like this:

ExternalInterface.call("console.log","test");

It’s so simple it can’t be wrong. There is just an issue that I have to decide if I want to use Flash’s built in trace function or the Firebug log while debugging. This however is taken care of buy Thunderbolt. It is a simple class that notices if Firebug is accessible and otherwise uses trace. Thunderbolt also has a “hide” option built in, for when the SWF goes live.

Conclusion

The Firebug / Thunderbolt combo is an elegant way to debug Flash content in both the Flash IDE and in Firefox. For a quick introduction to Thunderbolt, check out the Article 10 tips and tricks using ThunderBolt AS3, by Thunderbolt’s author Jens Krause.

Pimping the Markup

There are many tools for creating hResume markup, but the ones I tested ended up creating something similar to the following code:

<div class="experience vevent vcard">
	<div class="htitle">
		<object data="#j" class="include"></object>
		<span class="title">Coffee Bringer</span><br/>
		<span class="org">My Employer</span>, <span class="location">My Location</span>
	</div>
	<div class="date_duration">
		<abbr class="dtstart" title="2008-01-01">January 2008</abbr> - <abbr class="dtend" title="2008-03-01">March 2008</abbr>
	</div>
	<div style="clear: both">&nbsp;</div>
	<div class="description">Bringing coffee to fellow web designers while they work.</div>
</div>

The markup kinda misses the point of being human readable (a main objective of Microformats). At first glance, the employer, job title, date, location, and description should be marked up as a definition list. In my opinion, however, describing the data using a table would have an additional advantage: The description could be put into the table footer using the tfoot tag. This way it references to the rest of the data the good-old HTML way.

<table class="vcalendar experience vevent vcard" summary="Experience Overview">
	<thead>
		<tr>
			<th scope="col">Title</th>
			<th scope="col">Duration</th>
			<th scope="col">Employer</th>
			<th scope="col">Location</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="4" class="description">Bringing coffee to fellow web designers while they work.</td>
		</tr>
	</tfoot>
	<tbody>
		<tr class="htitle">
			<td class="title"><a class="include" href="#j" rel="#j">Coffee Bringer 2</a></td>
			<td class="date_duration">
				<abbr class="dtstart" title="2008-01-01">January 2008</abbr> -
				<abbr class="dtend" title="2008-03-01">March 2008</abbr>
			</td>
			<td class="org">My Employer</td>
			<td class="location">My Location</td>
		</tr>
	</tbody>
</table>

This has the additional advantage that it displays nicely in the browser even when CSS is turned off. But wait, isn't the object tag missing?

Good-Bye Object Tag

The object tag inside the Microformat links each vevent element to the vcard later in the hResume. The Safari browser, and presumably any software using WebKit, renders the reference of the object so that it displays the whole page (and vcard) every time. It's the correct thing to do, I guess, but it makes the visualization of the resume overly-complicated.

The Wiki entry on hResume describes a workaround to this by setting the dimensions to zero.

<object data="#j" class="include" width="0" height="0"></object>

Safari rendered the data accordingly (by not showing it), but the page's display performance stayed unbearably bad (duh, it rendered the entire page anew inside each vevent). I, therefore, discarded the object tag all-together. I don't think it's a big loss, since the vcard is still there inside the hResume. A better option may be to add the reference along with the title using a link and the rel attribute instead, as seen in my code above.

Conclusion

There is still some changes to be made to the hResume Microformat before it can be considered "1.0". Turning the vevent markup into a table and rethinking/discarding the object tag may be two useful advances for the format.

I watched a useful presentation about form design by Ryan Singer a while back and he makes a point that user input should be kept to the bare minimum when signing up. An article by Luke Wroblewski titled Sign Up Forms Must Die seconds the notion.

However, sometimes it is required for the user to do the leg-work and fill in lots information. Like registering at an online store for instance. Gotta at least know where to send the purchased goods! For users that don't have auto-fill plugins such as the Google Toolbar, Javascript can help filling in the necessary information - not just validating the user input. It would, for instance, make web forms simpler for users if their city would be filled in automatically upon entering their postcode. I timed myself typing my city of residence as quickly as possible and it took me about 3 seconds. So, all in theory of course, the improvement would skim roughly that much time off filling in a form. It's not a lot, but the users level of tolerance towards HTML forms isn't much either.

I'm now going to talk about how I “auto-fill” the city information based on the entered postcode in a HTML form using PHP, MySql and Javascript.

Setting Up the Database

First I needed to get the postcode information from somewhere. For Switzerland I found the data via the Swiss Post.

Then I needed to get it into the database somehow. To do this I imported the downloaded text file (it is tab delimited) into Excel and then exported it again as a CSV file. I only imported the columns I needed which are the ones containing the Town name and the postcode.

Next I put on my white programming gloves and wrote a quick PHP script that connects to the database and runs two SQL statements to import the CSV file. Change the variables to fit your setup and be sure to have the CSV file in the same folder when you run the following example.

$link = mysql_connect('localhost', 'root', 'root') or die('Could not connect: ' . mysql_error());

mysql_query("CREATE DATABASE IF NOT EXISTS test
DEFAULT CHARACTER SET latin1 
COLLATE latin1_swedish_ci;"
);

mysql_select_db('test') or die('Cannot select database');

mysql_query( "CREATE TABLE postcodes (
code SMALLINT(4) NOT NULL ,
city VARCHAR(27) NOT NULL ,
PRIMARY KEY (code)
) ENGINE = MYISAM CHARACTER SET latin1 COLLATE latin1_swedish_ci"
);

mysql_query( "LOAD DATA LOCAL INFILE 'postcodes.csv'
INTO TABLE postcodes
FIELDS TERMINATED BY ','
LINES TERMINATED BY '\r\n'
(code, city);"
);

if(mysql_error()) echo mysql_error();
else echo "Done!";

mysql_close($link);

Special characters where also an issue with importing and exporting so be sure to check the city names in the database. I used the windows text format for importing.

Creating a Web Service

We now need some server side code to provide us with the data from the database. I am using the insanely cool JSON gateway included with AMFPHP to provide the client with data. So with AMFPHP set up I could just write a simple PosteCodeFinder class and plop it into the AMFPHP's services folder. Otherwise a simple way to get the correct name would be a PHP script like this:

mysql_connect('localhost', 'root', 'root') or die('Could not connect: ' . mysql_error());
mysql_select_db('zencart_shop') or die('Cannot select database');

if (isset($_GET['code']) && is_numeric($_GET['code'])) $code= $_GET['code'];
else die ('Only numbers please! The URL should look something like: postcodefinder.php?code=1000');

$query = "SELECT city FROM postcodes WHERE code =" . $code . " LIMIT 0 , 1 ";

header("Content-Type: text/javascript; charset=utf-8");
echo json_encode(utf8_encode(mysql_result(mysql_query($query), "city")));

The code connects to the database, checks the input to be numeric, retrieves the city name and spits it out as JSON.

I had to use utf8_encode() inside the json_encode() function because it would otherwise mess up my character encoding. "Genéve", for instance, would be truncated to "Gen". It was reported as PHP bug #43941.

The Client-Side Code

On to the Javascript! I am using the Prototype library here to make programming AJAX bearable.

FormController = {
	previousResponse: "",
	
	postcodeHandler:function(el) {
		var code = parseInt(el.value);
		if (code >= 1000 && code <= 9999 && $F('country') == 204) 
	  	new Ajax.Request(
			"json.php/PostCodeFinder.find/" + code, 
			{
	  		method: "get",
	  		onSuccess: FormController.updatePostCode.bindAsEventListener(this)
	  		}
		);
	},
	
	updatePostCode:function(transport) {
		var jsonObj = eval("(" + transport.responseText + ")");
		if (jsonObj != undefined && ($F('city') == "" || $F('city') == previousResponse)) {
	   	$('city').value = jsonObj;
			this.previousResponse = jsonObj;
	   }
	}
}

Event.observe(
	window,
	'load',
	function() {
		new Form.Element.Observer('postcode', 1, FormController.postcodeHandler.bindAsEventListener(this));
	}
)

Download all the code here.

Conclusions

Usability Gain

Considering the amount of time it took me to implement, I can only recommend the postcode optimization as a final improvement to a form. Other factors, as mentioned in Singer's video for instance, should be considered first to get the most bang for the buck.

Character Encoding

Most of my time was not spent with programming the scripts but with playing with the character encoding. Having UTF-8 all the way through form the original text file, to the database, to the PHP script, to the client side Javascript and finally the HTML document itself was easier said than done. I found a PDF on the UTF-8 development practices by Matthias Kerstener, that helped out with some of the issues. Still, character encoding issues makes me not want to be a web developer any more.