Wednesday, September 28, 2011

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

Tuesday, September 27, 2011

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) {vartmpY;if(Jumping==true){ //if jumping... JumpSpeed += Gravity;// Apply gravity force tmpY =_y+ JumpSpeed;//Calculate new y position //check if have touched back to the groundif(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 groundJumping=false;//disable jumping since we have returned to ground JumpSpeed -= BounceEnergyLoss;//decrease speed//check if it must stop bouncingif(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 bellowFlash 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}

You can also test this bellowFlash 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 bounceScreenWidth = 550;//Screen width}

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.

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 here. The 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 AnimationSo, 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.

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

Script explanationScript 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 rateIf 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