Laser Beams and Smoke Effects in Flash Games


OMG LAZORZ!!! This tutorial covers the development of a simple laser beam effect in Flash.. and along with that, the generation of a smoke particle effect in AS3 to add to the scene’s mood. Lasers are a fun feature to add to any video game, and using the knowledge from this flash AS3 tutorial and a little more polish, you will be able to create a truly awesome laser beam flash game.

Not only that.. but since this is so close to the holiday.. IT’S EASTER THEMED! (Kinda.)

Source code can be found right here:

Open up the “lasers_and_smoke.fla”, and then run it by pressing Ctrl + Enter in Flash.

And a demo of this application is here:

Click down on the mouse to charge your lasers. If you hold the laser beam over any of the Easter eggs or the counter top, you will see the smoke start to bellow out!

TUTORIAL STEPS:

  1. First and foremost, we need something to shoot lasers from. What I used in this tutorial was the drawing of a skull I made. You can either grab that right here, save as, and import into your flash project; or simply use the assets form the completed tutorial lasers_and_smoke.fla file I referenced above.
  2. Place the skull somewhere in the upper left-hand corner of the stage. We’re going to have to calculate the exact position of his eyes later on to anchor our flash laser effect down.
  3. Once the skull is in place, we are going to need to set up a global Boolean, and three event listeners, Event.ENTER_FRAME, MouseEvent.MOUSE_DOWN, and MouseEvent.MOUSE_UP.  When the mouse goes down, flip on the global boolean, when it goes up, flip the boolean off. This will give us a real-time response rate for the laser effect, and almost all flash game input is setup using this type of framework.  The code skeleton will look something like this!
var mouseState:Boolean; // true for down, false for up

function init():void{
    stage.addEventListener (Event.ENTER_FRAME, enter_frame);
    stage.addEventListener (MouseEvent.MOUSE_DOWN, mouse_down);
    stage.addEventListener (MouseEvent.MOUSE_UP, mouse_up);
}

function mouse_down (e:MouseEvent):void {
    mouseState = true;
}

function mouse_up (e:MouseEvent):void {
    mouseState = false;
}

function enter_frame (e:Event):void {
    if(mouseState){
        //logic for when the mouse is down

        //AKA draw lasers and do hit detect for smoke
    }
}

We’ve got the two listeners for switching mouse states, and ENTER_FRAME checking that boolean. If the boolean mouseState is true, execute laser generation sequence.

4.  When it is time to create the laser, we have got to pick one of two options.  We can either have the laser effect appear instantly, hitting our target mouse position, or have the laser “beam out” to the position over a short series of frames. Obviously, the beam out effect looks much cleaner, and since it isn’t too much more actionscript 3 code to enter, we’ll go ahead and implement the animated laser beam pullout.

With that, we need three more global variables, laserbeam1 MovieClip, laserbeam2 MovieClip, and our “percentage” Number, to show how far along our beam generation has proceeded. The actionscript 3 code looks like this (placed at the top of the file):

var laserbeam1:MovieClip;
var laserbeam2:MovieClip;
var percent_level:Number = 0;

Since we are creating these two laser beams dynamically, we also need to reserve a block of memory for them, and add to stage. Our new (and final) initialization function now looks like this:

function init():void{
    laserbeam1 = new MovieClip();
    laserbeam2 = new MovieClip();
    stage.addChild(laserbeam1);
    stage.addChild(laserbeam2);

    stage.addEventListener (Event.ENTER_FRAME, enter_frame);
    stage.addEventListener (MouseEvent.MOUSE_DOWN, mouse_down);
    stage.addEventListener (MouseEvent.MOUSE_UP, mouse_up);
}

Looking sharp! Next step.

5.  Let us go ahead and create a function called drawLaser().  With this separate function piece, we can call just this one line in our ENTER_FRAME event, and the code will cleanly execute every time. It looks nicer, and is easier to understand for our fellow readers.

First thing’s first, since our skull has TWO eye sockets, we are going to draw TWO laser beams (of course that’s why we create two instances in the init() function).  Our laser beams are completely procedural.. no tweening or pre-created movieclips. Since everything is dynamically drawn, it is easy to tweak, and easy to update at your convenience. To update a color, simply change one line; to change the width, just update one variable, etc.. I hope, after seeing many of the flash tutorials on flashcove.net, you see there are great benefits in creating things dynamically. Not only is it faster, but also more customizable.

