Proximity BBDO

MLB.com no longer uses Microsoft’s Silverlight to stream games to its 500,000 subscribers. This season fans will watch live and on-demand video via Adobe’s Flash player.

Why baseball benched Microsoft Silverlight

Summary:

6 real claw machines can be controlled and played on from your browser. Pepsi Max combines bytes and atoms. If you’re passionate about something, max it. That is what Pepsi Max is all about. That and gaming of course. And how do you go about maxing a game that everyone is passionate about? You think bytes (as in ‘internet’). You think atoms (as in ‘real world’). You grab a soldering iron and connect both.

—
Full post:

MAX YOUR THOUGHTS
Take 6 real claw machines, hook ‘m up to the internet and start playing. Unique codes can be stripped from the Pepsi Max bottles and used to add up for extra gaming credits. The lucky ones can win some cool prizes or grab a ticket for the final during which one plays with an 8 meter tall claw machine containing really huge prizes! Each finalist will be able to grab a huge bear and possibly win sunjets.be trips to Malta or Tenerife, or take home 50″ plasma’s and other cool Panasonic stuff.

OLDSKOOL CAMPAIGNING
The campaign is kick-starts with traditional online media. Bannering and an enticing e-mail to a database of Pepsi Max aficionados

SOCIAL MEDIA CUM
Today, more than 2.1 million belgian citizens are an active member of Facebook. So we integrated the power of Facebook Connect to make the game easily portable over the users contact network. Everyone registering with Facebook credentials, receives give-away codes for friends. Everytime anyone plays or wins it shows up in their friends newsfeed. How’s that for viral?

Frankly, a huge amount of users can freely access the website but only 6 can play simultaneously. Of course these users don’t want to be sitting ducks while waiting for a claw machines to become available. Statistics are put up to check when the site is very busy, a concept we introduced with, and was essential to, the Internet Is Mine case. Also, the claw machines Twitter when one of the slots is available.

KICK-ASS DESIGN
Phase 1: First wireframes were made in Powerpoint. They served as a basic feature-spec for the full website.

Phase 2: After being loosely briefed on the campaign’s concept and features, several paper sketches were made to serve as a rough guide. The concept at this stage was “a carnival or arcade, but maxed out!”.

Phase 3: Taking the best sketches into Photoshop, we created a digital painting that would serve as a moodboard and colour guide. This piece was also shown to the client in order to get the go-ahead for the look-and-feel for the rest of the website. You’ll also notice the (not-so) subtle use of Pepsi’s 3 main colours, creating a symbolic link between the logo and the site.

Phase 4: Using photos of the real grabber machines as reference, 3d models of the six cabinets, as well as a large “hero”-crane – a reference to the real-life final phase of the competition. The models were created and rendered in 3ds max 2008.

Phase 5: After all 3d models were animated and rendered, all assets were composited in Adobe After Effects and Photoshop. The mist was painted by hand.

Phase 6: After the final compositing of the scene, everything was then taken into Adobe Flash, where it was animated and integrated with the rest of the UI, which was also designed in Photoshop.

SOME HARDCORE GEEKNESS
Basically the client, your pc at home, simply browses to the webpage loading the Flash application. Through the Flash application the Socket Server receives the data of the logged in user and pushes that info to an Application Server on the same layer. The Application Server is there just to check the user data. N00bs would refer to this step as “checking with the database”. Furthermore the Socket Server just relays feedback between the claw machine and the UI. To put it straight, the Socket Server is the connection between the client and the claw machines at our offices. If a connection is established then that triggers the Socket Server and extracts one credit. Whenever a client is logged and ready to play, the Socket Server checks whether the user still has available credits to play the game. Credits can be added by entering game-codes found on Pepsi Max bottles and cans.

So, the Application Server feedbacks on the user-request and talks back to the Socket Server. Finishing this simple cycle the Socket Server pings to one of the 6 computers hooked to a claw machine. Each one of these computers is linked to a claw machine through 6, USB interface, micro-controllers talking to one of 6, physical, claw machines.

The micro-controllers allow users to address the physical controls of the claw machines. The connection between the two buttons to navigate and the coin collector are intercepted and thus hijacked by the USB interface of the micro-controllers. The micro-controllers send the claw machines the same electrical signals normally send by the original connections of the physical buttons.

The bears in the claw machines are stuffed with an RFID-tag. If a user manages to catch and lift a bear, the bear is dropped into a slide passing an RFID-chip reader. Once the reader is triggered a signal is passed on back to the Socket Server. The Socket Server then checks that tag with the linked prize in the DB inside the Application Server. When the match is made the UI displays to the user what prize he, or she, has won.

By the way, Proximity BBDO is looking for more ambitious developers willing to enforce our team and start create more of these wicked web-apps and games. Anyone with an interest can apply here.

Check out more of our geekness at Adnerds.be and check the conversation at #pepsimax, #twapero and #proximitybbdo

As you may have seen last week, we (Matthias, Pieter and myself) have had the privilege of attending Adobe MAX in the lovely (yet very wet and cold this time of year) city of Milan, Italy.

MAX is Adobe’s yearly conference, held in North America, Europe and Japan, focused on presenting the latest technological advances made by Adobe, as well as providing education on the software currently available. The sessions are presented both by Adobe “evangelists” and members from the community.

In this first blog post, I’ll be talking about the big thing of the show this year, namely Adobe’s upcoming new entry in  the front-end webdeveloper market-segment : Flash Catalyst. Read on after the jump.

(more…)

Adobe MAX 2008, live from Milan.

We are testing CoverItLive.com with great Twitter integration. Watch out for live coverage from Pieter Michels, Matthias Crommelinck and myself. Expect a roundup after the event next week.

