Category Archives: flash

Flash 8: Using ExternalInterface

Posted on by

Another cool new feature in Flash 8 is the ExternalInterface class. This is a new method of talking to the Flash player using Javascript. It works by registering functions inside the Flash movie that external Javascripts can call. It works in all the major browsers including Internet Explorer 5.0+, Firefox 1.0+, Mozilla 1.7.5+, Netscape 8+, and Safari 1.3+. Opera is left out because apparently it doesn’t support a new plugin scripting standard, specifically the ‘NPRuntime interface’ which was recently developed jointly by a bunch of browser and plugin makers. But I suppose one could argue that Opera 8 is not a ‘major browser.’

Here’s how it works (view ExternalInterface example page):

Set up a function in your Flash movie that you want to be accessible from Javascript.

function callMeFromJavascript(arg1, arg2, ...) {
    // do stuff
}

Then, to make the function available to the browser, you use the ExternalInterface class to register the name of the function:

var connection = ExternalInterface.addCallback("myFunctionId", null, callMeFromJavascript);

This registers the function in your Flash movie (callMeFromJavascript) as “myFunctionId” outside of the player. The null value is meant to be an object or movieclip that the ‘this’ keyword would reference in your function. If you don’t get this part it’s fine, for most uses you won’t need to use it and can just use null. Then, when you want to call the function from your Javascript, you would use this code:

var myFlashMovie = document.getElementById("flashId");
myFlashMovie.myFunctionId();

Notice that we use the ID of the Flash movie’s object/embed tag to call the internal Actionscript functions. This means that you must have an ID on your object tag and your embed tag. Now the catch to that is IDs on HTML elements are supposed to be unique in each page. The way we get around this is by using FlashObject. When FlashObject detects the Flash player, it also chooses whether to use an object tag or an embed tag to embed the movie in the page, and since it picks one or the other, it can put the ID on whichever tag it chooses and you won’t have any duplicate IDs on the page.

If you are not using FlashObject, you must use slightly different code to access the internal Actionscript functions. Here’s an example of what it might look like:

var myFlashMovie = document.embedName;

That’s it. Here’s my example page that sends some basic calls into the Flash movie. Unfortunately, I can’t release the source fla file until Flash 8 is released, but the code you need is all here, so you can get to work testing it out using Flash 7 if you just jump through some hoops to make a Flash 8 swf.

Also keep in mind that ExternalInterface is not just for HTML pages. Darron Schall has put together a little C# wrapper that can talk to Flash using ExternalInterface.

Using Flash Player Express Install with FlashObject

Posted on by

Please note that the newest version of FlashObject (1.3) changes how ExpressInstall is invoked when using FlashObject. Check out the FlashObject page for examples of using ExpressInsatll.

I’ve just updated FlashObject (now version 1.2.3) to support the new Macromedia Flash Player Express Install.

Macromedia recently introduced a new feature of the Flash Player called “Express Install.” This new method of upgrading offers a few very nice benefits:

  • No need to redirect your users to Macromedia.com to upgrade their player.
  • No need to rely on built in browser upgrade mechanisms. Internet Explorer users have become more and more wary of trusting the ActiveX install dialog box that pops up all the time and is generally associated with spyware or malware. While Firefox has an excellent plugin finder, other browsers that use the Netscape plugin architecture aren’t so fancy.
  • Nearly full control over the upgrade experience, which means no matter what platform your users are running, you will be able to walk them through a nearly identical install proccess.

Because of these benefits, Express Install is now my recommended upgrade method. When used in conjunction with FlashObject, it offers the best possible user experience for your users who need to upgrade their Flash player.

Here’s how it works:

First, add Express Install support to each of the swf files that may require an upgrade. These files need to be at least 215px x 138px in size. This is so the entire upgrade dialog can be seen by the user if the Express Install is triggered. It may also be a good idea to only place one swf with Express Install functionality on each page. This way users won’t be greeted with multiple upgrade dialog boxes and be forced to choose one (keep it simple for your users!).

I’ve included a new AS2.0 class in the latest version of the FlashObject script called ExpressInstall.as – this class contains all the code needed to invoke the Express Install process. All you need to do is place the script somewhere in your Flash class path, and place this code on the first frame of your swf:

if (ExpressInstall.init()) {
    stop();
}

The ExpressInstall.init() function returns true or false depending on whether the Express Install was started. If it starts, it returns true, if it doesn’t start, it returns false.

All other functionality should be moved to at least the second frame of the swf. This ensures that even someone running Flash player 6.0.65 can view the first frame of the movie and will see the upgrade dialog.

Next, you’ll need to upgrade your FlashObject script from 1.2.2 to 1.2.3 (you can get FlashObject here) and alter the embed code slightly only for the swf files that contain the Express Install code.

The new embed code should look like this (view example page):

var fo = new FlashObject("myswf.swf", "myswf", "400", "300", "8.0.22", "#fffff", true);

The only thing that changes is one more parameter after the color set to true. This does three things:

  1. Tells the FlashObject script that you want to allow for ExpressInstall. The script then gathers the needed information and passes that information into your Flash movie using flashvars.
  2. Checks to make sure the user has at least Flash player version 6.0.65 installed – this is the lowest version that supports the Express Install process.
  3. Then, if the user has at least version 6.0.65, but also has a version less than the required version specified in the FlashObject embed (in this example it was “8.0.22”), the Express Install process is started.

Once the install is completed, the installer launches a new browser window, and the user is redirected back to your original page with the new plugin.

And that’s it. You can grab the newest version of FlashObject with the ExpressInstall class here: http://blog.deconcept.com/flashobject/ or you can view an example page that uses this method.

UPDATE (08-18-2005): Macromedia recently updated the Express Install feature, and because of this, my ExpressInstall class was broken. I’ve just fixed it, however, and you can get the latest version by downloading the latest version of FlashObject here.

UPDATE (08-29-2005): If you are not using Actionscript 2, or are exporting your classes on a frame after frame 1, you can use this adaptation of my ExpressInstall class that Carlos Rovira wrote.

UPDATE (12-22-2005): If you are using ExpressInstall on your site, go tell Macromedia what you think about it.

The new Macromedia Flash Player detection kit

Posted on by

With the announcement of Flash 8 today, Macromedia also quietly pushed out their new detection kit. The detection kit has has been around for the last few versions of Flash, and usually changes with each version to include whatever the latest trends in Flash detection are.

It’s no wonder then, that the latest version uses Javascript as the suggested detection method. Unfortuntely, it’s not perfect. While it’s a good first try, it is greatly lacking in a few basic needs of most web developers. Here’s the issues I have with it:

  • Inline Javascript code (and lots of it) – Who wants to copy a bunch of Javascript and VBscript onto every single page that uses Flash? While it might be possible to move the Javascript into an external file, you would still have a small amount of VBScript on each page (or another external file to include). I’m not sure why they decided to leave in the VBScript when there are other reliable ways to create and test for ActiveX objects. Also: what happens if you need to upgrade the Javascript for some reason? While the code should be very futureproof, you never know when a bug might pop up, and you’ll be stuck editing all of your HTML files that have Flash movies included in them.
  • Tough to modify the code – It suffers from the same drawbacks as most Javascript embed techniques – placing tons of Javascript document.write() calls and writing out your object or embed tags to the page. This is a hassle to edit if you need to make changes, and makes it very tough for designers who don’t know Javascript to go in and modify attributes.
  • It’s not valid HTML or XHTML – Valid XHTML documents aren’t for everyone, but when you have clients specifically asking for them it’s nice to be able to deliver. The new detection doesn’t even come close to validating.

If you want to compare the new Macromedia detection to my FlashObject script, check out this new article that shows how to use it:

Best Practices for Flash Player Detection

Then compare the steps needed to get that working with using FlashObject:

  1. Include single .js file.
  2. Add a few lines of code (see example of bare minimum).
  3. Sit back, relax.

I think the choice is clear.

Now when you downloaded the new detection kit you may have noticed another folder hiding out in there with the name of “Express Installation.” This is Macrmedia’s new way of upgrading your Flash player without the need to go to macromedia and download the new plugin. I’ll be writing up a new entry soon that gives some tips and best practices on using this method in the very near future.

FlashObject 1.2

Posted on by

I’m pleased to announce version 1.2 of my FlashObject script. The big new addition is minor version detection and revision detection, so now you can detect versions like "6.0.65" if you like. I also got some advice from Toby Boudreaux, who provided tons of help in getting the code all fancied up and name spaced, so it shouldn’t collide with any other scripts on your websites now. We also went through and leaned out some features that weren’t being used much. Namely the fo.altTxt var and the extra line that included the bypass detection link. You can still bypass the detection just as you have been, but the script will no longer automatically write the alternate content at all (even if you manually override it like you could in v.1.1). If you have no idea what that last sentance means, just ignore it, as you probably weren’t using the feature anyway.

I’ve also given FlashObject a permanent home at http://blog.deconcept.com/flashobject/.

Here’s the full list of what has changed:

  • fo.write() now requires an element ID. In previous versions you could call write() with no parameters and the FlashObject script would write the Flash movie to the page wherever the script was placed on the page. This is no longer the case and now you must specify an element ID.
  • fo.altTxt no longer exists. You must now place all your alternate content or upgrade message in the div where your Flash content will be written.
  • fo.redirect no longer exists. When using FlashObject to redirect users to a separate upgrade page, you now specify the redirect url like this: fo.setAttribute('redirectUrl', 'http://www.example.com');

I highly recommend upgrading to this version. While I was adding the minor version detection, I found a bug that will cause Netscape plugin based browsers to fail the Flash detection once the major version gets up to two digits. That means it will work fine up to Flash 9, but then return 0 if the user has Flash player 10 (this is all assuming Macromedia keeps incrementing the version numbers, and that Adobe doesn’t change everything around when they take over).

So that’s it. This will probably be the last version update to FlashObject, since there isn’t much else I could add that would be useful to everyone. So go tell your friends about it – there’s really no reason you shouldn’t be using this to embed your Flash movies.

UPDATE: Dave Benjamin pointed out a flaw in the new detection checking function, and that has been fixed. I also fixed a very small issue with the version check that would cause it to fail if you had version 9.1.0, and the page required 8.2.0 (for example), so make sure you get the latest version.

UPDATE (07-27-2005): Matthew Richmond set me up with a better looking test file, that also shows the full page version much better, so the download / example pages have been updated.

UPDATE (08-01-2005): Just fixed a bug in the detection function that would throw an error when no Flash player was installed, thus casing the redirect to fail if you were trying to redirect users to an upgrade page. Thanks to Carl Wurtz for pointing that out. I also took the chance to update the ActiveX plugin detection code. No more VBscript in there (not even an execscript() call). New version number is 1.2.2 – make sure you have the latest version!