Creating a SPOTLIGHT effect in FLASH R. Durfee, Instructor

In this activity we will use Flash to create the effect of a spotlight being moved across our image. In the Flash animation above, you can drag your mouse around to see different parts of the image as though you are shinning a spotlight/flashlight on the image.

CLICK HERE to watch Mr. Durfee's video instructions.

Here is the Actions Script 2.0 code you will need to type into Action Script Screen or Copy and Paste. Note the name spotlight, when using Action Script it is imperative (necessary) you use the exact symbol name to match what you type into Action Script 2.0 code.


Save your file and name it U: spotlight

Below is this assignment written out, as well.

1. In Flash go to a <Create New> and click on <Action Script 2.0>. In your <Properties> change the size of your stage to 220 pixels by 220 pixels.

2. Import the file the_beatles.jpg from the <Shared Drive> <Digital Literacy> <Assignments>. This image is already sized exactly to 220 x 220 pixels. To import this file use the MENU BAR <File> <Import> <Import to Stage> and select the file from the Shared Drive S: If you would like, you may use a background image of your own choosing.

3. Create a New Layer (click on the +, New Layer). On <Layer 2> <Frame 1> select your Oval Tool and draw a circle shape. Fill with any color you want as we are going to change this to a Mask and the color will not matter.

NOTE: You must be certain when you draw your circle shape that you do not have any stroke.

4. Click on the circle you just made and covert it into a Movie Symbol (push the F8 key to open the Convert to Symbol Box). Name the Symbol, spotlight and check Movie Clip and click the Registration Graphic to show the middle square highlighted


5. After clicking OK in the Covert to Symbol Box, IMMEDIATELY go to the Properties bar and type in the name of the Movie Clip, <Instance Name>, in this instance, spotlight.

6. Right click over Layer Two (Spotlight) and select <Mask>. Now using the Arrow <Selection Tool> and click on the stage and then down in the <Properties> click on box next to <Stage> to change the color to black.

7. Add Layer 3 and press F9 to open up Actions Script. Note: After you add Layer 3 IMMEDIATELY push F9 for Action Script screen. Do not select frame 1, the Action Script must be for the ENTIRE LAYER. Type in the Action Script Code as shown in the screen capture image below. Make sure you click on Script Assist to make certain the Mouse is Locked to Center.


If you want, you can just copy [highlight and right click copy] and paste [right click paste] the following into your F9 Action Scrip screen. When you have the action script in the frame then just push F9, again, to exit out.


8. Save file as spotlight Make certain you save it to your network drive (the one with youruser name) and then after you have saved to your network drive <Control > <Test Movie, In Flash Professional> to create the FLASH movie (swf) file to test your animation and make certain your spotlight effect works.