Here is a small tutorial on making a scroll bar to navigate through your movie. Its simple, but useful. And somebody just asked how to do it, so i figured i would make a tut on it. Overkill on the help, but meh.
So, in order to make the scroll bar, your movie has to meet criteria. It has no scenes, and is completely comprised of graphic symbols. I dont think i need the explain the scene thing, but the graphics symbols i may. So. Here is what you need to do.
Using Graphics
When you go to make a movieclip, instead of selecting movieclip, you are going to select graphic. They work the same as a movieclips except for the fact that they are unable to support any kind of action script and the way that they play. Now, when you have the movieclip made, you will need to go into its propertiesand around the middle, there is a drop down menu. make sure that it is on either loop, or play once, making sure its not on Single Frame.
The reason we use graphics is because they play different then a movieclip. First off, they will not play if the main timeline is not. Or any other timeline above them. And they display thier animation within the fla while you are animation, unlike movieclips that just display the first frame. We need to use these for the scroll bar. Every animated symbol needs to meet these criteria.
Now that we have that done, lets look at the actual scroll bar.
First make your scroll bar movieclip. Make it however big long you want, does not matter. Give it the instance name of "scrollbar". And make sure that the registration point is in the middle going down, and to the right side.
If you dont know what a registration point is, it is represented by a small circle with lines going through it when you have a movieclip selected. It starts off in the top right corner when you first make a movieclip. To change its position, you need to go inside of the movieclip, and drag that scroll bar artwork around until the circle is where you want it.
Now, make the scrollable...thing. Lets call it a Tab. We will not be needing an instanc name for the Tab movieclip. So dont bother.
Now for the code. All the code will be on the Tab movieclip.We will start off by defining our variables, which will be needed for this code.
onClipEvent (load) {
_y = _root.scrollbar._y;
var drag = false;
var barLength:Number = 525.0;
var totalFrames:Number = 340;
var currentFrame:Number = 0;
var ratio:Number = barLength/totalFrames;
var xMin = _root.scrollbar._x;
var xMax = _root.scrollbar._x+barLength;
}
Now for the rundown on what each one does. The first part just sets the Tab to the same level as the scroll bar. The "drag" variable is used to define whether we are being dragged by the mouse or not. The "barLength" variable will be the length of your scroll bar. To get this length, click on the scroll bar, and do into its properties. It will tell you ths dimensions at the right side. Then "totalFrames" is exacly what it sounds like, the total number of frames in your movie. Not including menus and such. Only the scrollable portion of your movie. Then there is "currentFrame" which will simply define the frame we are on at the moment. "Ratio" is simply the ratio between how long your scroll bar is, and how many frames represented by the scroll bar. The final number will represent how many pixels 1 frame of the movie extends. "xMax" and "xMin" will be used to define the edges of the scroll bar and stop it from going outside of these boundries.
Now that code is finished. Now more.
on (press) {
drag = true;
}
That is just making "drag" true when you click on the Tab.
The rest of the code lies within an event handler.
onMouseUp = function () {
drag = false;
_root.play();
};
This code makes "drag" false and contrinues playing the movie after we have let go of the mouse. Simple enough.
if (drag) {
if ((_root._xmouse>xMin) && (_root._xmouse<xMax)) {
_x = _root._xmouse;
}
if (_root._xmouse<xMin) {
_x = xMin;
}
if (_root._xmouse>xMax) {
_x = xMax;
}
All of this codes moves the Tab when it is being drug. The first portion makes its X position equal to the mouse'x X position if it is within the xMax and xMin boundries. The next two portions limit the Tab to the boundired. If the tab happens to be further along then xMax alows, then its X positon will become xMax, in other words the end of the scroll Bar. Same goes for xMin.
currentFrame = Math.round((_x/barLength)*totalFrames);
_root.gotoAndStop(currentFrame);
These codes lie within the if (drag) { code, so that it will only be going through is you are being drug. Now. These are the codes that actually move your movie around when you are dragging the Tab. So, in order to figure out what frame you should be on according to where the Tab is on the bar, you first find the ratio between the tabs X and the and of the bar. It acts as a percentage, if it were all the way, it would be 100, if it were half way, it would be 50. Except in this case, you are not multiplaying by 100, so it the actual ratio ends up being 1 if its all the way and 0.5 if its half way. Now, you take that ratio, and multiplay it by the total number of frames. That will give you the number of frames represented by the ratio. As in, if the ratio is 0.5 (half way across the scroll bar), and the number of frames is 300, then you multiply those, giving you 150.
if (drag) {
}else{
_x = ((ratio)*currentFrame)+_root.scrollbar._x;
currentFrame++;
}
What this is saying is, if drag is false (the movie is playing), then add 1 to current every frame, which will keep tabs on what frame you are on. Again, you take the ratio of how many pixels represent how many frames, and multiply it by how many frames along the animation you are, and you get how far across the bar the Tab should be.
That is all the explaination. Here is the full code with small explainations:
onClipEvent (load) {
_y = _root.scrollbar._y;
//position tab to the bar.
var drag = false;
//represents when we are dragging the Tab or not.
var barLength:Number = 525.0;
//the pixel length of the scroll bar.
var totalFrames:Number = 340;
//the total number of scrollable frames there are.
var currentFrame:Number = 0;
//represents what frame you are on at the moment
var ratio:Number = barLength/totalFrames;
//ratio that represents how many pixels stand for how many frames.
var xMin = _root.scrollbar._x;
//represents the minumum that the Tab can go.
var xMax = _root.scrollbar._x+barLength;
//represents the maximum the Tab can go.
}
on (press) {
drag = true;
}
onClipEvent (enterFrame) {
onMouseUp = function () {
//if your mouse goes up, therefore not holding the Tab anymore
//then make drag false and play the main movie.
drag = false;
_root.play();
};
if (drag) {
//if drag is true and the Tab is within Min and Max,
//then let it follow the mouse.
if ((_root._xmouse>xMin) && (_root._xmouse<xMax)) {
_x = _root._xmouse;
}
//if the mouse is below the min, then keep the tab at
//the Minimum level.
if (_root._xmouse<xMin) {
_x = xMin;
}
//if the mouse is above the max, then keep the tab at
//the maximum level.
if (_root._xmouse>xMax) {
_x = xMax;
}
//this code finds out what frame you dragged to.
currentFrame = Math.round((_x/barLength)*totalFrames);
_root.gotoAndStop(currentFrame);
} else {
//if you are not dragging, then move the Tab to
//the correct place and keep moving foreward along
//with the movie.
_x = ((ratio)*currentFrame)+_root.scrollbar._x;
//keep adding to current frame, because the movie is playing.
currentFrame++;
}
}
Here is the example file.
Well, im running out word count, so im guessing i explained well enough. If not, then...ask i guess.
