Browser Control in Flash

Browser control – an overview

Flash runs very successfully when embedded in an html page displayed in a web browser. It can also access Javascript functions using the ExternalInterface class, these can be located in the html page that is loaded or in a separate JS file loaded by the html page.
Flash allows direct extensive control over the host browser, it can: -

Load html (or other format) pages into the browser
Load html (or other format) pages into frames or iframes within the current page

Using Javascript, it can: -

Open new browser windows with specified sizes and control types.
Close browser windows
Write to browser status bar (NB – this is subject to browser preferences and cannot be relied on).
Display browser alerts.
Call javascript functions

For a detailed discussion of Flash’s capabilities in this area, see the ExternalInterface entry in the Adobe online AS3 reference.

Example 1 – ActionScript Browser interface class

In projects that need to control a host browser, it often makes sense (unless the project is very simple) to have a single object that handles all the communication with the browser. This means that if we want to run with a different sort of browser or use different techniques for communicating with it, your application would not need to change – you would just make changes to the Browser Interface class. We do not need more than one interface – if data was involved, we might use the Singleton pattern as the basis for our interface, but since there is none in the present implementation, I have used a class which only has static elements – all access is through the Class itself.

Make a new movie and create 2 extra layers, naming them scripts, labels, and display.
Select frame 10 in all of your layers and then choose Blank Keyframe from the Insert menu.
Do the same for frame 20.
Select Frame 1 of the labels layer and then, using the Frame palette, give it the label init.
Select Frame 10 of the labels layer and give that the label main.
Lock the scripts and labels layers. Your timeline should look something like this: -

Set your stage size to 550 by 120.
Save your movie as web_menu.fla in a new project folder called browser_control
Choose New from the file menu and then select ActionScript File. This opens a new .as external script file – the only place you are allowed to create classes.
Carefully type the following: -

package { import flash.net.navigateToURL; import flash.net.URLRequest; import flash.external.ExternalInterface; public class BrowserInterface { // a class for communicating with a host browser // note: all elements are static // so no Constructor function is required // loads a web document into a frame (or other browser window) public static function loadIntoFrame(pageURL:URLRequest, destinationID:String):void { try { navigateToURL(pageURL, destinationID); } catch (er:SecurityError) { var erStr:String = "BrowserInterface : Security Error - not allowed to load "+pageURL.url; if(ExternalInterface.available){ showAlert(erStr); }else { trace(erStr); } } } // loads a web document replacing current page public static function loadIntoBrowser(pageURL:URLRequest):void { loadIntoFrame(pageURL, "_self"); } // displays a browser alert box public static function showAlert(myText:String):void { try { ExternalInterface.call("alert",myText); } catch (er:SecurityError) { trace("BrowserInterface : Security Error - not allowed to call alert "); } catch (er:Error) { trace("BrowserInterface : Error - browser does not support JS calls"); } } } }

Save the file as BrowserInterface.as in your project folder. Make sure the file name is exactly the same as the Class name.

We are going to use this object in a web menu project. We will create a picture-based flash menu bar which controls the loading of html pages into the main frame of a web page. We will also use our AssetManager class from last week’s session to load and hold the images.

Download the web menu files package into your project folder (right-click on the link).
Copy your AssetManager.as class file from the last tutorial into your project folder with all your other files.
return to Flash
Choose Insert > New Symbol… and then choose movieClip.
Create a simple rectangular shape which will be your placeholder.
Open the Info panel and set its size and registration point as follows: -

When you have done, return to the main timeline.
Select your new symbol in the Library.
Pick up your new symbol in the Library and drag it onto the stage three times to create three instances, something like this: -

Name your instances pic0_mc, pic1_mc and pic2_mc.
Select Frame 1 of the scripts layer. In the Actions panel type the following (you will need to change the image file names if you are not using mine): -

// script for init // make a new asset manager var pics:AssetManager = new AssetManager(this); // load 3 images pics.addAsset("./images/impact.jpg"); pics.addAsset("./images/iss.jpg"); pics.addAsset("./images/titan.jpg"); // make a links array var links:Array = new Array(); // put the links in the same order as the images are loaded links.push("impactPage.html"); links.push("issPage.html"); links.push("titanPage.html");

Select Frame 3 of the scripts layer and insert a blank Keyframe.
In the actions panel, type the following:-

// see if all the assets have loaded yet if (pics.loaded()) { // all loaded, go on this.gotoAndPlay("main"); } else { // not yet, wait for loading to finish this.gotoAndPlay(2); }

Select the frame actions for frame 10 of the scripts layer. Type the following: -

// script for main // load the pictures over the placeholders // use a loop rather than writing code 3 times! for (var i:int = 0; i<3; i++){ // get referencse to a picture and a placeholder var myPic:DisplayObject = pics.getAsset(i); var myClip:MovieClip = this["pic"+i+"_mc"]; // set size myPic.height=myClip.height; myPic.width=myClip.width; // add to display chain myClip.addChild(myPic); // set listeners myClip.addEventListener(MouseEvent.CLICK,clickListener); } // show an alert BrowserInterface.showAlert("Welcome to the menu"); stop(); function getClipNum(clipName:String):int{ // get the movie clip's number from it's name return int(clipName.charAt(3)); } function clickListener(ev:MouseEvent):void{ // open the appropriate page in the 'main' frame BrowserInterface.loadIntoFrame(links[getClipNum(ev.target.name)],"mainFrame"); }

Check your code syntax and close the Actions pane. Your movie is finished, we now need to generate the output files.
Select File > Publish Settings… - make sure they are as follows: -

Select File > Publish. Look in your project folder and check that you have all the following files (images should be in the images folder): -

To see the menu working, open the index.html file in your web browser.

You may notice that instead of opening pages in the frame, it opens a new browser window. This is because you are opening the file directly rather than from a web server.

To see the menu working properly, place the whole browser_control folder in the root folder of your machine’s web server.

On a Mac, this is in the Sites folder inside your home folder, check Personal Web Sharing is turned on in the system preferences under sharing. On a PC, you will need to check with the technician to see if IIS is enabled and where you should put files.

Further developments

Try and access your web_menu using a variety of browsers on various platforms, note the differences in functionality.
The method used here to associate links and images is clumsy and prone to error; can you think of ways to improve it?

This page was last updated on 31st October 2013