JavaScript Tutorial - Flash and Location Targets

The Problem: This client uses additional third party Internet services (i.e., Cars.com, KBB.com) . These services are typically placed in framed pages. Visitors move through numberious pages on the third party site. The client wants the visitor to be able to click a button at any time and return to the previous page and in this case, previous means the client's page ahead of the third party framed pages.

Flash was used to build a simple, failsafe menu that would work with all pages and fit in the framed area available for the menu. As this menu sometimes had to fit in a frame, flyout DHTML and Javascript based (Fireworks MX) menus were not acceptable as most would extend beyond the frame. Plus the massive amounts of code would creat problems for our search engine optimization. While most links could be simple getURL calls and straight forward, two links became tricky. One was the SIMPLE and standard Previous Page button which behaves like the browser's back button. The second was any link that called frames with dynamic data. Both of thse needed special handling. First I show how the 'Previous Button' was handled then the dynamic data button.

Mac Developers: Macintosh Internet Explorer does not have a 32 bit version of either Live Connect or ActiveX. It is therefore not possible to have scripting communication with Flash movies. This has not changed in Internet Explorer 5.0, and attempting to send JavaScript commands with FSCommand actions will not work, nor will attempting to control the Flash Player with JavaScript. (Macromedia 6/1/2000 Reference - Notes)

The Std. Previous Page Button

Typically a Previous Page button can be made using a link something like:

Unfortunately, one cannot just use JavaScript within Flash. But Flash will pass infomration to a browser using the fscommand. The fscommand sends information to a special Javascript embeded in the page by Flash. The function within the script is typically named (flashFileName)_DoFSCommand(command, args). One can then modify the script to meet their needs.

Setting Up for the FSCommand
In Flash (MX) one builds a button. There needs be nothing special about this button so I'll skip those steps. There are a couple of differences. Rather than using the getURL command to create a link, we will use fscommand. To get the fscommand working one needs to change the Flash Publish settings. The HTML settings need to be changed to embed the ?_DoFSCommand() script. See the image to the right.
Insert an instance of a button in your Flash menu/movie, switch to Action Script just as you would to insert a getURL command. Instead, insert fscommand. The command allows for two arguments to be passed. For this situation we only need one. In this example the image shows I used the text string 'goBuild'. Pretend it says 'history.' If you are creating your own as you follow this, enter a string that has meaning for you. Keep it simple, one word. The image shows an example of the action script. This completes the Flash side.

Setting Up the HTML Side

Publish your movie and have it generate the HTML code. Open the page in code view (I am assuming you are using Dreamweaver MX). Search the code for "DoFSCommand." You should find something like:

The comment "Place your code here..." is where the script code will go. If you have more than one Flash movie in the page, be sure you have the correct script. In this script the "Menu_std02a" is the name of my Flash movie.

As we will be passing different types of buttons to this command we need to have it distingush between them and take the appropreiate action. For the 'Previous' button example above I used the fscommand argument 'history'. You need to use whatever value you decided on. In the following, remember, we are pretending I used 'history' within Flash for the fscommand. So then, this is the code I added to make the 'Previous Button' work.

That is it. Your buttom should work.

Live Data Button with a Frames Hassle - top.location.href

Now we need to create a button that will accept dynamic or live data and co-exist with frames. I need for the button to be able to tell if it is a frame and if so make sure it opens in the _top window rather than loading a page in the small menu frame. I also need to pass my framed pages a variable telling them which page to return to when the vistor clicks 'Return.' I added the following code to the previous example.

Within Flash I used another button and assigned another fscommand. In this part of the example the fscommand within Flash is 'goBuild.'

Next I need to know what page holds my framed menu. The menu itself is in a framed page named LeftPan.asp. The ASP page has ASP code to set the value of 'thisURL' to the current URL for the page (i.e., "/LeftPan.asp"). While I have done that outside this script, one could do it within the script. The ASP code uses a Request.ServerVariables("URL") call. This call returns a page name without a path (e.g., /somepage.html).

With thisURL I know which page the menu is in. Now I need to know if that page is within a frame. I used top.location.href to get the top most page's URL. This call retruns a complet URL (e.g., http://somedomain.com/path/page.html). I need to split off everything but the path and page name to get the page's relative URL. To avoid counting things I found it simpler to to use two lines of code:

I set hostName in the ASP server side code (shown at the end of this page) using a Request.ServerVariables("HTTP_HOST"). It returns the domain name (e.g., domain.com). Next I peal off the remainder by finding where that string starts and how long it is. The result is stored in tURL and will contain something like /page.html or /path/morepath/page.html. Using this string the menu will now work in all pages regardless of where in the site tree they are located.

The final setup is to call the page and control the links target so the page loads in the _top of the page and not a frame. In a normal link one could use:

As far as I know there is no way to set the target in a Javasript using a location value. But there is the little known, at least to me, top.location.href which I set to the page I want to call, which forces the URL out of the frame. I am adding a QueryString value (sURL) to pass the path and page name (tURL) for the return button to use.

This should do it. I now have a button that figures out what ROOT page the menu is on and passes that to my return button. In the target pages I catch the QueryString("sURL") and set my button to use that link value.

©2002 Copyright - All rights reserved - A A Cates