Flash 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.

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.

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.)

10. Here’s the final html file:

11. That’s it, hope you find this tip useful.