Menu Builder: Code

[truimagz]

Hi guys, well now that I got my hosting prototype out I am adding in alot of cool options.

Excited? well you'll have to wait....

But in the meantime I figure I'll open source some usefull code I write as I go.


This bit of code here is great for menu making.

All you need to do is create a movieClip (this will be your "menu tab") then place a text field in it, name it "title", and then just place as many of them around as you want, giving each one a name of "tab0" "tab1" "tab2" ect.

Now you could attach them dynamically withing the first for loop here, But I didnt see the point for my project.

Now once you do that you just type in the array, what your page names are, then how many pages you have, and your done.

This will create some cool rollover effects and keep track of your current page, as well as pass it to the buildPage function were you can then create all your build page stuff.


/* BEGIN APPLICATION */
this.attachMovie("panel","panel",0);



/* -- TABS -- */
/* TAB VARIABLES */
var tabTotal:Number = 5;
var tabTitleArray:Array = new Array();
tabTitleArray[0] = "Upload";
tabTitleArray[1] = "My Folder";
tabTitleArray[2] = "My Shared Files";
tabTitleArray[3] = "Videos";
tabTitleArray[4] = "Community Folder";
var tabDim:Number = 10;
var selectedTab:Number;
/* CREATE TABS */
for (var i:Number = 0; i<tabTotal; i++) {
this.panel["tab"+i].titleName = tabTitleArray[i];
this.panel["tab"+i].title.htmlText = "<b>"+tabTitleArray[i]+"</b>";
}
/*TAB FUNCTIONS */
for (var i:Number = 0; i<tabTotal; i++) {
this.panel["tab"+i].tabNumber = i;
this.panel["tab"+i].onRollOver = function() {
tabEffect(this.tabNumber);
};
this.panel["tab"+i].onPress = function() {
selectedTab = this.tabNumber;
tabEffect(this.tabNumber);
buildPage(this.titleName);
};
this.panel["tab"+i].onRollOut = function() {
tabEffect(selectedTab);
};
}
/* TAB EFFECTS */
function tabEffect(overTab:Number) {
for (var i:Number = 0; i<tabTotal; i++) {
this.panel["tab"+i]._alpha = 100;
this.panel["tab"+i].title.htmlText = "<font color='#333333'>"+this.panel["tab"+i].titleName+"</font>";
}
this.panel["tab"+overTab].title.htmlText = "<font color='#999999'>"+this.panel["tab"+overTab].titleName+"</font>";
var j:Number = 0;
for (var i:Number = overTab+1; i<tabTotal; i++) {
j++;
this.panel["tab"+i]._alpha -= tabDim*j;
}
var j:Number = 0;
for (var i:Number = overTab-1; i>-1; i--) {
j++;
this.panel["tab"+i]._alpha -= tabDim*j;
}
this.panel["tab"+selectedTab].title.htmlText = "<font color='#996633'>"+this.panel["tab"+selectedTab].titleName+"</font>";
this.panel["tab"+selectedTab]._alpha = 100;
this.panel["tab"+selectedTab].applyFilter(tabGlow);
}



/* BUILD PAGE */
function buildPage(page) {
switch (page) {
case "Upload" :
trace(page);
break;
case "My Folder" :
trace(page);
break;
case "My Shared Files" :
trace(page);
break;
case "Videos" :
trace(page);
break;
case "Community Folder" :
trace(page);
break;

}
}


The rollover effects are pretty cool, along with the selected effect. try this out on some tabs of your own and you'll see what it does.

[truimagz]

Ok I improved the menu tab effects by using the Tween class

Much softer transition now.

/* TAB EFFECTS */
function tabEffect(overTab:Number) {
this.panel["tab"+overTab].title.htmlText = "<font color='#999999'>"+this.panel["tab"+overTab].titleName+"</font>";
this.panel["tab"+overTab].alphaNumber = this.panel["tab"+overTab]._alpha;
var tabTween:Tween = new Tween(this.panel["tab"+overTab], "_alpha", mx.transitions.easing.None.easeIn, this.panel["tab"+overTab].alphaNumber, 100, .5, true);
this.panel["tab"+selectedTab].title.htmlText = "<font color='#996633'>"+this.panel["tab"+selectedTab].titleName+"</font>";
this.panel["tab"+selectedTab]._alpha = 100;
var j:Number = 0;
for (var i:Number = overTab+1; i<tabTotal; i++) {
j++;
if (i != selectedTab) {
this.panel["tab"+i].title.htmlText = "<font color='#333333'>"+this.panel["tab"+i].titleName+"</font>";
this.panel["tab"+i].alphaNumber = this.panel["tab"+i]._alpha;
var tabTween:Tween = new Tween(this.panel["tab"+i], "_alpha", mx.transitions.easing.None.easeOut, this.panel["tab"+i].alphaNumber, 100-tabDim*j, .5, true);
}
}
var j:Number = 0;
for (var i:Number = overTab-1; i>-1; i--) {
j++;
if (i != selectedTab) {
this.panel["tab"+i].title.htmlText = "<font color='#333333'>"+this.panel["tab"+i].titleName+"</font>";
this.panel["tab"+i].alphaNumber = this.panel["tab"+i]._alpha;
var tabTween:Tween = new Tween(this.panel["tab"+i], "_alpha", mx.transitions.easing.None.easeOut, this.panel["tab"+i].alphaNumber, 100-tabDim*j, .5, true);
}
}
}

[Woolfenstien]

Can we have a .swf preview? :3

[truimagz]

Ok.

Here is a preview.

mouse over the tabs, youll see that the further away the other tabs are the darker they get, and if you mouse over a middle tab it still does the same thing, left to right they get darker based on which tab yor moused over.

Also if you click a tab youll see that the tabs still do the same thing but they ignore the selected tab, the selected tab stays white

http://www.creativededication.com/hosting/upload.html

[Insane Knux]

Dang truigmagz, nice work here.
Very stylish menu. :cool:
So this will be the new Creative Dedication Hosting menu?

[truimagz]

yes, I am doing a few new things with it.

#1, you will now have your own personal folder right off the bat. Meaning no more worry of your files being overwritten

#2, you can still upload to the community folder

#3 everyone can view and download all files in the community folder, makes it extremely easy for users to share files with other users....see where I am going with this? (muhahah)

#4 you can now upload .flv files and view all current flv files in the video section, these files will be tied into the FULLSCREEN VIDEO player I have up now, so there will now be a users video section, this is just for fun.

#5 only the original uploader of videos or files in the community folder will be able to update/overwrite that file.

[Insane Knux]

yes, I am doing a few new things with it.

#1, you will now have your own personal folder right off the bat. Meaning no more worry of your files being overwritten

#2, you can still upload to the community folder

#3 everyone can view and download all files in the community folder, makes it extremely easy for users to share files with other users....see where I am going with this? (muhahah)

#4 you can now upload .flv files and view all current flv files in the video section, these files will be tied into the FULLSCREEN VIDEO player I have up now, so there will now be a users video section, this is just for fun.

#5 only the original uploader of videos or files in the community folder will be able to update/overwrite that file.
Those are the three features that I am most looking forward to.
For the user video thing, you might want to make sub-folders with the user's name, because if a lot of videos are uploaded we might not find our favorites.