Moving entire animation of rotating logos.

[IzeB]

I didn't create AS this but I'm trying to modify it.

 

It's a set of logos that looks/simulates like they rotate in 3d.

 

I'm resizing the stage to a landscape from standing format.

 

I just want to move the entire group of logos to center them to the stage, and may also widen the circle a bit.

 

Been messing with this params but there's heavy math involved to get a smooth and natural looking motion.

 

private var posX:Array = new Array(0,170,122,42,-60);

private var posY:Array = new Array(215,215,215,215,215);

 

private var bezierX:Array = new Array(140,150,82,0,-80);

private var bezierY:Array = new Array(216,215,215,215,220);

 

Isn't there a global global parameter somewhere to set the "centerpoint" of the entire rotate?

 

Entire code here:

 

package banner {

import com.greensock.TweenLite;

import com.greensock.TweenMax;

import com.greensock.easing.Expo;

import com.greensock.easing.Linear;

import com.greensock.plugins.BlurFilterPlugin;

import com.greensock.plugins.TweenPlugin;

 

import com.squarelabs.display.Box;

import com.squarelabs.document.Library;

 

import flash.display.Bitmap;

import flash.display.Sprite;

import flash.events.MouseEvent;

import flash.net.URLRequest;

import flash.net.navigateToURL;

 

 

public class Banner480 extends Sprite {

 

private var background:Bitmap;

private var header1:Sprite;

private var header2:Sprite;

 

private var logo1:Sprite;

private var logo2:Sprite;

private var logo3:Sprite;

private var logo4:Sprite;

private var logo5:Sprite;

 

 

private var posX:Array = new Array(0,170,122,42,-60);

private var posY:Array = new Array(215,215,215,215,215);

 

private var bezierX:Array = new Array(140,150,82,0,-80);

private var bezierY:Array = new Array(216,215,215,215,220);

 

private var logoAlpha:Array = new Array(1,0.75,0.5,0.5,0.75);

private var logoBlur:Array = new Array(0,3,6,6,3);

private var logoScale:Array = new Array(1,0.5,0.25,0.25,0.5);

 

 

private var logoArray:Array = new Array();

 

private var clickArea : Box;

private var container : Box;

private var mymask : Box;

 

 

public function Banner480() {

 

 

 

TweenPlugin.activate([blurFilterPlugin]);

 

container = new Box(480, 250, 0x000000, 1);

addChild(container);

 

 

background = Library.createBitmap("background");

// background = Library.createBitmap("dummy200");

 

container.addChild(background);

 

header1 = Library.createSprite("header1");

header1.y=24;

header1.alpha=0;

container.addChild(header1);

 

header2 = Library.createSprite("header2");

header2.y=98;

header2.alpha=0;

container.addChild(header2);

 

logo1 = Library.createSprite("logo1");

logo2 = Library.createSprite("logo2");

logo3 = Library.createSprite("logo3");

logo4 = Library.createSprite("logo4");

logo5 = Library.createSprite("logo5");

 

logo1.alpha=logo2.alpha=logo3.alpha=logo4.alpha=logo5.alpha=0;

 

 

container.addChild(logo5);

container.addChild(logo4);

container.addChild(logo3);

container.addChild(logo2);

container.addChild(logo1);

 

logoArray.push(logo1);

logoArray.push(logo2);

logoArray.push(logo3);

logoArray.push(logo4);

logoArray.push(logo5);

 

mymask = new Box(480, 250, 0xFF0000, 1);

addChild(mymask);

container.mask = mymask;

 

clickArea = new Box(480, 250, 0xFF0000, 0);

 

clickArea.buttonMode=true;

clickArea.addEventListener(MouseEvent.CLICK, onClick);

addChild(clickArea);

 

TweenLite.to(header1,1,{alpha:1, ease:Expo.easeOut});

TweenLite.to(header2,1,{alpha:1, delay:0.5, ease:Expo.easeOut});

 

for (var i:Number = 0; i < 5; i++) {

var s:Sprite;

s = logoArray;

 

s.alpha=logoAlpha;

s.scaleX = s.scaleY =logoScale;

s.x=posX;

s.y=posY;

TweenLite.to(s,0,{blurFilter:{blurX:2*logoBlur}});

}

 

 

 

startBannerRotation();

 

 

 

 

 

}

 

function getClickTag():String{

for (var key:String in root.loaderInfo.parameters)

if(key.toLowerCase()=="clicktag")

return root.loaderInfo.parameters[key];

return "";

}

 

private function onClick(event : MouseEvent) : void {

 

 

navigateToURL(new URLRequest(getClickTag()),"_blank");

trace("click");

}

 

 

private function startBannerRotation() : void {

logoArray.push(logoArray.shift());

 

for (var i:Number = 0; i < 5; i++) {

var s:Sprite;

s = logoArray;

if (i==0) container.setChildIndex(s,container.numChildren-1);

/* TweenLite.to(s,2,{ alpha:logoAlpha,

scaleX:logoScale,

scaleY:logoScale,

x:posX,

y:posY,

blurFilter:{blurX:2*logoBlur},

ease:Expo.easeOut});

*/

TweenMax.to(s,2,{ alpha:logoAlpha,

bezierThrough:[{x:bezierX, y:bezierY} ,{x:posX,y:posY}],

scaleX:logoScale,

scaleY:logoScale,

blurFilter:{blurX:logoBlur,blurY:logoBlur},

ease:Linear.easeNone

}

);

}

 

TweenLite.to(this,2,{onComplete:startBannerRotation});

 

}

 

 

 

 

}

 

}

Thanks in advance

[Carl]

it seems that all the motion is driven through your posX/Y and bezierX/Y arrays.

 

i really don't know where you would begin to alter those values in a way that proportionally adjusts them that makes sense.

 

I don't think that global center registration point exists

[IzeB]

Ok, would be nice to understand the math behind getting a perfect circle in "Z" direction. I realize it's not "real" 3D, it's a combination of movement in x direction and zoom in/out alpha and blur.If I try changing any of the values it goes bezerk, or should I say bezierk

 

Another approach would be if I could load the "ring of logos" as an external MC, but with me being new AS3 I wouldn't know how.

I could then move this clip in any direction like in Old flash (nested animation levels).

 

Any ideas?