# How would you recommend I get started with ActionScript 3?

I wanted to make Flash games so I bought the book "Flash Games Development with AS3." I did the 'hello, world' program by trace and addChild (or something like that). But the problem was, instead of understanding what I was writing, I was just copying and pasting those lines of code. I felt it wouldn't work that way, and as the book had asked the learners to know at least some Java/Javascript, C#/C++, I didn't go any further.

Now, I want to start again (and yes, I still don't know Java or C programming). What would you recommend for me?

Thanks :)

• Do you have any background in programming? If not, my suggestion would be to start off with basic applications before you start games programming. Once you get the hang of that then you can have some fun :) Jul 22 '11 at 1:27

I used this book: Foundation ActionScript 3.0 Animation: Making Things Move! It pretty much discusses the basics, not only about actionscript but also about flash itself. Which is pretty essential if you wan't to build graphics heavy applications (games!)

The book doesn't really discuss games, but does teach you the fundamentals of making games. You will create a sphere that you will be able to controll with your keyboard using some easy physics for example.

I understand the copy pasting without understanding, I had the same problem when I got my first semester in actionscript (failed miserably, then passed with a 9/10 next year). I will give you a very brief and basic explanation of all the things I found confusing.

## Variables

Everything with a [var] notation in front of it is a variable. A variable is simple a holder for a certain value. A real world example of a variable is your bank balance - it holds your balance! Every variable has a type, just to name some:

• Number: holds a number
• String: holds a piece of text
• Sprite: A graphic

So your bank balance could be a variable with the type number.

Note: You will see "int" and "number" both being used as numeric values. The difference is that int can't hold floating point values and is therefore calculated faster. Number can hold floating values but is slower.

In code: (everything with "//" in front of it is a comment and is not executable code)

    //var: we tell actionscript that we're making a variable
//balance: the name to refer to this variable is named ballance
//:Number: We tell actionscript that the variable is the type number
//=100: We assign the value 100 to the variable
var balance:Number = 100;

//we can also change the variable's value later on like this:
balance = 200;

//or creating a new variable and add them up
var paycheck:Number = 100;

balance += paycheck; //200 + 100 = 300!


Now we know that balance is 300, but how would we check in flash? We can use the trace() command for this. Trace doesn't actually add anything for your application, it is mainly for debugging purposes. trace will display a value to an external panel in flash. So if we would want to check the value for the balance we would do the following:

trace(balance);


Try tracing before and after you added the paycheck, you will see that the value has changed!

Now using sprites is ofcourse a little different, since it doesn't hold any numbers, but a graphic. Flash uses a canvas called the stage. If we want to display something we need to add it to the stage. Just as you would add your paint to the canvas to make a painting. Adding things to the stage is done by using addchild(objectToBeAddedHere).

However, just making an empty sprite will display nothing, since it doesn't contain any graphics yet. Using a brush without paint on it wouldn't create anything right? Creating simple graphics with flash is done as following:

//we want to create a variable called example sprite with the type Sprite.
//what should it hold? A new Sprite!
var examplesprite:Sprite = new Sprite();

//we have created a new sprite, but by default a sprite is empty. Let's create some graphics
//to create create grahpics, the sprite has a graphics property. You can access properties by using a point (.)
//examplesprite.graphics -> we have now accessed the graphics, let's call a function within those graphics!
//we will talk about functions later on, don't worry. Let's call the function beginfill to give the sprite a colour.
examplesprite.graphics.beginFill(0x000000); //0x000000 = black;

//we have given it some colour, but what exactle have we given colour? exactly, nothing!
//lets create a circle shape using the graphics property again.
examplesprite.graphics.drawCircle(0, 0, 10); //x, y, radius

examplesprite.graphics.endFill(); //We are done filling our shape, so we need to use endFill now

//the sprite is complete! but how do we show it on the stage? using addchild!


