A couple of days ago I was talking about a soon-to-be-officially-released-last-agency-project.

I’d like to take some time to describe it better for it was doubtlessly the best project I came to develop for RAPP.

the campaign’s concept is simple: it’s a petition to support fair trade cotton.
there will be a physical (real life) event too. It will take place in several cities in february and people will be invited to bring their cloth’s labels ; a bit like those shoes’ pyramids to fight against landmines.

On the website, people’s signatures progressively unlock the keyframes of a video clip that was made exclusively for the campaign (T.L. by Micky Green).

The Art Direction rocks, I really love it and there are some tricks I’m burning to share with you my fellow reader.

The ribbon.
As it was meant to be re-used throughout the website, I made a dynamic script that can be used as a ribbon (intro, form) or a postcard (section switch).



even though it isn’t that complex, that little bugger kept me busy for 2 or 3 days :)
so here’s how it works:

we pick 2 angles A and B then offset the normals to obtain 2 sets of handles ( blue & green lines / points) after which all is left to do is to Eaze a stripe through those handles and draw it on two Shapes (depending on the culling the stripe is drawn on the front or back shape).

now that works pretty fine.

and while I’m at it there was also that facebook website I had to do before ( as a teaser for this site ) and that also involves a bitch of an animation principle: the page folds in two before being torn away…
it looks like this:





and you can check the live version here : http://www.changeonsdetiquette.fr/facebook/

back to the site

So once you want to sign up the petition, you fill up the form and

you enter the voting interface.

along with the AD, we thought of an animation principle based on hudreds of labels that would recompose each frame of the video… I tried to batch process the video (taking every N frame thresholding it and positionning the labels on the edges/masses) but the resulting images would look like shit. sometimes nothing replaces a human eye/brain/hand.
so he did the frames manually and I did a batch script to collects all the transform matrices for all the clips of all the key frames and copy them to clipborad.
then we paste the coordinates into a *.txt file and at runtime, we can re-assign the coordinates to rebuild the frame. As the expanded transform matrices of each clip would look like this:

0.04263:0.04263:0.15588:393.85:151.65

it weighted around 500Ko for the whole animation, we had to find a solution to store those coordinates.
I tried to zip them & thanks to FZIP the result was rather satisfying ; 500Ko became 20Ko : sweet :)

Once the frame is recomposed,

you have to pick up a location for your label.

the green tooltip helps you choose a location by cheering up and giving advices.
the tooltips motion is a basic verlet system.
after which you can spam your friends as usual (twitter/fb/batchmail).

there are plenty of other little tricks and things that don’t especially show but contribute to the user experience.
like using the SharedObject to store the labels locations, a dark frame pops out once the ribbon’s content are in place, just to sharpen the content’s edges etc.
I also tried to spare so much resources as I could but since we have full screen bitmapFills, sparing resources becomes very tricky :/

I was really glad I could be in charge of such a nice project ; it ‘s not often that you get 1/ an original concept 2/ a beautiful AD 3/ an original tune/video clip 4/ a couple of technical tricks and 5/ a noble cause to defend.

now off you go : http://www.changeonsdetiquette.fr/site/
I warmly encourage you to sign up the petition.
I can’t tell for sure but I think an english version is being done.

that’s it for now, enjoy :)

Tags: fair trade, geometry, max havelaar, work