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

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 )