The Prototype Experience : the new Facebook Connect Interactive Experience for the new game by Activision: Prototype

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

Here it is, the new and unique Prototype Experience using Facebook Connect for the new blockbuster game by Activision: Prototype.

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.

prototype_lg

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.

prototype_home

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.

prototype_story

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.

prototype_artworks

Fifth screen, the Trailers. 3 trailers to watch. Nothing really interesting here 😉 even though the trailers are great !

prototype_trailers

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.

Encountered issues

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.

Link: http://www.prototype-experience.com/
Sales: Sponge
Realization: 1MD
Flash development: Thomas (http://www.open-design.be) and Noah.

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

7 Comments

  1. If I’m not mistaken, the 3 ‘official’ languages we speak in our small country or French, Dutch and German 😉
    Other than that, a great job. Again 😉
    A+
    Bjorn

  2. Flemish is the name for the “Belgian Dutch” but you’re right, Dutch is indeed the language used.

  3. Trickboss

    When i try it, it’s stuck on the loading screen, it doesn’t work for me 🙁

  4. Mhh, which loading screen ? the first one or the one for the Facebook stuff ?
    Loading the facebook content might take some time…

  5. There seems to be a bug in the Facebook API at the moment:
    http://forum.developers.facebook.com/viewtopic.php?id=28517

    They are working on it, let’s hope it’s corrected soon.

    And tkx for leaving a msg btw !

  6. Nick

    How did you guys get the div overlay working?

  7. the blend mode (or wmode, I’m not sure right now) of your flash must be of some type (transparent I think)

Leave a Comment

*