Requirements:

• Adobe Flash CS3
• Adobe Flex Builder 3
• Away3d Library (I recommend using the version I used)
• Tweener Library
• Source Files

Pre Requisites:

• Having done Part 1 and 2 of this tutorial.
• Intermediate programming skills.
• Moderate knowledge of AS3.
• Basic Familiarity with OOP.
• Basic knowledge of Flash CS3.

Step 0:

This is the last section of the tutorial we’ve been working on. We’re going to wrap up everything we’ve done so far and make our work a solid, working application, which we can use and even extend in the future. First, we will centralize all arbitrary parameters into what’s known as a model, then, we’re going to connect the photo gallery into an external xml so we can load images dynamically, and finally we’re going to enhance our graphics a little bit by adding a reflection effect to the 3D scene.

Step 1 – Centralizing data:

As I stated before, we will start by creating a place holder for all arbitrary variables used so far. With arbitrary variables I mean values that we’ve chosen such as the camera’s tween time in the “moveTo()” method within CameraController, or the Z position of the cameraTarget that can greatly affect the nature of the camera’s motion. All these will be placed in a class that will hold these static constants and will also be used to hold dynamic variables further on, so they can be accessed easily from anywhere in the application. So, go ahead and create a new folder next to “view” called “model”. In it, create a new Actionscript Class called “Model.as”.

Now, I need you to work alone for a while. The job to do is recognise all the values you have used so far throughout the application, that you think would be a good idea to name into a variable and control from this central class. Then, all these variables will be declared in Model.as as static constants. This is how my class looks after doing just that:

package  com.li.photoviewer.model

{ 

     public class Model

     {

          public static const  CAMERA_Z:Number = -2000;

          public static const  CAMERA_Z_ZOOMED:Number = -1500;

          public static const  CAMERA_ZOOM_TIME:Number = 1;

          public static const  CAMERA_ZOOM_EASE:String = "easeoutexpo";

          public static const  CAMERATARGET_FRICTION:Number = 0.95;

          public static const  CAMERATARGET_BOUNCE_FACTOR:Number = 0.5;

          public static const  CAMERATARGET_DRAG_FACTOR:Number = 0.1;

          public static const CAMERATARGET_SPEED_FACTOR:Number  = 0.05;

          public static const  CAMERATARGET_Z:Number = -100;

          public static const  CAMERATARGET_MOVETO_TIME:Number = 1;

          public static const  CAMERATARGET_MOVETO_EASE:String = "easeoutexpo";

          public static const  PHOTO_PLANE_SEGMENTS:Number = 3;

          public static const  PHOTO_MATERIAL_SMOOTH:Boolean = true;

          public static const  PHOTO_FADEIN_TIME:Number = 0.25;

          public static const  PHOTO_SPACING:Number = 750;

          public static const  BG_COLOR1:uint = 0x222222;

          public static const  BG_COLOR2:uint = 0x000000;

          public static const  BG_COLOR_RATIO:uint = 80

          public function Model()

          {

          }

     }

}

“public static const” is a way to declare a variable that will be accessible from the outside of the class, can be accessed without instantiating the holder class, and will not change. If you don’t what Im talking about, you should see how we are going to use these variables and then come back to what I’ve just said and you should get it right away.

Step 2 – Connecting to the centralized data:

So far all this is completely useless unless we connect our classes to Model.as, so that the constants can be used. This is done very easily; for instance to connect the “0.05” value representing a camera velocity factor, we do as in the following code:

private function followTarget(evt:Event):void

