2009 January | BackSpaceStudios Blog

ZOS - Last Tango in Jadac - Impressive Red5!

January 26th, 2009 | 2 Comments | Posted in AS3, Papervision, open source flash, red5

There are many examples of red5 chat tools and apps all over the web. The downside is, we have yet to see any examples used in commercial projects or any real world examples, which makes it difficult for most developers, who are not involved in open source collaboration’s, to see the benefit of using Red5.

However, that being said, I am very excited and proud to say that I, including many other talented developers, was involved in the conceptualization and development of an outstanding, groundbreaking, and innovative use of Red5 for a major web project…

ZOS - Last Tango in Jadac - http://zostv.com/interactive

Last Tango in Jadac, follows an interactive cinematic following the characters of the series featured on The Movie Network.

The experience is a mix of Papervision3D, Red5, and interactive video that take you on a journey while allowing you to explore and discover your own paths and unfold the dense storyline. This project was produced by Whizbang films in association with the Bellfund and LifeCapture Interactive.

The chat tool is quite an accomplishment, it is very unique, and definitely adds to the over all user experience. It allows for users to communicate with each other while they are exploring the the PV3 world of Jadac. Considering there are no avatars the chat tool becomes an essential part of the experience and game play by aiding users follow the storyline and successfully complete the 3 missions, and discover hidden secrets and easter eggs.

The chat tool is a multi-layered application that can be minimized and maximize, sort users, find friends, and choose from to different display options. It also allows users users to log in anonymously, randomly puts users in different rooms, displays current population, handles special characters and html tags, stores and tracks user sessions, disconnects during idle time, and more.

ZOS Chat Organized View

ZOS Chat Random View

We had many obstacles and challenges to over come while working on this project. Initially the chat tool was written in AS2 and eventually we decided to port it over to AS3, as well we had to learn how to uses eclipse, compile java, and build server Red5 modules to handle all our functions. Working on this projec was a labour of love and well worth it it.I hope that in the near future we will be able to extend the chat tool and more features as well as open source it.

At some point I will embark on a step by step tutorial of both the java and as, as well I hope to open source it. In the mean time we hope you enjoy it.

Original concepts for the chat are the brain child of Geoff Whitlock ( CEO, Lifecapture Inc. ), creative concept developed by Dan Riley ( Creative Director, Lifecapture Inc. ), Lead developers Brendan Sera-Shriar and Ryan Andal ( Contracted by Lifecapture Inc. for this project ), Red5 Java developers Brendan Sera-Shriar and Andy Shaules ( Contracted by Lifecapture Inc. for this project ).

The entire project took over 10 months to develop with team of 20 plus developers, designers, writers, directors, producers, motion graphic artists, animators, and other specialty staff, please visit http://zostv.com/interactive for a full list of credits.

Visit http://zostv.com/interactive for the full experince.

BeatMaker Class - Awesome PHUG Workshop!

January 22nd, 2009 | No Comments | Posted in BackSpace Blabber, open source flash, wordpress

This past Tuesday PHUG hosted another great FREE PHUG Workshop at Seneca, Flash Media Server and BeatMaker. I won’t go into to much detail, you read the revieew over at the PHUG site, but I will mention the very cool Open Source Flash class that Dan Zen, presenter ( Sheridan Professor and Inventor ), demoed that night.

BeatMaker Class - Simple Access to Sound Frequencies
Inventor, Dan Zen, has built two wrapper classes that make accessing the Flash computeSpectrum functionality accessible to designers and easier for developers. The SoundBeat class sets up general spectrum analysis and the BeatMaker class extends the SoundBeat class to provide scale and / or alpha animations to sound.

Here is an example below, you can drag the flashing eyes around, also, watch the eyes careful when there is more base and less treble, very cool effect.

Download the files:
BeatMaker
UniqueBalls
Handout

WordPress Workshops - Theme Design and Plug-ins

January 13th, 2009 | No Comments | Posted in Open Source Design, RMI, php, wordpress

After a very successful WordPress workshop at RMI (Rich Media Institute) back in November I have been asked back to run 2 more great WordPress workshops.

Feb 7th – WordPress Theme Design
In this workshop, we will show the process of taking an HTML & CSS designs and PhotoShop templates and converting them into a fully working WordPress theme. Along the way, we’ll look at the main aspects of WordPress theming, some best practices and a few tricks. WordPress 2.6 and 2.7 makes the whole process easier than ever, so get started making your WordPress site look not like a WordPress site!

To find out more and register

Feb 14th – WordPress Plug-ins
“Plug-ins can extend WordPress to do almost anything you can imagine.” In this workshop we will cover the following areas, Extending WordPress, Customizing WordPress Plug-ins, Tips On Writing WordPress Plug-ins, Writing WordPress Plug-ins, and Essential WordPress Plug-ins. Plus, that isn’t enough, we will build a simple Flash plug-in by the end of the workshop that you can take with you!

To find out more and register

Firefox Personas

January 7th, 2009 | 5 Comments | Posted in Open Source Design

Firefox Personas

What are Personas? Personas for Firefox is a extension that adds lightweight theming to your browser. Personas is a very simple way for any designer, beginner or advanced, to easily create themes for your browser on the fly.

Once installed, the Persona selector is dynamically loaded and populated from a JSON feed and all designs are loaded via URLs to remote resources. All changes to the browser chrome are applied instantly, with no need to restart.

Firefox will be releasing an API shortly that will allow developers and designers to submit Personas that are based on Web content, including support for anything that can load in a content window such as HTML, CSS, PNG, JPG, Javascript, SVG and Canvas.

So how do you get started?

*First make sure to download the Personas Extension

Designing your theme:

1. You will need to Download the graphic template files. Download Here.
Standard Personas are made up of two graphic image files, a “header” image displayed as the background of the top of the browser window (i.e. behind the toolbars and the tab strip) and a “footer” image displayed as the background of the bottom of the browser window (i.e. the status and find bars).

The header image should be 3000 pixels wide and 200 pixels tall. The footer image should be 3000 pixels wide and 100 pixels tall.
2. Open these files in any graphic editor
3. Make the necessary changes
4. Re-save the files as whatever_header.png and whatever_footer.png
5. Your ready to test!

Here is a quick tutorial to test in manual mode:

1. In the URL bar of your browser type “about:config” and hit enter.
2. Search for “extensions.personas.editor” by typing it into the Filter box that appears at the top of the page.
3. Double click on the line for “extensions.personas.editor”.
4. In the dialog box that appears prompting you to enter a string value, enter “manual” and click on OK.
5. You should now be in manual mode.
6. Click on the little Fox mask icon in the lower-left corner of your browser, and you should see a “Use Local Header…” option.
7. Click on the “Use Local Header…” option, and it should open up a file selector. Select the header file for your design.
8. You should now see your design in your browser.

Submitting your Persona:
To submit your persona go to http://www.getpersonas.com and click on the ‘Submit’ link in the lower right corner, you can then register an account with Firefox Personas and easily submit any time. Have fun!

Here’s my finished version (the red highlights indicate the area where the Persona is loaded). You can find it in the Personas directory under “Other”.