PocketShip is a unique game which allows players to join a communal experience on a projector (or any other display) by visiting a site with their handheld device. Visiting pocketship.dyndns.org presents an app-like interface where users customize a spaceship then fly their ship around a shared environment with other users, with the occasional mini-game to spice things up.

PocketShip was created as a 3rd year project in IMD (interactive media and design), a program split between Carleton University and Algonquin College. The result of this is a display spot at this years FITC. The opportunity has been wonderful and we have Algonquin College to thank for it!

Project members include:

• Chris Atallah – chrisatallah.com
• Chris Burt – chrisburt.archonic.com
• Joshua Mark – archonic.com
• Kevin Paquette – kevinpaquette.com

Our instructor for the course of which PocketShip was the term project is the talented James Acres.

How it works

Initial drive train design was quite complicated, but after researching node.js and Unity 3.0, we were pleasantly surprised with how simple it became.

HTML and Javascript on hand held device

Once the client.html is served, the client is connected to the socket server which is has already been created by node.js. All information is on a single html page and what the user sees changes via changing a div’s “visible” css property. This was inspired by jQTouch which we ditched it since it was more than we needed and only added swoopy transitions. Once “join the game” has been hit, it will load the flying interface which is different depending on what the user’s device is.

If the user has an iPhone with iOS 4.2+, then the browser can pass gyroscope data by accessing the javascript references event.alpha, event.beta and event.gamma. This means you can steer your ship by tilting the phone (super awesome!). To make it more usable you have to watch for the window.orientation event as well and change the gyro-to-game behavior. This is because when the browser changes orientation, it will swap event.beta values by 90 degrees which can cause your ship to suddenly steer sideways.

Devices not of the iOS 4.2+ breed have either spotty or no gyroscope browser access. We needed to create a non-gyro interface anyways so we stuck to this simple check – if accessing event.beta returns anything other than “0″ or “null”, then load the gyro interface. If not, go to the touch interface. Touch events are also different between devices however. You can read more about gyro and accelerometer browser access here.

The touch interface accesses, depending on the device, either the “touchmove” event or the “MozTouchMove” event. This covers mozilla mobile, and all known webkit versions (including Safari for iDevices and Android). Devices and browsers we couldn’t accommodate include Blackberry, some Sony and Samsung devices using NetFront based browsers, and Opera Mobile. Any smartphone without a touchscreen is obviously not supported either. There’s a massive variety of devices, operating systems and browsers in the mobile eco-system and all we or anyone can do is attempt to accommodate the majority of users within the effort constraints of the project. We apologize if you could not participate due to incompatibility.

node.js Socket Server

node.js has been a pleasure to work with. Once configured, it serves as an excellent out-of-the-way middle man between PocketShip clients and the game. There’s a few things to note about setting it up though. If you want to have it work on a paid server, you may have difficulty running it if you’re not the root user. If you set it up on your home computer using something like XAMMP, keep in mind the server created by node.js is just for socket connections. Your images will need to be hosted on a web server which node.js by itself does not provide.

PocketShip the Game, running Unity 3.0

Unity 3.0 has been an even greater pleasure to work with. With drag-and-drop functionality, excellent tutorials, built in shaders and particle systems and a socket listener, it’s allowed us to create an impressive result in a limited time. The group is considering using Unity for our senior project as well as a result of the success here.

We hope you enjoyed our little demo and thanks for your interest!

FITC Toronto 2010

FITC 2010 is well underway, here at the Hilton Hotel in Toronto. Saturday’s free “Get a Job!” event managed to be considerably larger than last year and while success is in the eye of the resume-holder, I’d call it a big success. The same goes for the presentations. We’ve seen great talks from Lee Brimelow about multi-touch, great (and hilarious) advice derived from an important mantra from Hoss Gifford and a wonderful look into inspirational works of the past from James White. In just a few moments Adobe presenters Richard Galvan and Mark Anders will wrap up their keynote where Flash and Adobe patriots were enticed with CS5 and wooed with Adobes future plans. The full three day schedule is here. I suspect my favorite event will be the last one.

It’s too bad a fair number of people couldn’t make it. Ash clouds. Think they own the place. No matter where you are, don’t forget to tune in online!

Each one of these logos does a great job of matching imagery with meaning in a creative and beautiful way. After almost resorting to Logo Tournament for my own logo (an embarrassing defeat for any designer), I’ve come up with a concept which will work for Archonic. Expect to see it March 1st.

If you see a logo above you think is better than the rest, then go vote!

People on the project were myself – Joshua Mark, Chris Atallah, Chris Burt, Kevin Paquette and Matt McLean. If you’d like to learn more or build a touch table yourself visit the project “learning center” at BitBox.Archonic.com. The touch input to Flash is driven by open source software called CCV (Community Core Vision) developed by the good people at the NUI Group. If you want to make one yourself, NUI Group is an invaluable resource. Let me (and the NUI forums) know of your multi-touch creations!

It’s here! Greensock’s already very useful and comprehensive tweening platform has evolved into an entire suite of even more light weight and powerful animation engines. I try my best to avoid Flash’s default timeline animations due to their reliance on frame rate, choppiness, lack of easing options and inconvenient editing. There’s other tweening engines out there such as caurina’s, but you won’t find one as versatile, fast, lightweight, well documented and well supported as the ones produced by Greensock.

Version 11 appears to be the most changed release since the tweening platforms inception and there’s a small learning curve to get over. So, here’s the breakdown…

TweenNano

It’s 1.6k! TweenNano can handle your tweening needs for BLANK but it stops there with no support for timeline functions and limited overwrite controls.

TweenLite