{

     camera.lookAt(cameraTarget.position);

     var dX:Number = cameraTarget.x - camera.x;

     camera.x  += dX*0.05;

...

Simply change to:

private function followTarget(evt:Event):void

{

     camera.lookAt(cameraTarget.position);

     var dX:Number = cameraTarget.x - camera.x;

     camera.x  += dX*Model.CAMERATARGET_SPEED_FACTOR;

     ...

As long as the model has been imported in CameraController of course:

import com.li.photoviewer.model.Model;

So this is what you should do next. Import Model.as in all the view and controller classes, and connect the values to it. If you’ve imported the model into a class first, you should get useful codehints from Flex to help you complete this task. When you’re done, you’ll have the power to very precisely tweak the entire application from Model.as. You should play around with this to tune it to your liking.

Step 3 – Setting up an external XML:

Now that our model is set up and working, we will read data from an external xml, and also use the model to store the data contained in the xml. We will trigger a service that will read an xml and detail the images that will be loaded in our application, and once this service is done, the 3D scene will build itself based on this data. For this, lets start by designing our xml. Create a folder named “data” and in it a new file named “data.xml”. The folder should be next to “com” or  “away3d” folders. Then design the xml structure of data.xml like this:

<?xml  version="1.0"?>

<imgs>

     <img name="testImage.jpg"/>

     <img  name="1.jpg"/>

     <img  name="2.jpg"/>

     <img  name="3.jpg"/>

     <img  name="4.jpg"/>

     <img  name="5.jpg"/>

     <img  name="6.jpg"/>

     <img  name="7.jpg"/>

     <img  name="8.jpg"/>

     <img  name="9.jpg"/>

     <img  name="10.jpg"/>

</imgs>

The xml is extremely simple, it just contains the name of each image.

Step 4 – Creating an XML Reader:

We should continue by creating a folder called “services” next to “view” and in it a new Actionscript Class called “XmlReader”, which will take care of extracting the data from the xml. This class should have two variables in its constructor, “xmlPath” as a string and “onComplete” as a function, It will also have a “loader” variable as a URLoader:

private var xmlPath:String;

private var onComplete:Function;

private var loader:URLLoader;

public function XmlReader(xmlPath:String,  onComplete:Function)

{

     this.xmlPath = xmlPath;

     this.onComplete = onComplete;

     loader = new URLLoader();

     loader.addEventListener(Event.COMPLETE,  completeHandler);

     loader.load(new URLRequest(xmlPath));

}

The path of the xml file is stored, (as well as “onComplete” which we will see in a minute), then the loader is initialized and triggered. The function “completeHandler()” will, as its name says, handle the loader once it’s done:

private function completeHandler(evt:Event):void

{

     var xmlDocument:XMLDocument = new  XMLDocument();

     xmlDocument.ignoreWhite  = true;

     var xml:XML = new XML(evt.target.data);

     xmlDocument.parseXML(xml.toString());

     for(var i:uint; i<xmlDocument.firstChild.childNodes.length;  i++)

          Model.data.push(xmlDocument.firstChild.childNodes[i].attributes.name);

     onComplete();

}

The handler parses all the data in the xml and injects it in the model. Of course, we need to go back to Model.as and declare this “data” variable that we are referring to. Just add it after all the constants:

public static var data:Array = [];

Finally (referring again to the completeHandler method), “onComplete()” gets called as soon as all the parsing is done. Remember that we designed this XmlReader to receive a reference to this external function when it is instantiated. This will simply be the function to be called when the reader has finished its job.

Step 5 – Using the reader:

Lets implement this now in the application’s main class, PhotoViewer3D.as. Carefully study these modifications:

package

{

     import com.li.photoviewer.services.XmlReader;

     import com.li.photoviewer.view.PhotoScene;

     import flash.display.Sprite;

     import flash.display.StageAlign;

     import flash.display.StageScaleMode;

     [SWF(backgroundColor="0x000000", frameRate="30")]

     public class PhotoViewer3D extends Sprite

     {

          public function PhotoViewer3D()

          {

               stage.scaleMode  = StageScaleMode.NO_SCALE;

               stage.align  = StageAlign.TOP_LEFT;

               var reader:XmlReader = new XmlReader(”data/data.xml”, init);

          }

          private function init():void

          {

               var photoScene:PhotoScene = new PhotoScene();

               addChild(photoScene);

          }

     }

}

I’ve just instantiated an XmlReader, pointed it to the xml path, put the creation of the scene in its own separate method, and also pointed the reader to this method so its called as soon as its done.

Step 6 – Loading the images:

The next step is pretty obvious. We now have the data array containing all the names of our images, waiting for us in the model and we’ve also delayed the creation of the 3D scene till after this data has been obtained. So we just need to alter the “initObjects()” method of PhotoScene.as to read this data. It’s too simple actually:

private function initObjects():void

{

     for(var i:uint; i<Model.data.length; i++)

     {

          var photo:PhotoLoader = new PhotoLoader("imgs/" + Model.data[i]);

          photo.x  = i*Model.PHOTO_SPACING;

          scene.addChild(photo);

          cameraController.maxX  = photo.x;

          photo.addOnMouseDown(photoClickHandler);

     }

}

That’s it. Test the application and see how it now loads all the corresponding different images. We’re practically done now, I just want to add an additional effect to the app…

Step 7 – Adding a reflection:

As it is usual in many open source projects, many people share their code in classes that can be very handy and easy to use. You can very often download a class that does a particular thing, use it, and never know how it actually works. So that’s what we’ll do, we will greatly enhance the look of our application by downloading a class, and I will make my point of showing how great it is to use other people’s classes, or even design classes yourself to be reusable in this way.

Download Reflection.as and paste it in the view folder.

The class should be ready to work, except that its package path is all wrong. This is pretty logical, since I’ve just used it for another project and it was placed completely on a different place. Correct this path to the class’ current location. You can also look into the class, now or later, to understand how it works and maybe learn new things that could motivate you to other uses or even new ideas with Away3D.

Step 8 – Plugging in the reflection:

Go back to PhotoScene.as and declare the reflection instance (we don’t need to import Reflection.as since it is in the same package as PhotoScene.as):

private var  reflection:Reflection;

Then, in the “initScene()” method, initialize it and add it to the display list:

reflection = new Reflection(scene, camera);
addChild(reflection);

And finally, in “renderScene()” add a call to the reflections rendering method:

private function renderScene(evt:Event):void

{

reflection.render();

view.render();

}

I also took the time to connect the Reflection class to the model and drop its arbitrary variables there. I even set up a USE_REFLECTION constant in the model and applied this Boolean value in the initialization of the reflection in “initScene()” and the “renderScene()” method too. All this allows you to, not only tweak the app to look good, but also to consider performance issues. With the values that you should have in the model after you do this, you can really optimize the application.

public static const USE_REFLECTION:Boolean = false;

public static const REFLECTION_OFFSET:Number = -525;

public static const REFLECTION_BLUR:Number = 8;

public static const REFLECTION_ALPHA:Number = 0.25;

public static const REFLECTION_SCALING:Number = 2;

So, that’s it! The application is flexible enough to be extended easily. Maybe a horizontal scroller could be a good idea, for example… I leave that to your creativity. I wanted to keep the MVC architecture as simple as I could by avoiding custom events, singleton classes, etc, but those could be good things to investigate for future projects. On the other hand, I really recommend playing with the Away3D engine, the possibilities with it are endless!!

I hope you’ve enjoyed the tutorial. I’m looking forward to make another one when I can =)

In the final the result will be this.

Requirements

• Adobe Flash CS3
• Adobe Flex Builder 3
• Away3d Library (I recommend using the version I used)
• Tweener Library
• Source Files

Pre Requisites

• Intermediate programming skills
• Moderate knowledge of AS3
• Basic Familiarity with OOP
• Basic knowledge of Flash CS3

Step 0

In this tutorial I will assume that you are familiar with the basics of building an Actionscript Away3D project in Flex. If you haven’t used these two technologies together before, it would be best if you go through my previous tutorial first. Due to the complexity of this application, I will need to skip some things to go faster. So, if something is not explained here, or suddenly a large chunk of code is dropped with no descriptions, it has been covered (hopefully) in the mentioned tutorial.

Step 1 – New Project

Lets get started. Create a new Actionscript Project in Flex and name it “PhotoViewer3D”. Then, download the libraries I listed in the requirements and paste them in the project’s folder.

Now, one of the things that will be covered here is a very simplified application architecture that could be a good starting point for any project you do that implies a moderate level of complexity. For this, all code will be placed in a folder structure, carefully separating functions between different classes, and hence emulating the basics of a Model View Controller design pattern. You should have a general grasp of it by the end of this series.

Right click on the project’s folder in the Flex Navigator and choose New -> Folder, then type “com/li/photoviewer/view” and press Finish. Naming folders this way is known as Reverse Domain Syntax, and is a good programming practice.

Step 2 – Setting up the scene

Go to PhotoViewer3D.as and build a basic main class:

package
{
     import flash.display.Sprite;
     import flash.display.StageAlign;
     import flash.display.StageScaleMode;

     import com.li.photoviewer.view.TestScene;

[SWF(backgroundColor="0x000000", frameRate="30")] 

     public class PhotoViewer3D extends Sprite
     {
          public function PhotoViewer3D()
          {
               stage.scaleMode  = StageScaleMode.NO_SCALE;
               stage.align  = StageAlign.TOP_LEFT;

               var testScene:TestScene = new TestScene();
               addChild(testScene);
          }
     }
}

Line 7 imports an away3D holding class that we haven’t made yet, so we should create it right away. Right click on the “view” folder and choose New -> Actionscript Class and name it “TestScene”. It should have the following code in it:

package com.li.photoviewer.view 

{ 

     import away3d.cameras.Camera3D;
     import away3d.containers.Scene3D;
     import away3d.containers.View3D;
     import away3d.core.clip.RectangleClipping;
     import away3d.core.math.Number3D; 

     import flash.display.Sprite;
     import flash.events.Event; 

     public class TestScene extends Sprite
     {
          private var scene:Scene3D;
          private var camera:Camera3D;
          private var view:View3D; 

          public function TestScene()
          {
               addEventListener(Event.ADDED_TO_STAGE,  init, false, 0, true);
          } 

          public function init(evt:Event):void
          {
               removeEventListener(Event.ADDED_TO_STAGE,  init); 

               initScene();
               initObjects();
               addEventListener(Event.ENTER_FRAME,  renderScene);
          } 

          private function initScene():void
          {
               scene  = new Scene3D(); 

               camera  = new Camera3D();
               camera.zoom  = 10;
               camera.focus  = 200;
               camera.z  = -2000; 

               view  = new View3D();
               view.camera  = camera;
               view.scene  = scene;
               view.x  = stage.stageWidth/2;
               view.y  = stage.stageHeight/2;
               view.clip  = new RectangleClipping(-stage.stageWidth/2,  -stage.stageHeight/2, stage.stageWidth/2, stage.stageHeight/2);
               addChild(view);
          } 

          private function initObjects():void
          {
                
          } 

          private function renderScene(evt:Event):void
          {
               camera.x  = 3*(mouseX - stage.stageWidth/2);
               camera.y  = 3*(mouseY - stage.stageHeight/2);
               camera.lookAt(new Number3D(0, 0, 0)); 

               view.render();
          }
     }
}

NOTE: If any of this shocked you, it has all been explained in the tutorial mentioned in Step 0.

Step 3 – Setting up our PhotoLoader component

Create a new Actionscript Class in the view folder and name it “PhotoLoader”. These will be our 3D photograph object. The class will extend Away3D’s Plane primitive, with a few additional features, more particularly, the ability to load an external image. So, lets start by setting up the plane:

package com.li.photoviewer.view
{
import away3d.primitives.Plane;

public class PhotoLoader extends Plane
     {
private var urlPath:String;

          public function PhotoLoader(urlPath:String)
          { 

               super();

               this.urlPath = urlPath;

               this.rotationX = 90;
               this.width = 640;
               this.height = 480;
               this.segmentsH = 4;
               this.segmentsW = 4;
          }
     }
}

As you can see, we’ve set up the constructor so that when we instantiate a PhotoLoader object, we pass it the image name it has to load as a parameter. Now, go back to TestScene, and in the “iniObjects()” method, make an instance of PhotoLoader and add it to the scene:

var testPhoto:PhotoLoader = new PhotoLoader(“imgs/testImage.jpg”);

scene.addChild(testPhoto);

The urlPath we passed this time will be irrelevant, but we’ll pass it anyway so no errors are thrown. Go ahead and test the application, you should see something like this:

Step 4 – Skinning the plane with Flash

First of all, we need to give the plane a skin or texture. Even though it will contain an image, it needs to contain something else while it’s loading, and somehow show progress for that load process. For this, we will design some graphics in Flash, and bring them to Flex with what I find to be a very practical and simple technique. We will use a fla file to generate a library.swf file that will contain some graphics for our application, and then embed that swf in Flex and extract the clips as we need them. This is a very useful technique, and I definitely recommend it for any Flex projects that contain design based vector graphics.

Open Flash, create a new AS3 Flash File and save it in your project’s folder, next to PhotoViewer3D.as. Once in it, select File -> Publish Settings and type “assets/library.swf” for the swf output path (deselect the html output). Now, create a new folder next to that fla called “assets” either from your file explorer or by right clicking the project’s folder in the Flex Navigator. Now, if you publish the fla you will see that library.swf shows up in your newly created assets folder.

Step 5 – Creating and extracting the graphics created in Flash

Great, now I wont be describing how to make the graphics in Flash since I believe you must be very familiar with this. You should download the fla and overwrite the one you just made. Sorry! Just wanted to make sure you understood what’s going on. Now, open the downloaded fla. You will see a clip called “LoaderFront” made up of a gray box and a progressBar clip which has in turn a sub clip. The important thing to notice here is that LoaderFront has a Linkage and its Base Class was changed to Sprite. Publish it again, go back to Flex, right click on library.swf in the assets folder and choose Refresh.

This is the only code you’ll need to pull those graphics from Flex, type it at the top of the PhotoLoader class (inside Public class…):

[Embed(source="assets/library.swf", symbol="LoaderFront")]
public var LoaderFront:Class;

You’ve just extracted the symbol from the swf’s library and assigned it to a LoaderFront class. If you create a new instance of this class (and add it to the display tree), you’ll have a graphics object that extends Sprite! And you can treat it as any other sprite. Great isn’t it?

Step 6 – Applying the graphics to the plane

Go back to PhotoLoader.as and create these variables for the class:

private var materialSprite:Sprite;
private var progressBar:Sprite;
private var progressBarSubClip:Sprite;

And then this method:

private function initClips():void
{
     materialSprite  = new LoaderFront();

     progressBar  = Sprite(materialSprite.getChildByName(“progressBar”));
     progressBarSubClip  = Sprite(progressBar.getChildByName(“subClip”));
}

Now we have references to all the clips that we need. You have to add the “initClips()” call at the end of the constructor class.

Next, type this new method under the last one and also make sure you call it from the constructor:

private function initMaterial():void
{
     var material:MovieMaterial = new MovieMaterial(materialSprite);
     material.smooth  = true;

     this.material = material;
}

And Test the application. You should now see that the plane has taken the graphics as its material. Your PhotoLoader class should look like this so far:

package com.li.photoviewer.view
{
     import away3d.materials.MovieMaterial;
     import away3d.primitives.Plane;
     import flash.display.Sprite;
     public class PhotoLoader extends Plane
     {
         [Embed(source="assets/library.swf", symbol="LoaderFront")]
          public var LoaderFront:Class;
          private var urlPath:String;
          private var materialSprite:Sprite;
          private var progressBar:Sprite;
          private var progressBarSubClip:Sprite;
          public function PhotoLoader(urlPath:String)
          {
               super();
               this.urlPath = urlPath;
               this.rotationX = 90;
               this.width = 640;
               this.height = 480;
               this.segmentsH = 4;
               this.segmentsW = 4;
               initClips();
               initMaterial();
          }
          private function initClips():void
          {
               materialSprite  = new LoaderFront();
               progressBar  = Sprite(materialSprite.getChildByName(“progressBar”));
               progressBarSubClip  = Sprite(progressBar.getChildByName(“subClip”));
          }
          private function initMaterial():void
          {
               var material:MovieMaterial = new MovieMaterial(materialSprite);
               material.smooth  = true;
               this.material = material;
          }
     }
}

Step 7 – Loading images into the plane

The final thing to do for Part 1 of this tutorial, is implement all the image loading features of our extended plane. For this, we will use a regular Loader instance and add a few event listeners to check for progress and complete events.

Add the loader variable next to the other class variables:

private var loader:Loader;

And call a new method under the “initMaterial()” call in the constructor as “initLoader()”, then build the method:

private function initLoader():void
{
     loader = new Loader();
     loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,  progressHandler);
     loader.contentLoaderInfo.addEventListener(Event.INIT,  initHandler);
     materialSprite.addChild(loader);
     loader.alpha  = 0;
}

