Can I create a AS3 menu without buttons?

[setht94929637]

I'm using Flash CS6.

I've found a lot of menu tutorials for creating menus with buttons, but what I want to do is a little different.

I want the animation will begin on a blank screen, then if the user hits any key, the menu options will appear. There will be 7 options, each assigned a number 1-7. I want the user to be able to hit that number on their keyboard to select that menu option.

I've created all the assets and animations for my project, but can't figure out how to script it.

Any help?

[Ned Murphy · Accepted solution]

Google for tutorials/info regarding "AS3 keyboard event listeners"... here's couple links from such a search to get you started

KeyboardEvent - Adobe ActionScript® 3 (AS3 ) API Reference

Adobe Flash Platform * Capturing keyboard input

AS3: Keyboard Interaction

[setht94929637]

Thank you! I'm very new to AS3 coding, so I don't even know what a lot of these things are called so I don't know what to search for.

Cheers.

[JoãoCésar]

Hi.

Adding to what Ned suggested, here is a suggestion of how this be can be achieved.

P.S.: Forgot to mention that the Esc key won't work while testing the app inside of Animate CC. You have to run the SWF from the OS file explorer.

Preview:

AS3 code:

import flash.display.MovieClip;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import fl.transitions.Tween;
import fl.motion.easing.*;
var menu:MovieClip = sideMenu;
var optionsFrames:Vector.<uint> = new <uint>[1, 2];
var optionsNames:Vector.<String> = new <String>
[
     "Option 1",
     "Option 2",
     "Option 3",
     "Option 4",
     "Option 5",
     "Option 6",
     "Option 7",
     "Exit",
];
var optionsKeys:Vector.<uint> = new <uint>
[
     Keyboard.NUMPAD_1,
     Keyboard.NUMPAD_2,
     Keyboard.NUMPAD_3,
     Keyboard.NUMPAD_4,
     Keyboard.NUMPAD_5,
     Keyboard.NUMPAD_6,
     Keyboard.NUMPAD_7
];
var exitKeys:Vector.<uint> = new <uint>
[
     Keyboard.ESCAPE,
     Keyboard.SPACE
];
function start():void
{
     setMenu();
     stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);
}
function setMenu():void
{
     for (var i:int = 0, total:int = menu.numChildren; i < total; i++)
          (menu.getChildAt(i) as MovieClip).txt.text = optionsNames;
}
function callMenu():void
{
     var tween:Tween = new Tween(menu, "x", Back.easeOut, menu.x, stage.stageWidth - menu.width, 0.5, true);
}
function dismissMenu():void
{
     var tween:Tween = new Tween(menu, "x", Sine.easeIn, menu.x, stage.stageWidth, 0.5, true);
}
function highlightOption(index:int):void
{
     for (var i:int = 0, total:int = menu.numChildren; i < total; i++)
     {
          var option:MovieClip = menu.getChildAt(i) as MovieClip;
          if (i != index)
               option.gotoAndStop(optionsFrames[0]);
          else
               option.gotoAndStop(optionsFrames[1]);
     }
}
function keyHandler(e:KeyboardEvent):void
{
     if (e.type == KeyboardEvent.KEY_DOWN)
     {
          if (exitKeys.indexOf(e.keyCode) == -1)
          {
               callMenu();
               highlightOption(-1);
          }
          if (exitKeys.indexOf(e.keyCode) > -1)
          {
               dismissMenu();
               highlightOption(menu.numChildren - 1);
          }
          else if (optionsKeys.indexOf(e.keyCode) > -1)
               highlightOption(optionsKeys.indexOf(e.keyCode));
     }
}
start();

FLA download:

flash_cs6_as3_menu_with_key_navigation.zip - Google Drive

I hope this helps.

Regards,

JC

[setht94929637]

This is amazing! Thanks.

[JoãoCésar]

You're welcome!

P.S.: Forgot to mention that the Esc key won't work while testing the app inside of Flash CS6/Animate CC. You have to run the SWF from the OS file explorer.

[vvvverT]

Hello João, I saw your work.

This menu is amazing, but I not can convert he for use on Application? With MouseEvent.CLICK?

Thanks!

[JoãoCésar]

Thanks!

So here is a more structured, versatile, and comprehensive version of this menu using keyboard and mouse. Please adapt to your needs.

AS3 code:

