Part 2: Laser Beams and Smoke Effects in Flash Games


Continuing from PART 1 of “Laser Beams and Smoke Effects in Flash Games,” we now need to integrate the smoke effects and easter egg collision detection in to our flash game!

The final laser and smoke 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, as a reminder, here’s what were going for with this laser and smoke flash game:

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!

Once we are caught up with PART 1 of the flash game tutorial,it is time to implement the smoke effect!  To begin, let’s draw the art.

On the top menu, select Insert -> New Symbol (Ctrl + F8), set it to be a type MovieClip and name it “smoke“. Inside, draw a small circle (50px by 50px), centered around the origin. For the color, make it a two-tone gradient, with a light gray in the center, fading to a darker gray on the outside. The outside, darker gray; give it a low alpha (10%-ish) to help keep focus on the center color. Settings should look somewhat like the picture below in flash.

Once the smoky circle is drawn, we’re going to insert yet another MovieClip. On the top menu, select Insert -> New Symbol (Ctrl + F8), set it to be a type MovieClip and name it “smoke_shell“.  Once inside this blank MovieClip shell, drag and drop an instance of the  “smoke” MovieClip from the library in to the “smoke_shell,” and center it about the axis point.

Next, select that instance of the smoke on the stage, and add a Blur Filter using the “Filters” submenu (mine’s on the left-hand side for the Designer Flash CS4 Layout). Set the blur intensity to be 28 for both BlurX and BlurY. You should get something sleek looking like this smoke particle:

 

Once that’s done, we need to export the “smoke_shell” for actionscript.  Find the MovieClip in the flash’s library tab, Right Click -> Properties, and then check the “Export for Actionscript” box. Then we should be good to go; time to draw some easter eggs, and then write some actionscript 3 code (AS3).

________________________________________________________________________________

For the easter eggs in the flash game, we have just a single MovieClip, and several frame inside all with different art. Once a brand new instance of the egg is created, it randomly will chose on of the art sets to display. This is a great way to introduce random objects and detail in to your flash games and applications without too much additional effort needed. Just a couple different sets of art, and you are good to go!

With that, on the top menu, select Insert -> New Symbol (Ctrl + F8), set it to be a type MovieClip and name it “egg“.  Inside I just drew a nice, oblong, egg looking oval, and copied and pasted it across 10 frames. For each frame, draw a little bit of art on each one, each unique, and different colors!

Then, on the first frame, Right Click -> Actions, and insert this line of code:

 this.gotoAndStop(Math.ceil(Math.random() * 10));

What that does is guarantees the egg picks, randomly, one of the 10 drawn art sets, and moves it into position upon creation of the instance on our flash stage.

My egg setup looks something like this, which you can grab in the lasers_and_smoke.fla file above if you don’t want to draw something yourself.  (I’ve also got the shade and shadow layers to give a dark overtone on the egg, make it fit the flash tutorial scene a little nicer.)

Once we’re set on the art, head back to the main “Scene1″ stage. Drag and drop several instances of the egg (from the flash library) on to the stage, in a nice assortment, just like you see in the demo at the top of the page.  Give each instance of the egg a unique name, as follows:  “egg1,” “egg2,” “egg3,” “egg4,” etc..  Reason for this, inside our actionscript 3 source code, the laser is going to iterate over potential collisions (eggs) to determine if we should draw a flash smoke effect or not.

(I also made a MovieClip containing the ‘countertop’ that the eggs are resting on. Feel free to draw one, and drag a single instance on to the stage and label it ‘counter’ as I did, so it can be accessible by our actionscript 3 code references.)

 

After the smoke particles, eggs, and counter tops are drawn in flash, all that’s left is a little actionscript 3 (AS3) code!

____________________________________________________________

The only thing that needs to be updated in our preexisting actionscript 3 (AS3) code is the enter_frame function. In the else bracket, we are going to add a couple lines of as3 code, as follows:

FROM THIS:

else{
    percent_level = 1; //if we do, keep it at a 1:1 ratio so it doesn't over shoot
}

TO THIS:

else{
    if(Math.random() < 0.25){
        for(var iter:Number = 1; iter < 19; iter++){
            if(MovieClip(root)["e"+iter].hitTestPoint(mouseX,mouseY,true)){
                make_smoke();
                break;
            }
        }
        if(counter.hitTestPoint(mouseX,mouseY)){
            make_smoke();
        }
    }
    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

 

I have 19 eggs on my screen, and I labeled them “e1,” “e2,” “e3,” etc.. So, to check collision with my laser effect (just the mouseX/mouseY positions), I iterate over all possibilities and do a HitTestPoint() with my current mouse positions! Once a collsiion is found to be true, we then call the function make_smoke() (to be implemented in just a second).  After that collision is found, we then put the line of code break;

Once that first collision is found, we don’t need to keep looking because one egg was already found! So to save computation time, we can just exit the for loop and move on to the next task.

Also appended just below the for loop is a quick check against the countertop to see if we are colliding with that too. Nothing new or special.

_____________________________________________

All that’s needed now is our make_smoke() function, and it’s helper/destructor function dissipate(). The as3 code is as follows:

function make_smoke(){
    var smokie:smoke_shell = new smoke_shell();
    smokie.x = mouseX + ((Math.random() * 40) - 20);
    smokie.y = mouseY + ((Math.random() * 20) - 10);
    smokie.scaleX = 0.50;
    smokie.scaleY = 0.50;
    smokie.addEventListener(Event.ENTER_FRAME,dissipate);
    addChild(smokie);
}

function dissipate(e:Event):void {
    e.target.y-=2;
    e.target.alpha -= 0.01;
    e.target.scaleX += 0.0025;
    e.target.scaleY += 0.0025;

    if(e.target.alpha <= 0){
        e.target.removeEventListener(Event.ENTER_FRAME, dissipate);
        e.target.parent.removeChild(e.target);
        delete e.target.parent;
    }
}

In make_smoke(), all we do is create a new smoke movieclip instance, set it’s position to the current mouse position (in addition to a little jiggle so it looks random), shrink the scale down a bit, add the dissipate ENTER_FRAME event listener, and draw it to the screen.

Inside dissipate, we drift the smoke upwards on the screen, fade it’s alpha out, and grow it in size to give a “dissipation” effect in flash.  Once the smoke particle has completely lost visibility on the stage, remove the ENTER_FRAME event listener, remove it from view, and delete the object.

 

That’s it! Compile and run, and you should get something very similar to the demo shown above at the top of this flash game tutorial.

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

http://flashcove.net/496/laser-and-smoke-effects/

Once again, enjoy the use of the absolutely free flash and as3 source code, and thanks for tuning in!

-Dave at the Flash Cove (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!