OOP (Object Oriented Programming with AS3) Flash ActionScript 3.0 Introduction to Thomas Lövgren, Flash developer Introduction to

Introduction to OOP  Lecture Outline In this lecture we’ll discuss and practice the following topics: OOP: Introduction, Planning & Design OOP: Introduction, Planning & Design Classes and Objects Classes and Objects Properties Properties Constructor Constructor Create a Class file/test it Create a Class file/test it Parameters and get/set methods Parameters and get/set methods Encapsulation Encapsulation Inheritance Inheritance Polymorphism Polymorphism Examples of OOP usage Examples of OOP usage

Introduction to OOP What is OOP? Object Oriented Programming is programming which is oriented around objects, thus taking advantage of Encapsulation, Polymorphism, and Inheritance to increase code reuse and decrease code maintenance What is OOP? Object Oriented Programming is programming which is oriented around objects, thus taking advantage of Encapsulation, Polymorphism, and Inheritance to increase code reuse and decrease code maintenance Why OOP? As applications grow, structured programming gets unwieldy, and you'll be best advised to use an Object Oriented approach Why OOP? As applications grow, structured programming gets unwieldy, and you'll be best advised to use an Object Oriented approach When should I use Object Oriented? There’s no given rule for this, but in general for large projects, specific/advanced tasks, extended functionality/libraries etc. For small/basic projects it’s probably not worth it, cause OOP planning, design and implementation takes time When should I use Object Oriented? There’s no given rule for this, but in general for large projects, specific/advanced tasks, extended functionality/libraries etc. For small/basic projects it’s probably not worth it, cause OOP planning, design and implementation takes time

OOP Planning & Design OOP is a programming paradigm where we can plan, design and use abstraction to create models based on the real world OOP is a programming paradigm where we can plan, design and use abstraction to create models based on the real world The object-oriented program design involves: The object-oriented program design involves: Identifying the components of the system or application that you want to build Identifying the components of the system or application that you want to build Analyzing and identifying patterns to determine what components are used repeatedly or share characteristics Analyzing and identifying patterns to determine what components are used repeatedly or share characteristics Classifying components based on similarities and differences Classifying components based on similarities and differences

Classes & Objects The concept of Classes and Objects is an important part in AS3, basically the whole language package is based on various classes The concept of Classes and Objects is an important part in AS3, basically the whole language package is based on various classes So, what is a Class? What is an object? So, what is a Class? What is an object? A class is a self-contained description for a set of services and data A class is a self-contained description for a set of services and data The class describes the final product (House). The class describes the final product (House). To actually do something we need an Object (House Object) To actually do something we need an Object (House Object) If the class is the House-blueprint, then the Object is the House If the class is the House-blueprint, then the Object is the House We can write one class, and create as many Objects as we want from that class (with unique properties) We can write one class, and create as many Objects as we want from that class (with unique properties) Objects are often referred to as Class Instances Objects are often referred to as Class Instances

Properties Properties are a collection of attributes that describes an object For example, an Apple can have properties like color, size and position Properties are a collection of attributes that describes an object For example, an Apple can have properties like color, size and position In a Class file, properties are variables/attributes that we can access and manipulate, like: var xPos:Number = 200; In a Class file, properties are variables/attributes that we can access and manipulate, like: var xPos:Number = 200; xPos = 200 yPos = 200 Height = 300 Color = red

Create a New Object/Instans (Properties & methods) Here is an example of how we can create a new Dog Object from the Dog class Here is an example of how we can create a new Dog Object from the Dog class From the Dog class we can create as many new Dog Objects/Instnaces (with unique properties) From the Dog class we can create as many new Dog Objects/Instnaces (with unique properties) A Base class (top level class), is also called Super class A Base class (top level class), is also called Super class

Packages & Class Paths Packages are folder namespaces where we can store our classes, and give them an unique identifier – we can use them to sort classes by function and make the import of classes easier Packages are folder namespaces where we can store our classes, and give them an unique identifier – we can use them to sort classes by function and make the import of classes easier Sometimes we need to import external classes, for the Tween class package in Flash CS3 it looks like this: Sometimes we need to import external classes, for the Tween class package in Flash CS3 it looks like this: import fl.transitions.Tween; import fl.transitions.TweenEvent; import fl.transitions.easing.*; The class path is made up of your domain name in reverse (this makes sure that the class path is unique), for example like: com.interactiondesign.data The class path is made up of your domain name in reverse (this makes sure that the class path is unique), for example like: com.interactiondesign.data