You have now created a circle shaped sprite with 10 pixel radius at the location's given in drawCircle (0,0). Flash's coordinate system begins in the topleft corner, so x and y 0 is 0 pixels from the top left. x = 10 woul move the sprite 10 pixels to the right. y = 10 would move the sprite 10 pixels below.

Try it:

    var examplesprite:Sprite = new Sprite();
examplesprite.graphics.beginFill(0x000000); //0x000000 = black;
examplesprite.graphics.drawCircle(0, 0, 10); //x, y, radius
examplesprite.graphics.endFill();

examplesprite.x = 10;
examplesprite.y = 10;


## Functions

These are the basics for variables. let's move on to functions A function is sequence of code to be executed. drawCircle(x, y, radius) is a function that holds a sequence of code to draw a circle.

A function can have parameter variables that you need to input. The drawCircle has x, y and radius as parameters. You can pass it values, but also variables of the given type into the parameter. x, y and radius are all of the type number.

Let's move the drawing of a circle into a function now.

    //we're not using a variable but a function now, so note function in front. drawCircle is the name to refer to the function
//X, Y and Radius are the parameters, all with the type number. colour holds a colour, which is of the type uint in this case;
function drawCircle(X:Number, Y:Number, Radius:Number, colour:uint) {

//let this function create a new sprite!
var circle:Sprite = new Sprite();
circle.graphics.beginFill(colour);
circle.graphics.endFill();

}

//to use the function, you call it like this:
drawCircle(10, 10, 20, 0x000000);


.

//we could also pass it variables if we wanted:
var x:Number = 10;
var y:Number = 10;
var colour:uint = 0x000000;

//important! we cannot acces the circle variable outside of the function, if you want to acces the circle
//outside of the function you should make the variable before the function.

var circle:Sprite;

function drawCircle(X:Number, Y:Number, Radius:Number, colour:uint) {
circle = new Sprite();
//blablabla
}

//the circle is outside of the function, we can acces it, hurray.
circle.x = 10;


## Events

Last but not least events! Events are as you might have figgured, events that happen during your application. There are events for when you click your mouse, when you press your keyboard, etc etc. You can react to these event with a function. It works likes this:

 //we want to "listen" to an event of the type MouseEvent, and the mousevent action is CLICK.
//so we will wait for when the mouse is clicked, and attach a function to be executed when that happens

//the parameter is the type of event we use, in this case MouseEvent
function functionWeWantToCall(e:MouseEvent) {

//do something
}

//the eventlistener is attached to the stage right now, so it happend when the stage is pressed.
//you could also attach it to a created sprite for example;
var circle:Sprite = new Sprite();
circle.graphics.beginFill(colour);
circle.graphics.endFill();

function clickCircle(e:MouseEvent) {

//we change the scale of the sprite when the sprite is clicked
//we can detect the target of the click by using e.target property
e.target.scaleX += 1; //increase the scale on the X axis by 1;
e.target.scaleY += 1;
}


There are events for bassicly everything, shouldn't be too hard to find online. The Event.ENTER_FRAME is very important for games. The function attached to the event is called every time a new frame starts (30 times a second default in flash). So if you add 1 to the x position of a sprite each time that function is called, the sprite will move :)

Using keyboard events, you can add or subtract values from the x and y of a sprite. You can essientally controll it usin your keyboard!

Sorry for the lengthy write-up. I remember how frustrating it was for me. Good luck!

You probably want something like this. Colin Moock was regarded at one time as the definitive AS3 expert. http://www.amazon.com/Essential-ActionScript-3-0-Colin-Moock/dp/0596526946

You may also want to check out http://www.bit-101.com/blog/ as Bit-101 is a seasoned Flash veteran.

Beyond that, there are some more general resources about ECMAScript worth exploring, such as http://jibbering.com/faq/notes/closures/ which will help you understand the language.

Apart from learning ECMAScript / AS3 you will also need to learn about game development. This site already offers many suggestions about books and websites to read that are related to the various topics in this field.