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
- Get the TweenLite engine and save it in the same folder to access the classes
- Draw a rectangle 200×250. This will act as a mask for the content.
- Convert the rectangle to a movie clip. Set the registration point to the top left corner.
- Give the movie clip an instance name of myMask.
- Draw a line of size 1×250 on the right side of the stage do not convert to movie clip.
- Draw a circle 20×20. Convert it to a movie clip. Set registration point to center.
- Give the circle an instance name of scrollMC.
- Put the circle on the top of the line like below.
Create the content movie clip
- Create a movie clip out of a rectangle the same width as the mask.
- The height can be any amount as only the mask size portion will be shown..
- Set the registration point to the top left corner.
- Give the content an instance name of myContent
- Add images to use as thumbnails for your video's and convert them to buttons
- All functions are on the parent timeline.
- Use movieClip.movieClip format to access the buttons inside the child MC.
- Ensure all instance names are completed for the buttons and movie clips
- Paste or type the below code.
- The tweens blur can be adjusted inside the tweenFinished function.
The Video Player
- Place an FLVPlayback component on stage with instance the name of myMovie.
- Choose a skin or use video controls.
- Give all controls instance names.
- Set the controls to the FLVPlayback component.
- 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}});
}