Constructor A Constructor is a public method that has the same name as our class (definens our class) and is used to create new instances of our class (by using the new keyword) A Constructor is a public method that has the same name as our class (definens our class) and is used to create new instances of our class (by using the new keyword) Any code that we include in our Constructor method is executed when a new instance of the class is created Any code that we include in our Constructor method is executed when a new instance of the class is created Example of a Constructor for the class Ball Example of a Constructor for the class Ball //example of a constructor public function Ball():void{ trace(“Ball constructor in the Ball class“); } Note! If we don’t define a constructor method in our class, the compiler will automatically create an empty constructor for us Note! If we don’t define a constructor method in our class, the compiler will automatically create an empty constructor for us

Encapsulation (Hiding the details) Encapsulation allows us to hide class properties and methods from other areas of our project, but still allows us to manipulate them in a controlled way (classes hide their own internal data) Encapsulation allows us to hide class properties and methods from other areas of our project, but still allows us to manipulate them in a controlled way (classes hide their own internal data) An Access modifier is a modifier that changes the visibility of a class or its members (variables, functions etc) An Access modifier is a modifier that changes the visibility of a class or its members (variables, functions etc) In AS3 there are four different Access modifiers: In AS3 there are four different Access modifiers: Public: The public modifier provides access to external members Public: The public modifier provides access to external members Private: The private members are not exposed to external, instances or extended classes Private: The private members are not exposed to external, instances or extended classes Protected: Access from sub-classes Protected: Access from sub-classes Internal: Public to classes in same package Internal: Public to classes in same package Note! In this lecture we are going to focus on the Public and the Private modifier Note! In this lecture we are going to focus on the Public and the Private modifier

