In this Quick Tip, see how to launch prettyPhoto from a Flash movie by using the ExternalInterface class and the prettyPhoto API. In this example, we demonstrate how to open from a Flash movie a single image, a youtube video and a vimeo video with the prettyPhoto lightbox.
1. First download prettyPhoto files at http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ inside the Download Section.
Open the zip file and open the index.html file.
2. Modify it like beneath in order to begin with a fresh functional file.
<!DOCTYPE html>
<html>
<head>
<title>Launch prettyPhoto from Flash</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
#main { margin: 0 auto; padding: 30px; width: 500px;}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>
3. Create a new function that calls the open() function available in the prettyPhoto API.
function launchPrettyPhoto(urlContent, titleContent) {
$.prettyPhoto.open(urlContent,titleContent);
}
4. Now create a Flash file (AS3). Create 3 movieclips with instance name of “image_mc”, “youtube_mc” and “vimeo_mc”.
5. Create an “actions” layer and open the actions panel.
For each movie clip, set buttonMode to true and add a click event listener.
image_mc.buttonMode = true; youtube_mc.buttonMode = true; vimeo_mc.buttonMode = true; image_mc.addEventListener(MouseEvent.CLICK, onClickImage) youtube_mc.addEventListener(MouseEvent.CLICK, onClickYoutube) vimeo_mc.addEventListener(MouseEvent.CLICK, onClickVimeo)
6. To set a Flash-Javascript communication, we use the ExternalInterface class. It allows us to invoke the JavaScript function that we’ve created earlier inside actionscript.
function callPrettyPhoto(url:String,title:String):void{
ExternalInterface.call("launchPrettyPhoto",url,title);
}
7. Finally create the following functions that handle the click event for each movie clip:
function onClickImage(e:MouseEvent):void {
callPrettyPhoto("http://www.files.riacodes.com/flash_prettyphoto-from-flash/images/6.jpg","Image demo");
}
function onClickYoutube(e:MouseEvent):void {
callPrettyPhoto("http://www.youtube.com/watch?v=YdaMGcOyfjM","Youtube Demo");
}
function onClickVimeo(e:MouseEvent):void {
callPrettyPhoto("http://vimeo.com/24315423","Vimeo Demo");
}
8. We’ve finished the Flash part, here’s the final code. Publish your flash movie.
import flash.external.*;
import flash.events.MouseEvent;
image_mc.buttonMode = true;
youtube_mc.buttonMode = true;
vimeo_mc.buttonMode = true;
image_mc.addEventListener(MouseEvent.CLICK, onClickImage)
youtube_mc.addEventListener(MouseEvent.CLICK, onClickYoutube)
vimeo_mc.addEventListener(MouseEvent.CLICK, onClickVimeo)
function callPrettyPhoto(url:String,title:String):void{
ExternalInterface.call("launchPrettyPhoto",url,title);
}
function onClickImage(e:MouseEvent):void {
callPrettyPhoto("http://www.files.riacodes.com/flash_prettyphoto-from-flash/images/6.jpg","Image demo");
}
function onClickYoutube(e:MouseEvent):void {
callPrettyPhoto("http://www.youtube.com/watch?v=YdaMGcOyfjM","Youtube Demo");
}
function onClickVimeo(e:MouseEvent):void {
callPrettyPhoto("http://vimeo.com/24315423","Vimeo Demo");
}
9. Return to you index.html file to embed the swf file. Inside the “main” div, insert the following code: (set the wmode parameter to transparent so that flash doesn’t display on top of prettyPhoto.)
<object width="500" height="200" data="prettyphoto.swf" type="application/x-shockwave-flash"> <param name="src" value="prettyphoto.swf" /> <param name="quality" value="high"/> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent"/> </object>
10. Here’s the final html file:
<!DOCTYPE html>
<html>
<head>
<title> Launch prettyPhoto from Flash</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
#main { margin: 0 auto; padding: 30px; width: 500px;}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
function launchPrettyPhoto(urlContent, titleContent) {
$.prettyPhoto.open(urlContent,titleContent);
}
</script>
</head>
<body>
<div id="main">
<object width="500" height="200" data="prettyphoto.swf" type="application/x-shockwave-flash">
<param name="src" value="prettyphoto.swf" />
<param name="quality" value="high"/>
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent"/>
</object>
</div>
</body>
</html>
11. That’s it, hope you find this tip useful.
hi,
Can you please provide me with Flash CS3 file. I need it badly. Thanks a lot in advance.
thanks!!!
This API cannot lead to a web page.
It must be a media content (img, swf, youtube video …)
Sorry, I’ve just found out : you need to add in the url for a web page ‘&ajax=true’
What should i do if i want make an diaporama, add more than just one image? thanks