Digitas Cache II: An interactive publication

Digitas Cache II is an annual digital publication for the iPad by Digitas, a full-service marketing agency. Last year we created it in native xCode and HTML5. Although it turned out great—there were some sliders that affected images, and other simple interactions—we weren't getting the interactivity level we wanted using HTML5. This article describes how we made Digitas Cache into a more immersive experience for the user (see Figure 1) by including audio, video, multitouch, and more.

When Adobe AIR 2.6 came out, it was clear that Adobe was moving in the right direction. But it wasn't until they released AIR 2.7 that its real potential was clear: We were finally able to get the performance we sought without compromising much of our process and interactivity that we wanted to explore.

Since this was an AIR project, we approached the project in much the same way that we approach any other Flash project. We used the same proprietary framework we normally utilize but optimized it for a touch device. And because this is a magazine-type app, we were able to separate the different sections into their own mini apps.

One thing that was really easy to implement with AIR was video. We just pulled in an FLV file and played it. Even though it plays on the CPU, we were able to get a decent performance in full-screen mode when we had the video sized at 50 percent and then bumped up its scale by 200 percent. We were even able to layer PNG files on top of it, which made for a nice experience.

For the intro video, however, we wanted to get a really crisp HD feel, so we opted to use StageWebView and place an H.264 video in it. This worked extremely well despite the fact that it isn't possible to have a video auto-play when in StageWebView (it's an iOS browser limitation).

We use FLV videos in various parts of the application (see Figure 2), as well as StageWebView with embedded H264 video. It's worth noting that AIR 3 supports H.264 video, so resorting to the browser will not be necessary going forward.

Probably the most complex section of Digitas Cache, in terms of development, is the "It's OK to Touch" piece, which uses multitouch techniques. The article guides the user through different ways in which they can control sound through gestures—from play/pause to adjusting volume and rating a song. We created our own gesture library and had to monitor up to five simultaneous touch points.

Although most of the Digitas Cache app is vertical, there are a few spots where you can rotate the iPad to reveal additional content horizontally (see Figure 3)—once in the story "Thru the Lens" and another time in "I2TV." We were able to implement this feature very easily by simply listening to a stage RESIZE event. This enabled us to create a nice transition to a custom photo library and to additional content that we delivered in landscape mode.

After our experience developing Digitas Cache II in AIR, we have created more iOS apps using this method than we have natively in xCode. Overall, the factor we were most impressed by was the ease with which we could apply a standard Flash development process for mobile devices, and how well that device responded. Even on an iPad 1 we got 30 fps without needing to use any blitting or any other heavy-duty optimization techniques.

Today most of our mobile development is based on AIR, as it provides a true cross-device platform for mobile app development.