Archive for September, 2008

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.

, , , , ,

9 Comments


External Preloader; more complex cases

In my previous post I spoke about what would be my optimal external preloader, but I really covered only simple examples. In relations to external preloaders, there are 2 cases where it gets more complex. First, when you want to time you preloader’s animation with your main content’s animation and second, when you use FlashVars (variables passed from the HMTL to the SWF).

Timing a preloader animation with the main content animation

Sometimes you don’t want to start the loaded content as soon as it’s been loaded.  You want to leave time for the preloader’s exit animation to end or you want to morph your preloader with the main content to have some sort of continuity. In those cases, the external preloader has to call a method of the main content. That sounds simple but it actually isn’t. If you try to call a method directly like we used to do in ActionScript 2 the compiler will complain because it doesn’t know if the loaded content will have such a method. In order to solve this problem you will have to use interfaces. You can get more information about interfaces on this previous post of mine. Now that the loaded content is typed to an interface you will be able to call it’s method and the synchronization between the preloader and the content will be good.

Using FlashVars

FlashVars are really useful and a lot of times you might end up using them. The problem is that contrarily to ActionScript 2, in AS3 the root variable will refer to this SWF’s root, not to the entire application’s root. So from the loaded content you don’t have access to the FlashVars. You solve this problem the same way as we solved the preceding problem: by using an interface. In the first case, we mostly would have called a method without parameters like init() or something like that, but in this case the parameters will be the FlashVars. You might want to pass the root.loaderInfo.parameters.YOUR_VAR_NAME as a parameter or you might want to do some checking as to know if the parameter was passed or not. In your interface you will have to write down all the parameters you want to pass and what type (String, int, Number, etc) they are. Here is an example of how you could do it.

Here is the interface:

package com.zedia.interfaces{
  public interface IMain{
    function init(flashvars1:String, flashvars2:Number):void;
  }
}

Here is some of the code of that the preloader could contain:

import com.zedia.interfaces.IMain;
 
var mainContent:IMain;
function onLoadComplete(event:Event):void{ // this would be the function that the loader would call when the loading is completed
  mainContent = IMain(loader.content);
  addChild(Sprite(mainContent) );
  mainContent.init( String(root.loaderInfo.parameters.flashvars1),Number(root.loaderInfo.parameters.flashvars2) )
}

Here is some code of the loaded content:

package{
  import com.zedia.interfaces.IMain;
 
  public class Main extends Sprite implements IMain{
    public function init(flashvars1:String, flashvars2:Number):void{
      //do something with the FlashVars
    }
  }
}

As you can see in the preloader’s ActionScript, in order to add the content to the stage, you first have to cast it to Sprite. You will have to do this when you will want to have access to Sprite properties like x and y. I admit this is a down side of using interfaces but at the same time it solved both the problems of timing an animation and passing FlashVars to the loaded content.

, , , ,

18 Comments


The right way to do a preloader in AS3

I wanted to write this post for a very long time but Lee Brimelow beat me to it. But that is alright because he confirmed that the way I was doing my preloaders was a good one.

In AS2 we were used to seeing preloaders in the 2 first frames of a flash movie, but that technique didn’t work well when you used Classes and Library object exported for ActionScript. Even in AS2, I started making my preloader external. An external preloader is a swf that sole purpose is to load another swf.

I suggest you watch Lee’s video because it explains very well why you should use an external preloader and how to do it.

I think his method can be perfected to be even more memory and CPU efficient.

Let’s take a look at the code he uses:

var l:Loader = new Loader();
l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
l.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
l.load(new URLRequest("content.swf"));
 
function loop(e:ProgressEvent):void
{
  var perc:Number = e.bytesLoaded / e.bytesTotal;
  percent.text = Math.ceil(perc*100).toString();
}
 
function done(e:Event):void
{
  removeChild(percent); // was removeChildAt(0) but it make more sense this way
  percent = null;
  addChild(l);
}

That’s pretty simple and straight forward. Lee makes sure to remove assets he used for is preloader to free memory, which is good,  but if you really wanted to push things a bit farther here is what you would do:

var myMovie:Sprite;
 
var l:Loader = new Loader();
l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop, false, 0, true);
l.contentLoaderInfo.addEventListener(Event.COMPLETE, done, false, 0, true);
l.load(new URLRequest("content.swf"));
 
function loop(e:ProgressEvent):void
{
  var perc:Number = e.bytesLoaded / e.bytesTotal;
  percent.text = Math.ceil(perc*100).toString();
}
 
function done(e:Event):void
{
  removeChild(percent); // was removeChildAt(0) but it make more sense this way
  percent = null;
 
  myMovie = Sprite(l.content);
 
  addChild(myMovie);
 
  l.contentLoaderInfo.removeEventListener( ProgressEvent.PROGRESS, loop);
  l.contentLoaderInfo.removeEventListener(Event.COMPLETE, done);
  l = null;
}

First difference you might find is that I set the weakReference of the listeners to true. It doesn’t serve any purpose in this case but I think it is a good practice and a good habit to always put weakReference to true for you listeners.

The second thing you might see is that I don’t add the Loader to the stage. I don’t want to do that because I want to get rid of the Loader. It did it’s job, now I don’t want it using memory for nothing. So instead I created a Sprite called myMovie and I give it the content of the Loader. For this to work, the content of the Loader as to be a Sprite, but you can always change the type of myMovie to adapt to what you are loading. Once I gave myMovie the content I add it to the stage.

Now that the Loader handed off its package I can get rid of it. The first step to do so is to remove the listeners. Listeners take up CPU resources and in this case they will never be used again so I might as well remove them. Once this is done I set the Loader to null to ged rid of it. I could have just done that and not remove the listeners before because I used weakReferences and the GarbageCollector would have destroyed them, but why wait until then when you can do it now.

Well that was it, it is really just a little cleaner but I think that if someone was looking to push this further that’s how he would do this.

Do you know any better way of preloading?

, , , , , ,

50 Comments


zedia.net blog is one year old

Just a quick post to celebrate the fact that today, this blog turns one. I never really knew where this would lead but I can say that I have no regrets and that it blew all my expectations. What I am mostly surprised of is that at school I did not like to write at all and here I am writing weekly on my blog.

In term of stats I wrote 92 posts and received 148 comments.  Each month I receive about 10 000 visits for a grand total of 59 000 visits for the entire year. My goal was to reach 10k visits a month  by January 1st 2009, but I already reached that. I guess I will end up the year with about 12k – 13k visits a month.

In terms of posts,  I think the kind of content I am posting is changing a bit. At first I was mostly posting about some quick fixes I had found to solve a small problem. But more and more I am writing posts explaining some concept. I think that is good, but at the same time those articles take more time to write.

I want to write more than what I did in the last 3 months, because my posting had dropped to less than one a week… A lot of factors explain this, but my blog now stands in my list of priorities. As a matter of fact we might even see a much need redesign soon.

Well stay tuned as this will get better and better.

, ,

1 Comment


Using the Flex profiler with a Flash Website or Application

Ted Patrick posted on is blog a video of a presentation that was made at 360 Flex about the Flex Builder 3 Profiler by Jun Heider. It’s a pretty interesting talk about some unknown feature and tweaks of the profiler. One of the thing I learned that I am really happy to have found was the fact that you can use the profiler on a project that wasn’t made using the Flex Builder,  for example a project made in the Flash IDE. Here are the three simple steps you have to do.

In FLEX

  • Go to the Profiler view and in the Profile menu select “Profile External Application”
  • In the window that will prompt, select the radio button Launch the application manually outside Flex Builder

In Flash

  • All you have to do in Flash is to run the debug version of your movie (“Debug Movie” in the Debug menu)

That’s it, the Profiler will kick in for your Flash application.

Now I don’t see any reasons to use Flex anymore.

, , , ,

3 Comments