Streamlining 3 step tweening

[ngrinchenko]

I started to develop an animation sequence and it looks to me that the way the code played out is way to cumbersome. I would like to find out if it would be possible to do the same thing with more coherent coding. I need to have an items animating out of specified setting to the one present on the screen, i.e. out of the empty screen the animation is assembled. It is convenient to have the final look of assembled items on the screen. So I tried to used to animate "from" rather than "to" but somehow it did not work. I also tried to apply "fromTo" but that did not work either. I ended up specifying "autoAlpha:0" and time duration at "0", this made all my mc's invisible. I also wanted to have a 3 step animation to an mc. It comes out of the dart, brights up and gets bigger, and then goes to normal stat as present on the screen So presently I have 3 lines of code for that. Line 1: To make it invisible Line 2. To make it come up to the bigger and brighter setting Line 3: Come to the present settings on the stage. Could've it done differently? I am also not sure if append multiple was the best choice to handle my multiple buttons. I am attached the code and the file. Please let me know if what I did make sense?

 

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


//////////////////////////////
TweenMax.to(CrystalSparkle_mc, 0, {autoAlpha:0, colorMatrixFilter:{contrast:1.3, brightness: -.9, saturation: 0.2}});
TweenMax.to(prdctsInfo_mc.Title_mc, 0, {autoAlpha:0});
TweenMax.to(prdctsInfo_mc.line_mc, 0, {autoAlpha:0, scaleX:0, blurFilter:{blurX:5, blurY:2, quality:3}});
TweenMax.to(prdctsInfo_mc.featuredPrdcts_mc, 0, {autoAlpha:0, blurFilter:{blurX:15, blurY:12, quality:3}});


var CrystalSparkle_tl:TimelineMax = new TimelineMax({timeScale: 1});
CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, 1.2, {autoAlpha:1, colorMatrixFilter:{contrast:1, brightness: -.1, saturation: 0.2}, ease:Sine.easeOut}));
CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, .6, {colorMatrixFilter:{brightness: 1}, ease:Sine.easeOut}), -.25);
CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, .6, {colorMatrixFilter:{saturation: 1}, ease:Sine.easeOut}), -.4);


CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.Title_mc, .5, {autoAlpha:.5, scaleX:1.5, scaleY:1.5, blurFilter:{blurX:50, blurY:50, quality:3}, colorMatrixFiltert:{brightness:3}, ease:Sine.easeOut}), -1);
CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.Title_mc, .5, {autoAlpha:1, scaleX:1   , scaleY:1  , blurFilter:{blurX:0, blurY:0, quality:3}, ease:Sine.easeOut}), -.3);

CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.line_mc, .9, {autoAlpha:1, scaleX:1, blurFilter:{blurX:0, blurY:0, quality:3}, ease:Sine.easeOut}), -.7);
CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.featuredPrdcts_mc, .7, {autoAlpha:1, blurFilter:{blurX:0, blurY:0, quality:3}, ease:Sine.easeOut}), -.5);


CrystalSparkle_tl.appendMultiple([TweenMax.from(prdctsInfo_mc.btns_mc.Sumix28_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut}),
  TweenMax.from(prdctsInfo_mc.btns_mc.Sumix9_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut}),
  TweenMax.from(prdctsInfo_mc.btns_mc.Sumix9RGB_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut})],
-.5,
TweenAlign.START,
0.09);

[Carl]

Hi there. It may be late or maybe I'm just too tired, but I'm having a hard time trying to figure out what part of the code I should be looking at.

 

If you could just post an Fla (cs5 or lower) that contains just the assets and code to illustrate the effect in question, I will certainly look at it tomorrow and let you know if I think there is a way to optimize the code.

 

thanks

 

Carl

[ngrinchenko]

Hi, thanks for looking into my issue.

It is definitely me, since I am not sure where I went wrong I can not present clearly where the problem is.

Please take a look at the attached file.

[Carl]

I don't think i really understand what the problem is. I saw that I could change 2 of your tweens to from() tweens instead of to() tweens which means that the 0 second duration tweens in the beginnign weren't necessary. other than that since your other effects involve changing different properties at different rates on the same object, there is no way to make that code any shorter. i really don't think any of what you did is bad and I like the animation.

 

here is my slightly modified code. note where i marked the code "UPDATED".

just paste this into your file.

 

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

//////////////////////////////
TweenMax.to(CrystalSparkle_mc, 0, {autoAlpha:0, colorMatrixFilter:{contrast:1.3, brightness: -.9, saturation: 0.2}});
TweenMax.to(prdctsInfo_mc.Title_mc, 0, {autoAlpha:0});
//UPDATED not necessary a single from() tween will do this
//TweenMax.to(prdctsInfo_mc.line_mc, 0, {autoAlpha:0, scaleX:0, blurFilter:{blurX:5, blurY:2, quality:3}});
//TweenMax.to(prdctsInfo_mc.featuredPrdcts_mc, 0, {autoAlpha:0, blurFilter:{blurX:15, blurY:12, quality:3}});

