CIT2180 CHT2180

1

• CIT2180 (CHT2180)
• Intermediate Authoring
• Module Leader Matthew Mantle
• e-mail m.e.mantle_at_hud.ac.uk

2
Register
3
Todays Lecture

• Classes and Instances
• Creating a class in AS 3.0

4
Recap

• Object Oriented Programming
• Allows us to break a large complex program into
  smaller parts!
• Each part is an object
• Each object has a specific job to do
• Key Concepts
• Properties
• Methods
• Arguments
• Encapsulation

5
Objects, Properties and Methods

• For each of the following identify the objects,
  properties, values, methods and arguments

Math.E simple_btn.addEventListener(MouseEvent.CLIC
K, doIt) myNum.toPrecision(4) someXML.ignoreWhites
pacetrue sprite1.contains(sprite2)
6
Objects, Properties and Methods
Math.E Object Math Property -
E simple_btn.addEventListener(MouseEvent.CLICK,
doIt) Object simple_btn Method
addEventListener() Arguments MouseEvent.CLICK,
doIt myNum.toPrecision(4) Object myNum Method
toPrecision() Argument - 4 someXML.ignoreWhites
pacetrue Object someXML Property
ignoreWhitespace Value - true sprite1.contains(sp
rite2) Object sprite1 Method
contains() Argument sprite2 (also an object)
7
Classes and Instances

• Class
• A class describes a type of object
• Think of a class as being a blueprint or set of
  plans for creating objects
• Instance
• A specific, individual object
• We will use the words object and instance to mean
  the same thing
• It is the actual instances that make things
  happen
• Like last weeks practical session
• We used MovieClip objects and Button objects
• MovieClip, Button classes
• ball_mc, left_btn - instances

8
Classes and Instances

• Imagine we want to make a car
• A starting point would be to produce some plans,
  a blueprint for making the car.
• The plans describe the cars properties e.g.
• The car will have an engine
• The car will have paint
• The car will have a registration plate
• The plans also describe what the car will be able
  to do
• Indicate
• Accelerate
• Brake
• Change gear etc.
• Using these plans we can create many different
  cars (different colours, different registration
  numbers etc.)
• The plans would be a class
• The actual cars would be instances

9
Classes and Instances
Car colour reg accelerate() brake() changeGear()
Individual objects (instances) are created from
the class
car1
car2
car3
Colour - Blue Reg - K341 PPT
Colour - Silver Reg - N305 QDF
Colour - Red Reg - V934 DFT

• The class is Car
• A class Car would define the general
  characteristic of all cars
• Properties colour, reg
• Methods accelerate(), brake(), changeGear()
• Specific instances (car1, car2, car3) are created
  from this class
• car1.colour //displays Blue
• car3.colour //displays Red
• car2.brake() //instructs car2 to brake

10
Classes and Instances
MovieClip x y alpha Stop() hitTestObject()
Individual objects (instances) are created from
the class
my_mc1
ball_mc
anotherClip
x - 100 alpha - 0.5
x - 0 alpha - 1
x - 200 alpha - 0.1

• The class is MovieClip
• A class MovieClip defines the general
  characteristic of all movie clips
• Properties rotation, x, y, alpha, visibility
  etc.
• Methods stop(), hitTestObject() etc.
• Specific instances (my_mc1, ball_mc, anotherClip)
  are created from this class

11
Recap
Horse name speed run()
Individual objects (instances) are created from
the class
horse1
horse2
horse3
nameRed Rum speed 5
nameBarracuda speed 4
nameHercules speed 1

• Imagine I am building a horse race simulator. I
  might create a Horse class.
• The Horse class defines the general
  characteristics of a Horse
• name, speed
• horse1, horse2, horse 3 are specific instances
  created from this class
• horse1
• name Red Rum, speed 5
• horse2
• name Barracuda, speed 4
• All the Horse instances can run()

12
Classes and Instances
Photo filename title description
Individual objects (instances) are created from
the class
photos1
photos2
photos0
filenamelights.jpg titleLights descriptionA
tree, a light and some bricks
filenameseats.jpg titleSeats descriptionA man
sitting on a seat in a stadium
filenamewall.jpg titleWall descriptionA woman
leaning against a brick wall

• The class is Photo
• The Photo class defines the general
  characteristics of a Photo
• filename, title, description
• In this example an array, photos, stores
  instances created from this class
• photos0.filename // lights.jpg
• photos2.title // Wall
• Note the same objectName.property syntax
• Even though the object is stored in an array

13
Creating an Instance (Instantiating)

• The syntax for creating a new instance is always
  the same

new SomeClass()

• Class names always start with capital letters
• Dont use capital letters for variable names!
• The keyword new simple means we want to create a
  new instance
