Category: Projects

E3 2010 Interactive Kiosk

Posted on July 9th, 2010 in Gaming, Projects, Tech

Built Using: Flash CS4 + ActionScript 3
Deployed On: 4 Sony Vaio L-Series Touchscreen PCs
Browser Used: Firefox 3.6 with R-kiosk Plugin
Used During: E3 2010 at the SouthPeak Games Booth

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.
Main Menu

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.
Game Overview

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 Screenshots

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.
Game Trailer

Kiosk Installations at E3 2010
Kiosk preparation during E3 setup:
Kiosk Setup

Kiosks installed and in place:
Kiosks Setup

Watching a trailer on the kiosk:
Kiosk Demo

Kiosk active during the show:
Kiosk During Show

1 Comment »

HTML5 Video Player – Version 1.2

Posted on May 7th, 2010 in Projects, Video, Web
HTML5 Video Player Version 1.2

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.

1 Comment »

3D Dot Game Heroes Official Website (EU)

Posted on April 8th, 2010 in Projects, Web

The official European 3D Dot Game Heroes website is the first full flash + action script 3 website for SouthPeak Games. The site is straight forward and the below screenshots speak for themselves. Check out the link to the live site below to see how the entire thing flows together. All images and site copy provided for this project. Site flow, structure, and functionality developed around the images and copy supplied.

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.

No Comments »

<< Rewind