Create The Class file First, in the Flash Main menu we select New ActionScript file (.as) First, in the Flash Main menu we select New ActionScript file (.as) The Package Keyword in the class file is a mandatory structure that ensures that our class file is known to the compiler The Package Keyword in the class file is a mandatory structure that ensures that our class file is known to the compiler package{ //define package import flash.display.MovieClip; //import movieclip class public class Ball extends MovieClip{ //define our class //constructor for our class public function Ball():void{ trace("Ball class created!"); //output trace("Ball class created!"); //output}} } //end package/class

Testing The Class file Create a new Flash AS3 File Create a new Flash AS3 File In the Main Timeline, write the following code: In the Main Timeline, write the following code: var ball_mc:Ball = new Ball(); //create a new ball object addChild(ball_mc); //add to displaylist trace(ball_mc); //traces "Ball class created!" Note! The Ball class has only one method, containing the trace-command Note! The Ball class has only one method, containing the trace-command

Adding a Symbol Instance (add/attach a MovieClip to our class) If we want to add/connect a MovieClip to If we want to add/connect a MovieClip to our Ball class it could be done like this: 1. Create a MovieClip and give it the name ball_mc 2. Right Click on the ball_mc in Library, select Linkage (properties in CS4) 3. Then check the box “Export for ActionScript” “Export for ActionScript” 4. Now the MovieClip is connected to our Ball class and will automatically be attached from library on startup

Instance Parameters (create new objects with unique properties) We can also create new Objects with unique properties, by sending parameters to the class constructor, part of the code looks like this: We can also create new Objects with unique properties, by sending parameters to the class constructor, part of the code looks like this: //a part of the class file (Ball.as) //constructor for the Ball class, takes 3 parameters public function Ball(xPos:Number, yPos:Number, scale:Number):void{ x = xPos; y = yPos; scaleX = scaleY = scale; }_____________________________________________ //in the main timeline (.fla file) //create a new ball object, send 3 parameters to constructor var ball_mc:Ball = new Ball(200, 150, 2.5); addChild(ball_mc); //add to display list

Get and Set Methods (class file) Get and Set Methods (getters and setters) can be used to access properties or/and set new properties after an Object has been created Get and Set Methods (getters and setters) can be used to access properties or/and set new properties after an Object has been created //in class file (Ship.as), get and set methods for speed public function getSpeed():Number{ return _speed; //return speed } public function setSpeed(speed:Number):void{ _speed = speed; //set new value }_____________________________________________ //in the main timeline (.fla file) //create a new ship object with speed 200 var ship:Ship = new Ship(200); ship.getSpeed(); //traces 200 ship.setSpeed(350); ship.getSpeed(); //traces 350

Document Class The Document class is a new feature in AS3, it’s basically a main class, that serves as an application entry point for our FLA/SWF The Document class is a new feature in AS3, it’s basically a main class, that serves as an application entry point for our FLA/SWF When SWF’s loaded, the Constructor of the Document class will be called When SWF’s loaded, the Constructor of the Document class will be called A Document class extends Sprite or MovieClip class A Document class extends Sprite or MovieClip class In the properties panel in the FLA file, we can define our Document Class In the properties panel in the FLA file, we can define our Document Class Note! This means that we necessarily don’t need any code in the main timeline in our FLA file Note! This means that we necessarily don’t need any code in the main timeline in our FLA file

Inheritance (1/2) (Avoid rebuilding the wheel) With Inheritance a class can inherit or extend properties and methods from another class (unless the properties and methods are marked as private) With Inheritance a class can inherit or extend properties and methods from another class (unless the properties and methods are marked as private) The Subclass (class that’s inherit), can also add additional properties and/or methods, change some of the ones from the super/baseclass (the class that’s being extended) The Subclass (class that’s inherit), can also add additional properties and/or methods, change some of the ones from the super/baseclass (the class that’s being extended) The subclass can send received parameters up to the superclass, by using the super() command/method and also override inherited methods from the superclass by using the override keyword The subclass can send received parameters up to the superclass, by using the super() command/method and also override inherited methods from the superclass by using the override keyword

Inheritance (2/3) (Avoid rebuilding the wheel) In this example we have two classes: A superclass called MySuperClass (see below) and a subclass called MySubClass - which inherit properties and methods from the superclass In this example we have two classes: A superclass called MySuperClass (see below) and a subclass called MySubClass - which inherit properties and methods from the superclass package{ //set up the superclass public class MySuperClass{ //declare class public function sayHello():void{ //method trace("Hello from MyBaseClass"); //output }}} //first frame in main timeline var sub:MySubClass = new MySubClass(); //create a new subclass object sub.sayHello(); //call derived method from superclass sub.sayGoodbye(); //call method in subclass

Inheritance (3/3) (Avoid rebuilding the wheel) If a class is derived from more than one superclass, the inheritance is called: Multiple Inheritance – If a class is derived from a derived class, it’s called: Multilevel Inheritance If a class is derived from more than one superclass, the inheritance is called: Multiple Inheritance – If a class is derived from a derived class, it’s called: Multilevel Inheritance

Drawing/Graphics (Sprite) (Circle Drawing class) The constructor in this class takes one parameter (radius) and then draws a circle, part of the code looks like this: The constructor in this class takes one parameter (radius) and then draws a circle, part of the code looks like this:package{ import flash.display.Sprite; public class DrawCircle extends Sprite{ private var circle:Sprite; private var _radius:Number; public function DrawCircle(radius:Number):void{ _radius = radius; circle = new Sprite(); addChild(circle);circle.graphics.beginFill(0xff0000); circle.graphics.drawCircle(300, 100, _radius); circle.graphics.endFill(); //more code here…

Polymorphism (Exhibiting similar features) Polymorphism allows related classes to have methods that share the same name, but that behave differently when invoked Polymorphism allows related classes to have methods that share the same name, but that behave differently when invoked By using polymorphism we can reduce the number of methods for our subclasses, which makes it easier to extend classes By using polymorphism we can reduce the number of methods for our subclasses, which makes it easier to extend classes

UML Diagram UML Diagram is ideal for software engineers and software designers who need to draw detailed software design documentation UML Diagram is ideal for software engineers and software designers who need to draw detailed software design documentation

The Tween Class (example of OOP usage) The Tween class can be used for animations, in this case we only have to write 5 lines of code (someone have programmed the OOP part for us) The Tween class can be used for animations, in this case we only have to write 5 lines of code (someone have programmed the OOP part for us) So, to get this working, we only have to write like: So, to get this working, we only have to write like: //import classes import fl.transitions.Tween; import fl.transitions.TweenEvent; import fl.transitions.easing.*; //create the tween object, set up parameters var myTween:Tween = new Tween(my_mc, "x", Elastic.easeOut, 30, 350, 3, true); myTween.start(); //start tween

Flash and Phidgets (example of OOP usage) As a Interaction Designer you’ll probably sometimes get in contact with Flash and Phidigets (sensors) As a Interaction Designer you’ll probably sometimes get in contact with Flash and Phidigets (sensors) AS3 has a great OOP based library for controlling differnet types of Phidgets AS3 has a great OOP based library for controlling differnet types of Phidgets //create a new interface object var phid:PhidgetInterfaceKit = new PhidgetInterfaceKit(); //add listeners to object, call onConnect method phid.addEventListener(PhidgetEvent.CONNECT,onConnect); phid.open("localhost", 5001, "", 65472); //open connection

Game development (example of OOP usage) It’s common to use OOP in Flash-based game development, for example a Space Game could have classes like: It’s common to use OOP in Flash-based game development, for example a Space Game could have classes like: Spaceship Spaceship Enemies Enemies Bullet Bullet Score Score

Summary: Benefits of OOP Analyzing user requirements Analyzing user requirements Designing software Designing software Constructing software Constructing software Reusability (reusable components) Reusability (reusable components) Reliability Reliability Robustness Robustness Extensibility Extensibility Maintainability Maintainability Reduces large problems to smaller, more manageable ones Reduces large problems to smaller, more manageable ones Fits the way the real world works. It is easy to map a real world problem to a solution in OOP code Fits the way the real world works. It is easy to map a real world problem to a solution in OOP code