The purpose of the interactive kiosk for the booth at E3 was to offer additional information on the games being demonstrated in the booth and to give information on titles that weren’t available to play in the booth. Information for each of the eight games on the kiosk included an overview, feature list, trailer, and screenshots. More detailed information on these aspects below.

Main Menu
The kiosk’s main menu has the eight titles contained within touch-clickable buttons that take you to the game’s overview page. The main menu items alternate between a short, stylized video clip and the game’s logo. The kiosk returns to the main menu after three minutes of no user interaction.

Game Overview
Once a game is selected from the main menu, you are taken to each game’s overview page. The overview page is a textual overview of the game and also contains three additional options on the right side of the kiosk as well as a back button which returns you to the main menu. The featured page, which isn’t demonstrated here, is textual information laid out similarly to the game overview page.

Screenshots
The screenshots page follows the overall format of the overview page, but the focus of this page is media. A large central window displays the current screenshot. Controls on the left allow you to select a screenshot to enlarge and scroll up or down to view additional screenshots. Again we have the three information options on the right side as well as the back button which takes you back to the main menu.

Game Trailer
The game trailer page shifts focus to the game’s official trailer. Game trailer’s begin playback automatically and can be muted, paused, or scrubbed through using the semi-transparent controls at the bottom of the video. During video playback the timeout function which resets the kiosk is disabled and is re-enabled when the video is paused, stopped, or completed.

Kiosk Installations at E3 2010
Kiosk preparation during E3 setup:

Kiosks installed and in place:

Watching a trailer on the kiosk:

Kiosk active during the show:

Compatibility: Chrome, Firefox, Opera, Safari
Powered By: HTML5, CSS, JavaScript
Extra Libraries: MooTools (Sliders, Fades)

What’s up with HTML5 video anyway?
For the original project outline check the version 1 post here.

Version 1.2 Functionality
Version 1.2 is a core functionality update instead of an addition of features as I had originally planned. Everything from version 1 remains intact with the javascript controls optimized for smoother operation. The most recognizable difference in controls between versions 1 and 1.2 is the seek bar. Take a quick look at both versions and move the seek bar from left to right. Version 1.2 has removed most (if not all) of the stutter from the seek bar while dragging.

Player control code in version 1.2 has been corrected to allow video playback in Firefox and with the recent release of an Opera update (version 10.53) the video player now works with Opera as well.

Next Release Additions
The next version of the player will have an option for Flash fallback. If no Flash fallback is set, the player will display a graphic showing that HTML5 video isn’t currently available for their browser. Code from the user end will be minimized by using a custom tag that will be read and handled appropriately by the video player and multiple instances of the HTML5 video player will be possible.

Running Into Issues?
Did you try using the video player with Chrome, Firefox, Opera, or Safari and it didn’t work? Let me know in the comments and I’ll try to track down the issue. Before I posted the final version 1.2 code here I tested the player in Chrome, Firefox, Opera, and Safari on Mac OSX and Windows Vista, so there shouldn’t be any issues.

View the live site here: 3ddotgameheroes.eu

Site home page + order info

Cast -> NPC page

System -> Character editor page

Tell a friend form (sends recipient an email)

Media page + language selection open

A little Easter egg: If you are at a page with a blinking arrow at the bottom right that you click on to move on to the next content you can also scroll through the content by pressing the “a” button on your keyboard. A fun NES-style addition to a retro homage for the PS3.

Compatibility: Chrome, Safari
Powered By: HTML5, CSS, JavaScript
Extra Libraries: MooTools (Sliders, Fades)

How does it work?
In HTML5 you won’t need any Flash components to present videos to your viewers. With HTML5′s video tag you’re able to embed video into your webpage with minimal effort and the browser will take care of the rest. A simple, barebones video embed in HTML5 looks like this:

<video width="512" height="288" controls>
    <source src="your_video_file.mp4" type="video/mp4"/>
</video>

When the page is loaded the above code will display your video with a width of 512 and a height of 288 along with the default video controls for the browser. Easy enough? Currently, you have to put in a little extra work to ensure that each browser (Safari, Chrome, Firefox) can play the embedded video file. Safari and Chrome can display h.264 video while Firefox supports OGG Theora video. Luckily, HTML5 helps us out by allowing us to include multiple video sources within the video tag. If your browser doesn’t support the first source listed then it will check each source listed after until it finds one it can play.

Now Change It Up
The browser’s handling of the video tag is perfectly fine when the word “controls” is present in your video tag, but remove that part of the code and the video loads with no player controls. Now that the browser’s version of the video controls are gone, people who really want to get their hands dirty can build their own HTML5 video player controls. The video player controls that I built use a combination of CSS and JavaScript. The CSS controls the look of the player; the JavaScript gives the player functionality.

Writing these controls yourself requires a lot more work than using the basic HTML5 video tag so why bother going through the trouble of writing your own player controls? Writing your own controls allows you to control the user experience and deliver the same experience across all browsers. Want to have a button on the video player that allows the user to find out more about the content within the video? Add it. Want to add a brand to the video similar to the way network television does? Float it over the video. With custom controls you’re able to create a unique user experience that they only get by using your video player.