The loader is initialized, two listeners are registered, then the loader is injected to the plane’s material sprite completely invisible. I’ve made it invisible because I’m going to make it fade in once the image has been loaded into it.

Now, lets set up the handlers and a little “setProgress()” utilitary method:

private function progressHandler(evt:ProgressEvent):void
{
     setProgress(evt.bytesLoaded/evt.bytesTotal);
}
private function initHandler(evt:Event):void
{
     Tweener.addTween(loader,  {alpha:1, time:1, transition:“easeoutexpo”});
}
 
private function setProgress(value:Number):void
{
     progressBarSubClip.scaleX  = value;
}

Pretty straight forward. As the image downloads, the progress handler calls the “setProgress()” function which in turn sets the horizontal scale of the progress bar, and when the download completes, or more precisely when the loaded content is initialized, Tweener makes the loader fade in by animating its alpha. Don’t forget to import Tweener for this:

import caurina.transitions.Tweener;

Step 8 – Triggering the load

Next, lets trigger the load by adding a “loadImage()” method as the last method called in the constructor and defining it:

private function loadImage():void
{
     loader.unload();
     loader.alpha  = 0;
     setProgress(0);
     loader.load(new URLRequest(urlPath));
}

Finally, create the imgs folder in the project, download THESE images and paste them in it. Test the app, you should see the image loaded on the plane:

Watch the Demo HERE.

Next:

On the next part we will continue to develop our application by using multiple instances of this PhotoLoader object, developing advanced camera motion and interactivity.

Those would be forwarding and rewinding slides, play and pause the slideshow and linkable slides. If you haven’t read the first part tutorial yet, you should do it before continue. You can read it here.

Requirements

Adobe Flash CS3

Try / Buy

Sample files:

slideshowprt2.zip

Adjust XML structure

To store the link of each slide, we just add it as an attribute to the xml file, or to be more accurate, on the image nodes. We also set the target window of the link, which might be neccesary to set in some cases. So, our xml is looking now like this:

<slideshow>
	<image src="images/fly.jpg" desc="Fly" link="http://www.wikipedia.org" target="_self"/>
	<image src="images/mouse.jpg" desc="Computer mouse" link="http://www.google.com" target="_blank"/>
	<image src="images/country.jpg" desc="Country" link="http://www.thetechlabs.com" target="_self"/>
	<image src="images/rope.jpg" desc="Rope" link="http://www.amazon.com" target="_blank"/>
	<image src="images/flower.jpg" desc="Flower" link="http://www.adobe.com" target="_self"/>
</slideshow>

Adding new objects

Since we know, how the xml looks like, we can move on to the knew stuff on the stage. In the mcInfo movieclip we’ve added 4 new buttons. Pause/Play and Forward/Rewind, which will later be assigned to event listeners. On the main stage is a invisible button as big as the size of the slides which will be used to open the links defined in the xml.
Alright, that’s already enough to go on with the coding part.

Adding new variables

First of all, we need to add some new variables to our script.

To know, if the slideshow is currently playing or paused, we set a flag:

var bolPlaying:Boolean = true;

And we also store the current slide link and target window in a variable:

var strLink:String = "";
var strTarget:String = "";

Init function

This is all we need for the variable. Now let’s take a look about what’s changing in the init function of the slideshow. We added the following two lines at the beginning of the function to prevent the user to click any button as long as the xml file hasn’t been loaded completely:

	mcInfo.visible = false;
	btnLink.visible = false;

We’ve also changed the function that will be called once the slideTimer event is fired. Now the function nextSlide() will be called, which we’ll create later:

	slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);

On the last line of the initSlideshow() function we add the event listeners for the buttons. The play and button pause event listeners will be assigned to the same function togglePause(). The next and previous button will be asssigned to the nextSlide() and previousSlide() function. And last of all, we connect the invisible link button that covers the slide area with the goToWebsite() function. And since our slideshow will automatically be playing at the beginning, we hide the play button.

	btnLink.addEventListener(MouseEvent.CLICK, goToWebsite);
	mcInfo.btnPlay.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnPause.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnNext.addEventListener(MouseEvent.CLICK, nextSlide);
	mcInfo.btnPrevious.addEventListener(MouseEvent.CLICK, previousSlide);
	mcInfo.btnPlay.visible = false;

onXMLLoadComplete function

Once the xml is completely loaded, we need to show the mcInfo and the button link again. So we add the following two line of code to the function onXMLLoadComplete()

	mcInfo.visible = true;
	btnLink.visible = true;

And since our switchSlide() function will now need to have the index number of the slide, we add a zero as the parameter. We’ll explain the changes in the switchSlide() function later.

	switchSlide(0);

NextSlide/PreviousSide function

Let’s take a look at the nextSlide() and previousSlide() functions. They are called when clicking the next and previous button and the nextSlide() function is also called when the Timer event of the sliderTimer has been fired.
The nextSlide() function checks, if there are any slides left to move on. If so, the current switchSlide() function will be called with the next slide index. If there are no more slides left, then the parameter will be zero standing for the first slide.
The previousSlide() function works the same way. If there are slide we can go back, then the switchSlide() function will be called with the previous slide index. If we’re already on the first slide, then we start the slideshow from the last slide with calling the switchSlide() function with the parameter of the total slide count minus one since the array count begins with zero.

function nextSlide(e:Event = null):void {
	if(intCurrentSlide + 1 < intSlideCount)
		switchSlide(intCurrentSlide + 1);
	else
		switchSlide(0);

}

function previousSlide(e:Event = null):void {
	if(intCurrentSlide - 1 >= 0)
		switchSlide(intCurrentSlide - 1);
	else
		switchSlide(intSlideCount - 1);
}

SwitchSlide function

Since the nextSlide() and previousSlide() functions are now handling the checking for the slides, we can take out this part in the switchSlide() function.
To prevent the user from clicking too fast on the next and previous button, we check, if the tweener is still fading in the slides. If so, we just ignore the action. We’re doing this by adding the following if-statement to the first line of the switchSlide() function.

	if(!Tweener.isTweening(currentContainer)) {

Now we only need to set the new link and the target of it. This will be done exactly the same way as setting the description of the slide.

		strLink		= xmlSlideshow..image[intCurrentSlide].@link;
		strTarget	= xmlSlideshow..image[intCurrentSlide].@target;

FadeSideIn function

The fadeSlideIn() function has also a small addition. We check if the slideshow is currently playing and show the number of seconds to the next slide. If the slideshow is paused, we show a status message. The text will be assigned to the lbl_info label.

	if(bolPlaying) {
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
	} else {
		mcInfo.lbl_loading.text = "Slideshow paused";
	}

OnSlideFadeIn function

On the onSlideFadeIn() function we now need to check, if the slideshow is playing. If so, we can start the timer again:

	if(bolPlaying && !slideTimer.running)
		slideTimer.start();

TogglePause function

The togglePause() function will be called when the user clicks on the play and pause button. First, we check, if the slideshow is playing, if so, we show the play button, set the bolPlaying variable to false, change the status message of the lbl_info label to “Slideshow paused” and stop the timer.
If the slideshow is currently paused, we show the pause button, set the bolPlaying variable to true again, show the time to the next slide and restart the timer.

function togglePause(e:MouseEvent):void {
	if(bolPlaying) {
		mcInfo.btnPlay.visible = true;
		mcInfo.btnPause.visible = false;

		bolPlaying = false;
		mcInfo.lbl_loading.text = "Slideshow paused";
		slideTimer.stop();
	} else {
		mcInfo.btnPlay.visible = false;
		mcInfo.btnPause.visible = true;

		bolPlaying = true;
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
		slideTimer.reset();
		slideTimer.start();
	}
}

GotToWebsite function

The last function we need to define is the goToWebsite() function. This function will be called once the user clicks on the invisible button. It will check, if the strLink variable is empty or null. If not, the link will be opened.

function goToWebsite(e:MouseEvent):void {
	if(strLink != "" && strLink != null) {
		navigateToURL(new URLRequest(strLink), strTarget);
	}
}

We’ve already reached the end of the second part of the slideshow tutorial. We hope that you enjoyed reading it and we appreciate any kind of feedback.

Note

The feature for clicking the invisible button only works, when you’re running the flash on a webserver or in the flash sdk.

Full code with comments

// import tweener
import caurina.transitions.Tweener;

// delay between slides
const TIMER_DELAY:int = 5000;
// fade time between slides
const FADE_TIME:Number =	1;

// flag for knowing if slideshow is playing
var bolPlaying:Boolean = true;
// reference to the current slider container
var currentContainer:Sprite;
// index of the current slide
var intCurrentSlide:int = -1;
// total slides
var intSlideCount:int;
// timer for switching slides
var slideTimer:Timer;
// slides holder
var sprContainer1:Sprite;
var sprContainer2:Sprite;
// slides loader
var slideLoader:Loader;
// current slide link
var strLink:String = "";
// current slide link target
var strTarget:String = "";
// url to slideshow xml
var strXMLPath:String = "slideshow-data.xml";
// slideshow xml loader
var xmlLoader:URLLoader;
// slideshow xml
var xmlSlideshow:XML;

function initSlideshow():void {
	// hide buttons, labels and link
	mcInfo.visible = false;
	btnLink.visible = false;

	// create new urlloader for xml file
	xmlLoader = new URLLoader();
	// add listener for complete event
	xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
	// load xml file
	xmlLoader.load(new URLRequest(strXMLPath));

	// create new timer with delay from constant
	slideTimer = new Timer(TIMER_DELAY);
	// add event listener for timer event
	slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);

	// create 2 container sprite which will hold the slides and
	// add them to the masked movieclip
	sprContainer1 = new Sprite();
	sprContainer2 = new Sprite();
	mcSlideHolder.addChild(sprContainer1);
	mcSlideHolder.addChild(sprContainer2);

	// keep a reference of the container which is currently
	// in the front
	currentContainer = sprContainer2;

	// add event listeners for buttons
	btnLink.addEventListener(MouseEvent.CLICK, goToWebsite);
	mcInfo.btnPlay.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnPause.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnNext.addEventListener(MouseEvent.CLICK, nextSlide);
	mcInfo.btnPrevious.addEventListener(MouseEvent.CLICK, previousSlide);

	// hide play button
	mcInfo.btnPlay.visible = false;
}

function onXMLLoadComplete(e:Event):void {
	// show buttons, labels and link
	mcInfo.visible = true;
	btnLink.visible = true;	

	// create new xml with the received data
	xmlSlideshow = new XML(e.target.data);
	// get total slide count
	intSlideCount = xmlSlideshow..image.length();
	// switch the first slide without a delay
	switchSlide(0);
}

function fadeSlideIn(e:Event):void {
	// add loaded slide from slide loader to the
	// current container
	currentContainer.addChild(slideLoader.content);
	// clear preloader text
	mcInfo.lbl_loading.text = "";

	// check if the slideshow is currently playing
	// if so, show time to the next slide. If not, show
	// a status message
	if(bolPlaying) {
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
	} else {
		mcInfo.lbl_loading.text = "Slideshow paused";
	}

	// fade the current container in and start the slide timer
	// when the tween is finished
	Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:onSlideFadeIn});
}

function onSlideFadeIn():void {
	// check, if the slideshow is currently playing
	// if so, start the timer again
	if(bolPlaying && !slideTimer.running)
		slideTimer.start();
}

function togglePause(e:MouseEvent):void {
	// check if the slideshow is currently playing
	if(bolPlaying) {
		// show play button
		mcInfo.btnPlay.visible = true;
		mcInfo.btnPause.visible = false;

		// set playing flag to false
		bolPlaying = false;
		// set status message
		mcInfo.lbl_loading.text = "Slideshow paused";
		// stop the timer
		slideTimer.stop();
	} else {
		// show pause button
		mcInfo.btnPlay.visible = false;
		mcInfo.btnPause.visible = true;

		// set playing flag to true
		bolPlaying = true;
		// show time to next slide
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
		// reset and start timer
		slideTimer.reset();
		slideTimer.start();
	}
}

function switchSlide(intSlide:int):void {
	// check if the last slide is still fading in
	if(!Tweener.isTweening(currentContainer)) {
		// check, if the timer is running (needed for the
		// very first switch of the slide)
		if(slideTimer.running)
			slideTimer.stop();

		// change slide index
		intCurrentSlide = intSlide;

		// check which container is currently in the front and
		// assign currentContainer to the one that's in the back with
		// the old slide
		if(currentContainer == sprContainer2)
			currentContainer = sprContainer1;
		else
			currentContainer = sprContainer2;

		// hide the old slide
		currentContainer.alpha = 0;
		// bring the old slide to the front
		mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

		// create a new loader for the slide
		slideLoader = new Loader();
		// add event listener when slide is loaded
		slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
		// add event listener for the progress
		slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
		// load the next slide
		slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

		// show description of the next slide
		mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;

		// set link and link target variable of the slide
		strLink		= xmlSlideshow..image[intCurrentSlide].@link;
		strTarget	= xmlSlideshow..image[intCurrentSlide].@target;

		// show current slide and total slides
		mcInfo.lbl_count.text = (intCurrentSlide + 1) + ” / ” + intSlideCount + ” Slides”;
	}
}

function showProgress(e:ProgressEvent):void {
	// show percentage of the bytes loaded from the current slide
	mcInfo.lbl_loading.text = “Loading…” + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + “%”;
}

function goToWebsite(e:MouseEvent):void {
	// check if the strLink is not empty and open the link in the
	// defined target window
	if(strLink != “” && strLink != null) {
		navigateToURL(new URLRequest(strLink), strTarget);
	}
}

function nextSlide(e:Event = null):void {
	// check, if there are any slides left, if so, increment slide
	// index
	if(intCurrentSlide + 1 < intSlideCount)
		switchSlide(intCurrentSlide + 1);
	// if not, start slideshow from beginning
	else
		switchSlide(0);

}

function previousSlide(e:Event = null):void {
	// check, if there are any slides left, if so, decrement slide
	// index
	if(intCurrentSlide - 1 >= 0)
		switchSlide(intCurrentSlide - 1);
	// if not, start slideshow from the last slide
	else
		switchSlide(intSlideCount - 1);
}

// init slideshow
initSlideshow();

You can preview the final result of this tutorial here.

Requirements

Adobe Flash CS3

Try / Buy

Source Files

Download

We also wanted to create a box displaying a message when the video is still buffering. But there has been an issue with the NetStreamEvent. It doesn’t fire the NetStream.Buffer.Empty event when the player’s actually buffering. People from the community say that this problem is somehow related with the encoding software of the flash video files. Since we didn’t find a proper solution, we left this feature out. If someone has an idea how this problem can still be properly solved, feel free to leave us a comment.

Playlist support

Ok, let’s begin with the major new feature. Adding the playlist support is quite simple and nearly implemented the same way as in the slideshow tutorial. So we have our XML file which looks like this:

<playlist>
	<vid src="video/hancock.flv" desc="Hancock (2008) - Movie Trailer"/>
	<vid src="video/redbelt.flv" desc="Redbelt (2008) - Movie Trailer"/>
	<vid src="video/the_dark_knight.flv" desc="The Dark Knight (2008) - Movie Trailer"/>
</playlist>

As you can see, each video has two attributes. One describes the source to the file and the other one is a short description or the title of the movie.
Now it’s time to go on with coding. We changed the line which defines the source of the flash video file to the following:

var strSource:String = root.loaderInfo.parameters.playlist == null ? "playlist.xml" : root.loaderInfo.parameters.playlist;

Like this, flash will look for the flash variable playlist which you can add in the html file. If it’s defined, then the value will be assigned to the variable strSource. Otherwise we just assign a default location. Like this, you can use one compiled SWF file for every playlist you want to publish.
In order to load this file, we need to add three more variables to our video player:

var urlLoader:URLLoader;
var urlRequest:URLRequest;
var xmlPlaylist:XML;

urlLoader will later be used to load and handle the loaded xml file. urlRequest is an object for the urlLoader to load the playlist file. And xmlPlaylist will then contain the loaded xml data from the urlLoader.

We’ve added these code lines add the bottom to the initVideoPlayer() function:

	urlRequest = new URLRequest(strSource);
	urlLoader = new URLLoader();
	urlLoader.addEventListener(Event.COMPLETE, playlistLoaded);
	urlLoader.load(urlRequest);

A new urlRequest will be created with the source location of the xml file. Then we create a new urlLoader, add an event listener when the loading is completed and finally load the file. What’s also important is that we hide the controls of the video player in the first line of the initVideoPlayer() function since we don’t want that the user can click anything if the playlist hasn’t been loaded yet.
As soon as the playlist is loaded we call the playlistLoaded() function which looks like this:

function playlistLoaded(e:Event):void {
	xmlPlaylist = new XML(urlLoader.data);
	playVid(0, false)
	mcVideoControls.visible = true;
}

We assign the received data from the loader to the xml object, set the first video source but not play the video and show the video controls since we’ve loaded all the stuff.

Now we need a back and forward button. We add two event listeners for the buttons in the initVideoPlayer() function:

	mcVideoControls.btnNext.addEventListener(MouseEvent.CLICK, playNext);
	mcVideoControls.btnPrevious.addEventListener(MouseEvent.CLICK, playPrevious);

Then we define a new variable that saves the current number:

var intActiveVid:int;

Now let’s take a closer look at the playVid() function

function playVid(intVid:int = 0, bolPlay = true):void {
	if(bolPlay) {
		tmrDisplay.stop();
		nsStream.play(String(xmlPlaylist..vid[intVid].@src));
		mcVideoControls.btnPause.visible	= true;
		mcVideoControls.btnPlay.visible		= false;
	} else {
		strSource = xmlPlaylist..vid[intVid].@src;
	}

	vidDisplay.visible					= true;

	mcVideoControls.mcVideoDescription.lblDescription.x = 0;
	mcVideoControls.mcVideoDescription.lblDescription.htmlText = (intVid + 1) + “. ” + String(xmlPlaylist..vid[intVid].@desc) + ““;

	intActiveVid = intVid;
}

As you can see, it now needs to have a video number and a boolean value if the video should be played or just be set to the strSource variable. The function also sets the new description label of the requested video with the value from the xml object and positions it to zero on the x-axis. And finally the intVid value gets assigned to the variable intActiveVid.
The playNext() and playPrevious() function are now ease to implement. We just check if there there is still a video left we can skip or rewind and call the playVid function with the parameter intActiveVid + 1 or intActiveVid - 1 depending on the direction:

function playNext(e:MouseEvent = null):void {
	if(intActiveVid + 1 < xmlPlaylist..vid.length())
		playVid(intActiveVid + 1);

}

function playPrevious(e:MouseEvent = null):void {
	if(intActiveVid - 1 >= 0)
		playVid(intActiveVid - 1);
}

When a video reached it’s end, we stoped the player. But now we want to play the next video in the playlist if there’s still one left, if not, ok then we stop the player So we change this in the netStatusHandler() function:

	if(intActiveVid + 1 < xmlPlaylist..vid.length())
		playNext();
	else
		stopVideoPlayer();

Now there’s only the vertical scrolling of the video description label left for the playlist feature. It could be that you need an extra long title for your video. In that case, we’ve just created a very long one lined textfield that’s masked. On top of that is an invisible button that will be used to know, if the user moves the mouse over the label so we can scroll it if it’s to long. In order to know if we’re currently scrolling the label and to know in which direction the scrolling is going, we need to set two new variables:

var bolDescriptionHover:Boolean = false;
var bolDescriptionHoverForward:Boolean = true;

Now we need to add an event listener on the invisible button:

	mcVideoControls.mcVideoDescription.btnDescription.addEventListener(MouseEvent.MOUSE_OVER, startDescriptionScroll);
	mcVideoControls.mcVideoDescription.btnDescription.addEventListener(MouseEvent.MOUSE_OUT, stopDescriptionScroll);

The functions startDescriptionScroll() and stopDescriptionScroll() are simply setting the bolDescriptionHover variable to true or false depending on the mouse event. startDescriptionScroll() additionally checks, if it’s even necessary to scroll the text:

function startDescriptionScroll(e:MouseEvent):void {
	if(mcVideoControls.mcVideoDescription.lblDescription.textWidth > 138)
		bolDescriptionHover = true;
}

function stopDescriptionScroll(e:MouseEvent):void {
	bolDescriptionHover = false;
}

To actually move the label we just add some new lines of code to the updateDisplay() function which is called by the timer object:

	if(bolDescriptionHover) {
		if(bolDescriptionHoverForward) {
			mcVideoControls.mcVideoDescription.lblDescription.x -= 0.1;
			if(mcVideoControls.mcVideoDescription.lblDescription.textWidth - 133 <= Math.abs(mcVideoControls.mcVideoDescription.lblDescription.x))
				bolDescriptionHoverForward = false;
		} else {
			mcVideoControls.mcVideoDescription.lblDescription.x += 0.1;
			if(mcVideoControls.mcVideoDescription.lblDescription.x >= 0)
				bolDescriptionHoverForward = true;
		}
	} else {
		mcVideoControls.mcVideoDescription.lblDescription.x = 0;
		bolDescriptionHoverForward = true;
	}

First, we check if we’re currently over the label. The we figure out, which way we move the text. Since the updateDisplay() function is called pretty often, we get a smooth motion by incrementing and decrementing the label’s x value just by 0.1. So, when moving forward, we actualy move the label to the left and check, if we’ve reached the end. If so, we invert the bolDescriptionForward value and begin to move the field to the right until it reached zero on the x-axis. If the user’s no hovering over the invisible button, we just reset the position of the label and the direction flag.

Fullscreen support

Since flash player version 9,0,28,0 you can use the fullscreen feature. In order to get this to work, you also need to set this in the HTML code. But since Flash does all the HTML stuff for you, you only need to change the mode to allowFullscreen in the publish settings of HTML

The implementing of the fullscreen support is rather simple in our case because we don’t have too much stuff on the stage we need to reposition/resize once we hit the fullscreen mode. So, first of all, we set the scale mode of the stage to no scale because we want to resize the object individualy and not everything. We also set the stage align mode to the top left corner:

stage.scaleMode	= StageScaleMode.NO_SCALE;
stage.align		= StageAlign.TOP_LEFT;

Then we add two event listeners for the fullscreen button. One to enter it and one for leaving the full screen mode. We also add an event listener when the fullscreen mode changes. The visibility of the btnFullscreenOff button will be set to false. We do all of this in the initVideoPlayer() function:

	mcVideoControls.btnFullscreenOn.addEventListener(MouseEvent.CLICK, fullscreenOnClicked);
	mcVideoControls.btnFullscreenOff.addEventListener(MouseEvent.CLICK, fullscreenOffClicked);
	stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreen);
	mcVideoControls.btnFullscreenOff.visible = false;

To actualy enter and leave the fullscreen mode, all you need to do is to set the display state of the stage to the wanted mode. That’s what we’re doing when the user clicks the fullscreen buttons:

function fullscreenOnClicked(e:MouseEvent):void {
	stage.displayState = StageDisplayState.FULL_SCREEN;
}

function fullscreenOffClicked(e:MouseEvent):void {
	stage.displayState = StageDisplayState.NORMAL;
}

Now we only need to define the resizing action in the onFullScreen() function:
function onFullscreen(e:FullScreenEvent):void {

    if (e.fullScreen) {
        mcVideoControls.btnFullscreenOn.visible = false;
		mcVideoControls.btnFullscreenOff.visible = true;

		mcVideoControls.x = (Capabilities.screenResolutionX - 440) / 2;
		mcVideoControls.y = (Capabilities.screenResolutionY - 33);

		vidDisplay.height = (Capabilities.screenResolutionY - 33);
		vidDisplay.width = vidDisplay.height * 4 / 3;
		vidDisplay.x	= (Capabilities.screenResolutionX - vidDisplay.width) / 2;
    } else {
        mcVideoControls.btnFullscreenOn.visible = true;
		mcVideoControls.btnFullscreenOff.visible = false;
		mcVideoControls.x = 0;
		mcVideoControls.y = 330;
		vidDisplay.y = 0;
		vidDisplay.x = 0;
		vidDisplay.width = 440;
		vidDisplay.height = 330;
    }
}

So, first we check if we’re entering the fullscreen mode. If so, we switch the fullscreen buttons, align the control bar in the bottom center of the screen and size up the video display and center it on to the screen. If we’re leaving the fullscreen mode, what you can also do by pressing the ESC key on your keyboard, we reset all the stuff to how it was before.
That’s was already everything for the fullscreen support

Save volume

This is quite an important feature and really ease to implement in flash. To save the last used volume you can use the flash cookies which will be stored on the computer of the user. They are like normal browser cookies, but can only accessed through flash.
So, the first thing we need to do is creating a new shared object:

var shoVideoPlayerSettings:SharedObject = SharedObject.getLocal("playerSettings");

The function getLocal returns the shared object you’ve requested. In our case we want to have the playerSettings cookie/shared object. Since we want to set the volume on the start, we add the following line to the initVideoPlayer() function:

	var tmpVolume:Number = DEFAULT_VOLUME;
	if(shoVideoPlayerSettings.data.playerVolume != undefined) {
		tmpVolume = shoVideoPlayerSettings.data.playerVolume;
		intLastVolume = tmpVolume;
	}

	mcVideoControls.mcVolumeScrubber.x = (53 * tmpVolume) + 318;
	mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 371 + 53;
	setVolume(tmpVolume);

First we assign the DEFAULT_VOLUME to a temporary variable. Then we check if the user has already a cookie with the player volume. If so, we override the value from the variable. Then we update the volume bar and set the volume with the setVolume() function.
In order to store the new volume in the cookie, we add the following two new lines to the setVolume() function:

	shoVideoPlayerSettings.data.playerVolume = intVolume;
	shoVideoPlayerSettings.flush();

The function flush() writes the new value immadiately in the flash cookie.

Clickable progress/volume bar

This is just a beauty hack for the player. We want to be able to click on the progress or the volume bar to begin with the scrubbing. So, we just added two invisible buttons on the off the bars and added the function to it as when you click the scrub buttons directly:

	mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
	mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

And what’s also changed is, that we now lock the center in the startDrag() function. Like this the scrubber will move to where you clicked on the bars:

function volumeScrubberClicked(e:MouseEvent):void {
	bolVolumeScrub = true;

	mcVideoControls.mcVolumeScrubber.startDrag(true, new Rectangle(318, 19, 53, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
	bolProgressScrub = true;

	mcVideoControls.mcProgressScrubber.startDrag(true, new Rectangle(0, 2, 432, 0));
}

We’ve already reached the end of the second part of the video player tutorial. We hope that you enjoyed reading it and we appreciate every kind of feedback.

Full code with comments

// ###############################
// ############# CONSTANTS
// ###############################

// time to buffer for the video in sec.
const BUFFER_TIME:Number				= 8;
// start volume when initializing player
const DEFAULT_VOLUME:Number				= 0.6;
// update delay in milliseconds.
const DISPLAY_TIMER_UPDATE_DELAY:int	= 10;
// smoothing for video. may slow down old computers
const SMOOTHING:Boolean					= true;

// ###############################
// ############# VARIABLES
// ###############################

// flag for knowing if user hovers over description label
var bolDescriptionHover:Boolean = false;
// flag for knowing in which direction the description label is currently moving
var bolDescriptionHoverForward:Boolean = true;
// flag for knowing if flv has been loaded
var bolLoaded:Boolean					= false;
// flag for volume scrubbing
var bolVolumeScrub:Boolean				= false;
// flag for progress scrubbing
var bolProgressScrub:Boolean			= false;
// holds the number of the active video
var intActiveVid:int;
// holds the last used volume, but never 0
var intLastVolume:Number				= DEFAULT_VOLUME;
// net connection object for net stream
var ncConnection:NetConnection;
// net stream object
var nsStream:NetStream;
// object holds all meta data
var objInfo:Object;
// shared object holding the player settings (currently only the volume)
var shoVideoPlayerSettings:SharedObject = SharedObject.getLocal("playerSettings");
// url to flv file
var strSource:String					= root.loaderInfo.parameters.playlist == null ? "playlist.xml" : root.loaderInfo.parameters.playlist;
// timer for updating player (progress, volume...)
var tmrDisplay:Timer;
// loads the xml file
var urlLoader:URLLoader;
// holds the request for the loader
var urlRequest:URLRequest;
// playlist xml
var xmlPlaylist:XML;

// ###############################
// ############# STAGE SETTINGS
// ###############################
stage.scaleMode	= StageScaleMode.NO_SCALE;
stage.align		= StageAlign.TOP_LEFT;

// ###############################
// ############# FUNCTIONS
// ###############################

// sets up the player
function initVideoPlayer():void {
	// hide video controls on initialisation
	mcVideoControls.visible = false;

	// hide buttons
	mcVideoControls.btnUnmute.visible			= false;
	mcVideoControls.btnPause.visible			= false;
	mcVideoControls.btnFullscreenOff.visible	= false;

	// set the progress/preload fill width to 1
	mcVideoControls.mcProgressFill.mcFillRed.width	= 1;
	mcVideoControls.mcProgressFill.mcFillGrey.width	= 1;

	// set time and duration label
	mcVideoControls.lblTimeDuration.htmlText		= "00:00 / 00:00″;

	// add global event listener when mouse is released
	stage.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);

	// add fullscreen listener
	stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreen);

	// add event listeners to all buttons
	mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
	mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
	mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
	mcVideoControls.btnNext.addEventListener(MouseEvent.CLICK, playNext);
	mcVideoControls.btnPrevious.addEventListener(MouseEvent.CLICK, playPrevious);
	mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
	mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
	mcVideoControls.btnFullscreenOn.addEventListener(MouseEvent.CLICK, fullscreenOnClicked);
	mcVideoControls.btnFullscreenOff.addEventListener(MouseEvent.CLICK, fullscreenOffClicked);

	mcVideoControls.btnVolumeBar.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
	mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
	mcVideoControls.btnProgressBar.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);
	mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

	mcVideoControls.mcVideoDescription.btnDescription.addEventListener(MouseEvent.MOUSE_OVER, startDescriptionScroll);
	mcVideoControls.mcVideoDescription.btnDescription.addEventListener(MouseEvent.MOUSE_OUT, stopDescriptionScroll);

	// create timer for updating all visual parts of player and add
	// event listener
	tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
	tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);

	// create a new net connection, add event listener and connect
	// to null because we don’t have a media server
	ncConnection = new NetConnection();
	ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	ncConnection.connect(null);

	// create a new netstream with the net connection, add event
	// listener, set client to this for handling meta data and
	// set the buffer time to the value from the constant
	nsStream = new NetStream(ncConnection);
	nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	nsStream.client = this;
	nsStream.bufferTime = BUFFER_TIME;

	// attach net stream to video object on the stage
	vidDisplay.attachNetStream(nsStream);
	// set the smoothing value from the constant
	vidDisplay.smoothing = SMOOTHING;

	// set default volume and get volume from shared object if available
	var tmpVolume:Number = DEFAULT_VOLUME;
	if(shoVideoPlayerSettings.data.playerVolume != undefined) {
		tmpVolume = shoVideoPlayerSettings.data.playerVolume;
		intLastVolume = tmpVolume;
	}
	// update volume bar and set volume
	mcVideoControls.mcVolumeScrubber.x = (53 * tmpVolume) + 318;
	mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 371 + 53;
	setVolume(tmpVolume);

	// create new request for loading the playlist xml, add an event listener
	// and load it
	urlRequest = new URLRequest(strSource);
	urlLoader = new URLLoader();
	urlLoader.addEventListener(Event.COMPLETE, playlistLoaded);
	urlLoader.load(urlRequest);
}
function playClicked(e:MouseEvent):void {
	// check’s, if the flv has already begun
	// to download. if so, resume playback, else
	// load the file
	if(!bolLoaded) {
		nsStream.play(strSource);
		bolLoaded = true;
	}
	else{
		nsStream.resume();
	}

	vidDisplay.visible = true;

	// switch play/pause visibility
	mcVideoControls.btnPause.visible	= true;
	mcVideoControls.btnPlay.visible		= false;
}

