Making games is easy! Well, okay, maybe it’s actually kind of hard, but starting out is easy at least! In this post i will tell you how to create your own first flash game which will have a Ship which you can move around with arrow keys.
Requirements:
In this tutorial i will show you how you can create a simple movement game in adobe flash professional (actionscript 2.0). You need the following things to download to start your game building…
- Adobe flash professional
- Adobe photoshop or any other preferred tool to create your characters
Step 1: Creating an FLA source File
First we need to create an fla (Flash source file).
- Launch Adobe flash professional.
- From the top menu choose: File>New. A new document menu will popup.
- From the Type list, choose: Flash File (ActionScript 2.0) and click ok.
Now we have an FLA file. We can import graphics into it, and publish a swf from it. In the properties panel below the stage, change the size to 600×300 pixels, and the frame rate to 30 fps.
Step 2: Importing a Ship Graphic
Now we need a ship that we can fly with using our keyboard. We can either draw a ship directly in Flash or we can import a ship graphic. Here we will import a pre-made ship graphic.
- Click here to download the ship graphic. It will show in a new browser window, right-click on it and and save it to your computer. Or better yet draw and import your own ship.
- From the top menu choose: File>Import>Import to Stage.
- Navigate to the ship.png file that you downloaded, and click Import. Note that png’s can have transparent backgrounds but jpeg’s cant. Its best to use png’s.
Your ship should be there on the workspace.
Step 3: Converting it to a movie clip
Before we can add code to the ship we need to convert it to a movie clip.
- With the ship selected, from the top menu, choose: Modify>Convert to Symbol.
- Then choose the following settings: Name-Ship, Type-Movie Clip, Registration-Center, Identifier-Ship, Class-Ship, and select Export for ActionScript.
Now the ship is a movie clip.
Step 4: Creating a Ship Class
The ship Class is just a file with .as extension, in which we will put all the code that controls the ship movie clip.
- From the top menu choose: File>New>ActionScript file.
- Click OK. A new tab will appear on stage containing an empty script file.
- Type this code into the empty file:
class Ship extends MovieClip {
}
Then do a File>Save and save it as Ship.as into the same directory that your fla is saved in.
About Classes in flash:
A class is an abstract representation of an object. A class stores information about the types of data that an object can hold and the behaviors that an object can exhibit. The usefulness of such an abstraction is not necessarily apparent when you write small scripts that contain only a few objects interacting with one another. However, as the scope of a program grows the number of objects that must be managed increases. In that case classes allow you to better control how objects are created and how they interact with one another.
As far back as ActionScript 1.0, ActionScript programmers could use Function objects to create constructs that resembled classes. ActionScript 2.0 added formal support for classes with keywords such as class and extends. ActionScript 3.0 not only continues to support the keywords introduced in ActionScript 2.0. It also adds new capabilities. For example, ActionScript 3.0 includes enhanced access control with the protected and internal attributes. It also provides better control over inheritance with the final and override keywords.
Step 5: Adding Variables
Now it’s time to make our ship fly! We can add 2 basic things to our class, variables and functions.
Variables are properties or attributes of our class. Our ship might have a velocity variable that stores how fast the ship is moving. Add this code to your Ship class:
var Velocity;
Done we have added the variable now the ship class should look like this:
class Ship extends MovieClip {
var velocity;
}
Step 6: Adding Functions
Functions are blocks of code that DO something. Let’s write a function.
The MovieClip class has a special built-in function called onload(). This function fires exactly when the movie clip is first added to the stage. Add this code to your ship class:
function onLoad()
{
velocity = 10;
}
Step 7: Adding movement logic
The MovieClip class has one more special built-in function called onEnterFrame(). This is flash programmer’s best friend. It executes all code it contains at the frame rate of the swf. Add this code to your ship class:
function onEnterFrame()
{
_x = _x + velocity;
}
Every movie clip has two built in variables, _x for its position to x axis and _y for its position to y axis.
Now test your flash file by choosing: Control>Test Movie or hit clt+enter.
You will see your ship moving continuously…
Step 8: Movement Logic based on Keyboard
Instead of making the ship move automatically we need to add some logic for it to move on key press so remove the code you added in the previous step and istead add this code to onEnterFrame():
function onEnterFrame()
{
if( Key.isDown(Key.RIGHT) )
{
_x = _x + velocity;
}
}
Now test your flash. When you will press the right arrow key your ship should move towards the right…
Step 9: Adding Logic for all the Arrow Keys
Now we just need to add the code for other arrow keys.
function onEnterFrame()
{
if( Key.isDown(Key.RIGHT) )
{
_x = _x + velocity;
}
if( Key.isDown(Key.LEFT) )
{
_x = _x – velocity;
}
if( Key.isDown(Key.UP) )
{
_y = _y – velocity;
}
if( Key.isDown(Key.DOWN) )
{
_y = _y + velocity;
}
}
Final Check:
After adding all the code your ship class should look like this…
class Ship extends MovieClip {
var velocity;
function onLoad()
{
velocity = 10;
}
function onEnterFrame()
{
if( Key.isDown(Key.RIGHT) )
{
_x = _x + velocity;
}
if( Key.isDown(Key.LEFT) )
{
_x = _x – velocity;
}
if( Key.isDown(Key.UP) )
{
_y = _y – velocity;
}
if( Key.isDown(Key.DOWN) )
{
_y = _y + velocity;
}
}
}
Now finally test your flash and check whether all the arrow keys functions are working…
Then you can put it on the web or share the swf which is automatically created in the same directory as you fla and other file.
Enjoy your Game which you have created!
If you find this post useful, do share it on Facebook & Twitter. What should be the next article in this series? Let me know in the comment section below.
Click here to go to the 2nd part of the tutorial
The post Create your own flash game (part 1) appeared first on Tech Blogs.
This post first appeared on Tech Blogs - Everything About Tech..., please read the originial post: here
