Thursday, August 21, 2008

SWFAddress: Back Button Not Working? I may know why...

I have been working with swfAddress today to incorporate into all of our future sites. Everything seemed pretty straight forward:

1. Use SWFObject... check.
2. Import swfAddress javascript... check.
3. Add a SWFAddressEvent.CHANGE handler that updates the SWFAddress title... check.
4. Create Buttons that set the SWFAddress value to new pages... check.

Upon testing it, the buttons would cause the address bar to change which would trigger the CHANGE handler and update the title of the page. So far so good. Now click the back button. DOH! The Address bar changed, but the title of the page did not... the CHANGE event was never dispatched.

After comparing files with the samples I eventually figured out it was because you need to make sure you set a Flash content id in the swfObject. The content ID is what the javascript uses to refer back to the Flash object. In hindsight this makes perfect sense and I feel like an idiot overlooking it. Hopefully this post will prevent you from making the same bonehead mistake.

37 comments:

Suisei said...

Thanks for that! I had looked everywhere for the answer.
I cant believe I overlooked something so simple!

cheers!

Ickydime said...

Glad I wasn't the only one :)

ImagicDigital said...

Thank you! I found your post a few days after struggling with this myself. Other users may also be interested in this post at Nobien, which further details another possible trip-up of the same type. If you're using SWFObject 2, be sure to call swfAddress.js before instantiating your actual swfObject.

VJ[???]Glasshopper[2007] said...

Great - thanks - I have been bugging with that for an hour or so - and could not work out why swfAddress was not targetting the correct title.

I bet many swfAddress problems could be solved by using this soloution. Make sure the id is set for the Flash content you wish swfAddress to target.

8dot3 said...

Perfect, searched for "swfaddress not working" and came across this. Thanks for posting it!

Anonymous said...

Thanks!!! Thanks!!! Thanks!!! Have no words to describe my gratitude! It`s works. Thanks!

Anonymous said...

ugh, i did it too!! Thanks for the help.

Anonymous said...

Thanks once again - made the same mistake - down the tubes3 hrs

abiyasa said...

Thanks a lot!! I am currently re-working my portfolio and face the same problem.

@ImagicDigital: I'm using SWFObject 2. Calling swfaddress.js right BEFORE calling any methods from swfobject solved my problems.

So, here's my code:
< script type="text/javascript" src="swfobject.js">< /script>

< script type="text/javascript" src="swfaddress.js">< /script>

< script type="text/javascript">
swfobject.registerObject(xyz...); < /script>

csmaller said...

ok, I am dying over here. Do you mean the Content Id as in : 123 12391293819 192312DFF ? or do you mean the id that is basically the name of the swf? where do you put it?

Ickydime said...

@csmaller
When you generate your swfObject, its under swfDefinition and is called "Flash Content Id".

Once you have it set and generate the HTML, you will have the following lines added to your script:

var attributes = {};
attributes.id = "PUT ID HERE";

Hope that helps.

csmaller said...

still doesnt work. the address bar works fine but when I click the back button it doesnt change the state back to where it was. Ive tried everything. i changed the swfobject Id to mine, moved around the JS, added alerts all over the flex app to no use, just weird. I attached the HTML, maybe its something basic that I overlooked.


//registering the Object in the JS header swfobject.registerObject("musicStore", "9.0.0", "expressInstall.swf");


//in body JS
var so = new SWFObject('musicStore.swf', 'musicStore', '100%', '100%', '9', '#869CA7');
so.useExpressInstall('swfobject/expressinstall.swf');
so.addParam('menu', 'false');
so.write('content');

Ickydime said...

I haven't seen the setup you are using before... but that doesn't mean it is wrong. I would make sure you are using the latest SwfObject and try using the SwfObject Generator. I quickly put in your code into the generator and it came up with something like the code below (I altered the script tags so I could publish this post and I added swfaddress BELOW the swfobject import.)

script type="text/javascript" src="js/swfobject.js" /script

script type="text/javascript" src="swfaddress.js" /script

script type="text/javascript"
var flashvars = {};
var params = {}; params.bgcolor = "#869CA7";
var attributes = {}; attributes.id = "MusicStore"; swfobject.embedSWF("musicStore.swf", "myAlternativeContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

/script

csmaller said...

ok, I got the latest version of swfObject, ran the wizard and inserted the data and it still doesnt work. I put text traces in the SWFAddress back/up/forward callers and its not getting to them. It has to be something to do with the js/html. it just has to. I am about to develop a drinking problem.

//script type=/text/javascript/ src="swfobject.js"//
//script type=/text/javascript/ src="swfaddress/swfaddress.js//script
//script type="text/javascript//
swfobject.registerObject("musicStore", "9.0.0", "expressInstall.swf");
//endscript
//endhead
//body
insert the object like normal

Ickydime said...

before you resort to drinking...

what is:
swfobject.registerObject(

i've only seen:
swfobject.embedSWF(

I would make sure you have an ID set. Unless "musicStore" is the id... if that is the case, then how is the swf being set?

cheers! ;)

csmaller said...

first of all, THANK YOU for at least throwing me a bone.
I put the code up on my testing server for you to look at:
http://www.coreysmaller.com/test/index.html
as you can see the address bar works but the browser back/fwd buttons dont change the state back. I am assuming historyManagement should not be on in Flex?

Ickydime said...

is that link correct? I see a nice snowman sitting in a blizzard wearing a white hat.... annnnnd i ran out of things white. But you get the picture :)

csmaller said...

arrghhh. try it in IE. for some reason Firefox and Safari both hate the code now.
...reaching for the bottle..

Ickydime said...

For getting it to show in firefox, safari... try adding this to your stylesheet:

#myAlternativeContent {
width:100%; height:100%; min-height:630px; min-width:1024px; position:absolute;
}

It has something to do with having your Flash file be 100% in the empty div that Firefox does not like. Haven't narrowed it down pass that.

As far as swfAddress goes. Your setup looks solid. Only question now is the Actionscript... Are you listening for the SWFAddressEvent.CHANGE?

csmaller said...

ah! well that took care of the style. thanks man. I put the project back up with viewSource enabled so you can see whats what. This time without the snowman with the white hat and white pipe.
www.coreysmaller.com/test/musicStore.html

i think maybe the event listener function should actually change the state? I thought history management did that for you?
once again, I cant thank you enough for your patience as the calm , assertive pack leader.

Wim Vanhenden said...

Hi Everybody,

I was having the same problem.
Back button not working and the change event was fired twice when you opened the page.

I switched to the 2.1 version instead of the 2.2 and the problems were gone...

Travis Anderson said...

This page was tons of help, glad I found it. My problem turned out to be that I needed to load SWFOBJECT first, then SWFADDRESS, then dynamic embedding using javascript.

Before then, it would work on page load, and would trigger the event with flash, for instance when clicking on a button, but no back/forward action.

I was using swfobject 2.1, swf address 2.2.

Swapping the script tags around solved it!

Skar said...

Dude!

You totally saved my day!
I noticed it didn't worked, did a Google-search and found this sollution.

Especially the following was very handy:

var attributes = {};
attributes.id = "WHATEVER_NAME_YOU_WANT";
//this name is never used ever any more - right?

So thanks again!

Anonymous said...

I'm having trouble with step 3. Can you show me how you added an handler please??

Ickydime said...

@Skar
Glad to help. That id is only used outside of Flash... such as javascript, so you can name it whatever you would like.

@Anon
Sure. For step 3 you add the listener similar to the following:
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);
Then you add the corresponding handler:

private function handleSWFAddress(e:SWFAddressEvent):void {
SWFAddress.setTitle(e.value);
}


Thats all you need for updating the title.

mrMajesty said...

Spot on with your answer. This saved me countless hours of debugging. THANK YOU!

Anonymous said...

thank you.

Leo said...

thanks

Anonymous said...

Life saver!

Daniel Goulding said...

I had the same problem with the external change events (browser back & forward & changing the url directly).

Turns out it was because it was running on my local file system. Running it on a web server solved the problem.

reelfernandes said...

Needing to load swfobject.js before swfaddress.js was something i missed too. Thanks for the blog & comments!

Laura said...

Thank you, I had 1 whole day wasted trying to solve this until I found your post!

Anonymous said...

Load swfobject.js before swfaddress.js! It is what missed me. Thank you, reelfernandes...

Anonymous said...

Thank you, works great!

Mazedude said...

Very helpful tip; it's amazing how many times you have to tweak that little ID in the object code for it all to sync up properly. This post saved me a lot of time. Thanks.

Anonymous said...

I think you may have broken it ?

Anonymous said...

Thanks, was having the same problem.

www.soundandvision.co.uk