Dim Light Effect in Actionscript 3.0

To achieve a “dim light” effect on your HTML page, called from a Flash project – lets say a video player, all you have to do is to use the ExternalInterface class and some JavaScript coding.

The ExternalInterface class is an application interface that enables communication between Flash Player and an HTML page with JavaScript.

In your Flash application just use:

import flash.external.ExternalInterface;

ExternalInterface.call("LightOff()");
ExternalInterface.call("LightOn()");

And in your HTML file use:

<html>
	<script src="jquery-1.4.2.min.js"></script>

	<style type="text/css">
		#lightbox
        {
			background-color:#000;
			filter:alpha(opacity=90);
			-moz-opacity:0.90;
			opacity: 0.90;
			height:100%;
			width:100%;
			position:fixed;
			top:0;
			left:0;
			display:none;
			z-index:1;
		}
	</style>
	
	<body>
	      <script language="javascript"> 
			function LightOn()
			{
				$("div#lightbox").fadeOut("slow");
				$("#lightsOn").fadeOut("slow"); 
				$("#lightsOff:hidden").fadeIn("slow"); 
			}
			
			function LightOff()
			{
				$("div#lightbox:hidden:first").fadeIn("slow");
				$("#lightsOff").fadeOut("slow"); 
				$("#lightsOn:hidden").fadeIn("slow"); 
			}

	       </script> 
		<div id="lightbox"></div>
        <div id="content"></div>
	</body>
</html>
Advertisements

3 thoughts on “Dim Light Effect in Actionscript 3.0

  1. Pingback: Dim Light Effect in Actionscript 3.0 « [ The Dark Realm ] | Flash Designers

  2. Pingback: Dim Light Effect in Actionscript 3.0 « [ The Dark Realm ] « action script

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s