Flash

In an earlier post about setting URL hash values from Flash, I referenced Yahoo! Maps as a prime example of employing this technique in Flash applications. However, much to the chagrin of Adobe, Yahoo! Maps no longer uses Flash technology to power its maps application and instead has chosen to use AJAX. Their maps application still updates the URL hash values, and my earlier post still holds water; it's just that Yahoo! Maps is no longer an example that can be referenced.

When building certain Flash applications, it is beneficial to update the URL in the address bar to indicate the area of the application that the user is currently viewing. That way, if the user bookmarks the URL and/or sends the URL in an email, the return visit will result in the Flash application displaying the appropriate information.

The technique employed to accomplish this functionality involves the portion of the URL after the "#" character, which is called the "hash" portion of the URL. Hash values are often used on web pages that do not involve Flash. For instance, some web pages which present a list of FAQ items use standard HTML anchor links that update the hash value (i.e. <a href="#faq16">), resulting in the user being shown the item of interest without having to wait for the entire web page to reload.

Therein lies the beauty of using hash values to keep track of where the user is navigating in a Flash application: Updating the hash portion of the URL does not trigger a page reload. Therefore, it is a good idea to leverage this opportunity to update hash values and provide a better user experience on return visits to the application.

When a user returns to the web page with a hash value stored in the URL, a JavaScript function is used to parse the values out of the hash and then pass those values into the Flash application upon load using FlashVars. Depending upon the values passed to it, the Flash application can then behave accordingly.

A great example of a Flash application that updates (and reads) hash values is Yahoo! Maps. Notice what happens after each time you use your mouse to drag the map around: The URL hash values are updated with the latest latitude and longitude so that if you were to send this URL to a friend, your friend would see just what you see. For example, I copied the URL for Cambridge, MA and am showing it to you here. (Update: Yahoo! Maps no longer uses Flash)

The hash portion of a URL can be updated dynamically by using JavaScript to set "window.location.hash" to a particular value. Without worrying about Flash for a moment, it is fairly straightforward to create a simple JavaScript function to update the page hash on a web page (as is shown in the example below).

Normally, calling a JavaScript function from Flash acts the same way as it would if you were to call the JavaScript function from a button on the web page itself, for instance. However, there is a bug in Internet Explorer 6 which causes it to mishandle the setting of the page hash when the JavaScript function is being called from Flash. Firefox and Safari process this function from Flash just fine; go figure.

In order to get this function to work in IE6, you have to embed the Flash application into an IFrame. Then, the Flash application calls a JavaScript function which sets the value of "parent.location.hash" instead of "window.location.hash". Thankfully, this technique also works in Firefox and Safari, so getting this functionality to work in all browsers can be accomplished using a single approach.

The example below illustrates the technique of setting the hash value from Flash. The Flash application is embedded into the page using an IFrame. The button on the Flash application (using the ActionScript code shown) calls the "sethash" JavaScript function, which sets the parent's hash value to the current time (the number of milliseconds since midnight on January 1, 1970). Notice how the number in the page URL changes after each button click.

A detailed comparison example is also available at this link to illustrate how Internet Explorer 6 handles Flash calling this function in different circumstances. In Exhibit A, Flash is embedded directly in the page, and clicking the button fails to set the page hash after the first button click in IE. Exhibit B illustrates the technique described in this posting, and the hash is set successfully regardless of browser type.

There is a rather straightforward way to have two SWFs on a single web page communicate with one another, as described in this Adobe TechNote. However, there is a limitation with this simple approach: the communication does not work properly when there are multiple browser windows open at the same time. The problem even occurs when there is one Internet Explorer window open and one Firefox window open. You can easily see this issue by opening the Adobe TechNote in multiple browser windows; the demo application will work on only one of the browser windows.

The reason for the problem involves the name for the connection that is specified in both SWFs when the LocalConnection class is instantiated in the code. Apparently, this connection name is not unique to a browser session, but is unique to the user's machine. Therefore, with multiple browser windows open at the same time, they all try to communicate within the first browser window that was opened.

The solution is to devise a way to define a unique connection name for each browser window that is opened. The same unique connection name must be declared in both SWFs in the same browser window. The approach I took to solve this problem is to generate a random number in JavaScript and then pass that number into both of the SWFs on the page through a querystring variable when providing the URL of each SWF.

For instance, the random string can be defined in JavaScript as follows:

     var ranString = Math.random().toString();
     ranString = ranString.substr(ranString.length - 10, 10);

... and, the random string can be passed into the SWF as follows (assuming that the SWF is being presented using SWFObject):

     var swfurl = 'movie.swf?rs=' + ranString;
     var so = new SWFObject(swfurl, 'swfname', 100, 100, '7', '#ffffff');
     so.write('divname');

Then, whenever you reference the name of the connection in ActionScript, you append the random string that was passed into the SWF, for example:

     incoming_lc.connect("lc_example" + _root.rs);

Now, whenever a browser page loads, the two SWFs on the page reference the same connection name, and this name is unique to that particular browser window. Multiple browser windows can be open with the same page loaded, and the SWF to SWF communication will work as desired.

Grant Skinner gave a talk at the Flashforward 2006 conference in Austin regarding Flash resource management, including a discussion of the Garbage Collector in Flash Player 9. Grant provided sample code and classes (made available with the presentation) that use intelligent resource management techniques.

At the most recent Boston Flash Platform User Group meeting, Keith Peters gave a talk about "Making Things Move in AS3." One of the main parts of his presentation was a discussion about the three options for getting started working with ActionScript 3:

1. Download the new Flash 9 AS3 Preview (free for Flash 8 users)
2. Purchase Flex Builder 2
3. Download the Flex 2 SDK (free), which is basically just a SWF compiler. Then, you can download the FlashDevelop IDE (free) and Apache Ant (free) to organize your project files and compile instructions. Keith has made available on his blog the templates he uses to structure his projects using this configuration.

Samorost2 is a game built in Flash that showcases an impressive array of sounds and visuals. The game storyline is quite inventive, and it engages you to think creatively in order to proceed from level to level. It's not surprising that it won an award at the Flashforward conference in Austin. Brilliant!

Wallop is a new social networking site with an interesting revenue opportunity for Flash developers. Wallop members can express themselves online by purchasing Flash-based interactive elements (called Wallop Mods) to characterize their digital presence. Flash developers can produce these Wallop Mods and sell them on the Wallop Modder Network.

This opportunity for making money in the Wallop digital universe reminds me of two articles I've read (Business Week | Wired) about people making a living by selling digital assets in the Second Life virtual world.

Here's a funny Flash animation called "Cinema Rules" which was created by ILLUSTREE. It was a finalist at the Austin 2006 Flashforward conference Film Festival.

I wish that I had come across this posting by Grant Skinner a long time ago about the pros and (mostly) cons of using _root in your ActionScript code.