how to animate this?

Hello,

I received a layout of a web site, which I have to animate in Flash.
There are a lot of flowers that appear on the screen (see attached .jpg)
This comes to be a big headache for me. I´ve tried many things, mainly in the following directions:

1 - A function which places Movieclips of flowers (in .png) randomically in a Shape Layout (HYPE framework) that shows all flowers one by one, or shows groups of flowers one by one.

i´ve done seomthing like this:

Code:

---

                        for (var i:int = 0; i < roses.numChildren; i++)
                        {
TweenNano.to(rosas.getChildAt(i), 0.2, {scaleX: 1, scaleY: 1, alpha:1, delay: 3 + i*0.1, ease:Quint.easeOut});

                        }

---

result: It´s extremely CPU consuming, cause there are many tweens at the same time. and there must be many many flowers to fill the area I need, otherwise there are too many gaps.

2 - I placed the flowers into the 'roses' MovieClip in the FLA, in order to have much less movieclips to animate with a function similiar to the one above. then I used the shape layout to place just a few flowers to give the pleasant effect which the client loved - thanks Joshua.

Code:

---

                        for (var i:int = 0; i < roses.numChildren; i++)
                        {
                                rosesTimeline.insert(new TweenLite(rosas.getChildAt(i), 0.06, {alpha: 1, delay: i*0.03, blurFilter:{blurX:0, blurY:0}, ease:Linear.easeNone}));
                        }

---

result: still, too many tweens. takes too much cpu, animation too long .

3 - I tried the same thing as above, but with large groups of flowers. the main swf is light weight, cause the groups are only different arrangements of the same flowers (and small groups of flowers)

result: it looks weird, the client didn´t like it, and me neither.

4 - Then I tried to animate only a big png with most of the flowers and then a few come up in screen with the shape layout.

result: png extremely big in size, and the alpha tween from 0 1, along with a blur filter tween , makes the swf run at 3 fps. strangely (for me) when I animate smaller groups of flowers , like the 2nd and 3rd opt, the framerate doesn´t fall that much.

so i don´t know what to do. there must be some way to animate that ...

thanks in advance !!

i must be blind!!, i see no jpg!!!!

anyway, its a simple fact of flash that the more tweens you have going on, the more cpu intensive it is.

what you could try is building your flower animation in a video editor like adobe after effects. the cpu will be more relaxed but the file size could any anywhere between 400-1000kbs, but thats only if you embed it, if you load it externally then the flash site will run and you can have some other animation going on whilst its loading.

alternatively, you could but all your flowers into a movieclip and animate it with the timeline. i 'think' but am not saw, that will be easier on the cpu.

alternatively alternatively, you could not use tweenlite. tweenlite is beautiful, i new it all the time, however it does add quite a lot of extra code, and having all the timer events going on will just make everything so much slower.

alternatively alternatively alternatively, build your own SUPER LIGHTWIEGHT version of tweenlite, that way you can keep all processes to the minimum required.



a trick for design on the other hand; why dont you have a single movieclip with several different flowers arranged nicely, turn the alpha down a bit and blur them a bit so they look like they are a bit into the distance, then have no more than TWO larger flowers in the fore ground. animate those foreground flowers normally, and have the background movieclip shake about for long distances but VERY SLOWLY. this is the sort of effect design to trick the eye into thinking more is happening than there actually is.

flos

sorry, i forgot to upload the attachment!

see my edited post

thanks a lot flosculus,
i won't be able to do it in after effects, cause i know very little of it ..but if i find no other solution i´ll try it .
what about TweenNano ? it is less cpu intensive, right?
i´ve tried to do the animation on the time line and flash crashes . and when it finally didn´t crash , the animation was about as much cpu intensive as with code.

tomorrow i´ll try the other possibilites. not sure if i understood your design trick ... but i´ve arranged all the flowers in a block, put some blur and alpha and some small "y" animation that repeats in a loop "shaking " the background - not sure if that was exactly what you meant .. but i didn´t like the result .. and it was still laggy ...

i´m thinking about exporting the whole flower arrangement as jpeg and then exporting a 2 color png of it as weel to use it in flash as a mask for the jpeg so then it becomes way lighter than the whole thing in png with full color.

abour the SUPER LIGHTWEIGHT solution ... i don´t know how to do it ... i´d need to take a look in some tween classes and probably study more OOP..

what about the framerate? shout i keep it lower than 30 fps?

well thanks a lot!

30fps is quite a lot. 20 ought to do the trick.