SWFAddress, SWFObject, and Flash

October 16, 2007 – 2:39 pm Tags: , , , , , ,

For many years, using flash to create a whole website was not very search engine or browser friendly. Because of the way in which flash content has typically been deployed, it was not possible for users to use the back/forward/refresh buttons to navigate through a site like they usually would. Additionally, because of the way in which flash content is embedded into an html page, search engines could not index a site properly, thus making it much more difficult to promote a site or its contents.

Over the years there have been hacks and willy nilly efforts to get around this, but nothing ever worked very well, and if it did, the methods a person/company used to do it would be kept private.

Fortunately, along came SWFAddress(or, more accurately, Rostislav Hristov wrote and shared it)! Yay! SWFAddress works in conjunction with Geoff Stearn’s SWFObject to provide deep-linkin’, regular browser-like seemin’, seo-enhanced flash pages.

I’ve made an example file available here:
swfaddress example

If you want to download SWFAddress, you can get it from one of the sites above. I would, however, recommend using the files that are in the subversion directory at sourceforge. These files will contain a lot more examples, and will probably be more up to date. If you need some help on using subversion, check this out-

Using SWFAddress can seem a little tricky at first if you haven’t used SWFObject before, or don’t have experience utilizing external classes in your flash applications. If you want some more information about using SWFObject, there’s some good information here. As far as using external classes, Zeh Fernando has a good example on how to use his Tweener classes.

Basically, you have to include the SWFObject and SWFAddress javascript files in the same directory as your site. After that, you can embed your flash file into the html with a snippet that will look something like this:


var so = new SWFObject('site.swf', 'site', '100%', '100%', '8', '#CCCCCC');
so.useExpressInstall('swfobject/expressinstall.swf');
so.addParam('menu', 'false');
so.write('flashcontent');

so, after you’ve successfully set up the SWFObject and SWFAddress javascript files, its time to move on to actionscript:

First you’ll need to import SWFAddress into your flash file with the statement

import SWFAddress;
import SWFAddressEvent;

I must note here that I have used as3 in this example. The actionscript 2 version is a litte different- it works without the SWFAddressEvent class. There’s lots of information out there on that subject, so I’m concentrating on the AS3 version here.

If you’re using actionscript 3, I would highly recommend getting the source from subversion (or you can use the one I’ve included in my example files). The source in subversion comes with an additional class called SWFAddressEvent, which is highly useful in the actionscript3 highly event-driven framework. SWFAddress can be used in AS3 without the SWFAddressEvent class (and that is how the current public release is made), but if you’re creating your files in a document class, it doesn’t work so well without the Event class.

So, after you’ve imported the necessary classes, your code (very simplified) will look something like this:

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);
public function handleSWFAddress(e:SWFAddressEvent) {
      var address = SWFAddress.getValue();

      if(address == "") {

           goHome()  //or do whatever function to get back to home page

      } else if (address == "page2") {

           goPage2()  // or do whatever function that brings you to page two

      }  //... etc for how many different urls you want in your site (i actually use a switch statement here..)

then you have to add event listeners to your buttons, and point the event listeners to the SWFAddress listener. this looks something like this:

homeButton.addEventListener(MouseEvent.CLICK, handleHomeButton);
buttonTwo.addEventListener(MouseEvent.CLICK, handlebuttonTwo);
public function handleHomeButton(e:MouseEvent) {

       SWFAddress.setValue("");

}

public function handlebuttonTwo(e:MouseEvent) {

       SWFAddress.setValue("page2");

}

so when a user clicks button two, the listener will contact the SWFAddressHandler, and will call whichever function you want it to call.

That’s a preeetty simple version of how to use SWFAddress in AS3 in the document class. you can download the source files here.

But if you’re not too bad at writing code, you can do some pretty complex things with this. In this example (this is actionscript 2, sorry about the messed up font, i never really finished this project…) , I’ve used SWFAddress to send a lot of variables over the url in order to control the birds. these urls are all dynamically created, which might give a person a hint at how powerful deep linking in flash can be!

// edit 11-14-07

don’t follow that old link to see swfaddress in full action.  try out this one…. 

Enjoy, and any comments, questions, and corrections are welcome!

  1. 34 Responses to “SWFAddress, SWFObject, and Flash”

  2. hey, i downloaded the source and it seems like the SWFAddress.as and SWFAddressEvent.as are not in the zip. could you check from your end? if not, i am mega sorry

    By brendan Lee on Oct 17, 2007

  3. hey brenden, sorry about that. I must’ve totally spaced-

    try downloading the files now

    By Thomas on Oct 17, 2007

  4. Thanks alot for this post!

    I’ve got it all set, now the title of the page does change, but how can i change the url in address bar?
    something like
    http://domain.com/#/myPAge

    I’ve seen it in your example online, but i couldn’t see it working in the source files i downloaded!

    please any help or info is highly appreciated

    By bach on Oct 25, 2007

  5. hi mate,
    great post.
    i set it all up as you described, i can see the title change in the browser window, but how can i change the address in the url?
    something like http://domain.com/#/myPage

    pls help
    thx

    By bach on Oct 25, 2007

  6. hi bach,

    I looked in the source, and that code still works for me. maybe try sending me your files and I’ll see if I can figure out what’s going on for you:}

    By Thomas on Oct 25, 2007

  7. Thanks alot Thomas it worked!
    I didn’t include the EventListener at first since i thought i don’t really need it for anything.
    It’s weird why it should be there for this to work even if it’s empty.
    Any ideas why is the listener compulsory?

    Anyways as long as it works that’s still brilliant.

    great post mate,

    thanks

    By bach on Oct 27, 2007

  8. Just in case this happens to someone with very little javascript knowledge, after spending my whole weekend trying to figure out why the sample is working, copying and pasting from the source is working but when i try to write my own script the whole thing was stuffed, it was because in the html script
    swfobject.js should always come before
    swfaddress.js

    I had them upside down all this time!

    Just a note, after my wife noticed a bold patch on my head from pulling that hair!@#$%$%#

    Sorry Thomas i had to add note this here just in case a noob like me had the same problem.

    thx

    By Bach on Oct 28, 2007

  9. Many thanks for sharing. I did notice that i cannot see the examples in Internet Explorer, works fine in firefox as all things do. Any ideas ?

    By lone wolf on Nov 28, 2007

  10. I noticed a major bug.

    Let’s take on http://3dhistogram.com/ to demonstrate this bug.

    As soon as the page is loaded try clicking the adress field in your browser. Then uncheck the adress field by clicking somewhere on the site, and then navigate on the site clicking for instance “about” and “contact”.

    You’ll note that everything seems to be working, it changes the address in the browser window just fine, but say you want to leave the site. Write http://www.google.com in the address bar.

    You can’t. User is stuck on your page unless they close their browser / tab and open a new.

    How can that be fixed?

    By Niemi on Dec 15, 2007

  11. Hey Niemi,

    Thanks for your interest. I tried recreating that bug in my browser, but could not. Which OS/Browser are you using when that happens?

    By Thomas on Dec 15, 2007

  12. Hi Thomas, thanks for replying so quickly.

    It’s me thanking you, I really needed this in AS3 and you came to my rescue.

    If we can sort this bug out, it would be perfect!

    I can re-create at will in FireFox. I have tried with 3 different computers, the same result. It’s the only browser that behaves this way. In IE7, IE7 and Opera, everything is just fine.

    If you want my help with anything, bug testing etc. you can add my messenger ihavea@gmail.com (only messenger, I don’t use it as mailbox)

    By Niemi on Dec 15, 2007

  13. Also, is there away to avoid that # (hatch/number sign) is added to the URL?

    By Niemi on Dec 15, 2007

  14. Can you please include the site.fla file?

    thanks

    By wes on Dec 20, 2007

  15. I’m also getting the disabled address bar as soon as SWFAddress.setValue(url) is called while viewing the site I’m developing in Firefox 2.0.0.11. Haven’t found a solution yet as to why.

    By Luke Grannis on Jan 8, 2008

  16. Hi luke. I’ve looked into this a lot, and I just don’t know what to do about it.

    I’ve noticed similar problems when using my gmail account (I’m pretty sure they’re using something very similar to SWFAddress in that app, but with ajax or something instead..). Since I use it almost hundreds of times a day, I do notice a similar error to this sometimes.

    I’m not sure what to do, if google can’t figure it out, then who can?

    Perhaps I’m passing the buck, and just giving up prematurely, but on the other hand, I’m not sure if this bug with Firefox makes things completely unusable. It’d be great to get a fix, but it doesn’t seem quite critical to me. For now I’ve got a lot of other things worth a lot more attention.

    Either way, its all just my humble opinion, and I would be ELATED to see a fix!

    By Thomas on Jan 9, 2008

  17. I found a solution.

    Setting the WMODE to either transparent or opaque does the trick.

    By niemi on Jan 11, 2008

  18. hey thanks for this - one bug i noticed in the test files -

    in the html provided, there’s a missing bracket on the closing tag of the title, i.e.

    modern-carpentry SWFAddress Example/title>

    so it won’t load in Explorer, although FF doesn’t seem to notice it…

    thanks again!

    By jared on Jan 18, 2008

  19. thanks jared, i’ll fix that up! :D

    By Thomas on Jan 19, 2008

  20. It’s a very usefull information, I’ve searched it 1 week. I understand a lot of things, but I still can’t create deep links. A link of Example doesn’t work. please update this link or send me on e-mail. I really need it. me e-mail is on gmail and name is: datochrela
    I’m using action script 2.0

    By DaTval on Apr 19, 2008

  21. I can’t find source code of 3dhistogram.com, I liked this example the most of all, because it can navigate using back and forward (history).

    By DaTval on Apr 21, 2008

  22. Hi webmaster!

    By Kazelyrp on May 24, 2008

  23. Hi webmaster!

    By Kazelvle on May 24, 2008

  24. I’m noticing a bug with the example. If you cycle through the pages 7 times or so, then go back 3 pages, then go forward one, then go forward one again and then look at your back history, you will notice that the titles are not correct. Clicking back one page takes you to the page that is expected, but the title is wrong.

    By rando on Jul 14, 2008

  25. I am just starting out with SWFAddress and have a question. What is the best way to have some buttons that add their behaviour to the history list and some that don’t?
    Here is a simple version of a project with 3 buttons. How would you modify this to make one of the buttons NOT add it’s behaviour to the hisory list? (I have tried a few things without much luck)

    import SWFAddress;
    import SWFAddressEvent;

    btnPage1.addEventListener(MouseEvent.CLICK, turnPage1);
    btnPage2.addEventListener(MouseEvent.CLICK, turnPage2);
    btnPage3.addEventListener(MouseEvent.CLICK, turnPage3);

    function turnPage1(e:MouseEvent):void {
    SWFAddress.setValue(”page 1″);
    }
    function turnPage2(e:MouseEvent):void {
    SWFAddress.setValue(”page 2″);
    }
    function turnPage3(e:MouseEvent):void {
    SWFAddress.setValue(”page 3″);
    }
    SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

    function handleSWFAddress(e:SWFAddressEvent) {
    copyText.text = SWFAddress.getValue();
    }

    By fisheye on Sep 3, 2008

  26. This was just the tutorial I was looking for! Simple and to the point, all worked well. Thanks so much!

    By Harry on Nov 15, 2008

  27. Hi Nieme or Thomas - Setting the WMODE to transparent fixes the disabled browser address field? Where do you set WMODE?
    Thanks

    By Harry on Nov 15, 2008

  28. I’m new to as3 and swfaddress. I tried following the tutorials from asual and this site, but to no avail. Can anyone help? Here’s my code:

    //imports
    import SWFAddress;
    import SWFAddressEvent;

    // 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) {
    return ‘YBEC Website’ + (title != ‘/’ ? ‘ / ‘ + toTitleCase(replace(title.substr(1, title.length - 2), ‘/’, ‘ / ‘)) : ”);
    }

    // SWFAddress Actions
    function onHomeClick(e:MouseEvent):void {
    SWFAddress.setValue(”/home/”);
    }
    function onInfoClick(e:MouseEvent):void {
    SWFAddress.setValue(”/info/”);
    }
    function onSchoolsClick(e:MouseEvent):void {
    SWFAddress.setValue(”/schools/”);
    }
    function onEmailClick(event: MouseEvent) {
    var request:URLRequest = new URLRequest(”http://mail.yellowbreeches.org”);
    navigateToURL(request);
    }
    function onGalleryClick(e:MouseEvent):void {
    SWFAddress.setValue(”/gallery/”);
    }
    function onContactClick(e:MouseEvent):void {
    SWFAddress.setValue(”/contact/”);
    }
    function onAboutClick(e:MouseEvent):void {
    SWFAddress.setValue(”/about/”);
    }
    function onPrivacyClick(e:MouseEvent):void {
    SWFAddress.setValue(”/privacy/”);
    }
    function onTermsClick(e:MouseEvent):void {
    SWFAddress.setValue(”/terms/”);
    }

    // SWFAddress handling
    function handleSWFAddress(e:SWFAddressEvent) {
    try {
    if (currentFrame == 1 && e.value == ‘/’) {
    play();
    } else {
    gotoAndStop(’$’ + e.value);
    }
    SWFAddress.setTitle(formatTitle(e.value));
    } catch(err) {
    gotoAndStop(’$/error/’);
    }
    }
    SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

    home_btn.addEventListener(MouseEvent.CLICK, onHomeClick);
    info_btn.addEventListener(MouseEvent.CLICK, onInfoClick);
    schools_btn.addEventListener(MouseEvent.CLICK, onSchoolsClick);
    email_btn.addEventListener(MouseEvent.CLICK, onEmailClick);
    gallery_btn.addEventListener(MouseEvent.CLICK, onGalleryClick);
    contact_btn.addEventListener(MouseEvent.CLICK, onContactClick);
    about_btn.addEventListener(MouseEvent.CLICK, onAboutClick);
    privacy_btn.addEventListener(MouseEvent.CLICK, onPrivacyClick);
    terms_btn.addEventListener(MouseEvent.CLICK, onTermsClick);
    schools2_btn.addEventListener(MouseEvent.CLICK, onSchoolsClick);
    stop();

    By Wes on Dec 7, 2008

  29. hey thanks for the quick tutorial. I just checked out your example and it appears you have the same problem I did, Ie- the browser back/fwd buttons dont work. I dont know if you found a fix for it but I have been going nuts with it. I thought i had mine because the address bar loads the addresses but then i saw the back/fwd buttons dont work.
    good luck and thanks!

    By corey on Jan 30, 2009

  30. Hey!
    Gimme link for downloading XRUMER 5 warez!
    Thank you…
    Very-very much.
    I’m so need this program for promote my website!!! This software is the best thing for online promo and mass posting, you know…

    And, dont send me XRumer 2.9 and XRumer 3.0 - that versions are too old!

    P.S. Google cant help me((((

    By XRumerMonstroZ on Mar 12, 2009

  31. dude, thank you for having these old versions of swfobject and swfaddress. I have spent no joke all of my work day trying to get my oop site to reconize the back foward buttons on the browser. To say the least I was going mad. I came across this one and only oop example and figured that my code is not the problem. So once again, thanks!

    By Fredwhy on Jul 28, 2009

  32. You know, I didn’t even see Casper’s comment when I made mine (how could I miss that?). Sorry Casper, you had it first!

    By Zashkaser on Aug 5, 2009

  33. Welcome

    By viktorik on Sep 7, 2009

  34. Hello iam trying to make this work but i have a big problem, when i put to go to te correct page like http://www.abc.com/#/contact this dont work why?

    By ss on Sep 18, 2009


  35. By troubleshooting-spb on Sep 26, 2009

Post a Comment

levitra and sperm count online rx phentermine recreational use of xanax drugs used to treat bipolar disorder soma discount medicines for bipolar disorder discount xanax buying viagra prescription clomiphene effects levitra alcohol buy cialis canada medication levothyroxine phentermine florida antidepressant pill high levitra spray buy echinacea viagra soft tabs california levitra vardenafil hcl prescription flomax drug gabapentin allergies in cats buy zebeta asthma attack treatment female viagra uk zolpidem diazepam purchase online info soma viagra price buy rhinocort cialis day next rhinocort cheap depo provera and menopause buy viagra online ultram cheap online prilosec nexium express pharmacy services discount generic cialis rimonabant with no prescription xanax online overnight shipping anafranil pulmonary hypertension treatment viagra uk order vermox tablets celexa success drug valsartan ultram effects quit smoking drugs ovulation clomid imipramine side effects use clomid metronidazole dose viamax power discount best price lincocin gay viagra propecia generic cialis liquid natural remedies for allergies luvox ocd allopurinol dosage ambien 10 mg nizoral online coupon zyrtec tramadol money order anti depressant list phentermine 37.5mg tabs anxiety attacks buy ropinirole order uroxatral easy way to stop smoking xanax overnight shipping prescription phentermine phentermine pill online discount order viagra jelly chronic asthma treatment online ambien without a prescription how to increase sperm count penis enlargement pill product valium 5mg cleocin zyprexa levitra professional overnight delivery emsam manufacturer of revatio estradiol ativan treats anti depressant effexor viagra soft tablets propecia merck tramadol fast impotence therapy alprazolam xanax tramadol effects xanax online mexico asthma inhalers loratadine medicine buy progesterone generic ativan buy erythromycin without a prescription zyrtec and benadryl levitra viagra online no prescription soma phentermine 37.5mg overnight shipping cialis ambien discount prevacid 30mg sams club pharmacy ear infection amoxicillin pharmacy lipitor price of cialis treating high uric acid manufactures of viagra cialis levitra online hoodia effective levitra sales discount anxiety drugs benfotiamine viagra free samples phentermine 90 pills gerd natural cure male enhancement drugs celebrex discount what is zyrtec viagra viagra anti anxiety medications purchase online what is robaxin for yasmin side effects gabapentin side effects canadian pharmacy no prescription cytoxan side effects valium dosage order zanaflex cymbalta anxiety cialis free samples allergy tablets cefdinir antibiotic purchase nolvadex inderal klonopin xanax overdose does diflucan phenergan 25mg cialis reaction pill actos hoodia canada cialis 5 sex stamina anxiety and zoloft facts valium express pharmacy services hoodia slim buy ashwagandha drug alprazolam seizures lamictal viagra effects on women
talk of modern-carpentry is proudly powered by many kinds of open source software. all contents are copy-left up to you to do what you want with them