Advertisement
  1. Code
  2. Web Design
Code

Create a Dynamic Deep Linking Flash Web Site with SWFAddress

by
Difficulty:IntermediateLength:MediumLanguages:

In this tut, we will be exploring the wonder that is SWFAddress, discussing why your site should have deep linking, and the processes involved in implementing deep linking in your Flash projects.

This website is XML driven. Also we shall be looking at SWFAddress's built in functions and how they are used to create the final result. Enjoy!

Check out the demo above in a new window. Notice how your browser's URL changes as you navigate through the mini-site.


Step 1: Why use Deep Linking?

Deep linking is a great way to structure a website and also is great way to structure code.

Deep linking is basically giving the user a chance to link to a certain area of a Flash movie through a simple URL.

For example if you wanted to show a portfolio to a client and you gave them the link to a Flash website without deep linking. Well their guess is as good as yours where to find that content within the SWF. But with deep linking you can link to any content in a Flash movie -- for example: website.com/#/portfolio/section_3. This may seem a complex task but it isn't with SWFAddress deep linking.

Deep linking has other benefits (for example, SEO) and it basically turns a boring Flash movie into an expandable application.


Step 2: Getting Prepared

You will need for this tut: Caurina Tweener, SWFAddress for AS3, SWFObject.

You'll also need main.html from the Source download.


Step 3: Import, #include, what??

If you have previous experience with swfaddress, you may have come in contact with this issue. You have tried to use the import directive to use swfaddress or if that failed you tried #include 'SWFAddress.as'. Well the truth is you don't have to do anything at all.

All you need to do is put the SWFAddress.as file where your swf is and swfaddress is automatically available for actionscript.


Step 4: File Structure

Create an empty main.fla. (I would normally write code in external as files but I think all the code in one place is better understood).

From the SWFaddress download get the swfobject and swfaddress folders and place them in the main folder. If you are having trouble finding these just download them from the source at the top of the page.

And of course get the SWFAddress.as and SWFAddressEvent.as and place them in the main folder. They are also in the Source download if you are having trouble finding them.

Download the source and copy main.html to the main folder.


Step 5: Create Four SWFs

Create 4 dummy SWFs; for example, SWFs with some random text in them, each with a different title and color of font. There are four random ones included in the Source download.


Step 6: Create the XML File

Call it main.xml. We will use xml to store our data. Now we have created the xml file we will start the good stuff, coding...


Step 7: Create the Menu Array

Below is the code required to load the xml menu in Flash. The comments in the code guide you through the process.

Go to frame 1, Layer 1 in the main .fla file you created earlier.

Add this code. It's well-commented to help you understand what it does.


Step 8: Create Button Actions

This is what our site should look like now:

So let's continue by giving button events. The code below should be placed on line 78 on frame 1 actions layer just above the addchild method we used.

Add the functions below to handle these events below the createMainMenu function:


Step 9: SWFAddress on Change Function

This is the main event that handles all the swfaddress changes. It is where we will apply our application logic in order for our site to work. Let's have a look at the main function in detail.


Step 10: setValue() Explanation

SWFAddress.setValue("somevalue");

When this event is fired -- for example when someone presses the button -- the swfaddress value is set and triggers the onChange() listener. Therefore in order to create our modules to load we need to create some code inside the swfAddress onChange() listener.


Step 11: Events Function

Now we are going back up to our menu for loop. We need to add an additonal variable that contains a function:


Step 12: Creating the Module Function

Before we look at the swfaddress events, we will create the module to load the module in. It is complete with I/O error handling. It is good practice to handle errors when you can.

This is the module function. The comments guide you through the process.


Step 13: Summary

To recap: We have created the menu, created the function that will occur when SWFAddress.setValue() is triggered but we still need to create our application logic. What I mean by application logic is how we are going to use swfAddress to load in certain parts of our application.


Step 14: Creating the Deep Link

Let's go back to our menu for loop and define the deep link there. Below where we set the menu_item.name place this code. This code creates the deep link value:

Its use will become clear very soon.


Step 15: Application Logic

Now let's go back to our function that handles swfaddress events: handleSWFAddress

We now need a certain part of code that will load the correct module. The code below shows you how to apply the correct logic in order for the application to load the correct module. The comments guide you through the process. The new part of this function starts at the creating the for loop.


Step 16: SWFAddress.getValue()

SWFAddress.getValue() is a great way to test your deep linking site without web server. The best way to test your deep linking using SWFAddress.getValue() is to use the trace function. For example:

This will trace the current swfAddress value in the output.


Step 17: Loading the First Menu Item

Why on earth wouldn't you want to load the first menu item? There's no good reason, therefore I will show you how to do it. Go to the handleSWFAddress() function and drag it into the createMainMenu() function below all the previous code. Add this code below the second for loop (the one we just created):


Step 18: Extra Enhancements

We are now going to apply validation to the menu as gift for reading this tut. :)

Go up to the menu_item.init function in the menu for loop.


Step 19: Troubleshooting

OK! Now we should have a working project. But don't throw a party just yet. Check the following things:

  • You have completed every step.
  • DO NOT PUBLISH the SWF, just export the movie otherwise you will override the main.html document you obtained from the Source download.
  • Make sure you have imported all the necessary imports. Well all the imports are necessary without just one the whole thing would not function properly.
  • Make sure the handleSWFAddress() function is in the createMainMenu() function.

Step 20: What does main.html do?

Let's take a look at main.html:

A lot of that is just styling the file, changing the background color, positioning the SWF, things like that. Here are the key lines:

This includes the SWFObject and SWFAddress JavaScript files, and uses SWFObject to load main.swf in the div element called "website". That's all there is to it! Check out this screencast for an intro to SWFObject.


Step 20: The Whole Code Commented

Below is the whole code commented and working.


Conclusion

Thanks for reading this tut. If you have any questions or problems leave them below. By now you should understand how to build a deep linking website without needing to understand how a dynamic website should be coded.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.