UDN
Search public documentation:

CLIKOptionTabView
日本語訳
中国翻译
한국어

Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 Home > User Interfaces & HUDs > Scaleform GFx > Storing and Retrieving Options in a Tab View

Storing and Retrieving Options in a Tab View


Overview


A quick tutorial on how you would store and retrieve options from a tabbed view.

Tutorial


  • Using the TabNavigatorDemo file, create a new view (MyView) by duplicating one of the other views in the library (Say SquareView), with export for ActionScript (the linkage ID) set to 'MyView'.
  • In this view, add a toggle button with the instance name of 'myToggleButton'.
  • Also add the following code on the timeline of this view:

ActionScript
  myToggleButton.selected = _root.options.myToggleButton;
  myToggleButton.addEventListener("select", this, "onSelect");
  
  function onSelect()
  {
    _root.options.myToggleButton = myToggleButton.selected;
  }
  

  • Back to the main (_root) timeline, add a regular button to the stage on the 'demoPanel' layer with the instance name of 'myButton' on the first keyframe.
  • Add this code on the first keyframe as well:

ActionScript
  myButton.addEventListener("press", this, "onPress");
  
  function onPress()
  {
    gotoAndStop(2);
  }
  stop();
  

  • Create a new layer called 'vars', with a single keyframe that spans the entire _root timeline. This keyframe/layer will store your global variables which can be accessed from anywhere.
  • On this keyframe, add the code:

ActionScript
  if (!options)
  {
    var options:Object = {};
  }
  

  • Create a second keyframe on the 'demoPanel', 'demoComponents', and 'background' layers (but not the vars layer). And on this keyframe, on the 'demoPanel' layer, add another button with the instance name 'myButton'.
  • Also add this code to the 'demoPanel' layer on keyframe 2:

ActionScript
  myButton.addEventListener("press", this, "onPress");
  
  function onPress()
  {
    gotoAndStop(1);
  }
  stop();
  

  • Delete the tab view movie clip ('demoComponents') on this frame (frame 2), so that only the button exists on frame 2.
  • Ensure this code is inside the 'demoComponents' movieclip (on frame 1):

ActionScript
  bb.dataProvider = [
      {label:"Polygon", data:"PolygonView"},
      {label:"Circle", data: "CircleView"},
      {label:"Square", data:"SquareView"},
      {label:"MyView", data:"MyView"}
  ];
  
  Selection.setFocus(bb);
  stop();
  

  • Publish/Test. Everything should work as expected.
  • Go to the MyView view using the button bar.
  • Then click on the toggle button to set its toggled state to true.
  • Then select another view.
  • Then reselect MyView, and the toggle button is still selected.
  • If you press the button to go to frame 2, where there is no tab view movie clip, then return to frame 1 with the button on that frame, and then select MyView, the toggle button should have remembered its last state.