I am trying to think of a way to repay you… I know… you male between 18 and 22 if i recall… I work at a nightclub with some really good looking girls… want some of the pictures form this to smile at:)
what is i?
<B>NOTE:</B> For everything in my File I set the registration point to the Upper-Left hand corner. Please do the same JUST IN CASE
<B>Step 1)</B> Create a button symbol. The button symbol in my movie is 186x20 pixels Give this button an instance name of “actualButton” (no quotes)… I used a button symbol here because it makes for an easy rollOver color change.
<B>Step 2)</B> Select your button symbol, and now convert it to a movie clip symbol. (so that your button symbol will now be inside the newly created movie clip symbol). I first gave this movie clip symbol the instance name of “dynamicButton” (no quotes). Then I double clicked it to open it for editing. I created a layer ABOVE the layer with my button symbol in it. In this newly created layer I created a dyanmic textbox and gave it the INSTANCE name (not var name) of “menuLabel” (no quotes).
<B>Step 3)</B> Alright, now that you did all that, return to the timeline that cotnains your “dynamicButton” movie clip symbol. Now we are going to make this into ANOTHER movie clip symbol :beam: This time we will give the symbol the instance name of “container” (no quotes). Now that is it for this. This will now become the clip we duplicate to create the buttons for our menu.
<B>Step 4)</B> Alrighty, so now we create our clip to house the button/textfield and duplicated menu (aka “container”). Now we will create the mask. In my example all I did was create a 186x200 px grey block, then I converted that to a movie clip symbol and gave it the instance name “mask” (no quotes). The I positioned it in a layer ABOVE my “container” clip so that the top of the mask and the container clip were evenly lined up. Now you will have to actually create the mask by right clicking on the layer title (not on the timeline/frames area, but where the title of the layer is) that has your mask, and choose “Mask” so it will mask the clip in the layer underneith (which should be your container clip).
<B>Step 5)</B> Alright, so we have the container clip that contains the movie clip we will duplicate, the textfield, and the button. Then we completed the mask. Whats next whats next… Oh yeah… the buttons You should already know how to make a button… if not, then shame on you. Now in this case we can use either Movie Clips as buttons or Button Symbols as buttons… the choice is yours, but the methods in the end are a tad bit different (will explain this when I get to it).
Alright, thats it for actual ITEMS on the stage…
Coming up… actions… :bad:
k 100% absobed so far
[AS]var menuItems = [“Item 1”, “Item 2”, “Item 3”, “Item 4”, “Item 5”, “Item 6”, “Item 7”, “Item 8”, “Item 9”, “Item 10”, “Item 11”, “Item 12”, “Item 13”, “Item 14”, “Item 15”, “Item 16”, “Item 17”, “Item 18”, “Item 19”, “Item 20”];
var movieList = [“Item1.swf”, “Item2.swf”, “Item3.swf”, “Item4.swf”, “Item5.swf”, “Item6.swf”, “Item7.swf”, “Item8.swf”, “Item9.swf”, “Item10.swf”, “Item11.swf”, “Item12.swf”, “Item13.swf”, “Item14.swf”, “Item15.swf”, “Item16.swf”, “Item17.swf”, “Item18.swf”, “Item19.swf”, “Item20.swf”];[/AS]
These are the arrays that house the information for your buttons. The menuItems array contains the actual labels that will be displayed on your button. The movieList array stores all the names of your movies that you want to load into Flash and these will be called upon by the loadMovie() action that will be applied to your button. These items MUST be in the order you want them to load in (aka button1s movie to load must come first, then button2s movie to load must come second, etc, etc).
[AS]for (i=0; i<menuItems.length; i++) {
mc = container.dynamicButton.duplicateMovieClip(“button”+i, i);
mc.menuLabel.text = menuItems*;
mc._y = i*(mc._height-1);
mc.movieToLoad = movieList*;
mc.actualButton.onPress = function() {
_root.clipToLoadTo.loadMovie(this._parent.movieToLoad);
};
}[/AS]
What this does is creates a for loop that we will use to duplicate our buttons and apply the actions. As you see, I first created a variable called “i” (standard variable to use in any programming language) and I set its default value to 0. Since arrays start counting at 0 (item1 being at place 0), we had to do this. Then what this does is checks if the variable “i” is less than the length (amount of items) of the menuItems array. It will return a boolean value of true or false. If it returns true, then it will pull an i++ (which is like saying i = i+1).
Inside the actual for loop is where the real action takes place. What this does is looks for the “container” clip, then inside that clip it looks for the “dynamicButton” clip and it duplicates it. After the clip gets duplicated it looks for the “menuLabel” textbox inside the duplicated clip, then it gives it the proper label from the array according to the value of “i” at that point of the loop. Ok, so the label gets assigned and it moves to the next line, where it will now reposition the new button on the _y axis according to the _height of the button clip (had to subtract 1 otherwise the border on the buttons created a double thick line… didn’t look too hot).
So label set, position set, now it will dynamically assign a variable to the newly duplicated clip. This variale is called “movieToLoad”, and it will pull the information out of the movieList array the same as the label did. The script then assigns an onPress command for your button inside the duplicated clip. The onPress command will use the value of the movieToLoad variable to be the parameter within the loadMovie command (as you see, I assume there is a clip on the _root timeline with the instance name “clipToLoadTo” that you will be loading your movies to).
Thats pretty much all there is to that.
Now that the buttons are created, lets move on to the scrolling code.
[AS]var speed = 20;
var scrollUpMax = mask._x;
var scrollDownMax = (mask._x-container._height)+mask._height+1;[/AS]
Well these are the variables use within our scrolling script. The speed is set to 20 since that was the height of our buttons, it would make for smooth clicking. The scrollUpMax sets the maximum distance you can scroll up, this will ALWAYS be at the top of the mask area, so since our registration points were all set to the top left, all we have to do is get the _x position of the mask clip for this. The scrollDownMax distance was a bit more difficult though. First we take the mask._x position, then subtract the height of the container clip (which will give us the height of ALL the button items added together), that will allow us to scroll so that the last button can scroll out of the top of mask. We don’t want any of our buttons to scroll out of the mask so nothing is left though. So we have to take the _height property of the mask clip and ADD it onto the value we got from the mask.-X-container._height. This makes it so that the last button will stay at the BOTTOM of the mask The +1 is just a fluky thing, it was like 1 pixel short of the bottom, it bothered me, so I added one pixel to it
[AS]MovieClip.prototype.scrollUp = function() {
container.onEnterFrame = function() {
this._y += speed;
if (this._y>=scrollUpMax) {
this._y = scrollUpMax;
delete this.onEnterFrame;
}
};
};[/AS]
Alright, I am not up for getting into prototypes right now, but I learned everything about them from here…
http://www.kirupa.com/developer/actionscript/tricks/prototypes.asp
So theres nothing I can tell you that you can find there (ok… there are some things, but what you need to know now can be found there).
Same goes with dynamic event handlers…
http://www.kirupa.com/developer/actionscript/tricks/dynamicevent.asp
Well I created the scrollUp prototype function. And inside that function I used an onEnterFrame dynamic event handler. This of course acts as an onClipEvent(enterFrame). As you see I attached that onEnterFrame to our container clip. This is because all the actions we will be using involve the container clip, so instead of writing container._y, container.something, blah blah, we can just use “this”.
onEnterFrame out of the way, what we do in here is what makes this tick. As long as the button is pressed, we want this clip to travel DOWN (since when scrolling, the up button actually moves the clip down) the _y axis. Thats where this._y += speed comes in. It gradually movies the clip down the _y axis at the rate we set for the speed variable. Then once the _y position is greater than or equal to the scrollUpMax variable, it then keeps it at that position, and deletes the onEnterFrame so that the clip will stop trying to scroll.
[AS]MovieClip.prototype.scrollDown = function() {
container.onEnterFrame = function() {
this._y -= speed;
if (this._y<=scrollDownMax) {
this._y = scrollDownMax;
delete this.onEnterFrame;
}
};
};[/AS]
Well… same thing as the scrollUp function… just in reverse and using the scrollDownMax variable
Now here is where it gets different on if you used movie clips for buttons… or button symbols for buttons…
<B>IF MOVIE CLIP SYMBOLS FOR BUTTONS…</B> apply these actions under the other actions in your frame…
[AS]up.onPress = scrollUp;
down.onPress = scrollDown;
up.onRelease = down.onRelease=function () {
delete container.onEnterFrame;
};[/AS]
This assumes your up button has the instance name of “up” and your down button has an instance name of “down”.
What this says is that when up is pressed, run the scrollUp function, and when down is pressed, run the scrollDown function.
Then when either of the buttons are released, it will delete the containers onEnterFrame dynamic event handler so that it will stop scrolling.
<B>IF BUTTON SYMBOLS FOR BUTTONS…</B> apply these actions to your buttons directly…
<I>UP BUTTON</I>
[AS]on (press) {
scrollUp();
}
on (release) {
delete container.onEnterFrame;
}[/AS]
<I>DOWN BUTTON</I>
[AS]on (press) {
scrollDown();
}
on (release) {
delete container.onEnterFrame;
}[/AS]
It does the same thing as the movie clip for button code, but it uses it in standard on handler form for the button clips instead of dynamic event handlers.
ALTHOUGH IF YOU WANTED… you could assign your button symbols instance names of “up” and “down” and use the same exact code as the movie clips for buttons uses instead of using the standard on handlers
Alright, I think that is all… any questions… just ask
*Originally posted by zephn *
**then this is absolutly marvolous… I understnad why they say guru. I await your exaplnation**
Trust me, I am no guru, if I were a guru, then the future of Flash is screwed :-\
*Originally posted by zephn *
**I am trying to think of a way to repay you… I know… you male between 18 and 22 if i recall… I work at a nightclub with some really good looking girls… want some of the pictures form this to smile at:) **
LOL, no thanks man. I am here to help.
Oh yeah, so the final code looks something like this…
[AS]var menuItems = [“Item 1”, “Item 2”, “Item 3”, “Item 4”, “Item 5”, “Item 6”, “Item 7”, “Item 8”, “Item 9”, “Item 10”, “Item 11”, “Item 12”, “Item 13”, “Item 14”, “Item 15”, “Item 16”, “Item 17”, “Item 18”, “Item 19”, “Item 20”];
var movieList = [“Item1.swf”, “Item2.swf”, “Item3.swf”, “Item4.swf”, “Item5.swf”, “Item6.swf”, “Item7.swf”, “Item8.swf”, “Item9.swf”, “Item10.swf”, “Item11.swf”, “Item12.swf”, “Item13.swf”, “Item14.swf”, “Item15.swf”, “Item16.swf”, “Item17.swf”, “Item18.swf”, “Item19.swf”, “Item20.swf”];
for (i=0; i<menuItems.length; i++) {
mc = container.dynamicButton.duplicateMovieClip(“button”+i, i);
mc.menuLabel.text = menuItems*;
mc._y = i*(mc._height-1);
mc.movieToLoad = movieList*;
mc.actualButton.onPress = function() {
_root.clipToLoadTo.loadMovie(this._parent.movieToLoad);
};
}
var speed = 20;
var scrollUpMax = mask._x;
var scrollDownMax = (mask._x-container._height)+mask._height+1;
MovieClip.prototype.scrollUp = function() {
container.onEnterFrame = function() {
this._y += speed;
if (this._y>=scrollUpMax) {
this._y = scrollUpMax;
delete this.onEnterFrame;
}
};
};
MovieClip.prototype.scrollDown = function() {
container.onEnterFrame = function() {
this._y -= speed;
if (this._y<=scrollDownMax) {
this._y = scrollDownMax;
delete this.onEnterFrame;
}
};
};
up.onPress = scrollUp;
down.onPress = scrollDown;
up.onRelease = down.onRelease=function () {
delete container.onEnterFrame;
};[/AS]
lost in beta… you have saved my life… thank you and I will tink of some way to repay you… I am applying this as we speak… it makes so much sence now
post in the arrays can I hit return after the comma?
Yeah, you can, makes it easier to read. Just if you hit the “Auto Format” button it will put them all on one line again, so be careful…lol.
thanks… and if you are bored go to www.thisislondonclub.com/BRAZILEIROPICS
for (i=0; i<menuItems.length; i++) {
mc = container.dynamicButton.duplicateMovieClip(“button”+i, i);
mc.menuLabel.text = menuItems*;
mc._y = i*(mc._height-1);
mc.movieToLoad = movieList*;
mc.actualButton.onPress = function() {
_root.clipToLoadTo.loadMovie(this._parent.movieToLoad);
based on the original source you sent me is it supposed to be button or actual button in this script?
if i wanted to load this movie into the empty movie clip witht he instance name pictures would i do this?
mc.actualButton.onPress = function() {
_root.clipToLoadTo.loadMovie(“this._parent.movieToLoad”, “pictures”);
or would i add the , “picture” in the array at the top?
duh me cliptoloadto… took me a while to see it. Thanks again lost in beta
Originally posted by zephn *
for (i=0; i<menuItems.length; i++) {
mc = container.dynamicButton.duplicateMovieClip(“button”+i, i);
mc.menuLabel.text = menuItems;
mc._y = i(mc._height-1);
mc.movieToLoad = movieList;
mc.actualButton.onPress = function() {
_root.clipToLoadTo.loadMovie(this._parent.movieToLoad);
based on the original source you sent me is it supposed to be button or actual button in this script? **
It can be a movie clip button or a button symbol button. As long as it has the instance name “actualButton”, it will work. If you change the instance name, don’t forget to change it in the script
Have fun with this man I know I did :beam: