Object-oriented Programming

Writing code in classes is generally referred to as object- oriented programming (OOP), because the objects that inhabit the code govern its behavior. Prior to OOP, most programming was procedural in nature, meaning it followed

a sequence (e.g., execute step A, then execute step B, then step C, etc.). One beneﬁt of writing object-oriented code is that it allows several different processes to run simultane- ously because all the objects operate independently of each other. Each object is in charge of its own behavior.

Objects in your object-oriented Flash project have the

potential to move around like ants in ant farms. You can Advanced programmers also use design patterns

Object-oriented Design Patterns

pluck an ant from one farm and drop it into another and as part of their OOP projects. Design patterns are

the ant will still function. The ant doesn’t need directions solutions to commonly occurring problems. These

from a leader or a central command to operate. The ant patterns have names like Builder, Factory, and

Singleton. As an animator, you’re not likely to be just does what it’s supposed to do. The logic that powers developing projects that require the use of design

the ant is considered decentralized.

patterns, so they won’t be covered in depth in this book, but it’s good to be aware that they exist.

As the designer of the ant farm, this takes a huge burden off your shoulders. It’s not necessary to conceive of a farmer smart enough to direct all the workings of the ant farm. You can simply design a reasonably “dumb” ant that knows how to complete a few tasks and possibly how to interact with other ants, and then instantiate as many copies of the ant as you need.

The remaining examples in this chapter will all be decentralized in the manner just described. Instead of attaching your classes to a document, you will attach new classes to Library items. Once the class has been written, you will never have to look at it again (if you don’t want to). Your symbols won’t require any directions from your document; they will simply go about their business. After you’ve attached a class to a Library item, you can instantiate the class by dragging your Library item onto the Stage. Although you will be treading into the domain of a pro- grammer, you will maintain the graphical workﬂow of an animator—the best of both worlds!

Chapter 3 Introduction to ActionScript Classes

Attaching Classes to Library Items

You’ll start by reconceiving the functionality from the DocumentExample ﬁles as a class that could be attached to

a Library item.

1. Open DocumentExample.ﬂa and choose File > Save As. Then save the document as LibraryClassExample.fla in

the examples folder created previously.

2. Under the Publish options in the Properties panel, highlight and delete the previously added document

class, DocumentExample.

3. Create a new class (choose File > New and select ActionScript 3.0 Class). When prompted, name the

class ClickSquare.

4. Save the ActionScript ﬁle as ClickSquare.as in the examples folder.

5. This class should also extend the MovieClip class since you’ll be attaching it to a MovieClip in the Library. Add

the following highlighted code: public class ClickSquare extends flash.display.

➥ MovieClip {

6. Replace the comment inside the constructor method

( // constructor code ) with the following code:

this.addEventListener(MouseEvent.CLICK, onClick);

7. Add the following code after the closing curly brace of the constructor method:

private function onClick(e:MouseEvent):void{ this.width *= 2; }

8. Be sure to add the following import statement below the existing import statement ( import flash.display.

MovieClip; ) if the Code Editor doesn’t automatically add it:

import flash.events.MouseEvent;

9. Save your class (Command+S/Ctrl+S).

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Your ClickSquare.as ﬁle should now read: package {

import flash.display.MovieClip; import flash.events.MouseEvent;

public class ClickSquare extends flash.display. ➥ MovieClip{

Don’t worry if you have extra empty lines between your curly braces. ActionScript is not picky about

public function ClickSquare(){ empty space.

this.addEventListener(MouseEvent.CLICK, ➥ onClick); }

private function onClick(e:MouseEvent):void{

this.width *= 2; }

Let’s review the code so far. Your ClickSquare class resides in an unnamed package (because it’s in the same folder as the document that will instantiate it). ClickSquare

Use the Tab key to indent lines of code.

imports two native (built into Flash) classes: MovieClip and MouseEvent. ClickSquare extends the functionality of the MovieClip class. When the ClickSquare class is instantiated, the constructor adds an event listener that listens for a mouse click. When a mouse click occurs, the listener executes the onClick method of the ClickSquare

class and passes a MouseEvent object to the method. When the onClick method is executed, the ClickSquare instance will be referenced using the keyword this, and the current

The MouseEvent object contains information about the click, includ-

width (an inherited property) of the ClickSquare will be ing the x and y positions of the

doubled.

click location. After the parentheses containing the parameter in the onClick method deﬁnition, there is a colon followed by the keyword void. Colons in ActionScript are most often used for typing, also known as strong typing, strict typing, or strict data typing. Strict typing informs the ActionScript compiler as to which type of object you expect to be used. In

Chapter 3 Introduction to ActionScript Classes

the case of the onClick function, the strict typing void (all lowercase in ActionScript 3.0) informs the compiler that the onClick method will not be returning a value. If the

onClick method attempts to return a value using the return keyword, the compiler generates an error. Reasons to Use Strict Typing

Here are three very good reasons to use strict Now you’ll associate your ClickSquare class with the square

typing in your code: Library item.

. Clarifies the intention of your code 1.

Ctrl-click/right-click on the square symbol in the Helps the compiler catch potential errors . Library panel and select Properties to bring up the Enables additional code hinting in the Flash .

Code Editor (Figure 3.14) Symbol Properties dialog box.

2. Click Advanced (if necessary) to show the Linkage properties.

3. Select the Export for ActionScript check box. This allows you to add a class name.

4. Type the class name ClickSquare into the Class ﬁeld.

Figure 3.14 The Code Editor shows the

You can click the button with the check mark icon to

methods and properties available for a vari-

the right of the ﬁeld to verify that Flash can locate your

able that has been strictly typed.

class ﬁle (Figure 3.15).

You can also type your custom class name into the Base Class field within the Symbol Properties dialog box. This will leave the Class field open if you want to provide a unique class name for the symbol. You can then instantiate your Library item from ActionScript using the unique name from the Class field. Your instantiated symbol will still inherit the methods and properties of the custom class that you typed into the Base Class field.

Figure 3.15 The Linkage properties within the Symbol Prop- erties dialog box allow you to add a class to a Library item.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

5. Save your document (Command+S/Ctrl+S) and test your movie (Command+Return/Ctrl+Enter).

6. Click your square in the test window to ensure that the If the text in the Class field of the

width doubles each time you click. Symbol Properties dialog box

does not reflect an existing (and

7. Close the test window and return to your document. available) class, Flash will create an

Drag two more copies of the square symbol onto the empty class for you when compil-

ing, and you will be alerted when Stage and test your movie again (Figure 3.16).

you click OK in the Symbol Proper- ties dialog box if this is the case.

Figure 3.16 Each square already has ClickSquare functionality, which elimi- nates the need to write new code.

When you click on any one of the squares, that particular square should double its width. All the square instances employ the functionality from the ClickSquare class. It’s that easy to reuse the class!

Object-oriented Programming