1.3 Classes, Instances, and a “Hello World”

Classes and related concepts in Object Oriented Programming

ActionScript 3 is an Object Oriented Programming language (OOP), and as such relies on OOP conventions such as Classes, Instances and Methods (sometimes referred to as “functions”).

A Class, according to Wikipedia, is:

a user defined datatype which contains the variables, properties and methods in it. ‘A class defines’ the abstract characteristics of a thing (object), including its characteristics (its attributes, fields or properties) and the thing’s behaviors (the things it can do, or methods, operations or features).

Wikipedia also provides a useful analogy for Classes:

One might say that a class is a blueprint or factory that describes the nature of something. For example, the class Dog would consist of traits shared by all dogs, such as breed and fur color (characteristics), and the ability to bark and sit (behaviors).

From: http://en.wikipedia.org/wiki/Object-oriented_programming

Classes in ActionScript 3

In ActionScript 3, classes are organized into packages. Packages, their classes, and all related elements, can be seen in the left column of the Actions window (if it is hidden, or too small, just expand the edge to the left of the large empty – for now – code area):


Most of the exercises we will execute will deal with the Top Level, Language Elements, Flash.display, Flash.events, Flash.media, Flash.net, Flash.text and Flash.ui packages.

Naming and syntax conventions

Please take note of naming conventions in ActionScript: classes, being the parent entity, start with capitals; instances, methods and properties, being the child entities, start with lower case. In naming, only alphanumerical elements (besides “_”) should be used, and numbers should not be used in the beginning. No spaces should be used – instead, when using names composed of multiple words, use “camel case” – as in “myBeautifulObject”. Reserved words, that is, words already used by ActionScript, should not be used.

ActionScript uses a “dot syntax”. That means that “sentences” in code are structured using dots as a separator for the different language elements (“instance.method”, for example), similarly to how spaces separate elements in a natural language (“name[space]verb”, for example).

Operators usually connect two sentences together. For example, “=” is an assignment operator, which can define a new value for a property of an object.

Methods (or functions) are easy to distinguish, because they are usually expressed as verbs, and they contain parenthesis “()” in the end, which may specify certain parameters for executing the method.

“Hello World” example

1. The objective of this first exercise is to display the text “Hello World!” in the Flash main window (the “stage”).

2. Let’s type our code in the Actions window. First, we need to create a “text field”, a text box that displays text, and give it a name that makes it identifiable for manipulating it in ActionScript. That creates an object, that is, an instance of a Class called TextField with a specific name. Let’s call it “myTextField” (could be any other name):

var myTextField:TextField = new TextField();

When creating any new element in AS3, we will use the expression “var”. The colon (“:”) means to which class, or to what type of object, the new element belongs. The expression “new” is a constructor, meaning that the new object is created using a certain creation method for that class. Therefore, in some classes, certain “creation parameters” can be inserted between the parenthesis (). In this case, they will remain empty. Note that a line of code should be terminated with “;” (with a few exceptions), although Flash is not very strict about this.

3. So, the first line of code generated a text field, but it is not visible yet. To become visible, we should add it to the stage (the metaphor for screen or canvas in Flash). We can do it with the following line of code:

stage.addChild(myTextField);

The addChild() method puts our text field (“myTextField”) on the stage. By default, it will go to the upper left corner, with pixel coordinates 0, 0. When using pixel coordinates, we will assume that the first value corresponds to the horizontal axis, or X, and the second to the vertical axis, or Y.

4. Now the text field is on the stage, but there is no text there. Let’s ask Flash to display some text on the text field:

myTextField.text = "Hello world!"

With this line, we are specifying that the property “text” of myTextField is the text “Hello world!”. Note that “Hello world!” has quote marks, which labels it textual information (or as a “string”) to Flash.

5. This is the entire code:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.text = "Hello world!";

And this should be the result (I know, not very exciting yet):

Download files here: ex1-textfield.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 1. User Interface Design and tagged , , . Bookmark the permalink.

2 Responses to 1.3 Classes, Instances, and a “Hello World”

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

  2. Pingback: Flash and ActionScript | Software Studies for Media Designers

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