back

Project profile: Jaguar Design Briefings

by Julie Campagna

Luxury car maker Jaguar infuses global web presence with advanced design enabled by Flash®. Designer Stephen Rose and Developer Kim Holland tell us how Jaguar’s agency approached and built the site’s unique navigation and animation.

As Jaguar's online agency, Global Beach Group is responsible for supporting Jaguar's web marketing efforts. The luxury car maker recently asked Global Beach to create a strategy that highlights Jaguar's emphasis on design. As part of the strategy, Global Beach came up with the idea of Jaguar Design Briefings, an online compilation of videos, photography, and words that capture the future design direction for Jaguar.

Like a magazine, each monthly briefing focuses on a different core design theme. The first Design Briefing, VIVID, introduces the new concept car from Jaguar, the C-XF. The second Design Briefing, PURE, provides insight into the materials and sound system of the C-XF and includes interviews with the team responsible for designing the car.

For this article, we interviewed Senior Interactive Designer Stephen Rose, who shares the technique that he and Senior Flash Developer Kim Holland used for the innovative menu system and the solution for integrating and delivering full-screen video with animation.

The design and development team

With seven years of interactive design experience, Rose was well-positioned to tackle the Jaguar Design Briefings. For this project, his responsibilities included mapping out the site content, defining the stories, and then creating an engaging format in which to present these stories.

On the development side, Holland's main challenge was to build a dynamic framework that would house all the upcoming Design Briefings (that is, individual microsites), including creating a robust, code-managed, code-driven microsite for the VIVID Design Briefing that fulfilled all the client’s data and metric requirements and adhered to Rose's design.

Navigating through full-screen video

Developed with Adobe® Flash 8, the Jaguar Design Briefings are a collection of editions that are released over time like magazine issues. A major challenge was designing a wrapper that enables the user to select a Design Briefing, enter that issue, and navigate around while always being able to jump to another Design Briefing at any time (see Figure 1).

screenshot

Figure 1: The wrapper

But here's the kicker: Each Design Briefing uses high-quality full-screen video. So, when designing the navigation, it was imperative that the experience — from videos to interviews to photos — remain as uncluttered as possible. This meant devising a menu system that enabled Rose to keep on-screen text and buttons to a minimum.

"We needed a solution that would be quick and easy to use but wouldn’t compromise the visual design," says Rose. "Our design had to be intuitive and accessible. If we failed, we risked creating compelling content that no one would be able to navigate."

Rose came up with an interesting and effective solution. When visitors rest the cursor over the full-screen video, the text Click For Menu appears wherever the cursor is positioned (see Figure 2). When users move the cursor off-screen, the message disappears. The experience is devoid of buttons and interactions (aside from the prompt to Click For Menu). According to Rose, "We force users to learn how to bring up the menu without explicitly telling them how."

screenshot

Figure 2. The Click For Menu prompt.

Building the menu system

Global Beach used the blurring and overlay filters to de-focus and bring up the menu system at any point with a single click — even if a video is playing. "For the first time, our team was able to separate navigation from page design and let the content take center stage," notes Rose.

The Tween class is a process by which you can generate a numeric sequence between two values, using a bespoke algorithm. According to Holland, "The common use of the Tween class is to animate a visual property of a MovieClip object, such as position, scale, visibility, or rotation. It works by calculating a value between the given start and end values based on either the time or frames elapsed."

For example:

// A common use of the Tween class:
// Fade a movieclip’s alpha from 0 to 100, using gentle easing.
import mx.transitions.Tween;
import mx.transitions.easing.Regular;
var t:Tween = new Tween( myMC,"_alpha",Regular.easeOut,0,100,20 );
	

For the blur effect, Global Beach applied a BlurFilter to the MovieClip that houses the current section and then used the Tween class to generate a value for the BlurFilter’s blurX and blurY properties. Listening for the onMotionChanged event, they can update the blur’s blurX and blurY properties as the Tween progresses to create the animation.

// Example of BlurTween:
// Note: This example expects the movieclip to only have one filter applied to it – the BlurFilter.
import mx.transitions.Tween;
import mx.transitions.easing.Regular;
import flash.filters.BlurFilter;

// Apply initial filter to the myMC movieclip:
myMC.filters = [ new BlurFilter( 0,0,1 ) ];
// create a tween for each property we want to animate:
var blurXTween:Tween = new Tween( myMC,"blurX",Regular.easeOut,0,50,10 );
var blurYTween:Tween = new Tween( myMC,"blurY",Regular.easeOut,0,50,10 );
// listen to both tweens for events:
blurXTween.addListener( this );
blurYTween.addListener( this );
// catch tween updates and apply changes to the blurfilter:
function onMotionChanged( tw:Tween ):Void{
	var f:Array = tw.obj.filters;	
	f[0][ tw.prop ] = tw.obj[ tw.prop ];
	tw.obj.filters = f;
}
// Reverse tween when finished, so we can sit back and watch
function onMotionFinished( tw:Tween ):Void{
	tw.yoyo();
}
	

It isn’t possible to directly update the items within a MovieClip’s filters array. (The effects are applied only when directly setting the filters properly). Instead, Global Beach must copy the clip’s filters to a local variable, perform the change, and then reset the value.

Beyond the menu: Video and animation

The Jaguar Design Briefings use Mirror Image load-balancing servers to serve high-bandwidth media to global users. "When we had sections with both video and timeline animation, we used cue points in the Flash 8 Video Encoder to synchronize the two," says Rose.

The animations are very short and snappy, and there was no requirement to sync the animation to the video on a frame-by-frame basis. Holland could simply trigger the animations and let them play, rather than constantly monitoring the video playback to reflect rewinding or fast-forwarding in the animation.

To achieve this, Global Beach bundled all the animation snippets into a single timeline and set corresponding cue points and labels in the video and SWF respectively. Once the cue points and labels were in place, all Rose and Holland needed to do was add a listener to the NetStream object's OnCue event and use simple gotoAndPlay commands whenever one was received.

In addition to controlling the animations, Global Beach wanted to give users the ability to skip backward and forward through sections of video. To do this, they interspersed the trigger cue points with chapter markers, parsing them from the FLVs' metadata in order to control the chapter navigation buttons.

Results

To date, almost 35,000 unique visitors have stopped by the Jaguar Design Briefings site, and nearly 2,000 of those visitors have registered for future updates.

As more Design Briefings launch in the coming months and as word spreads, Jaguar and Global Beach expect higher numbers of visitors and registrations. When the Design Briefings are complete at the end of the summer, a detailed campaign report will be compiled. Stay tuned for more details.

Visit Jaguar Design Briefing


Julie Campagna manages the Adobe Edge newsletter as part of her work on the Adobe Developer Relations team. In addition, she contributes feature articles and produces video interviews for the Developer Center. In her free time, Julie likes to dabble in Flash video and produce web-based movies that feature her two English bulldogs, Daisy and Laverne.