Pop-up Detection with LocalConnection

Detecting whether or not a user has a pop-up blocker enabled or not has somewhat recently become more of a concern for designers and developers. Since these blockers do not announce their presence, it is logical to assume that the best way to detect the successful launch of a pop-up is to have the pop-up send a message back to the originating window. This can be done in a number of ways, but this tutorial will cover a method of pop-up detection using Flash's LocalConnection class.

LocalConnection can be thought of as an 'instant messenger' of sorts between the instances of Flash Player running on a user's computer. You will be using this class to establish a connection with the pop-up that you attempt to launch. Before you begin, you should understand that this form of pop-up detection is not perfect, it is based on the assumption that the pop-up will load in a timely manner after the launch button is clicked, and it assumes that the Flash embedded in the pop-up executes the first frame code in that timeframe.

Note:

If the first frame of the pop-up is too large (filesize), the code may take longer to execute.

The animation below is an example of the LocalConnection Pop-Up Detector that you will be constructing in this tutorial. When the launch button is clicked, it will attempt to launch a pop-up. The TextField below the button will then display the outcome: the pop-up either launched or was blocked. You may have to close or minimize the pop-up (or tab, if your browser is set to open new tabs instead of new windows) to un-obscure the original animation.

[ click the launch button to check for a blocker ]

This method of detection can be used with any sort of pop-up launching script. This tutorial uses a simplified method of launching pop-ups, as the focus of the tutorial is on what happens after the pop-up is launched. There are various tutorials elsewhere on Kirupa that deal with more complex methods.

Let's Begin:
You will be expected to have an intermediate understanding of ActionScript and the Flash IDE for this tutorial.

Download Partial Source

1. If you don't want to spend too much time setting up the necessary buttons and TextFields, download the partial sources above and skip to step iv. They do not contain any of the ActionScript necessary for the detector to work.
2. Open a new Flash document (120px by 100px) and create a rectangle with the rectangle tool. Select the rectangle and convert it to a symbol of the type 'MovieClip'. Give this MovieClip the instance name 'launcher_mc' by going to the Properties Inspector and typing it into the appropriate box.
3. Next, create a Dynamic Text TextField with the Text tool. The type of TextField and the instance name can both be changed in the Properties inspector. Give this field the instance name 'info_txt'.
4. Paste the following ActionScript into the Actions pane for the first and only frame in your movie (launcher.fla):

var announcer:LocalConnection = new LocalConnection();

var waitTime:Number = 3000;

var checkFrequency:Number = 500;

var timeInterval:Number;

announcer.confirmPop = function():Void {

info_txt.text = "Pop-Up Success!";

this.close();

clearInterval(timeInterval);

};

launcher_mc.onRelease = function():Void {

announcer.connect("popUpDialog");

info_txt.text = "Connecting…";

getURL("popUp.html", "_blank");

timeInterval = setInterval(this._parent, "timer", checkFrequency, getTimer());

};

function timer(startTime):Void {

var elapsed:Number = getTimer()-startTime;

if (elapsed>waitTime) {

clearInterval(timeInterval);

info_txt.text = "Pop-Up Failed.";

announcer.close();

}

}

5. That's it for this document. Save your document (give it any name) and create a new document.
6. Create a Static TextField and put any sort of filler text in. This text tells you that your pop-up has indeed launched and that Flash Player has loaded the first frame of your movie.
7. Add the following ActionScript to the first (and again, only) frame in your movie:

var responder:LocalConnection = new LocalConnection();

responder.send("popUpDialog", "confirmPop");

That's it! You're now ready to test your pop-up detector. Turn to the next page to see how the ActionScript you pasted functions.

1 | 2