Flash Beginner Game with Object Oriented Programming in Flash Professional

Frame by frame animation in flash.

In this simple Flash tutorial, we will go through making a simple click-and-move-to-point game with OOP (Object Oriented Programming).

At least a basic knowledge of Flash Professional, Actionscript and Math is recommended.

About the game. Click anywhere on the stage and make the character move to that point. The character will also follow that point.

Principles and techniques covered:

– OOP (Object Oriented Programming)

– Static functions

– Reusability of a general purpose math class

– Game development

– Math

Step 1)

Create a class called Main, save it in the project’s folder and paste in the following code:

<Main.as code>

 


package

{

    import flash.display.Sprite;

    import flash.events.Event;

    import flash.events.MouseEvent;

    public final class Main extends Sprite

    {

        private var player:Player;

        public function Main()

        {

            player = new Player();

            player.x = stage.stageWidth / 2;

            player.y = stage.stageHeight / 2;

            addChild(player);

            addEventListener(Event.ENTER_FRAME, enterFrameHandler);

            stage.addEventListener(MouseEvent.CLICK, clickHandler);

        }

        private function enterFrameHandler(event:Event):void

        {

        player.enterFrameFunction();

        }

       
        private function clickHandler(event:MouseEvent):void

        {

        player.setPoint(mouseX, mouseY);

        }

    }

}

 

Create a class called Player, save it in the project’s folder and paste in the following code:

<Player.as code>

 


package

{

    import flash.display.Sprite;

    import flash.geom.Point;

    
    public final class Player extends Sprite

    {

        private var moving:Boolean = false;

        private var px:Number;

        private var py:Number;

        private static const SPEED:uint = 12;

        public function Player()

        {

        }

        public function enterFrameFunction():void

        {

            if (moving)

            {

                if (MathFunctions.dist(new Point(x, y), new Point(px, py)) > SPEED)

                {

                    rotation = MathFunctions.pointAtAngle(x, y, px, py);

                    x += Math.cos(MathFunctions.anglesToRadians(rotation)) * SPEED;

                    y += Math.sin(MathFunctions.anglesToRadians(rotation)) * SPEED;

                }

                else

                {

                    x = px;

                    y = py;

                    moving = false;

                }

            }

        }

        public function setPoint(px:Number, py:Number):void

        {

            if (px != x || py != y)

            {

                this.px = px;

                this.py = py;

                moving = true;

            }

        }

    }

}

 

Create a class called MathFunctions, save it in the project’s folder and paste in the following code:

<MathFunctions.as code>

 


package

{

    import flash.geom.Point;

    
    public final class MathFunctions

    {

        public static function dist(point1:Point,point2:Point):Number

        {

            return Math.sqrt(Math.pow(Math.abs(point1.x - point2.x),2)+Math.pow(Math.abs(point1.y - point2.y),2));

        }

        public static function pointAtAngle(x1:Number,y1:Number,posx:Number,posy:Number):Number

        {

            return radiansToAngles(Math.atan2(posy - y1, posx - x1));

        }

        public static function radiansToAngles(radians:Number):Number

        {

            return radians / Math.PI * 180;

        }

        public static function anglesToRadians(angles:Number):Number

        {

            return angles * Math.PI / 180;

        }

    }

}

 

Step 2)

Link Main as the main class.

 

Step 3)

* Draw a character. I drew a circle with an arrow to make it simple.

* The arrow must be pointing to the right at 0 degrees rotation. Or if there’s no arrow, the character has to face the right at 0 degrees.

* Convert the character to a symbol and link it to the class Player.

* Do not put the character on the stage, leave the stage empty.

 

Code explanation:

 

*Main.as:

– Main extends Sprite, because there is no need for more frames in this example.

– In the constructor (public function Main), we create a new instance of Player, add it to the stage and place it at the center of the stage. We also add event listeners for enter frame and clicking.

– In the enterFrameHandler function, all we do is call the player instance’s enterFrameFunction function.

– In the clickHandler function, we call the instance’s internal property setPoint with arguments mouseX, and mouseY.

*Player.as:

Variables:

moving– if the player is moving towards a clicked point

px– x axis location of the clicked point

py – y axis location of the clicked point

SPEED– constant value for the player’s movement speed

Functions:

enterFrameFunction()

First we check if the distance between the player and the clicked point is greater than the SPEED constant. We do this using the MathFunction class’s static dist function, which we will cover later.

If the distance is large enough, the rotation sets to point towards the clicked point using the MathFunction class’s static pointAtAngle function.

The player’s x position gets altered by the cosine value of the player’s rotation multiplied by the SPEED constant. Same for the y position, except by the sine value.

If the distance isn’t large enough, then the last few actions won’t happen. Instead the moving variable will be set to false and the player will stop moving.

 

setPoint(px:Number, py:Number)

This is a public function and it sets the point of movement’s x and y axis locations. If that location is by any chance the same as the player’s current location, the player won’t start moving.

 

*MathFunctions.as:

dist function:

Checks the distance between 2 points.

pointAtAngle function:

Checks the angle between 2 locations. Arguments are not of type Point, but rather in the form of x1, y1, x2, y2.

radiansToAngles function:

Converts a radian value to a regular angle value.

anglesToRadians function:

Converts a regular angle value to a radian value.

This class is reusable. Its functions are static and can be called without making an instance of the class.

Final screenshot (point and click to move a simple character):

 

Step 4)

Test the SWF file.

PointClickExampleSWF

 

More Flash tutorials:

 

If you liked this tutorial, please share with your friends: