Create an ActionScript 3 Scrolling Video Menu

The ScrollPane component is used to to display images, and SWF files, but to assign functions to nested clips inside The ScrollPane is a real pain. In this post we will design a scroll pane and use the contents as a menu for a FLVPlayback component. The original script comes from flashconf.com, which was just a scroller but we will add buttons inside to control a FLVPlayback component.

The Scroller and Mask

1. Get the TweenLite engine and save it in the same folder to access the classes
2. Draw a rectangle 200×250. This will act as a mask for the content.
3. Convert the rectangle to a movie clip. Set the registration point to the top left corner.
4. Give the movie clip an instance name of myMask.
5. Draw a line of size 1×250 on the right side of the stage do not convert to movie clip.
6. Draw a circle 20×20. Convert it to a movie clip. Set registration point to center.
7. Give the circle an instance name of scrollMC.
8. Put the circle on the top of the line like below.

Create the content movie clip

1. Create a movie clip out of a rectangle the same width as the mask.
2. The height can be any amount as only the mask size portion will be shown..
3. Set the registration point to the top left corner.
4. Give the content an instance name of myContent
5. Add images to use as thumbnails for your video's and convert them to buttons
6. All functions are on the parent timeline.
7. Use movieClip.movieClip format to access the buttons inside the child MC.
8. Ensure all instance names are completed for the buttons and movie clips
9. Paste or type the below code.
10. The tweens blur can be adjusted inside the tweenFinished function.

The Video Player

1. Place an FLVPlayback component on stage with instance the name of myMovie.
2. Choose a skin or use video controls.
3. Give all controls instance names.
4. Set the controls to the FLVPlayback component.
5. Set the initial video, volume level and stop autoplay.

The Final Code

//Import TweenMax and the plugin for the blur filter
import com.greensock.TweenMax;
import com.greensock.plugins.BlurFilterPlugin;
import flash.display.*;

myMovie.playPauseButton = playPause;
myMovie.stopButton = stopBtn;
myMovie.seekBar = myBar;
myMovie.source = "http://www.yoursite.com/yourVideo1.flv";
myMovie.autoPlay = false;
myMovie.volumeBar = volBar;

myContent.one_btn.addEventListener(MouseEvent.CLICK, playVid);
myContent.two_btn.addEventListener(MouseEvent.CLICK, playVid2);
myContent.three_btn.addEventListener(MouseEvent.CLICK, playVid3);

function playVid(e:MouseEvent):void{
myMovie.source = "http://www.yoursite.com/yourVideo1.flv";
}

function playVid2(e:MouseEvent):void{
myMovie.source = "http://www.yoursite.com/yourVideo2.flv";
}

function playVid3(e:MouseEvent):void{
myMovie.source = "http://www.yoursite.com/yourVideo3.flv";
}

//Save the content's and mask's height.
//Assign your own content height here!!
var CONTENT_HEIGHT:Number = 940;
var MASK_HEIGHT:Number = 250;

//We want to know what was the previous y coordinate of the content (for the animation)
var oldY:Number = myContent.y;

//Position the content on the top left corner of the mask
myContent.x = myMask.x;
myContent.y = myMask.y;

//Set the mask to our content
myContent.mask = myMask;

//Create a rectangle that will act as the bounds to the scrollMC.
//This way the scrollMC can only be dragged along the line.
var bounds:Rectangle = new Rectangle(scrollMC.x,scrollMC.y,0,250);

//We want to know when the user is scrolling
var scrolling:Boolean = false;

//Listen when the user is holding the mouse down on the scrollMC
scrollMC.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);

//Listen when the user releases the mouse button
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);

//This function is called when the user is dragging the scrollMC
function startScroll(e:Event):void {

//Set scrolling to true
scrolling = true;

//Start dragging the scrollMC
scrollMC.startDrag(false,bounds);
}

//This function is called when the user stops dragging the scrollMC
function stopScroll(e:Event):void {

//Set scrolling to false
scrolling = false;

//Stop the drag
scrollMC.stopDrag();
}

//Add ENTER_FRAME to animate the scroll
addEventListener(Event.ENTER_FRAME, enterHandler);

//This function is called in each frame
function enterHandler(e:Event):void {

//Check if we are scrolling
if (scrolling == true) {

//Calculate the distance how far the scrollMC is from the top
var distance:Number = Math.round(scrollMC.y - bounds.y);

//Calculate the percentage of the distance from the line height.
//So when the scrollMC is on top, percentage is 0 and when its
//at the bottom the percentage is 1.
var percentage:Number = distance / MASK_HEIGHT;

//Save the old y coordinate
oldY = myContent.y;

//Calculate a new y target coordinate for the content.
//We subtract the mask's height from the contentHeight.
//Otherwise the content would move too far up when we scroll down.
//Remove the subraction to see for yourself!
var targetY:Number = -((CONTENT_HEIGHT - MASK_HEIGHT) * percentage) + myMask.y;

//We only want to animate the scroll if the old y is different from the new y.
//In our movie we animate the scroll if the difference is bigger than 5 pixels.
if (Math.abs(oldY - targetY) > 5) {

//Tween the content to the new location.
//Call the function tweenFinished() when the tween is complete.
TweenMax.to(myContent, 0.3, {y: targetY, blurFilter:{blurX:2, blurY:2}, onComplete: tweenFinished});
}
}
}

//This function is called when the tween is finished
function tweenFinished():void {

//Tween the content back to "normal" (= remove blur)
TweenMax.to(myContent, 0.3, {blurFilter:{blurX:0, blurY:0}});
}