Part 2: 3D Perspective Shooter in Flash – Paint Splatter Effect


 This is PART 2 of the flash shooter tutorial, where we learned the basics of creating a 3D perspective cannon in flash, paint splattering effects, projectile paths in AS3, sound effect imports, and mouse-controlled user input.

Again, all actionscript / AS3 source code and artistic effects are free to download, so go ahead and use these code segments and flash game styles in your own project.

What’s left to cover is:

  • the coloring of our cannonballs
  • colored splatter animations (both the random colors and actual masking)
  • sound effects for a realistic feel

Before we begin, as in the previous part of the tutorial, here is the source code and example flash demo of what we are trying to achieve:

Place both the actionscript and flash files in the same directory/folder, IN ADDITION TO THE CAURINA TWEENER PACKAGE, and then run the “cannon_final.fla”

To get the caurina package, either search it on google, or get the reference from my caurina tutorial, over at the flash cove link:

http://flashcove.net/163/programatic-tweening-flash/

Here’s the final flash paint cannon game, for your enjoyment:

Point and click anywhere on the screen to fire the cannon! A randomly colored ball will fly out and splatter on the backboard, in that random color, size, and orientation. This flash game DOES INCLUDE SOUND EFFECTS, so if you'd like to hear those effects when you click and when the paint hits the wall, turn up the volume!

So, let’s wrap this baby up. Next step in creation for this flash game tutorial, coloring of the cannonballs.

 

Head inside the “cannonball” MovieClip by double clicking it inside the Library. Select the middle, white filling, copy (Crtl+C), and paste in place (Crtl+Shift+V).  Right click on that new instance of the filling, and select “Convert to Symbol…“  Name it “front,” and name that single instance inside the cannonball “front” as well.

Only other thing left to do for that, is inside the “front” MovieClip, set the alpha on each gradient color to 50%.  We want the color tinting in flash to only be partial, so you can see the distinguished curves and shadows on the cannonball, not just a solid boring color.

______________________________________

Now, for the paint effect, we use a masking technique.  I covered what this is in another masking tutorial on the flashcove site, so get acquainted with it there if you haven’t heard of the concept.

The hierarchy for our flash paint splatter effect is a triple MovieClip.  We’ve got a  “splat“, which, on each frame, has a unique paint splatter picture / art. Color doesn’t matter, just a unique image on each, centered around the crosshair. I’ve got 6 in my flash source file, and all I did to find them was search “paint splatter” images online.

Wrapped around this “splat” MovieClip is a MovieClip appropriately named “splat_wrap“, all this is, is an instance of a paint splat centered on stage and tinted to a pure, 100% white color. Reason being, we need it white so that when the further outer layer is tinted, we’re layering on top an impressionable color, and not black or orange like the naturally colored paint splatter effects are on the “splat” MovieClip. I uncreatively named my instance “spla“, which will be referenced in some actionscript 3 code later on. The setup will look something like this:

The last wrapper layer is a MovieClip called “splat_anim“.  Inside, it has an instance of a “splat_wrap” and an instance of a “masking” MovieClip.  The masking layer is what we use to give the appearance of paint flying out, as compared to the paint splatter effect image immediately appearing, and looking lame.

Only tricky thing about setting this up is we need two layers. Top layer is the “masking,” with the layer checked as “Mask“, and the bottom layer sub indented, with a “splat_wrap” instance named “splatter” laying behind.  It will look like this. The yellow blob is our masking.

Last part, the creation of our “masking” MovieClip class!  Remember that what’s colored is what’s visible. All I have is three frames, first that small blob, second a larger blob, and third a massive rectangle to make sure everything below is not-masked.  On that third frame, I also put a command on the line to keep our masking from going anywhere.

stop();

And that’s all there is to the art!  Make sure though, that the outermost layer, “splat_anim“, is checked as “Export for Actionscript,” keep the name the same. We’re going to be dynamically creating instances of this for each cannonball.

____________________________________

No actionscript 3 (AS3)  code change is needed in the “cannon.fla,” only the cannonball actionscript class file. Inside the cannonball constructor class ( the cannonball() part ), we need to modify the color before being launched!  So, our new constructor will look something like this:

public function update(e:Event){

    if(time_to_live > 0){ //we're in action
        this.x += spread;
        this.y += accel;
        this.scaleX -= 0.02;
        this.scaleY -= 0.02;
       
        time_to_live--;
        accel += GRAVITY;
    }
    else{
        //remove from screen
        var splat:splat_wrap = new splat_wrap();
        splat.x = this.x;
        splat.y = this.y;
        splat.splatter.spla.id = Math.ceil(Math.random() * 6);
        splat.splatter.rotation = (Math.random() * 360);
        splat.scaleX = (Math.random()*0.50) + 0.25;
        splat.scaleY = splat.scaleX;
       
        var myColor:ColorTransform = splat.transform.colorTransform;
        myColor.color = the_color;
        myColor.alphaOffset = 0.8;
        splat.transform.colorTransform = myColor;
       
        MovieClip(root).addChild(splat);
        MovieClip(root).swapChildren(splat,this);
        this.removeEventListener(Event.ENTER_FRAME, update);
        MovieClip(root).removeChild(this);
       
    }
}

Only thing the change in the source code is in our else bracket. We’re still removing the cannonball, but we’re also creating a splatter effect! Assign it to the same position as the cannonball, pick a random drawing of the paint splatter (one of the 6 for me), randomize the size and rotation, update the color reflection, add it to the stage, and swapDepths to the front!

The only real tricky thing in this code is assigning one of the 6 paint splatter effect drawings. In Flash, some things work on the back-end that we don’t understand. Since the Masking is changing frames 3 times, a new instance of splat is also being re-rendered, typically resetting the paint splatter drawing back to frame one. To avoid that, we set the “.id” to the frame we want, and then make a modification inside the “splat” MovieClip.

Inside the frame 1 source code, add the following lines:

this.gotoAndStop(this.id);
stop();

This should make the paint splatter effect decision seamless every time.

_________________________________

If you were to compile and run this flash tutorial right now, everything should work flawlessly, except where’s the sound effects!?

They’re actually trivially easy to implement. First thing though, is you need to find some free sound effects. Either you can look online, or just use the ones I did,



 

You can import these sound effects in to flash by selecting File in the top left -> Import -> Import to Library.. . Find the two mp3 files, and Ctrl+Click them onto the list.

Inside the library, find both instances, check the “Export for Actionscript” under properties, and name them “cannonmp3” and “thudmp3” respectively for Actionscript use.
________________________

Inside the cannonball.as file, right up with all the as3 variable declarations, add the follow line to import sound effects in flash.

var thud:thudmp3= new thudmp3();

And down inside the update function, in the else bracket, add one more line:

thud.play();

We now have the landing / paint splatter sound effect in our flash game tutorial!

Those same two lines also need to be placed inside the cannon.fla, except we need cannonmp3, not thudmp3. See if you can do that one yourself, and if you’re really stuck, just reference the absolutely free AS3 source code available for download at the top of the page!

Compile and run this flash tutorial game demo via “Ctrl+Enter” and you’ll see the beautiful flash masterpiece you just created!
_______

Thanks for tuning in to another amazingly in-depth and free flash tutorial on paint splatter effects, 3D perspective, and importing sound effects!

-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!