Joseph Gilland's definitive manual on the Art of Special Effects Animation is pretty much the only guide out there for 2D FX animators, it's a great read with fantastic visuals, with plenty of references from Michel Gagne.
Buy it here on Amazon. This is the book description: A richly illustrated full-color guide to creating stunning hand-drawn and digital special effects by Joseph Gilland, whose work has been seen in films such as Lilo & Stitch, Mulan, and Brother Bear. Create amazing animated effects such as fiery blazes, rippling water, and magical transformations. Animation guru Joseph Gilland breaks down the world of special effects animation with clear step-by-step diagrams and explanations on how to create the amazing and compelling images you see on the big screen. 'Elemental Magic' is jam-packed with rich, original illustrations from the author himself which help explain and illuminate the technique, philosophy, and approach behind classical hand drawn animated effects and how to apply these skills to your digital projects.
This FX tutorial will cover the building blocks for a basic laser beam cycle with some cutting sparks flying off.
Part 1
We'll start off with a simple prop design for the laser device and then the inner core of the beam itself emitting from the muzzle.
I've just made a very simple and typical cartoon canon, ready to shoot out da deadly blue laser beam.
Leave the laser beam muzzle for now, make a new layer on top. Now, make a new symbol (whenever you make a symbol, isolate it on its own layer...ALWAYS). Within this symbol, create a 2 frame cycle on the timeline (2 drawings on 1s).
Choose your angle and position, click and drag the line tool from point to point.
First frame: a single white line (1pt. thickness).
Second frame: keyframe that same line and change it to a 4pt. line.
You can easily change the properties of a straight Line tool-made vector line by selecting it and then increasing the number in the Properties window.
This is a close-up, the end of the line would line up with the hole from the laser prop.
Now make a new layer underneath.
Create an oval shaped object, paint this object with a radial gradient (with 3 colors) the center pure opaque white, the second a dark 50% alpha blue. and the third (on the outer rim) a full 0% alpha dark blue. Looking like this:
Solid white core fading outwards to a transparent pale dark blue.
Add 50 frames to the timeline (you're still in the same symbol as the 2-frame vibrating line cycle), making this a 52 frame symbol. Select those two line art frames and holding down the ALT key (drag them over to duplicate them over and over) to copy the frames. Another option would be to copy those keys into a new symbol, and dragging that symbol into this timeline.
With the timeline extended, now key frame it half way (frame 26) on your layer with the gradient oval shape. Select the oval shape and drag your tabs in the color mixer's radial gradient settings to widen the central white part to show more solid white.
Then drag the first frame (while holding the ALT key) to the end of the timeline, then Shape tween the first and second KEY frames.
So now it looks like this:
And the layer above it (having the repeating vibrating thin line) looks like this:
Now for the 'body' of the laser beam.
Make a new gradient shape, this time for a box formation.
Build, stretch and tilt this square shape and paint it with solid white going outward to solid blue.
Now the same process, F6 at frame 26 and 52, frame 52 being the duplicate of frame 1.
Frame 26 being the same stretched square object lined up on a new layer UNDER the white line base and the oval gradient. Shape tween it so it slowly pulsates from large to small, just like the oval shape overtop of it.
So far we have the baseline white line, the slowly pulsating circular glow at the muzzle part where the laser is shooting out from and a thick body traveling down the stream of laser energy.
Now we need to make some darker blue back glows to add more lighting to this laser beam.
Repeat the process, this time place two new layers underneath your current ones and have larger shapes (a thicker rectangle shape and a larger circle shape) I've chosen a deep blue color going from 100% to 0% alpha colors, a linear gradient for the beam section and a radial gradient for the head of the laser. Shape tween both so that the key frame in the middle (frame 26) is slightly larger than frame 1 and 52. Shape tween frame 1 and 26, and observe your results.
Now make another layer, drag it to the bottom so it lays underneath all other layers, draw in a pale dark semi-transparent blue shape matching the head and stream of the laser's path. It helps to make some layers invisible and the rest 'outlines'.
I'm not going to animate this faint glow, but you can if you wish.
Once I've drawn out by paint blob, go to Modify: Shape > Soften Fill Edges...
Choose 144 & 20 as the numbers.
Remember: Put this on the bottom layer.
Your timeline should now look like this:
The final product should look something like this:
Part 2
There's a million different ways of doing laser beams and sparks, in future posts I'll have more elaborate and wild laser blasts, for now I'm sticking with a thin cutting laser type of effect.
Here's just one of many ways you can do sparks from a cutting laser or blow torch.
First draw out the path of action, five frames of a line shooting out and breaking apart like this should be fine. Apply a slight Soften edges effect to it frame-by-fraem to give it a subtle glow.
Now for the spark blast out.
Start off with a new layer and with just using the brush tool start making a few frames for the head of the spark traveling along the top edge of the straight line then dissipating. Then, each one of the frames convert the art into a symbol.
In each symbol you'll need to make two new layers (3 in all) of various colored-glows.
I started with a small white base, images below are zoomed in to see the details.
Then with a layer underneath a light blue colored paint blob slightly larger.
Then an even lighter and larger oval shaped paint blob.
Notice each one has a larger and wider Soften Edges effect applied to them.
All 3 sandwiched together:
Now to animate this single spark. Place it on the head of your animated line, duplicate it over and over for frames 5 and 6 (where the sparks reaches the end of the line and breaks up), otherwise you simply have this spark symbol on a layer on top of the line as your keyframe it to track on the edge of the line until the line disappears (in this case frames 5 and 6).
Make sure you copy this simple 6-frame animation into its own Graphic symbol.
Now comes the fun part.
Make a new blank symbol (call it spark group), and drag this spark symbol onto the stage, make a new layer and drag it from your Library to the stage again, repeat this process a dozen times.
Now stagger the timing, move the key that each seperate animated symbol appears on your timeline, move the original key that the animation is on and then move the next layer's key over, make sure to put a blank keyframe at the end of the cycle (as shown below) so it doesn't cycle again.
Now change the size, rotation, and placement of the effect to give it some variety.
Now it looks like you animated a whole bunch of different sparks.
This is the beauty of Flash, you can simulate complex effects with (in this case) a single 6 frame animated cycle.
Now that you have this animation isolated in it's own symbol, make a NEW symbol and grab this spark cluster symbol you just finished and do the same thing, drag it from the library on to the blank canvas of another new empty symbol, and spread it out on your timeline, making sure to cut it off from cycling with blank key frames, and again change the size, rotation, placement, and stagger the timing so they burst out at different various times, you can even change the brightness, alpha and tint (in the Properties window once you have the symbol selected) for each cluster of animated symbols to add more variety.
Looking something like this:
Now you must have a big flickering glow from where the laser beam is striking the surface (off screen in this case) in order to sell the final look.
To achieve this make TWO new symbol with only two frames of animation in each.
Make one a faint blue gradient going from the center outwards from white to fully transparent blue, fading out. Make the other a 50% alpha white to 0% alpha white, make both different in shap but both of them large and on a layer behind all other animation, and place these two symbols on the main timeline (underneath the laser, sparks and all other layers).
Here's how it could look:
Now we put it all together.
The more layers and duplicate symbols you have of the sparks, the slower Flash may be responding to your commands - this is because it has a lot to process for when it comes to dozens if not hundred eds of gradients/alphas and glows you may have made to make the sparks really fly.
Here's the final product:
If you choose to add small bits of particle dust amongst the beams outer rim, you could have an effect looking like this:
Simply create a bunch of symbols floating around on slow tweens moving back and forth or in a very slow circular pattern, each one just being a speck of 40% alpha white colored paint blobs.
Using these same principles and techniques you can apply some nice effects to any sort of energy blast, cutting torch, plasma beam type of animation.
Coming up next time: Tornadoes, twisters, smoke fumes, gun shots and explosions!
Till then, here's some amazing reference materials on explosions, over 100 clips found here.
PART 1 To start off a series of laser tutorials will begin with a simple lightsaber-style effect.
There's two ways to make a back-lit effect in Flash, the bitmap version and the vector version. In other words the Movie Clip method and the Soften Edges method. Neither requires Photoshop, just Flash 8.
First off, the Soften Edges method.
Make a 20pt line and then convert it to paint by selecting the line and selecting Modify: Shape > Convert Lines to Fill.
This allows you to shape the line to any angle you'd like. Copy the key frame to new layer on top. Insert: Timeline > New Layer Click on keyframe with your art on it, then right click on that frame to select Copy Frame, then right click on the new blank frame of your empty top layer and select Paste Frame. Another fast way to copy mulitple fraems in the future is to click/drag to select multiple keys then hold down ALT as you drag the keys to a new location, this will duplicate the keys whenever you unclick.
Make the top layer invisible, then select the bottom layer key and change the color from your color mixer window or by click selecting a color from the color box on your tool bar.
With the art still selected, go to your menu again and select Modify: Shape >Soften Fill Edges - now choose a Distance: 50px and Number of Steps: 10 to start off with. How large your object is and how large your stage size is all factor in to these numbers and how much the range of 'glow' will be created.
Make your top layer visible again and there you have a very simply vector art style glowing edge. In this case a crude blue lightsaber effect. many laser-style glows have a white core, the color is identified by its glow, the same goes for the old traditional lightsaber effects in film.
If you look closely all the computer software rendered was a 50 pixel wide gradient, banding in 10 separate steps, transitioning from full 100 opaque blue to a ten-step increment full alpha transparency, expanding the shape outwards as it gradually reduced the alpha, thus making it appear to glow.
As you can see below the difference between a 100px / 4 step and then a 100 pixel / 50 step. You create two different effects, one almost appears to be a Photoshop-style blur filter, simply because you have more pixels crammed within the same 100 pixel range of the object being expanded outwards.
Now that we have the basics of the vector version of a glow, let's cover the alternative method. This method can take longer to do if you have a lot of frames of animation to apply this glow to, but in some ways it can be more reliable, if you apply the Soften Edges technique more complex shapes, you may get strange glitches in the render, shapes turn inside-out as they try to expand the paint outwards and cross-over to cancel out the alpha colors. Plus you can apply to this to all your animation at once simply by copying all your frames of animation at once then selecting them all with the Edit Multiple Frames button, with all the art on every frame selected at once you can apply the Soften edges to hundreds of frames at once (though it can take a while to apply the effect, so be patient).
With the Movie Clip method, you convert the paint into a symbol so that you can apply a glow filter to the art (in essence converting it to a bitmap), this makes a softer and more reliable glow, however it can cause it's own small glitches in more complex frame-frame animation.
In the Movie Clip technique you start in the same method. A white line of paint, select it, hit F8 to convert your paint to a symbol, select Movie Clip as your symbol type (this is the ONLY time you want to use Movie Clip as your symbol type, otherwise choose Graphic, always!)
Open the Filters window, click on the + and choose Glow with these settings: Blur: 30 Strength: 250% Quality: High Color: Blue BAM! Instant, beautiful, cool, soft, blurry glow of light. You can apply this to any sort of lightning, laser beams, blinking computer lights, and blasts of cartoony photon energy.
A slight disadvantage to this method is that you must apply this technique to each and every frame individually, so you can have dozens of movie clip symbols piling up in your library, this is easy to remedy, you can make a folder just to dump all these symbols to get them out of the way. Also, you can get some strange glitches once you render out the animation into video, the odd time you'll see some dropped frames of your blur or glow animation that you've created using the Filters.
This is very easy to remedy, just keyframe every frame on your main timeline. No matter how many symbols within symbols that you may have buried deep within your animation, if you hit the F6 button once you select the entire layer the FX or main symbol housing all your animation is on, your scene won't be affected in anyway but once you render it out the glitches will be gone.
Another slight disadvantage, is the fact that in order to create this blur/glow you have a bitmap created in order to produce the effect, so if you happen to truck-in on your animation you run the risk of showing pixelation like this:
This shouldn't concern you unless you zoom in to closer than 200% and still, depending on the resolution you render out the video it may still not be visible, so don't worry.
PART 2 Now it's time to animate these techniques. Let's activate the light saber. 3 frames on 1s.
Start off, the initial 'spark', then the burst out, then the expansion of the actual 'blade'. the 4th and final drawing is the final fully extended laser sword!
All 4 drawings need to be individually converted to a Movie Clip Symbol in order to apply the Filter to them.
Again using the Edit Multiple Frames button below the timeline is nice to quickly apply the filter to multiple frames at once.
Below are quick roughs made of the light saber activating, once cleaned up and colored, the same process applies as detailed above.
Make another duplicate frame of the last fully-extended saber. Therefore you have... frame 1: the spark frame 2: the blast out fraem 3: the half extended blade frame 4: the fully extended blade frame 5: the copy of that same extended blade
When you are applying the glow filter with the color of your choice, make sure to have a lower glow strength on frame 5 versus that of fame 4. on frame 4 for instance: Blur: 35 Strength: 250% Quality: High for the Filter Properties. Blur: 35 Strength: 200% Quality: High for frame 5. Now copy frame 4 and 5 a few times to create a vibration in the glow, of course this is all optional and to change the intensity of th glow just increase the blur's range by increasing the numbers to 50 or more rather than just 35.
The result:
Now lets add some movement. Fast movements work well for light sabers as long as your antics and overshoots are on twos and the actual smear drawing is on 1s.
Add another light saber, move those symbols around, insert some flash frames in their on impacts, and add in some sound effects and we're all set to go. Remember, if you render it and there seems to be glitches with the filters like glows and blurs being held for longer than what you had keyframed on your time line, simply select all the layers with the 'filtered symbols' and hit F6.
