WARNING * THE FLV CONTAINED WITHIN THIS DEMO TUTORIAL CONTAINS MILDLY OFFENSIVE LANGUAGE FROM A RECORD BEING PLAYED WHILST BEING SCRATCHED IN A RHYTHMIC MANNER ☺

NOTE This app uses the pre V2 PMVC package ** update coming soon!

Requirements:

Software: Flex Builder 3 + Flash CS3 Plugins: PureMVC.swc

Overview:

This is a really basic application constructed using Flex Builder for all ActionScript code and Flash CS3 for the visual components. The purpose of the tutorial is to show how to construct a simple Flash CS3 application using the PureMVC framework. The tutorial should give you working knowledge of how to interact with components on the stage in Flash from within the PureMVC framework. We will use the FLVPlayback component as an example and create an event listener in a mediator to listen out for a click on the FLVPlayback component. This tutorial will not be going into great depth about the framework but simply give you a step by step guide of how to get the framework up and running in a real life application.

1) Start Flex Builder 3 and create a new ActionScript project named CS3VideoPMVC, keep the default settings on the first new project page and click next. We need to have access to the FLVPlayback component classes so click to add another swc and navigate to the FLVPlaybackAS3.swc located within Configuration > Components > Video in the default Flash CS3 installation directory. Click browse on the main source folder option, select the CS3VideoPMVC folder and click new, this will create a standard src folder for all the source files we will create. Click finish. Right click the project folder and select ActionScript compiler, deselect HTML wrapper, we can leave the generation of the HTML page to Flash. Finally create a new folder in the src folder named assets and place an flv for the application to play.

2) Start Flash CS3 and follow the instructions provided by Cliff for importing the framework into Flash (or you can copy the whole PureMVC org directory into the src folder in Flex). Next create a new flash file (ActionScript 3), save it as CS3VideoPMVC in the src folder in the CS3VideoPMVC directory created in Flex. Set the document properties to: width = 320, height = 240, frame rate = 31. Create a new movie clip and name it VideoMC, ensure the linkage properties are displayed by clicking advanced and check export for ActionScript, assigning CS3VideoPMVC as the class, click OK. Drag and instance of this movie clip onto the stage and give it an instance name of player. Double click on the clip and drag an FLVPlayback component onto the stage and give it an instance name of flv_player. In the component inspector set the skin to SkinOverPlaySeekMute.swf. In publish settings select the Flash tab and click ActionScript version settings, deselect automatically declare stage instances and click ok. We are now finished editing in the Flash IDE, however, keep Flash open for publishing and publish preview of the application.

3) In Flex create a new AS3 class named CS3VideoPMVC. This is the class, which will tie the components on the stage in the fla to the PureMVC framework. Create 2 public variables, one named player data typed to MovieClip and the second named flv_player data typed to FLVPlayback. These are the instances of the components on the stage in flash, we now want to get a reference to the PureMVC framework inside this class.

4) Within in the src folder create a new folder called com, then within that folder create a new folder named nutrixinteractive. Create 3 new folders within the puremvc folder named model, view and controller.

5) In the nutrixinteractive folder create a new ActionScript class named ApplicationFacade, click browse next to superclass and type Façade, this will import the PureMVC Façade class. Click add next to interfaces and type IFacade to implement the IFacade class. Deselect generate constructor from super class and generate functions inherited from interfaces then click finish.

6) Type the following to complete your ApplicationFacade class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

package com.nutrixinteractive
{
  import com.nutrixinteractive.controller.StartupCommand;
  
  import org.puremvc.interfaces.IFacade;
  import org.puremvc.patterns.facade.Facade;
  import org.puremvc.patterns.observer.Notification;
   
  public class ApplicationFacade extends Facade implements IFacade
  {
      // Notification name constants
      public static const STARTUP:String           = "startup";
      
      /**
               * Singleton ApplicationFacade factory method
       */
      public static function getInstance():ApplicationFacade
      {
          if ( instance == null ) instance = new ApplicationFacade();
          return instance as ApplicationFacade;
      }
       
      public function startup( app:CS3VideoPMVC ):void
      {
          notifyObservers( new Notification( STARTUP, app ) );
      }
       
      /**
       * Register Commands with the Controller
       */
      override protected function initializeController():void
      {
          super.initializeController();
           
          registerCommand( STARTUP, StartupCommand );
      }
  }
}