This is currently the most commonly used class of the group. It’s gained a little weight (1.9k) which may seem surprising, but the with the utility it’s gained with timeline methods and with the introduction of TweenNano, you shouldn’t have any file size issues. The most comprehensive update to TweenLite is the pause(), resume(), reverse(), play(), and restart() methods, which you can see the power of in the animation on the Greensock blog.

TweenMax

A personal favorite. On top of TweenLite’s functionality, TweenMax adds performance enhancements, overwrite management, tweens for filters, hex colours, volume, tint, and even do bezier tweening.

TimelineLite

A new class that brings timeline controls for building and managing sequences at just 2.5k (8.1k with OverwriteManager and TweenLite).

TimelineMax

On top of TimelineLite’s utility, this brings infinite timeline nesting, time scale manipulation, listeners for START, UPDATE, REPEAT, REVERSE_COMPLETE, COMPLETE events and much more.

The full breakdown is of course on greensock’s version 11 page. All of the above are frequently updated for both AS3 and AS2. I’ll be using TweenMax and TimelineMax in my current project – a suite of 4 Flash touch games for the Royal Canadian Mint’s Vancouver 2010 Olympics campain playable on an HP Touchsmart dx9000.

You can see how it’s supposed to work in the demo video but judging by the comments on abduzeedo and my own attempt to navigate, it doesn’t work terribly well.

I wonder if and when we’ll ever trump the mighty mouse…

0. Get with the times.

This is point zero because I imagine most reading this (who actually do Flash) are using ActionScript 3 and CS3. If you are, move on to point 1.

I’ve done an unfortunate number of ActionScript 2.0 to 3.0 conversions recently. We’re now on Flash player version 10 and CS4, so making projects in Flash 8 and AS2 is downright anti-social. Some advertisers specs require Flash 8 for things like click tags, which is just unfortunate (I feel your pain). If you’re stuck in the past and afraid to make the jump, a free 30-day CS4 trial and a visit to 8BitRocket’s AS2 to AS3 series should get you rolling. A great resource for automatic up converting is Jobe Makar’s Upconverter. For motivation, check out some of the cool things you can do with Flash 10 and AS3. Eventually that is…

1. Use Classes

This seems like a totally trivial point, but they are plenty of Flash developers not taking advantage of the power of classes. With Flash’s inherently object based environment, it’s an excellent place to implement reusable structures. One of a design firms greatest assets is their reusable class library. A powerful collection of classes can cut project time down by well over half. If you’re new, ActionScript.org has a great place to start. The rest of this article is a collection of classes that can make your platform vastly more powerful.

2. GreenSock’s Tweening engine: TweenLite and TweenMax

I use this in about every project I make. This is the most full featured, stable and well documented tweening engine out there. If your flash project needs a refined series of tweens and/or is more interactive than a basic 1-click banner (which should be just about all of them), the benefits are vast. Even if it is just a quick banner, the ability to enter fractions of a second for roll over tweens will separate you from the unenlightened masses. Where this class set shines is in it’s ease of use, speed, and documentation. Jack (a.k.a. GreenSock) is an admirably dedicated developer and the GreenSock support forum is basically a one on one classroom. Very handy.

2. Uza’s Global Class

So you’ve started using classes. You love them. You start dabbling in a more complex project, but wrapping your head around the communication between class and main variables and references to positions on the stage and within class objects has you beating your head against your keyboard. AS2 has native global variables but AS3 discontinued them. Uza.lt to the rescue! This class uses something called a singleton. All you need to know is you can create variables and functions which will be accessible anywhere. I recently used it in this project for the Royal Canadian Mint. Those dates at the top are members of a small class. Getting each instance of that class to react to the scroll bar would be cumbersome without the use of a global class. Speaking of scroll bars…

3. Archonic’s scrollbar

My own creation! Ever tried using Adobe’s component scrollbar? It’s not very fun. This (as you may have guessed) is a dynamically added scrollbar which will mask the movieclip you are scrolling and work out all your scroll ratios and distances automatically. The best part is you can customize each and every bit to look and feel any way you like. And don’t worry, the collection of event listeners on each part and mouse wheel handling makes it behave just like a scrollbar should. Kudos to Kyle Brekke who provided the starting point.

4. MIT’s Bulk Loader

MIT is a wonderful provider of all things brainy and useful. This class set is a large and powerful extension of Flash’s ability to make requests for external information. I’d recommend this particularly for larger projects which are subject to having external assets maintained by a client or anyone other than you. All it takes is a capital letter or under score in the wrong place and Flash can have a crippling hissy fit of a crash. With the bulk loader however, that crash is much more graceful, and may allow the project to continue functioning (just without whatever failed to load). The ease of syntax is also a strong point.

There you have it! Those are just a small collection of general tools to whet your appetite. Here’s some more resources which, if you’re your keen, can keep you busy indefinitely. And I do mean indefinitely.

• GoToAndLearn

  Possibly the greatest resource for both bleeding edge and beginner Flash, Flex, Photoshop and any combination of Adobe publishing tools.

• Adobe.tv

  This isn’t as widely known as it should be. Adobe’s own library of video tutorials on everything Adobe.

• Senocular’s ActionScript Library

  If you’ve ever posted your Flash woes on various forums out there then you know senocular (who has his own Flash blog here).

• Kirupa Forums

  A very enthusiastic community with lots of extra curricular chat.

• ActionScript.org Forums

  Quite busy – your question might go unanswered. Make sure to do some extensive searching though, your answer is probably there.

• GoToAndLearn Forums

The most professional of the bunch. No matter the complexity of your problem, the experts here have tackled it.

If you’re to take just one point from this post, make it this: Be active! Be a member of the community and you’ll find yourself swimming in no time.