00:00
00:00
Newgrounds Background Image Theme

Chan99 just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

As3, Fd, And Oop The Right Way

2,462 Views | 15 Replies
New Topic Respond to this Topic

As3, Fd, And Oop The Right Way 2012-10-04 18:52:29


I decided to create something so people can learn the basics of OOP while they learn how to use FlashDevelop and AS3.

Please, feel free to correct or add to this tutorial!

1. Get yourself FlashDevelop (it's free)
2. Install and make sure you let it download Flex and all that happy fun stuff for you. This is gonna take a while, so enjoy a movie in the meantime.
3. Open FlashDevelop and DON'T FREAK OUT.
4. Go to Project->New Project
5. Create a new AS3 project. Name it whatever you want, but capitalize the first letter and use CamelCasing. (see "CamelCase" section below if you're too lazy to read the wiki) Check the "create a directory" box.
6. DON'T FREAK OUT.
7. See the "WHAT THE HELL IS GOING ON?!" section below.
8. See the "Main.as" section below.
9. See the "Variables" section below.
10. See the "Functions" section below.
11. See the "Classes" section below.
12. See the "Scope" section below.
13. See the "Events" section below.
14. See the "Graphics" section below.
15. See the "Properties" section below.

-CamelCase-
CamelCase is a way of putting words together to form descriptive variable, function, and class names. What do I mean by this?
say you have a variable, and that variable will tell the program what time it is. In that case, you would have that variable named "current time" - problem is, you can only have one-word variables. So how do we fix this? Easy! CamelCasing.
Think of the variable like a camel. Camels have humps, and so do variables.

in short: the variable you want to name "current time" becomes "currentTime"


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-04 18:57:26


I'm having a "Fully Quoted Message" problem, so this is going to be split smaller than i'd like. sorry.

-WHAT THE HELL IS GOING ON?!-
FlashDevelop is a programming IDE.
What that means is that you can write a bunch of code in FD (short for FlashDevelop) and just press your F5 key to test it.
It is currently the best Actionscript IDE out there. The code hinting is amazingly well done.

- What does this mean?
This means Actionscript programmers will have a MUCH easier time of creating files. It compiles faster than the Flash IDE, too!

- What does this not mean?
You'll notice that FlashDevelop does not have a paint bucket or pencil tool. FlashDevelop is a coding IDE made for programmers. Flash is an animation IDE made for animators and artists.

-Main.as-
On the right-hand side of the FlashDvelop IDE, you'll see a few tabs. One of these says "Project". You will use this tab often. Move your mouse over to it (you don't have to click) and you'll see three folders called "bin", "lib", and "src"

- bin
this is the "binary" folder (bin? Binary? Geddit?) - this is where your executable will end up every time you compile your project.

- lib
this is the "library" folder. This is where you put your .swc files (more talk of those in the "graphics" section) for import.

- src
this is your main "source" folder. This is where all of your .as (.actionscript) files go.

if Main.as isn't already open in a tab (shown right below the nice little file options/debug bar) then open your "src" folder (the little plus symbol next to it) and double-click the Main.as file.

- What is Main.as?
Main.as is the file that gets run first. When your program opens and executes, whatever's in Main.as is the first thing it does. Pretty important file.


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-04 19:17:33


I literally cannot post the -Variables- section. I even gave up and just stripped all the tags threw the whole thing in code tags. Nothing. Skipping to functions.

-Functions-
Functions are like a soda machine. Sometimes you put money in and a soda comes out. Sometimes you put money in and nothing comes out, and sometimes a soda comes out without you even putting any money in.

Analogies aside, functions also have datatypes. Some of them return something, and some don't. So how is a function structured? Well it depends on what you want from your function.

- Function that gets nothing and returns nothing

function myFunction():void{
	//stuff
}

- Function that gets something and returns nothing

function myFunction(myVar:Boolean):void{
	//stuff
}

- Function that gets nothing and returns something

function myFunction():Boolean{
	//stuff
}

- Function that gets something and returns something

function myFunction(myVar:Boolean):Boolean{
	//stuff
}

functions that return something NEED to have a return statement, and they NEED to return whatever they promise to return.

- Good

function myFunction():Boolean{
	//stuff
	return true;
}

- Good

function myFunction(myVar:Boolean):Boolean{
	//stuff
	return myVar;
}

- Bad

function myFunction():void{
	//stuff
	return true;
}

- Bad

function myFunction():Boolean{
	//stuff
	return "hello";
}

- Bad

function myFunction():Boolean{
	//stuff
}

what purpose does a function serve? It does stuff! Seriously. You put your calculations, movement, whatever you could possibly need to do in a function.

functions use the same casing as normal public variables.

-Classes-
Classes are a collection of functions. And most of the time, variables. That's pretty much it.

how do you make a class in FlashDevelop? Right click the "src" folder in your "Project" tab and go to Add->New Class...
Fill in the name and FlashDevelop will do the rest for you.

Classes are VERY useful and contain something called a constructor.

- Constructor
What is a constructor? Put simply, it's a function that runs as soon as the class is added to the project. Yes, you actually have to manually add classes to your project to use them. How?

var theClass:MyClass = new MyClass();

remember those parenthesis!

as soon as that line of code is run, the class being used will run the constructor function, which does whatever you tell it to. Could even do nothing, if you didn't tell it anything!

constructors are named after the class. so:

class MyClass{
	function MyClass():void{
		//constructor
	}
}

this breaks the rule that functions are named like normal public variables, but it's fine. A constructor should be the only exception to this rule, however.

classes use the same casing as normal public variables, except the first letter is always capitalized.
ie: "MyClass" not "myClass"


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-04 19:19:11


-Scope-
Scope is what all of OOP abides by. It tells the program what variables, classes, and functions exist where and when.

say you have a function:

function myFunction():void{
	var myVariable:Boolean = true;
}

myVariable will ONLY exist IN THAT FUNCTION, and NOWHERE ELSE.

same with this:

function myFunction(myVariable:Boolean):void{
	myVariable = true;
}

it's the same with classes.

class MyClass{
	var myVariable:Boolean = true;
}

there's one cool thing with classes, though. If you put a variable into a class, it can be used by ALL functions within that class.

class MyClass{
	var myVariable:Boolean = true;
	
	function MyClass():void{
		trace(myVariable);
		myVariable = false;
		trace(myVariable);
	}
}

There are some things you can do to either help scope along or break scope temporarily.

- Public
usage:

public var myVar:Boolean;

public members break the rule of scope that says "all variables and functions in a class can only be used in that class"
so, if you have this:

class MyClass{
	public var myVar:Boolean = true;
}

you can do this:

class Main{
	public var theClass:MyClass = MyClass();
	
	public function Main():void {
		if (stage) init();
		else addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event = null):void {
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		trace(theClass.myVar);
		theClass.myVar = false;
		trace(theClass.myVar);
	}
}

- Private
usage:

private var _myVar:Boolean;

private members are the opposite of public ones, and stick to the rules of scope. The example above would not work if myVar was private.

private variables also have a leading underscore(_) to them. Not functions, however.

- Static
usage:

public static var myVar:Boolean;
private static var _myVar:Boolean;

static members break the rule that says "you have to have an instance of that class in order to use that class's members"
so, if you have this:

class MyClass{
	public static var myVar:Boolean = true;
}

you can do this:

class Main{
	public function Main():void {
		if (stage) init();
		else addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event = null):void {
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		trace(MyClass.myVar);
		MyClass.myVar = false;
		trace(MyClass.myVar);
	}
}

instead of this:

class Main{
	public var theClass:MyClass = MyClass();
	
	public function Main():void {
		if (stage) init();
		else addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event = null):void {
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		trace(theClass.myVar);
		theClass.myVar = false;
		trace(theClass.myVar);
	}
}

works for functions as well, but be careful: A static function NEEDS to use static variables in order to work.

- Const

public const MY_VAR:Boolean = true;
private const _MY_VAR:Boolean = true;
public static const MY_VAR:Boolean = true;
private static const _MY_VAR:Boolean = true;

constants (const) are variables that are set right then and there and CANNOT BE CHANGED. Trying to change them results in an error.

constants are all uppercase, so CamelCasing can't really apply to them. Instead, use underscores to separate words.

-Events-
Actionscript 3 is event-driven, which means everything works in events and event handlers.
What do I mean by this?

public class Main extends Sprite {
	public function Main():void {
		if (stage) init();
		else addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event = null):void {
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		addEventListener(Event.ENTER_FRAME, gameLoop);
	}
	
	private function gameLoop(e:Event):void {
		removeEventListener(Event.ENTER_FRAME, gameLoop);
	}
}

init will add an eventListener that tells the program to run the function "gameLoop" as soon as every frame starts.
gameLoop removes the eventListener that init added as soon as it's run. So it only executes once. You can change that to whetever you like, though.
Any function that class has access to, you can add an eventListener of any kind to.

just remember: every eventListener function needs to have ONE parameter (and only ONE!) - that parameter is the event itself. After that, freedom is yours.

Look up eventListeners, there's a lot of cool things you can listen for that's built into Flash natively.

-Graphics-
Graphics. Finally, we're almost done! Graphics are a bit of a pain, but after that you shouldn't have a problem with anything.

1. Open Flash (yes, you finally get to draw!) - CS3 or greater only, please.
2. Create a new AS3 project.
3. Draw a square or something on the stage.
4. Select whatever you just drew.
5. Press the F8 key.
6. If the "Advanced" arrow pane thing isn't open, open it.
7. Give your symbol a name and a type, like normal. Name it like you would a normal public variable.
8. Add SWC_ to the beginning of whatever you named it.
9. Check the "Export for ActionScript" box
10. Check the "Export in frame 1" box if it isn't checked. Export in frame 1 if it isn't your default.
11. If it's a MovieClip and only has one frame, change the "Base Class" to flash.display.Sprite
12. Delete the object from the stage. It should still be in the library.
13. Hit "OK"
14. Go to File->Publish Settings...
15. Uncheck everything, check SWC
16. Hit "OK"
17. Save the .fla in your project's "lib" folder - I usually name mine "graphics", but it doesn't really matter
18. File->Publish

go back to FlashDevelop
1. Go to your "Project" tab and click on the little plus symbol next to the lib folder.
1.5. You should see your flash and .swc in there. If you don't, you saved your flash somewhere else and now need to go find it and put it in the right place.
2. Right-click the .swc and select "Add To Library"

now you can use your object as a class. How do you do this? Simple! Datatype a variable to whatever name you gave your object.

so in step 7 I named mine "myBox" and prepended "SWC_" to it like you should have done in step 8. So now my box is named "SWC_myBox"

now I just do this:

private var _myBox:SWC_myBox = new SWC_myBox();

don't forget the parenthesis!

so how do you add stuff to the stage? Also simple:

addChild();

so mine would be:

public class Main extends Sprite {
	private var _myBox:SWC_myBox = new SWC_myBox();
	
	public function Main():void {
		if (stage) init();
		else addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event = null):void {
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		addChild(_myBox);
	}
}

I don't know about you, but my box is in the upper-left. Let's change the defaults:

public class Main extends Sprite {
	private var _myBox:SWC_myBox = new SWC_myBox();
	
	public function Main():void {
		if (stage) init();
		else addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event = null):void {
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		_myBox.x = 100;
		_myBox.y = 200;
		addChild(_myBox);
	}
}

I change the x and y BEFORE I add it to the stage because it's much faster for the flash player to know where to put the box initially than it is to tell it to put the box at 0, 0 and then change it to 100, 200 instantly.
I mean, come on. That's just mean. Be nice to your computer.

Now you can access and change entire display objects through a simple variable. The variable acts as a normal variable with normal constraints.

-Sprite
A sprite is a movieClip with only one frame. For obvious reasons, this is MUCH faster than a MovieClip.

-swc
the .swc extention is basically a compiled list of classes.
Instead of having a whole bunch of .as files in your src folder, just compile them all into one .swc and use that.


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-04 19:29:59


-Variables-
Think of variables as "containers" - they hold whatever information you want. But be careful, too many of those and you're just wasting your computer's memory (which is the storage area all variables in all programs on your computer go in)

- Datatyping
Datatyping variables is important. This tells the program what type of variable you're expecting it to hold, so it reduces CPU and memory cost is 99.99% of cases. In the other 0.01%, it doesn't do anything. Either way, it's good to have.

So how do you datatype a variable? Easily.

var myVariable:Boolean;

that colon (:) tells Flash what type that variable is going to be. In this case, a boolean.

- Importing
FlashDevelop does most of the importing for you, but say you want to datatype a variable to IOError and it doesn't do it automagically for some reason. All you have to do is click somewhere inside the text "IOError" and press Shift+1

variables can be set by just using one "equal to" sign.

var myVar:Boolean = true;

you should NOT declare variables twice, or redeclare them. If a variable is already declared, you can use it over and over without redeclaring.
ie

var myVar:Boolean;
myVar = true;
myVar = false;

or even

var myVar:Boolean = true;
myVar = false;

-Properties-
Last but not least, the properties tab.
Go to Project->Properties and you'll see a bunch of stuff you can change about your flash. Have fun!


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-04 19:32:44


one last thing on variables (this was the bit that was giving me trouble)

-Types
Your most common datatypes are:
Boolean - true/false
int - whole number from -2147483648 to 2147483647
uint - whole number from 0 to 4294967295
Number - any number from 4.9406564584124654e-324 to 1.79769313486231e+308 (really big numbers)
String - A combination of any character(s) you want. This gets put inside invisible quotes (")
Array - Holds all kinds of information in any datatype. myArray[0] can be a string and myArray[1] can be an int, etc.
Vector - Same as an array, but MUCH quicker and less resource-intensive. The difference here is a vector is datatyped, so it can only hold variables of one datatype.


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-04 23:03:36


forgot something I should add. You may want to know how to remove objects from the stage afterword. The function is

removeChild();

using the SWC_myBox example, it would be:

public class Main extends Sprite {
	private var _myBox:SWC_myBox = new SWC_myBox();
	
	public function Main():void {
		if (stage) init();
		else addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event = null):void {
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		addChild(_myBox);
		removeChild(_myBox);
	}
}

which would remove the box the instant after it was added, but I think you get the idea.


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-05 16:19:20


Another rushed "tutorial", incomplete, uneditable, barely formatted...

The world was begging for this.

Why not link to existing things that explain it better?

Response to As3, Fd, And Oop The Right Way 2012-10-05 16:37:39


At 10/5/12 04:19 PM, milchreis wrote: Another rushed "tutorial", incomplete, uneditable, barely formatted...

The world was begging for this.

Why not link to existing things that explain it better?

aww, I spent all day writing that :(
it's fine, you can't please everyone :P

I link to a few wiki articles, anyway.

I just finished a video earlier today. I'll upload it to youtube and post it later.
Hopefully it'll help people who're more visual.


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-05 21:09:15


youtube video for the visual learners. In 720p so you can actually read the text.

http://www.youtube.com/watch?v=w9FA_eBhwvA

it's a little over an hour long, so yeah.


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-10-05 23:20:08


I only quickly glanced it through so I can't comment on the content, but it seems you've put a lot of effort into this! Good job. Nice to see passionate people like you. Hopefully someone who does read your tutorial (or watch the video) will learn from it. :thumbsup:


You can solve pretty much any problem you may have with AS3 by consulting the AS3 Language reference.

Response to As3, Fd, And Oop The Right Way 2012-12-06 21:44:15


At 12/6/12 06:20 PM, MikeyS9607 wrote: Kick ass. You're a great teacher. I can't wait for the next part. (It seems to cut off at the end)

I kept talking for a fucking hour after it cut off, it never told me it cut or anything. Needless to say, I was pretty pissed. I'll "finish" the video sometime later, but there really isn't too much to talk about. Just events and graphics, really.


Programming stuffs (tutorials and extras)

PM me (instead of MintPaw) if you're confuzzled.

thank Skaren for the sig :P

BBS Signature

Response to As3, Fd, And Oop The Right Way 2012-12-07 08:34:59


At 10/5/12 04:19 PM, milchreis wrote: Another rushed "tutorial", incomplete, uneditable, barely formatted...

The world was begging for this.

Why not link to existing things that explain it better?

Content isn't bad by any means, however, I agree that maybe a forum isn't the best place to do this. It'd be great to see you set up your own blog/website to do these.

Response to As3, Fd, And Oop The Right Way 2013-01-31 09:23:18


Thanks, I learned a lot with this tuto. I used to program directly in Flash IDE, but you changed my mind.

Response to As3, Fd, And Oop The Right Way 2013-01-31 13:50:34


At 1/31/13 09:23 AM, ZedKalimor wrote: I used to program directly in Flash IDE, but you changed my mind.

Another lost soul has been saved.