What is happening here is a check to see if there is already and instance of the ApplicationFacade, if not create one, this is called a creating a Singleton Class. Next is our startup method that expects to me passed the instance of our main application. A notification named STARTUP is then sent to anyone listening (or Observing) and the main application instance is passed as a parameter. The ApplicationFacade is listening and has STARTUP as a named constant and has also registered it to a command. The command to be run is StartupCommand.

7) Within the controller folder create a new ActionScript class named StartupCommand with a super class of SimpleCommand and the interface ICommand. Deselect generate constructor from super class and generate functions inherited from interfaces then click finish.

8) Ensure your StartupCommand looks like below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

package com.nutrixinteractive.controller
{
  import com.nutrixinteractive.view.PlayerMediator;
   
  import org.puremvc.interfaces.ICommand;
  import org.puremvc.interfaces.INotification;
  import org.puremvc.patterns.command.SimpleCommand;
   
  public class StartupCommand extends SimpleCommand implements ICommand
  {
      /**
       * Register the Proxies and Mediators
       *
       * Get the View components for the Mediators from the app,
       * which passed a reference to itself on the notification.
       */
       override public function execute( note:INotification ):void
       {
           var app:CS3VideoPMVC = note.getBody() as CS3VideoPMVC;
            
           // Register Mediators
             facade.registerMediator( new PlayerMediator( app ) );
       }
  }
}

The ApplicationFacade (our hub) calls this command. When notifyObservers() was run from the startup method it passed an instance of the main application that we can retrieve using getBody() method on this notification. It is from this command we can now initiate (register) a mediator to handle interaction with the main application.

9) Within the view folder create a new ActionScript class named PlayerMediator with a super class of Mediator and the interface I Mediator. Deselect generate constructor from super class and generate functions inherited from interfaces then click finish.

10) Ensure your PlayerMediator looks as below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

package com.nutrixinteractive.view
{
  import fl.video.*;
  
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  
  import org.puremvc.interfaces.IMediator;
  import org.puremvc.patterns.mediator.Mediator;

  public class PlayerMediator extends Mediator implements IMediator
  {
      // Mediator name
      public static const NAME:String = 'PlayerMediator';
      
      // Visuals on stage
      private var flv_player:FLVPlayback;
      
      /**
       * Constructor
       */
      public function PlayerMediator( viewComponent:Object )
      {
          // Pass the viewComponent to the superclass
          super( viewComponent );
          
          assignPlayer();
      }
      
      override public function getMediatorName():String
      {
          return PlayerMediator.NAME;
      }
       
      protected function get player():CS3VideoPMVC
      {
          return viewComponent as CS3VideoPMVC;
      }
       
      private function assignPlayer():void
      {    
           flv_player = player.flv_player;
           
           flv_player.addEventListener( MouseEvent.CLICK, onClick );
           
           playVideo();
      }
      
      private function playVideo():void
      {
          flv_player.play("assets/krome.flv");
      }
      
      private function onClick( e:MouseEvent ):void
      {
          trace(" CLICK ");
      }
  }
}

The mediator is passed an instance of the main application and using a getter method enables the main application to be referenced as ‘player’. We create a local variable to the FLVPlayback component and now have direct access to add an event listener.

11) Finally to tie the application together ensure your CS3VideoPMVC.as class looks as below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package 
{
  import com.nutrixinteractive.ApplicationFacade;
  
  import fl.video.FLVPlayback;
  import flash.display.MovieClip;

  public class CS3VideoPMVC extends MovieClip
  {
      public var player:MovieClip;
      public var flv_player:FLVPlayback;
      
      public function CS3VideoPMVC()
      {
          ApplicationFacade.getInstance().startup(this);
      }
  }
}

Here we create the 2 local variables, which are the component instances on the stage. We then instantiate the ApplicationFacade directly calling the startup method passing a single parameter, the instance of the documentClass which is home to our player MovieClip and flv_player FLVPlayback component.

12) Run the application in Flash. And click the controls on the component. A trace should display in the Flash output window.

Where next?

Now you can access components on the stage from within the PureMVC framework why not add your own controls. You can also set up a Proxy to get an external play list and pass that to the mediator for the FLVPlayback component to play. Now the basic structure is in place adding to the framework is a synch.

Source Files: source

NOTE UPDATE 1 + Package restructured. + Mac OS X structures deleted + Swf, javascript and html files removed

NOTE UPDATE 2 + Added the puremvc org directory to the src folder in source files. + Amended tutorial accordingly.

copyright newtriks 2008