Tutorials

February 5, 2009

AS3 Flash Games for Beginners: Adding Library Objects to Stage with AS3

More articles by »
Written by: Par
Tags: , , , ,
basics1_tn

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit

This is the first series on As Gamer that will take you through the basics of ActionScript 3.0 Development of a Flash Game.  The goal is to give you a fundamental overview of using Flash CS3 or better to develop a game.  If you are not a programmer follow along closely and I’ll try to make everything relatively simple. However, if understanding the reasoning behind conditional statements is not obvious, you may want to look into purchasing a programming book at your local bookstore. That said, this series will be very simple, but extremely effective at teaching you the principles behind the average flash game.

First of all you need:

  • Flash! of course, this isn’t going to work without it.  So if you don’t have the program, head to Adobe Flash’s website and download Adobe Flash CS4 trial version. It’s the full thing and it should work for about 30 days before expiration.
  • Flash Develop 3 (optional), I love this program. It’s clean, simple, and works great for organizing your as classes. But if you’d rather use Flash’s built in IDE, that’s fine as well. Whichever you prefer. But download Flash Develop here if you want.

Alright so this first game we are going to make is a simple space shooter, kinda like Space Invaders… Oh no! You’ve seen a billion tutorials like this before. No, I promise to make this a little more enjoyable, a lot more informative, and AS3.  If you’re wondering why AS3 is so great? Well, it’s faster first of all (than AS2). And if you are making a game, speed is a necessity. So stay with me and you’ll see how AS3 is going to make a simple space game that we can build on and make something great.

Step 1 : Setting up the Flash Document and Basic Drawing

Now open Flash and create a new ActionScript 3.0 Document, click the size button in the bottom properties tab,  and set it’s width to 500, height to 400, and frames per second to 30 (refer to image below). Then OK.  Excellent, now let’s create a basic background for our game.  So grab the Rectangle Tool (R) and paint a square that covers the white of our stage (The white area is the visible area in the flash game or application.) Make sure  Object Drawing (J) is off (It’s the little icon in the Tools Window (CTRL + F2) beside the magnet snap to objects icon.) If Object Drawing is on, you will not be able to edit the color of your Rectangle unless you jump into the object.  I’m going to make my rectangle fade from black to navy. To recolor your rectangle just grab the Paint Bucket Tool (K) and set your color in the Color Tab (SHIFT + F9). The color tab should be in a menu on the right by default.  Once your color is set, click the paint bucket on the rectangle and it will change color. If you have selected a gradient color then you can click and drag the paint bucket to get your desired effect. Now make sure we name our layer to background. It’s in the Timeline (CTRL+ALT+T) at the top of you’re Flash Application. Double click the layer name (Layer 1) and rename it to background. This as nothing to do with our code, but will help us to understand what artwork is where if we come back to this file later.

The Document Properties... the title and description and not important; however, Dimensions and Frame Rate are.

The Document Properties… the title and description and not important; however, Dimensions and Frame Rate are.

My current stage. Simply the navy to black rectangle.

My current stage. Simply the navy to black rectangle.

Step 2 : Making our ship

Now let’s make our ship.  Create a new layer name and name it ship.  Lock your Background layer by clicking the second dot which is under the lock icon.  This prevents us from drawing on the background layer and messing it up.

Draw your ship however you want. Just make it stay within 50×50 pixels. I drew three triangles and arranged them together. Now select your ship, you may need to click your ship layer once to highlight all your artwork, and right click. Goto Convert to Symbol… Name it ship, make sure it is a MovieClip and the Registration is set to the center.

The Registration’s location determines the x and y value of our MovieClip. Any objects in your games from now on, you will want to be conscientious of the Registration, dead center is not always the best solution, but for our ships case, it will work great.

Now your ship should appear in the Library (CTRL+L), so delete it from the stage and remove the ship layer you created.  The next time your ship is on the stage, it will be via ActionScript.

Convert to Symbol box

Convert to Symbol box

Step 3: Linking our Scene and MovieClip to Actionscript 3.0 Classes

