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...