MindQuake Serviços de Informática - MindQuake Servicos de Informatica

In this article, I show how you can build cascading menus, sometimes called "Spry" menus, in AutoPlay Media Studio. There is no limit for the number of (sub) menus you can build with this system, and no plugins or proprietary code is needed.

The example will allow you to build dynamic menus that appear below the root menu, as you pass the mouse over the menu items. It is also possible to use the same buttons for the root and the child items, and arrange the root vertically. You can modify the script as needed.

How to use

• Add the Lua script "CascadingMenu.lua" to your CD_ROOT\AutoPlay\Scripts folder.
• Add the following two lines to your On Startup script:

  require "CascadingMenu";
  InitializeCascadingMenu("AutoPlay\\Buttons\\btn_casc01.btn", 80, 30, true);

  You are setting the default button file for the cascading menu, and the width and height of the buttons. The button file must already exist in your project. The last parameter specifies if the menu should be animated or not. Animation means that there will be a short delay before the buttons are displayed and removed from the page. Setting this parameter to false will make the menu respond immediately.
• In your On Show script, load the menu XML and create the root menu buttons. This can be done in small script like this:

  xml = XML.Load("AutoPlay\\Docs\\menu.xml");
  error = Application.GetLastError();
  if (error ~= 0) then
      Dialog.Message("Error", _tblErrorMessages[error], MB_OK, MB_ICONEXCLAMATION);
  else
      local tButtons = XML.GetElementNames("menu", true, true);
      for i, b in pairs(tButtons) do
          -- construct root level buttons
          CreateButton(20, 20+(i-1)*30, XML.GetAttribute(b, "caption"), b);
      end
  end

  If you wish to use custom buttons for the root menu, you can quickly change them setting a different ButtonFile. This is shown in the example for the horizontal root menu. The syntax of the menu.xml file is very simple, you should have no problem understanding (and modifying) it. The caption of each element is the text of the menu button, while the value is the number that will be sent to OnCscMenu() (see next step).
• Most likely, you will want to know which menu option was selected by the user. You need to define a function named OnCscMenu on a proper place. This function will be called by the script and inform which menu was clicked.

  function OnCscMenu(value)
      Label.SetText("StatusMsg", "You selected menu " .. value);
  end

• Finally, for the collapsing of the menu, you must add this to the On Timer script:

  if (e_ID == 99) then
      HideAllMenus();
  end

  The timer event 99 is started in the script when the cursor leaves the menu button. If the cursor remains on the page instead of hovering over a menu item, the menu will be hidden.

Please download the sample projects below and change them to meet your needs.

Download

Vertical root buttons example File size: 118 KB Updated: October 2010

Horizontal root buttons example File size: 121 KB Updated: October 2010

As an idea for further improvement, instead of "normal" buttons for the (sub)menus, you can also use the xButton object. Of course this will require that you make some changes to the scripts, however you would then be able to use images on the items, as well as graphic indicators where submenus exist, like ▼ or ►.