How to make animated virtual lightning, with realism
Sunday, April 22, 2007
Today, we will put on a tutorial to teach you guys how to synthesize lightning to put into your animations, websites, blah blah. This technique has been along for quite some time, but those tutorials you see out there can't teach you how to make realistic virtual lightning. We got pissed off, of course, cuz we wanted to create animated lighting that is realistic. So, we spend some time observing the lightnings in the storms, and we've thought out a way. Check it out.
Note: Due to limitations in our monitors, we can't really mimic the brightness and intensity of a real life example. But we have at least produced the most realistic artificial example on the net. ;) We'll use marcomedia flash for the animating part, cuz' it is the best software for making animations so far (unless you're doing a movie). So if you don't have it, we recommend you to download the trial version.
1stly, we went to google and did a search for lightning images. Then we got this one.
2nd, we pasted it in paint shop pro, and erased the background to retain only the lightning image. We did it using the magic wand tool to select bits of the background and delete them off, the used an eraser to erase the fine bits of background. Be sure to make the top and bottom parts of the lightning to fade away, by erasing them using a soft, large circle brush. After all the bits of background are erased, we greyscaled it by colorize the lightning and put the saturation to 0.
If you are just too lazy to do that, we've uploaded a cleaned up one for you! Ya, we guys are lazy, but we tried our best to clean it up ourselves. Right click, save it to your folder.
3rd, we did a google search for a image of storm clouds. Dark, gloomy ones, so the lightning can contrast with it enough. As you know, our monitors can't show the powerful blasts of light you can see in real lightning. So that's why the background must be dark enough to give the viewer a false impression that the lighting is bright.
4th, we copied and pasted the cleaned up image of the lightning glow in to a new layer. We resized it to fit the clouds and the ground. We also duplicated the lightning and adjusted its proportions to create another variation of it. As lightning gives a nearby clouds a glow, we used a soft circular brush to add some translucent halos for the base of the clouds.
5th,we copied the two lightnings and glows and pasted them as three separate new images. The we save them as .png with alpha transparency.
Now, time to open up marcomedia flash. Because it is kinda tedious to explain everything we did in flash (due to too many frames and stuff), we've included a .fla file to let you see what's inside of our animations... feel free to tweak it in anyway you like. Right-click here to and click save to download it.We would appreciate it if you can give us a backlink if you happen to use integrate the .fla to in your website or animations.
We'll examine the different layers of our animation in flash. Remember to convert all images to symbols with a registration at the middle, to help you animate and resize it easily. Our frame rate is 30 frames/s, fast enough to deliver the speed of the lightning, but moderate enough to run with no lag in most computers.
In the 1st and 2nd layer, we've increased the background's brightness whenever there's a lightning flash, and left it fade away to its original darkness whenever the lightning's is over.
In the 3rd layer, we've the lightning blots fading in and out. This is done by adjusting the alpha settings of the lightning symbol at each keyframe. The starting and ending keyframes is 0 alpha, and the middle one is 50-100. Be sure to make the process of fading in and out fast.
The 4th, 5th and 6th layers contain the glows in the clouds caused by lightning. Do the same fading in and out thing you did to the lightning bolts. But for the glows, make it fade in and out with the lightning. Sometimes, when there is no lightning showing, add it to other parts of the clouds. These are the glow caused by cloud to cloud lightning, the type of lightning that you can't usually see.
The 7th layer contains a black rectangle which has a gradient that is transparent at the bottom and is opaque at the top. The helps make the clouds "shadier" so the lightning looks more realistic and you can put text later.
At the top most layer, we have the text.
Erm, thats all. It may seem hard, so if you don't know how to do the basic things in flash, (eg. motion tweening, making new layers, resizing....) pls search it up in the help function in flash. If you noticed any other element about lightning that we can put into our animnation to make it more realistic, pls share with us by posting in the tagbox. Observing lightning is not easy, it's too bright and fast.
Labels: Flash, Graphic Tutorials
<< Home