It's on to part two of our Custom AS3 Video Player! In the previous chapter we became familiar with the start file, added some interactivity to the buttons and (most importantly) got the video playing.
In this second part we are going to set up the xml for all the the videos settings. We will change how our player loads videos and get preloaders working for all of our thumbnails. We will be able to add, change and modify our videos on the fly with XML. Let's get started!
Step 1: Create Thumbnails
We need to get a thumbnail image of all the videos we are working with.
Note: If you have followed the first couple of steps in the previous tutorial you should already have this step done.
How I usually do this is to open the video I am working with in a player like VLC Player or Wimpy Player and press Command-Control-Shift-3 on Mac or the Print Screen button on PC. Once you've done this, open up Photoshop and create a new blank document. Then past the clipboard contents onto the canvas. Command-v on Mac Control-v on PC.
Now get the crop tool and crop your image to the exact pixel on all four sides. Now we need to resize our image to some specific sizes. We will need a 145x60 px image for our video thumbnail. If this is going to be one of your featured videos then we will also need a 82x82 px image for our featured item thumbnails, and if you want to use one of these images for any of the category thumbnails, then you will need to make a 50x50 px image. If you have a different image you want to represent a specific category then just crop it to the 50x50 size and save it to the correct folder.
Now save all the 82x82 px images to the "output/flv/thumb/featured" folder. Save all the 145x60 px images to the "output/flv/thumbs/video" folder. And all the 82x82 px images to the "output/flv/thumbs/featured" folder. Make sure you assign them logical names you will remember.
Now you should have all your images set up and ready to be brought into flash with xml.
Step 2: XML Fun!
Now that we have all of our video thumbnails set up and ready to go, open your favorite text editor (Dreamweaver in my case) and create a new .xml file. First save the file in the "output" folder as playlist.xml. Note: If you have followed the first couple of steps in the previous tutorial you should already have this step done.
This is the part where you will be placing all the videos in specific areas so pay attention. First type this:
<CONTENT> </CONTENT>
Now We put all the rest of the code between these two tags. Let's create the three galleries. Now add this:
<CONTENT>
<GALLERY name="GALLERY 1">
</GALLERY>
<GALLERY name="GALLERY 2">
</GALLERY>
<GALLERY name="GALLERY 3">
</GALLERY>
</CONTENT>
The "GALLERY 1" will be displayed in the first tab gallery button above our playlist on the right sidebar so name it whatever you want. The next GALLERY will be the name of the second tab gallery button and so on. Note: This is the only hard coded part of this player. I have only set it up for 3 gallery tabs so you can not add any more the way it is currently set up :(
Step 3: Categories
Now we need to create some categories. Here you can have as many as you want in any of the tree galleries. To do this you need to add a "CATEGORY" tag between any of the three galleries. So if you had a Gallery titled Sports, you could create categories within that Sports gallery for football, baseball, basketball, soccer, etc. Your code should now look something like this.
<CONTENT>
<GALLERY name="GALLERY 1">
<CATEGORY name="Category 1.1" desc="Various Videos" thumb="flv/thumbs/category/jdsmith-freak-alley.jpg">
</CATEGORY>
<CATEGORY name="Category 1.2" desc="Various Videos" thumb="flv/thumbs/category/gh1test.jpg">
</CATEGORY>
<CATEGORY name="Category 1.3" desc="Various Videos" thumb="flv/thumbs/category/gh1test.jpg">
</CATEGORY>
<CATEGORY name="Category 1.4" desc="Various Videos" thumb="flv/thumbs/category/gh1test.jpg">
</CATEGORY>
</GALLERY>
<GALLERY name="GALLERY 2">
<CATEGORY name="Category 2.1" desc="Various Videos" thumb="flv/thumbs/category/gh1test.jpg">
</CATEGORY>
<CATEGORY name="Category 2.2" desc="Various Videos" thumb="flv/thumbs/category/gh1test.jpg">
</CATEGORY>
<CATEGORY name="Category 2.3" desc="Various Videos" thumb="flv/thumbs/category/gh1test.jpg">
</CATEGORY>
</GALLERY>
<GALLERY name="GALLERY 3">
<CATEGORY name="Category 3.1" desc="Various Videos" thumb="flv/thumbs/category/gh1test.jpg">
</CATEGORY>
<CATEGORY name="Category 3.2" desc="Various Videos" thumb="flv/thumbs/category/gh1test.jpg">
</CATEGORY>
</GALLERY>
</CONTENT>
Let's look at what we added to the "CATEGORY" tag. We first gave it a name. The first example was "Category 1.1". This will be displayed on the first category in the first gallery. Next we added the desc="VariousVideos", this is a short description about the specific category. Finally we added our thumb="flv/thumbs/category/jdsmith-freak-alley.jpg". This is calling the .jpg image we saved in the category thumbnail folder. If you want to use a different one then use that. I just used the thumbs we already have.
Step 4: Add Video Tags
Now we will add the video tags for the categories. To do this, add some code to one of the "CATEGORY" tags. Here is an example:
<CONTENT>
<GALLERY name="GALLERY 1">
<CATEGORY name="Category 1.1" desc="Various Videos" thumb="flv/thumbs/category/jdsmith-freak-alley.jpg">
<ITEM>
<file_path>flv/jdsmith-freak-alley.flv</file_path>
<file_width>496</file_width>
<file_height>279</file_height>
<file_title>JDSmith Freak Alley</file_title>
<file_desc>Stop Motion Video</file_desc>
<file_image>flv/thumbs/video/jdsmith-freak-alley.jpg</file_image>
<featured_image>flv/thumbs/featured/jdsmith-freak-alley.jpg</featured_image>
<featured_or_not>true</featured_or_not>
</ITEM>
<ITEM>
<file_path>flv/bsu-basketball-open.f4v</file_path>
<file_width>500</file_width>
<file_height>281</file_height>
<file_title>BSU Basketball</file_title>
<file_desc>Game Opener</file_desc>
<file_image>flv/thumbs/video/bsu-basketball-open.jpg</file_image>
<featured_image>flv/thumbs/featured/bsu-basketball-open.jpg</featured_image>
<featured_or_not>true</featured_or_not>
</ITEM>
<ITEM>
<file_path>flv/bsu-football-open.flv</file_path>
<file_width>500</file_width>
<file_height>281</file_height>
<file_title>BSU Football</file_title>
<file_desc>Game Opener</file_desc>
<file_image>flv/thumbs/video/bsu-football-open.jpg</file_image>
<featured_image>flv/thumbs/featured/bsu-football-open.jpg</featured_image>
<featured_or_not>true</featured_or_not>
</ITEM>
</CATEGORY>
</GALLERY>
<GALLERY name="GALLERY 2">
</GALLERY>
<GALLERY name="GALLERY 3">
</GALLERY>
</CONTENT>
Let's look at what we just did. First we have "ITEM" tags. These hold each of the specific videos and their information. Inside those "ITEM" tags we have "<file_path>" which points to the specific video's location. Then we have the "<file_width>" and "<file_height>" These set the file width and height. Next you have the "<file_title>" which is the name you want to add to this video. It will be displayed on the video thumbnail and below the video in the player. Next you have the "<file_desc>" tag that again is a short description of the specific video that will be shown below the title on the video thumbnail button. After that we have the "<file_image>". This points to the thumbnail of the video. Then we have the "<featured_image>" tag which is most likely the same as the thumbnail unless you want to change it to add a banner or something. Finally we have the "<featured_or_not>" tag. This is either set to true of false. If it is set to true it will be called to the featured box below the player in the next tutorial.
Please just open up the .xml file I provided and copy that to your file. The reason for this is that there is a lot of code and you need to make sure one of your Galleries has enough Categories to populate a scrollbar, and one of your Categories has enough Video items to populate a scrollbar. We will be making the scrollbar shortly.
Step 5: Set up Variables
Good, now we have our xml file set up and ready to work with. Let's jump back to flash and open our actions panel on the first keyframe. We need to set up some variables to what we have going.
var container_mc:MovieClip; // create an empty movieclip to hold our items in the right sidebar var xmlPath:String = "playlist.xml"; // path to the xml file var xml:XML; // create a new XML object var loader = new URLLoader(); // create a new loader to load the xml
Step 6: Load the xml
Now let's actually load in the xml and use a trace statement to view it. Add this code to the bottom of our actionscript 3 layer back in flash.
loader.load(new URLRequest(xmlPath)); // load the xml
loader.addEventListener(Event.COMPLETE, xmlLoaded); // listener for when the xml is loaded
function xmlLoaded(event:Event):void
{
if((event.target as URLLoader) != null) // if our xml is not equal to null then run this function
{
xml = new XML(loader.data); // assign the XML loader data to the xml variable
loader.removeEventListener(Event.COMPLETE, xmlLoaded); // remove our listener from the stage now that the file is loaded
trace(xml); // trace our xml to make sure it loaded correctly
}
}
Now if you test your file you should have all the xml we wrote in the output panel. Good, now let's use it. Note: comment out or delete the "trace(xml); line after testing. I find it annoying when it pops up each time you test, but do whatever you prefer.
Step 7: Add More Variables
These are variables for our gallery buttons and our dynamic text:
var gallery1Btn = rightSidebar_mc.gallery1Btn_mc; // targets the first gallery button above the right sidebar var gallery2Btn = rightSidebar_mc.gallery2Btn_mc; // targets the middle gallery button above the right sidebar var gallery3Btn = rightSidebar_mc.gallery3Btn_mc; // targets the right gallery button above the right sidebar var gallery1BtnTxt = rightSidebar_mc.gallery1Btn_mc.galleryTitle1_txt; // targets the dynamic text in the first gallery button var gallery2BtnTxt = rightSidebar_mc.gallery2Btn_mc.galleryTitle2_txt; // targets the dynamic text in the second gallery button var gallery3BtnTxt = rightSidebar_mc.gallery3Btn_mc.galleryTitle3_txt; // targets the dynamic text in the third gallery button
Step 8: Gallery Button Titles
Now let's add a listener to our xmlLoaded function we just created. Add this line:
giveGalleryTitles();
Your code for this function should now look like this:
function xmlLoaded(event:Event):void
{
if((event.target as URLLoader) != null)
{
xml = new XML(loader.data); // set the xml variable to the xml data we just loaded in
loader.removeEventListener(Event.COMPLETE, xmlLoaded); // remove the listener because we do not need it anymore
giveGalleryTitles(); // listener for a function that will look through the xml to get and set the gallery titles
//trace(xml); // uncomment to see the xml traced out in the output window
}
}
Now let's add the function for the giveGalleryTitles listener.
function giveGalleryTitles():void
{
gallery1BtnTxt.text = xml.GALLERY.@name[0]; // display the name of the gallery from the xml in the first gallery button's dynamic text field
gallery2BtnTxt.text = xml.GALLERY.@name[1];
gallery3BtnTxt.text = xml.GALLERY.@name[2];
}
Step 9: Add Some More Variables
Let's add some more variables that point to our home icon button, our home icon dynamic text, set our currentGallery index and create a categoryThumbLoader to load our categoryThumbs.
var homeBtn = rightSidebar_mc.displayBar_mc.homeBtn_mc; // targets the home button in the right sidebar var homeBtnTxt = rightSidebar_mc.displayBar_mc.galleryTitle_txt; // targets the home button's text in the right sidebar to the right of the button var currentGallery:Number = 0; // sets a variable to holde the current gallery number - set to 0 now var i:Number = 0; // variable used to count the categories we will create soon var categoryThumbLoader:Loader; // create a new loader for the category item movieclip's thumbnail
Step 10: Listeners for Home Button
Let's set up our listeners, buttonMode, and mouseChildren for our home icon button. This button, when clicked, will bring the user from any level in the right sidebar they may be at to the top level of the current gallery they are in. We will use this in the third tutorial. Type the following:
homeBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver); homeBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut); homeBtn.buttonMode = true; homeBtn.mouseChildren = false;
Step 11: Thumbnails
Finally we'll add a listener to our xmlLoaded function below the giveGalleryTitles listener.
makeGalleryItems();
Now let's create the function for this listener.
function makeGalleryItems():void
{
}
Step 12: Add a Container
Add a container to the sidebar and place it 60 px down so that it is lined up with the bottom of our homeBtn. Inside the makeGalleryItems function type this:
container_mc = new MovieClip(); // create a new container container_mc.x = 0; // set the containers x position container_mc.y = 60; // set the containers y position sidebarBox.addChild(container_mc); // add the container to the right sidebar homeBtnTxt.text = xml.GALLERY.@name[currentGallery]; // set the textfield in the right sidebar to display what current gallery we are on
Now your sidebar will have an invisible container inside it that we will now populate, and the name in the home button text box should be populated according to whatever gallery we are on.
Step 13: Add a For Statement
OK, now we'll add a for statement that will loop through our xml and populate the container with some thumbnails. Add this code to the makeGalleryItems function below everything else:
for each(var galleryNode:XML in xml.GALLERY[currentGallery].CATEGORY) // create a galleryNode variable for each of our category tags in the current gallery based on the xml
{
var categoryItem:categoryItem_mc = new categoryItem_mc(); // create a new categoryItem_mc from the library
categoryItem.categoryItemTitle_txt.text = galleryNode.@name; // set its title text field to what the xml says
categoryItem.categoryItemDesc_txt.text = galleryNode.@desc; // sets its description text field to what the xml says
categoryItem.x = 0; // set its x position
categoryItem.y = categoryItem.height * i; // set its y position - each time it is multiplied by the i variable that has 1 added to it each time through
categoryItem.buttonMode = true;
categoryItem.mouseChildren = false;
categoryItem.name = "" + i; // give the item a specific name so we can use it later to load its videos
categoryItem.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
categoryItem.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
container_mc.alpha = 0; // set its alpha to 0 so we can tween it on
Tweener.addTween(container_mc, {alpha:1, time:.5, transition:"easeOut"}); // tween its alpha to 1
container_mc.addChild(categoryItem); // add the categoryItem to the container_mc movieclip in the right sidebar
i++; // add 1 to the i variable each time we loop through
}
Wow, let's go over what we just did. It should be commented well, but here is a quick summary: First we are using a loop statement to get the number of categories we have in our currentGallery (it is set to 0 right now which is the first gallery in our xml. FYI xml numbering starts at 0 not 1. You can read more about the basics of XML in Dru Kepple's AS3 101: XML tut.) we will change it when we click one of the Gallery buttons. Once that happens, the body of this for statement will run each time it hits a CATEGORY tag.
Next we created a new instance of our categoryItem movieClip in our library. Then we set its name and description. Then we placed it at its x location of 0. We then set its y position to the height of our categoryItem and then multiplied that by i. We then set the buttonMode and MouseChildren for the thumbnail. We added a name to the item also using the "i" variable. Then we added our listeners for rollovers. Set its initial alpha to 0. Used the Tweener class to bring its alpha to 1 so it fades on. Then we actually added the categoryItem to the stage inside the contentHolder, and finally we added 1 to the "i" variable.
If you test now you will see your categoryItems being populated on the stage in the contentHolder. Also if you rollover the items they should have rollovers and rollouts.
Step 14: Reset i
We now need to add an if statement to reset that "i" variable when we click a gallery button or our home button, otherwise the thumbnails will not start at the top again. Add this code to our make gallery items function, above our for statement:
if(i > 0) // if variable i is greater than 0 then...
{
i = 0; // make the i variable 0
}
Step 15: Handle the categoryItem Thumbnails
Now let's go back into our for statement we were working with. We need to add some code to bring in the thumbnails. Add this code above the "container_mc.addChild(categoryItem);" line and below our "Tweener.addTween..." line:
var categoryThumbURL = galleryNode.@thumb; // create a variable that we will use to get the category thumbnail in the xml categoryThumbLoader = new Loader(); // create a new loader to hold the thumbnail categoryThumbLoader.load(new URLRequest(categoryThumbURL)); // load the thumbnail categoryThumbLoader.x = 5; categoryThumbLoader.y = 4; categoryItem.addChildAt(categoryThumbLoader, 3); // add the categoryThumbLoader to the categoryItem at its third layer categoryThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, categoryThumbLoaded); // listener for when the thumbnail is loaded
We are not ready for testing just yet. First let's go over what we've just written. We created a categoryThumbURL and linked it to the name of our category in our xml. Then we created a new Loader called categoryThumbLoader to load our thumbs. Next we loaded the thumbs then placed them in their x and y positions inside the categoryItem movieClip. Then we added it to the stage on the categoryItem layer of 3. The reason for that is we need to be under the preloader that is there and not cover it up. Then we set a listener that listens for the completion of the loaded thumbnails.
Let's now add the function for "categoryThumbLoaded".
Step 16: categoryThumbLoaded
We'll add the function below all our code. It will get rid of the categoryThumb's preloader.
function categoryThumbLoaded(event:Event):void
{
categoryThumbLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, categoryThumbLoaded); // remove the loader complete listener
var categoryPreloader = event.target.loader.parent.categoryItemPreloader_mc; // target the items preloader and store it in a variable
Tweener.addTween(categoryPreloader, {alpha:0, time:1.5, transition:"easeOut"}); // use the variable to target the preloader and tween its alpha to 0 so it is gone
}
Here we created a variable we will only use here to target the categoryItemPreloader_mc in the categoryItem_mc being exported from our library. If you test now you will load the file and the preloaders should quickly disappear. If you test online they should stay a little bit longer depending on your internet speed.
Here is what our final code should look like for the makeGalleryItems function:
function makeGalleryItems():void
{
container_mc = new MovieClip();
container_mc.x = 0;
container_mc.y = 60;
sidebarBox.addChild(container_mc);
homeBtnTxt.text = xml.GALLERY.@name[currentGallery];
if(i > 0)
{
i = 0;
}
for each(var galleryNode:XML in xml.GALLERY[currentGallery].CATEGORY)
{
var categoryItem:categoryItem_mc = new categoryItem_mc();
categoryItem.categoryItemTitle_txt.text = galleryNode.@name;
categoryItem.categoryItemDesc_txt.text = galleryNode.@desc;
categoryItem.x = 0;
categoryItem.y = categoryItem.height * i;
categoryItem.buttonMode = true;
categoryItem.mouseChildren = false;
categoryItem.name = "" + i;
categoryItem.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
categoryItem.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
container_mc.alpha = 0;
Tweener.addTween(container_mc, {alpha:1, time:.5, transition:"easeOut"});
var categoryThumbURL = galleryNode.@thumb;
categoryThumbLoader = new Loader();
categoryThumbLoader.load(new URLRequest(categoryThumbURL));
categoryThumbLoader.x = 5;
categoryThumbLoader.y = 4;
categoryItem.addChildAt(categoryThumbLoader, 3);
categoryThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, categoryThumbLoaded);
container_mc.addChild(categoryItem);
i++;
}
}
Test your movie now, Your category items should have thumbnails and the preloader should tween off once the thumb is loaded.
Step 17: Functionality for the Gallery Buttons
We need to set up a couple of listeners for our gallery buttons that will determine which one is active and which ones have rollovers and rollouts. Add this to the top of the code below the other listeners:
addEventListenersForGalleryBtns();
Now let's add the function for the addEventListenersForGalleryBtns listener. Add this code below everything else:
function addEventListenersForGalleryBtns():void
{
if(currentGallery == 0) // if our current gallery variable is set to "0" then run the body below
{
gallery1Btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver); // remove the gallery1Btn listener for the btnOver function
gallery1Btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut); // remove the gallery1Btn listener for the btnOut function
gallery1Btn.gotoAndStop("active"); // go to the active frame label in the gallery1Btn movieclip
gallery2Btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver); // add the gallery2Btn movieclip listener for the btnOver function
gallery2Btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
gallery2Btn.gotoAndStop("out");
gallery3Btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
gallery3Btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
gallery3Btn.gotoAndStop("out");
}
if(currentGallery == 1)
{
gallery1Btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
gallery1Btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
gallery1Btn.gotoAndStop("out");
gallery2Btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
gallery2Btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
gallery2Btn.gotoAndStop("active");
gallery3Btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
gallery3Btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
gallery3Btn.gotoAndStop("out");
}
if(currentGallery == 2)
{
gallery1Btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
gallery1Btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
gallery1Btn.gotoAndStop("out");
gallery2Btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
gallery2Btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
gallery2Btn.gotoAndStop("out");
gallery3Btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
gallery3Btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
gallery3Btn.gotoAndStop("active");
}
}
Here we have a couple of if statements that will run when the file opens and also when you click a gallery button and the home button. They pretty much turn on and off the specific button. Note: this could have been done with a switch statement that would have been a little cleaner. So do that if you want. This does not work though until we add the listeners for our gallery buttons, but that is what we are going to do next.
Step 18: Listeners, mouseChildren and buttonMode
We should get the gallery buttons working and functioning a little better with this code:
gallery1Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick0); // add a listener for a click on the gallery1Btn gallery2Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick1); gallery3Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick2); gallery1Btn.buttonMode = true; // set buttonMode to true gallery1Btn.mouseChildren = false; gallery2Btn.buttonMode = true; gallery2Btn.mouseChildren = false; gallery3Btn.buttonMode = true; gallery3Btn.buttonMode = false;
Now let's add the functions to handle the 3 gallery button's CLICK events.
function galleryBtnClick0(event:MouseEvent):void
{
if(currentGallery != 0) // if the current gallery variable is not equal to 0 then run the body code below
{
Tweener.addTween(container_mc, {alpha:0, time:.5, transition:"easeOut", onComplete:removeGallery0}); // tween the container_mc to an alpha of 0. on complete run the removeGallery0 function
}
}
function galleryBtnClick1(event:MouseEvent):void
{
if(currentGallery != 1)
{
Tweener.addTween(container_mc, {alpha:0, time:.5, transition:"easeOut", onComplete:removeGallery1});
}
}
function galleryBtnClick2(event:MouseEvent):void
{
if(currentGallery != 2)
{
Tweener.addTween(container_mc, {alpha:0, time:.5, transition:"easeOut", onComplete:removeGallery2});
}
}
What we are doing is checking to see which currentGallery we are on (and not on) and performing its function. We also have a new thing with the Tweeners. We are calling a function when the tween is completed that actually removes the gallery from the container movieClip. So now we need to add the 3 functions below:
function removeGallery0():void
{
currentGallery = 0; // sets the currentGallery function to 0
addEventListenersForGalleryBtns(); // run this function
sidebarBox.removeChild(container_mc); // remove the container_mc from the sidebarBox
makeGalleryItems(); // run this function
}
function removeGallery1():void
{
currentGallery = 1;
addEventListenersForGalleryBtns();
sidebarBox.removeChild(container_mc);
makeGalleryItems();
}
function removeGallery2():void
{
currentGallery = 2;
addEventListenersForGalleryBtns();
sidebarBox.removeChild(container_mc);
makeGalleryItems();
}
These 3 functions will remove the "galleryItems" from the container. We would not need this step if we did not tween our container_mc's alpha to 0 before we cleared it. You should now be able to test your file and click the 3 gallery buttons to switch between the them!
Step 19: Scrollbar
Now we want to add some vars to make our custom scrollbar. What we need to do in the next couple of steps is to create a scrollbar, check to see if the container height is taller than the scroller and if so link the scrollbar to the container_mc movieClip. Sounds easy, let's get coding... First add some variables for short naming purposes.
var sideScrollbarMasker:MovieClip = rightSidebar_mc.sideScrollbar_mc.sideScrollbarMask_mc; // targets the side scrollbar mask var sideScrollbarThumb:MovieClip = rightSidebar_mc.sideScrollbar_mc.sideScrollbarThumb_mc; // targets the side scrollber thumb var sideScrollbarTrack:MovieClip = rightSidebar_mc.sideScrollbar_mc.sideScrollbarTrack_mc; // targets the side scrollbar track
Now add some listeners and buttonMode/mouseChildren.
sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver); sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut); sideScrollbarThumb.buttonMode = true; sideScrollbarThumb.mouseChildren = false;
Step 20: Checking Container Height
Add a listener to the makeGalleryItems function. Place the listener outside the for statement, below the last closing bracket.
checkContainerHeight(); // run this function
Let's add the function for this listener that runs after we have looped through the for statement below all of our code so far.
function checkContainerHeight():void
{
if(container_mc.height > sideScrollbarMasker.height) // if the container holding the categoryItem movieclips is taller than the sideScrollbarMasker's height then...
{
sideScrollbarThumb.visible = true; // make the thumb scrubber visible
sideScrollbarThumb.alpha = 0; // set its alpha to 0
Tweener.addTween(sideScrollbarThumb, {alpha:1, time:.5, transition:"easeOut"}); // tween it's alpha to 1
}
else
{
Tweener.addTween(sideScrollbarThumb, {alpha:0, time:.5, transition:"easeOut", onComplete:hideSideScrollbarThumb}); else tween its alpha to 0 then run a function to make it not visible
}
}
function hideSideScrollbarThumb():void
{
sideScrollbarThumb.visible = false; // make the sideScrollbarThumb movieclip not visible
}
We just checked to see if the container_mc's height is greater than the sideScrollbarMasker's height. If so it makes the sideScrollbarThumb visible, sets it's alpha to 0 and then tweens it on. If it is not tall enough, we tween it off and run a small function that runs after the tween to make the sideScrollbarThumb not visible. If you test your movie and move from one gallery button to the other the scrollbar should be checking to see if it is showing or not. If so it will tween on and if not it will tween off. Go ahead, give it a try.
Step 21: Side Scrollbar Vars
Now we need to set some variables for the side scrollbar to get it working when it is showing. Add this code to the bottom of the list of variables we have going.
var yOffset:Number; // variable to hold the distance from our mouse to the 0,0 position of the scrubber thumb var yMin:Number = 0; // set the minimum height we want the scrubber to go to var yMax:Number; // variable to hold the maximum height we want the scrubber to go var sideScrollThumbDif:Number; // variable to tell us where the thumb is in relation to the container_mc.
Step 22: Side Scrollbar Functions
Let's get the side scrollbar working. We need to set up a couple of functions here. We will have a function that handles the MOUSE_DOWN event, the MOUSE_UP event, and the MOUSE_MOVE event. Here they are. Note: I got this code from Lee Brimilow. He has a site called gotoandlearn.com that is great for tutorials. Definitely check it out, Awesome CS5 app tutorial just out!
function linkSideScroller():void
{
sideScrollbarThumb.y = 0; // set the sideScrollbarThumb's y position to 0 when it loads
container_mc.mask = sideScrollbarMasker; // mask the container_mc with the sideScrollbarMasker
yMax = sideScrollbarTrack.height - sideScrollbarThumb.height; // set the yMax variable to a number that is the track height - the scrollbarThumb's height
}
function sideScrollbarThumbDown(event:MouseEvent):void
{
sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
stage.addEventListener(MouseEvent.MOUSE_MOVE, sideScrollbarThumbMove); // add listener for when we have the mouse held down and we move the mouse
yOffset = mouseY - sideScrollbarThumb.y; // get the distance from our mouse's y position to our sideScrollbarThumb's y position so it does not jump when we click
}
function sideScrollbarThumbUp(event:MouseEvent):void
{
sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
sideScrollbarThumb.gotoAndStop("over"); // when our mouse is down we want the scrubber thumb to be down too
Tweener.addTween(container_mc, {_Blur_blurY:0, time:1, transition:"easeOut"}); // remove the blur from the container_mc
stage.removeEventListener(MouseEvent.MOUSE_MOVE, sideScrollbarThumbMove); // remove the listener for when we move our mouse
}
function sideScrollbarThumbMove(event:MouseEvent):void
{
sideScrollbarThumb.y = mouseY - yOffset; // use the variables above to make the mouse not jump
if(sideScrollbarThumb.y <= yMin) // if the sideScrollbarThumb's y position is less than the yMin variable then...
{
sideScrollbarThumb.y = yMin; // only let the sidScrollbarThumb move to the yMin
}
if(sideScrollbarThumb.y >= yMax) // if the sideScrollbarThumb's y position is greater then the yMax variable then...
{
sideScrollbarThumb.y = yMax; // only let the sideScrollbarThumb move to the yMax
}
sideScrollThumbDif = sideScrollbarThumb.y / yMax; // divide the sideScrollbarThumbs y position by the yMax variable to be use when we move the container_mc
Tweener.addTween(container_mc, {y:((-sideScrollThumbDif * (container_mc.height - sideScrollbarMasker.height)) + 58), _Blur_blurY:5, time:1, transition:"easeOut"}); // move and blur the container_mc and blur it for a nice effect
event.updateAfterEvent(); // update the event after it runs for a smoother animation.
}
This is not all we need to do, we need to change the checkContainerHeight function.
Step 23: checkContainerHeight Function
We need to change the way our checkContainerHeight function works by adding some code. Your checkContainerHeight function should look like this (commented code is what I added):
function checkContainerHeight():void
{
if(container_mc.height > sideScrollbarMasker.height)
{
linkSideScroller(); // add a listener to check for the linked side scrollbar
sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown); // add the mouse down listener for the sideScrollbarThumb
stage.addEventListener(MouseEvent.MOUSE_UP, sideScrollbarThumbUp); // add the mouse up listener for the sideScrollbar thumb
sideScrollbarThumb.visible = true;
sideScrollbarThumb.alpha = 0;
Tweener.addTween(sideScrollbarThumb, {alpha:1, time:.5, transition:"easeOut"});
}
else
{
sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown); // remove the listener for the mouse down
stage.removeEventListener(MouseEvent.MOUSE_UP, sideScrollbarThumbUp); // remove the listener for the mouse up
Tweener.addTween(sideScrollbarThumb, {alpha:0, time:.5, transition:"easeOut", onComplete:hideSideScrollbarThumb});
}
}
Test your movie now. Your scrubber should appear and disappear depending on what gallery you are on. If the scrubber is visible you should be able to scrub the videos with the scrubber on the right!
Step 24: Selecting Categories
Now we are ready to actually select a category and load the videos within that category. Let's start off by adding a new variable and a new listener called clearForVideoItem. The listener needs to be placed in the makeGalleryItems function inside the for loop after we set the categoryItem btnOver and btnOut listeners.
var categoryItemName:String; // set a variable to hold the name of the categoryItem categoryItem.addEventListener(MouseEvent.CLICK, clearForVideoItems);
Here we added a variable to hold the name of the category item we select and we add a listener for when we click on that item.
Step 25: clearForVideoItems Function
Let's add a function that clears our sidebarBox and sets our categoryItemName variable.
function clearForVideoItems(event:MouseEvent):void
{
categoryItemName = event.target.name; // targets the current categoryItem's name and assigns it to the categoryItemName variable
Tweener.addTween(container_mc, {alpha:0, time:.5, transition:"easeOut", onComplete:removeCategoryItemsForVideoItems}); // tween off the container_mc and run a funtion ro remove it
}
function removeCategoryItemsForVideoItems():void
{
sidebarBox.removeChild(container_mc); // remove the container_mc from the sidebarBox
makeVideoItems(); // run a function to make the video items
}
Step 26: Video Item Thumbs
Add these variables to the bottom of our variables list:
var videoItemName:String; // set up to hold the video items name in a variable var columns:Number = 2; // set how many columns we want the video's to be loaded in var xCount:Number; // variable to count the x number var yCount:Number; // variable to count the y number var a:Number = 0; // used to count in the loop var videoThumbLoader:Loader; // new loader for the video thumbnails
Step 27: makeVideoItems Function
Let's add the function that starts to pull the videoItem_mc movieclip's out of the library and places them on the stage in a tile effect.
function makeVideoItems():void
{
xCount = 0; // set the xCount variable to 0
yCount = 0; // set the yCount variable to 0
container_mc = new MovieClip(); // create a new container_mc
container_mc.x = 2; // set its x position in the sidebar
container_mc.y = 60; // set its y position in the sidebar
sidebarBox.addChild(container_mc); // add the container_mc to the sidebarBox
}
So here we set up a couple of things to make this tile effect work and we added an empty container_mc to the stage inside the sidebarBox movieClip.
Step 28: Tile Effect
This part is similar to what we did when we added the categoryItems in the beginning of this tutorial. The tricky part is getting them to lay out in a grid-like fashion. Add this code to the makeVideoItems function we just wrote.
Editor's note: Sorry folks, the syntax highlighter is up to its old tricks in Firefox again.. If you'd like to see the code which should have been displayed, here it is..
Your final makeVideoItems function should look like this:
Editor's note: And that applies to the complete function too of course..
Step 29: checkContainerHeight Function
Now let's add a function that is called videoThumbLoaded. This will turn the alpha of the videoPreloader to 0 after the video thumbnail loads.
function videoThumbLoaded(event:Event):void
{
videoThumbLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, videoThumbLoaded);
var videoPreloader = event.target.loader.parent.videoItemPreloader_mc;
Tweener.addTween(videoPreloader, {alpha:0, time:1.5, transition:"easeOut"});
}
Go ahead and test your file. You will have the videos loading and the preloaders alpha quickly tweened to 0. For the full effect you will have to upload your file to the web so it can actually download.
Step 30: Selecting Videos
Now we are ready to select one of the video thumbnails. We'll start by locating our ns.play line and deleting it.
After that is done we need to add a listener in the createVideoItem function just below the videoItem btnOver and btnOut listeners.
videoItem.addEventListener(MouseEvent.CLICK, videoItemClick);
Now let's add the videoItemClick function.
function videoItemClick(event:MouseEvent):void
{
videoItemName = event.target.name; // set the videoItemName variable to the current targets name
currentVideo = xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM[videoItemName].file_path; // set the current video variable to the video in the xml
videoTitleTxt.text = xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM[videoItemName].file_title; // set the videoTitleTxt field to the name of the current video
ns.play(currentVideo); // add the ns.play line back and play the currentVideo variable
}
Now test your movie. You should have the file open with no video playing, navigate to a video and and give it a click. Bam! Video plays :)
Conclusion
That's it for part 2! We sorted a lot of cool functionality in this chapter. We now have the videos loading in with thumbnails and some scrollbars working. Good, We're really close to finishing up this file. Just a couple of additions in the next part, like adding the current time played to the player, scaling the video to fit the window correctly, getting the home button to work, and getting that featured item playlist working.
I hope you learned something in this tutorial and are ready to move on to part 3!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
