The initial idea and rough implementation of Justin’s Dice have been around since late February, but it wasn’t until I finished the new version of UnholyKnight.com that I had the time to clean up the design and refine the code for the Justin’s Dice project.

Justin’s Dice brings the time-honored tradition of channel surfing to the web. Just go to JustinsDice.tv and you’re presented with a random channel from one of many live broadcasters on the popular video streaming site Justin.tv. Don’t like what’s on that channel? Hit the randomize button at the bottom of the page and you’re taken to another random channel from the Justin.tv network.

Justin’s Dice works by downloading the current live broadcast XML list from the Justin.tv API every thirty minutes. The downloaded list is stripped of any channels that have been flagged as channels only appropriate for audiences 18+ and is then inserted into a database. Visitors to Justin’s Dice get a random channel from the channel database to watch. Simple, but it makes for a fun channel surfing experience.

Enjoy surfing!
http://www.justinsdice.tv

I’ve spent the past few weeks putting together the 2011 version of UnholyKnight.com in my never-ending quest to find a blog format that balances structure with sanity. The goal of the new design? Structured content under the umbrella of a single website, UnholyKnight.com. Instead of branching off into new blogs, as I tried with Life with Code, the main page of the site will serve as a launch pad to the several subjects that I find myself writing about often. Only want to see what I’ve been talking about in relation to music? Jump over to http://unholyknight.com/category/music.

Got it? Good. All you need to know is that this new design should hopefully spark more activity on my part as I start to fill each subject’s section with up-to-date content.

The new site design came out of my head in the beginning of February when I got hit with the inspiration for the current content flow and design. Design aside, I’m still no artist. This site was proudly built by Dallas-based Erics. Senior Blanco from Unkommon Kolor lent his artistic hand to create the background that the blog floats on top of and he did a great job. @ him on Twitter and tell him how much of a badass he is!

Let’s get this year started. Take it away Mr. Sheen!

#winning quota reference met. No more. I swear.

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.

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.

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.