Tweening Bezier for a carousel animation

[rmcnaugh]

Hi and thanks for viewing this post. I am a begging as3 coder and I just need help with a project I'm working on. I need a carousel effect that is like this: http://www.chipotle.com/en-us/chipotle_story/where_did_we_come_from/where_did_we_come_from.aspx . I have six images in an array.The image that is pressed scales up and the others should switch to fill that position in carousel motion. I have tried to Use tweenLite {bezier} to get a carousel effect like thte one in the link, but to no avail. I know I need to put the rotation effect also in a array, but I don't know how to do this. Here is the main code:

 

//tweens
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*; 
import com.greensock.plugins.TweenPlugin;


TweenLite.to(brainFade, 1.5, {scaleX:1, scaleY:1, ease:Expo.easeOut});

///BUTTONS ARRAY
var nvArryLocat:Array=[mainInsight.dog,mainInsight.mikes,mainInsight.snakeOil,mainInsight.indian,mainInsight.women,mainInsight.pig];

for (var i:int = 0; i < nvArryLocat.length; i++) {
nvArryLocat[i].buttonMode = true;
nvArryLocat[i].addEventListener(MouseEvent.ROLL_OVER,nvArryOver);
nvArryLocat[i].addEventListener(MouseEvent.ROLL_OUT,nvArryOut);
nvArryLocat[i].addEventListener(MouseEvent.CLICK, clickHandler);
}

function nvArryOver(event:MouseEvent):void {
TweenLite.to(event.currentTarget, .5,{alpha:.5, ease:Expo.easeOut,overwrite:false});		
}
function nvArryOut(event:MouseEvent):void {
TweenLite.to(event.currentTarget, .5,{alpha:1, ease:Expo.easeOut,overwrite:false});	
}




///ON CLICK FUNCTION
function clickHandler(event:MouseEvent):void {
TweenLite.to(event.currentTarget, .5,{x:event.currentTarget.width/mainInsight.width,y:event.currentTarget.height/mainInsight.height, alpha:1,scaleX:1, scaleY:1, ease:Elastic.easeOut, delay:.5});
TweenLite.to(brain, 1, {alpha:0});//brain fade out
trace("you clicked " + event.target.name);
for (var i:int = 0; i < nvArryLocat.length; i++) {
	if (event.currentTarget == nvArryLocat[i]) {;
		nvArryLocat[i].alpha = 1;
		nvArryLocat[i].mouseEnabled=false;
		nvArryLocat[i].removeEventListener(MouseEvent.ROLL_OVER,nvArryOver);
		nvArryLocat[i].removeEventListener(MouseEvent.ROLL_OUT,nvArryOut);
		nvArryLocat[i].removeEventListener(MouseEvent.CLICK,clickHandler);
		//
		switch (event.currentTarget) {
	case mainInsight.dog:
		mainInsight.gotoAndStop(2);
		header.gotoAndPlay("headerTwo");
		insightText.gotoAndPlay("The Competition");
		break;
	case mainInsight.mikes:
		mainInsight.gotoAndStop(9);
		header.gotoAndPlay("headerThree");
		insightText.gotoAndPlay("Real Estate Media");
		break;
	case mainInsight.snakeOil:
		mainInsight.gotoAndStop(16);
		header.gotoAndPlay("headerFour");
		insightText.gotoAndPlay("The Sales Stigma");
		break;
	case mainInsight.indian:
		mainInsight.gotoAndStop(22);
		header.gotoAndPlay("headerFive");
		insightText.gotoAndPlay("Headhunting");
		break;
	case mainInsight.women:
		mainInsight.gotoAndStop(28);
		header.gotoAndPlay("headerSix");
		insightText.gotoAndPlay("Smear Tactics");
		break;
	case mainInsight.pig:
		mainInsight.gotoAndStop(34);
		header.gotoAndPlay("headerSeven");
		insightText.gotoAndPlay("Franchising");
		break;
		}
	} else {
		nvArryLocat[i].buttonMode=true;
		nvArryLocat[i].mouseEnabled=true;
		nvArryLocat[i].addEventListener(MouseEvent.ROLL_OVER,nvArryOver);
		nvArryLocat[i].addEventListener(MouseEvent.ROLL_OUT,nvArryOut);
		nvArryLocat[i].addEventListener(MouseEvent.CLICK, clickHandler);
		}
}
}

 

and here is the basic code on the 2nd frame of the "mainInsight" movieclip that houses the array of images:

//tweens
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*; 
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.BezierPlugin; 


TweenLite.to(mikes, 1, {y:homeTwo.y, x:homeTwo.x, scaleX:.25, scaleY:.25, ease:Bounce.easeOut});
TweenLite.to(snakeOil, 1, {y:homeThree.y,x:homeThree.x,scaleX:.26, scaleY:.26, ease:Elastic.easeOut});
TweenLite.to(indian, 1, {y:homeFour.y,x:homeFour.x,scaleX:.31, scaleY:.31, ease:Elastic.easeOut});
TweenLite.to(women, 1, {y:homeFive.y,x:homeFive.x, scaleX:.37,scaleY:.37, ease:Elastic.easeOut});
TweenLite.to(pig, 1, {y:homeSix.y, x:homeSix.x, scaleX:.35, scaleY:.35, ease:Elastic.easeOut,onComplete:CurveOne});

function CurveOne(){
homeOne.x=-101.55;
homeOne.y=157.65;
//
homeTwo.x=-57.6;
homeTwo.y=197.7;
//
homeThree.x=-3.55;
homeThree.y=223.35;
//
homeFour.x=64.85;
homeFour.y=223.35;
//
homeFive.x=130.25;
homeFive.y=208.35;
//
homeSix.x=181.55;
homeSix.y=172.35;	
//
TweenLite.to(mikes, 1, {bezier:[{x:-90, y:120}, {x:homeOne.x, y:homeOne.y}], scaleX:.25, scaleY:.25, ease:Expo.easeOut, delay:.1});
TweenLite.to(snakeOil, 1, {bezier:[{x:-90, y:120}, {x:homeTwo.x, y:homeTwo.y}], scaleX:.26, scaleY:.26, ease:Expo.easeOut, delay:.2});
TweenLite.to(indian, 1, {bezier:[{x:-90, y:120}, {x:homeThree.x, y:homeThree.y}], scaleX:.31, scaleY:.31, ease:Expo.easeOut, delay:.3});
TweenLite.to(women, 1, {bezier:[{x:-90, y:120}, {x:homeFour.x, y:homeFour.y}], scaleX:.37, scaleY:.37, ease:Expo.easeOut, delay:.4});
TweenLite.to(pig, 1, {bezier:[{x:-90, y:120}, {x:homeFive.x, y:homeFive.y}], scaleX:.35, scaleY:.35, ease:Expo.easeOut, delay:.5});
}

 

The other actions inside the "mainInsight" movieclip follow suit. I know there is a simpler way to achieve the effect from the Chipolte website, but I haven't been able to figure out how to do this.

 

Here is a link to download the Fla and swf:

http://darthrayzor.com/testSites/tweenTestFinalFour.fla

http://darthrayzor.com/testSites/tweenTestFinalFour.swf

 

Any help would be appreciated

 

rmcnaugh...

[Carl]

that's actually a fairly advanced effect that chipotle has. I know for myself it would take me a few hours to figure it out. to simulate the elliptical motion isn't the easiest thing in the world.

 

GreenSock has a CirclePath2D class for animating multiple items along a circular path, but making them all offset their tween directions to make room for the object that is getting larger would take quite a bit of tinkering and custom code development.

 

http://www.greensock.com/as/docs/tween/ ... ath2D.html

 

perhaps someone here has done it before and can give you more beneficial advise.

 

in the meantime, I would search http://www.activeden.net for carousel and see if there is anything similar that you can purchase for a few bucks.

[rmcnaugh]

Thanks. I am actually at active den now viewing examples, but I would like to figure out how to do this.

 

rmcnaugh...