#8 - Laser Blast (Proton Stream Edition)

PART 1

Let's start with the actual foundation of it and that's the actual animation of the beam or energy blast shooting out. Whether it's a cycle or just one big burst, you must create (or maintain the pre-established) the design, keeping it consistent with itself (and perhaps the series or film you are doing the FX for).

With the brush tool, here you see how I went in frame by frame (on 1s) and drew in a Ghostbusters style proton beam bursting out. No cycle in this version, though it's easy to incorporate one between the energy 'build-up' and the 'dissipation' portions on your timeline.


Get your prop ready, in this case a cartoony Death Ray device from some Mad Scientist's laboratory. Make it an outline by clicking on the small box on its layer, create a new blank layer above and below the prop, lock all the layers except the top one and work on this top layer, with the prop layer set to OUTLINE, you can see through it. Activate your ONION SKIN Button just below your timeline, now start drawing.





With that onion skin on you can copy frames over and make sure your drawings 'hook-up' if you do indeed have a cycle amongst the animation. A possible scenario would be 10 frames of the beam activating, then a 6 frame cycle as it repeats a few times then another 6 frames of the beam deactivating and the proton stream dissipating. You'd be surprised how rough you can keep your lines and shapes as well, since it moves or 'vibrates' quite fast you can get away with alot. If you like to work very rough, then make a second pass to clean up your lines.

Once complete pick you color(s) and and paint in all the shapes and gaps and any small bits of electricity or speckles trailing off or sparking from the beam.



PART 2


Once you've animated your beam, copy the keys to a new layer.
Click the new layer button, click and drag to select all the frames and then drag them over to the new layer while holding ALT down.

Lock and hide all other layers.
Select this new top layer holding a duplicate copy of all your animation.
Make a new layer on top of that again.
Drag this new layer down one level, then right click on the top layer (the same one holding a duplicate copy of all your animation) and choose MASK.

This will turn your animation into a mask layer, the blank layer underneath becomes a sublayer (the level that will later by effected by your mask).



Make your Mask layer an outline so that you can keep track of the amount of space the mask will cover, and lock the mask layer.
On the layer underneath click on the blank keyframe then go to Insert > New Symbol.

Create a single cycle of a small star twinkle, a bubble pop, any sort of 4 to 8 frame sparkle / fizzy pop sort of thing.



Once complete, go back to your main scene timeline, drag over your symbol from the LIBRARY to the stage.

Then begin copy/pasting this symbol, over and over, each one change the scale, rotation, and even flip a few over vertically and/or horizontally to create tons of variety.





As you go through the timeline, keyframe and add more symbols and clusters of symbols of the sparkle symbol, go through and select random individual ones and change at what point they begin. This creates even more randomness, appearing as though you animated a sea of twinkle sparks. In this case I had a 6 frame cycle, so most of the symbols I select one at a time I change the First box in the Properties Panel: from 1 to 2, 3, 4, 5 or 6.


Remember, you can only see the effects of the mask when you have both the mask layer and its sub-layer both locked.

PART 3

Create a New Layer.
Now take your original animation again and duplicate it on to another layer on top of all the other layers.

Lock and Hide all other layers.

Choose your stroke color to a semi-transparent white ALPHA color.


Go in frame by frame and click on all the paint with the INK BOTTLE tool (choose the thickness of the stroke to 10).

This may be difficult to do if you have lots of tiny bits. but the purpose of this is to create a nice softened edge to at least the main (larger) shape of your laser beam.

Do this for every frame.





As you can see when you zoom in close the stroke thickness covers as much on the outside of the outline as it does on the inside, so the color of your outlines and your paint fills will give differetn effects depending on how transparent you set the alpha and how dark (or light) you set the colors of the laser itself (which will show through underneath).

Now click on your ERASER tool from the tools panel, change the settings of the eraser to ERASE FILLS.


Go in frame by frame and erase the colored paint (leaving the outlines intact).



To help make this easier, use the biggest eraser brush and zoom out as far as you can go, this will make the task go much faster.


Locking the layers and making them all visible (except the bottom few layers which holds you original animation), you'll notice the alpha-outlined shape encasing the masked twinkle sparks.




PART 4

Once again copy all your keys of the original animation to the BOTTOM layer underneath the prop layer.

click the EDIT MULTIPLE FRAMES button, drag the small knobs over to cover the whole range of the time line, hit CTRL+A to select all the art on ONLY that bottom layer (make sure all other layers are locked and hidden). Change the color to all the animation at once, usually a lighter color than the original base color works best, close to a white color will do. If your original base color was quite light or highly saturated, perhaps a deeper hue will work best, it depends on the background color you choose later.

Then click on each individual frame and COVERT TO SYMBOL (F8) each separate frame of animation.
Make sure each one is MOVIE CLIP symbol. Otherwise all symbol you create must be Graphic Symbols. But in this case MOVIE CLIP symbols are vital for the back lit glow effect.

Once you've converted the artwork on each individual frame to it's own symbol (on this case 27 symbols) click the EDIT MULTIPLE FRAMES button, drag the small knobs over to cover the whole range of the time line, hit CTRL+A to select all the art on ONLY that bottom layer (make sure all other layers are locked and hidden).

Open the Filters Panel, click on the Plus sign, choose BLUR, raise the numbers to whatever amount you would like to see, the greater the number the more diffused the glow will appear. Set the quality to high.




Make your original animation layer visible and compare how the back lit glow looks with the other layers overlapping it. Adjust accordingly.

PART 5

Now for the final touch. A bit of lighting FX.
This may not be appropriate depending on the style you're going for, or how the scene plays out with the background elements.

Create a new layer over top all other.
With the RECTANGLE tool cover the whole scene with a new shape.
Adjust the fill of that shape with a radial gradient.
In this case I went with a black 20% to 0% alpha gradient, clicked and dragged the source of the gradient tool so it's center is just in front of the muzzle of the laser beam.



Then keyframe down the timeline (at the point where the laser begins to cover more space) and change the gradient again to make the more opaque part of the gradient LESS transparent / more black). this will help put more focus on the beam and give the illusion the beam is intensifying in brightness by making everythign else gradually get darker and the a bit f a strobe light effect during th big blast (or cycle) portion of the animation.

Set you first key frame to a shape tween to activate the morph of the color effect.
Then key frame a few afterwards during the portion where the beam dissipates, and gradually reduce the transparency of the radial gradient so that it disappears, thus fading away the lighting effect.









Make sure you have blank keyframes inserted where you need to so that certain elements don't stick around past the timing of your animation.



Select all the frames and copy the frames into it's own symbol if you'd like, then you isolate all the animation into a single (easy to manipulate) keyframe.

Here's two more samples, with the same technique, just using different colors, and design styles.

#7 - Laser Beam & Sparks

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.