Custom Class Casting in Flash

While developing a Flash 8 project using ActionScript 2 classes, I recently created a Tile class that extended MovieClip. The Tile is a custom scrolling background element that tiles itself for a seamless, endless horizontal scrolling.

I created a couple variables, typed as Tile, in my AppState class, the class I use to keep the current state of the Flash application. They are like so:

// Background movie clip tile references
var tile1:Tile = null;
var tile2:Tile = null;

Now, since we're not yet using ActionScript 3, the only way to place new Tile instances onto the stage is with a call to attachMovie(). However, the following call won't compile in AS2:

app.tile1 = _root.attachMovie(bgndMcName, "bgnd1_mc", app.depth++);

Why does it fail? Well, the compiler says this:

Type mismatch in assignment statement: found MovieClip where com.barefoot.ui.comp.Tile is required.

So, I thought to myself, I wonder if you can cast objects like you can with the String() and Number() functions? It turns out you can! This works:

app.tile1 = Tile(_root.attachMovie(bgndMcName, "bgnd1_mc", app.depth++));

I'm looking forward to ActionScript 3, where we will be able to instantiate objects to be placed on the stage like you can for any other object:

app.tile1 = new Tile();
addChild(app.tile1);

But until then, I'll use this casting method. It's not rocket science, but I thought it was cool nonetheless.

Doug Smith, Senior Developer, Barefoot

HTML e-mails

OK, so we don't have all of the best ideas. Here's a great article with some do's and don'ts for HTML e-mail, which e-mail clients support CSS, and techniques to handle image blocking.

HTML Emails - Taming the Beast by David Greiner

Flash & SEO, A Home Run for Barefoot - Part 2

This post will describe more details about how Barefoot accomplished a high level of search engine optimization (SEO) with a recent all-Flash web site, Pitch In For Baseball. (The previous article is here.) One unique aspect of this site is not only that the content is indexed in search engines, but that the links that are returned by search engines take you into subsections within the all-Flash web site. Typical all-Flash web sites don't provide this level of access into the content.

To start, each "page" or sub-section of content is stored in HTML in a content manager. In our case, we're using a custom solution we developed using MySQL and JSP. This HTML includes CSS to format the text, along with links that can navigate within the site and external to the site.

Each "page" within the site is indexed using a section & subsection reference. The structure is _, so "1_2" points to the content for section 1, subsection 2.

The site is architected in a Model-View-Controller pattern. So, all content is accessed by passing data to a single controller.

The controller can interpret URLs to view pages in two forms:

• /pifbweb/?is=2&iss=2
• /pifbweb/ui/step_up_to_the_plate/pitch_in_some_green/

Notice, the first URL above passes a section ID and subsection ID directly, while the second URL uses an easily readable, SEO-friendly path.

The controller parses URLs in either of these two forms so it can locate the correct HTML content from the database.

To match the SEO-friendly URLs with the section/subsection scheme, all of the possible paths are stored in multi-dimensional arrays. The controller searches the arrays to find the position of the section and subsection within the arrays. In the above example, it would locate "step_up_to_the_plate" as the third item in the SECTIONS array, and "pitch_in_some_green" as the third item in the SUB_SECTION array for the chosen section. (That's where we get is=2, iss=2, zero-based indexing).

Once the section & subsection IDs are determined, the controller retrieves the HTML content from the database. We then move to rendering the retrieved content inside the Flash, and in HTML for indexing by search engines.

To understand how we achieve this, it's important to understand SWFObject at a high level. SWFObject is the premier method of embedding Flash applications into web pages. It is a very well-crafted Javascript library that optimizes process of determining the Flash Player version of the current browser, and hiding all that complexity from Flash developers.

To use SWFObject, you place a <DIV> block on the HTML page where you'd like the Flash to display. If the user has the correct version of Flash Player and all is well, the Flash application will replace any content you put into the <DIV>. Otherwise, content in the <DIV> will display and the user will not see the Flash. This includes "users" of the web page like search engine spiders and other automated processes.

Now, back to our application. Once the controller has retrieved the HTML content, it puts it into the <DIV> block where the Flash will display if the user has the right version of the player installed. It also passes the input section and subsectionID as flashVars to the SWFObject instance which will render the Flash if all is well. The Flash application will then append the section and subsection IDs to a URL that reads the HTML from the content manager into an HTML text field within the Flash.

With this content in the <DIV> of each unique URL, we create a site map that includes every possible link, and embed that into the <DIV> block of the home page URL. Search engines start there, and can find and index every other page. You can see all of this if you view http://www.pitchinforbaseball.com with Javascript turned off -- Firefox makes that very easy.

Another detail is that links within the HTML content need to work correctly whether clicked inside the Flash or in the HTML-only version. To accomplish this, all links to other sections within the site use full URL structure above, like /pifbweb/ui/step_up_to_the_plate/pitch_in_some_green/. If the content is being retrieved from Flash, we append a parameter &switchLinksToFlash=true to the URL which tells the controller to change all these URLS from standard links to an asfunction call. In this way, all links inside the Flash call an internal function that animates the section/subsection change without reloading the whole Flash application.


Doug Smith, Senior Developer, Barefoot