Category Archives: Web

PercentMobile – Free Mobile Analytics

My buddy Stan Wiechers just launched a supercool new service that provides Free Mobile Analytics – PercentMobile. Check it out if you want to see how many of your users are viewing your site on a mobile device and what kind of device they are using. To sign up you can use the invite code “airtight” (good for 100 invites).

New Photoshop Scripts for Airtight Viewers

script ui

Jeff Tranberry over at Adobe just built a new set of Photoshop scripts for SimpleViewer, TiltViewer, AutoViewer and PostcardViewer. These scripts allow you to easily create Airtight galleries with Photoshop CS3 and up. Just select your image folder and gallery options to instantly create a gallery.

Building 3D Flash Sites that Work

It seems like every other site on FWA is using 3D Flash these days. 3D effects are great for adding an element of surprise to a website, since it’s still a relatively new technique. I’ve been building 3D engines since the Director 5 days, so it’s great to see 3D finally hitting the mainstream.

In this post I will describe some of the technical constraints to be aware of when building 3D Flash sites, then I will give examples of recent sites that are doing 3D right.

I’m a big believer in designing within technical constraints. Working with the technology rather than fighting it. Some of the most beautiful design is done in static black and white. Embracing constraints can actually inspire designers and lead to innovative solutions.

3D FLASH CONSTRAINTS

Responsiveness

With 3D sites its important to keep the frame rate up (at least 20 fps). Otherwise your animations are going to be jittery and responsiveness is going to suffer. The simplest way to increase frame rate is to make the active 3D area smaller (in pixel size). Other options to increase performance are:

  • Reduce the number of 3D objects
  • Use 3D panels with bitmap textures over 3D models
  • Use 2D sprites over 3D objects
  • Use flat color textures over bitmap textures
  • Use non-precise bitmap textures over precise bitmap textures

Interaction

If you go to the trouble of using a 3D engine you need to make it interactive. Playing canned animations on button click does not provide any advantage over a pre-rendered video animation that may be cheaper to produce and may look better (see an example here). One way to provide a nice immersive 3D experience is to move the camera slightly on mouse move (sometimes called ‘mouselook’). This approximates how the world looks when we move our head around. It’s also important to keep motion and camera movement simple. Too much flying around can cause confusion and even nausea :)

Simplicity

Complex, realistic 3D environments are beyond the ability of the current generation of Flash 3D engines. It is often better to add a few simple 3D elements to an otherwise 2D site. For example the 3D page flip (click the ‘Flash94 CMS’ button here for an example ). A great source of inspiration for this type of design is TV motion design. TV ads often use subtle 3D animations on otherwise flat layouts.

Load Time

The 3D engine itself is typically ~100k. Then you have the 3D models and textures which can be large. To avoid file bloat, use simple or programatically generated shapes and simple textures. One trick is to display some simple 3D geometry after the engine has loaded and before the rest of the models and textures are loaded.

Development Time

Building a 3D site typically takes at least twice as long as building the equivalent 2D site, depending on the complexity of the 3D elements. When building a 3D Flash site it’s important to iterate early and often. Often 3D sites can be unusable due to bad camera placement or unintuitive controls. It’s critical to get an early ‘hands on’ with the prototype in order to refine the interaction.

EXAMPLE 3D FLASH SITES THAT WORK

Eco Zoo

eco zoo

This is probably the slickest 3D flash work on the web (check out the pop-up books). Incredible attention to detail including depth-of-field blurring. Uses a fixed-size 3D area and Paper Mario style planes over true 3D models. One gripe is that since the camera movement happens on mouse drag you don’t get the 3D feeling until you start dragging around. Using a custom engine built by Roxik who is doing some incredible 3D work out of Japan.

Fifa Street 3

fifa

Combines simple 3D planes with pre-rendered 2D sprites. Uses a 2D overlay menu. Fixed size, centered 3D area. Subtle mouselook gives 3D feel without sacrificing usability. Built by B-Reel using Away3D.

Lumina Live

lumina

Simple but effective. Features a number of randomly positioned planes that form the pixels on a plane. This is reminiscent of one of the first papervision demos. By Kilo Studio.

Karim CZ

karim

Uses simple 3D transitions and flat textured planes. A nice twist on the classic portfolio site. By Phillipe Roy, using Papervision.

If you know any other examples of great usable 3D Flash sites please share in the comments.

New Site – Angeleno

Angeleno

I just finished up a new site for the Los Angeles lifestyle magazine ‘Angeleno’, working with talented guys at Faction7. I did the Flash front-end for the Features and Scene sections.

The idea was to create a ‘HTML style’ site with simple navigation and a focus on the content. This gives a familiar + intuitive user experience while still allowing some nice Flash flourishes. To allow deep linking and back button support we used SWFAddress. SWFaddress has the benefit of working with Google Analytics, to provide per-page tracking. One issue I found with SWFAddress is that it seems to give a noticeable lag when navigating between pages on Vista/IE7.

The features section includes a full-screen option which really shows off the large format photography. The scene section also includes a user-submitted commenting system which is quite cool (registration required). All content is completely dynamic, powered by a custom PHP CMS. The Flash XML content is written into the HTML pages, to allow for SEO.

One snag we hit was integrating DoubleClick ads. Since DoubleClick still does not support AS3 (!), we had to do some CSS/JS hacking to overlay ads in a HTML div. Hopefully DoubleClick will get this working soon.

PostcardViewer Update

PCV

I completed the viewer update trifecta – PostcardViewer has been updated to v1.2.

I actually re-wrote the code from scratch, since the previous code was starting to show it’s age. The main new feature is captions. Since the images are rotated slightly the text requires an embedded font to render. This means that non-english characters, italics and bold are not supported (PostcardViewer-Pro allows you embed different character sets as required). View the complete list of updates here.

I always liked this viewer since it is very simple but fun and effective. It uses Flash’s fast scaling code to produce nice zooming transitions. About the image rotation in PCV – a few people have complained that the rotation degrades image quality. I think the slight rotation adds a subtle real-world cue that makes the images more visually interesting and ‘real’. Think about it – when you look at a set of actual photos, they are not all perfectly perpendicular to each other. Your brain does a fine job of working out which direction is up and which direction is down within the image. Let’s break free of the tyranny of the 90 degree angle ;) (PCV-Pro allows you to disable the image rotation).

PostcardViewer-Pro customers are notified via email when there is an update. All 1.x updates are provided free of charge.

AutoViewer Update

I’ve spruced up AutoViewer a little as part of my spring cleaning. The biggest change is that captions now support HTML formatting, including hyperlinks. The UI was tweaked to be more useful in small format situations (see example below). Also added localization support and some new config options. See a list of all the changes here. Most of the new features are based on feedback posted to the autoviewer forum.

AutoViewer-Pro customers are notified via email when there is an update. All 1.x updates are provided free of charge.

[kml_flashembed movie="http://www.airtightinteractive.com/projects/autoviewer/examples/small/autoviewer.swf" width="400" height="300" fversion="8" bgcolor="#000000" fvars=" xmlURL= http://www.airtightinteractive.com/projects/autoviewer/examples/small/gallery.xml"/]