Flash, Flex and ActionScript Resources -
MVC Design Pattern
Tolga Ozdemir
Tolga Özdemir is professionally interested in the usage areas of the internet namely for education and for marketing. Both topics convey somehow the meaning of information engineering, to him. He is a flex/flash developer who has a view on designing but he is indifference to become a designer.

You can reach his writings on actionscript, internet marketing, and e-learning via his web site 
By Tolga Ozdemir
Published on October 28, 2007

Actionscript is growing up, while this happen programming in a logical view is important. I will write about in this article one of the basic design pattern in use - Model View Controller.

MVC Design Pattern

While Actionscript is growing, you should control your applications in the aspect of software engineering. So, please use design patterns! Today I will write about one of the fundamental design pattern. My focus will be on AS2 but you may see similar example on AS3 too.

MVC Design Pattern

MVC pattern is one of the well known techniuqe to code. In antient times of computer coding, computer programs had very limited user and client interfaces. The increased richness of the user interface presents new challenges, and the Model View Controller (or MVC) pattern addresses those challenges to help create more flexible applications. Flash is a good and fast solutions to create GUI based applications. So, why not use MVC in our samples?

MVC pattern idea bases on that data and view located in seperate logics. There are many disadvantages for the oppsite aim – data and view are together.

These are :

• Difficult management of data from outside the object
• Creating different GUIs with the same logic
• Difficult modification of GUI

Understanding the Pattern

MVC pattern is based on three layers: Model, View and Controller. Each has its own responsibilities.

Locates all data information for the application. It does not care about how you interpret it or how process it.

View displays the information coming from the model. It only cares the GUI part and listens Model for data updates.

Controller is a subsystem between Model and View. It helps both to communicate each other. For example, It updates data according to the action recieved from  View.

After learning all basic idea, let’s see an example. I created a simple slot machine example with MVC. First we will look at the data model.

Model Data Class

class {

 private var strip_a:Number;
 private var strip_b:Number;
 private var strip_c:Number;
 public var score:Number = 100;
 public var bet:Number=2;
 public var win:Number=0;
 public function SlotMachine(a:Number, b:Number, c:Number) {
  this.A = a;
  this.B = b;
  this.C = c;
 public function set A(value:Number) {
  this.strip_a = value;
 public function get A():Number {
  return this.strip_a;
 public function set B(value:Number) {
  this.strip_b = value;
 public function get B():Number {
  return this.strip_b;
 public function set C(value:Number) {
  this.strip_c = value;
 public function get C():Number {
  return this.strip_c;
 public function toString():String{
  return this.A + ","+ this.B + ","+ this.C;

As you can see, the class simply parametrize all variables in a slot machine. Now let’s see controller which controls the data and updates the view.

Controller Class


class extends EventDispatcher{

 private var slot:SlotMachine;
 private var dispatchEvent:Function;
 public var removeEventListener:Function;
 public var addEventListener:Function;
 public var onRoll:Function;
 public function get Slot():SlotMachine {
  if(this.slot == null) this.roll();
  return this.slot;
 public function set Slot(value:SlotMachine) {
  this.slot = value;
 public function SlotMachineData() {
  this.addEventListener(this, "onRoll");
  this.Slot = new SlotMachine();
 public function roll():Void{
  this.Slot.A = Math.round(Math.random()*3+1);
  this.Slot.B = Math.round(Math.random()*4+1);
  this.Slot.C = Math.round(Math.random()*5+1);
  var LUCKY:Number = 5; = 0;
  if( this.Slot.A==this.Slot.B && this.Slot.B==this.Slot.C && this.Slot.A==3){ = 50 +;
  }else if( this.Slot.A==this.Slot.B && this.Slot.B==this.Slot.C){ = 20 +;
  }else if( (this.Slot.A==LUCKY) || (this.Slot.B==LUCKY) || (this.Slot.C==LUCKY)){ = 2 +;
  }else { = -;
  this.Slot.score = this.Slot.score +;
  dispatchEvent({type:"onRoll", target:this});

When we look at the controller class, we see that it chances and updates the data and dispatch the event “onRoll” then the view will listen this event and update itself.

View Class

import mx.utils.Delegate;

class extends MovieClip {

 private var slot:SlotMachineData;
 private var btnRoll:MovieClip;
 public function SlotView(s:SlotMachineData) {
  if(s!=undefined) this.slot = s;
  else this.slot = new SlotMachineData();
  this.slot.onRoll = Delegate.create(this, slot_onRoll);
  btnRoll.onPress = Delegate.create(this, onPress);

 public function slot_onRoll(e:Object):Void{
  trace( "slot : " + this.slot.Slot );
 public function onPress(){
  trace( "_______________\n");
  trace( "roll : " + slot.Slot.toString() );
  trace( "score : " + slot.Slot.score );
  trace( "win : " + );

Here, we register the class to catch the onRoll event. When the event is invoked, we updated the interface accordingly.

Well, that’s all I can jote about. Use design patterns to learng how effective they are in your applications.