Animated Leaves - Vector Animation, Beginner - Intermediate Rating Options

[RedDragon]

Making an animated growing leaves effect in SwishMax as in the Spiritz site ... view here

[font=Verdana]1. draw a line that will be your stem



2. draw a couple of leaves in vector, using your bezier tool. I used a linear gradient #99CC00 and #339900, but of course you can use every colour you want.



3. when you have drawn for example for different leaves, make sure the origin of the leaf is at the bottom and the object's anchor point is bottom center. we will use this later.



4. copy the leaves a number of times

5. place them at the stem and rotate them with this tool (see pic below) to make sure the origin is attached to the stem. select it and rotate the object by holding a corner of the object and rotating it with your mouse,



6. if you are ready attaching all leaves to the stem you can start with the animation part.

7. select all leaves and go to transform

8. set the width and height to 0%



9. add a move effect of 20 frames to the bottom leaf and make it grow to 100% for both width and height.



hint: to make it look more realistic you can set the final width and height to a smaller percentage at the end of the stem to make it look more realistic. Leaves are smaller at the end of the stem since that part is still growing

10. copy this move effect and paste it for every leaf like in the picture below.



11. preview it in the swish player, they should now grow one by one

12. make a mask that covers the entire stem



13. place it at the bottom and let it slide over the stem-line. make your move effect as long as the moment where the move effect for the last leaf starts. So if for example the movement for the final leaf starts at frame 400 your move effect for the mask will be around 400. Play with these settings till your satisfied.



14. place both stem and mask in a seperate sprite, set the sprite to 'use bottom object as mask' and 'stop playing at end of sprite' and give it a name so you can find it easy in the future.

15. set a place effect on the first frame.

16. group all leaves in a sprite and give it a name. Set it 'stop playing at end of sprite'. Do not check 'use bottom object as mask'!

17. set a place effect on frame 10 so it starts a moment later then the stem.



18. you're done!



Visit my site to see a finished example of the leaves growing

Spiritz


Good luck with your project and don't hesitate to ask when you face any problems

[Eddie_K]

Sweet tut. Thanks for sharing with us . As I told you, I wanted to create this a long time ago, but had no clue how to... Well I imagined the leaves, but nothing came out right LOL... Glad you made it happen

Oh, btw, I saw a small bug on your webpage... You have a link somewhere leading to portfolio, but on the main toolbar, it doesen't change to portfolio

Eddie

[Rob Wells]

Added link to first post Eddie.

Nice tutorial Red, thanks for sharing it.
I've always been very interested in the growing leaves on your website,

-rob

[RedDragon]

Thanks

I'll do the animated butterflies in a few days.

[Zaigham]

That's cool

Thanks for teaching us...

Regards,

-zaigham

[cmonney]

thanks for the tut, Rick... I know that a lot of ppl all over the internet was wondering how to create that beautiful and cool effect!!!

[RedDragon]

lol thank you Eddie


Call me Mr Sunshine today

[josephine]

great tut!

Thanks red!!!

[Canen Art]

wow.. I had to check this out. I was really impressed with your site. Ive never seen a better done site in flash/swishmax ever. I was so impressed I had to post it on my Forums under topic Websites. I might even put that on my main page under my Favorites so others can visit it right off the get go. You have done a great job. Keep up the good work.

Best Regards,

Jason

[RedDragon]

Thank you very much for the kind words Jason!