Wednesday, September 28, 2011

What is flash player?


What is flash player?

With Flash Player, you can view the interactive animation and entertainment on the Web pages. To get the full power of the Web sites, you need to download and install the latest version of the Flash player. This site  requires a JavaScript-enabled browser, also you need to make sure that ActiveX is enabled if you are using Internet Explorer browser.
Adobe provides a free Flash Plugin that allows you to view, navigate, and print Flash files across all major computing platforms. It is free and can be easily downloaded from Adobe web site

How to make a flash game? Part 1
How to make a flash game? Part 2

Tuesday, September 27, 2011

How to make a flash game? Part 2



Lets start the second part of the how to make a flash game tutorial. In this article I will continue working from previous tutorial with our ball character, controlled by the player. I will show you how to make the ball jump, with a real gravity behavior, bounce when hit the ground and limiting the player's ball within the screen.


Making a jumping ball. Creating the ball character
First we have to make the character, please refer to the previous tutorial where these steps are explained in details. 
  • Create the new project,
  • Draw the ball circled character,
  • Convert it to a Symbol with our instance 'ball'. 
You should have something like this

Writing the script for jump handling 


onClipEvent (load) {
        GroundY = 
_y;//so we know where to end the jump
        Jumping = false;//is player jumping?
        JumpPower = 30; //Initial power of the jump, the more the higher it goes
        JumpSpeed = 0; //jump direction , =0 is Still , >0 is going Down , <0 is going Up
        Gravity = 3.5; //This is the force of the gravity pulling it down
}

onClipEvent (enterFrame) {
        
var tmpY;
        
if(Jumping==true){
            
   //if jumping...
                JumpSpeed += Gravity; // Apply gravity force
                tmpY = _y + JumpSpeed;//Calculate new y position
               //check if have touched back to the ground
               if(tmpY >= GroundY){
                       
//Player is back to ground
                        tmpY = GroundY; //set player to the ground
                        Jumping=false;//disable jumping since we have returned to ground
                }
               
_y = tmpY;//Set the new players position
               
        }
else{
              
 //if not jumping..
               if(Key.isDown(Key.SPACE)){
                       
//if Space is press
                        JumpSpeed = -JumpPower; //Initialise speed ( negative because we are going up )
                        Jumping=true;//Activate jumping
                }
        }
}

I commented every line of the code so I don't think any further explanations are necessary.
You can test the flash on movie bellow or download the source code.


Flash Demo (click on the ball and press the space key to make ball jump)


Adding the bouncing behavior
Now we should add a little script to make a ball bounce back instead of sticking on the ground. You should remember that ball when bounce it will loose some energy so it will not reach the same height as before.. until it comes to rest on the ground. Here is a new code added in bold and colored

onClipEvent (load) {
        GroundY = _y;//so we know where to end the jump
        Jumping = false;//is player jumping?
        JumpPower = 30; //Initial power of the jump, the more the higher it goes
        JumpSpeed = 0; //jump direction , =0 is Still , >0 is going Down , <0 is going Up
        Gravity = 3.5; //This is the force of the gravity pulling it down

        BounceEnergyLoss= 5; //Energy lost during bouncing
        MinimunBounceSpeed = 1; //If the speed to bounce back is less than this then don't bounce
}
onClipEvent (enterFrame) {
        var tmpY;
        if(Jumping==true){
               //if jumping...
                JumpSpeed += Gravity; // Apply gravity force
                tmpY = _y + JumpSpeed;//Calculate new y position
               //check if have touched back to the ground
               if(tmpY >= GroundY){
                       //Player is back to ground
                        tmpY = GroundY; //set player to the ground

                        Jumping=false;//disable jumping since we have returned to ground
                        JumpSpeed -= BounceEnergyLoss; //decrease speed
                        //check if it must stop bouncing
                        if(JumpSpeed < MinimunBounceSpeed){
                               //stop bounce
                                Jumping=false;
                        }

                        JumpSpeed = -JumpSpeed; //change direction ( to bounce up again )
                }
               _y = tmpY;//Set the new players position
               
        }else{
               //if not jumping..
               if(Key.isDown(Key.SPACE)){
                       //if Space is press
                        JumpSpeed = -JumpPower; //Initialise speed ( negative because we are going up )
                        Jumping=true;//Activate jumping
                }
        }
}


You can also test this bellow
Flash Demo (click on the ball and press the space key to make ball jump)


Adding the Left/Right Moving and Screen Boundaries
Adding the Left/Right moving script
I will just copy and paste the code from the first part, nothing new here. New code and the changes/additions will be bold and colored while the removed parts will be strikethrough.


onClipEvent (load) {
        GroundY = _y;//so we know where to end the jump
        Jumping = false;//is player jumping?
        JumpPower = 30; //Initial power of the jump, the more the higher it goes
        JumpSpeed = 0; //jump direction , =0 is Still , >0 is going Down , <0 is going Up
        Gravity = 3.5; //This is the force of the gravity pulling it down

        BounceEnergyLoss = 7; //Energy lost during bouncing
        MinimunBounceSpeed = 1; //If the speed to bounce back is less than this then don't bounce

}

onClipEvent (enterFrame) {
        var tmpY;
        if(Jumping==true){
               //if jumping...
                JumpSpeed += Gravity; // Apply gravity force
                tmpY = _y + JumpSpeed;//Calculate new y position
               //check if have touched back to the ground
               if(tmpY >= GroundY){
                       //Player is back to ground
                        tmpY = GroundY; //set player to the ground

                        JumpSpeed -= BounceEnergyLoss; //decrease speed
                        //check if it must stop bouncing
                        if (JumpSpeed < MinimunBounceSpeed){
                               //stop bounce
                                Jumping=false;
                        }
                        JumpSpeed = -JumpSpeed; //change direction ( to bounce up again )
                }
               _y = tmpY;//Set the new players position
               
        }else{
               //if not jumping..
               if(Key.isDown(Key.SPACE)){
                       //if Space is press
                        JumpSpeed = -JumpPower; //Initialise speed ( negative because we are going up )
                        Jumping=true;//Activate jumping
                }
        }

        
//Moving code
        
if(Key.isDown(Key.LEFT)){
               
_x-=5;
        }
        
if (Key.isDown(Key.RIGHT)){
               
_x+=5;
        }

}

You can also test this bellow
Flash Demo (click on the ball and press the space key to make ball jump)

Adding the Screen Limits

Now to add the screen limits we need to add a little script with some statements

onClipEvent (load) {
        GroundY = _y;//so we know where to end the jump
        Jumping = false;//is player jumping?
        JumpPower = 30; //Initial power of the jump, the more the higher it goes
        JumpSpeed = 0; //jump direction , =0 is Still , >0 is going Down , <0 is going Up
        Gravity = 3.5; //This is the force of the gravity pulling it down

        BounceEnergyLoss = 7; //Energy lost during bouncing
        MinimunBounceSpeed = 1; //If the speed to bounce back is less than this then don't bounce
        
ScreenWidth = 550;//Screen width
}

onClipEvent (enterFrame) {
        var tmpY;
        if(Jumping==true){
               //if jumping...
                JumpSpeed += Gravity; // Apply gravity force
                tmpY = _y + JumpSpeed;//Calculate new y position
               //check if have touched back to the ground
               if(tmpY >= GroundY){
                       //Player is back to ground
                        tmpY = GroundY; //set player to the ground

                        JumpSpeed -= BounceEnergyLoss; //decrease speed
                        //check if it must stop bouncing
                        if (JumpSpeed < MinimunBounceSpeed){
                               //stop bounce
                                Jumping=false;
                        }
                        JumpSpeed = -JumpSpeed; //change direction ( to bounce up again )
                }
               _y = tmpY;//Set the new players position
               
        }else{
               //if not jumping..
               if(Key.isDown(Key.SPACE)){
                       //if Space is press
                        JumpSpeed = -JumpPower; //Initialise speed ( negative because we are going up )
                        Jumping=true;//Activate jumping
                }
        }

        //Moving code
        if (Key.isDown(Key.LEFT)){
                if((_x-5) > (_width/2)) {
                       _x-=5;
                }
        }
        if (Key.isDown(Key.RIGHT)){
                if((_x+5) < ScreenWidth-(_width/2)) {
                       _x+=5;
                }
        }
}