• We need the parentheses ()
• The brackets
• Here are some examples

new Array() // creates an instance of the Array
class new MovieClip() // creates an instance of
the MovieClip class new Car() //creates an
instances of the Car class
14
Creating an Instance (Instantiating)

• Sometimes we need to specify additional
  information when we create an instance

new SomeClass("info 1","info 2")

• In the above example info 1 and info 2 are
  arguments
• We separate arguments using a comma
• Arguments dont have to be Strings, could be
  Numbers, Boolean values, another object etc.
• Arguments are used to set properties of the
  instance
• Here are some examples

new Car("silver","N305 QDF") new Array("Kestrel
Moon","BB","WhateverYouDrive") new
Tween(holder_mc,"x", Strong.easeOut, holder_mc.x,
xPos, 1, true)
15
Creating an Instance (Instantiating)

• When we create a new instance and dont pass any
  arguments, the class is said to have a zero
  argument constructor
• For example

new Array() // creates an instance of the Array
class new MovieClip() // creates an instance of
the MovieClip class new Car() //creates an
instances of the Car class
16
Variables

• When we create a new instance we often store a
  reference to the new object in a variable

var myInstanceSomeClassnew SomeClass()

• In this example an instance of SomeClass is
  stored in the variable myInstance
• We can then work with this instances methods and
  properties e.g.

var newCarCar new Car("silver","N305
QDF") trace(newCar.colour) // displays
silver newCar.indicate("right") //instructs the
car instance to indicate right
17
Variables - Naming
var myInstanceSomeClassnew SomeClass()

• The variable name must follow some rules
• Made up of letters, numbers, underscores _ or
  dollar signs
• Cannot contain spaces or other characters
• Cannot be keywords
• And should follow some conventions
• Keep it as short and simple as possible
• Give information about what they contain
• Capitalise the first letter of contained words
  but not the first letter of the variable
  (camelCase)
• Use nouns (variables represent things)

18
Variables - Naming

• Good Error or Bad?
• CustomerName
• jumpingTo
• thePlaceWhereIPutTheAmount
• audio-1
• Firstname
• harry
• losersDetails
• final List
• circle_radius
• spaceShip_mc

19
Variables - Naming

• Good Error or Bad?
• CustomerName (bad)
• jumpingTo (bad)
• thePlaceWhereIPutTheAmount (bad)
• audio-1 (error)
• Firstname (bad)
• harry (bad)
• losersDetails (good)
• final List (error)
• circle_radius (ok)
• spaceShip_mc (good)

20
Variables Data Typing
var myInstanceSomeClassnew SomeClass()

• Typing restricts the type of data the variable
  can hold
• In this example I am specifying the variable can
  only hold instances of the type SomeClass
• The following would cause an error
• Trying to store a MovieClip instance in a
  variable for TexField instances

var myClipTextFieldnew MovieClip()
1067 Implicit coercion of a value of type
flash.displayMovieClip to an unrelated type
flash.textTextField.

• Here are some more examples

var myClipMovieClipnew MovieClip() var
companiesArraynew Array("Kestrel
Moon","BB","WhateverYouDrive")
Its easy, just make sure these two match
21
Question

• A have a class, Rectangle. The Rectangle class
  constructor accepts two arguments, the width of
  the rectangle and the height of the rectangle.
• a) Write a line of code that will create a new
  instance of Rectangle, a reference to the new
  instance should be assigned to a variable, myRec.
• b) The Rectangle class has a move() method. The
  move() method accepts two parameters, an x
  position and a y position. Write a line of code
  that will position the myRec instance 20 pixels
  from the left edge and 10 pixels from the top
  edge of the stage

22
Question

• A have a class, Rectangle. The Rectangle class
  constructor accepts two arguments, the width of
  the rectangle and the height of the rectangle.
• Write a line of code that will create a new
  instance of Rectangle (choose your own width and
  height), a reference to the new instance should
  be assigned to a variable, myRec.
• The Rectangle class has a move() method. The
  move() method accepts two parameters, an x
  position and a y position. Write a line of code
  that will position the myRec instance 20 pixels
  from the left edge and 10 pixels from the top
  edge of the stage
• var myRecRectanglenew Rectangle(100,50)
• myRec.move(20,10)

23
Class files

• When we create a Flash application we will use a
  number of different classes
• Some are provided by Flash for us
• Already exist e.g. Number, Array, String,
  MovieClip
• Others we will create ourselves
• Either by building on an existing class
• Inheritance
• Or by creating our own class from scratch
• We create applications by using many different
  objects created from many different classes

24
Creating our own Class

• When we build AS 3.0 applications we have several
  different files
• Each class is defined in a separate .as file
• We still need a .fla file
• Before we build an OOP application in Flash we
  should create a new folder to put it in
• We will create several different files
• They all need to be in the same directory so they
  can work together
• Creating a different folder for each application
  keeps the files organised
• The simplest AS 3.0 application consists of a
  single .fla document and a single class that we
  define
• This class is known as the document class
• It represents the main timeline of the
  application

25
Defining a Class

• We define class in .as file
• .as file is a simple text file
• To create a new .as file
• FilegtNewgtActionScript file
• Type code into this file

26
A class template
package //import statements go here public
class ClassName //properties go
here function ClassName() //
additional methods go here

• All classes have the same basic structure
• Classes can be broken down into two parts
• A small outer wrapping
• Inner part that does all the work

27
Defining a Class - The Outer Wrapping
package public class SimpleTest
SimpleTest.as

• The file needs to be saved as TheNameOfTheClass.as
  
• In my example SimpleTest.as
• Note the capitalisation, this should be reserved
  for classes
• Only class names should start with capital letter
• Packages are used to organise classes into groups
• Packages usually have names that mirror the
  directory structure the class files are stored in
• For now all our class files and .fla files will
  be stored in the same directory so we dont have
  to specify a package name

28
Defining a Class - The Outer Wrapping
package import flash.display.MovieClip public
class SimpleTest

• The import statement allows us to access a
  specified class or group of classes
• In this case I am importing the MovieClip class
• A bit like a ltlinkgt element in XHTML
• Allows us to bring in other code that will be
  useful to us
• If we dont import the required classes we get an
  error

1046 Type was not found or was not a
compile-time constant NameOfClass.
29
Defining a Class - The Outer Wrapping
package import flash.display.MovieClip public
class SimpleTest extends MovieClip

• The class I am creating is based on the existing
  MovieClip class
• I am creating a special type of movie clip
• Like a movie clip with extra powers
• The extends keyword simply specifies that my
  class is based on the existing MovieClip class
• It represents the main timeline of the
  application so it has to be based on the existing
  MovieClip class
• Whenever we create a document class it has to
  extend an existing class
• The other option is the Sprite class (more on
  this in later weeks)

30
Defining a Class - The Inner Part
package import flash.display.MovieClip public
class SimpleTest extends MovieClip public
function SimpleTest() trace("working")

Inner part

• The inner part does all the work
• This is where we will write the properties,
  methods etc.
• Constructor function
• When we instantiate an object it is the
  constructor function that is called
• In this case it is a simple trace statement

31
Defining a Class - The Inner Part
package import flash.display.MovieClip public
class SimpleTest extends MovieClip public
function SimpleTest() trace("working")

• The constructor is a function
• It has to be placed inside the curly brackets of
  the class definition
• Getting the wrong number/order of curly brackets
  is a common error

1084 Syntax error expecting rightbrace before
end of program.
32
Defining a Class - The Inner Part
package import flash.display.MovieClip public
class SimpleTest extends MovieClip public
function SimpleTest() trace("working")

These two must match exactly

• The constructor function should have the same
  name as the class
• It wont cause an error, but you wont be able to
  create objects unless you do

33
Running an AS3.0 application

• Create a new .fla document
• On the properties tab of the main timeline enter
  the name of the document class
• The code in the constructor function will be
  executed when the swf starts.
• In this case a simple trace() statement will
  appear

These two must match exactly
package import flash.display. public class
SimpleTest extends MovieClip public function
SimpleTest() trace("working")
34
Class files

• What no new?
• I have just stated that to create a new instance
  of a class we need to use the new keyword
• So we might expect

new SimpleTest()

• But
• The document class is a special class
• Creating the instance is handled automatically

35
The Document Class
Any objects on the main timeline can be accessed
through their instance names
package import flash.display. public class
SimpleTest extends MovieClip public function
SimpleTest() trace(enter_btn)
The trace statement displays
object SimpleButton
36
Event Handling

• This is a simple event handling example

package import flash.display. import
flash.events. public class SimpleTest extends
MovieClip public function SimpleTest() enter_
btn.addEventListener(MouseEvent.CLICK,doSomething)
public function doSomething(eEvent) trace
("The button has been clicked")

• We need another import statement
• This time for the event handling
• I add the listener in the constructor function
• So it is set up straightaway
• The listener function is added inside the class
• It must be inside the curly brackets
• The listener function is a function that belongs
  to a class
• Its a method

37
No more timeline scripting!

• Although we can write AS 3.0 code on the timeline
• ActionScript 3.0 is designed to create class
  files
• Nearly all the books assume we are going to write
  classes
• There is quite a lot of new syntax
• But every class we create follows the same
  structure
• Put a bit of effort into learning it

38
Practical

• Re-creating practical 1 but as a class based
  application