Mouse Control Over Menu Using Action Script

Scenario

I wanted to create a menu that can be drag or slide in flex, any form of menu - carousel, dock or a scroller. Considering that I'm on Linux and using Flex 3 (which is as far as I know the last remaining flex builder built on Unix)

I came up searching for two days over Google to find a tutorial on how to do it. First thing I looked for is how to create the menu. I've come across this blog by Ely Greenfield that hands a component that gives me the effect that at least I wanted.

The problem with this one is it uses a HSlider to slide the menu and his example uses just pictures that gives an image scroller design. So what I did was to edit this in such a way that it gives me the feature that I wanted.

Updating the code from the tutorial

1. First and foremost, I copy the code and components line per line as possible (except for the components on which I copied the entire folder) so that it would fit my existing project.
   
   
2. I changed the images to a customized box. I created a new component for my customized boxes that activates another function once clicked.
   
   
3. I removed the sliders below since I won't be using it. This throw me an error since parts of the binding is already missing. Instead I replaced it with constants of int type, this is because I don't want the users to change the appearance of my file.
   
   

Originally it looks like this:

<Binding source="sel.value" destination="shelf.selectedIndex" />
<Binding destination="sel.value" source="shelf.selectedIndex" />
<Binding source="angle.value" destination="shelf.angle" />
<Binding source="pop.value" destination="shelf.popout" />

I have change it to:

<mx:Binding source="0" destination="shelf.selectedIndex" />
<mx:Binding source="15" destination="shelf.angle" />
<mx:Binding source="0.05" destination="shelf.popout" />

So why did I do that? sel is the ID of the slider being used to choose the image/box on the shelf. So temporarily I set it to 0 or basically the begging of the shelf. The angle.value on the other hand is a value of the trapezoid being used to make an angular effect on the un-selected boxes. I just assumed a constant value of 15 for this one. The pop.value is used for the selected box, this shows how big it is (That is how I see or read the code). Same thing with angle.value, I placed an exact value of 0.05 for this. I have removed the second line of the original bindings, this is used to update the sel when the shelf is clicked instead of sliding it. Since we are not using the sel anymore, we can just delete it.

The Mouse moves

This is just a simple logic I have used, I know that there are better ways to do it other than this on newer version of Flex. This approach uses action script to detect and move the slide with it.

Simple enough I enclose the whole shelf inside a canvas and have it detect mouseDown and mouseUp avents. During the mouseDown, I store the value of localX into a temporary variable. Upon mouseUp, I again check the localX value and compared it to the temporary variable. The algo goes like this, if the variable is smaller than the new value, go left; if it is bigger, go right; else do nothing. Then after comparison, clear the temp variable.

Below is the actionscript I used for it:

public function getLocalx(e:MouseEvent):void{
 xDown = e.localX;
}
public function checkXDown(e:MouseEvent):void{
 //Alert.show(xDown.toString());
 if(xDown != e.localX){
  if(xDown < e.localX){
   //left
   if(shelf.selectedIndex != 0)
    shelf.selectedIndex -= 1;
   else
    shelf.selectedIndex = shelf.dataProvider.length - 1;
  }
  else{
   //right
   if((shelf.dataProvider.length - 1) != shelf.selectedIndex)
    shelf.selectedIndex += 1;     
   else
    shelf.selectedIndex = 0;
  }
  xDown = 0;
 }
}