Actionscript 3 flash files now have the ability to setup a document class.  The document class is a class that will be automatically ran when the compiled flash game is executed. This prevents us from needing to write code in the .fla file.  To find the document class, you need to deselect anything on the stage and in the Properties Box (CTRL+F3) the document class will be below the frames per second and background box.  If you can’t see the document class, you will need to resize your properties box. Simply grab between the Properties box and the Stage and pull the properties window up.

Now, name your document class “com.asgamer.basics1.Engine” without quotes. When you click out of the box Flash will complain that the document class doesn’t exist, that’s fine, we’ll be making it in a few.

Now as an explanation, com.asgamer.basics1 is our package. From a file structure perspective that’s the folders from our basics1.fla file to our document class. basics1 is in the folder asgamer, asgamer is in the folder com, and com is in the same folder as our basics1.fla file.  The reasoning behind the package name is com is my domain name extension, asgamer is my domain name, basics1 is the project name, and Engine is the class.  This means if Bob at boblikesgamesalot.com creates an Engine class his won’t conflict with mine because his package would be com.boblikesgamesalot.basics1.

Now let’s setup our class for our ship.  Just right click your ship in your library and go to Linkage…  Click the Export for Actionscript check box and new options will become available.  Class will be the class that runs for our Ship, by default if you don’t change the linkage when Flash is compiled it will create a class for your Ship that is based on MovieClip. Our Base Class is defaulted to flash.display.MovieClip leave it alone, that’s perfectly fine for now and in most cases.  As for our Class, name it com.asgamer.basics1.Ship and click OK.  It will say it doesn’t exist again… Ignore it, we’ll fix that next.

Our document class.

Our document class.

Linkage for our Ship. Leave Export in first frame checked, it defeats the purpose of a preloader, but we'll discuss this later.

Linkage for our Ship. Leave Export in first frame checked, it defeats the purpose of a preloader, but we'll discuss this later.

Step 4: Setting up our ActionScript 3.0 Classes

First we will address the document class. So using Flash Develop or Flash itself, create a new as file called Engine in your com/asgamer/basics1 folder. Add this code inside the as file.

//our package... simply put, the directory structure to this file
package com.asgamer.basics1
{
	//list of our imports these are classes we need in order to
	//run our application.
	import flash.display.MovieClip;
	import flash.display.Stage;
 
	//our Engine class it extends MovieClip
	public class Engine extends MovieClip
	{
 
		//our constructor function. This runs when an object of
		//the class is created
		public function Engine()
		{
 
		}
 
	}
 
}

Your basic class structure. Let’s examine it:

  • import flash.display.MovieClip; Imports allow us to take the code from another class and use it in ours.  In this case Engine extends MovieClip so in order to access our MovieClip properties Flash needs to know what properties Engine should have. So we import MovieClip and it’s ready to go.
  • public function Engine(). Anytime in AS3 that a class has a function with the same name, it is the constructor function. A constructor function is ran when a new object of a class is created.  So our public function Engine is ran when the Engine object is created (which is made when the flash game is ran because Engine is the document class.)

Now let’s write code for our ship.  Create a new as file named Ship at the same location as Engine.  Enter this code into it.

package com.asgamer.basics1
{
 
	import flash.display.MovieClip;
 
	public class Ship extends MovieClip
	{
 
		public function Ship()
		{
 
		}
 
	}
 
}

Look familar?  Yeah it’s the same basic structure.  As a note, you don’t have to add the constructor function, if you decide you don’t need your object to do anything at creation time, then don’t add the constructor function. That’s perfectly fine.

As another note, while it looks like our Ship and Engine class on have one function inside them, that’s not entirely true. All the functions and properties of MovieClip are in them.  For example we have access to the properties x and y from MovieClip and the functions addChild and removeChild.  And MovieClip actually inherited these properties from indirectly extending DisplayObject and these functions from the class DisplayObjectContainer.  You can repeatively make classes extend other classes where it is necessary. If you don’t have a good reason for doing it, it’s probably not necessary and more confusing than useful.

None the least, our Ship class has an x and y property that it has inherited and we can use and we will be taking advantage of it.

Step 6: Making our Ship appear on the Stage once again with ActionScript 3.0

Alright return to our Engine class and inside the Engine function add this:

			//create an object of our ship from the Ship class
			var ourShip:Ship = new Ship();
			//add it to the display list
			stage.addChild(ourShip);

The Breakdown:

  • var ourShip:Ship = new Ship(); Remember when we linked our Ship in Flash to be com.asgamer.basics1.Ship. Well to make an object of our ship all we have to do is this line. var denotes this is a variable. ourShip is the variable name. :Ship lets Flash know this is a variable of the type Ship. new means we are making an object of this class. and Ship() is the class we are making an object of.  The parenthesis are empty because our Ship constructor doesn’t take any parameters.
  • stage.addChild(ourShip); All movieclips have a stage property, which depending on the situation references the document’s stage. In this case we are accessing Engine’s stage property.  The stage property is immediately accessible through the document class. Other DisplayObject classes (anything you create from the library) also have a stage property. Problem is, this stage property is null until the DisplayObject is directly or indirectly added to the stage. If you need to access the stage from classes other that the Document Class it may be easier to pass the stage into the classes that need it (We will talk about this later). None the least, the Stage class extends DisplayObjectContainer and therefore also has the addChild function. The addChild function takes one parameter; the DisplayObject it needs to display. In our case, we want to display ourShip.

Now test your Game. Go into Flash and goto Control -> Test Movie (CTRL+ENTER). If it runs great!, if not you messed up somewhere. You should see something like this:

You should see your spaceship in the top left corner… Why? Because we need to move it’s x and y to make it center. Currently it’s being loaded at the default x and y of zero. Let’s change that to dead center.  Update your Engines constructor to look like this:

		public function Engine()
		{
			//create an object of our ship from the Ship class
			var ourShip:Ship = new Ship();
			//add it to the display list
			stage.addChild(ourShip);
 
			ourShip.x = stage.stageWidth / 2;
			ourShip.y = stage.stageHeight / 2;
 
		}

The Breakdown:

  • .x is the horizontal coordinate of our ship. .y is the vertical. We set them equal to the stage’s width(this size of our document) divided by 2 and the stage’s height divided by 2. This should be dead center. And if ourShip has a registration point in the center, ourShip will definitely be centered.

Test your Game again, it should look something like this.

Excellent job, now you know how to add a library movieclip to a flash game via Actionscript. Go ahead create another variable called yourShip and add it to the stage with ourShip. You can create as many as you want. Give it a go.

And better yet, make your background a Class and add it dynamically with Actionscript as well.

Here’s the completed source: As Gamer Basics 1 Zip Archive

Continue to Step 2: Character Movement / Handling Multiple Keypresses

Similar Posts:


Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit


About the Author

Par
Hey! Don't be surprised, I'm a flash developer. While Flash is definitely one of my favorite languages to develop in, most of all I just like making games. If you want to see the games I've developed so far head over to my website, DigitallyBold, in the link below. If you want to know more about what I'm working on now and in the future be sure to follow me on twitter.




61 Comments


 
 

  1. Jason T.

    Very Cool, I can’t wait to see this series finished. A lot of detail and the tutorial makes a lot of sense. I’d like to have a zip of the completed project but this helped a lot.

    Thanks.


  2. Archer

    This isn’t just for gamers. This is an example of outstanding Flash programming and design for those who wish to use AS3 and learn OO. Thank you. This is fantastically comprehensive.


  3. This is the first time I commented here and I should say you provide genuine, and quality information for bloggers! Great job.
    p.s. You have a very good template . Where have you got it from?


  4. Par

    Thanks a lot car jacks, :) . The template is a custom that I designed myself


  5. Great tutorial! I wanted to comment on using stage.width / 2 to place your ship in the stage’s center. This only works because you have a background graphic already on stage, giving the stage size. If you delete the gradient graphic, it will not center any longer because the stage displayObject has no size without anything in it. Just a clarification for anyone not putting in the bg graphic first…


  6. Par

    DMennenoh,

    That’s only true if you use stage.width. That’s why I use stage.stageWidth. It returns the size of the flash window.


  7. Ahhh, so you did! I guess I used .width and .height by habit. Sorry bout that!


  8. Beast

    I’m having trouble getting my ship to appear on stage(in the corner). I have a folder in my directory named com.asgamer.basics1 and all of my classes named correctly, and my files named correctly. If I did anything wrong, please inform me so(I’m still a beginner to scripting, and I’m still accustomed to AS2 still).


  9. Bulipap

    Hi!

    Thanks for your tutorial.. its nice ;)

    Butt one thing.. how do i create a new as file and what do you meen with this “create a new as file called Engine in your com/asgamer/basics1 folder.”? I dont have a com/asgamer/basics1 folder :S

    plzz help!

    –> Other than that, good job <– :)


  10. Mikhail

    Hi,

    I’m very new to this and I’m following your tutorial, but I’m stuck at the part where you actually write code in the .as file.

    You say “So using Flash Develop or Flash itself, create a new as file called Engine in your com/asgamer/basics1 folder”

    I’m using Flash itself – how do I link the .as file to the folder. Do I make a new .sw file by going into File->New, or do I somehow insert it while still in the project?


  11. Joe

    Fantastic tutorial! Two thumbs up! By following this tut I’m really
    starting to understand the external class principles in as 3.

    But, what is happening if using a non square mc – say 100×70 px?
    I tried it, didn’t work.


  12. Ian

    Hello,

    so I’m also having troubles just getting my ship to appear at all, I’ve checked all the code and it’s exactly as you’ve told.

    Please let me know what I’m doing wrong


  13. Yash

    Hello all. Par, Very very good tutorial. I knew nothing about linkage, and this has really helped. You should put that the fla file has to be on something like a desktop, and not in the same folder.

    To Ian, I had the same problem. I noticed that in his source code, he had his basics1.fla file seperate from the folder. So I tried moving my game to the desktop, and it worked. I think that it can’t compile the SWF files or find the packages when its in the same folder. Hope this helped.
    ~Yash


  14. Yash

    Very good tutorial Par. It helped me learn linkage when i never understood it.

    @ Ian, I had the same problem. I saved my com folder to the desktop, and i noticed that basics1 was not inside the folder. So i decided to move my fla file to the desktop. It did the trick. I believe that it can’t find the class directories if its in the same folder.


  15. cesario

    i find the tutorial confusing

    i can’t make the ship appear, it’s frustrating!


  16. You’re amazing. Thank you. Amazing tutorial.


  17. maralbjo

    Had some trouble with packagin…had to remove all the package names and leave the files in the same directory, and it works. But I loose the namespace conflict stuff, and would very much learn how to resolve this, how to organize my folders etc.


  18. Sevej

    Guys I’ve had the same problem, but have solved it. You actually have to create a folder with the name ‘com’ in the same file as your .fla, and place the asgamer.basics1 underneath it. I found it after downloading the finished tutorial file.

    I agree that this should be mentioned in a clearer manner.


  19. Lucas

    i have a problem
    the ship doesn’t appear after i create the as. files for Ship and Engine
    any help?


  20. New Guy

    My Ship didn’t appear, until I made my folder names all lower case. I also restarted Flash. One or both of those actions made my ship appear.


  21. Hi, I’m a bit lost, apparently you are using CS3, in CS4 things are a little different or at least to the Spanish version (is what I use). On the other hand, I’m blocked in the part -files to generate “Engine” and “Ship”-. I do not know how or where to create them.
    Tell me where you create the files? and folders to which you refer (com/asgamer/basics1) can be “My Documents\Projects\Flash\GamePractice\Basic1″??? Thanks anyways if you can’t help me.


  22. ChrisBury

    Sorry if I incorrectly inform anyone, this is the first time I’ve used AS in any shape or form really. This helped me!!!

    Make a folder on your computer, where you will put the com, asgamer folders etc.
    Save your current efforts(the .fla) into this folder
    Now set a project… File > New > Flash Project.
    set the folder you created as your root folder when asked.

    From the project window that has popped up you can add new folders(com\asgamer\basics1) and classes(.as files) with the little buttons at the bottom.

    Alternatively from here just navigate to the folder manually and right click > new > Flash Actionscript File(this is os independent I’d imagine)


  23. Ellovated

    i think i found the problem to why your not seeing the ship… 1st create a New Folder and call it “GAME” then make sure you save your game as “basic1″ in the folder “GAME” which you created. In the Folder “GAME” create a New folder inside and call it “com” then open the “com” folder that you have created and create a New Folder inside and call it “asgamer” then you open the “asgamer” folder you have created and create a New Folder and call it “basics1″. In the folder “basics1″ this is where you will store your Engine.as and Ship.as … AND REMEMBER TO SAVE BEFORE TESTING… i hope this helped caz it help me with tha same ship problem

    Ellovated


  24. rizien

    I’ve tried everything, and can’t get the ship to appear. At first I was using my own directories, but that didn’t work. So I downloaded the files and tried to use them the same as in the tutorial, down to each character, no go…

    Tried moving the .fla outside of the com folder, in the com folder, in basics1 folder, it just won’t work…

    Any ideas on common (user?)errors that would cause this? It’s very frustrating.


  25. Murray

    PLEASE HELP ME, I don’t know how to make the ship appear please I have to do this by thursday of next week for a school project.


  26. teacher

    I am lost on step 4. Was I supposed to make a folder already and if so, are you talking about a folder in the Flash library? And how do you save action script in a folder? And is there supposed to be a step 5? Because it goes straight to 6. If you can help me I would appreciate it. I’m filling in for a teacher and wanted to do a fun project with the kids.Thanks,


  27. Pete_kaboom

    Based upon what I have found out and what countless others have as well is that you have to create many folders to store it. The .fla file should not be in this directory (i.e. if there was a folder for the game, you’d see basic1.fla and a folder called com).

    The folders should have the following folders all inside one another in this format: (location where the .fla is)\com\asgamer\basics1. So it is com\asgamer\basic1

    Look familiar? Remember this: “com.asgamer.basics1″? That’s why it’s in those darn folders.

    So if you want it in just one folder (let’s call it AS) that isn’t nested in other folders, then you have the:
    - Document class called AS.Engine
    - Movie clip class as AS.Ship
    - Package (in the Engine.as and Ship.as file itself) as ‘AS’

    If its in the same directory as the .fla:
    - package would be blank
    - Document class would be Engine
    - Movie clip class would be Ship
    Get the picture now?

    Just in case, if you haven’t got it, here’s a long one.
    If you nest the AS files in the directory I:\Game\Resources\Code\AS:
    - Package would look like “Package Game.Resources.Code.AS”
    - Movie Clip class would be Game.Resources.Code.AS.Ship
    - Document class would be Game.Resources.Code.AS.Engine

    Best thing to do is toy around with the source code. just do minor changes and slowly learn how everything works.


  28. Elwin

    Hey all those who struggled in step4

    First of all I`m really new to Flash as well so I came here to learn and spent nearly half an hour on how to make step4 and finally it worked.

    You just have to create an Engine.as with codes as requested and a Ship.as with codes in a folder called “basics1″ that is nested in “asgamer” that is nested in “com” and put your fla file (whatever you want to name it) OUT of folder com but just in a same directory.
    Moreover make sure any name is capotalised or lowercased, according to their names in .fla.

    And this all! Hope this helps!!

    Thanks for the tutorial!


  29. as3guy

    If your ship does not show that’s probably because
    your .fla document did not specify its document
    class. Open your .fla document then do the following:
    1. Click on the stage
    2. In the Properties panel, type in the “Document class”
    text field the following: com.asgames.basics1.Engine


  30. Rizz

    Your tutorial kind of blows… You need to explain more. Whatsup with the com.asgamer.basics1? Is that the directory where we need to have the files saved on our computer? Meaning, do we need to have the 2 .as files and the .fla file saved in a root named:
    C:\com\asgamer\basics1


  31. Par

    Rizz. Sorry you don’t understand. However, since you’re handling it the way you are, I have no desire to try and explain it for you.


  32. Sam

    And I keep getting the sam error Is says that Ive got wrong name up the top of ship ive got “package com.asgamer.basics1″ and thats my file name and eveything ive done heaps of checks I cant get the ship to appear


  33. Steve

    Hey Par, don’t mind Rizz, it’s a great tute and an awesome way to move from AS2 to AS3 as well. Bit of a superficial question though. I’m using CS4, and where you talk about the gradient fill for the background, I can’t find that option the way you have it. Which sucks, cos what you have there looks great. I just have a flat colour fill. Did they take the gradient fills out or something?


  34. bharat

    Easy way to appear Ship :

    1.Instead of using “com.asgamer.basic1″ directory you can also make this game in single folder

    2.First save basic1.fla
    in same folder save Engine.as & Ship.as

    means save basic1.fla ,Ship.as and Engine.as in one folder

    3.Change package com.asgamer.basics1 (first line in both as files)
    to simply package

    4.New code will be

    For Engine.as

    package //remove everything here
    {

    import flash.display.MovieClip;
    import flash.display.Stage;

    public class Engine extends MovieClip
    {

    public function Engine()
    {
    var ourShip:Ship = new Ship();
    stage.addChild(ourShip);
    ourShip.x = stage.stageWidth / 2;
    ourShip.y = stage.stageHeight / 2;

    }

    }

    }

    for Ship.as

    package
    {

    import flash.display.MovieClip;

    public class Ship extends MovieClip
    {

    public function Ship()
    {

    }

    }

    }

    5. Change Linkage For ship movie clip (remove com.asgamer.basic1.Ship)
    type this

    Class: Ship
    base: flash.display.MovieClip

    6. Finally in basic1.fla Go to properties and change Class:Engine

    remove that com.asgamer.basic1.Engine

    7. Tutorial is nice and helps me to getting started in as3

    my homepage (currently one page is loaded other are in progress)

    http://www.infernodesigners.com


  35. kristi

    Hi, it seems like a nice tut, and I really want to do it, but my space ship don’t appear, I downloaded the files and found “senocular” folder with “KeyObject.as” file, without the folder it’s not working, I don’t understand what is this file?


  36. kristi

    oops! my fault!! it’s really work!!:)


  37. alexut

    this is great tutorial, but I’m trying to do something different, moving the ship on mouse click event, like in a click and point game, I have searched many tutorials and haven’t found a solution. If anyone has any tutorials to point me to would be great.


  38. justin

    what will be basic.fla if this were to be done in Flex SDK and AS3?


  39. Tim

    Hey. I hope you still check this site. In that case I got a bit of a problem. I have done as you have told me to do in this tutorial until “input this code in an Action Script in the class folder” I cannot find the class folder. Any ideas to help me?


  40. hi,

    very good tutorial, i have to do the next steps immediatley now ;) hope the bunch of informations you offer wont seep away, cause thats one fact that makes a big difference to other tutorials i have found so far.

    cya on the next page, thx
    peace
    jesta


  41. cakez

    hey,
    where’s the folder with the com.asgamer… you know xD
    also, can’t i just type the code in actionscript-panel in flash?

    thnx


  42. Derek W

    I’m using Flashdevelop and I was wondering how you might go about creating these things in it, I can’t seem to find these tools that you are describing for the stage, I am new to Actionscript and I was wondering if I am blind and just can’t find it or if I need to draw it somewhere else then add it in?


  43. James.b

    “First we will address the document class. So using Flash Develop or Flash itself, create a new as file called Engine in your com/asgamer/basics1 folder. Add this code inside the as file”

    I have no folder? add the code where? in the actions on the keyframe? the motion clip? create a new file altogether but where do we put the actionscript for step 4?

    Not clear. not good tutorial.


  44. dhikesh

    Hi,

    This is dhikesh, from bangalore just give me more details from starting stages(i mean therotically)

    Have a nice day
    Dhikesh


  45. I would prefer my name not published

    When I what first reading this I was confused and did not get it at all. After reading the explanations of the code it was very clear and easy to understand. Thanks a lot! Oh, and just wondering; why put the ActionScript files in a com folder, is it just standards? Why even make an external ActionScript file? Why not just put in right inside the .fla document?


  46. Jimmie

    What are my errors if the ship doesn’t show up on the test screen?


  47. Jimmie

    It works! Thanks!


  48. Greg P

    I did struggle with the file structure but wanted to say thanks to Pete_kaboom I managed it, nicely explained, looking forward to the rest of the tuts.


 
 



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


Advertisement