The Web acts as a gateway to an immeasurable amount of resources and information. However, the main access point for all of these sites are a relatively small number of sites – the bottlenecks and watchdogs for Web content - search engines. So, as a Flash Developer, one of the first questions you learn to fear is, “How will this Flash content show up in search results?” Flash is, unfortunately, by and large invisible to search engines - which is a major detriment to the growth potential of the technology. And although the best answer is to provide an alternative HTML version of the content, any programmer worth his salt will go out of his way to avoid having to do repetitive labor. So, here are a few tricks we’ve picked up along the way.

To give credit, one of the most well known options for Flash replacement has actually been around for some time now -  sIFR (or Scalable Inman Flash Replacement). The genius of sIFR is that instead of having alternate content for Flash, the roles are reversed and Flash itself is the alternative - while using the same HTML as content. For anyone with a fetish for fantastic fonts, bookmark this program - it serves as a dynamic text replacement module for just that purpose.

As far as typical Web models, this fits perfectly into place. In the ideal Web site, X/HTML is the content, CSS is the layout, and JavaScript/Flash provides the behavior. With sIFR, you provide for a graceful degradation, while providing the richest possible experience for the users that can handle it.

With that in mind, early this year, we decided to create the news ticker equivalent of sIFR - use HTML already in place to populate the content in an embedded Flash plugin. Here’s the basic code:

ActionScript 3

package{
import flash.display.*;
import flash.external.ExternalInterface;

public class News extends Sprite{

var _unParsed:String = '<ul>\n<li>No Parameters!</li>\n</ul>';
var _parsed:Array;

public function News():void
{
	loadParameters();
	_parsed = parseList(_unParsed);
}

protected function parseList(listString:String):Array
{
	var regParse:RegExp = /<li>.*?(?=\s*<li>|\s*<\/ul>)/gsi;
	var list:Array = removeTags(listString.match(regParse));
	return list;
}

protected function removeTags(list:Array):Array
{
for(var listItem:uint; listItem < list.length; listItem++){
	var regTags:RegExp = /(<li>|<\/li>|<ul>|<\/ul>)/gsi;
	list[listItem] = list[listItem].replace(regTags,"");
}
return list;
}

protected function loadParameters():void
{
	_unParsed = (stage.loaderInfo.parameters.news == null) ? _unParsed : stage.loaderInfo.parameters.news;
}
}
}

The code above will return a basic Array with all of the html content from an unordered list that is passed in via the load parameters, which is provided by the wonderful JQuery Library and SWFObject, which I’ll go into in a later article.

As a side note, we originally started with this type of regular expression.

var regParse:RegExp =/<li>(.*?)<\/li>/si;

The stick in the proverbial mud, per usual, is IE6. IE6 discards the end </li> tags, and capitalizes everything - giving this type of result:

<UL class="news">
<LI>Technology aids... <A href="">more...</A>
<LI>Technology aids... <A href="">more...</A>
</UL>

So with some small changes to the regular expressions, we’re back on track.

While we’re happy with the results - this code tends to be a bit limited in its use. It can be adapted, but we were considering a more robust implementation of a general purpose HTML/Flash parser…and then I visited Minneapolis in June for FlashBelt.

While there, space150’s Marc Jensen (aka “White Tower”) gave a fantastic presentation on their Flash process, Faust ( or, Flash Augmenting Standards). The main difference between their process and the one outlined above is their use of innerXHTML. They parse the HTML, fixing inconsistencies, outside of Flash, and then pass the code into the object. What makes it really robust is that you can then take that code and set it as XML, which is very easy to manipulate and work with in ActionScript3.

Both of these methods work great, but neither really provide a solution for a full Flash Web site - not to mention the fact that the IE6 problems are a pretty common situation for Web developers. In the ideal situation, I’d rather not rely on any particular browser parsing behaviour. For a solution to these issues, we’ve been working on an XML based CMS language.

While this type of approach is certainly proprietary, and a bit more difficult to implement, it does use XML exactly for what it was meant for - a common data format that is able to be interpreted by several front ends. And while we’d love to post the code for it here, the solution itself is to be the base of our new dday.com…so stay tuned,  it’ll be great!

Tags: ActionScript3, Flash, Javascript, SEO, Text Replacement

Written by Jake
About the Author: Jacob is often found calculating the trigonometric ratios of angles while pwning n00bs in Halo.

This entry was posted on Thursday, October 30th, 2008 at 5:42 pm and is filed under Coding, Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.