Part Three
Reading Foundation Games Design with ActionScript 3.0 Second Edition
Rex Van Der Spuy
All following information was referenced from the book Van Der Spy, Rex.(2012) Foundation Games Design with ActionScript 3.0 Second Edition friendsof
In this part of the blog I will cover
- How to load image files into Flash Player
- How to position objects on the stage
- What variables are and how to use them
- variable types
- How to make objects that you can target with programming code
- Method calls and function definitions
- Method arguments and parameters
- Event Listeners
Loading and displaying images
All the images you want to import into flash player have to be imported into a Loader from an address location on your computer. Once it is in the loader you will then need to copy it into a sprite. Then from a sprite onto your stage.
There are two other options available when importing graphics into flash. They are MovieClip and Bitmap. MovieClip is identical to sprites with the exception that they can contain pre-planned scenes of animation.
So you have your pre made images and you want to start a new project. What you do is you create a new ActionScript project. In the project directory create a new sub folder images. You will then copy all your PNG images you made previously into this folder.
note: Ensure your image names are easy to remember as you will need to use these later and they need to be the same name exactly as what you type.
Import Statements
As previously mentioned in part one of my notes when we import code it comes from the Flex SDK's vast library. allot of what we import are called classes. We know they are classes because they start with a capital letter.
for example import.flash.net.MouseEvent;
notice MouseEvent starts with a capital letter so that means it is a class if it was mouseEvent on the other hand we would know that it isnt a class because its first letter doesn't start with a capital letter.
When importing classes you will never actually see the code itself. It will run invisibly in the background. As long as you are aware of the class names and what they do then this is not a problem.
Some of the common used classes are
Sprite - Containers that let you control and display your images on the stage
Loader - A temporary container that loads your image from the project directory into your AS3.0 program.
URLRequest - Understands a directory location on your computer, such as ../images/background.png.
MouseEvent - Code that lets interact with game objects using the mouse.
metadata tag
When you debug or run you program you will notice a window that pops up. This is the flash window, what the metadata tag does is set the properties for the window like the frame size. the frame rate and the background colour. Also many more. An example metadata tag would look like
[SWF(width="550", height="400",
backgroundColor="#FFFFFF", framerate="60")]
So in this example it is describing the properties of the SWF file that your program will create and creates it with a flash window which is 550 pixels wide by 400 height and with a background colour of white and updates it at a rate of 60 frames a second. You need to put all this information inside the parentheses within the square brackets. metadata tags are framed with square brackets so anything inside square brackets is metadata. The #FFFFFF is what's called a hexadecimal colour code. It is the standard way of describing colours with letters and numbers. A simple web search of a hexadecimal colour chart will bring up a comprehensive list of colours and their respective hexadecimal codes.
Here are a few of the common colours:
Black #000000
white #FFFFFF
Red #FF0000
Blue #0000FF
Green #00FF00
Yellow #FFFF00
Orange #FF9900
Violet #CC33FF
note: if all the letters or numbers in the hexadecimal code are the same then you only need the first 3 letters.
Framerate
The frame rate is how often flash updates the animation on screen. Now anything between 30 and 60 fps will look nice and smooth but anything over that and it will be a bit taxing on the CPU.
Variables
Variables are like virtual containers that store information. Each container has its own name and stores different kinds of information. So for example you could create some imaginary boxes called score, name and enemy for example each storing that particular information that the variables are named. So if you wanted to use the information contained within that variable you would simply write "enemy" anywhere it would then use the information in the variable virtual container. All in all variables are simply fancy named virtual containers.
Variable types
You can also lock a variable to specific type of information like:
number
string
sprite
This would stop you accidentally say putting a Sprite(graphic) into a box designated for numbers for example. So all you would do is say you had the variable you named enemy and usually an enemy would be represented by a graphic so you would use a Sprite so the variable would be enemy:Sprite. The same if you had a variable named score for example you would only want to store numbers in that variable and it would be score:Number. Also fro a name variable and any information that is made up letters is called a string. So with that you would have a variable called names:String.
Creating the Sprite and Loader objects
To create the Sprite and Loader we need three things:
- We need to know the location of the image file.
- We need a loader to load it into the program.
- We need a sprite to control the image with programming code.
So the first line of code would be something like public var backgroundURL:URLRequest;
background URL does the job of telling the program where to look on your computer to find background.png file
note: URL stands for Uniform Resource Locator. It basically is an address to find a dertain file. It can be used for local places on your hard drive or a web address.
You will now need another variable for the loader which is public var backgroundLoader:Loader;
This line of code will load the image from its locationin the folder in your computer into the program.
That bit of code will create a third variable public var background:Sprite;
These bits of code haven't created the objects yet just informed the program that we have created the variables that will store them.
As mentioned in part one any code that ends with a semi-colon is a directive and the semi-colon pretty much means "do this now". In programming terms these variables are known as variable declarations. So with the code above it would create three variables
So the three mentioned lines of code are basically creating information specific variable containers. So now basically they are sitting empty in the warehouse labelled up ready to be filled.
backgroundLoader
background
backgroundURL
Creating instances and objects
So you have your empty variable containers now lets say at the start of your program within the package you imported a class URLRequest what we want to do is create an object. Now objects are programming elements that are copies of the previously imported classes or user made classes that we can control with the computer program so basically we can put the imported classes within the variables to make objects.
backgroundURL = new URLRequest();
The backgroundURL part is the variable created by typing public var backgroundURL:URLRequest and made it information specific by typing :URLRequest and the URLRequest is a bit of pre imported code(class) that you would of imported at the start by typing import flash.net.URLRequest;. So basically you have put the class into the variable creating an object
So the classes are imported from the Flex SDK library and put into the variables.
The variables are being filled with all the hidden code from within the classes giving them the power of the classes they are copied from. In AS3 terminology any copied classes contained within a variable is known as an instance. The three variables above are now instances of the classes they have been made from.
The keyword new is basically to create a new instance(copy) of the class and the = is used to assign the new copy to the variable. The equals sign is not to confused with the mathematical equivalent equal to as in AS3 it means the value to the right is to be assigned to the variable on the left.
The overall result of the things above is to create objects we can use in our program. Objects are at the heart of computer programming.
Displaying an image on the stage
So the next lot of code would be
backgroundURL.url = "../images/background.png";
backgroundLoader.load(backgroundURL);
background.addChild(backgroundLoader);
stage.addChild(background);
So lets break this down.
backgroundURL.url = "../images/background.png";
The first part we should know by now it is the object we created with the variable and class. The .url part shows that url is property of the backgroundURL. The job of the url is to store the locations of the file that is assigned to it by the = which is in this case ../images/background.png. The /background.png part is the name of the image that is being assigned. The /images is the name of the folder that the image is located in. The ../ part is to say that the images folder is not within the SWF file and is outside of this.
So think of the property as location information being stored in the storage cupboard for use within the object.
So what does the next line do?
backgroundLoader.load(backgroundURL);
Well if we remember from before the backgroundLoader is the object that was made from the loader class and the empty variable to make this Loader object. The job of this object is to quite simply to contain the things loaded into it and to load them. The .load part is a method. Methods are actions used by objects to help them do their job. Methods have parentheses at the end for information required for the action to do its job. This time its basically saying to load the object within the parentheses into it which contains the background.png image. So .load(backgroundURL);
In simplified terms the load method has loaded the backgroundURL object into the loader object.
So its basically another container but temporary for holding the files to be loaded into flash.
So far now we have used an object that stores the url location of the background image, then we have used a loader container and loaded the image at the url location into it now we want to send this image to an object that can use it.
background.addChild(backgroundLoader);
Now the background is the object made from the Sprite class and the variable. As we know from part one of my research that Sprites are things you can see on the stage. Obviously being that this is research in making games and flash games contain allot of visual elements we will be using allot of Sprites. So this object is a virtual box that will contain the graphics that are displayed in the stage area.
Now the .addchild method gives the Sprite something to take care off. In this case shown by what is contained within the methods parentheses we are giving it the contents of the background loader object. Which is a background.png.
So as seen in this diagram showing a flow process of what we were just talking about. Now the very first list shown is the file in its location on the computer. We are then using our URL request object to record the location of this URL. Which is shown on this diagram as a box which now contains the location of the file we want in the staging area. Next we use a loader object which will act as a temp container for the file which will be loaded into it from the information stored in the url object so now this container contains the file which is shown in the diagram as having the image file in it. Now we want to give it to an object which can use this in the staging area so the Sprite object "background" will now take the file with the help of the method .addchild for it to use itself.
At this stage we still wont see the image in the stage area there is still one more line of code.
stage.addChild(background);
Now the stage.addChild part of the code is a built in object contained within the AS3 library which is used to display whatever is contained within the addchild parentheses as long as its a sprite, MovieClip or Bitmap.
The .addChild has taken the background Sprite and added it to the display list. Any instances contained on the display list will be seen in the stage.
Understanding the code structure
As seen in the diagram below there are three main block statements. In the order as follows
The package block
This contains important statements and the SWF metatag.
The class definition block
In this block we declare our programs variables and objects. These are all the things that you are going to make that you want to use in your program.
The constructor method block
This is where you construct and do the things required to set up your game.
Positioning Sprites on the stage and understanding the x and y positions of objects
So lets stay on size mentioned earlier when we covered metatags high. So the SWF metatag before set us a stage area of 550 pixels wide and 400 pixels high. So lets see this as a grid
So as seen in this diagram the top left of this grid is point "0". It is useful knowing this when positioning your Sprite. Now in default without giving the sprite any x and y co ordinates your graphic will appear in the top left hand corner like so.
Also note that your image has what is called the registration point. This is the point in which your picture lines up with the given x and y co ordinates. It is by default the top left hand corner of your image. Now without prior thought this could cause problems when wanting to display your sprite in the centre because what you would normally do to put it in the centre is set the x position at 275 pixels and the y position and 200 pixels. This is where you need to know what the actual pixel size of your image. In this example you can clearly see it is 100 by 100 so as the registration point is the top left of the image we will need to reduce the x and y position co ordinates by half the x and y co-ordinates of the image which would equate to x 225, y 150. This would put the image in the centre of our grid.
You would simply input the code
character.x = 225
character.y = 150
after the stage code displaying what you want to position.
Using the information above I have used it to code my own basic design
