Here’s a solution for those who wants to make prettyPhoto, Lightbox or pretty much any other similar jQuery script launch from the Flash movie. This can be useful for many reasons. For example you can keep your videos on youtube or vimeo and embed them in your site that’s made in Flash. That would be great, wouldn’t it?
I’m going to show you how to do it with prettyPhoto and once you understand the idea you can easily make this method work with Lightbox or any other similar script. In this example we will be launching prettyPhoto with embedded Vimeo video.
Since we can’t call prettyPhoto directly from Flash we will use some JavaScript trickery to make it work. The idea is to call a JavaScript function from the Flash movie that will initialize prettyPhoto with specific parameters.
First we make our Flash function. I assume you already have a Flash project open so let get to the code. Im my example I have a button instance on the stage with the name bButton. Open your actions panel and use this code:
ActionScript 2
import flash.external.*;
bButton.onPress = function () {
ExternalInterface.call("prettyLaunch","http://vimeo.com/4983930","my vimeo video");
}
ActionScript 3
import flash.external.*;
bButton.addEventListener(MouseEvent.CLICK, pressedButton)
function pressedButton(e:Event):void {
ExternalInterface.call("prettyLaunch","http://vimeo.com/4983930","my vimeo video");
}
ExternalInterface.call has three parameters – the first is the JavaScript function name, while others are parameters that we will pass to JavaScipt function. The second parametes is the embed code for our Vimeo movie. I kept it simple for demonstration purposes but you can use customized code from vimeo as well. The third parameter is the title that will be displayed in the prettyPhoto popup. That is all, you can publish the Flash movie now.
Now lets look at the structure of our HTML file.
First we need to create and empty anchor that will launch prettyPhoto, like so
<a id="prettyLink" href="" title="" rel="prettyPhoto"></a> Note that both href and title attribues are empty, that’s where we will use Javascript to change them dynamically later. We also give anchor a unique id=”prettyLink” so we can reference it.
JavaScript functions:
We initialise prettyPhoto with the standard call
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({showTitle:false});
});
Here’s our prettyLaunch function
function prettyLaunch(linkurl, title) {
document.getElementById("prettyLink").href = linkurl;
document.getElementById("prettyLink").title = title;
$("#prettyLink").trigger('click');
}
Let’s go over this in a little bit more deail. This is the function that we call from Flash. Two parameters in our empty anchor prettyLink are replaced with parameters we pass from the Flash movie.
document.getElementById("prettyLink").href = linkurl;
document.getElementById("prettyLink").title = title;
After we’ve done that we simply generate a jQuery click event for our empty anchor like so:
$("#prettyLink").trigger('click');
That’s almost it.
Now in your flash embed code you need to add two parameters wmode=”transparent” (that is needed so the Flash movie doesn’t display on top of prettyPhoto) and allowScriptAccess =”always” (that is require for Flash to be able to communicate with the JavaScript in the HTML page).
The full HTML page code
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flash prettyPhoto
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js?ver=2.9.2" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({showTitle:false});
});
function prettyLaunch(linkurl, title) {
document.getElementById("prettyLink").href = linkurl;
document.getElementById("prettyLink").title = title;
$("#prettyLink").trigger('click');
}
</script>
</head>
<body>
<a id="prettyLink" href="" title="" rel="prettyPhoto"></a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="50%" id="flash_prettyphoto" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="movie" value="flash_prettyphoto.swf" /><param name="quality" value="high" />
<embed src="flash_prettyphoto.swf" quality="high" width="100%" height="50%" wmode="transparent" name="flash_prettyphoto" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</body>
</html> Hope this helps
View the demo here or download source files