All of the above reasoning can be tossed out of the window if you’re like me. The capability is there to create custom video controls for HTML5 video content. Let’s try it out!

Version 1 Functionality
This initial version of the HTML5 video player is fairly straight forward and offers all of the basic controls you’d expect a video player to have. The player controls are visible when the video is paused or when the user’s cursor is over the video.

• play/pause button
• seek bar
• buffer indicator
• volume bar
• time information

Next Release Additions
The next version of the player will add Firefox support as well as a Flash fallback for browsers that don’t currently support the HTML5 video tag. For browsers that support HTML5 video the player will include a preloader graphic which will preload the video controls and a portion of the video before showing the video and video controls.

Running Into Issues?
Did you try using the video player with Safari or Chrome and it didn’t work? Let me know in the comments and I’ll try to track down the issue. Before I posted the final version 1 code here I tested the player in Safari and Chrome on Mac OSX and Windows Vista, so there shouldn’t be any issues.

Ingredients needed to become Thomas for a weekend:
1 Pair Black Leather Pants
1 Black Single Row Grommet Belt
1 Black Leather Jacket
1 Black Mask
1 Pair Leather Gloves
1 Pair Black Shoes
1 Skateboard Helmet
6 Sheets Cardstock
1 LED Belt Buckle
1 Pad Metallic Silver Origami Foil
1 Can Fiberglass Resin Jelly
2 Cans Bondo Body Filler
6 Sheets 80 Grit Sandpaper
3 Sheets 120 Grit Sandpaper
300 Screw-backed Studs
1 Safety Visor
3 Square Ft. Window Tint
1 Can Spray Primer
1 Can Metallic Silver Spray Paint
4 Tubes Super Glue

The three things that require manually labor to create are the helmet, the jacket, and the gloves. We’ll start at the top and work our way down.

To make the helmet I followed the instructions on the “Make a Daft Punk Helmet” Instructable available here. I substituted spray-on tint for a roll of tint and also added an LED display in the visor which was accomplished by taping a programmable display from an LED belt buckle into the helmet just above eye level. The entire helmet-building process took around 25 hours (not counting the time waiting for things to dry or cure) put in on weekends.

Cardstock and Helmet	Layer of Fiberglass Jelly

Ears Attached	Full Layer of Bondo

Sanded for Painting	Almost Fully Painted

Moving on to the jacket, I had ordered a jacket from eBay that was to be the jacket for the costume, but by Thursday it hadn’t yet come. In a last-minute frenzy I used my lunch break last Thursday to scramble a jacket locally and found one that was good enough to work at Buckle. A week before I had the jacket I printed out the Daft Punk logo at a width of 12 inches and placed studs along the logo to create a dot-pattern to tape to the back of the jacket to know where to puncture the jacket for the studs. Using a knitting needle I sat down for five straight hours Thursday night and studded the entire pattern before passing out with a sever case of numb hands and exhaustion.

Stud Pattern	Completed Jacket

The gloves were fairly simple to accomplish after I found some metallic silver origami foil at a craft store. Before this project I was unaware of the existence of origami foil. It worked great and is much less prone to wrinkling and tearing like tinfoil is. With my hand in the glove, I measured where my fingers bent inside the glove and made segments of glove treatments cut out of cardstock. Those cardstock pieces I then traced onto sheets of the origami foil, cut out, glued the foil to the cardstock counterpart, and glued the back of the cardstock to the glove. The entire glove process took about two hours.

Cardstock Base	Completed Gloves

That brings us to the completed costume which I wish I had more pictures of. Plenty of people I didn’t know took pictures with me in my costume so I hope to find them somewhere on Facebook in the coming week. Make the jump over to my Flickr set dedicated to the project to check out all the pictures from the project as well as any more pictures of the entire costume I come across.

The VideoWrangler plugins and complete documentation can be found on the VideoWrangler documentation page here.

The two blogs that I used as the basis for the plugin updates are http://www.ryanishungry.com and http://www.mikemoon.net. Their problem? When upgrading to the newest version of WordPress the plugins which drove their site quit working, yielded errors, or stopped the entire page from loading. Tracing through the plugin code I narrowed the problems down to two main sources: WordPress’ database structure had changed and the large amount of information contained on these blogs was exceeding the maximum allowed php script size on their servers.

With problems pinpointed, VideoPress was on its way to working once again within a few hours by updating references in the VideoPress code to entries in the WordPress database. The script size issue lead me back to vPIP to create a leaner function used to fetch chunks of data from the database. The original way VideoPress would gather vPIP data was for vPIP to supply VideoPress with a list of every single video entry that existed on the blog. While that works fine for small numbers, Ryanne and Mike’s blogs had years of back video catalog that made calling all of that data at once an enormous waste of space and resources. To scale back demand on the server I created a new function within vPIP that was only used to recall chunks of archive video data to be displayed on each archive page or to be displayed in the recent videos reel. This way the function would only return a set number of entries (which is specified in the plugin’s preference) as opposed to retrieving all of the site’s entries.

