Tips for Creating a Unique Website in Flash - Part 2: Animation
Balind on 29 Jul 2007 | Tips & Advice

Part 2. of my article on creating a unique website in Flash, the interactivity and animation portion.


daddyyankee.com // Elastic People

ANIMATION TIPS

1. Animate all reveals and transitions to a tempo and in a direction that leads the eye.
All great painters use composition to lead their viewers around their work. You have the added benefit of using animation to accomplish this.

2. Break graphics down into small parts and animate them individually to build the bigger graphics.
Quite simply this is the coolest way you can animate a reveal, by constructing or de-constructing it. Animate everything that’s not attached to something.

3. Create portions of your animation in After Effects.
This allows you to stream FLV’s lowering loading time while giving the site a broadcast feel. Use plug-ins to create organic animation that’s not possible in flash.

4. Use 3d to give unexpected movement.
This is Flash people use it. If you want to create impressive interactive Flash content incorporate 3d, it’s not so much for how it looks when the page is static but for when it’s moving, nothing gets a ‘wow’ effect like a graphic element that rotates, blurs and scales realistically.

5. Try to make some animated element unique to each sub-page.
Could be something subtle in the background… this small effort will reward your user with something fresh to appreciate with each page and encourage them to keep clicking.

Additional animation notes:
- If you’re on a time constraint put 99% of your effort into the loader, the home-page build and the interaction of the navigation… those are the “money-shots”.
- Ask your creative director to take you to the photo-shoot for the project, bring a portable green screen and a video camera and try to capture some footage of each scene after the photographers done his thing. This footage will be gold.
- Integrate video wherever possible. The bigger the better.
- Use a tweening class to script your animation.

Fan on 05 Sep 2007 at 5:14 am #
Balind, what tweening class do you use?
Balind on 05 Sep 2007 at 6:51 am #
Tweener, formerly known as “mcTween”
http://code.google.com/p/tweener/
Fan on 05 Sep 2007 at 9:11 am #
Thanks man, ive never coded my animations, but im trying now, slowly i shud go there! btw your work on DY new site, godlike! ive found a minor fault, if you click on the quick nav and then News & Calender, and then when its loaded click again on that button, it gets replaced! I think u already know! lol
Thanks
Michelle Wong on 31 Dec 2007 at 5:06 am #
I was finally able to finish setting up my first blog! Hopefully 2008 will be the year i will to make some money blogging, instead of losing money on all those ebooks i purchased. Anyway keep up the good work, i subscribed to your feed. Hopefully you will keep droping those little gems of advice that i just love to gobble up. I also commented on a few other post. Sorry im just so excited!! Thanks again.If you have time check out my blog and Happy New Year!Michelle, HostGator Coupon
Doodee on 03 Feb 2008 at 5:16 pm #
Thanks for sharing
harris on 05 Feb 2008 at 11:30 pm #
hi, nice blog and very helpful tips.
am, i’m dying to learn flash and after effects integration, where should i start?
thanks
Dwayne on 19 Feb 2008 at 1:13 pm #
Very impressed with the quality of these tips.. I will strive to ensure that I do these things in every project. Sometimes its hard.
Dwayne on 21 Feb 2008 at 11:31 am #
I made a document with tips from you other amazing folk that I’ve learned very helpful tips from.. I’ll share when I’m done..
baby on 04 Mar 2008 at 2:09 pm #
Great website!! Keep up the good work!!
EndartClala on 10 Mar 2008 at 1:18 pm #
I’d prefer reading in my native language, because my knowledge of your languange is no so well. But it was interesting! Look for some my links:
stronghold crusader extreme on 25 Mar 2008 at 1:09 pm #
Good thread, i like this tips
E B2B directory on 09 Apr 2008 at 12:27 am #
Creating
136
Interactive Animation in Hug Flash 2: » Website a for Unique Part - Tips | [url=http://www.e-b2b-directory.com/]Creating
136
Interactive Animation in Hug Flash 2: » Website a for Unique Part - Tips[/url] | [link=http://www.e-b2b-directory.com/]Creating
136
Interactive Animation in Hug Flash 2: » Website a for Unique Part - Tips[/link] | http://www.e-b2b-directory.com/
Alan on 23 Jul 2008 at 4:06 pm #
This interesting..