 |
 |
   |
 |
|
| Flash MX
2004 Actionscript 2.0 Class Tutorial |
 |
 |
Contents
|
 |
 |
|
Introduction
|
There
is a huge amount of confusion and misinformation
about creating classes in ActionScript
2, the new upgrade to the Flash MX 2004
programming language. Why should i use
classes? Good question. You probably
do not need to. Maybe it is the latest
fad. You decide. Some people assert that
procedural programming, as opposed to
OOP(Object Oriented Programming), is
perfectly acceptable. You do the research
and you make a decision based on your
needs.
OOP - Object
Oriented Programming is based
on the concept that classes or modular
objects, are like black boxes. You dont
need to know what is inside them . You
only need how to use them and how to connect
to them. A computer is composed of separate
modules. Hard-drive, Ram, motherboard,
cpu, cd-rom, monitor, etc etc. Each module
is a self-contained unit. We only care
about how these units interact with each
other and how to hook them up and use it.
When you use OOP, your overall program
is made up of different self-contained
units , each of which has a specific job
and they communicate with each other in
a prescribed manner.
When you use OOP , you write classes. These
are our templates and instances(concrete
usable things) are the objects that we
will use to get things done.
This
tutorial is based on the Box example
in the AS 2.0 Reference Document.
|
 |
|
|
 |
 |
|
Creating
a usable class
|
Let's
create a usable class. The class we are
going to create is called the "Box" class
and you guessed it, it's a box!
Open your Flash mx2004 Professional and
Select "File" - "New" - "Actionscript
file". This will open flash's new
inbuilt text editor.
If you don't have the Pro version , open
up your favourite text editor such as Notepad.
I use Crimson
Editor. Then start writing:
class
Box{
}
And save it as "Box.as". Save
it in the same directory that your .fla
file is going to be in. It is very important
that the filename is the same as the
class name. Otherwise it wont work! You
have just created your first class.
|
|
|
 |
 |