The laser beam effect in this flash game tutorial consists of a single line drawn, in addition to a blur and glow filter. The line is a dark red, the glow is a light red, and the blur effect gives softer edges for a polished representation. This is done as follows:

function drawLaser(percent:Number):void {
    laserbeam1.graphics.clear(); //first clear the old drawings (if any)
    laserbeam1.graphics.lineStyle(4,0xF75D59); //set line settings to 4px width, and a darkish red

    laserbeam1.graphics.moveTo(60,65); ///This is where we start drawing
    laserbeam1.graphics.lineTo(60 + (mouseX-60)*percent, 65 + (mouseY-65)*percent); //this is where we draw to
    var glowy:GlowFilter = new GlowFilter(); //init a glow filter
    glowy.color = 0xE77471; //set a soft red color
    glowy.blurX = 3; //blur the glow
    glowy.blurY = 3;
    glowy.strength = 100; //keep standard strength value
    glowy.quality = 3; //redraw 3 times to make high quality glow
    glowy.alpha = 0.2; //set a low alpha so it doesn't look too invasive

    var blurFilter:BlurFilter = new BlurFilter(); //init a blur filter
    blurFilter.blurX = 5; //set standard blur values
    blurFilter.blurY = 5;
    var filtersArray:Array = new Array(glowy, blurFilter); //this"filterArray" stores both the blur and glow
    laserbeam1.filters = filtersArray; //assign to laser1

    laserbeam2.graphics.clear(); //clear laser2
    laserbeam2.graphics.lineStyle(4,0xF75D59); //set it to the same red color
    laserbeam2.graphics.moveTo(82,65); ///This is where we start drawing
    laserbeam2.graphics.lineTo(82 + (mouseX-82)*percent, 65 + (mouseY-65)*percent); //this is where we draw to
    laserbeam2.filters = filtersArray; //assign the same blur and glow filters
}

The comments are pretty self explanatory for most of this code, but the biggest thing to be noted is that we are passing a parameter in to the function. This “percent” is what we use to draw the progressive laser animation upon start-up.

When we call drawLaser() every frame in the main EVENT_FRAME function, we have to pass in the global percent_level so that percent has the correct value to use.  The numbers (60,65) and (82,65) that you see in my code example are the specific pixel locations of the skull eye sockets. If you’re implementing this yourself, you’ll have to manually determine those locations through some trial and error (Either that, or just use the lasers_and_smoke.fla file located at the top).

6. We have got the flash laser generation function coded up, now what we need to do is calculate the percentage for the laser beam tween effect.  We need to increment the percentage force inside enter_frame, and we also need to reset it to zero every time the mouse button is lifted, as we have to start over again.

The new code for enter_frame, therefore, looks like this:

function enter_frame (e:Event):void {
    if(mouseState){
        if(percent_level < 1){ //if we don't have full power beam, crank it up
            percent_level += 0.34;
        }
        else{
            percent_level = 1; //if we do, keep it at a 1:1 ratio so it doesn't over shoot
        }
        drawLaser(percent_level); //pass the value in
    }
}

and the new mouse_up function looks like this (we also have to clear the graphics on MOUSE_UP too):

function mouse_up (e:MouseEvent):void {
    laserbeam1.graphics.clear(); //clear the laser1 graphic
    laserbeam2.graphics.clear();//clear the laser2 graphic
    percent_level = 0; //reset our charge
    mouseState = false; //turn off the boolean
}

Of course, at the very bottom of our actionscript file, we need 1 more line:

init();

 

Throwing all of this code together, and compiling your flash file via Ctrl+Enter, gives us the following laser effect in flash!

 

For the smoke effects in our flash game application, in addition to the Easter Egg collision detection, please keep on the lookout for part two of this laser and smoke effects in Flash Tutorial on flashcove.net!

 

Thanks for tuning in! (And have a Happy Flash Loaded Easter!)

(TO VIEW THE SECOND PART OF THIS TUTORIAL, GO TO THE LINK DIRECTLY BELOW!)

http://flashcove.net/577/part-2-laser-beams-and-smoke-effects-in-flash-games/

-Dave at the FlashCove (http://flashcove.net)

About Dave

Hey Guys! I'm Dave, an Ohio State CSE alumni who just recently started work in the industry. I'm a flash hobbyist at heart, and love making flash games and tutorials when the time permits. Check out what flash tutorials are available on the site, and don't forget to "Like Us!" on Facebook!