How much tweening is too much?

[ngrinchenko]

I would like to have a soft blurred colorful moving lights background on my website. This animation is intended to take an entire screen. Is it something which can be accomplished or it will cause a very poor site performance as flash player will have to redraw an entire screen all the time?

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

anchors.visible=false;
//var movingLights_timeLine:TimelineMax = new TimelineMax({timeScale: .2});
var movingLights_timeLine:TimelineMax = new TimelineMax({repeat:-1, yoyo:true, timeScale: .2});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
movingLights_timeLine.appendMultiple([TweenMax.to(shapeOne, 5, {bezierThrough:[{x:366, y:467, scaleX:1, scaleY:0.7, alpha:0.4}, {x:601, y:358, scaleX:0.8, scaleY:0.2, alpha:0.3}, {x:291, y:231, scaleX:0.9, scaleY:0.7, alpha:0.7}, {x:513, y:356, scaleX:0.9, scaleY:0.2, alpha:0.2}, {x:706, y:248, scaleX:0.1, scaleY:0.2, alpha:0.3}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.7, tint:0x33ff66, ease:Sine.easeOut}),
TweenMax.fromTo(shapeOne, 5, {blurFilter:{blurX:460, blurY:20, quality:1}}, {blurFilter:{blurX:110, blurY:220, quality:3}}),

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TweenMax.to(shapeTwo_A, 5, {bezierThrough:[{x:188, y:135, scaleX:0.1, scaleY:0.2, alpha:0.7}, {x:207, y:146, scaleX:0.5, scaleY:0.7, alpha:0.4}, {x:469, y:335, scaleX:0.3, scaleY:0.3, alpha:0.3}, {x:149, y:282, scaleX:0.5, scaleY:0.3, alpha:0.4}, {x:306, y:148, scaleX:0.1, scaleY:0.1, alpha:0.3}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.7, tint:0x99cc99, ease:Sine.easeOut}),
TweenMax.to(shapeTwo_B, 5, {bezierThrough:[{x:188, y:135, scaleX:0.1, scaleY:0.2, alpha:0.2}, {x:207, y:146, scaleX:0.5, scaleY:0.7, alpha:0.7}, {x:469, y:335, scaleX:0.3, scaleY:0.3, alpha:0.5}, {x:149, y:282, scaleX:0.5, scaleY:0.3, alpha:0.3}, {x:306, y:148, scaleX:0.1, scaleY:0.1, alpha:0.7}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.5, tint:0x66ffcc, ease:Sine.easeOut}),
TweenMax.fromTo(shapeTwo_A, 5, {blurFilter:{blurX:160, blurY:240, quality:3}}, {blurFilter:{blurX:110, blurY:370, quality:3}}),
TweenMax.fromTo(shapeTwo_B, 5, {blurFilter:{blurX:60, blurY:140, quality:3}}, {blurFilter:{blurX:210, blurY:70, quality:3}}),

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TweenMax.to(shapeThree, 5, {bezierThrough:[{x:652, y:54, scaleX:0.1, scaleY:0.2, alpha:0.7}, {x:162, y:345, scaleX:0.5, scaleY:0.2, alpha:0.3}, {x:513, y:578, scaleX:0.2, scaleY:0.5, alpha:0.4}, {x:306, y:648, scaleX:0.1, scaleY:0.2, alpha:0.7}, {x:706, y:648, scaleX:0.1, scaleY:0.2, alpha:0.3}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.5, tint:0xff0066, ease:Sine.easeOut}),
TweenMax.fromTo(shapeThree, 5, {blurFilter:{blurX:160, blurY:240, quality:3}}, {blurFilter:{blurX:110, blurY:370, quality:3}}),

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TweenMax.to(shapeFour_A, 5, {bezier:[{x:28, y:107, scaleX:0.7, scaleY:0.3, alpha:0.5}, {x:429, y:371, scaleX:1.1, scaleY:0.7, alpha:0.3}, {x:20, y:137, scaleX:0.1, scaleY:0.7, alpha:0.8}, {x:830, y:592, scaleX:0.3, scaleY:0.7, alpha:0.4}, {x:206, y:608, scaleX:0.1, scaleY:0.2, alpha:0.2}], orientToBezier:true, scaleX:1.2, scaleY:1.3, tint:0xff0000, ease:Sine.easeIn}),
TweenMax.to(shapeFour_B, 5, {bezier:[{x:31, y:117, scaleX:0.7, scaleY:0.3, alpha:0.3}, {x:409, y:351, scaleX:1.1, scaleY:0.7, alpha:0.7}, {x:49, y:147, scaleX:0.1, scaleY:0.7, alpha:0.3}, {x:840, y:582, scaleX:0.3, scaleY:0.7, alpha:0.7}, {x:246, y:548, scaleX:0.1, scaleY:0.2, alpha:0.3}], orientToBezier:true, scaleX:0.6, scaleY:0.7, tint:0xff0000, ease:Sine.easeIn}),
TweenMax.fromTo(shapeFour_A, 5, {blurFilter:{blurX:160, blurY:40, quality:3}}, {blurFilter:{blurX:110, blurY:70, quality:3}}),
TweenMax.fromTo(shapeFour_B, 5, {blurFilter:{blurX:60, blurY:140, quality:3}}, {blurFilter:{blurX:110, blurY:370, quality:3}}),

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TweenMax.to(shapeFive_A, 5, {bezierThrough:[{x:119, y:310, scaleX:0.2, scaleY:0.3, alpha:0.3}, {x:199, y:247, scaleX:0.1, scaleY:0.3, alpha:0.5}, {x:239, y:291, scaleX:0.8, scaleY:0.3, alpha:0.7}, {x:92, y:315}, {x:413, y:568, scaleX:0.6, scaleY:0.4, alpha:0.3}], orientToBezier:true, scaleX:0.3, scaleY:0.2, alpha:0.7, tint:0xffccff, ease:Sine.easeOut}),
TweenMax.to(shapeFive_B, 5, {bezierThrough:[{x:139, y:310, scaleX:0.1, scaleY:0.3, alpha:0.5}, {x:199, y:247, scaleX:0.5, scaleY:0.8, alpha:0.8}, {x:239, y:291, scaleX:1.8, scaleY:1.3, alpha:0.5}, {x:92, y:315}, {x:413, y:568, scaleX:0.1, scaleY:0.3, alpha:0.5}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.5, tint:0xffff69, ease:Sine.easeOut}),
TweenMax.fromTo(shapeFive_A, 5, {blurFilter:{blurX:260, blurY:40, quality:3}}, {blurFilter:{blurX:110, blurY:70, quality:3}}),
TweenMax.fromTo(shapeFive_B, 5, {blurFilter:{blurX:60, blurY:240, quality:3}}, {blurFilter:{blurX:110, blurY:370, quality:3}}),

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TweenMax.to(shapeSix_A, 5, {bezierThrough:[{x:230, y:136, scaleX:0.7, scaleY:0.3, alpha:0.7}, {x:430, y:530, scaleX:.1, scaleY:.1, alpha:0.4}, {x:356, y:552, scaleX:0.2, scaleY:0.3, alpha:0.8}, {x:450, y:414, scaleX:0.7, scaleY:0.3, alpha:0.4}, {x:880, y:130, scaleX:0.7, scaleY:0.3, alpha:.7}], orientToBezier:true, scaleX:.7, scaleY:.7, alpha:0.5, tint:0x33ffff, ease:Sine.easeOut}),
TweenMax.to(shapeSix_B, 5, {bezierThrough:[{x:210, y:116, scaleX:0.1, scaleY:0.3, alpha:0.3}, {x:390, y:490, scaleX:.6, scaleY:.6, alpha:0.2}, {x:356, y:552, scaleX:0.2, scaleY:0.3, alpha:0.6}, {x:450, y:414, scaleX:0.7, scaleY:0.3, alpha:0.3}, {x:910, y:170, scaleX:0.7, scaleY:0.3, alpha:.5}], orientToBezier:true, scaleX:.3, scaleY:.7, alpha:0.4, tint:0x6600ff, ease:Sine.easeOut}),
TweenMax.fromTo(shapeSix_A, 5, {blurFilter:{blurX:60, blurY:240, quality:3}}, {blurFilter:{blurX:210, blurY:170, quality:3}}),
TweenMax.fromTo(shapeSix_B, 5, {blurFilter:{blurX:260, blurY:40, quality:3}}, {blurFilter:{blurX:110, blurY:270, quality:3}})],
	  0, //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);//staggers the TweenAlign.START time,
	  //i.e. waits 0.2 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

[Carl]

There is really no limit on how much tweening you can do. You get into problems with the types of tweens. I believe in another thread we previously discussed how this effect you are trying to do is fairly processor intensive. Flash has a very tough time with filter and alpha effects on large objects.

 

currently your movie is running at about 5fps on a very fast computer. unfortunately what you are trying to achieve by blurring and fading multiple objects that are stacked on top of each other is pretty much the toughest thing for Flash to handle

 

Here are some tips from Adobe about using Flash effeciently:

http://www.adobe.com/devnet/flash/articles/efficiency-tips.html

[ngrinchenko]

Wow, that's impressive. You answer so many posts on this forum and still remember my particular layout from a while ago. I only suspect that I am trying to do something utterly unadvisable and thus it sticks out?

I guess this is my last attempt to have this effect. I do like the idea of the entire background being animated. I believe I saw it on some websites. I think even on greensock.com SHOWCASE segment there was a site featured about water and its entire background was an underwater shot with flickering lights. Was it a low res mp3 video file looping? Is it better to have a low res video as a background rather than timelineMax tweens?

After my experience with greensock platform I came to expect that it will solve any problems, which so far seems to be the case. (I understand that Flash player issues are unrelated).

 

In order to find a solution I decided to limit the amount of tweens running on the page and got rid of the alpha and blur settings for all individual mc's. Now the whole animation seems to run much better or is it my altered imagination?

So my last question is:

If I keep the tweens to a minimum with changes in position and scale within the movie, and have only one setting of alpha and blur for the entire animation sequence (as one mc), will it significantly increase the performance?

I understand that my problem comes from the fact that I keep on trying to animate and entire websites background as one giant mc. Perhaps this approach just should not be tried?

You replied that "unfortunately what you are trying to achieve by blurring and fading multiple objects that are stacked on top of each other is pretty much the toughest thing for Flash to handle"

I would like to confirm where the problem lies.

The fact that I have multiple objects?(Then was it resolved by having one big mc as one object changing blurring and fading)?

or

The fact that I am trying to animate/tween and entire website background and there is no particular problems with Flash unable to handle these particular filters of blurring and fading, but with the size of the animated tween. I should stay altogether away from trying to animate a large area on the site?

movingLights_minimzd.fla.zip

[Carl]

In order to find a solution I decided to limit the amount of tweens running on the page and got rid of the alpha and blur settings for all individual mc's. Now the whole animation seems to run much better or is it my altered imagination?

So my last question is:

If I keep the tweens to a minimum with changes in position and scale within the movie, and have only one setting of alpha and blur for the entire animation sequence (as one mc), will it significantly increase the performance?

 

Yes, I believe the changes you made will have a tangible impact on increasing the performance.

The smaller the area that Flash needs to re-draw the better performance will be.

 

TweenLite is capable of performing 1000's of consecutive tweens while maintaining a very high frame rate. Certain properties / filters are more cumbersome for Flash to render and those problems get compounded when they are applied to many objects that involve a great number of pixels.