The updated version of the VideoPress project has been renamed as VideoWrangler to signal a fork from the original set of plugins and a change in project management. Updates to the VideoWrangler plugins will begin in November (time allowing) and will address the functionality requests from the video blogging community. The most up-to-date version of the plugins will always be available for download as a complete package or separately on the VideoWrangler documentation page.

Built using: Flash CS3 and ActionScript 3
Based on: ‘Flash video template: Dynamic video playlist‘

Video Player Demo Page

Version dev.3
This version brings the Flash Player even closer to complete. The sharing options in the right pane are now all functional as originally planned. The email button pops up a form that asks the user for their name, email address, and a friend’s email address and emails the current video that the user is watching to their friend’s email address. The link button pops up a form that displays the current video’s URL along with a copy button that copies the URL onto the user’s clipboard for them to paste elsewhere.

Small bug fix:
Links no longer return null link values.

I am going to do some more testing on the flash player itself to make sure there that no more bugs exist on the player and then working towards creating a control panel for the flash player to make maintenance easy. It will include the ability to upload videos and tag them with content tags. Those content tags will be used to generate related video reels for all of your videos. The control panel will also eliminate the need to update any XML by hand, streamlining the process of adding videos to the player. If you find any bugs in the flash player leave the bug below in the comments section.

Built using: Flash CS3 and ActionScript 3
Based on: ‘Flash video template: Dynamic video playlist‘

Video Player Demo Page

Version dev.2
UI bugs addressed:
UI panels no longer stop mid-animation.
UI panels no longer stick on screen.
Adjusting the seek bar no longer causes the bottom UI panel to stay visible.
Cursor no longer flashes when placing it between related videos thumbnails.

Plans for Version dev.3
The next release of the player will address the sharing options of the player. Email and link options will pop up a new window within the flash player that will allow the user to fill out a form to send the video to a recipient (email) or display the videos URL along with a copy to clipboard button (link). The video player will also be updated with the ability to link to a specific video in the playlist so that you can share the single video you want to share as opposed to the entire playlist. After dev.3, focus will turn to building an administration panel in PHP to allow for easier control of the video playlist. Once the administration panel is completed, the player will be packaged and released for general use.

ForThoseAboutToRockSchool.com sample:

Yoga Studio Website
A very simple website with quick-to-access information and a lot of impact, MYWStudio.net was designed by Omar Mejia and then turned over to me for implementation. Before getting to work on turning the photoshop files into living renditions of CSS and HTML, I made small edits to the site to make it into a more searchable and SEO friendly website. This site is definitely one of the more lightweight designs I have implemented and it was fun working with the design to make it even lighter on load times and file sizes. Due to the lightweight and fairly static nature of the content on the pages, future updates on this project will be straightforward.

MYWStudio.net sample:

Built using: Flash CS3 and ActionScript 3
Based on: ‘Flash video template: Dynamic video playlist‘

Video Player Demo Page

This Flash Video (.flv) player pulls video, thumbnail, and link locations from two XML files. The first XML file functions as the playlist and contains video file and thumbnail file links while the second XML file functions as the link list and contains links for the items in the left pane (facebook, link, email, and twitter).

Four panels surround the playing video which include: related videos, volume control, play controls, and playlist linking options. The related videos are pulled from the XML file and included in the related video panel. The volume panel uses a dot-type system as opposed to a slider-type system due to the fact that the sliders I attempted to implement were unreliable and glitchy. The play control pane is self-explanatory and include play, stop, and pause buttons as well as a progress bar. All of that pane fades when you aren’t rolled over except for the progress bar itself so that viewers can monitor the current video’s progress. The playlist linking panel on the left pulls four URLs from the link XML file and applies them to each of the four buttons. The facebook button links the viewer to a post to facebook page populated with the player URL. The link button copies the player URL into the viewer’s system clipboard to paste onto forums, chat clients, etc. The email button generates a mailto pop-up with the recipient field left blank; The body of the email includes a link back to the playlist page. The twitter button links the viewer to their twitter page with a status filled in that links back to the playlist page.

The player suffers from a few glitches that, at this point in the project, have not been completely resolved. The glitches revolve around mass UI fades. When clicking the play button or on a related video, all UI elements should fade from view and leave only the video playing. When clicking the play button this works about 95% of the time, but when clicking a related video there is about a 5% chance that all of the UI panels will not fade properly. Although this leaves UI elements scattered around the player, simply rolling over each panel and leaving it will allow the UI elements to fade properly. Very rarely, and it may have been eliminated completely at this point, the UI panels will become stuck on or off in the play area. I haven’t seen the glitch in a while and I’m assuming it has been eliminated at this point.

Future plans for this player include an embed option, a built-in email form instead of using mailto in the URL argument, linking straight to a single video instead of the entire playlist, and fixing the UI bugs.