 |
| Inherting Classes |
| Return to the Tutorials page |
| |
|
Goal: Inherit the code located in Triangles.as to place three triangles on the stage. Then apply filters to each triangle in the main
class. A movie utilizes two AS files simultaneously! (Also an introduction to Internal variables.)
Imported classes: flash.display.Sprite, import flash.filters.GlowFilter,
import flash.filters.DropShadowFilter and import flash.filters.BlurFilter and
Triangles (custom class).
Methods: n/a
Flash version: Flash 9 Professional
Download final version
The ActionScript 3.0 Foundation Elements can be found in the Members' Section.
In the previous tutorial we copied and pasted code from Triangles.as to place three triangles on the stage and then used three lines of
code to apply three different filters to the objects. We ended up using the code in Triangles.as twice by typing it in twice, once in
Triangles.as and again in Filters.fla. That isn't very efficient and you will be pleased to know there is an easier way to recycle code
that takes little effort and is far more effective.
The solution is to import the information from Triangles.as into our new AS file. Don't work harder, work smarter!
|
Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it InheritingClasses and save it inside the FlasherAS3_PartI
folder. In the Document Class box of the Properties panel, type InheritingClasses and then save the changes.
Open a new ActionScript file, name it InheritingClasses and then save it inside the Code folder.
You now have sixteen separate files on your computer:
In the FlasherAS3_PartI folder -
LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla, CircleEllipse.fla, Sprites.fla, MovieClips.fla,
Filters.fla and InheritingClasses.fla.
In the Code subfolder -
LineCurve.as, Triangles.as, RectanglesSquare.as, CircleEllipse.as, Sprites.as, MovieClips.as, Filters.as
and InheritingClasses.as.
Keep both InheritingClasses files open as we will be working with both of them simultaneously.
|
|
Return to InheritingClasses.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save
your changes.
|
|
Return to InheritingClasses.as and type in the following code:
Line 01: package
Line 02: {
Line 03: public class InheritingClasses extends Sprite
Line 04: {
Line 05: public function InheritingClasses()
Line 06: {
Line 07: }
Line 08: }
Line 09: }
Save the changes.
|
|
This tutorial will require the Sprite, GlowFilter,
DropShadowFilter and BlurFilter classes so let's import them now.
Place your cursor at the end of line 2 and press Return/Enter.
On line 3 type: import flash.display.Sprite;
Press Return/Enter.
On line 4 type: import flash.filters.GlowFilter;
Press Return/Enter.
On line 5 type: import flash.filters.DropShadowFilter;
Press Return/Enter.
On line 6 type: import flash.filters.BlurFilter;
Press Return/Enter to add a blank line on line 7.
Place your cursor at the end of line 11 and press Return/Enter.
All of our filter code will be placed between the constructor function's opening & closing curly braces.
Save the changes. The set up is done; let's add some filters to imported triangles!
|
|
Open Triangles.as (located in the Code folder). This file contains the code that creates three triangles and places them on the stage.
If we were to return to InheritingClasses.fla and type Triangles in the Document Class box, save the changes and then test
the movie, we would see the three triangles on the stage.
However we want to take this a step further. We want InheritingClasses.as to contain code that applies filters to those triangles.
How do we reference both InheritingClasses.as and Triangles.as simultaneously? Only one name can be referenced in the
Document Class box...
The solution is to use InheritingClasses.as as our main class and import the triangle generating code from Triangles.as into
our main class.
Step 1: Declare "InheritingClasses.as" as the main class
In InheritingClasses.fla make sure InheritingClasses is listed in the Document Class box. Save the changes if any.
Step 2: Import the Triangles class into the main class
Return to Triangles.as. What is the name of the class? The name can be found on line 6. It is
Triangles.
Return to InheritingClasses.as and place your cursor at the end of line 6. Press Return/Enter.
On line 7 type: import Triangles;
The previous imported classes (i.e. flash.display.Sprite) are built-in Flash classes but
Triangles is a custom class we built ourselves. It is located in the Code subfolder along with all our
other AS files. Flash can find it easily because we already declared the Classpath. No other information is needed to
import this class.
Step 3: Apply the Triangles class to "InheritingClasses.as"
Let's take a look at line 9 (InheritingClasses.as).
Line 9: public class InheritingClasses extends Sprite
The extends keyword defines a class that is a subclass. A subclass inherits the characteristics of
another class. The subclass inherits all the methods, properties, functions, and so on that are defined in the
superclass.
A superclass is the parent class; in this example the superclass is InheritingClasses. This class has inherited all the
methods, properties and functions of the Sprite class.
However we want more than that; we want to inherit all the methods, properties and functions listed in the
Triangles class. So the subclass listed on line 9 needs to change to
Trianges.
Line 9 should now read: public class InheritingClasses extends Triangles
Your code should look like this: [ view code ]
Not only will the InheritingClasses class inherit all the methods, properties and functions of Triangles,
it also inherits all the same elements from the Sprite class. How you ask?
Let's take another quick look at the original code.
Open Triangles.as.
On line 6 the class extends Sprite. The
Triangle class inherits from the Sprite class. The InheritingClasses class inherits the
Triangle class, which includes the Sprite class. It may seem a bit confusing at first but with practice you
will be able to reuse code from multiple subclasses to maximize your movies and keep the file size down to a minimum. (It also helps keep your code clear
and organized!)
Close Triangles.as.
So, we have successfully imported the Triangle class into InheritingClasses.as.
Save the changes in InheritingClasses.as and then test the movie.
There they are! No repetitive typing this time. The Triangles class creates three triangles. We imported the
class (import Triangles) and there they are in all their radiant glory! Imagine how useful this little trick
will be in the future...
|
|
|
Now let's apply the filters! Copy and paste the following code into InheritingClasses.as beginning on line 13.
Line 13: triangle1.filters = [new GlowFilter(0xFF6699, .75, 25, 25, 2, 2, false, false)];
Press Return/Enter.
Line 14: triangle2.filters = [new DropShadowFilter(5, 45, 0x666666, 1, 5, 5, 1, 1, false, false, false)];
Press Return/Enter.
Line 15: triangle3.filters = [new BlurFilter(5, 5, 2)];
Your code should look like this: [ view code ]
Save the changes, test the movie and...blank white stage. What happened?
The error message that pops up in the Output Window gives us a clue.
Error 1120 appear three times, once for each triangle. The error states that we have tried to access an "undefined property". In other words, Flash is
telling us that we need to declare the variables triangle1, triangle2 and triangle3. But we already did that, didn't we?
Open Triangles.as.
Let's take a quick look at the declared variables (triangle1, triangle2 and triangle3). Take
a good look at where these variables live. They are located inside the constructor function on lines 10, 20 and 30.
The variables declared here can only exist within this function.
View the code here: [ view Triangles.as code ]
Up until this point all our tutorials have placed code exclusively within the constructor function. This was to ensure that the code ran as soon as
the movie began playing. However as movies become more complex, it becomes neccessary that variables are accessible beyond the
constructor function so they can be referenced directly by other custom classes (other AS files).
Even though the triangles have been declared within the constructor function, any other AS files within the package would not be able
to "see" them unless they had a broader scope.
|
|
For clarities sake, let's close the files we aren't using. Save any changes and then close InheritingClasses.fla and
InheritingClasses.as. We'll return to them again shortly.
Now open Triangles.fla. There should now be two files open: Triangles.fla and Triangles.as.
In Triangles.as place your cursor at the end of line 7 and press Return/Enter.
On line 8 type: internal var triangle1:Shape = new Shape();
Press Return/Enter to add a blank line on line 9.
The code on line 8 declares a variable named triangle1, sets the data type to Shape and instantiates a
new Shape.
The first keyword on the line is internal and this refers to the scope
(access control modifier). Variables come in four varieties each with a specific scope: local variables, instance variables,
dynamic instance variables, and static variables.
In this example we have declared the triangle1 variable as internal which means that any AS file in our
package (subfolder Code) is allowed to refer to and access this variable. Previously, when the variable was declared inside the
constructor function, it could only be accessed by code within the constructor function. Now it can be accessed package-wide!
A variable only needs to be declared once so the code on line 12 can be deleted.
Delete line 12 completely.
View the code here: [ view Triangles.as code ]
Save the changes and then test the movie. The Triangles movie still works properly and all three triangles are on the stage.
Let's apply the same changes to triangle2. Place your cursor at the end of line 8 and press Return/Enter.
On line 9 type: internal var triangle2:Shape = new Shape();
The code on line 22 is no longer needed so delete the line completely.
View the updated code here: [ view Triangles.as code ]
Save the changes and then test the movie. The Triangles movie still works properly and again all three triangles are on the stage.
Try the last one for yourself. Place your cursor at the end of line 9 and press Return/Enter.
On line 10 type a line of code that declares a variable named triangle3, sets the data type to Shape and
instantiates a new Shape.
Then delete line 32.
View the updated code here: [ view Triangles.as code ]
Save the changes and test the movie. Even though we have moved the variable declarations to a new location, the Triangles
movie still works perfectly.
|
|
|
Close both Triangles.fla and Triangles.as and then re-open InheritingClasses.fla and InheritingClasses.as. Test the movie.
Excellent! Now each of the triangles has a filter effect...
|
|
Let's recap what has happened. Return to InheritingClasses.as. On line 7 the custom class Triangles is
imported. Once a class is imported, it can then be inherited.
On line 9, the InheritingClasses class inherits the code inside Triangles.as through the
extends keyword. This class contains all the code listed in Triangles.as
(which creates three triangle shapes on the stage).
When InheritingClasses.fla is published, it runs the code listed inside InheritingClasses.as. It creates three filters to be applied to
three objects. These objects are identified by their variable names (triangle1, triangle2, triangle3). The
variable names were not declared in InheritingClasses.as so Flash then visits the
imported custom class Triangles by looking inside Triangles.as. The constructor function inside
Triangles.as begins to run, which places three triangles on the stage. Once they are on the stage, the filters can be applied.
This type of cascading/linked code is achieved through inheritance. This is a very important concept to understand as it will be invaluable as you
build Flash games and complex, interactive movies which can contain many different custom classes that need to be inherited.
In the next tutorial learn how to place text on the stage and how to format it!
[ Formatted Text tutorial ]
|
|
| |
|
 |
 |
