Recently EMG worked on a non-profit website for “The Ecology Center.” I was blessed with the opportunity to create the fun, interactive headers on each page. YIPPPY! If you check out the WEBSITE HERE, you can mouse over the headers to trigger animation.So now you’re probably thinking, “How’d we do that?” Well, let’s move on as I guide you step-by-step on how this was achieved.

Step One: Concept & Design

Once the look and feel was handed over to me, I needed to develop a creative direction for each header in terms of the layout and content. If you’ve noticed, the home page flash header has an assortment of colors spanning across through the depicted nature scene. To proceed, EMG decided to split each colored section to represent a different sub-section for the website. After splitting up the homepage graphic we added some more elements to bring the images to life. Check out the screens shots below.

 Step Two: Import & Layout in Flash

After designing, we moved on to importing the graphics into flash. All of the designs were actually created in Adobe Illustrator so the transition of vector graphics into flash was seamless (Thank you CS3!).

Step Three: Animate & Bring to Life

This third step was the most difficult. We wanted to really bring these seemingly stagnant scenes to life via mouse overs. One effect used to achieving this life-like feel was to have each graphic slide across horizontally at different speeds to give it the effect of distance.Next, we used a 3D application to animate the iconic figures in the scenes to interact with their respective surroundings. We used 3DS max to create the models and animate them, and the swift3d exporter to render the animations to a vector (SWF) format. We then imported them to a staging environment, adding mouse over actions to trigger the animations.

Conclusion

Overall, I think this added a wonderful touch to the final product. It really brings the design to life and gives off the earthy vibe that The Ecology Center aspires to achieve through their efforts. The creative direction behind the project truly captures peace, elegance and respect for Mother Earth.