AS3 for Noobs (Part 2): Learn the lingo
Another thing that is initially very intimidating about learning a new skill is all the terminology that people throw around and expect you to know. I’m going to break down some of these terms in a way that hopefully everyone can understand so you know what they mean and why you should care. I know these articles seem like they deal mainly with classes and not AS3 but we are building up to it. This is all fundamental stuff you’ll need to understand if you want to get far with AS3 at all so just stick with me on this one.
Package:
Every class that is created in AS3 must be contained within a package. It’s the first line of code that you write in a class file. This is simply where the class physically lives on your hardrive relative to the fla file. The easiest way to think about this is to think about how you write relative paths to images or other things in your flash file. If you are trying to load flower.jpg that is in the images folder and this images folder is in the same folder as your fla, your path would be “images/”. If there was a subfolder in images called “plants” the path would be “images/plants/”. So getting back to the point the package tells the class where it lives relative to the fla. So using the same example as before if we had a class called “Flower” and it was inside a folder called “plants” which was in a folder called “classes” then for you package you would write.
package classes.plants
{
}
Class definitions:
This is pretty simple, it just tells flash “what your about to see is a class and it’s called Flower”. This line is inside the {} brackets from the package definition above. So from our previous example it looks like this.
package classes.plants
{
public class Flower
{
}
}
Constructor:
Classes can be contain several functions but every class has to have a function in it that is used to create an instance of that class. This function must have the same name as the class itself. So if we just declared a class called “Flower” inside that class we would need to have a function called “Flower”. Let me explain what this function is used for. When you create a new instance of a class by writing something like “var myflower = new Flower()” you are actually calling the classes constructor function. This is used setup whatever you want this class to initially do when it’s created. If you don’t want the class to actually do anything at first you can leave this function empty. But if you know that everytime this class get’s created there are certain things you want it to do go ahead and put them in this function. So now our example will look like this
package classes.plants
{
public class Flower
{
public function Flower()
{
// draw a flower
}
}
}
Methods:
If your constructor function doesn’t perform all the tasks you want your class to be able to handle(which it probably doesn’t) then you will want to create some more functions inside that class to do other things. These functions are called the class “methods”. See it wasn’t so scary after all becuase that’s really all a method is. So to continue the example after I create an instance of the Flower class I might want to tell it to grow so it’s height would increase. I would create a function, or method, called “grow” and I could call it by saying “myFlower.grow(50)”.
package classes.plants
{
public class Flower
{
public function Flower()
{
// draw a flower
}
public function grow(howTall:Number)
{
// make the flower taller
this.height = howTall;
}
}
}
Attributes:
You may have notice in the examples above and also in classes you’ve looked at that all the variables and functions have words like “public” or “private” and others before them. These are called “attributes” and they basically let the class know who, or better yet, what code can gain access to these functions and variables that live inside a class. Here are a few different attributes and what they mean (there are several more but for now I’ll just cover the two basic ones):
public: Public tells flash that any peice of code can access this. In our example about “grow” is a public function because I want to be able to call it anytime I want from anywhere I want. If even think it’s a property or function that you’ll want to gain access to at some point, go ahead and make it public. The class definition and class constructor function must always be public because if I couldn’t access them elsewhere and call “new Flower()” the class would be useless.
private: Private, as you might have guessed, only let’s code that’s actually IN the class file have access to it. You might ask “Why would I want to have a function that I can’t access anywhere else?”. The reason you might use private is let’s say you had a function that made the flower bloom after it grew to a certain height but you didn’t want it to bloom until something triggered it because if it happened before it was ready it could break the whole application. Private ensures that no one by accident or otherwise tries to call “bloom()” from somewhere it shoudn’t belong. So private is mainly used to ensure that everything works they way you want it to.
package classes.plants
{
public class Flower
{
public function Flower()
{
// draw a flower
}
public function grow(howTall:Number)
{
// make the flower taller
this.height = howTall;
// if flower is tall enough then it should bloom
if (this.height > 100){
bloom();
}
}
private function bloom()
{
// make the flower taller
}
}
}
Inheritance:
Inheritance is a very powerful feature of classes that lets you create new classes from existing classes. Using inheritance can save you a lot of time and headaches down the road if you have a lot of classes that are similar to each other. Using our example let’s say I wanted to not only create the class “Flower” but also one called “Tree”. Now flowers and tree’s aren’t exactly the same so I’d want to keep them in seperate classes but they do share a lot of features. Both have roots, and a stem, and need water and sun. So since they are similar I could create a more general class that defines all the things they have in common and call it “Plants”. The class might look something like this:
package classes.plants
{
public class Plant
{
public function Plant()
{
var hasRoots:Boolean = true;
var hasStem:Boolean = true;
var requiresSun:Boolean = true;
var requiresWater:Boolean = true;
}
}
}
Notice how I defined some variables in the constructor here so if I created an instance of Plant by calling “myPlant = new Plant()” and I typed “trace(myPlant.hasRoots)” it would return true automatically. Now I have my starting class that I want to build the others off of. This is reffered to as the “base” class or “superclass”. I’ll now create my other classes from this one. These are reffered to as “subclasses”. I’ll make some changes to the “Flower” class from earlier so that it inherits all the properties from the “Plant” class. In order to do this I’ll need to add one new line of code to import the Plant class and another to tell the Flower class that it should be built off the new Plant class.
package classes.plants
{
import classes.plants.Plant
public class Flower extends Plant
{
public function Flower()
{
// draw a flower
}
}
}
I would create a “Tree” class the same way. Two things you’ll want to notice. When I import the Plant class I must do this before I create the actual class so that I can use the Plant class when the Flower class is created. The second thing is that I have added the words “extends Plant” to the class definition. This tells flash that the class Flower has all the functionality of Plant and further “extends” that functionality. So now if I call “myFlower.requiresSun” it will return true even though that variable is not defined anywhere in the “Flower” class because it’s already defined in the “Plant” class. To further drive home why this is such a smarter way of doing things, let’s say you have a bunch of different subclasses of “Plant” class and you decide that you also want to say that all these plants have leaves. Well if you define a new variable or change anything in the main Plant class, all the subclasses will automatically reflect these changes.
Inheritance is a really important thing to understand because it’s used in flash a lot. For instance look at the MovieClip class which is actually a subclass and is built off of serveral other classes. It has a lot of properties like x, y, width, height and all these properties come from a class called “DisplayObject”. DisplayObject is the base class for any Class that will be displayed on the flash movies stage. It’s important to know what the are the base classes of the MovieClip class so you can know all the things a MovieClip object can do. So to come full circle if I wanted all my Plant classes to have these properties like width and height and I would have Plant extend MovieClip or Sprite. So now to help you out instead of saying things like “I have a movie clip called this” think “I have a class called this that extends movieclip” then you’ll see that you’ve already been doint some of this all along.
That’s all for this article. Hope your brain doesn’t feel like it’s going to explode. Take your time with it, I think when you break it down into smaller chunks like this it’s easier to process. Next article we’ll see more how all this directly relates to making the transition to AS3.
September 12th, 2007 at 4:42 am
And again, great work! Very well written and clear article man. I look forward to the next issue!
October 24th, 2008 at 2:25 pm
I first want to say how very impressed I am with your skills and knowledge. My currently experience is in Coldfusion and web site design which i’ve been doing for 10 years. I have held off learning Flash because I didn’t like the hole timebar, animation thing. I’m much more of a tag type person.
In re-evaluating my skill sets however and trying to figure out what direction will propel me professionally I’ve decided to learn Flex and AS3.
I really appreciate your articles explaining classes, methods, functions etc.
Your SnapPages site and UI are amazing. I would love to learn more about the process you underwent (i’m sure continue to undergo) in developing it.
I also hear that you’ve developed this yourself.. If that’s true, it makes me feel a little better as i’m a total bootstrapper myself.
Best Wishes!
Bruce
December 9th, 2008 at 6:29 am
Nice intro to classes etc - you might want to check your html though. You’ve got a load of weird characters - looks like they used to be tabs. Did you copy and paste from word by any chance?
December 9th, 2008 at 5:10 pm
Bob - Thanks for catching that. I moved my blog from one server to the other and something must have happened in the move.
October 9th, 2009 at 4:17 pm
Thanks for this article - it clears a lot of stuff up! I’ve been constantly thinking ‘why use classes? They seem pointless! Why not just keep everything in one .fla?’. This makes a lot more sense now