Re-shuffling menu (clicked item slides to top...)

[3stripe]

Hi folks 

Inspired by some of the examples at http://laco.wz.cz/tween/, I'm trying to build a reshuffling menu... Whichever item you click slides to the top, and the previously selected item to the bottom, with the rest of the items in the list moving up one to fill in the gaps.

I've coded a quick example of what would happen when you clicked nav item 2, but I now need to turn this into a re-usable function.

Should I be making better use of an array to keep track of what position each item is at?

Or has someone done this type of thing before?

// intialise
selectedButton = "nav1";
transitionLength = 0.3;
transitionType = "easeOutQuad";
xposition = 548;
// click functions
k = 0;
nav2.onRelease = function() {
   // fade out top button
   fadeOut = eval(selectedButton);
   fadeOut.alphaTo(0, transitionLength, "easeOutQuad", 0, moveClickedToBottom);
   // slide clicked button to top
   this.slideTo(xposition, 268);
   // move other buttons up
   nav3.slideTo(xposition, 281);
   nav4.slideTo(xposition, 296);
   nav5.slideTo(xposition,311);
   nav6.slideTo(xposition, 326);
   // move click button to bottom;
   function moveClickedToBottom() {
      nav1.slideTo(xposition, 341, transitionLength, transitionType, transitionLength);
      nav1.alphaTo(100, transitionLength, transitionType, transitionLength);
      ssp.loadAlbum("yachts");
   }
   delete this.onRelease;
};

Cheers 3stripe

[Jorge Solis]

The idea should be something like this when pressing any button:

- If I'm below clicked item, should move one position up (one position is the heigth of an item plus an offset)
- If I'm over clicked item nothing except if I'm the last selected
- If I'm the clicked item, should let know all of the rest of the items and move to the top position
- If I'm the last selected item (say myFlag is set to true) should move to the botton position

Begin with a top and botton fixed position (and of course a fixed number of items) When you can manage a fixed quantity, then you can try with a variable one

Jorge

[3stripe]

Thanks for the logic Jorge, very helpful as usual 

[3stripe]

I'm getting there - it works perfectly on the first click.... then it starts going wrong:

// ATTACH BUTTONS
this.attachMovie("nav_a", "nav0", 1, {_x:548, _y:268});
this.attachMovie("nav_b", "nav1", 2, {_x:548, _y:281});
this.attachMovie("nav_c, "nav2", 3, {_x:548, _y:296});
this.attachMovie("nav_d", "nav3", 4, {_x:548, _y:311});
this.attachMovie("nav_e", "nav4", 5, {_x:548, _y:326});
this.attachMovie("nav_f", "nav5", 6, {_x:548, _y:341});
//
// STARTUP VARIABLES
selectedButton = "0";
transitionLength = 0.3;
transitionType = "easeOutQuad";
xposition = 548;
yoffset = 268;
//
// BUILD ARRAY
var portfolioNav = new Array("_level0.portfolio.nav0", "_level0.portfolio.nav1", "_level0.portfolio.nav2", "_level0.portfolio.nav3", "_level0.portfolio.nav4", "_level0.portfolio.nav5");
//
// CLICK FUNCTIONS
for (var i:Number = 0; i<portfolioNav.length; i++) {

var c = eval(portfolioNav[i]);

c.onRelease = function() {

clicked = this._name;

var clicked:String = new String(this._name);

var clickedPosition:String = new String();

_root.clickedPosition = clicked.substr(3, 1);

trace("you clicked on the item at position "+_root.clickedPosition);

// SHUFFLE MENU

shuffleNav();

};
}
//
// SHUFFLE FUNCTION
k = 0;
function shuffleNav() {

for (var i:Number = 0; i<portfolioNav.length; i++) {

// find out which item is being checked

var itemToCheck:String = "_level0.portfolio.nav"+k;

// find out position of this item in the portfolioNav array

var myPosition:Number = portfolioNav.getIndex(itemToCheck);

var clickedPositionNumber:Number = _root.clickedPosition;

// MOVE THE CLICKED ITEM;

var c = eval(clicked);

c.slideTo(xposition, 268, transitionLength, transitionType);

// MOVE THE TOP ITEM;

var d = eval(portfolioNav[selectedButton]);

d.slideTo(xposition, 341, transitionLength, transitionType);

// IF I'M BELOW THE CLICKED ITEM

if (myPosition>_root.clickedPosition) {

// move up one position in the list

trace("NOTE: "+itemToCheck+" is underneath the item you just clicked ("+clicked+")");

var e = eval(portfolioNav[i]);

e.slideTo(xposition, e._y-15, transitionLength, transitionType);

}

k++;

}

// NOW MENU HAS RE-ORDERED, REORDER ARRAY TO MATCH!

reorderMenu();
}
// REORDER ARRAY FUNCTION
function reorderMenu() {

// REORDER THE ARRAY TO MATCH ACTUAL MOVEMENTS

// Send first item to end

portfolioNav.push(portfolioNav[0]);

// Delete first item as it now exists at end

portfolioNav.shift();

// Send clicked item to start of array as it is now at the top

portfolioNav.unshift("_level0.portfolio."+clicked);

// Delete clicked item from previous position in the array

portfolioNav.splice(_root.clickedPosition, 1);

trace(portfolioNav);

// FINALLY SET CLICKED BUTTON!

selectedButton = _root.clickedPosition;

trace("new selectedButton ="+selectedButton);
}
//
//
// FIND POSITION IN ARRAY
Array.prototype.getIndex = function(data) {

for (i=0; i<this.length; ++i) {

if (this[i] == data) {

return i;

}

}

return "error";
};

[nothingGrinder]

couldnt download that extension you are using, from the link that you gave

[3stripe]

Hey cinegod, did you try http://laco.wz.cz/tween/files/MovieclipTween120.mxp

Still working on the code, I think the array is re-ordering fine, but something still going very wrong with multiple clicks

[nothingGrinder]

James,
yeah, i tired that but it just gives me all the source code written out in the browser window.

so i did a test and replaced the slide with a tween and i got some really crazy stuff too.

[Jorge Solis]

Ok, here's a working example:

http://flash-db.com/Tutorials/temp/myMenu.html

I have writed very quickly, so could be better. Here's the class managing this:

import mx.transitions.Tween
import mx.transitions.easing.*
import mx.utils.Delegate

class myMenu extends MovieClip{

var h:Number//Menu heigth

var sel:Number //selected menu

var oldSel:Number //last selected menu

var cant:Number //quantity of menues

var square:MovieClip //This is for designers, they need some visual feedback pf menu area

function myMenu(){

square._visible = false     

}

function setMenu(items:Array){

cant = items.length

var t:MovieClip

//Attach items based on the array passed

for(var i=0; i<cant; i++){

t = attachMovie("item", "item"+i, i, {_y:(i>0)?t._y+t._height : 0, nr:i})

t.menu_txt.text = items[i] //set items text

if(h==undefined) h = t._height

t.onPress = function(){

if(_parent.sel==this.nr) return //I'm yet selected

_parent.setSel(this.nr)

_parent.move(this._y)

var myColor = new Color(this.back).setRGB(0x999999)

}

t.onRollOver = function(){

var myColor= new Color(this.back).setRGB(0x999999)

}

t.onRollOut = function(){

if(this.nr!=_parent.sel) var myColor= new Color(this.back).setRGB(0xCCCCCC)

}

}

}

//old and new selected

function setSel(selected:Number){

oldSel = sel

sel = selected

}

//Move on baby !

function move(py:Number){

for(var i=0; i<cant; i++){

if(this["item"+i].nr==oldSel) {

new Tween(this["item"+i], "_y", Regular.easeIn,this["item"+i]._y, (cant-2)*h, 1, true)

var myColor= new Color(this["item"+i].back).setRGB(0xCCCCCC)

} else if(this["item"+i].nr==sel) new Tween(this["item"+i], "_y", Regular.easeIn, this["item"+i]._y, -h, 1, true)

else if(py<this["item"+i]._y) new Tween(this["item"+i], "_y", Regular.easeIn, this["item"+i]._y, this["item"+i]._y-h, 1, true)

}

}
}

Here are the files

I don't use Lacko prototypes since the Tween class was included in Flash core as version 7. Also there's no need of further array manipulation, just implement the items movement logic, that could be guessed by the context. The first time the item move one position up of the starting menu position, then just change with the others.
Could be improved of course. If some of you want to take it, add a few things (i.e the action to perform in the onPress) and write some little article to upload to Flash-db would be great!

Jorge

[3stripe]

WOW! AMAZING! 

That's made my day, thanks Jorge!

I will do my best to write a nice tutorial for you as a way of saying thanks.

[3stripe]

Sorry, one question, how do I include this in my movie clip? Using #include?

Ok think I got it!

Haha so funny that I'm meant to be a 'seasoned' programmer now...

[3stripe]

Hi Jorge,

I'm having a few problems with this menu... it gets stuck sometimes and stops working (after clicking it a lot)

It's live on the Portfolio section at http://tinyurl.com/ogq57 but I can't figure out what is making it get stuck.... 

import mx.transitions.Tween

import mx.transitions.easing.*

import mx.utils.Delegate



class myMenu extends MovieClip{

var h:Number//Menu height

var sel:Number //selected menu

var oldSel:Number //last selected menu

var cant:Number //quantity of menues

var square:MovieClip //This is for designers, they need some visual feedback of menu area

var menuStatus = "stopped";

// Make marker square invisible

function myMenu(){

square._visible = false     

}

function setMenu(items:Array){

var thisclass = this;

trace("thisclass = "+thisclass);

cant = items.length

var t:MovieClip

//Attach items based on the array passed

for(var i=0; i<cant; i++){

t = attachMovie("item", "item"+i, i, {_y:(i>0)?t._y+t._height : 0, nr:i})

t.menu_txt.text = items[i] //set items text

if(h==undefined) h = t._height

t.onPress = function(){

if(_parent.sel==this.nr) return //I'm already selected

if (thisclass.menuStatus == "stopped") {

_parent.setSel(this.nr)

_parent.move(this._y)

var myColor = new Color(this).setRGB(0x226777)

thisclass.menuStatus = "loading";

trace(thisclass.menuStatus);

}

}

t.onRollOver = function(){

var myColor= new Color(this).setRGB(0x226777)

}

t.onRollOut = function(){

if(this.nr!=_parent.sel) var myColor= new Color(this).setRGB(0x000000)

}

}

setSel(0);

move(0);

}

//old and new selected

function setSel(selected:Number){

oldSel = sel

sel = selected

}

//Move on baby !

function move(py:Number){

var thisclass = this;

for(var i=0; i<cant; i++){

if(this["item"+i].nr==oldSel) {

var tween1 = new Tween(this["item"+i], "_y", Regular.easeIn,this["item"+i]._y, (cant-2)*h, 0.3, true)

var myColor= new Color(this["item"+i]).setRGB(0x000000)

tween1.onMotionFinished = function() {

trace('tween1 finished');

thisclass.menuStatus = "stopped";

};

} else if(this["item"+i].nr==sel) {

var tween2 = new Tween(this["item"+i], "_y", Regular.easeIn, this["item"+i]._y, -h, 0.3, true);

tween2.onMotionFinished = function() {

trace('tween2 finished');

//menuStatus = "stopped";

};

}

else if(py<this["item"+i]._y) { 

var tween3 = new Tween(this["item"+i], "_y", Regular.easeIn, this["item"+i]._y, this["item"+i]._y-h, 0.3, true);

tween3.onMotionFinished = function() {

trace('tween3 finished');

//menuStatus = "stopped";

};

}

}

}
}

[Jorge Solis]

Usually interfaces get stuck when people click as a crazy. As a general rule, disable interaction until transition finish is a good rule. It's relative easy disabling prototypes:

Button.prototype.enabled = false or MovieClip.prototype.enabled = false

Then reenabling when transition finish. When using Tween, onMotionfinished is the rigth place to re-enable.

Jorge