|
Inheritance
and extends
|
What
we want to do is stick all the properties
and power of a MovieClip onto it. So
how do we do that? We use the new AS2
keyword "extends" which means
to incorporate into our class all the
attributes and methods of the MovieClip
class. The technical term for it, in
OOP terms, is Inheritance. Or the way
that some people describe it - Box
is a subclass of its superClass MovieClip.
I will go into more detail in a further
tutorial in a later lesson. (http://www.video-animation.com/flash_16.shtml)
In our Box class we will have a MovieClip(box_mc)
as a class variable. The reason for this
will be apparent as we go on. Let's do
that then:
class
Box extends MovieClip{
// declare class members
var box_mc:MovieClip;
}
|
 |
|
|
 |
 |
|
Class
constructor method
|
It
still won't do anything but we are getting
there. Have patience, grasshopper. We
need to be able to create an instance
of our class so that we can use it in
our .fla. All classes have an inbuilt
method called a "constructor" which
allows us to create an instance of a
class. The default constructor takes
the form of :
var instanceName:ClassName = new
ClassName();
so in our case we could create a new Box
instance by going :
var myBox:Box = new Box();
But our class still won't do anything.
Let's make a constructor method that takes
as an argument an instance of a movieClip
that we have created in Flash. And we will
assign that passed movieClip to our variable "box_mc".
Which is of type:MovieClip. Let's make
our constructor :
class
Box extends MovieClip{
// declare class members
var box_mc:MovieClip;
// Constructor that takes mc as argument
public function Box(passed_mc:MovieClip){
// assign passed mc to our class member
box_mc = passed_mc;
}
}
|
 |
|
|
 |
 |
|
Implement
OOP in Flash
|
Now
open Flash MX 2004 and create a square,
make it a Movie, and call it "TheBox".
In the instance name textfield in the
properties window call it "box1".
Open your library and right click on "TheBox" mc
and select "Linkage".
Tick "Export for ActionScript" and "Export
in First frame".
In the "Identifier" Textfield
call it "box".
AND, very importantly, write "Box" in
the "AS 2.0 class" textfield.
This connects our Box class with this
movieClip.
Now to use our class, create a new layer
in our fla and call it actions, open
the Actions window and type this in:
var
flashBox:Box = new Box(box1);
N.B. By writing the above line in our
actions window does not create a Movieclip.
Drawing a box on the stage, giving it
the instance name of box1 and linking
it to the Box class creates our MovieClip
subclass instance flashbox.
In Flash we have implemented our Box
class and used an instance of that class,
flashBox. True, it still doesnt do much.
So let's get it to do something. How
about we make it move up. Wow. How exciting
I hear you say. Wait till you see it
move using OOP programming. It will knock
your socks off.
|
 |
|
|
 |
 |
|
Class
methods
|
Classes
can have methods which usually "Do" things.
Like move up or move down. Write some
methods that will allow our Box class
to do just that:
class
Box extends MovieClip{
// declare class members
var box_mc:MovieClip;
// Constructor that takes mc as argument
public function Box(passed_mc:MovieClip){
// assign passed mc to our class member
box_mc = passed_mc;
}
// Methods
public function moveUp(){
box_mc._y -= 1;
}
public function moveDown(){
box_mc._y += 20;
}
}
has everyone recognised the use of MovieClip
variable "_y" . We have access
to all the properties of the inbuilt
flash class MovieClip. Now open your
fla file again and add the code to what
was there:
//
create an instance of Box
var flashBox:Box = new Box(box1);
// use a method of Bx
_root.onEnterFrame = function(){
flashBox.moveUp();
}
Save and run it(hit Ctrl+Enter). Did
your box move up ? But you say that I
could have coded that in 2 lines and
not have to write any classes. You are
absolutely right. You could have just
coded it this way:
_root.onEnterFrame
= function(){
_root.box2._y -= 1;
}
You have a very valid point. But humour
me for a little while. There may be some
use in this OOP business. We hope! What
have we got by now in OOP terms. We have
a Box class with a member variable, a
constructor that initialises that variable,
and two methods.
|
 |
|
|
 |
 |
|
Interfaces
- "implements"
|
Interfaces
are devices that allow unrelated
classes to interact with each other.
An interface defines a set of methods
but does not implement them. A class
that implements the interface agrees
to implement all the methods defined
in the interface. Let's do an example
to see what we mean. Write this in
a script file and call it Moving.as:
interface
Moving{
function moveUp(py:Number);
function moveDown(py:Number);
function moveLeft(px:Number);
function moveRight(px:Number);
}
Notice
that to declare an interface we write
:
interface InterfaceName in the declaration
section.
Then in the body , between the brackets,
we simple declare the name and arguments
of the methods of the interface. There
is no bracketed section. That gets
done in the impementing class.
So, lets make a class that implements
an interface.
class Enemy implements
Moving {
var x:Number;
// constructor
function Enemy(px:Number) {
x = px;
}
function moveLeft(lx:Number) {
x -= lx;
trace("moveLeft = " + x);
}
function moveRight(rx:Number) {
x += rx;
trace("moveRight = " + x);
}
function moveUp(uy:Number) {
// leave it empty , dont need it
// but must implement it.
}
function moveDown(dy:Number) {
// empty again
}
}
Notice
the keyword "implements".
(class Enemy implements Moving).
By saying we implement an interface,
we are agreeing to use all the methods
declared in our interface. We dont
have to use them all, we just leave
the ones empty that we dont want
to use. In the Enemy class, we only
want to move left and right. So we
provide code for those methods and
leave the move up and down methods
empty. But we must write them down.
Try leaving out moveUp or moveDown
and see what happens. Double dare
you!
Create
another separate class. It will be
our Ship class. This class we want
to only move left and right.
class Ship implements
Moving{
var y;
// constructor
function Ship(py:Number){
y = py;
}
function moveUp(uy:Number){
y *= uy;
trace("moveUp = "+y);
}
function moveDown(dy:Number){
y *= dy;
trace("moveDown = "+y);
}
function moveLeft(lx:Number){
// empty
}
function moveRight(rx:Number){
// empty
}
}
This
time we only put code in move up
and down and leave left and right
empty.
Put
the following code in our fla.
var
ship:Moving = new Ship(200);
var enemy:Moving = new Enemy(56);
ship.moveDown(0.5);
ship.moveUp(0.2);
enemy.moveRight(230);
enemy.moveLeft(100);
We
have used our datatype for ship as
our interface "Moving" (var
ship:Moving = new Ship(200).
This allows us to make use of our interface.
When you define a new interface, you
are defining a new datatype. Only an
instance of a class that implements
the interface can be assigned to a
variable whose datatype is an interface
name.
Go on to the next tutorial: Flash
ActionScript 2.0 - Class Inheritance
|
 |
| This
tutorial provided by www.video-animation.com. |
|
|
|
|
 |
   |
| |
|
| ©2010
Wildform, Inc | Policies | Contact
Us | Newsletter
Options |
| |
| Wildform
provides a 100% satisfaction guarantee on all our Flash software.
If you are not completely satisfied with our Flash multimedia software
for any reason you may request a refund within 15 days
of purchase.
|
|
|
 |
 |
|