|
Making A Lightsaber In Flash |
|
|
|
Written by Rawpulse
|
|
Friday, 13 January 2006 |
|
Ever wanted to know how to make a lightsaber in Flash? Now you can!
We're not just going to make the lightsaber look pretty, we'll make it ignite and it will even have the famous sound. Let's get started.
First off, open Flash. Create a second layer on your timeline by clicking the "Insert Layer" button. Call the top layer "Handle" and the bottom layer "Blade". It's always good to rename layers for reference, even if you only have two. Set the background to black, the effect looks better with darker colors. On the "Handle" layer, on the first frame, you will need to draw your lightsaber handle. If you can't draw, you could simply use a search engine to find a light saber image, then cut the handle out and use that.
Make the handle long and rectangular. Add a linear effect to it, by selecting the rectangle, going to the Color menu, and selecting Linear from the drop down list. Have it going from grey to white. Decorate the rectangle with various lines and objects to make it look better, as below:
The next thing to do is the blade. There are many different colored lightsabers. Green, red, blue, purple etc, but we're going to stick with the green for this tutorial. Draw the blade using the rectangle tool, make it a sword shape, and round the edge using the selection tool. Delete the stroke around the edge of the blade. At this stage you will have a fairly unimpressive looking lightsaber:
Using the Color menu on the right hand side, select the blade, and use the Linear effect again. Only this time, change the color to go from light green to white, then back to light green. Your Color menu and lightsaber should now look like this:
Now it looks more like a lightsaber, but it needs the glow to look more realistic. Convert your rectangle to a movie clip, by right clicking it, and selecting "Convert to Symbol...". Name it anything. Now go to the Filters tab, next to Properties. Click the little plus sign and select "Glow" from the list. Play with the "Blur X" and "Blur Y" properties until you find a blur that you like, then change the color of the blur, next to where it says "Color:"
If you aren't using Flash Professional 8, you can achieve a similar effect by going to "Modify > Shape > Soften Fill Edges" before converting to a symbol.
When you are finished, you should end up with something similar to this:
Looks very cool now, right? Well now we need to animate it. Unless of course you only needed the image without any animation. But for those of you who want to make it better, read on.
Animation
First we need to add the sound. I was unable to locate a sound for the lightsaber turning off, but that's not particularly important. The sound when the lightsaber ignites, is located here. To add it to Flash, select "File > Import... > Import To Library". On the first keyframe of your blade layer, add the sound, by clicking the keyframe and selecting the sound from the drop down box in the Properties panel:
Name the Frame Label "start" at this keyframe, as it will be the start of your animation. Add a second keyframe at frame 16, one at frame 40, and one at frame 55. Make sure you add a keyframe to frame 55 on the Handle layer also.
Back to keyframe 1, select the "Free Transform Tool" to reduce the size of the lightsaber. Make it small enough to hide under the handle. When you have done this, you should not be able to see the blade at all, but you might see the green glow if you look hard enough. That's not particularly important. At keyframe 16, the blade should still be full size. Add a motion tween by right clicking on a frame between 1 and 16, and selecting "Create Motion Tween". If you test the movie now (by pressing Control + Enter) you will see that the blade ignites complete with the famous sound. Pretty cool.
Add a stop action to keyframe 16, by opening the Actions panel and entering "stop();" as follows:
The movie will now stop at this stage when you try to play it. Now go to keyframe 40, and create a Frame Label called "stop". These frame labels are important, as they will be used in the actionscript later. At frame 40 your lightsaber should be full sized. Go to keyframe 55, and create a stop action like we did before. On frame 55 we need to make the blade small again, as it will be returning to it's original state. To do this, use the "Free Transform Tool" again to drag the handles and change the size and make it go under the handle.
Create a motion tween again in between frames 40 and 55. You now have everything in place. It's time to make it interactive.
Interactivity
We could easily make it a button, and when you click it, the blade extends, but that's been done to death. We're going to make the blade extend when the "Up" button is pressed on the keyboard, and power off when the "Down" key is pressed. To do this we will need to select the handle and conver it to a button. On the button menu, add a keyframe to each of the four states, no changes need to be made at these keyframes. Go back to scene one and select the handle. Now open the Actions panel again, and use the following code:
on(keyPress "<Up>"){
gotoAndPlay("start");
}
on(keyPress "<Down>"){
gotoAndPlay("stop");
}
The code tells the movie to start playing the frame called "start" when the Up button is pressed, and to play the frame called "stop" when the Down button is pressed. You will need to remove the keyframe at frame 55 of the handle layer, and replace it with another, to make sure all the changes are saved throughout the timeline.
Now test your movie! Hopefully, everything will have worked out and you will be rewarded with a great Flash animation. If you experience any difficulties, feel free to post on the forum asking for help. Remember, you're not bound by this tutorial. Experiment, try some different colors and ideas. See below for examples:
To view the movie in action, check it out here.
|
|
Last Updated ( Friday, 13 January 2006 )
|
|
Tutorials 
