Bookmarking in Flash: what can and can’t be done

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.

, , , , ,

  1. #1 by David R - October 1st, 2008 at 14:52

    Bookmarking is super simple, you don’t need to write any code at all. The user just has to click the ‘add bookmark’ button / menu in their browser.

    The reason there’s no built in code into flash, is that there’s no point. Why would I want to look around for a bookmark button inside every flash application or webpage, it will be different color, different places, etc, when I could just use my built-in bookmark button that always works, always in the same place?

  2. #2 by zedia.net - October 2nd, 2008 at 15:58

    Well I can see many reasons to have code triggering the bookmarking window, you might, for instance want to put emphasis on the fact that your flash application supports bookmarking you want to make it easy for the user by showing the “bookmark this page” button at the right time.

    I think there is a point to this.

  3. #3 by Stephane - October 16th, 2008 at 08:26

    I have another issue with bookmarking in IE.

    I would like, when in IE, to alter the url of the page being bookmarked before it is bookmarked.

    That is, when the user adds a favorite in IE using the IE menu, IE takes the url of the page somewhere, maybe in the DOM for what I know, and adds a newbookmark.

    What I would like is to change this url, at page onload time for example, so that when the user adds a bookmark, the url being bookmarked by IE has already been changed by me.

    Is this doable..? If so, mail me some tip at mittiprovence@yahoo.se

    Thanks!

    Stephane

  4. #4 by zedia.net - October 16th, 2008 at 14:17

    I don’t think you can do what you are tryng to do if the user press on the bookmark button in the browser; but if the user clicks in the bookmark button from your application, you can definetly change the url that is being bookmarked because the first parameter of the window.external.AddFavorite function is the url you want bookmarked.

  5. #5 by Fernando Trindade - November 20th, 2008 at 11:10

    Hello

    @David R.

    Well David, you’re not seeing the big picture here.

    “What if” we want to bookmark a certain movie playing from a playlist?
    If you bookmark the page, it would bookmark the player itself, not tha specific movie…

    I can passa a var to the html saying player.php?thismovie=[pathofthemovie] to force the player to play THAT movie..
    but it will not work IF I DON’T GIVE IT…

    bah…

  6. #6 by Billigflüge - December 19th, 2008 at 10:12

    Well it works wit IE, but can’t get it working with firefox. And that that is my prefered browser… when i try to bookmark a certain point/part on a flashpage it still loads the page itself when i try to load the bookmark… are there any differents between the versions of FF? I’m currently using the latest build of FF3

  7. #7 by LukeMack - March 16th, 2010 at 15:08

    @zedia

    Are there parts of this tutorial article missing?

    quote: 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….

    I can’t see the function?

    Sorry – im a noob.
    Luke

  8. #8 by LukeMacK - March 16th, 2010 at 17:49

    Hi, here’s a follow up to my earlier post.

    It took me hours to work this out so I figured it was worth putting online to let people know!

    Make sure you have the following in your tag:

    id=”myMovie” allowScriptAccess=”always”

    It doesn’t matter what the id is, it just has to have one for some reason to work.

    Make sure you also add script access to the tag:

    Finally do the same to your JavaScript that activates your swf, I use AC_FL_RunContent. So add:

    ‘allowScriptAccess’,'always’,'id’,'myMovie’,

    Then when you test in both IE8 and FF3 it should work great. I’ve not tested in safari and I’m not expecting it to work in opera – but it works.

  9. #9 by EdwardKing - January 12th, 2011 at 05:05

    Your article ‘Bookmarking in Flash: what can and can’t be done’ is very well,I’m happy with it! Could you tell me how to set homepage in Flash AS3? I search google,but I don’t find any answer.Could you help me?

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.