Understanding OOP - Object Oriented Programming

Actionscript Course

Object-Oriented programming (OOP) is a specific programming technique to create chunks of programming code (called "objects") that do a specific job, and divide the script into distinct pieces that can be easily managed. These pieces of code can be grouped to form another object.
- For example, the wheels, frame, the pedal, and the handlebars of a bike are separate objects, but if you unite them, they can form a bicycle, which also can be considered an object.
The same is in ActionScript programming, the text, line, shape, movie clip symbol, functions, etc., anything is considered an object.

• Objects are defined using two primary identifiers (or members): properties and methods.

• Properties - are characteristics that define an object.
  - For example, "color" can be property of a DVD player.
• Methods - are actions that can be performed by an object.
  For example, Play, and Pause are methods of a DVD player.

In programming, "method()" is a function defined in the code of a class, so it uses round brackets.
- Becouse the method is basically a function, it can have one or more parameters (separated by comma) within brackets.
                method(parameter1, parameter2)
The dot operator (.) is used to access the members of an objects (properties and methods).
Each code line should end with a semicolon (;)
                E.g.      object.property.method();

The characteristics of an object can be changed through its properties and methods.
To assign or change the value of a property, use the following syntax:

object.property = value;

  - Example:

// square is the object, width is the property, and 100 is the value
square.width = 100;

There are methods that can be called to define a property of an object, with the syntax:

object.property.method();

  - Example:

// the beginFill() method defines the graphics property of the object "square"
square.graphics.beginFill(0x08fe08);

And methods that can be applied directly to the object:

object.method();

  - Example:

// gotoAndStop(9) method moves the curent Frame in myClip animation to Frame 9, and stop
myClip.gotoAndStop(9);

• In addition to objects, properties and methods, in OOP there are elements known as "events".

• event - is the action of an application or user, such as a mouse click, that triggers an action related to an object.

So, the following elements are used in OOP (Object Oriented Programming):

• classes - is a collection of related properties, methods, and events that are grouped in one colection. It contains the code which define the data type, state, and behaviors of an object.
  - A class is like a generalized blueprint for building an object.
• Instances - is a specific object that can uses the properties and methods of a class.
• Properties - characteristics that define an object.
• Methods - actions that an object can perform.
• Events - actions that can trigger the execution of a function, or instructions.
  Events can be the actions of the mouse cursor (mouse clicks or mouse movements.), the keybord actions (pressed keys).
  There are also Frame events (like the Flash playhead moving into or out of specific frames), Load events (which report on the progress when loading external files), and other event types.

To understand how these elements work, try the following example.
- We create a Flash presentation that changes the size and position of a square when we click a button.
Notice how the OOP elements are used: object, property, event, and how to make the connection between objects on the Stage and ActionScript code.

1. Open a new Flash document (ActionScript 3.0), select the "Rectangle tool" and draw a square on the stage.
2. Convert the square into Movie Clip symbol (from Modify -> Convert to Symbol, and select "Movie Clip" Type).
   - The square on the Stage becomes an instance of the Movie Clip symbol.

   Before you can control objects on the Flash stage with ActionScript, you have to convert them to movie clip or button symbols.

3. With the square selected, open the "Properties panel" and give this instance the name square
   - The name of an Instance on the Stage is added in the "Properties panel", in the field where you see: "<Instance Name>".

   This step is important. If you give objects on the stage a name, you can use their name in the script code to tell ActionScript exactly which object you're talking about. The name of an instance on the stage will represent that object in the script code.

4. Select the "Oval tool" and draw a circle near the square (as shown in the imge below), then convert this circle into Button symbol (from Modify -> Convert to Symbol, and select "Button" Type).
   Make sure the circle on the stage is selected, and then in the "Properties panel" type buton in the "Instance Name" box, as shown in the picture below.
   
5. Create a new layer in the Timeline (from Insert -> Timeline -> Layer), double-click the layer name, and then type "actions".

   It's good programming practice to create a separate layer in the Timeline for your ActionScript code. Naming it "actions" or "scripts" makes it clear that the layer is reserved for code.

6. Right-click on Frame 1 in "actions" layer and choose Actions.
7. In the "Actions panel" add the following code:

   // registers an event listener for "buton" object
   buton.addEventListener(MouseEvent.CLICK, setWidth);
   
   // defines the function accessed by the event
   function setWidth(evt)
   {
     // set the width and Y position for "square" instance
     square.width = 115;
     square.y = 100;
   }
   

8. Press "Ctrl+Enter" to see the result.
   The Flash Player will display a presentation like this (click on the yellow circle, which is the button):

The FLA file with this example can be downloaded from: Understanding OOP.

- "addEventListener()" is an ActionScript method used to "registers an event listener". The first parameter is the event the listener is listening ("MouseEvent.CLICK"). The second parameter is the name of the function ("setWidth") that run when the event happens.
- "setWidth()" executes the code added within its curly brackets {} when it is accessed.

<p>Web development courses: <em>CoursesWeb.net</em></p>

h3 {
  padding: 2px 0.2em;
}

// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

if(isset($_POST["field"])) {
  echo $_POST["field"];
}