Making blinking Christmas lights in Macromedia Flash.
|
Step 1 - Make a new movie clip Open a new document in Flash. If you're going to be using your lights over a picture, make the stage the same size of the picture. If you're going to be using them by themselves (or if you're drawing a background for them), choose whatever size stage you feel like. Go to Insert -> New Symbol -> Movieclip and name your clip 'redbulb' or 'redlight'.
|
![]() |
Step 2 - Draw your bulb Once you're on the movie clip stage, select the Pencil Tool and set it's properties to 'Smooth'. This setting automatically smoothes the lines you draw into nice curves, so even if you don't have a steady hand your lines will still look great. Draw the basic shape of your bulb. Make it big for now; we'll resize the lights later, but we need them to be easy to colour until then.
|
![]() |
Step 3 - Fix your lines If your lines are almost-but-not-quite perfect, you can use the Arrow Tool to click and grab an edge of your shape and then drag it until it looks the way you want it to.
|
![]() |
Step 4 - Colouring your 'off' bulb Next choose the Paint Bucket Tool. Open up the Color Mixer and choose a light blue (no matter what colour you want your bulb to be) with the alpha set to about 30%. Click somewhere inside your bulb outline with your paint bucket to colour it in. This will be what your bulb will look like when it's 'off'.
|
![]() |
Step 5 - Add a highlight Make a new layer above your bulb and name it 'highlight'. Select the Paint Brush Tool with a medium diameter and choose 'Radial' instead of 'Solid' from the drop down menu. Select white for both the left and right side colour boxes, but on the right side colour box set the alpha to 40%. On the highlight layer, draw a relatively straight line down the side of your bulb. Check the picture if you're having a 'huh?' moment. This is just a reflective highlight to give your bulb a little depth.
|
![]() |
Step 6 - Add a socket Now we need to draw the socket for the bulb. These are almost always dark green, but choose whatever colour you want. Make a new layer underneath the bulb and highlight layers and name it 'base' or 'socket'. Draw a vaguely rectangular shape using the Pencil Tool, then fill it in with whatever colour you want to use. Drag it underneath your bulb until everything lines up correctly. If part of your socket overlaps the bulb, just use the eraser tool to get rid of that portion.
|
![]() |
Step 7 - Detailing your socket This step isn't necessary, but you can add a few details to your socket if you want. I added a highlight and a couple lines. It's up to you if you want to do this.
|
![]() |
Step 8 - Lighting the bulb Now that we're finished with our bulb, we need to make it light up. On frame thirty, insert keyframes in each of the layers. In the bulb layer, click on the light blue colouring so it's selected. Using your colour mixer, select a nice red colour. It should automatically recolour your bulb... if it doesn't just use the Paint Bucket.
|
![]() |
Step 9- Adding a glow This looks good as it is, but you can add an outerglow to it to give a little extra realism. Create a new layer underneath your bulb layer but above your socket layer. Name it 'glow'. Create a keyframe on frame thirty. Choose the Paint Brush tool and the same colour of your bulb, but set the colour's alpha down to about 20% using the Colour Mixer. Draw a big halo around your bulb in every direction. It should look something like this when you're done. Yes, I know it looks funky right now, but it works when you have a picture beneath it, I promise.
|
![]() |
Step 10 - Finishing your movie clip Move to frame 80 on your timeline and insert frames (not keyframes!) in all the layers. That's it! You've got one bulb finished.
|
![]() |
Step 11 - Make your other bulb colours To make your other colours, highlight all the frames from every layer on the redbulb movieclip timeline, right click on your highlight and select 'Copy Frames'. Go back to your main timeline and go to Insert -> New Symbol -> Movieclip and name it bluebulb. Once you're at the movieclip editing stage, make three more layers and then highlight the first frame (which should be the only frame) on all four layers. Right click on your selection and choose 'Paste Frames'. All of the frames from the red bulb will appear. Now you can just go into frame thirty and use the paint bucket to recolour the bulb and the glow to a blue colour. Once you're done with that, follow the above steps to make as many colour bulbs as your want. I made four: red, blue, green, and orange. Once you have all your colours, you're pretty much on the home stretch. Go back to the main timeline. |
![]() |
Step 12 - Adding a photo and making a wire If you're putting your bulbs over a photograph, place your bitmap on the bottom layer. Lock the layer when you have it positioned where you want it. Create a new layer and call it "lightstrand". This will be the wire your lights are attached to. Using a dark green colour (or whatever colour you used for your socket) and the Paint Brush tool with a small diameter, draw a line where you want your lights to be attached to. Don't make this line perfectly straight. Use small dips where gravity would naturally be pulling it down. If your photo is from a distance (like mine is), you can skip the above step entirely because the wire would be too small to see.
|
![]() |
Step 13 - Placing your bulbs Once you have your wire finished, make a new layer for each colour bulb you have. Now's the fun part. Drag as many lights from your library onto the stage as you want, keeping the colours separated into their own layers. Meaning, green bulbs all go on one layer, red on another, etc. Position the bulbs where you want them and use the Scale/Rotate tool to get them to look exactly how you wanted.
|
![]() |
You can use this technique to make any sort of light you wish, not just Christmas lights. Neon signs, traffic signals... whatever your imagination can come up with. Once you become more advanced with Flash, you can create these lights using Actionscript and make them truly random and lifelike. By using actionscript to call and control the lights, you can also greatly reduce the filesize of your final movie. Here is the movie I ended up with: |
||
|
||
Return to Sharpfish.net | Email me with questions or comments |













