Week 7 - Basic Interface cont.

Exercise:

Looking back on the previous user testing session, a lot of the feedback received was more qualitative than quantitative, and were not as specific or objective. One of the questions asked was whether they understood the concept of ZipperBan through watching the video, and although many had answered ‘yes’, it was unclear to what extent they understood the concept. Perhaps they thought they understood the concept, but their idea of it is different to how I wanted to portray it. The feedback in this case would need to be more specific to be able to be quantified, and then acted upon for improvement e.g “on a scale of 1 - 10, how easy was the concept to grasp?” etc.

This week I had continued to work on the prototype and simulating the zipper motion in Flash. At the moment the biggest challenge is to create a slider in AS3 that allows the user to drag an element along an arc, to simulate the arc of a backpack zipper. A demo of what I want to achieve can be found here: http://evolve.reintroducing.com/_source/flas/as3/DragAlongArc/

The concept is similar to drag-and-drop, so I researched how to click and drag an element around the screen. The challenge is to constrain the motion so that it follows a defined path no matter where the cursor is. Basic drag and drop within a zipper element:

this.addEventListener(MouseEvent.MOUSE_DOWN, startDragging, true);

this.addEventListener(MouseEvent.MOUSE_UP, stopDragging, true);

function startDragging(e:MouseEvent) {

zipper.startDrag();

}

function stopDragging(e:MouseEvent) {

zipper.stopDrag();

}

After some more research, I found some external libraries that seem to do what it is I need for the prototype. The result of this can be found at http://snorkl.tv/dev/pathDrag/:

The problem with this is that I would need to use an external library and I would prefer to try to recreate this without the use of third-party plugins.

I started to look deeper into how a motion like this would work: as the user drags an element left to right, the vertical displacement follows a defined path; as element.x changes, element.y = a predefined function of x. This led me to think about using an x^2 function to create a parabolic shape. I had to revise basic parabola maths for this:

y= ax2 + bx + c

First I sketched where the arc would be (zipper path) in relation to the rest of the screen to get the pixel values so that I can plug these values into an equation to then get a formula for y. It takes 3 points to uniquely define a parabola. Note that because of the origin being the top-left corner, any y-values are negative:

A sketch of using parabolas as a solution are shown below:

The equation found from the second sketch is y = -0.01x2 + 6x - 1000. This was incorporated in the prototype however the position of the elements were adjusted slightly which varied the equation. In order to incorporate this in AS3, I had to create some nested listeners: one on the zipper element to listen for a click, and once this happens there is one on the stage to listen for the mouse coordinates.

The result: