SWFAddress, SWFObject, and Flash
October 16, 2007 – 2:39 pm Tags: as2, as3, flash, open source, Subversion, SWFAddress, SWFObjectFor 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:
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!
42 Responses to “SWFAddress, SWFObject, and Flash”
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
hey brenden, sorry about that. I must’ve totally spaced-
try downloading the files now
By Thomas on Oct 17, 2007
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
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
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
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
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
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
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
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
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
Also, is there away to avoid that # (hatch/number sign) is added to the URL?
By Niemi on Dec 15, 2007
Can you please include the site.fla file?
thanks
By wes on Dec 20, 2007
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
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
I found a solution.
Setting the WMODE to either transparent or opaque does the trick.
By niemi on Jan 11, 2008
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
thanks jared, i’ll fix that up!
By Thomas on Jan 19, 2008
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
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
Hi webmaster!
By Kazelyrp on May 24, 2008
Hi webmaster!
By Kazelvle on May 24, 2008
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
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
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
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
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
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
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
Very concise tutorial. Just what I was looking for. Thanks!
By Bryn Bowman on Feb 18, 2010
Hi,could you pls mail me the source files for the example you posted so i can go through to have better understanding of how swfaddress works.I just got into webdesigning and want to keep abreast of latest developments.thanks
By JIBRONS on Aug 16, 2010
Hi, I am getting the error below (in Firefox) when the page first comes up.
Do you guys have any idea abou what this is?
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at wall_example_fla::MainTimeline/SWFHandler()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at SWFAddress$/_dispatchEvent()
at SWFAddress$/_setValue()
at SWFAddress$/_check()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at SetIntervalTimer/onTimer()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
By Ozzy on Nov 17, 2010
Kudos to that!
By reverse heart disease on Nov 10, 2011
Presque tout le monde aime les TN Nike Chaussures Si vous marchez dans l’artère, vous pouvez voir les gar?ons
By Chaussure Nike Dunk High on Nov 18, 2011
Someone essentially assist to make significantly posts I would state. This is the very first time I frequented your website page and so far? I amazed with the research you made to create this actual submit incredible. Fantastic task!
By internapoli city on Nov 20, 2011
Top-notch post it is really. I have been awaiting for this content.
By Off Lease One Owner on Nov 22, 2011
Hello there, I discovered your blog by means of Google while searching for a comparable matter, your website got here up, it seems good. I have bookmarked it in my google bookmarks.
By tutto gratis on Nov 23, 2011
I have been exploring for a little bit for any high quality articles or blog posts on this kind of area . Exploring in Yahoo I at last stumbled upon this site. Studying this information So i’m happy to exhibit that I’ve a very just right uncanny feeling I found out just what I needed. I most surely will make certain to do not omit this web site and give it a glance regularly.
By arcopedico on Nov 29, 2011
Nice post. I learn something tougher on completely different blogs everyday. It’s going to all the time be stimulating to read content from different writers and follow a little one thing from their store. I’d want to make use of some with the content material on my weblog whether you don’t mind. Natually I’ll give you a hyperlink on your web blog. Thanks for sharing.
By bestsellers on Dec 4, 2011
I’m extremely inspired together with your writing skills and also with the layout to your blog. Is this a paid subject matter or did you modify it yourself? Either way keep up the excellent quality writing, it’s uncommon to peer a nice blog like this one today.
By Scientific Calculator on Dec 8, 2011
You made some respectable factors there. I appeared on the internet for the issue and located most individuals will go along with with your website.
By contratar iberbanda on Dec 11, 2011
Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is magnificent, let alone the content!. Thanks For Your article about Using SWFObject and SWFAddress with Actionscript 3 | talk of modern-carpentry .
By gahwoiea on Nov 2, 2012