curlicue Brooklyn Ribbon & Bow curlicue

curlicue Animations & Process curlicue

A simple brief to animate a logo.

curlicue 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.

curlicue The first animation was just a simple implosion/explosion effect, the logo forming from it's constituent parts and then breaking up again.

curlicue 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.

curlicue 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.

curlicue 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.

curlicue 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.

curlicue 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.