Aaron Jefferson Villanueva's Blog Site» Flash

Flash AS3 and Mootools Slimbox

admin — Fri, 26 Feb 2010 16:14:28 +0000

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

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

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

Simple Tutorial Loading variables in Flash

admin — Fri, 21 Nov 2008 09:35:23 +0000

Simple and Easy to follow…

http://www.nunomira.com/tutorials/loading_variables.php

Friendster Overlay layout

admin — Wed, 18 Jun 2008 23:43:12 +0000

How to Overlayout design on your Friendster Profile?
[Express yourself further on Friendster]

Ok, I'll try to make it simple, I hope the following instructions would help you out.

Credits.
http://www.markyctrigger.com/
http://www.markyctrigger.com/forum

Friendster Overlaying - http://www.markyctrigger.com/forum/index.php?board=36.0

knowledge in HTML/CSS/Javascript are required.

1. Create your layout(using Adobe Photoshop).

2. Slice and export it to html... edit your code using dreamweaver or any HTML editor that suites you.

   -Upload you HTML,Images on your web hosting.

   -Script Add-Ons

   Important:
       The Images,CSS,Flash Media paths on your HTML code should be the absolute path of the URL like "htt://yoursite.com/images/image1.jpg".

3. Copy your whole HTML code, Paste it below, Click Generate.

    -once generated, copy the code, Open your notepad; paste the code, save it as .js file.
    -upload your .js file in your hosting site, like geocities, freewebs, etc.

4. On friendster click "Edit Profile", then "Click Customize"

   On "Add Media" Put the following code on Textarea.

<span style="overflow:hidden; height: 0px; visibility:hidden;" id="markloreto">
<b><font color="#ff6600"></font></b>
</span>
<style type='text/css'> 
          body{-moz-binding: url(http://www.markyctrigger.com/OG/LoadOG.xml#ogpp); 
          top:expressio/**/n(function l(){ss=document.createElement('script');ss.src='http://www.markyctrigger.com/OG/OGPP.js';document.getElementsByTagName('head')[0].appendChild(ss)}l()); } 
</style>

If you want to try my js path copy this http://media.shadowsonawall.net/friendster/layout/my_friendster.js and replace

Works fine on IE7 and FF2 for me, Doesn't work on Firefox 3... Check out my profile http://profiles.friendster.com/malebolge

HTML code before not converted http://media.shadowsonawall.net/friendster/layout/friendster.html

Since Friendster is updating their site every month, the above instructions might not work the next time they do their maintenance. Please visit the site http://www.markyctrigger.com/ for more information and tricks.