Programming tips

Flash Tip: Deep linking with SWFAddress

7/22/09 Update: Read a user’s feedback on my sample files, and download his more simplified and updated files HERE.

4/9/09 Update: I just found this great video tutorial on SWFAddress by Flash guru Lee Brimelow. It’s definitely worth a look!

2/25/09 Update: I have provided example files and tips in an updated post. Please refer to both posts for help troubleshooting bugs. Enjoy!

Ever been annoyed when someone clicks the “back” button while viewing a Flash presentation? Your initial reaction is, “You can’t do that in Flash!” Or, even more frustrating, you want to show someone a cool component within a Flash project, but it’s too confusing to say, “Go to this URL, then click “Videos,” then click “My video.” etc etc? Actually, neither of these quirks should arise anymore. Let me introduce you to SWFAddress and SWFObject, which enable the back/forward buttons of your browser AND allow for deep linking.

For this tutorial, I will tell you how I taught myself, and hopefully it will help others …

1) To get a grasp of how this all works, start with this great post on draw.logic, “Deep Linking in Flash – SWFObject and SWFAddress.” After reading it, I felt like SWFAddress was a more robust application than SWFObject, so I stuck with SWFAddress (if I am incorrect in saying this, someone please correct me). However, if you want more information on SWFObject, read this post on deconcept, as well as it’s documentation on google code.

2) Download SWFAddress here. At time of publication, it will be SWFAddress 2.1. If you are the type of person that likes to see examples of it working before you get lost in code, here is their example in Flash.

3) Unzip the folder and open it. There are sample files and code for Flash, Flex, AJAX, and several others. For Flash, if you are coding with AS1, use the “Flash” folder. For AS2, use the “Adobe” folder, and for AS3, use the “CS3″ folder.
NOTE: For my tutorial I will be using AS2.

4) Open up website.fla, SWFAddress.as and SWFAddressEvent.as … take a look around. As you can see, these files work by using keyframe coding, so if you are coding with OOP and only using one frame, you’ll need to find another tutorial. (But good for you for using good coding practices!)

5) Start customizing this code for your website. (NOTE: Save your .fla right next to their website.fla so it can read the two class files and javascript file.) For mine, I had a preloader on frame 1, an intro on frame 2, and my main content starting on frame 3. Below is sample code, from Asual, with my comments:

Frame 2 (with no label) – used in this example as an intro:
// Custom utilities
function replace(str, find, replace) {
return str.split(find).join(replace);
}
function toTitleCase(str) {
return str.substr(0,1).toUpperCase() + str.substr(1);
}
function formatTitle(title) {
//change 'SWFAddress Website' to your title/heading name
return 'SWFAddress Website' + (title != '' ? ' / ' + toTitleCase(replace(title, '/', ' / ')) : '');
}

// SWFAddress handling
SWFAddress.setStrict(false);
SWFAddress.onChange = function() {
var value = SWFAddress.getValue();
var path = SWFAddress.getPath();
var id = SWFAddress.getParameter('id');
if (_currentframe == 2 && value == '') {
intro.gotoAndPlay(2); //intro is the instance name of our intro movieclip
} else {
gotoAndStop('$' + value);
}
trace (path);
SWFAddress.setTitle(formatTitle(path + (id != '' ? '/' + id : '')));
}
stop();

/*If you do not have an intro, you can change what is inside the SWFAddress.onChange function to match your needs (probably by taking out the following if statement: if (_currentframe == 2 && value == ”){ …)
*/

Frame 3 – used in this example as home (with a frame label of $):
stop();
SWFAddress.setValue('');
about.onRelease = function() {
SWFAddress.setValue('about');
}
about.onRollOver = function() {
SWFAddress.setStatus('about');
}
about.onRollOut = function() {
SWFAddress.resetStatus();
}

/* “about” is a button linking to the about page … copy the onRelease, onRollOver, and onRollOut code and use for every button that you want to enable deep linking*/

6) Add Labels:
For each section that you want to deep link, add appropriate label tags. For instance, our about page would have a label of $about … Look at how they did their labels in website.fla if you are confused. NOTE: Do not put a frame label on your intro page.

7) Publish your files, creating an .index.html and a .swf file

8 ) You are now going to activate the javascript file, located in the “swfaddress” folder, named “swfaddress.js” Open your html file, and place the following code beneath the title and meta information (right next to the javascript call code for AC_RunActiveContent.js):

9) FTP your .swf, index.html, swfaddress folder, and AC_RunActiveContent.js file to your desired location. Call up your URL, and hopefully it all should work. You can now use the back and forward buttons and your deep links should work. YAY!

Let me know if you have any questions or if it’s not working for you.

Good luck and happy coding!

Other posts that might interest you:

• Hosting options for multimedia websites
• Move over Dipity! AVE, a new interactive timeline editor to put on your radar

© 2012 Innovative Interactivity (II).
Download II's Security Policy (PDF)