Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
28th October 2011

Web Workshop: Go back in time with Nike Air Jordan

Discover how to create inspirational interfaces inspired by the classic Nike Air shoe

INSPIRATION: www.nike.com/jumpman23/evolution85/#/Product

Web Workshop: Go back in time with Nike Air Jordan

The design of this microsite is a beautifully minimalistic affair. It shows technical drawings of the Nike Air Jordan basketball shoes, as if they’d come straight from a draughtsman’s board. The whole screen is an animation that shows Nike Air Jordan shoes drawn and then explode apart. As each shoe explodes, it is replaced by a drawing of another. Underneath the design, a timeline is laid out with key dates of the shoe’s progression. Along this timeline is a playhead that you can grab and move backwards and forwards to see shoes explode or reform, depending on the direction you are dragging. The whole thing is incredibly tactile to explore. The final shoe drawing turns into a real shoe via cut-up segments appearing, then spins to reveal the latest product. A great device for getting people to interact with a product.

<COMMENT>

Web Workshop: Go back in time with Nike Air JordanUsing animated content

“The appeal of this site is that the animation draws the user in. People are drawn to movement, so try not to have something animated if it isn’t the main content of the site. That’s why banner ads become so annoying, because they try and get you to look at the movement. Animation, if used right, should direct attention in a good way.”
Mark Shufflebottom, www.webspaceinvader.com

TECHNIQUE | Control a MovieClip from a slider

01. Set it up
You’ll need an animation MovieClip on the stage and name the instance ‘mc’. Create a movie clip with a line, 350 pixels wide. Name this instance ‘controller’. Open this and add another movie clip named ‘drag’ as the scrubber. Now return to ‘scene 1’, open the ActionScript editor and add the following code:

001 import flash.geom.Rectangle;
002 var dragging:Boolean=false;
003 var pos:Number;
004 var percent:Number = controller.
width/100;
005 var dragPos:Number;
006 mc.addEventListener(Event.ENTER_
FRAME, moveListener);

02. Do it every frame
The following code should then be added, which is the function that’s called ‘every frame’. This checks to see if the playhead is being dragged. If it isn’t, then it moves the playhead proportionally along the line we set up in step 1. If the playhead is being dragged, it moves the animation in time with the playhead position.

001 function moveListener(e:Event):void {
002    if (dragging==false){
003        pos=(mc.currentFrame/
mc.totalFrames)*100;
004        pos=Math.round(pos);
005        controller.drag.x=pos*percent;
006    }else{
007        dragPos=(controller.drag.x/
controller.width)*mc.totalFrames;
008        dragPos=Math.round(dragPos);
009        mc.gotoAndStop(dragPos);
010    }
011 }

03. Constrain the drag
We wouldn’t want to start dragging the playhead and it continue forever, so we need to constrain it so it doesn’t just fly off. The next section of code sets up a rectangle at 0 pixels on the x and y, then makes it 350 pixels wide and 0 pixels high. This enables you to just slide back and forth along the
350-pixel wide line from step 1.

001 var constraint:Rectangle = new Rectangle (0, 0, 350, 0);
002 controller.drag.addEventListener(Mo useEvent.MOUSE_DOWN, drag);

04. What a drag
The next section of code tells Flash what to do when the mouse is down on the drag. First of all, it stops the animation playing and starts the actual dragging of the ‘drag’ MovieClip. More importantly, we set the variable dragging to be true. This allows the playhead to control the MovieClip on the stage.

001 function drag(event:MouseEvent):     void{
002    mc.stop();
003    controller.drag.startDrag(false,
constraint);
004    dragging=true;
}

05. Let it go
When the user has finished dragging the playhead, we want the MovieClip to start playing again from that position. The following code tells Flash what to do when the mouse is released. The dragging variable is set to false, so the MovieClip takes over controlling the playhead and continues playing.

001 controller.drag.addEventListener(MouseEvent.MOUSE_UP, noDrag);
002 function noDrag(event:MouseEvent):
void{
003    controller.drag.stopDrag();
004    dragging=false;
005    mc.play();
006 }

INSPIRATION | A simple concept

Sometimes a brilliant interface device comes about that can be employed for a variety of different uses. This is the case for the Nike Air Jordan Evolution site. The site borrows an interface technique that we are all very familiar with – the scrubber. This is the moving playhead on the bar at the bottom of videos on YouTube and video applications. We grab the scrubber and can quickly scrub backwards and forwards through our videos, so it works for quickly moving forwards or backwards on a timeline. It’s the scrubber idea that Nike has borrowed to move backwards and forwards on a timeline, to effectively show the evolution of its shoes over a period of time.

TECHNIQUE | Create a vignette effect

A vignette is a great way to capture the attention of the user and get them to look at a certain part of the design. There are a number of different ways to produce them, so here we’ll show you the most common way of doing it.

01. Create a MovieClip
Web Workshop: Go back in time with Nike Air Jordan
Create a new MovieClip symbol in the library and add a rectangle to this. Make the rectangle the exact same size as your stage. You can resize the rectangle after you have drawn it by clicking on it and amending the size in the Properties panel.

02. Change the fill
Web Workshop: Go back in time with Nike Air Jordan
Select the fill type in the colour mixer and change it to radial gradient, then use the paint bucket to fill your rectangle. Make both sides of the gradient black. The colour on the left side should have the alpha value turned down to 0%.

03. Back on the stage
Web Workshop: Go back in time with Nike Air Jordan
It looks a little too dark at the moment but that’s easy to change. Return back to Scene 1 leaving the MovieClip. In the properties panel change the Style under Color Effect to Alpha and reduce the alpha value until you get the right result.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://stockfresh.com Peter

      Nike kicks ass!

    • Tahjion

      nikes fresh