In this tutorial, we are going to:

• Create a FLA file.
• Import a ship image into stage and make it into a MovieClip.
• Create a Ship class.
• Program it to fly from left to right.

Tutorial Information

• Difficulty: Beginner
• Platform used: Adobe Professional Flash CS6
• Estimated completion time: 2 hours

Build airship shooting game from scratch Series

• Build airship shooting game from scratch Part 1
• Build airship shooting game from scratch Part 2
• Build airship shooting game from scratch Part 3
• Build airship shooting game from scratch Part 4
• Build airship shooting game from scratch Part 5

 Assets Download

Step 1:

First, we are going to create a FLA file.

1. Run Adobe Flash Professional CS6.exe.
2. To create a new Flash file, we can either click on “ActionScript 3.0” under “Create New” section in the middle panel, or go to File/New -> click ActionScript 3.0 under Type section -> click OK.
3. In the Property panel, change Size: 960 x 640 pixels.
4. Change FPS value to 30.
5. Go to File/Save, create a folder and name it EarthWar, go to that folder, name the file EarthWar, Click Save.

Step 2:

Now we need a ship.

1. Create a folder called Assets in the EarthWar folder which was just created in step 1.
2. Unzip the source file into folder Assets.
3. Go to File/Import/Import To Stage (Ctrl + R), click the image named ship, click Open.

We should have a ship image on Stage and also in Library as a image file named ship.png.

Only PNG and GIF image files allow to have transparent background, while JPG or JPEG ones will have a white background but not transparent.

Step 3:

1.  Click the ship image on the Stage, go to Modify/Convert to Symbol…
2. Key in the values as below:

• Name: Ship
• Type: Movie Clip
• Registration: Center (this is the pivot point, which is defined by x, y coordinators value, of the Movie Clip)
• Export for ActionScript: check
• Class: ShipMc ( which means Ship Movie Clip)

Click OK.

Now you have the ship image converted into a MovieClip type, connected to the Class named ShipMc (which extends MovieClip).

Step 4:

All of the classes in Flash have the extension as .as. To create a .as file, we right-click on the Ship MovieClip in the Library, click Edit Class.

It may appear a pop-up window which asks: Which application should edit the ActionScript 3.0 class?

Click Flash Professional. Check Don’t Show Again. Click OK.

Go to File/Save (Ctrl + S), save the current file to folder EarthWar with the default name (ShipMc.as), click OK.

Then the interface should be like this:

Advance knowledge

• Package: is a namespace that organizes a set of related classes and interfaces. Conceptually you can think of packages as being similar to different folders on your computer (oracle.com). In Flash, package start from the root folder of your FLA file (which is EarthWar folder in this case). If the package happens to be something like: package com.games, it means the .as file you are working on is located in the folder EarthWar/com/games. In this tutorial, most of our file is located in the root folder so no worry on this package concept.
• import flash.display.MovieClip: since we converted the image into MovieClip, we have to import the class MovieClip in our file. And the location of file MovieClip is in flash.display (system file).
• public class ShipMc extends MovieClip: means we created a new class called ShipMc, which derived/ extended from class MovieClip which imported above. Therefore, class ShipMc has inherited all the attributes of class MovieClip (x, y coordinator, visible, numChildren, totalFrames, etc) and we can add more attributes later.
• public function ShipMc(): constructor of ShipMc class. When you create a new object from class ShipMc, whatever attributes or value we want it to have, are defined inside this area.
• Comment in AS3 is written as format:

// comment for 1 line.
 
    /* comment 1
    comment 2  for multi-line.
    */

Step 5:

Let’s start coding

In a class, there usually 2 main sections: Variable and Function.

Variables are places to hold attributes of a class. Our ship surely will have velocity attribute. So we will add one line after line public class ShipMc extends MovieClip{

public var velocity:int = 10;

package  {
 
	import flash.display.MovieClip;
 
	public class ShipMc extends MovieClip {
		public var velocity:int = 10
 
		public function ShipMc() {
			// constructor code
		}
	}
 
}

Notes:

• public: Any class can refer to this attribute.
• var: variable
• velocity: name of variable
• int: integer

Then let’s make it fly.

Step 6:

In the line // constructor code, we delete it and rewrite as:

this.addEventListener(Event.ENTER_FRAME,shipFunction);

Then Flash should auto-add import flash.events.Event; in the top. If not, we type it as below.

package  {
 
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class ShipMc extends MovieClip {
		public var velocity:int = 10
 
		public function ShipMc() {
			this.addEventListener(Event.ENTER_FRAME,shipFunction);
		}
	}
 
}

Notes:

• this: this class, the class that this code is working on.
• addEventListener: add an event to the class
• Event.ENTER_FRAME: the event that will run every frame ( In our case, 30 FPS so in one second, this event will run 30 times).
• shipFunction: name of this event.

Now, we are going to expand the event shipFunction.

After public function ShipMc() {…} we add:

public function shipFunction (e:Event)
{
	this.x = this.x + velocity;
}

In the end, the code should look like this:

package  {
 
    import flash.display.MovieClip;
    import flash.events.Event;
 
    public class ShipMc extends MovieClip {
        public var velocity:int = 10
 
        public function ShipMc() {
            this.addEventListener(Event.ENTER_FRAME,shipFunction);
        }
        public function shipFunction (e:Event)
        {
            this.x = this.x + velocity;
        }
    }
}

Notes:

• public function shipFunction(e:Event){…}: Means we define the method shipFunction which we call it at  this.addEventListener(Event.ENTER_FRAME,shipFunction);
• this.x = this.x + velocity: (can be rewritten as: this.x += velocity) means the new x-position of the ship will be replaced to the old one add velocity (which is 10 at the moment).

Go to File/Save (Ctrl + s).

Step 7:

Let’s test! go to Control/Test Movie/Test (or with shortcut key: Ctrl + Enter).

If our code is correct, we should see our ship flying from the right to left and disappearing out of stage. Actually, the ship still flies but it’s just we couldn’t see it since our stage’s width is only 960 pixel.

That’s all for EarthWar Part 2.

Download Final Files

Part 3 Teaser:

• Use a third-party library
• Control the ship moving by keyboard key