function pauseClicked(e:MouseEvent):void {
	// pause video
	nsStream.pause();

	// switch play/pause visibility
	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

function stopClicked(e:MouseEvent):void {
	// calls stop function
	stopVideoPlayer();
}

function muteClicked(e:MouseEvent):void {
	// set volume to 0
	setVolume(0);

	// update scrubber and fill position/width
	mcVideoControls.mcVolumeScrubber.x				= 318;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= 1;
}

function unmuteClicked(e:MouseEvent):void {
	// set volume to last used value or DEFAULT_VOLUME if last volume is zero
	var tmpVolume:Number = intLastVolume == 0 ? DEFAULT_VOLUME : intLastVolume
	setVolume(tmpVolume);

	// update scrubber and fill position/width
	mcVideoControls.mcVolumeScrubber.x = (53 * tmpVolume) + 318;
	mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 371 + 53;
}

function volumeScrubberClicked(e:MouseEvent):void {
	// set volume scrub flag to true
	bolVolumeScrub = true;

	// start drag
	mcVideoControls.mcVolumeScrubber.startDrag(true, new Rectangle(318, 19, 53, 0)); // NOW TRUE
}

function progressScrubberClicked(e:MouseEvent):void {
	// set progress scrub flag to true
	bolProgressScrub = true;

	// start drag
	mcVideoControls.mcProgressScrubber.startDrag(true, new Rectangle(0, 2, 432, 0)); // NOW TRUE
}

function mouseReleased(e:MouseEvent):void {
	// set progress/volume scrub to false
	bolVolumeScrub		= false;
	bolProgressScrub	= false;

	// stop all dragging actions
	mcVideoControls.mcProgressScrubber.stopDrag();
	mcVideoControls.mcVolumeScrubber.stopDrag();

	// update progress/volume fill
	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 371 + 53;

	// save the volume if it’s greater than zero
	if((mcVideoControls.mcVolumeScrubber.x - 318) / 53 > 0)
		intLastVolume = (mcVideoControls.mcVolumeScrubber.x - 318) / 53;
}

function updateDisplay(e:TimerEvent):void {
	// checks, if user is scrubbing. if so, seek in the video
	// if not, just update the position of the scrubber according
	// to the current time
	if(bolProgressScrub)
		nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 432))
	else
		mcVideoControls.mcProgressScrubber.x = nsStream.time * 432 / objInfo.duration; 

	// set time and duration label
	mcVideoControls.lblTimeDuration.htmlText		= “” + formatTime(nsStream.time) + “ / ” + formatTime(objInfo.duration);

	// update the width from the progress bar. the grey one displays
	// the loading progress
	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcProgressFill.mcFillGrey.width	= nsStream.bytesLoaded * 438 / nsStream.bytesTotal;

	// update volume and the red fill width when user is scrubbing
	if(bolVolumeScrub) {
		setVolume((mcVideoControls.mcVolumeScrubber.x - 318) / 53);
		mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 371 + 53;
	}

	// chech if user is currently hovering over description label
	if(bolDescriptionHover) {
		// check in which direction we’re currently moving
		if(bolDescriptionHoverForward) {
			// move to the left and check if we’ve shown everthing
			mcVideoControls.mcVideoDescription.lblDescription.x -= 0.1;
			if(mcVideoControls.mcVideoDescription.lblDescription.textWidth - 133 <= Math.abs(mcVideoControls.mcVideoDescription.lblDescription.x))
				bolDescriptionHoverForward = false;
		} else {
			// move to the right and check if we’re back to normal
			mcVideoControls.mcVideoDescription.lblDescription.x += 0.1;
			if(mcVideoControls.mcVideoDescription.lblDescription.x >= 0)
				bolDescriptionHoverForward = true;
		}
	} else {
		// reset label position and direction variable
		mcVideoControls.mcVideoDescription.lblDescription.x = 0;
		bolDescriptionHoverForward = true;
	}
}

function onMetaData(info:Object):void {
	// stores meta data in a object
	objInfo = info;

	// now we can start the timer because
	// we have all the neccesary data
	if(!tmrDisplay.running)
		tmrDisplay.start();
}

function netStatusHandler(event:NetStatusEvent):void {
	// handles net status events
	switch (event.info.code) {
		// trace a messeage when the stream is not found
		case “NetStream.Play.StreamNotFound”:
			trace(”Stream not found: ” + strSource);
		break;
		// when the video reaches its end, we check if there are
		// more video left or stop the player
		case “NetStream.Play.Stop”:
			if(intActiveVid + 1 < xmlPlaylist..vid.length())
				playNext();
			else
				stopVideoPlayer();
		break;
	}
}

