Trigger SimpleButton Animation With Keystroke

[CharlesTCR]

I have a virtual keyboard on screen, with SimpleButtons for each of the keyboard keys.  In addition to using the on-screen keyboard, I want to allow for physical keyboard input as well.

Everything works, but I am looking for a way to trigger the rollover/down/up animation of the SimpleButton if the user uses the keyboard.  Is this possible?  I'm already capturing the keystroke info and matching it against the SimpleButton, but I don't know how to get the button to play.

Thanks!

[kglad]

it's not possible with a simple button.  use a movieclip button.

[CharlesTCR]

Really?  No way at all?

Well, there's no way I'm going back and doing MovieClip buttons there are over 100 buttons already in place that work as advertised.  I guess I could force the cursor over it.   That's gonna look weird.

[Ned Murphy]

Buttons do not have a timeline that you can command them along.  They lack a number of the properties/methods that movieclip objects have.

[kglad]

you don't have 100 different buttons in your library, do you?  the used library buttons are the only ones that need to be changed.  you would have to arrange all 100 movieclip buttons back on-stage, though.

[CharlesTCR]

Uh, yep.

Each letter is it's own button.  They all use  flash.display.SimpleButton.

[kglad]

check raymond's post.

i was wrong.  the simple button class does allow you to control the apparent button state.

[CharlesTCR]

Thanks guys.

I'll dig into the example and see if it can work for me.  Right now, since the buttons are all imported vector images from Illustrator, I'm not sure how to create the different states (since the states currently exist only in the buttons, not as separate assets).  The thought of recreating all those keys... well, it makes me a little dizzy.

I could just convert the buttons into movieclips and add the actionscript to each movieclip.  But that would have to be done for each one as well.

Thanks again.

[Guest]

If you created the buttons using the timeline/symbols,etc... , they will automatically have states.

Here's the same example using a button symbol attached to a MyButton class.

import flash.display.*;
import flash.events.*;

var b1:SimpleButton = new MyButton()
b1.x=b1.y = 25;
addChild(b1)
var b2:SimpleButton = new MyButton();
b2.x=180; b2.y = 25;
addChild(b2)

b1.addEventListener(MouseEvent.MOUSE_DOWN, h);
b1.addEventListener(MouseEvent.MOUSE_UP, h);
b1.addEventListener(MouseEvent.MOUSE_OVER, h);
b1.addEventListener(MouseEvent.MOUSE_OUT, h);
b1.addEventListener(MouseEvent.CLICK, h);

var saveUpState:DisplayObject=null;

function h(event:MouseEvent)
{
if(!saveUpState){saveUpState=b2.upState;}
switch(event.type)
{
  case MouseEvent.MOUSE_DOWN:
   b2.upState = b2.downState; break;
  case MouseEvent.MOUSE_OUT:
   b2.upState =saveUpState; break;
  case MouseEvent.MOUSE_UP:
  case MouseEvent.MOUSE_OVER:
   b2.upState =b2.overState; break;

}
}

[CharlesTCR]

Thanks for adding this.

Let me ask you this question, then.

I have the button on screen, let's call it "a".  It has three states (up/over/down).

Now, when someone types the "a" key on the keyboard, I want the "a" button on screen to act as if it has been clicked (over, down, back to up).

Is this code going to let me force the animation?

[Guest · Accepted solution]

You may have some luck playing around with the states. This is a simplistic example:

import flash.display.*;
import flash.events.*;

function getRectShape(width:Number, height:Number, color:uint):Shape
{
var result:Shape = new Shape()
with (result.graphics)
{
  beginFill(color, 1);
  drawRect(0,0,width,height);
  endFill()
}
return result;
}

var b1:SimpleButton = new SimpleButton(getRectShape(25,25,0xff0000),
         getRectShape(25,25,0xffff00),
         getRectShape(25,25,0xff00ff),
         getRectShape(25,25,0xffffff)
        );
b1.x=b1.y = 25;
addChild(b1)
var b2:SimpleButton = new SimpleButton(getRectShape(25,25,0xff0000),
         getRectShape(25,25,0xffff00),
         getRectShape(25,25,0xff00ff),
         getRectShape(25,25,0xffffff)
        );
b2.x=60; b2.y = 25;
addChild(b2)

b1.addEventListener(MouseEvent.MOUSE_DOWN, h);
b1.addEventListener(MouseEvent.MOUSE_UP, h);
b1.addEventListener(MouseEvent.MOUSE_OVER, h);
b1.addEventListener(MouseEvent.MOUSE_OUT, h);

var saveUpState:DisplayObject=null;

function h(event:MouseEvent)
{
if(!saveUpState){saveUpState=b2.upState;}
switch(event.type)
{
  case MouseEvent.MOUSE_DOWN:
   b2.upState = b2.downState; break;
  case MouseEvent.MOUSE_OUT:
   b2.upState =saveUpState; break;
  case MouseEvent.MOUSE_UP:
  case MouseEvent.MOUSE_OVER:
   b2.upState =b2.overState; break;

}
}