There’s been a lot of buzz around the Brazilian public service campaign “Pee in the Shower” (or Xixi no Banho). As far as I can tell, the campaign was created by Saatchi & Saatchi and features both TV and web. (It was featured on FWA as Site of the Day over a month ago.) The idea is that if you pee while in the shower, as opposed to finishing your shower and using the toilet like normal, the average household can save 4,380 liters (that’s 1,157 gallons for us US folk). Saving water saves the rain forest. Sounds like a good plan, and the ads have gone viral (you’ve probably seen them online somewhere by now, right?) And it makes a very valid point – as soon as I get in the shower with the water running, I get that urge. But still, there’s a lot of negative feedback.
Category: Viral Marketing
AirTran: EveryFlight.com
I’m a little behind here, but here is my latest project from Firstborn: AirTran EveryFlight.com, where I was the front-end developer for the project. We worked with Cramer-Krasselt in order to bring this site to life. AirTran is a small domestic airliner, and they wanted to run a promotion to see what people wanted on every flight. So we built a site to collect ideas, then let people vote on them and see how each one ranked on a state and national level. The site only ran live for about 4 weeks until the winner was announced which happened to be Wi-Fi. You can see the old phase 1 site persevered here on Firstborn’s portfolio. It was a really cool project to work on, especially once it launched to see the suggestions come piling in. Our back end developer for the project, Wes Grubbs, built the database and admin tools, and we used AMF php, which provided to be really simple and easy to use. And as always, I also got to do some nifty features on the site.
So the first challenge was that we wanted the user to be able to write in their suggestion on one of the cards and actually have a pencil do the writing. There were two important parts to this process. The first is getting each letter traced out. The basic methodology behind this is that we will create for each letter a set of points on a path (anchors and control points for curves) and then use that path to mask out the actual letter. By drawing that path over time, we can create the illusion of the letter being drawn in as it is being reveled. The second part is having a pencil follow the letter, which is simple since everything is done by numbers and the drawing API, so from the current path being drawn we can grab the ‘end’ of it and just have an object track that point, thus having it follow the path being drawn in and the illusion that the pencil is drawing the letter. To create the pencil, I used FIVe3D. Mathieu had created a pencil for the M&M’s Join the Hunt site, so to avoid having it look too similar I didn’t bother using his model/code for reference, I just built out my own (plus it’s more fun that way).
In order to get the paths for each letter, I created a tracing tool. The tool allowed me to add points and make a path, as well as play with the curves and thickness of the line. Additionally, I added the feature that would allow the pencil to be “picked up” over certain points, meaning it wouldn’t be drawing for that segment (shift+click an anchor point). That is important for drawing letters that have different individual strokes, such as F, where when the pencil was moving I wouldn’t want to unmask a section of that letter as the pencil crossed it to get to another location. Once each letter is traced, it can be saved out as XML which is imported to the site and parsed into usable information.
See the letter tracing demo
See the letter writting demo
Another thing that was kind of interesting, although at this time I don’t have a demo for, was creating the rollover for the stack information. One of our newly hired 3D/Motion Designers, Brett Swanson, first modeled the stack to resemble the initial comps our designer Verena did. In order to make the cross-section, I first made a black and white image of the stack. The black being one side of the paper, and white being the other. Where the two colors met is the corner. So in Flash when the user rolls over the sack, I look across the horizontal strip of pixels from that mouse point and look for the area where white meets black, and I know that’s the corner. I can then do some masking, then calculate the rest of the points around it to create the cross-section plane, which is not 3D in anyway. As for the animation of the card being pulled out, Brett created a static animation that we imported as a PNG sequence, then position it to where the mouse click is, and scale it accordingly to be the correct size. Due to perspective, it doesn’t always match up. But since it is such a quick animation, we can fake the perspective by just slightly rotating the animation a little so that looks like the perspective matches up. As the animation plays, it rotates back to zero and scales back to the default size, and then is swapped out with the flipping animation which is dynamically done in five3D. As I always say, it’s all smoke and mirrors.
(images after the jump)
Indiana Jones 4 And The Viral Marketing?
I was watching the trailer for Indiana Jones and the Kingdom of the Crystal Skull a week or two ago and was scrubbing though the video and noticed something peculiar. There’s a part where someone’s glasses get magnetized and snap to a piece of metal, it happens really quickly. If you pause it, you’ll notice it says Roswell, New Mexico 1947 – which is the year of the Roswell incident. So what does this mean for the movie? Is the Roswell crash not a UFO but somehow tied to another event in the movie, or does Indy really have a Close Encounter of the Third Kind?
What I think is interesting is why this is in the trailer. Obviously, you have to pause it to see it, since all you see when it is playing is the glasses. That scene in itself isn’t very interesting, so the intention was probably for people to find the Roswell thing by chance. And once they find it, they’ll do just this: blob about it, thus adding viral hype about the movie. For all we know, maybe Roswell plays a very minor part, but the temptaion of Indiana Jones and Aliens will be too good to pass up, so until the release date, I bet it will become a more popular subject.
If you want to check this out on your own, I recomend checking out the trailer on Apple Trailers since QuickTime is easy to scrub though.