Submit Your Article
This tutorial will show you how to make some glowing Christmas lights in Fireworks and Flash.
We’re going to make it a little more interesting and have a picture of a reindeer in the animation as well, instead of just-some-lights.
The reindeer image was obtained from Stock.xchng.
Before we start in on anything, create a new document and change the dimensions to whatever you like, and change the FPS to 30.
Tracing the Reindeer and Making a Light
Open the reindeer in Fireworks and use the Pen Tool to trace around it. If you haven’t used the pen tool before, it may take a little practice to get used to it, but I swear it’s one of your best tools once you familiarize yourself with it.
Once you’ve traced your reindeer (I do it in pieces, i.e. antlers, body, legs, etc.), turn him into a silhouette by removing the stroke around the reindeer, and filling it in with a color of your choice (charcoal grey in my example).
Now, we’re going to make a Christmas light. I recommend doing this in a different file, it’ll just be easier later when you get into Flash. Three simple shapes, and the light bulb is done! We don’t want any major details in it yet, we will do that in Flash to keep the file size down. ***Note: I used the pen tool to draw the shape of the light bulb.
Importing it into Flash
This is the easiest part. Open Flash, go to File>Import to Library, then locate the files you just created of your reindeer and your lights, confirm, and they’re in your Library! You have to import one at a time, depending on your version of Flash.
If you’re wondering why we did the designs outside of Flash in Fireworks, it’s because the tools in Flash (at least this version) are far inferior to those in Fireworks and other programs. Fireworks is directly compatible with Flash, so as long as files are created in Fireworks and saved as Fireworks PNG files, they will import to Flash flawlessly.
Editing the Now Symbols
Double-click on the light bulb in your Library – this will enter editing mode for that symbol.
We are going to separate the two pieces of this file. When importing, so long as you kept the layers separate, this will be easy. Click on the green base, both pieces if you have to, and copy them, then delete them. Create a new Symbol. Insert>New Symbol… or CTRL+F8. Make it a movie clip, name it something awesome like “base”, then paste your green base in there. There you go!
Now, go back into your light bulb symbol.
We don’t really want a stroke around the outside of it, so we’re going to delete that. Double click on the shape, which will take you into where the shape can be edited, then click on the black line so it is highlighted, hit the Delete key and it’s gone. Magic.
The orange we have for the inside of the light is all well and good, but we want it to be a little more interesting when it’s animated later, so we’re going to do a couple things to the light now.
Click on the orange so it is highlighted. Go to your color palette, and where it says “Solid” change that to “Radial”. Two colors will appear. The one on the right side is the color on the outside of the gradient, and you’ll want this one a little darker, and at 100% alpha. The one on the left is of course the inside color and want that one lighter than the outside, and at 80% alpha.
You have officially created your first light (bulb).
Make It Glow
This is a simple step. We’re going to make a new symbol F8, and name it something like “orange-glow” or whatever color you’re using. Use the Oval Tool and draw a circle by holding down shift. Don’t make it huge, but don’t make it too small, you want to see what you’re doing. Once you have your circle, click on the border and delete it, if you didn’t change it to no Stroke before you drew it. Click on the colored space, and up in your color Palette, change the gradient to Radial. Select an orange that’s a little brighter than the ones you used for the light bulb in the previous step. You can make one or both of these colors that orange, either way, you want the center color to be a solid 100% color, and the outside will be 0% alpha. Changing the outside to 0% alpha will make it look more like it’s glowing.
And now, we have all the pieces we need to make a glowing light! We’re not finished with this step just yet.
Open the light bulb symbol we made earlier and create a new layer in the timeline. On the top layer, drag the circular orange gradient we just made on top of the light bulb. Resize it to fit inside of the light (either make it very small or just inside the edges). Go out to about frame 60 in the timeline or further, and select the frame by clicking on it. Hit F6 to insert a new keyframe. Now, at the halfway point, click and add another keyframe with F6. On this one in the middle, we’re going to scale it up, as big as you want it to glow. Once you’ve done this, click anywhere in between the first and the middle frame, right click and Create Motion Tween. Do the same on the other side of the halfway point. Hit the Enter key on the keyboard and watch it glow!
***Note: Make sure the timeline extends all of the way out for both layers. To do this, click on the empty frame in the layer below the glow, and hit F5 to add a blank frame, thus extending the images the full length of the animation.
Put the Pieces Together
Create a new symbol F8, name it “light-orange-complete” or something that makes sense to you.
You want to have 2 layers in your timeline. The bottom layer will be called “lightbulb” and the top called “base”.
From your Library, drag your little symbols of the appropriate names onto the layers and line them up so they look like a Christmas light bulb.
You officially have your functioning light!
Try It Out
Go back to your Stage, which will probably be called Scene 1. Drag your symbol that you created with the completed, glowing, colored light, onto the stage. Now view a preview of the animation! Shift+Enter keys will open a little test of the movie, and you can see the light in action.
Duplicate It and Change the Color
So, you want more than just one color of a light? Duplicate what you’ve done!
Go to your Library, right-click on the light bulb, and duplicate it. Name it something different, then go in to edit it by double-clicking on the little preview of it. Change the colors and prest-o-change-o, you’ve got it!
Don’t forget to duplicate and change the color of the glowing circle too, it would look awfully strange with a blue bulb and an orange light coming off of it. To do this: duplicate as we did with the other symbol and change the color of the center of the glow. And now, for a trick! Open up that light bulb you just changed the color of, which still has the wrong color of glow in it – go to each of the keyframes (the three we created) and right click on the glowing dot, and choose Swap Symbol. A little window will open up and you can choose which symbol to put in its place! This really helps to make things less complicated.
Oh! And as a side note, you do not need to duplicate the green base we made. You’re not changing it any, so there’s no reason to make multiples of them.
Keep It Going!
Make as many colored lights as you want.
Decorate the Reindeer
Clear off your stage by deleting anything excess. Now, create your background and everything how you want it to look. Remember, layers are your friend.
So, I’ve got some layers of snow here. One of the layers is in front of the reindeer so his feet are buried, and the others are all behind him.
On a new layer above the deer, use your pen or paint brush, whatever you’re comfortable with and draw some winding Christmas light cord. Do not strangle the reindeer with the cord, that’s not very Christmasy.
Once you’ve completed the cord, add a new layer above the cord, and then one below your reindeer. Start out on the new layer that is above your cord, and start dragging and resizing your lights.
Decorate the whole length of the cord. Why did we make that layer below the deer? For lights that wrap around him and you want to still be able to see them, but don’t want them on top of his body.
You’re Done! Hope you enjoyed!
Topics: Flash