function stopVideoPlayer():void {
	// pause netstream, set time position to zero
	nsStream.pause();
	nsStream.seek(0);

	// in order to clear the display, we need to
	// set the visibility to false since the clear
	// function has a bug
	vidDisplay.visible					= false;

	// switch play/pause button visibility
	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

function setVolume(intVolume:Number = 0):void {
	// create soundtransform object with the volume from
	// the parameter
	var sndTransform		= new SoundTransform(intVolume);
	// assign object to netstream sound transform object
	nsStream.soundTransform	= sndTransform;

	// hides/shows mute and unmute button according to the
	// volume
	if(intVolume > 0) {
		mcVideoControls.btnMute.visible		= true;
		mcVideoControls.btnUnmute.visible	= false;
	} else {
		mcVideoControls.btnMute.visible		= false;
		mcVideoControls.btnUnmute.visible	= true;
	}

	// store the volume in the flash cookie
	shoVideoPlayerSettings.data.playerVolume = intVolume;
	shoVideoPlayerSettings.flush();
}

function formatTime(t:int):String {
	// returns the minutes and seconds with leading zeros
	// for example: 70 returns 01:10
	var s:int = Math.round(t);
	var m:int = 0;
	if (s > 0) {
		while (s > 59) {
			m++; s -= 60;
		}
		return String((m < 10 ? “0″ : “”) + m + “:” + (s < 10 ? “0″ : “”) + s);
	} else {
		return “00:00″;
	}
}

function fullscreenOnClicked(e:MouseEvent):void {
	// go to fullscreen mode
	stage.displayState = StageDisplayState.FULL_SCREEN;
}

function fullscreenOffClicked(e:MouseEvent):void {
	// go to back to normal mode
	stage.displayState = StageDisplayState.NORMAL;
}

function onFullscreen(e:FullScreenEvent):void {
	// check if we’re entering or leaving fullscreen mode
    if (e.fullScreen) {
		// switch fullscreen buttons
        mcVideoControls.btnFullscreenOn.visible = false;
		mcVideoControls.btnFullscreenOff.visible = true;

		// bottom center align controls
		mcVideoControls.x = (Capabilities.screenResolutionX - 440) / 2;
		mcVideoControls.y = (Capabilities.screenResolutionY - 33);

		// size up video display
		vidDisplay.height 	= (Capabilities.screenResolutionY - 33);
		vidDisplay.width 	= vidDisplay.height * 4 / 3;
		vidDisplay.x		= (Capabilities.screenResolutionX - vidDisplay.width) / 2;
    } else {
		// switch fullscreen buttons
        mcVideoControls.btnFullscreenOn.visible = true;
		mcVideoControls.btnFullscreenOff.visible = false;

		// reset controls position
		mcVideoControls.x = 0;
		mcVideoControls.y = 330;

		// reset video display
		vidDisplay.y = 0;
		vidDisplay.x = 0;
		vidDisplay.width = 440;
		vidDisplay.height = 330;
    }
}

function playlistLoaded(e:Event):void {
	// create new xml with loaded data from loader
	xmlPlaylist = new XML(urlLoader.data);

	// set source of the first video but don’t play it
	playVid(0, false)

	// show controls
	mcVideoControls.visible = true;
}

function playVid(intVid:int = 0, bolPlay = true):void {
	if(bolPlay) {
		// stop timer
		tmrDisplay.stop();

		// play requested video
		nsStream.play(String(xmlPlaylist..vid[intVid].@src));

		// switch button visibility
		mcVideoControls.btnPause.visible	= true;
		mcVideoControls.btnPlay.visible		= false;
	} else {
		strSource = xmlPlaylist..vid[intVid].@src;
	}

	// show video display
	vidDisplay.visible					= true;

	// reset description label position and assign new description
	mcVideoControls.mcVideoDescription.lblDescription.x = 0;
	mcVideoControls.mcVideoDescription.lblDescription.htmlText = (intVid + 1) + “. ” + String(xmlPlaylist..vid[intVid].@desc) + ““;

	// update active video number
	intActiveVid = intVid;
}

function playNext(e:MouseEvent = null):void {
	// check if there are video left to play and play them
	if(intActiveVid + 1 < xmlPlaylist..vid.length())
		playVid(intActiveVid + 1);

}

function playPrevious(e:MouseEvent = null):void {
	// check if we’re not and the beginning of the playlist and go back
	if(intActiveVid - 1 >= 0)
		playVid(intActiveVid - 1);
}

function startDescriptionScroll(e:MouseEvent):void {
	// check if description label is too long and we need to enable scrolling
	if(mcVideoControls.mcVideoDescription.lblDescription.textWidth > 138)
		bolDescriptionHover = true;
}

function stopDescriptionScroll(e:MouseEvent):void {
	// disable scrolling
	bolDescriptionHover = false;
}

// ###############################
// ############# INIT PLAYER
// ###############################
initVideoPlayer();

These are: - Play/Pause - Stop - Preloading - Scrubbing - Volume handling There will be another tutorial, which will extend this player. So be sure to check it out.

Requirements

Adobe Flash CS3

Try / Buy

Source Files

Download

Constants

As always, we begin with setting the constants. The BUFFER_TIME constant stores the time to buffer for the video in seconds. This one will later be assigned to the netstream object

const BUFFER_TIME:Number				= 8;

DEFAULT_VOLUME holds the start volume when the player starts

const DEFAULT_VOLUME:Number				= 0.6;

Our player has a timer, that updates all the visual parts. We store the update delay in milliseconds in a constant.

const DISPLAY_TIMER_UPDATE_DELAY:int			= 10;

To make the video a bit smoother, we can the the Video.smoothing variable to true. This may slow down old computers. If you want to deactive the smoothing on runtime, just open the html file in the zip file, right click on the video player and choose low for the quality. This way the smoothing will automaticaly be deactivated by the flash player.

const SMOOTHING:Boolean	= true;

Variables

Let’s move on with the variables. We need to know, if the flv has been loaded when clicking the play button in order to load it or just play the video.

var bolLoaded:Boolean	= false;

For the timer function we need to know, if we’re currently scrubbing the volume or the porgress bar.

var bolVolumeScrub:Boolean	= false;
var bolProgressScrub:Boolean	 = false;

Our player has also a mute/unmute button. So, we need to store the last used volume. Like this when you click on unmute, the scrubber will jump back to it’s previous position as the volume does. This value is always greater than zero. We asign the value from DEFAULT_VOLUME.

var intLastVolume:Number				= DEFAULT_VOLUME;

Then we need to have a net connection object for net stream and of course also a net stream object.

var ncConnection:NetConnection;
var nsStream:NetStream;

To store the received meta data from the flv file, we create an object

var objInfo:Object;

You can change your url to the flv file here. We just set it to the sample movie that’s in the same folder as the swf.

var strSource:String = "hancock-tsr2_h480p.flv";

And last of all, we create a timer object for updating the stuff from the player.

var tmrDisplay:Timer;

Functions

Now we need to initialize our player. First of all, we hide the unmute and pause button. Then we set the width of the progress and preload fill to 1.Our next step is adding a global eventlistener when the mouse button is released and adding event listeners to all buttons. Then we create ourtimer object for
updating all parts of the player and add the event listener. Next we create a new net connection, add the event listener and connect it to null because we don’t have a media server. The net stream object needs the net connection for initizalizing. Once we have our net stream object ready, we add the event listener, set the client property to this for handling the meta data and set buffer tim eto the value from the constant BUFFER_TIME. Then we attach the net stream to the video object on the stage and set the smoothing property to the value from the constant SMOOTHING. Last of all we set the default volume to the value from the constant DEFAULT_VOLUME. Note that only values from zero to one are allowed.

function initVideoPlayer():void {
	mcVideoControls.btnUnmute.visible	= false;
	mcVideoControls.btnPause.visible	= false;

	mcVideoControls.mcProgressFill.mcFillRed.width	= 1;
	mcVideoControls.mcProgressFill.mcFillGrey.width = 1;

	stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);

	mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
	mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
	mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
	mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
	mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
	mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
	mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

	tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
	tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);

	ncConnection = new NetConnection();
	ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	ncConnection.connect(null);

	nsStream = new NetStream(ncConnection);
	nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	nsStream.client = this;
	nsStream.bufferTime = BUFFER_TIME;

	vidDisplay.attachNetStream(nsStream);
	vidDisplay.smoothing = SMOOTHING;

	mcVideoControls.mcVolumeScrubber.x		= (53 * DEFAULT_VOLUME) + 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 394 + 53;
	setVolume(DEFAULT_VOLUME);
}

The most important part is now done. We’ve set all variables and added all event listeners. We’re now going to go through all button event listeners. When the user hit’s the play button, we need to check, if the flv download has already begun. If that’s the case, we resume the playback with the NetStream.resume() function. If not, we call the play() function and add the source to the flv file as the parameter.
Then we show the video display object that’s on the stage. And finaly we switch the pause/play visibility.

function playClicked(e:MouseEvent):void {
	if(!bolLoaded) {
		nsStream.play(strSource);
		bolLoaded = true;
	} else {
		nsStream.resume();
	}

	vidDisplay.visible			= true;

	mcVideoControls.btnPause.visible	= true;
	mcVideoControls.btnPlay.visible		= false;
}

The pause button only calls the pause() function from the net stream object and switches the pause/play visibility.

function pauseClicked(e:MouseEvent):void {
	nsStream.pause();

	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

When the user click’s the play button, the stopVideoPlayer() function will be called. We’ll explain this function below.

function stopClicked(e:MouseEvent):void {
	stopVideoPlayer();
}

The mute button sets the volume to zero and updates the volume scrubber and fill position/width.

function muteClicked(e:MouseEvent):void {
	setVolume(0);

	mcVideoControls.mcVolumeScrubber.x		= 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= 1;
}

The unmute button sets the volume to the last used volume and updates the volume scrubber and fill position/width.

function unmuteClicked(e:MouseEvent):void {
	setVolume(intLastVolume);

	mcVideoControls.mcVolumeScrubber.x		= (53 * intLastVolume) + 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}

When the volume scrubber is clicked, the scrub flag will be set to true. Then we start dragging it withing the boundings that are described as a rectangle.
Exactly the same goes for the progress scrubber except that we’re setting another flag variable and bounding.

function volumeScrubberClicked(e:MouseEvent):void {
	bolVolumeScrub = true;

	mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(341, 19, 53, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
	bolProgressScrub = true;

	mcVideoControls.mcProgressScrubber.startDrag(false, new Rectangle(0, 2, 432, 0));
}

Last of all, we have our mouseReleased() handler. This function is needed for knowing, when the user stops the scrubbing. First, we set the progress/volume scrub flag to false. Then we stop all dragging actions and update the width of the progress/volume fill. And if the volume is greater than zero, we store it in the variable intLastVolume.

function mouseReleased(e:MouseEvent):void {
	bolVolumeScrub		= false;
	bolProgressScrub	= false;

	mcVideoControls.mcProgressScrubber.stopDrag();
	mcVideoControls.mcVolumeScrubber.stopDrag();

	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 394 + 53;

	if((mcVideoControls.mcVolumeScrubber.x - 341) / 53 > 0)
		intLastVolume = (mcVideoControls.mcVolumeScrubber.x - 341) / 53;
}

The updateDisplay() function will be called by the timer object 100 times a second. If you want, you can decrease this value by increasing the value from the constant DISPLAY_TIMER_UPDATE_DELAY.
First of all, we check if the user is scrubbing on the progress bar. If that’s the case, we seek in the video. If not, we just update the position of the scrubber according to the current time.
Then we set the time and duration label. We format the values with the function formatTime() which we explain later.
Now we update the width from the progress bar. The grey one displays the loading progress while the red one shows the progress from the video.
Last of all we update the volume and the red fill width when the user is scrubbing.

function updateDisplay(e:TimerEvent):void {
	if(bolProgressScrub)
		nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 432))
	else
		mcVideoControls.mcProgressScrubber.x = nsStream.time * 432 / objInfo.duration; 

	mcVideoControls.lblTimeDuration.htmlText 	= "” + formatTime(nsStream.time) + “ / ” + formatTime(objInfo.duration);

	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcProgressFill.mcFillGrey.width	= nsStream.bytesLoaded * 438 / nsStream.bytesTotal;

	if(bolVolumeScrub) {
		setVolume((mcVideoControls.mcVolumeScrubber.x - 341) / 53);
		mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
	}
}

The onMetaDataFunction will be called as soon as the net stream object gets the meta stuff from the flv file. We store these informations in a object. Now can start the timer object because we have all the neccesary data.

function onMetaData(info:Object):void {
	objInfo = info;

	tmrDisplay.start();
}

Once a net status event will be fired, the netStatusHandler() function will be called. The event holds the info code of the event type. We only need to handle NetStream.Play.StreamNotFound in case the stream is not found and NetStream.Play.Stop to know, when the video reached its end to stop the player with the stopVideoPlayer() function.

function netStatusHandler(event:NetStatusEvent):void {
	switch (event.info.code) {
		case "NetStream.Play.StreamNotFound":
			trace("Stream not found: " + strSource);
		break;
		case "NetStream.Play.Stop":
			stopVideoPlayer();
		break;
	}
}

There are 2 ways to stop the playback: One is clicking the stop button, the other is reaching the end of the video. That’s the reason why we’ve put this in a function.
First we pause the netstream and set the playback position to zero. In order to clear the display where the last frame of the video will be shown we need to set the visibility to false. We can’t use the Video.clear() function since it has a bug. But this one has already been reported to adobe. This workaround works fine. Finaly we switch the play/button visibility.