As almost nobody really reads complete articles and blogging is said to be very 2004-ish, just giving you guys the major tags from the Berlin 2.0 expo:

Web_2.0_Berlin   o’reilly   20-23october   BCC   Berlin   ProximityBBDO   JanAlgoed   BartMuskala   JanDeCoster   GuidoGoffeau   Where_are_the_techies_gone?   Widgets      API   Open   SocialNetworks   Data   Friends   DionHinchcliffe   Usability   O’Reilly   Work_on_stuff_that_matters   Collaboration   Techniques   LeisaReichelt   Blogging_is_old_school   Apps/realtime_feeds_are_the_future   Webflow   StoweBoyd   Look&Feel   UI   InteractionAudit   HotBox.com   FocusOnNiche   Small_is_the_new_big   LeeBryant   UserExperience   BigPicture   SmallDetails   UX   Facebook   FBConnect   Swedish_ad_agencies_are_cool   Daddy   Copybox   The_photoshop_for_copywriters   Reactive_marketing   Communication_before_technology   Reduce_email_tsunami   FirstConnectARabbit_ThenEverythingElse   Violet.com   Recession   OnlytheGoodSurvive   Transparency   Post-ItsAreAPowerfulBrainstormingTool   GlobalCrisisFoundationForStrongInnovations   GetOverItStartWorkingAgain   RumTrader   MrVuong   SurpriseMenu   Tigerbeer   BenchJackets   U&S_tubes   Kurzstrecke   MilchKaffee   Alexanderplatz   StrawberryMargueritta   JogiBeer   CrazyLightShow   LousyWIFI   TooManyDevices

Get prepared for a new internet era and follow the rest of our Berlin adventures on
twitter.com/guidog
twitter.com/jalgo
friendfeed.com/bartmuskala

And anything else hashtagged with #w2eb.

You as in “our re-enforced and vastly expanding newly moved hotshop”

There are a few special techniques or effects that can spice up just about any web page. These are the top 20 Ajax effects that every web developer should know. They’re essential parts of any web developer’s toolbox. If you haven’t seen them yet, you no doubt will in your future web development endeavors.

Things like:

TextboxList meets Autocompletion – Ajax IM – LiveValidation – Inline Editing – Ajax Upload – Fancy Upload – ClickHeat Clicks Heatmap – Ajax Mail Form – Ajax Directory Manager – Ajax Email Client – Improve Form Usability with Auto Messages – qGallery – Ajax Star Rating – CakePHP Ajax Form – Amberjack Site Tours – Prototype UI – Jcrop – jQuery Auto-tabbing Plugin – Sort Table Rows with Ajax – DrasticMap

Via NETTUTS

Most famously, over the years, writers for ALA have presented the design community with one amazing and powerfully useful new CSS technique after another. Initially radically new techniques that are now part of the vocabulary of all web designers include Paul Sowden’s “Alternative Styles,” Mark Newhouse’s list-based navigation, Eric Meyer’s intro to print styles, Douglas Bowman’s “Sliding Doors,” Dave Shea’s “CSS Sprites,” Dan Cederholm’s “Faux Columns,” Patrick Griffiths and Dan Webb’s “Suckerfish Dropdowns,” Drew McLellan’s “Flash Satay,” and so on and so on. There are literally too many great ones to name here. (Newcomers to standards-based design, check Erin Lynch’s “The ALA Primer Part Two: Resources For Beginners“.)

Passing on Photoshop-files (and other design-, also accounts for development-files) is sometimes a gap in the bridge when it comes to slick workflow from one “department” (oh my God, please don’t ever use that word in practice) to another. As planning and budgets are sometimes inevitably tight there’s mostly not the time to take every file for a daily walkthrough. As some designers have to design outputs of different states inside a flow, a complex Photoshop-file has to be created. These files become complex when they contain lots of layers within nested groups (luckely they add up to a maximum of 4 subgroups) using masks and shapes with blending modes and more…

The key is LAYERCOMPS!

This handy, almost nifty, tool that is included since Photoshop CS came out is almost unknown to most (I mean a lot) people that use Photoshop (in a basic mode > not for heavy Photo-retouching for example). Some designers copy/past there layers and group them per state, but off course that only adds up to the filesize because you are putting the same layers in twice or more. Christ, I even know designers that make .psd files for every state they need to design, which of course clutters the jobmaps with tons and tons of designfiles.

Rule number one should be: giving layers a “logic” nametag, and doing this upon creating the new layer.
Rule #2: group and nest layers according to their appearance and placement in the design (and I’m mainly talking webdesign)
Rule #3: LEARN HOW TO USE LAYERCOMPS

There’r much more tips and tricks to create fluent workflow on passing on design-files off course, but in this post I just wanted to focus on the existence of LayerComps.

WebDesignerWall reveales: everything you always wanted but never knew about Adobe Illustrator CS3.

© demo Illustrator-artwork of this post, by Alex Trochut

Te lezen op de homepage van De Standaard vandaag:

Premier Leterme heeft nog NaN dag NaN uur, NaN minuten en NaN seconden om een akkoord te vinden
In het hoofdartikel staat een copylijn die slim gebruik maakt van het medium.

Goed zo! De Standaard maakt slim gebruik van het medium: interactieve afteller die de copy zo net iets spannender maakt dan in de papieren versie van hetzelfde artikel. Maar het zuigt nogal dat De Standaard niet even de moeite doet om het eenvoudige javascriptje even te testen op een paar browsers… bovenstaand foutje treedt op in FireFox op Mac, niet echt een exotische combinatie.

P.S. Voor de niet scripters onder ons: NaN betekent zoveel als Not a Number; een vriendelijke waarschuwing van de JavaScript console om te zeggen dat je datatypes niet juist gedefenieerd zijn.