This text is replaced by the Flash movie.

Archive for February, 2010

Flash AS3 and Mootools Slimbox

February 26th, 2010
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>
Demo:
Flash required


You can also try milkbox

Download Source Code.