Slide Navigation Like FirstBorn

[Guest rhysyG]

Hey Guys,

 

Im Trying to create a slide naviagtion like First Born. It should be quite simple, and the logic of my code is right, I think I just need a fresh eye to point out how I have executed it wrong!

 

http://www.fborn.com/

 

So its quite simple, basically there are 4 links on the page listed vertically. The way the nav works is that if you click on a link which is above your current position, the current goes down and the next link slides down (from the top). And visa versa when you click on a link below your current position, the current goes to the top and the next link comes in from the bottom.

 

I then assign each link a current number (1-4) and also and next value (1-4).

 

I then calculate if current > next or current < next and animate accordingly.

 

 

I've used greensock for its light weight animation, so if anyone can solve this I am in dept to you!!

 

 

 

import com.greensock.*;

import com.greensock.easing.*;

 

var currentMC:String = "Home";

var nextMC:String;

var nextNum:Number;

var currentNum:Number = 1;

 

 

//create the timeline and add an onComplete callback that will call myFunction() when the timeline completes

var Home:TimelineLite = new TimelineMax({paused:true});

 

Home.addLabel("Top", .5);

Home.addLabel("TopMid", 1.5);

Home.addLabel("MidBottom", 2.5);

Home.addLabel("BottomMid", 3.5);

Home.addLabel("MidTop", 4.5);

 

 

Home.insert(new TweenLite(mcHome, .5, {delay:.5, _y:-100, onComplete:myFunction}),"Top");

Home.insert(new TweenLite(mcHome, .5, {delay:.5, _y:200, onComplete:myFunction}), "TopMid");

Home.insert(new TweenLite(mcHome, .5, {delay:.5, _y:600, onComplete:myFunction}), "MidBottom");

Home.insert(new TweenLite(mcHome, .5, {delay:.5, _y:200, onComplete:myFunction}), "BottomMid");

Home.insert(new TweenLite(mcHome, .5, {delay:.5, _y:-100, onComplete:myFunction}), "MidTop");

 

 

var OurWork:TimelineLite = new TimelineMax({paused:true});

 

OurWork.addLabel("Top", .5);

OurWork.addLabel("TopMid", 1.5);

OurWork.addLabel("MidBottom", 2.5);

OurWork.addLabel("BottomMid", 3.5);

OurWork.addLabel("MidTop", 4.5);

 

OurWork.insert(new TweenLite(mcWork, .5, {delay:.5, _y:-100, onComplete:myFunction}),"Top");

OurWork.insert(new TweenLite(mcWork, .5, {delay:.5, _y:200, onComplete:myFunction}), "TopMid");

OurWork.insert(new TweenLite(mcWork, .5, {delay:.5, _y:600, onComplete:myFunction}), "MidBottom");

OurWork.insert(new TweenLite(mcWork, .5, {delay:.5, _y:200, onComplete:myFunction}), "BottomMid");

OurWork.insert(new TweenLite(mcWork, .5, {delay:.5, _y:-100, onComplete:myFunction}), "MidTop");

 

 

function myFunction()

{

trace("stop");

Home.pause();

OurWork.pause();

}

 

 

function shuffleMC(nextMC, nextNum)

{

 

trace("nextMC = " + nextMC);

trace("nextNum = " + nextNum);

trace("currentMC = " + currentMC);

trace("currentNum = " + currentNum);

trace("____________________________");

 

if(nextNum > currentNum)

{

trace("slide up");

trace("nextMC = BottomMid" + "currentMC = MidTop");

_root[nextMC].gotoAndPlay("BottomMid");

_root[currentMC].gotoAndPlay("MidTop");

currentMC = nextMC;

currentNum = nextNum;

}

 

else if (nextNum < currentNum)

{

trace("slide down");

trace("nextMC = TopMid" + "currentMC = MidBottom");

 

_root[currentMC].gotoAndPlay("MidBottom");

_root[nextMC].gotoAndPlay("TopMid");

currentMC = nextMC;

currentNum = nextNum;

}

else

{

trace("paused");

Home.pause();

OurWork.pause();

 

}

 

 

}

 

 

Home.gotoAndPlay("BottomMid");

 

 

Thanks Heaps.

[Carl]

hmmm, I can't really trouble shoot the code. I've looked at it for awhile and nothing is jumping out as being totally wrong. it actually looks pretty good. my gut is telling me that you don't really have to be all that elaborate though.

 

consider the following:

there are 3 possible y positions that your clips can be tweening to and from -100, 200, 600.

 

assuming your next/previous logic is sound you could do something like:

 

var top:Number = 100;
var mid:Number = 200;
var bottom:Number = 600;

if(nextNum > currentNum)
{
trace("slide up");
TweenMax.fromTo(_root.nextMC, .5, {y:bottom}, {y:mid})
TweenMax.fromTo(_root.currentMC, .5, {y:mid}, {y:top})
currentMC = nextMC;
currentNum = nextNum;
}

else if (nextNum {
trace("slide down");

TweenMax.fromTo(_root.currentMC, .5 {y:mid}, {y:bottom});
TweenMax.fromTo(_root.nextMC, .5 {y:top}, {y:mid});
currentMC = nextMC;
currentNum = nextNum;
}

 

***warning*** the above could blow up horribly if people were to click buttons while the tween was happening.

it seems the fborn folks prevent clicks from happening while a tween is in running as I couldn't seem to break their tweens.

 

 

back to your code if you post a sample fla (cs4) I'll take a look at it.

also... what exactly isn't working? the whole thing? or does it blow up somewhere.

the only thing i'm not sure about is what is being passed into

 

function shuffleMC(nextMC, nextNum)

 

where you reference nextMC... my mind wants to think movie clip, but I'm pretty sure you mean to target a timeline. its fine if you know what it is but since I can't see the button code... i hope you're not doing:

 

shuffleMC(mcHome, 1) or shuffle(mcOurWork, 2)

 

it should be

 

shuffleMC(Home, 1) or shuffle(OurWork, 2)

 

Carl