3D Perspective Shooter in Flash – Paint Splatter Effect


 

This large and detailed tutorial will teach you 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. All actionscript / AS3 source code and artistic effects are free to download, and I hope using these examples you too can create some pretty awesome flash games, applications, and effects. There are a couple subtle flash effects in here; you may wish to follow along using my “cannon.fla” and “cannonball.as” source code I attached below. Playing with the demo at the top of this flash tutorial page will show you how effective such a simple paint effect can be in Flash.. and, at that, I am proud to present the following…

The final 3D paint cannon source code can be found right here:

Place both the actionscript and flash files in the same directory/folder, IN ADDITION TO THE CAURINA TWEENER PACKAGE, and then run the “cannon.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 start the development..

First thing we need to draw is a cannon (in 3D perspective.) Open up a new MovieClip, and name it “cannon.” Inside, draw your art such that the very bottom center base of your cannon art is based at the center index point for the MovieClip.  The indexing should look something like the setup in the picture below; hopefully you can draw a letter better looking cannon too lol.

Next step, insert a new layer inside the “cannon” MovieClip,  and draw a small little red dot. Right Click that red dot, and say “Convert to MovieClip,” call it “launchspot“.  Click back in to the “cannon” MoveiClip, select the instance of the “launchspot,” and name this one specifically “launchspot” again. When we access from as3, this is the name we are going to call.  The reason though, for this little dot existing, is that when I click to fire cannonballs, I need an exact place to launch to cannonballs from, so it looks realistic.  If this  is located on the cannon at all times, I can use it’s internal position to index and place my procedurally generated MovieClips from the actionscript / AS3 code.  You should place the instance of the “launchspot” MovieClip somewhere at the base of the barrel of the cannon, just like in this picture from the flash game tutorial:

Once the launchspot is set for the cannon MovieClip in the flash ame, it is time to setup the CANNONBALL. Insert a new MovieClip via Insert -> New Symbol.., and name it “cannonball“.  Inside, using the sphere tool from inside the flash IDE, draw a radial colored circle with a thick (5 pixel or so) black border.  Based the alignment of the game’s cannonball around the center.  My flash cannonball looks like this:

Once the art is done, we actually need to export the “cannonball” for use in Actionscript 3 as well. Find the cannonball in the flash library, Right Click -> Properties -> Check the “Export for Actionscript,” and leave the name as “cannonball“  We’re done with this art stuff for now, lets get the the as3 source code!

Go the the main “Scene 1″ part of yuor flash porgram, and on frame 1 of the file, under the “Actions” tab, write in the following as3 code..

import caurina.transitions.Tweener;  //import the Tweener class from the Caurina package.

stage.addEventListener(MouseEvent.MOUSE_MOVE, mm);
stage.addEventListener(MouseEvent.MOUSE_UP, mu);

function mm(e:MouseEvent):void{
cannon.x = 275 - (275 - mouseX)*0.05;
cannon.rotation = -(275 - mouseX)*0.05;
}

function mu(e:MouseEvent):void{
var anglec:Number = -cannon.rotation;
var xposc:Number = cannon.x;
Tweener.addTween(cannon, {y: 540, x: xposc + anglec*(0.5),  time: 0.035, transition: "linear"});
Tweener.addTween(cannon, {y: 530, x: xposc, time: 0.055, delay: 0.035, transition: "linear"});

//make cannonball
var loca:Point = new Point(cannon.launchspot.x,cannon.launchspot.y);
var glob:Point = cannon.launchspot.localToGlobal(loca);
glob.x = 275 + (glob.x - 275)*0.4 - anglec;
var cb:cannonball = new cannonball(glob.x, 340, -anglec*0.25 - (anglec*0.1), 400 - mouseY);

addChild(cb);
swapChildren(cb,cannon);
}

We only need two global listeners on the flash game demo, a MOUSE_MOVE and a MOUSE_UP (mouse_up is the same as a mouse click, but only fires when we lift the key.)  In the MOUSE_MOVE function, “mm” all we do is move the cannon left and right, and also give it a little tilt with the .rotation to help make the 3D perspective look a little more realistic in our flash game.  The 275 value just represents where our instance of the cannon sits on the stage, dead center on a 550 pixel width scene..

In the MOUSE_UP function, we are doing two things.. a kickback, or jiggle, on the cannon when it’s fired so it looks realistically 3D in flash, and of course, the actual generating of a cannon ball.  The  two Tweener calls, using the caurina add-in package, give us our kickback animation. To learn how to do this, you can visit the Caurina tweening tutorial to get a better understanding at this link, http://flashcove.net/163/programatic-tweening-flash/.  The second part, where we make the cannon ball, we have to know the point of launch first, since it is not simply our Mouse Position. To do this, we use the “launchspot” MovieClip from inside the cannon! The only thing though, is it’s position is RELATIVE to the center of the inside of the MovieClip, not to the global stage coordinates of our flash game.

Thankfully though, there’s a function called localToGlobal(), that can do a conversion for us to the stage coordinates in the flash game tutorial! All we have to do is pass in the local coordinate points (I.E. the cannon.launchspot.x and cannon.launchspot.y in loca) to localToGlobal, and call it with the cannon prefix.

This positioning isn’t perfect though with the localToGlobal() position, so after a few little test tweaks, we get much more realistic projection points in flash after modifying glob.x and messing with the y input value for the cannon ball constructor. Speaking of the constructor, it takes in three variables, the x-position, y-position, and velocity.  The code on the backend for this cannon ball is in the actionsciprt 3 / AS3 file cannonball.as. We will cover this code in just a second.

The final part, addChild() and swapChildren() flash functions, simply add the cannonball to the screen and then swaps depths with the cannon launcher itself in flash. Reason we want to do this, is because we want the cannon ball to come from BEHIND the cannon, and addChild() automatically adds to the top. swapChildren() easily fixes that problem and makes the cannon ball launch correctly from behind when the flash game tutorial is compiled and run.

____________________________________________________

The main function code is now complete, time for the separate actionscript 3 / AS3 file, cannonball.as:

package
{
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.filters.*;
import flash.geom.ColorTransform;

public class cannonball extends MovieClip
{
    public static const START_DELAY:Number = 10; //how long our fountain will spurt color
    public static const VELOCITY:Number = 10; //how fast our particles shoot up
    public static const GRAVITY:Number = 0.75; //how quickly are the particles pulled down

    public var start_delay:Number;
    public var time_to_live:Number;
    public var color:uint;
    public var spread:Number;
    public var accel:Number;

    public function cannonball(xpos:Number, ypos:Number, spread_in:Number, veloc:Number)
    {
        this.x = xpos;
        this.y = ypos;

        time_to_live = 50;
        var ratio:Number = (veloc / 400);
        veloc = (70*ratio) + 180;
        accel = -veloc/10;
        spread = spread_in;

        this.addEventListener(Event.ENTER_FRAME, update);
    }

    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
        this.removeEventListener(Event.ENTER_FRAME, update);
        MovieClip(root).removeChild(this);
        }

    }

}
}

This  actionscript 3 source code looks surprisingly like the particle effect setup I covered in a previous tutorial, which can be found right here: http://flashcove.net/353/particle-effects…structure/.  In fact, the only real difference in the update portion is that I’m shrinking the scale (AKA size) of the cannonball so it looks like it is shrinking off in to the distance.

For the initialization in the cannonball() constructor function though, we set the X and Y positions to what was given to us in the passed-in parameters.  What is passed in from the veloc parameter is a number representing where the mouse was at on the Y-axis at the time of calling. Since the height of the screen is 400 pixels, I grab a percentage ratio of how far along the mouse position is, multiply that percentage  by the maximum velocity I want (70), and add it to a base value (180o ensure my balls never get shot below the screen height. I decided on these two values, 70 and 180, by using the actionscript trace command and some trial and error on velocity values.

Assuming you have everything setup correctly, and both the cannonball.as code and the main scene code written properly, if you compile and run the flash game via Ctrl + Enter, you will get the current state of the 3D perspective cannonball game..

Point and click anywhere on the screen to fire the cannon!

PART 2 of this flash game tutorial will be put up online soon, so please stay tuned! In the next part we will cover the sound effects, colorization, and paint splatter effects that you saw in the flash game demo at the top of the page!

Thanks for tuning in to another great, free, flash game tutorial!

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