Hey, I had a search and couldn’t find anything, and was just wondering if anyone here had any good resources or some advice.
I’m trying to build a class that can handle a menu or other grid of buttons being keyboard accessible (navigate with arrowkeys, select with another key, here ‘b’).
So far I have the keyboard part working, but you have to click one of the buttons to ‘activate’ it, and I am unsure of the logic needed to do the mouse events. I have added mouse events but don’t see a simple way of integrating them with the keyboard system.
Code is here, and both the class and a test .fla are attached.
Basically, the list of instances are passed by the frame into the constructor in an array. The selector class manages the index in the array of the currently selected button. The frame adds a key event listener, and these keys are picked up by the class to change the selected button and call the roll out and roll over methods to change the states (for this test just adjusting scale to 1.4, but in future, causing them to run a function or similar).
What I would ideally like, ideally, is for the keyboard and mouse to work in sync, as in rolling over with the mouse will update the currentButton index…
If not, just some explanation as to why one of the buttons in the array must be clicked first before I can start using the keyboard would be good.
package {
/*
This is an example of the code used on the frame of the FLA document.
import selector;
var btnArray:Array = [instance1, instance2];
var controlselection = new selector(btnArray, 0, 3); /* 0 = index of start selected. 3 = column height.
consistent length columns only
addEventListener(KeyboardEvent.KEY_DOWN, controlselection.inFocus);
*/
import flash.display.*;
import flash.events.*;
public class selector extends MovieClip {
public var currentButton:Number;
public var navs:Array;
public var TOP:Number;
public var COLUMNS;
//
public function selector(navin:Array, current:Number, colIn:Number) {
navs=navin;
currentButton=current;
handleRover(navs[currentButton]);
TOP=(navs.length-1);
COLUMNS = colIn;//Number of objects per column
super();
/*
This is the code that adds the listeners, but then throws mismatch errors as it passes an event, not the button the event occurs on...
for (var i:int = 0; i < navs.length; i++) {
navs*.addEventListener(MouseEvent.ROLL_OVER, handleRover, false, 0, true);
navs*.addEventListener(MouseEvent.ROLL_OUT, handleRout, false, 0, true);
trace("Adding to " + navs*);
}
*/
}
public function inFocus(e:KeyboardEvent):void {
switch (e.keyCode) {
//left and right
case 37 :
handleRout(navs[currentButton]);
if (currentButton<COLUMNS) {
trace("row cycle up");
currentButton=((TOP+1)-COLUMNS)+(currentButton); //goes to end column
} else {
currentButton -= COLUMNS;
}
handleRover(navs[currentButton]);
break;
case 39 :
handleRout(navs[currentButton]);
if (currentButton>=(TOP+1)-COLUMNS) {
trace("row cycle down");
currentButton=(COLUMNS-((TOP+1)-currentButton));
} else {
currentButton += COLUMNS;
}
handleRover(navs[currentButton]);
break;
//up and down
case 38 :
handleRout(navs[currentButton]);
if (currentButton==0) {
currentButton=TOP;
} else {
currentButton--;
}
handleRover(navs[currentButton]);
break;
case 40 :
handleRout(navs[currentButton]);
if (currentButton==TOP) {
currentButton=0;
} else {
currentButton++;
}
handleRover(navs[currentButton]);
break;
case 66 :// the 'b' key on the keyboard
//Do Navigation
handleClick(navs[currentButton]);
break;
}
}
private function handleRover(currentIn:DisplayObject):void {
// add rest of "over" events
currentIn.scaleY=1.4;
trace("Over");
}
private function handleRout(currentIn:DisplayObject):void {
//commands for roll out
currentIn.scaleY=1;
trace("Out");
}
//
private function handleClick(currentIn:DisplayObject):void {
// commands for click
trace("Press" + currentIn);
}
}
}
