Most the site I made were based on mootools library but when it comes to Overlay Images Scripts I prefer to use Light box v2 that also you can easily call with in Flash AS3 using the ExternalInterface.call using a bridge which is available for download - flashlightboxinjector unfortunately this is base on jQuery library so I tried to find a "Lightbox" similar Overlay Image function that has available javascript that I can call within Flash AS3 code so Slimbox I guess the easiest for me to follow, it got API documentation you can follow http://code.google.com/p/slimbox/wiki/MooToolsAPI.
So this is the code inside the flash movie
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | //Begin AS3 Script import flash.geom.* import flash.display.* //Mouse Events import flash.events.MouseEvent; //External Command import flash.external.*; //gradient background color var fillType:String = GradientType.LINEAR; var colors:Array = [0x330000, 0x333307]; var alphas:Array = [1, 1]; var ratios:Array = [0x00, 0xFF]; var matr:Matrix = new Matrix(); matr.createGradientBox(150, 20, 0, 0, 0); var spreadMethod:String = SpreadMethod.PAD; this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod); this.graphics.drawRect(0,0,250,200); //gradient background color //Add handler Event img1.addEventListener(MouseEvent.CLICK, onClickHandler01); function onClickHandler01(myEvent:MouseEvent){ //call Javascript Command ExternalInterface.call("Slimbox.open","/images/demon.png", "This Kanji means Demon"); } //End AS3 Script |
ExternalInterface.call("Slimbox.open","/images/demon.png", "This Kanji means Demon");
This simply calls the javascript Slimbox.open function that will open an Overlay Image also make sure that parameters that "wmode" = "transparent" and "allowScriptAccess" = "always"
I used swfobject to render my Flash movies. So here how you implement the html code to make the flash work with slimbox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- Slimbox Start //-->
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
<!-- Slimbox End //-->
<script type="text/javascript">
window.addEvent('domready', function(){ //for IE 7 problem
var soSlim = new SWFObject("slimbox.swf", "slimbox", "250", "200", "8", "#FFFFFF");
soSlim.addParam("quality", "high");
soSlim.addParam("wmode", "transparent");
soSlim.addParam("allowScriptAccess", "always");
soSlim.write("flashcontentSlim");
});
</script> |
Flash required
You can also try milkbox
Download Source Code.