I don’t think it has been done before and so I invite you to go and visit the site before you read this post as I will explain a bit more about the development process (as far as I’m allowed to) behind this promotional website.
First of all, I’ll briefly describe the website, what it contains and eventually what issues we have encountered while developing it. Then I’ll write about the most interesting stuff about this experience: the Facebook integration. It is not new but I believe that the way it was implemented is unique (not for long, sure, but still…) and for some, scary.
So, here we go:
First screen, the Language chooser. Belgium is Belgium, and not only are we a small country with “only” 11.000.000 inhabitants, we also have 3 “official” languages: French, Flemish (Belgian Dutch) and German (a small part, but still…) English being the most popular language in the world, we had to make it available too for a game of this importance.
Thus, 3 languages for this promotional website: French, Dutch and English.
Second screen, the Home page. As it says, this is kind of the main page. It doesn’t explain much, just that if you want to experience what this website is all about, you’ll need to log in with your facebook account (It’s also the only way to participate to the contest and have a chance to win a XBox 360 and some Prototype games).
When you click on the Facebook connect button, it will check if you already are connected to your Facebook account. If you are, it will start loading the experience content and if not, a popup will simply show up allowing you to quickly connect to your facebook account.
Notice the nice tentacles effect on the Facebook button and the displacement effects here and there on the Logo and the two characters on the left and on the right of the screen. The background is also animated and the whole thing is “parallaxed” when moving your mouse over it.
And if you really take a good look at it, you’ll notice an effect on each of the letters of the text applied randomly.
The effects have been implemented through a new EffectManager class that I wrote during the development process of this project. It allows me to easily create new effects and tween them over time (like the strobe effect you can see on the FearTracker project for Volkswagen) using easing equations that do not necessarily need to behave the same way as all others. It is not perfect as I’m constantly modifying it but while classes like TweenMax or GTween are very useful, this approach gives me a lot more freedom for just a bit more line of codes to write.
Third screen, the Story. A simple page, really, with just a couple lines of text briefly explaining the story of the game.
Fourth screen, the Artworks. Just a bunch of Wallpapers to download. I personnaly think that this section is visually attractive. While its aim is not the most interesting as you can find plenty of wallpapers about this game on the net, we still tried to make it interesting in a way. I worked on a more sophisticated effect for the appararition of the thumbnails but we didn’t have the time to implement it and I think it would have required to much ressources for just a simple section like this one.
Fifth screen, the Trailers. 3 trailers to watch. Nothing really interesting here even though the trailers are great !
Sixth screen, Preorder. Just a couple of links where you’ll be able to preorder your copy of the Prototype game in Belgium.
That’s about it for the casual sections of this website. Now let’s have a look at the Facebook connect stuff and what it really allows you to do.
The Prototype Experience with Facebook Connect
While I can’t tell you everything about it because it all depends on your imagination, I still can say that it allows you to do a horribly scaring number of things with people personal life’s data ;). I mean, when I saw what we could do with just ActionScript and the Flash platform, it made me think of the real importance of those social networks like the one of Facebook. I don’t think our police or even our government has half of the power those networks have with their data and visibility. But hé ! people chose to do it… and… we use those data for the sole purpose of this trailer and no information is kept.
How does it work ?
It’s really simple. All you need is a Facebook account and the rest is managed by this set of classes especially designed for ActionScript3: http://code.google.com/p/facebook-actionscript-api/
When connected, you virtually have access to everything the facebook account you are connected to contains.
We used a face detection system to select as many pictures with a face we could find (with a maximum of 10 pictures). Of course, ActionScript being what it is, the face detection system is far from perfect (mostly due to performance issues directly related to the flash platform) but in overall, the system works well.
Perfect synchronization with a streaming video flv in Flash
This was one of the issues I had to overcome as with a trailer of this kind, a frame too late or too early directly makes the difference. It was an issue because the video had to be streamed and the streaming capabilities of flash don’t offer the precision needed in this case.
The solution was kind of simple but we had to accept the fact that the sound might be desynchronized. And it is the case, at least for me. At the end of the experience, the sound cuts off sharp while it has to make a slow fade out.
For this I simply put the flv on the timeline of a swf flash movie and streamed the whole thing. I just had to code a simple function that calculates the time needed to buffer the data “stream” depending on the data transfer speed as Flash seems to launch the movie as soon as it gets five seconds on the timeline.
Flash CS4 10.0.0 and big project files
I think this was one of the most alarming issue we have encountered during the course of this project as Flash simply refused to compile anything giving us no error to deal with. When looking for a solution on the web we first discovered that it was a memory issue and that it could be solved by simply updating flash to the 10.0.2 version. See this post for more details.
… and a few others for wich I’ll problably make another post.
Hope you enjoy it.