import fl.motion.easing.*;
import fl.transitions.Tween;
import flash.display.MovieClip;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;
var menu:MovieClip = sideMenu;
var currentOption:MovieClip;
var options:Array =
[
    {
          label:"Option 1",
          keys:[Keyboard.NUMBER_1, Keyboard.NUMPAD_1],
          frames:[1, 2, 3],
          callBacks:{over:over, out:out, select:select, call:call}
    },
    {
          label:"Option 2",
          keys:[Keyboard.NUMBER_2, Keyboard.NUMPAD_2],
          frames:[1, 2, 3],
          callBacks:{over:over, out:out, select:select, call:call}
    },
    {
          label:"Option 3",
          keys:[Keyboard.NUMBER_3, Keyboard.NUMPAD_3],
          frames:[1, 2, 3],
          callBacks:{over:over, out:out, select:select, call:call}
    },
    {
          label:"Exit",
          keys:[Keyboard.ESCAPE, Keyboard.SPACE],
          frames:[1, 2, 3],
          callBacks:{over:over, out:out, select:select, dismiss:dismiss}
    }
];
function start():void
{
    setMenu();
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);
    burgerButton.addEventListener(MouseEvent.CLICK, burgerClickHandler);
    menu.addEventListener(MouseEvent.MOUSE_OVER, menuMouseOverHandler);
    menu.addEventListener(MouseEvent.MOUSE_OUT, menuMouseOutHandler);
    menu.addEventListener(MouseEvent.MOUSE_DOWN, menuMouseDownHandler);
}
function setMenu():void
{
    menu.toggled = false;
    for (var i:int = 0, total:int = menu.numChildren; i < total; i++)
    {
          var child:MovieClip = menu.getChildAt(i) as MovieClip;
          child.mouseChildren = false;
          child.txt.text = options.label;
    }
}
function keyHandler(e:KeyboardEvent):void
{
    if (e.type == KeyboardEvent.KEY_DOWN)
    {
          for (var index in options)
          {
              if (options[index].keys.indexOf(e.keyCode) > -1)
              {
                    if (currentOption)
                        options[index].callBacks.out(currentOption, index);
                    currentOption = (menu.getChildAt(index) as MovieClip);
                    options[index].callBacks.select(currentOption, index);
                    if (options[index].callBacks.call)
                        options[index].callBacks.call(currentOption, index);
                    else if (options[index].callBacks.dismiss)
                        options[index].callBacks.dismiss(currentOption, index);
                    break;
              }
          }
    }
}
function burgerClickHandler(e:MouseEvent):void
{
    if (menu.toggled)
          dismissMenu();
    else
    {
          if (currentOption)
          {
              var index:uint = menu.getChildIndex(currentOption);
              options[index].callBacks.out(currentOption, index);
          }
          callMenu();
    }
}
function menuMouseOverHandler(e:MouseEvent):void
{
    var index:uint;
    if (currentOption)
    {
          index = e.currentTarget.getChildIndex(currentOption)
          options[index].callBacks.out(currentOption, index);
    }
    currentOption = e.target as MovieClip;
    index = e.currentTarget.getChildIndex(e.target);
    options[index].callBacks.over(e.target, index);
}
function menuMouseOutHandler(e:MouseEvent):void
{
    var index:uint = e.currentTarget.getChildIndex(e.target);
    options[index].callBacks.out(e.target, index);
}
function menuMouseDownHandler(e:MouseEvent):void
{
    var index:uint;
    if (currentOption)
    {
         index = e.currentTarget.getChildIndex(currentOption)
         options[index].callBacks.out(currentOption, index);
    }
    currentOption = e.target as MovieClip;
    index = e.currentTarget.getChildIndex(e.target);
    options[index].callBacks.select(currentOption, index);
    if (options[index].callBacks.call)
          options[index].callBacks.call(currentOption, index);
    else if (options[index].callBacks.dismiss)
          options[index].callBacks.dismiss(currentOption, index);
}
function callMenu():void
{
    var tween:Tween = new Tween(menu, "x", Back.easeOut, menu.x, stage.stageWidth - menu.width, 0.35, true);
    menu.toggled = true;
}
function dismissMenu():void
{
    var tween:Tween = new Tween(menu, "x", Back.easeIn, menu.x, stage.stageWidth, 0.35, true);
    menu.toggled = false;
}
function over(option:MovieClip, index:uint):void
{
    option.gotoAndStop(options[index].frames[1]);
}
function out(option:MovieClip, index:uint):void
{
    option.gotoAndStop(options[index].frames[0]);
}
function select(option:MovieClip, index:uint):void
{
    trace("Option " + (index + 1) + " selected");
    option.gotoAndStop(options[index].frames[2]);
}
function call(option:MovieClip, index:uint):void
{
    callMenu();
}
function dismiss(option:MovieClip, index:uint):void
{
    dismissMenu();
}
start();

FLA download:

animate_cc_as3_menu_with_key_and_mouse_navigation.zip - Google Drive

Regards,

JC