Brooklyn Ribbon & Bow ![curlicue](images/curlicue2.gif)
Animations & Process ![curlicue](images/curlicue2.gif)
A simple brief to animate a logo.
The first thing to do seemed to be to play around with the logo. To break it up into it's constituent parts and make them symbols in Flash. Once they were items in Flash they could be animated or controlled in the code of the Flash file.
The first
animation was just a simple implosion/explosion effect, the logo forming
from it's constituent parts and then breaking up again.
Obviously it wasn't smooth enough so it was re-worked. This
time I didn't have it breaking up again as I decided it was better to leave
the user with a whole logo to view. Plus I added some degrees of rotation to
the letters.
The animation
still wasn't dramatic enough so I decide that the constituent parts would be
better dropping in from "above" and then after some tweaking I could see it
needed the transparency to change as they drop in. This was the result.
I liked this animation but I wanted to see what it would be like with a background. It seemed logical to use the graphics from this micro-site. I also faded it in to the animation. The colour combinations would need working on in further development.
The most ambitious animation would
sadly take more development time than I have. I began it though. The full idea
was to have a ribbon that would follow the contours of the logo revealing the
logo as it went. I have managed to create a symbol that follows the logo and
I've written the code that will make it create a trail, to appear like a ribbon
but the code still needs tweaking. Plus the masking effect that reveals the
ribbon as it goes needs to be created; but here is
the file for the sake of completeness.
As I worked
on the animations I couldn't but help consider future possibilities for a site
for Brooklyn. An idea for an online ribbon chooser in Flash as part of a future
e-commerce solution occurred to me so I did a quick mock-up of the idea here.
This micro-site is valid XHTML/CSS and screen reader accessible.