function stopVideoPlayer():void {
	nsStream.pause();
	nsStream.seek(0);

	vidDisplay.visible			= false;

	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

To set the volume of the video we use the setVolume() function.
First we create a soundtransform object with the value from the parameter. Then we assign this object to nsStream.soundTransform.
And we hide or show the mute and unmute according to the volume. If it’s greater than zero, we show the mute button and vice versa.

function setVolume(intVolume:Number = 0):void {
	var sndTransform	= new SoundTransform(intVolume);
	nsStream.soundTransform	= sndTransform;

	if(intVolume > 0) {
		mcVideoControls.btnMute.visible		= true;
		mcVideoControls.btnUnmute.visible	= false;
	} else {
		mcVideoControls.btnMute.visible		= false;
		mcVideoControls.btnUnmute.visible	= true;
	}
}

The last function formatTime() is used to format the seconds to the format mm:ss.

function formatTime(t:int):String {
	var s:int = Math.round(t);
	var m:int = 0;
	if (s > 0) {
		while (s > 59) {
			m++;
			s -= 60;
		}
		return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
	} else {
		return "00:00";
	}
}

Call init function

The only thing left to do is calling the init function for the player.

initVideoPlayer();

We hope you liked this tutorial. If you have any question don’t hesitate to ask. Also we’ve already mentioned be sure to check back for the next part that will be coming soon.

Full code with comments

// ##########################
// ############# CONSTANTS
// ##########################

// time to buffer for the video in sec.
const BUFFER_TIME:Number				= 8;
// start volume when initializing player
const DEFAULT_VOLUME:Number				= 0.6;
// update delay in milliseconds.
const DISPLAY_TIMER_UPDATE_DELAY:int	= 10;
// smoothing for video. may slow down old computers
const SMOOTHING:Boolean					= true;

// ##########################
// ############# VARIABLES
// ##########################

// flag for knowing if flv has been loaded
var bolLoaded:Boolean					= false;
// flag for volume scrubbing
var bolVolumeScrub:Boolean				= false;
// flag for progress scrubbing
var bolProgressScrub:Boolean			= false;
// holds the last used volume, but never 0
var intLastVolume:Number				= DEFAULT_VOLUME;
// net connection object for net stream
var ncConnection:NetConnection;
// net stream object
var nsStream:NetStream;
// object holds all meta data
var objInfo:Object;
// url to flv file
var strSource:String					= "hancock-tsr2_h480p.flv";
// timer for updating player (progress, volume...)
var tmrDisplay:Timer;

// ##########################
// ############# FUNCTIONS
// ##########################

// sets up the player
function initVideoPlayer():void {
	// hide buttons
	mcVideoControls.btnUnmute.visible	= false;
	mcVideoControls.btnPause.visible	= false;

	// set the progress/preload fill width to 1
	mcVideoControls.mcProgressFill.mcFillRed.width = 1;
	mcVideoControls.mcProgressFill.mcFillGrey.width = 1;

	// add global event listener when mouse is released
	stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);

	// add event listeners to all buttons
	mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
	mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
	mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
	mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
	mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
	mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
	mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

	// create timer for updating all visual parts of player and add
	// event listener
	tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
	tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);

	// create a new net connection, add event listener and connect
	// to null because we don't have a media server
	ncConnection = new NetConnection();
	ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	ncConnection.connect(null);

	// create a new netstream with the net connection, add event
	// listener, set client to this for handling meta data and
	// set the buffer time to the value from the constant
	nsStream = new NetStream(ncConnection);
	nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
	nsStream.client = this;
	nsStream.bufferTime = BUFFER_TIME;

	// attach net stream to video object on the stage
	vidDisplay.attachNetStream(nsStream);
	// set the smoothing value from the constant
	vidDisplay.smoothing = SMOOTHING;

	// set default volume
	mcVideoControls.mcVolumeScrubber.x = (52 * DEFAULT_VOLUME) + 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 394 + 52;
	setVolume(DEFAULT_VOLUME);
}

function playClicked(e:MouseEvent):void {
	// check's, if the flv has already begun
	// to download. if so, resume playback, else
	// load the file
	if(!bolLoaded) {
		nsStream.play(strSource);
		bolLoaded = true;
	}
	else{
		nsStream.resume();
	}

	// show video display
	vidDisplay.visible					= true;

	// switch play/pause visibility
	mcVideoControls.btnPause.visible	= true;
	mcVideoControls.btnPlay.visible		= false;
}

function pauseClicked(e:MouseEvent):void {
	// pause video
	nsStream.pause();

	// switch play/pause visibility
	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

function stopClicked(e:MouseEvent):void {
	// calls stop function
	stopVideoPlayer();
}

function muteClicked(e:MouseEvent):void {
	// set volume to 0
	setVolume(0);

	// update scrubber and fill position/width
	mcVideoControls.mcVolumeScrubber.x				= 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= 1;
}

function unmuteClicked(e:MouseEvent):void {
	// set volume to last used value
	setVolume(intLastVolume);

	// update scrubber and fill position/width
	mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 341;
	mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}

function volumeScrubberClicked(e:MouseEvent):void {
	// set volume scrub flag to true
	bolVolumeScrub = true;

	// start drag
	mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(341, 19, 53, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
	// set progress scrub flag to true
	bolProgressScrub = true;

	// start drag
	mcVideoControls.mcProgressScrubber.startDrag(false, new Rectangle(0, 2, 432, 0));
}

function mouseReleased(e:MouseEvent):void {
	// set progress/volume scrub to false
	bolVolumeScrub		= false;
	bolProgressScrub	= false;

	// stop all dragging actions
	mcVideoControls.mcProgressScrubber.stopDrag();
	mcVideoControls.mcVolumeScrubber.stopDrag();

	// update progress/volume fill
	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcVolumeFill.mcFillRed.width	= mcVideoControls.mcVolumeScrubber.x - 394 + 53;

	// save the volume if it's greater than zero
	if((mcVideoControls.mcVolumeScrubber.x - 341) / 53 > 0)
		intLastVolume = (mcVideoControls.mcVolumeScrubber.x - 341) / 53;
}

function updateDisplay(e:TimerEvent):void {
	// checks, if user is scrubbing. if so, seek in the video
	// if not, just update the position of the scrubber according
	// to the current time
	if(bolProgressScrub)
		nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 432))
	else
		mcVideoControls.mcProgressScrubber.x = nsStream.time * 432 / objInfo.duration; 

	// set time and duration label
	mcVideoControls.lblTimeDuration.htmlText		= "” + formatTime(nsStream.time) + “ / ” + formatTime(objInfo.duration);

	// update the width from the progress bar. the grey one displays
	// the loading progress
	mcVideoControls.mcProgressFill.mcFillRed.width	= mcVideoControls.mcProgressScrubber.x + 5;
	mcVideoControls.mcProgressFill.mcFillGrey.width	= nsStream.bytesLoaded * 438 / nsStream.bytesTotal;

	// update volume and the red fill width when user is scrubbing
	if(bolVolumeScrub) {
		setVolume((mcVideoControls.mcVolumeScrubber.x - 341) / 53);
		mcVideoControls.mcVolumeFill.mcFillRed.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
	}
}

function onMetaData(info:Object):void {
	// stores meta data in a object
	objInfo = info;

	// now we can start the timer because
	// we have all the neccesary data
	tmrDisplay.start();
}

function netStatusHandler(event:NetStatusEvent):void {
	// handles net status events
	switch (event.info.code) {
		// trace a messeage when the stream is not found
		case “NetStream.Play.StreamNotFound”:
			trace(”Stream not found: ” + strSource);
		break;

		// when the video reaches its end, we stop the player
		case “NetStream.Play.Stop”:
			stopVideoPlayer();
		break;
	}
}

function stopVideoPlayer():void {
	// pause netstream, set time position to zero
	nsStream.pause();
	nsStream.seek(0);

	// in order to clear the display, we need to
	// set the visibility to false since the clear
	// function has a bug
	vidDisplay.visible			= false;

	// switch play/pause button visibility
	mcVideoControls.btnPause.visible	= false;
	mcVideoControls.btnPlay.visible		= true;
}

function setVolume(intVolume:Number = 0):void {
	// create soundtransform object with the volume from
	// the parameter
	var sndTransform	= new SoundTransform(intVolume);
	// assign object to netstream sound transform object
	nsStream.soundTransform	= sndTransform;
	// hides/shows mute and unmute button according to the
	// volume
	if(intVolume > 0) {
		mcVideoControls.btnMute.visible		= true;
		mcVideoControls.btnUnmute.visible	= false;
	} else {
		mcVideoControls.btnMute.visible		= false;
		mcVideoControls.btnUnmute.visible	= true;
	}
}

function formatTime(t:int):String {
	// returns the minutes and seconds with leading zeros
	// for example: 70 returns 01:10
	var s:int = Math.round(t);
	var m:int = 0;
	if (s > 0) {
		while (s > 59) {
			m++;
			s -= 60;
		}
		return String((m < 10 ? “0″ : “”) + m + “:” + (s < 10 ? “0″ : “”) + s);
	} else {
		return “00:00″;
	}
}

// ##########################
// ############# INIT PLAYER
// ##########################
initVideoPlayer();

In order to complete this tutorial you can download the source files here.

In our xml file, we want to store the path to the slides and a description for each of it. So let’s take a look at the example file

<?xml version="1.0" encoding="UTF-8"?>

  <slideshow>

<image src="images/fly.jpg" desc="Fly"/>

<image src="images/mouse.jpg" desc="Computer mouse"/>

<image src="images/country.jpg" desc="Country"/>

<image src="images/rope.jpg" desc="Rope"/>

<image src="images/flower.jpg" desc="Flower"/>

</slideshow>

On the first line we describe the version and the encoding of the file. Flash uses UTF-8 for encoding, so we should edit the file in UTF-8 only to avoid character encoding problems.

The first node defines the root node of the xml file and contains further nodes. These are the images with the attributes src and desc. Okey, that’s how the structure of the xml looks like, let’s move on to the flash file.
The stage has a movieclip which contains the textfields which will show us the description of the slides, the loading process and the slide count later. Under it you will find a mask layer which masks an empty movieclip, where o