text:  create a call to a jQuery function which dims the webpage when the button is clicked. We'll then use Dreamweaver (or any html editing program) to create a webpage to display the effect.
  This is a very useful effect to add to Flash applications (such as video players) to enhance the user's experience and add a bit of extra functionality to your website.
  Step 1: Create the Button Background
  Create a new Actionscript 3 document and set it to 120 x 120px. Create a 100 x 100px square with a corner radius of 10.
  Fill it with a gradient of #BBBBBB to #999999. Use the gradient transform tool (shortcut key 'F') to rotate the gradient so the #BBBBBB is at the top instead of the right.
  Then select the background and convert it to a symbol (Modify > Convert to Symbol) and name it 'buttonBackground'.
  Step 2: Enhance the Button Background
  Go inside the button background movieclip by double-clicking on it and select the gradient. Then press CTRL+C to copy it, CTRL+SHIFT+V to paste it in the same location and then without deselecting it go Modify > Shape > Expand Fill and inset it by 2px. Change the gradient so it goes from #CCCCCC to #AAAAAA.
  Step 3: Create the Rest of the Button
  Go back to the main timeline and select the button movieclip then go Modify > Convert to Symbol and choose Button with the name lightsOff.
  Now go inside the button by double-clicking on it and create 2 new layers above the Background layer called Bulb and Text. Write "Lights Off" on the text layer. I used Arial Bold at 20pt and a color of #444444. I also created a simple light bulb using a circle for the top and some rounded rectangles for the base. I made the bulb a color of #5D5D5D.
  Go to the next keyframe for the "over" state of the button, make the text color #353535 and the bulb color #4C4C4C. Give the background a glow filter with these properties:
  - X and Y Blur: 10px
  - Strength: 100%
  - Quality: High
  - color: #666666
  For the down state just delete the glow from the background and rotate the background 180°.
  Step 4: Create "Lights On" Button
  Go into your library, right-click on the lightsOff button select "Duplicate" and name the new copy "lightsOn."
  Go into the
  lightsOn button and change the text to "Lights On" for all the states. Also, add some light rays around the bulb as shown in the pic below:
  Step 5: Write the Actionscript
  Go back to the main stage. Make sure you have one instance of
  lightsOff on the stage and one
  lightsOn movieclip. Give them instance names of "lightsOff" and "lightsOn" respectively. Center both of the buttons to the stage using the align panel. If you can't see it go to Window > Align (or press CTRL+K). Make sure you click the "align to stage" button down at the bottom of the panel.
  Open a new Actionscript file and write out the basic document class. If you don't know about document classes read Michael's Quick Tip to help you get started.
  Save the Actionscript file as "Lights.as" and then in flash set the document class of the .fla to
  Lights.
  This may look like a lot of code but once you read through the comments it's actually quite simple.
  package { import flash.display.MovieClip; import flash.external.ExternalInterface; //Import the class needed to call a jQuery function import flash.events.MouseEvent; //Import the class needed to detect a mouse click public class Lights extends MovieClip { public function Lights() { lightsOn.visible = false; //Make the lightsOn button invisible lightsOff.addEventListener(MouseEvent.CLICK, turnLightsOff); //Add a listener for a mouse click on the lightsOff button lightsOn.addEventListener(MouseEvent.CLICK, turnLightsOn); //Add a listener for a mouse click on the lightsOn button function turnLightsOff(e:MouseEvent):void { //Turn off lights function lightsOn.visible = true; //Make the lightsOn button visible lightsOff.visible = false; //Make the lightsOff button invisible ExternalInterface.call("lightsOff"); //Call the jQuery function 'lightsOff' } function turnLightsOn(e:MouseEvent):void { //Turn on lights function lightsOn.visible = false; //Make the lightsOn button invisible lightsOff.visible = true; //Make the lightsOff button visible ExternalInterface.call("lightsOn"); //Call the jQuery function 'lightsOn' } } } }
  Step 6: Create the Basic HTML Template
  Open up your text editor for creating HTML pages. In my case I am using Adobe Dreamweaver. Create a blank HTML document and save it as
  lightswitch.html in the same directory as your SWF. Then set up your document with the following code:
  <html> <head> <style type="text/css"> body { /* This is the main body tag */ text-align:center; /* Center all the content inside the page */ margin:40px 0; /* Give a margin at the top and bottom of the document so the content isn't at the very top or bottom */ } #lights { /* This is the container which holds the light switch */ position:relative; /* Set the position of the light switch to relative so it can be placed above the "dimming" layer */ z-index:500; /* Set the height on the Z axis to 500 which is above the "dimmed" layer */ } object { /* The object tag is what the swf files are held in */ outline:none; /* Set the outline of swf objects to none so when you click on it you don't get a border around the swf */ } #fade { /* This is the "dimmed" layer which fades in when the lights go off */ display: none; /* Set the display to none which hides the layer */ background: #000; /* Set the color to black */ position: fixed; left: 0; top: 0; /* Set the position to fixed so when the user scrolls it stays with them */ width: 100%; height: 100%; /* Set the width and height to 100% of the browser window */ opacity: .90; /* Set the layer's opacity to .90 which is 90% */ z-index:100; /* Set the height on the Z axis to 100 which is below the "light switch" layer */ } </style> </head> <body> <div id="lights"></div><!-- This is the container holding the flash file --> </body> </html>
  Step 7: Add the SWF to the Document Using swfobject
  I will be adding in the flash file using swfobject. If you don't know about swfobject then you can read Section 1 of Angel's tutorial about using swfobject to insert your SWF files into your HTML document. Once you have a grip on swfobject and have the necessary files you can continue on.
  You will need to add the following code inside the
  <head> tags in your HTML page. As you can see, you will need the swfobject.js and expressInstall.swf files in the same directory as your swf and html page.
  <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = false; var params = { movie: "Lights.swf", quality: "high", allowScriptAccess: "always", wmode: "transparent" }; var attributes = false; swfobject.embedSWF("Lights.swf", "lights", "100", "100", "9.0.0", "expressInstall.swf", flashvars, params, attributes); </script>
  Step 8: Write the jQuery Functions
  Now all we need to do is write the jQuery functions. These are two simple functions which will be called from the SWF when you click on the button.
  These also go inside the
  <head> tags underneath the swfobject code. As you can see I am getting the jQuery file straight from the google server.
  <script type="text/javascript" src=""></script> <script type="text/javascript"> function lightsOn(){ //When you turn the lights back on fade out the "dim" layer over 500 milliseconds and then remove it $('#fade').fadeOut(500,function() { $("#fade").remove(); }); }; function lightsOff(){ $('body').append('<div id="fade"></div>'); //When you turn the lights off add the "dimmed" layer to the page $('#fade').fadeIn(250); //Fade in the "dim" layer over 250 milliseconds }; </script>
  Conclusion
  Now if you test your HTML file you should see the light switch working like in the demo. This is a very useful effects for Flash video players when you want to enhance the user's experience on your site. It makes it much easier for the user to focus on the SWF.
  I hope you liked this tutorial and thanks for reading!
  Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly