Presentation for Short Circuits: Making 3D Panoramas with Flash

So I got into web-design a couple of years back after watching the seminal video EPIC 2015, by Robin Sloan and Matt Thompson (who maintain the blog Snarkmarket). These journalists have been big players in the citizen journalism movement

This video imagines the world of media in 2015, and looks back upon the previous 10 years of the media landscape, and how it has changed. Though I don’t agree with everything in the video, it was still quite amazing to me, and ultimately moved me to begin creating media online. If you haven’t seen this video, you should definitely check it out.

But not only did it move me to enter the digital online realm, it also gave me a deep appreciation for the medium of Flash, and using to present compelling content. So for the past couple of years, I’ve been designing and developing almost only with Flash to make websites (some cooler than others).

But what is Flash? And why is it so different than other means of presenting content online?

Flash is a product originally made by Macromedia software, and later acquired and maintained by our good friends at Adobe software. The most recent version comes packaged with the Adobe Creative Suite (a pretty expensive piece of software), but you can download a 30 day trial version of any of the Adobe products from here.

What flash is, is essentially a plugin for your browser. This plugin contains a player which interprets .swf files (and this is how you publish a flash document). This plugin enables creators to make really slick and dynamic flash documents that probably wouldn’t be possible using regular XHTML, CSS, JavaScript, and other web-languages, and provides an environment where these documents will perform as designed in a browser window.

So, anyways, a few months ago I ran into this site, which uses something called Papervision3d to create flash documents. I thought its use of 3d panoramas was super cool, and I wanted to know how to do that.

Around that time, I also came across this QVTR panorama (from snarkmarket) which I thought was also cool, but less so. I found the QVTR format of presenting 3d panoramas to be somewhat un-interactive. Yeah, you can click and drag around to see the panorama, but you couldn’t really add interactivity into this in the way you can whilst using flash.

So I decided to find out how to make 3d panoramas in flash, because I have a feeling that this technique will begin to be used a lot when making flash sites.

But, before we go much further, I must present a quick question to myself, and the audience:

So, yeah, it might be difficult to understand why making 3d panoramas with flash would have anything to do with using technology to create social good, but there is a connection.

First, we’ve got to understand the idea of open source software and development, and why open source software, projects, and communities are very beneficial to society as a whole, and to individuals themselves.

Open source movements provide tools, programs, and education for anyone who is interested enough to learn. The source, the insides, everything that makes an open source program is available for everyone to download.

So my answer to the question of what the heck making 3d panoramas has to do with advancing a socially responsible agenda is this: it is a demonstration of what can be done with sharing, collaborating, and given away your product for free. This phenomena can provide access to the latest internet technologies individuals and groups who otherwise could not afford it!

Compared with closed source programs (flash being one of them), where you have to pay a lot of money to either create them, or use them, open source projects give people and organizations the opportunity to use, create, and share for free. So, back to flash:

Flash is not very open. It’s a really cool tool, and you can do mind-bending things with it, but as far as internet technologies go, it is one of the more closed source platforms on the web.

Fortunately, things are beginning to change. In fact, things have changed so much in the past 1 or 2 years to the point where the *COOLEST* flash projects are being created while using open source flash projects.

The open source flash movement has a lot of really cool tools:

• papervision3d
• amfphp
• tweener
• red5

These classes, libraries, programs, and projects are being used today to create and deliver much of the most stunning flash work on the web today. We have, perhaps, come to a point where you cannot create state of the art flash projects Without using one of these open source tools.

So, I’m super glad to say that the open source flash movement is coming along quite well, and in time it might become as accessible to creators as other popular open source projects (linux, drupal, wiki-software, etc…)

So, with this presentation, I’m using the open source Papervision3d library to create a 3 dimensional panorama in Flash.

I’m also using a closed source program to stitch together the photographs used to create the panorama. This particular panorama consists of 134 pictures, taken with your average digital camera. I use Stitcher to stitch them all together, and render them as faces of a six sided cube. It kinda looks like this:

I take these six photos, and put them six sides of a cube in flash by using Papervision3d. With this technique, you can use flash to add some cool interactivity. I wanted to add more to this one for the presentation, but I unfortunately didn’t have the time.

So, in the open source ethos, here is the code in flash used to create this panorama:

You can download the source, pictures, everything for this project here, and if you’ve got any questions, please feel free to ask me or email at tasaunders@gmail.com