Call ThickBox from within Flash

Articles

Call ThickBox from within Flash

April 03, 2007 (flash, thickbox)

Introduction

This document discusses how to invoke the ThickBox (jquery.com/demo/thickbox/) from within a Flash movie. This article assumes that you know a little bit already about using ThickBox and only lists the steps to making it work inside of Flash.

Simple Example

The first step is to make sure that an anchor tag call to ThickBox works properly. Below you will find a very simple html page that calls out to thick box. You will need to have the ThickBox files in place as well as a test image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/thickbox.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/css/thickbox.css" title="standard">
</head>
<body>
<a href="/images/test_image.jpg" class="thickbox">test image</a>
</body>
</html>

This example html page provides a link with class="thickbox" that opens the sample image in a ThickBox. The includes for the javascript and css file are also important aspects and will remain in the header of the file throughout the article.

ThickBox.js Modification

ThickBox works by adding a JavaScript click event to every anchor tag it finds with a class of thickbox. To specify that the thickbox javascript should be called directly it is necessary to create an additional function in the ThickBox.js file. This function will emulate the dynamically created functions that are usually added to each anchor tag. The following code block lists the new function that should be added to the ThickBox.js file.

function TB_special(pi_href){
	// get caption: either title or name attribute
	var caption = this.title || this.name || "";
		
	// get rel attribute for image groups
	var group = this.rel || false;
		
	// display the box for the elements href
	TB_show(caption, pi_href, group);
}

The function is very similar to the function attached to the anchors. It lacks the event variable, includes a new pi_href variable and removes the event.preventDefault(); and this.blur(); lines. Also, the destination of the final line is modified to direct to the pi_href variable.

Now it is possible to call ThickBox directly from an anchor tag using <a href= "javascript:TB_special('/images/some_image.jpg')"> new test image</a>. This anchor invokes the new function and passes it the location of the asset we want in the ThickBox. At the end of our new function, ThickBox takes over as normal and carries on as usual.

Calling the JavaScript from Flash

The next step is to perform the same javascript call from within Flash. Create a new Flash movie (at least Flash 8). Add a button component to the stage and name it alert_butn. In the first frame of the movie add the following actionscript.

import flash.external.ExternalInterface;

alert_butn.clickHandler = function() {
   ExternalInterface.call("TB_special" , "/images/test_image.jpg");
}

This actionscript uses the new ExternalInterface api to perform the javascript calls. It attaches a click event to the alert_butn button and tells it to call the TB_special function with the parameter '/images/test_image.jpg'.

Publish the flash movie. The swf needs to be put in the same directory as the test html file. As well, the html file from Flash needs to have the object/embed copied into the test movie. The following code blocks shows the code to be added to the test html file.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 
width="200" height="100" id="tb_test" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent">
<param name="movie" value="tb_test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<embed src="tb_test.swf" quality="high" bgcolor="#000000" width="200" 
wmode="transparent" height="100" name="tb_test" 
align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

The key element of the object/embed code is the inclusion of the <param value="transparent" name="wmode" /> parameter and the wmode="transparent" attribute of the embed. This allows flash to flow underneath html where as it usually has the highest z-index of any object in the page.

Clicking the button in the flash movie will now open the ThickBox with the content. The Flash movies calls the javascript function in the test html page and the javascript function calls thickbox with the pi_href variable. ThickBox will take that href and display the content over top of the Flash because of the added parameters in the Flash object/embed code.