This text is replaced by the Flash movie.

Posts Tagged ‘Flash’

Flash AS3 and Mootools Slimbox

February 26th, 2010
Most the site I made were based on library but when it comes to Overlay Images Scripts I prefer to use Light box v2 that also you can easily call with in AS3 using the ExternalInterface.call using a 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 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 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 .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 movies. So here how you implement the html code to make the work with . 
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:
required


You can also try milkbox

Download Source Code.

Tags: , , , , ,
Posted in Coding/Programming, Flash, Javascript, Mootools | No Comments »

Simple Tutorial Loading variables in Flash

November 21st, 2008

Simple and Easy to follow…

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

Tags: , ,
Posted in Coding/Programming, Flash | No Comments »

Friendster Overlay layout

June 18th, 2008

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

Friendster Overlayout Screenshot

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

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, Media paths on your HTML code should be the absolute path of the URL like "htt://yoursite.com/images/image1.jpg".

Script Positions

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 click "Edit  Profile", then "Click Customize"

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

1
2
3
4
5
6
7

<span style="overflow:hidden; height: 0px; visibility:hidden;" id="markloreto">
<b><font color="#ff6600"><!-- Your JS Path //--></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//layout/my_friendster.js and replace <!-- Your JS Path //-->

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

 

Tags: , , ,
Posted in Design | 4 Comments »

Categories

Archives