You can also test this bellow
Flash Demo (click on the ball and press the space key to make ball jump)


So, in this tutorial you learned the basic fundamentals of how to make a flash game. You are now familiar with designing of characters, programming its behavior, responding to different keyboard events.


Resources used:
http://www.tutorialized.com/


What is flash player?
How to make a flash game? Part 1
Download Final Source Code File ( .fla )

How to make a flash game? Part 1

Welcome to the first part of how to make a flash game tutorial. This part describes the basic approaches and principles about making games using Adobe Flash 8. You can see some of my Flash games at the general projects section. This tutorial is written to help anyone who just started with game development and try to make your life easier by sharing some of my knowledge on this matter so you won't go crazy trying to figure things out by yourself.

Some history
Flash was introduced as a web multimedia tool, so web developers could create interactive animations for their websites. Later after it got more popular it also got more powerful, quick and complicated, allowing the programmer to do much more work than just simple interactive animation. Flash was created by macromedia team and was bought by adobe some time ago. The latest flash version is Adobe Flash 8, and you can download it hereThe Flash CS3 is the version to come and it is not that far away from publishing. The next version will introduce many new great features , however you can use almost everything you know from version 8.

Actionscript
Actionscript is a programming language which is used by flash. When you create your own game you program it on actionscript. It is a scripting language which allow you to control the flow of game and it's similar to Javascript or C++ . Actionscript is an object-oriented language, so if you already know a C++ then it can be very helpful for you.

The First Interactive Flash Animation
So, lets start making simple application. It will be a basis for learning of how to make a flash game. First we will create a circled character. Our mission is to be able to move this circle in the Flash screen using the keyboards left/right arrow keys. In this example we will make a Circle for our character.

To make the character just pick the oval tool from the toolbar and draw a circle.
Making the oval tool for your flash game

Then select the circle and right click on it. Choose the "Convert to Symbol" option form the popup menu

Name the new symbol as 'Ball' and make sure you have the Type : Movie Clip selected

You have created a new symbol, now select it and name this instance also as 'Ball', you can find this in the Properties tab.


Writing the Script
To make the ball moved by keyboard you should write the code. Just select the symbol and open the actions tab


The Script:

onClipEvent (enterFrame) {
       if (Key.isDown(Key.LEFT)){
             _x-=3;
       }
       if (Key.isDown(Key.RIGHT)){
             _x+=3;
       }
}

The screenshot :



Script explanation
Script is intended for moving our character to Left/Right according to key which is pressed

Movie Events
We have onClipEvent (enterFrame)  which executes every time a new frame is started. Every flash clip has its own onClipEvent which is executed depending on the argument in brackets.

Keyboard functions
To get keyboard keys that are pressed we use theKey.isDown function. theKey.LEFT is just to check for the left arrow key. if the players is holding the left key down then theKey.isDown(Key.LEFT) will be true, so the code inside the if will be executed.


Changing the Movie parameters
If we want to move the ball to the left or right we should change it's X coordinate on the screen. To move it left we must decrease the X coordinate and to move it right we must increase the X coordinate. To change a movieclips x value we do MovieClipName._x= thevalue;. Other useful parameters are : _x , _y , _alpha , ._width , _height , _visible ...
In general these things can be very similar for your future scripts for moving characters, so when you  will make your own flash game, you will see that these approaches will be very familiar for you.


Testing the flash movie

Flash Demo (click on the ball and press the space key to make ball jump)

Changing the frame rate
If your version of the game not so smooth as expected then you must change the frame rate of the movie.. the default value is 12 fps. Setting it to about 30 fps will do smoothing fine. You can change it from movie properties



So, in this tutorial you learned the basic fundamentals of how to make a flash game. You are now familiar with designing of characters, programming its behavior, responding to different keyboard events. Please continue reading second part of this tutorial to get more detailed explanation

Resources used:
http://www.tutorialized.com/



What is flash player?
How to make a flash game? Part 2
Download Tutorial Source file ( .fla )