var CrystalSparkle_tl:TimelineMax = new TimelineMax({timeScale: 1});
CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, 1.2, {autoAlpha:1, colorMatrixFilter:{contrast:1, brightness: -.1, saturation: 0.2}, ease:Sine.easeOut}));
CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, .6, {colorMatrixFilter:{brightness: 1}, ease:Sine.easeOut}), -.25);
CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, .6, {colorMatrixFilter:{saturation: 1}, ease:Sine.easeOut}), -.4);

CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.Title_mc, .5, {autoAlpha:.5, scaleX:1.5, scaleY:1.5, blurFilter:{blurX:50, blurY:50, quality:3}, colorMatrixFiltert:{brightness:3}, ease:Sine.easeOut}), -1);
CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.Title_mc, .5, {autoAlpha:1, scaleX:1   , scaleY:1  , blurFilter:{blurX:0, blurY:0, quality:3}, ease:Sine.easeOut}), -.3);
//UPDATED
//changed to() to from()
CrystalSparkle_tl.append( TweenMax.from(prdctsInfo_mc.line_mc, .9, {autoAlpha:0, scaleX:0, blurFilter:{blurX:5, blurY:2, quality:3}, ease:Sine.easeOut}), -.7);
//UPDATED
//changed to() to from()
CrystalSparkle_tl.append( TweenMax.from(prdctsInfo_mc.featuredPrdcts_mc, .7, {autoAlpha:0, blurFilter:{blurX:15, blurY:12, quality:3}, ease:Sine.easeOut}), -.5);

CrystalSparkle_tl.appendMultiple([TweenMax.from(prdctsInfo_mc.btns_mc.Sumix28_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut}),
		 TweenMax.from(prdctsInfo_mc.btns_mc.Sumix9_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut}),
		 TweenMax.from(prdctsInfo_mc.btns_mc.Sumix9RGB_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut})],
		-.5, //offset number, i.e. how long it waits before to start
		TweenAlign.START,//tweens start times are aligned, or TweenAlign.SEQUENCE so they start one after another
		0.09);//n = staggers the TweenAlign.START time,
		 //i.e. waits n seconds before each tween starts from the beginning of the append multiple,
		 //so the overlap (almost like specifying a "-" value)
		 //if TweenAlign.SEQUENCE then like "+" value as each tween waits 0.2 seconds before it starts

// makes a hand cursor appear over a mc acting as a button for all the buttons inside the scrollpnaeBckgrnd_mc.scrollpaneBckgrnd_btns_mc.
prdctsInfo_mc.btns_mc.buttonMode = true;
prdctsInfo_mc.btns_mc.useHandCursor = true;

//////////////////////////////INDIVIDUAL BUTTONS//////////////////////////////
var sourceVar_ProductsPopUps:String;//has to be specified only once for the rest of all the buttons so individual SWFs may be loaded into LoaderMax or UILoader
//////////////////////////////Sumix28_btn
prdctsInfo_mc.btns_mc.Sumix28_btn.Sumix28_ON.alpha = 0;
 var  Sumix28_btn_Tween:TweenLite = TweenLite.to(prdctsInfo_mc.btns_mc.Sumix28_btn.Sumix28_ON, .5, {alpha:1, paused:true});

 prdctsInfo_mc.btns_mc.Sumix28_btn.addEventListener(MouseEvent.ROLL_OVER, overHandler_Sumix28_btn);
 prdctsInfo_mc.btns_mc.Sumix28_btn.addEventListener(MouseEvent.ROLL_OUT, outHandler_Sumix28_btn);

	prdctsInfo_mc.btns_mc.Sumix28_btn.addEventListener(MouseEvent.CLICK, onClickSumix28PopUp);
function onClickSumix28PopUp(event:MouseEvent) :void {
sourceVar_ProductsPopUps="prdcts_popups/Sumix28-popup_tl.swf";
gotoAndPlay("prdctsPopUps");
 }


function overHandler_Sumix28_btn(e:MouseEvent):void{
	 Sumix28_btn_Tween.play();
	 trace("you rolled over me");
	 }

function outHandler_Sumix28_btn(e:MouseEvent):void{
	 Sumix28_btn_Tween.reverse();
	 trace("you rolled off me");
	 }



////////////////////////

[ngrinchenko]

Thanks for looking into my code.

I am relatively new to the coding part, so it is very important for me to know that I am on the right track and arrange things as they are supposed to be arranged.

Best Regards,

Nikolai