Advertisement
  1. Code
  2. Effects
Code

Quick Tip: Dim the Lights using Flash and jQuery

by
Difficulty:IntermediateLength:QuickLanguages:

In this Quick Tip you'll learn how to use Flash's ExternalInterface function and add a bit of jQuery to create a "light switch" which dims the web page. This is really effective for use with video players, slideshows etc.


Introduction

To create this light switch we will be using the ExternalInterface command in Flash. We'll 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.


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:


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.


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.


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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.