ActionScript: Using Lightbox With Flash

I’m working on a portfolio site where I’m using Flash to display my work. When a user clicks on a link for a website that I designed, they will be taken to the actual website. But when the user clicks on the link for book cover or magazine, I want the large image to be displayed using lightbox (A JQuery Plugin). The primary reason is that I want to use lightbox is because the Flash movie has a height of 225 pixels – not nearly enough to display a large image. Surprisingly, with the help of ActionScript’s ExternalInterface Class and JQuery, creating this functionality was easier than I thought.

The ActionScript

First I set up the Flash Movie using the ExternalInterface class. This class enables Flash to communicate with Javascript (and from Javascript to Flash).

?View Code ACTIONSCRIPT
package {
 
        import flash.dipslay.MovieClip;
        import fl.controls.Button;
        import flash.external.ExternalInterface;
 
        public class portfolio extends MovieClip {
 
                public function portfolio() {
                        var myButton:Button = new Button();
                        myButton.addEventListener(MouseEvent.CLICK, onBtnClick);
                        addChild(myButton);
                }
 
                private function onBtnClick(event:MouseEvent):void {
                        ExternalInterface.call("showLargeImage", "images/bookcovers/thisbook.jpg");
                }
        }
}

So in the constructor of my document class, I created a button. I added an event listener for the button click. When the button is clicked, I make an external call to a function named showLargeImage and pass it the path to the image that I want to be displayed by Lightbox.

The HTML page

On the html page where my flash movie resides, I first add links to JQuery and and Lightbox.

<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />

I then created a container to hold my image:

#myImage {
        float:left;
}

The image can be placed anywhere on the page:

<body>
<div id="myImage"></div>
</body>

I added the Javascript function that is called by the Flash movie in the head section of the page.

?View Code JAVASCRIPT
function showLargeImage(url) {
	$('#myImage').empty();
	$('#myImage').append($('<a></a>').attr('href', url).html('hello'));
	$('#myImage a').hide();
	$('#myImage a').lightBox();
	$('#myImage a').click();
}

First I remove everything from inside the myImage div. Then I create an a tag giving it a href attribute whose value is the url that I passed from the Flash movie. I then addded text. I can be anything because I hide the a tag on the next line. I guess I could have also hidden it using CSS.

#myImage a {
        display:none;
}

Next I call the Lightbox plugin and then simulate the click event.

That’s it. Lightbox displays the image as if it were called by clicking on a thumbnail on an html page. Fairly simple. With ActionScript’s ExternalInterface class (and JQuery), I do not have to be limited to a Flash-only interface. Enjoy

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks