uick Tip : Launch prettyPhoto from Flash

Quick Tip : Launch prettyPhoto from Flash

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.

View DemoDownload Source

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.

5 thoughts on “Quick Tip : Launch prettyPhoto from Flash

  1. nishant sapra

    hi,

    Can you please provide me with Flash CS3 file. I need it badly. Thanks a lot in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>