BezierPlugin

[Seasonss]

I am trying to create a sort of a curved menu and found Greensock online and this makes like soooooooooooo much easier

 

The navigation menu is slightly curved with 5 menus. This is what I have been trying to code. Just the bezier points work great and my floater_mc which is an arrow works well. But for a navigation menu I need it to go from say about to tutorials and then from tutorials back to About or to game on the same path, so I thought of putting if and else statements. Make sense?

 

import com.greensock.TweenLite;
import com.greensock.easing.Cubic;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.BezierPlugin;
TweenPlugin.activate([bezierPlugin]); //activation is permanent in the SWF, so this line only needs to be run once.


about_btn.addEventListener(MouseEvent.CLICK, goAbout);
old_btn.addEventListener(MouseEvent.CLICK, goOld);
abc_btn.addEventListener(MouseEvent.CLICK, goAbc);
tutorials_btn.addEventListener(MouseEvent.CLICK, goTutorials);
game_btn.addEventListener(MouseEvent.CLICK, goGame);


function goAbout(e:MouseEvent):void{
if (x == 315,y == 612) {
	TweenLite.to(floater_mc, 3, {bezier:[{x:315, y:612}, {x:214, y:577}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if (x == 430,y == 628) {
	TweenLite.to(floater_mc, 3, {bezier:[{x:430, y:628}, {x:315, y:612}, {x:214, y:577}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if (x == 554,y == 615) {
	TweenLite.to(floater_mc, 3, {bezier:[{x:554, y:615}, {x:430, y:628}, {x:315, y:612}, {x:214, y:577}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if (x == 670,y == 580) {
	TweenLite.to(floater_mc, 3, {bezier:[{x:670, y:580}, {x:554, y:615}, {x:430, y:628}, {x:315, y:612}, {x:214, y:577}], orientToBezier:true, ease:Cubic.easeInOut});
	}
}


function goOld(e:MouseEvent):void{
TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}, {x:430, y:628}, {x:554, y:615}, {x:670, y:580}], orientToBezier:true, ease:Cubic.easeInOut});
}

function goAbc(e:MouseEvent):void{
TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}, {x:430, y:628}, {x:554, y:615}, {x:670, y:580}], orientToBezier:true, ease:Cubic.easeInOut});
}

function goTutorials(e:MouseEvent):void{
TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}, {x:430, y:628}, {x:554, y:615}, {x:670, y:580}], orientToBezier:true, ease:Cubic.easeInOut});
}

function goGame(e:MouseEvent):void{
TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}, {x:430, y:628}, {x:554, y:615}, {x:670, y:580}], orientToBezier:true, ease:Cubic.easeInOut});
}

 

Is this the right way to go about it?

[GreenSock]

I'm not sure what you're trying to do with:

 

if (x == 315,y == 612) {...

Was that supposed to be this?:

if (x == 315 && y == 612) {...

And whose "x" and "y" are you trying to check? Where does that code reside? Sorry, I'm having trouble following the question. Is something breaking for you?

[Seasonss]

 

Uploaded with ImageShack.us

 

Sorry that I wasn't clear enough. I have attached an image of the navigation menu I am creating. The triangle is the floater_mc and clicking on each menu would make the triangle move to it along the curve. I worked on the code yesterday and updated it to add if and else statements based on which menu it is at and which one it has to go to.

 

import com.greensock.TweenLite;
import com.greensock.easing.Cubic;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.BezierPlugin;
TweenPlugin.activate([bezierPlugin]); //activation is permanent in the SWF, so this line only needs to be run once.


about_btn.addEventListener(MouseEvent.CLICK, goAbout);
history_btn.addEventListener(MouseEvent.CLICK, goOld);
sutras_btn.addEventListener(MouseEvent.CLICK, goAbc);
tutorials_btn.addEventListener(MouseEvent.CLICK, goTutorials);
quiz_btn.addEventListener(MouseEvent.CLICK, goGame);


function goAbout(e:MouseEvent):void{
if (floater_mc.x == 315, floater_mc.y == 612) {//at Old
	TweenLite.to(floater_mc, 3, {bezier:[{x:315, y:612}, {x:214, y:577}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if (floater_mc.x == 430, floater_mc.y == 628) {//at Abc
	TweenLite.to(floater_mc, 3, {bezier:[{x:430, y:628}, {x:315, y:612}, {x:214, y:577}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if (floater_mc.x == 554, floater_mc.y == 615) {// at tutorials
	TweenLite.to(floater_mc, 3, {bezier:[{x:554, y:615}, {x:430, y:628}, {x:315, y:612}, {x:214, y:577}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if ( floater_mc.x == 670, floater_mc.y == 580) {//at game
	TweenLite.to(floater_mc, 3, {bezier:[{x:670, y:580}, {x:554, y:615}, {x:430, y:628}, {x:315, y:612}, {x:214, y:577}], orientToBezier:true, ease:Cubic.easeInOut});
	}
}


function goHistory(e:MouseEvent):void{
//TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}, {x:430, y:628}, {x:554, y:615}, {x:670, y:580}], orientToBezier:true, ease:Cubic.easeInOut});
	if (floater_mc.x == 214, floater_mc.y == 577) {//about
	TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if (floater_mc.x == 430, floater_mc.y == 628) {//sutras
	TweenLite.to(floater_mc, 3, {bezier:[{x:430, y:628}, {x:214, y:577}, {x:315, y:612}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if (floater_mc.x == 554, floater_mc.y == 615) {//tutorials
	TweenLite.to(floater_mc, 3, {bezier:[{x:554, y:615}, {x:430, y:628}, {x:214, y:577}, {x:315, y:612}], orientToBezier:true, ease:Cubic.easeInOut});
	}
else if ( floater_mc.x == 670, floater_mc.y == 580) {//quiz
	TweenLite.to(floater_mc, 3, {bezier:[{x:554, y:615}, {x:430, y:628}, {x:315, y:612}], orientToBezier:true, ease:Cubic.easeInOut});
	}
}

function goSutras(e:MouseEvent):void{
TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}, {x:430, y:628}, /*{x:554, y:615}, {x:670, y:580}*/], orientToBezier:true, ease:Cubic.easeInOut});
}

function goTutorials(e:MouseEvent):void{
TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}, {x:430, y:628}, {x:554, y:615}, /*{x:670, y:580}*/], orientToBezier:true, ease:Cubic.easeInOut});
}

function goQuiz(e:MouseEvent):void{
TweenLite.to(floater_mc, 3, {bezier:[{x:214, y:577}, {x:315, y:612}, {x:430, y:628}, {x:554, y:615}, {x:670, y:580}], orientToBezier:true, ease:Cubic.easeInOut});
}

 

I haven't put if else statements for all as yet, but what is happening now is that when I click on Game it goes smoothly, but after that if I click on About the triangle flips upside down and goes to About. I don't understand why the flip happens.

 

Thank you for all your help

[Carl]

hey seasonss,

 

That is a very intriguing effect you are going for.

I don't have the best answer, but hopefully this simplified approach might spark some ideas that you can implement.

 

check this out:

http://snorkl.tv/dev/bezier/

 

This is my first time working with the bezier plugin so I wanted to keep it real simple.

Basically there is ONE tween in a TimelineMax instance.

Each button is set up to have the TimelineMax play to 25% intervals along the timeline.

btn 1 goes to 0%

btn 2 goes to 25%

btn 3 goes to 75%

btn4 goes to 100%

 

here is the code:

 

import com.greensock.*; 
import com.greensock.easing.*;

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

tl.insert(TweenMax.to(floater_mc, 2, {bezierThrough:[{x:400, y:300}, {x:700, y:150}], orientToBezier:true, ease:Linear.easeNone}))

btn1.addEventListener(MouseEvent.CLICK, goBtn1);
function goBtn1(e:MouseEvent):void{
tl.tweenTo(0); //tween to beginning of timeline
}

btn2.addEventListener(MouseEvent.CLICK, goBtn2);
function goBtn2(e:MouseEvent):void{
tl.tweenTo(tl.duration *.25); // tween to 25% the duration of the timeline
}

btn3.addEventListener(MouseEvent.CLICK, goBtn3);
function goBtn3(e:MouseEvent):void{
tl.tweenTo(tl.duration *.5); //
}

btn4.addEventListener(MouseEvent.CLICK, goBtn4);
function goBtn4(e:MouseEvent):void{
tl.tweenTo(tl.duration *.75);
}

btn5.addEventListener(MouseEvent.CLICK, goBtn5);
function goBtn5(e:MouseEvent):void{
tl.tweenTo(tl.duration);
}		

 

Benefits

once you figure out your bezier control points its really easy to get working. the amount of code is ridiculously insignificant.

 

Drawbacks

does not support easing

 

since there is constant speed, there is a direct 1:1 relationship between amount of time elapsed and amount of distance travelled. this makes it real easy to figure out what point in time each button should tween to.

 

Another approach might be to make a movie clip with the triangle tweening along a motion guide. you could then add framelabels to the movie clip and use tweenlite to tween to various frames on that timeline. you would gain the ability to use easing.

your buttons would call functions that would do things like:

TweenLite.to(nav_mc, 1, {frameLabel:"tutorials", ease:Cubic.easeOut});

TweenLite.to(nav_mc, 1, {frameLabel:"game", ease:Cubic.easeOut});

 

hopefully one of these options suits you.

let us know how it goes.

 

Carl

[Seasonss]

Wow this works perfectly well ( minus the tween) But my main aim is to get a smooth animation and that works!

 

Thank you so much.

[Carl]

YO Seasonss,

 

Good news. I just read another thread in this board and Jack had a great tip on easing a segment of a TimelineMax.

 

You can use my technique AND use easing!

 

import com.greensock.*; 
import com.greensock.easing.*;

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

tl.insert(TweenMax.to(floater_mc, 2, {bezierThrough:[{x:400, y:300}, {x:700, y:150}], orientToBezier:true, ease:Linear.easeNone}))

btn1.addEventListener(MouseEvent.CLICK, goBtn1);
function goBtn1(e:MouseEvent):void{
TweenLite.to(tl, 2, {currentTime:0, ease:Bounce.easeOut});
}

btn2.addEventListener(MouseEvent.CLICK, goBtn2);
function goBtn2(e:MouseEvent):void{
TweenLite.to(tl, 2, {currentTime:tl.duration*.25, ease:Bounce.easeOut});
}

btn3.addEventListener(MouseEvent.CLICK, goBtn3);
function goBtn3(e:MouseEvent):void{
TweenLite.to(tl, 2, {currentTime:tl.duration*.5, ease:Bounce.easeOut});
}

btn4.addEventListener(MouseEvent.CLICK, goBtn4);
function goBtn4(e:MouseEvent):void{
TweenLite.to(tl, 2, {currentTime:tl.duration*.75, ease:Bounce.easeOut});
}

btn5.addEventListener(MouseEvent.CLICK, goBtn5);
function goBtn5(e:MouseEvent):void{
//tl.tweenTo(tl.duration);
TweenLite.to(tl, 2, {currentTime:tl.duration, ease:Bounce.easeOut});
}

 

New example:

http://snorkl.tv/dev/bezier/bezierExample2.html