3.1 Class Creation

The objective of this exercise is to lear how to create a new class, more specifically a sub-class of an existing class (in this case, the Shape class). We will use this knowledge to create multiple instances of our new class (PurpleBalls), and position them randomly on the stage.

1. We have already discussed what Classes are in our introductory “lessons”. The question now is, why would you need to create your own classes? The answers for this are multiple. One of the main reasons is that it is very convenient when you have to create a multitude of objects that are not already available, or that are customizations of available objects (for example, particle systems). Another is that it is a very efficient way to organize the code, into different standalone blocks with different functionalities (otherwise, your code could develop into an out of control multi-page monster…). It also facilitates team work, in which different people are working in different classes. More reading material on this here: http://en.wikipedia.org/wiki/Class_%28computer_science%29

2. Let’s now move on to our exercise. Let’s create a new file, of a new type for us – an ActionScript file. Go to File menu, and select New. This familiar window appears:

Choose “ActionScript” file and press OK. Then save the file as “PurpleBall.as” (.as is the extension for ActionScript files.

3. Now let’s create a purple circle (let’s call it “PurpleBall”) in our file, which will be a class file (hence PurpleBall with capital P). This will be the “prototype” for all the purple balls we want to create. Note that we’re no longer in the Actions window, but in a new stand alone window, configured like the Actions window.

Creating a class from scratch demands that we create some extra elements of code in the beginning. So far, we have been sparred from that, since we have been introducing code in the main timeline, which already includes this code.

This is the code we need to write at the start of a new Class definition:

package {
import flash.display.Shape;
public class PurpleBall extends Shape {

An explanation on this code. “package” wraps the whole code together. When we create a class, we need to import all the Classes we need, mentioning the path from the package they are in. Finally, we name the class, and specify which of the Classes it is extending – in this case, PurpleBall will be a sub-class of Shape, so it extends Shape. “public”, which we will also use when creating functions/methods in a Class, means that other code can access the class.

4. Now let’s create the function that draws the PurpleBall:

public function PurpleBall() {
graphics.beginFill(0xFF00FF,0.5);
graphics.drawCircle(0,0,50);
}

This is the constructor function. Nothing new here, except the already mentioned “public” expression, and a second paramenter in the beginFill method, which is optional and sets the alpha (to 0.5).

5. Let’s close the package and the class:

}
}

The whole class code is as follows:

package {
import flash.display.Shape;
public class PurpleBall extends Shape {
public function PurpleBall() {
graphics.beginFill(0xFF00FF,0.5);
graphics.drawCircle(0,0,50);
}
}
}

Let’s save the file as “PurpleBall.as”. Please note that the name of the file (PurpleBall.as) must match the class definition (public class PurpleBall) and the construcor function (public function PurpleBall()).

6. Now let’s create a new Flash file, and save it in the same folder as our PurpleBall.as file.

7. Now let’s create a large number of purple balls, let’s say around 30. We’ll use a for loop for that. The code would look like this:

for (var n:int=0; n<30; n++) {
var myPurpleBall:PurpleBall = new PurpleBall();
addChild(myPurpleBall);
}

The code is familiar to us, except that the class has been created by us. Flash will recognize the class description file in our folder, and add 30 balls to the stage.

8. However, the balls now “sit” all on top of each other, on coordinate (0,0). Let’s put each of them in a random position on the screen, using Math.random() multiplied by stageWidth and stageHeight. The code would now look like this:

for (var n:int=0; n<30; n++) {
var myPurpleBall:PurpleBall = new PurpleBall();
addChild(myPurpleBall);
myPurpleBall.x=Math.random()*stage.stageWidth;
myPurpleBall.y=Math.random()*stage.stageHeight;
}

9. The result looks like this:

Download files: ex15-class_creation.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 3. Project Management and tagged . Bookmark the permalink.

One Response to 3.1 Class Creation

  1. Pingback: Teaching Designing Interaction with Electronics course | nuno correia .com

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s