I’m going to start this post by telling that you cannot bookmark a web page just by using Flash. You either have to use javascript or user interaction if you want to bookmark a page from within a swf movie. That being said, it is not the only show stopper. Believe it or not, the way you can bookmark a page is different for every browser. For once I think Internet Explorer did something better by allowing a javascript function to open up the bookmarking window of the browser. I don’t know why Firefox doesn’t have such a function because I don’t see any down side to it (there is a way you can kinda bookmark a page, but then it opens up in the sidebar which is not good at all). I have also read that there is a way of bookmarking in Opera but I have followed the instructions and was never able to make it work.

How to do it

First off, if we are going to support Internet Explorer and Firefox, we first have to tell Flash which broswer the user is using. The way we do this is by having a javascript function that detect the browser. This function sets a variable that is passed to the flash as a FlashVars telling it if the user is using IE or not. Here is an example of such a function.

Bookmarking in IE

Than if the user is using IE you can call a javascript function using ExternalInterface to make the bookmarking window pop-up. This is the simple part, but there is a catch to it; if the user is using the debug version of the Flash Player and lets the bookmarking window up for more than 15 seconds, the Flash Player will throw an error because it is waiting for the javascript function to finish executing and has a timeout of 15 seconds. The way to counter the erro window to pop up is by surrounding the ExternalInterface call in a try catch statement. Here is the ActionScript 3 code that I used:

1
2
3
4
5
6

try{
ExternalInterface.call('addToFavorites');
}
catch (error:Error) {
//this is just so that if you leave the add to favorite window open for more than 15 seconds it doesn't send an error
}

Here is the javascript part of the code:

1
2
3
4
5

function addToFavorites(){
  if(window.external && document.all) {//ie
    window.external.AddFavorite(location.href, "Home Depot Canada - Redefine Floors");
  }
}

Bookmarking in Firefox

Well, in Firefox you simply cannot initiate any procedure for bookmarking so the best you can do is tell the user to press the shortcut to bookmark this page. So when the user will press your “add to favorites” button in Flash, this will pop-in  a window (inside the swf)advising the user to press Ctrl + D if they want to bookmark the page. This sounds like it should work because, really, there is nothing we are actually doing and we tell the user to do everything for us. But no this doesn’t work, there is this weird problem with focus relation between Flash and the browser. If you are interacting with an swf loaded by a browser (like pressing the ‘bookmark’ button), the Flash Player will be intercepting the keyboard keys that are pushed by the user. This is why sometime when you are on a Flash website the browser will just not respond when you press Ctrl + T to make a new Tab or Ctrl + D to add the page to your favorites. The Flash Player has the focus so in order to make this work we have to give the focus to the html part of the site. You can do this by using the focus() method of a input field. You first have to add a form in your html with just one input field and set the display style to none so that it won’t show. When the user clicks on your bookmark button you pop-in your message saying that the user can press Ctrl + D to bookmark the page and at the same time you call a javascript function giving focus to the not showing input field. That way the ctrl and d keystrokes will be caught by the browser and not the Flash Player.

Here is my AS code for it:

1
2

//do your code here to show the pop-in message telling the user to press CTRL + D
ExternalInterface.call('setFocus');

Here is the javascript

1
2
3
4

function setFocus(){
  document.getElementById("inputForBookmark").focus();
  //inputForBookmark is the id I gave the input field in the HTML with style display:none
}

You would have thought by now that bookmarking would have been made easier, but no you still have to go trough all this to get it to work from within flash. My solution for the problem doesn’t work in all browser; it doesn’t work in Opera and probably not in Safari, but at least it works in the two most popular browsers. If anyone out there knows a better way, I’d be happy to hear about it.