Simple AS3 video player using VideoLoader

In this tutorial you will learn how to create a simple Actionscript 3 video player using the Greensock Videoloader which can be downloaded from greensock.com. I find the Greensock Videoloader is more intuitive to use that the native AS3 Netstream and Video classes for creating a video player. It is also more rich in features, for more information take a look at the documentation. You will need a FLV video file for this tutorial. I have used my own playpause button class that toggle between the play and pause states, but you can alternatively create your own toggle button.

Simple AS3 video player using VideoLoader

Step 1

Open a new AS3 FLA and save the file with name: VidPlayer. Then open up an AS3 class file and save it with the name VidPlayer.


Step 2

In the VidPlayer class add the following import statements and variables.

package 
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;

 import com.ilike2flash.PlayPauseBtn;
 import com.greensock.TweenNano;
 import com.greensock.loading.VideoLoader;
 import com.greensock.events.LoaderEvent;
 
 public class VidPlayer extends Sprite 
 {
  private var vid:VideoLoader;
  private var btn:PlayPauseBtn;
  private var rollArea:Sprite;
  private var url:String = 'video.flv';
  
  public function VidPlayer() {
  
  }
 }
}

In the constructor add the code below. This creates a new instance of the VideoLoader class with the width and height set to the stage dimensions, the scale mode set to proptionalInside, and the autoPlay set to false. The container property is set to ‘this’ which will add the VideoLoader onto the stage itself. You can alternatively specify any display object to hold the VideoLoader. The ‘url’ parameter is the name of the video file. I have added a video complete event which will fire the vidCompleteHandler when a video finishes playing.

vid = new VideoLoader(url, { name:"myVideo", container:this, width:stage.stageWidth, height:stage.stageHeight, scaleMode:"proportionalInside", autoPlay:false} );
vid.addEventListener(VideoLoader.VIDEO_COMPLETE, vidCompleteHandler);
vid.load();

This adds an invisible roll area onto the stage with the same dimensions as the stage. The mouse over and mouse out event listeners are added to the sprite.

rollArea = new Sprite();
rollArea.graphics.beginFill(0x000000,0);
rollArea.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
rollArea.addEventListener(MouseEvent.MOUSE_OVER, mouseHandler);
rollArea.addEventListener(MouseEvent.MOUSE_OUT, mouseHandler);
rollArea.graphics.endFill();
addChild(rollArea);

The play/pause button is added to the centre of the stage with a mouse click event listener. The button is also added inside the rollArea so does not conflict with the mouse over and mouse over event listeners of the rollArea.

btn = new PlayPauseBtn();
btn.x = stage.stageWidth / 2 - btn.width / 2;
btn.y = stage.stageHeight / 2 - btn.height / 2; 
btn.addEventListener(MouseEvent.CLICK, btnClicked);
rollArea.addChild(btn); 

This function fades the button out when the mouse is out of the roll area and fades the button in when the mouse is on the roll area. I have used the TweenNano plugin to tween the alpha property of the button.

private function mouseHandler(e:MouseEvent):void 
{
if (e.type == "mouseOver")TweenNano.to(btn, 0.5, { alpha:1 } );
if (e.type == "mouseOut") TweenNano.to(btn, 0.5, { alpha:0 } );
}

This function toggles the play and pause state of the video using the videoPaused property of the VideoLoader.

private function btnClicked(e:MouseEvent):void 
{
vid.videoPaused = !vid.videoPaused;
}

This function sets the video back to the beginning and changes the button state to play when the video has finished playing.

private function vidCompleteHandler(e:Event):void 
{
vid.gotoVideoTime(0);
btn.clicked();
}

Step 3

Export movie Ctrl + Enter.

Texturing a sphere in Away3D

In this post I will add a texture to a sphere primitive in Away3D and rotate the sphere around the x axis using the mouse. You will need the Away3D engine which can be downloaded from: away3d.com and an image of a texture for this tutorial.


Texturing a sphere in Away3D

Step 1

Open up a new AS3 file and import a texture into the library by selecting File > Import > Import to Library. In the library select the image then right click and select Properties. In the Options tab select ‘Allow smoothing’ and in the Actionscript tab select ‘Export for Actionscript ’. Give the value: ‘MyTexture’ for the class and click ok. Set the document class with the name: Texture and save the FLA with name: Texture.


Step 2

Open a new AS3 Class file with the name: Texture and add the following import statements and variables. In the constructor add the createView and createScene functions.

package{

import away3d.cameras.HoverCamera3D;
import away3d.containers.View3D;
import away3d.primitives.Sphere;
import away3d.materials.BitmapMaterial;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
 
public class Texture extends Sprite{
 
private var view:View3D;
private var camera:HoverCamera3D;
  
public function Texture() { 
 createView();
 createScene();
}

In the createView() function add an instance of the HoverCamera3D and the view3D and an enter frame event.

private function createView():void{
 camera: HoverCamera3D = new HoverCamera3D();
 camera.distance = 1000;
 camera.tiltAngle = -10;
 camera.zoom = 40;
   
 view = new View3D;
 view.x = stage.stageWidth/2;
 view.y = stage.stageHeight/2;
 view.camera = camera;
 addChild(view);
   
 stage.addEventListener(Event.ENTER_FRAME, ef); 
}

In the createScene function add a new sphere object to the scene with the material property set to the imported texture in the library. The segmentsW and segmentsH properties increase the number of faces of the sphere to give a smoother appearance.

private function createScene():void{ 
 var bitmapdata:BitmapData = new MyTexture(0,0);  
 var bitmapMat:BitmapMaterial = new BitmapMaterial(bitmapdata);
   
 var sphere:Sphere = new Sphere();
 sphere.radius = 30;
 sphere.segmentsW = 24;
 sphere.segmentsH = 12;
 sphere.material = bitmapMat;
 view.scene.addChild(sphere); 
}

In the ef function the camera pan angle is updated with the movement of the mouse by calling the hover() method.

private function ef(e:Event):void {
  camera.panAngle = mouseX - stage.stageWidth / 2;
  camera.hover();
  view.render();
 } 
    }
}

Step 3

Export the movie Ctrl + Enter. Now move the mouse over the sphere.

Bouncing ball effect in Actionscript 3

I was contacted with a question about how to create a bouncing ball effect in Actionscript 3. I previously wrote a pendulum effect tutorial where I used the Math.sin() method with the rotation property of a movie clip to create the pendulum swing effect. This code can be reused to create the bouncing effect, but instead of using the rotation property, you use the y property to create the up and down motion.

var angle:Number = 0;
var startY:int = stage.stageHeight/2;
var range:int = 10;

addEventListener(Event.ENTER_FRAME, ef);

function ef(e:Event):void{ 
 ball.y = startY + Math.sin(angle) * range;
 angle++;
}

The code above creates a non stop continuous motion. To create a more realistic bounce motion, you can add gravity which will bring the ball to a gradual stop.

var gravity:Number = 0.2;
var vy:Number = 0;

addEventListener(Event.ENTER_FRAME, ef);

function ef(e:Event):void{
  
 vy += gravity;
 ball.y += vy;
  
 if(ball.y > stage.stageHeight - ball.height/2){
  ball.y = stage.stageHeight - ball.height/2;
  vy *= -0.6;
 }
}