‘Tis the season for Christmas! Recently, I was asked to make a web ad with a blinking Christmas light border. Because it is the Christmas season, I thought I would pass along the way that I was able to accomplish this task in a relatively simple way using Adobe Flash. For this tutorial I will be using Flash CS4, although I know that it also works using CS5.5. To see how the finished lights will look CLICK HERE.
1. Create a new Flash Document by opening the Properties tab and set the dimensions for your file by clicking Edit. Set the pixels and frame rate as shown in the figure below.
2. Import your Christmas Light Border by choosing File > Import > Import to stage from File in the main menu bar. The one that I used for this tutorial came from MetroCreativeConnection.
3. Align your image properly by using the Align panel. This can be done by choosing Window > Align.
4. Now that the image is aligned to the stage, it is time to create our Flashing Christmas Lights. Start by adding a New Layer. This can be done by clicking the left most icon in the Timeline panel.
5. Next we will create the Flashing Light Effect. With the new layer selected, select the Oval tool from the Tools panel. (if it is not already showing, this is found under the rectangle tool). With your Oval tool selected, set your fill to white from the Properties panel.
6. Now, draw an oval over an existing light and resize the oval using the Free Transform tool in the Tools panel. Make sure the oval is positioned inside the light.
7. Next, select the oval that was just created and convert it to a Movie Clip. This can be done by choosing Modify > Convert to Symbol. After you select this, a menu will appear giving you the option to name the Movie Clip.
8. With the oval selected, create a Motion Tween. This can be done by choosing Insert > Motion Tween.
9. With the first frame selected on the Motion Tween, we are going to create the Flashing Effect of the lights. To do this, select the oval and select Add Filter from the Filter menu under the Properties panel. Select Glow from the filter options and set to look like the one below.
10. Now with frame 5 of your Motion Tween selected, change the settings to look like the one below. This creates the full glow of the light.
11. Finally, with the last frame of the Motion Tween selected, return the settings to the ones used in step 9. Congratulations! You have just successfully finished making your first flashing Christmas light! (Your Timeline should look like the one below.)
12. Don’t stop now! For the next colored light, click on the next open space after the Motion Tween and insert a Blank Key Frame. This can be done by choosing Insert > Timeline > Blank Keyframe. Then just repeat steps 5-11 above using a different color for the appropriate light. Continue in like fashion adding multiple layers for a simultaneous flashing effect. This may seem a little daunting, but YOU CAN DO IT! With a little time and patience you can create your very own string of flashing Christmas lights.
This is really cool! I wish I had your animation knowledge! As it is, I have to spend all my time just trying to draw right-ha ha! Thanks for following my blog! Best of luck with yours!
Thanks so much! You’ve got some great drawing skills!