Getting the Flash UI Element to send us a Message

The final step of this tutorial will detail the necessary steps required to handle events posted from the UI Event that we exposed in the Flash UI ActionScript, with a value we set in the code, using visual scripting nodes; these nodes are generated by reading the UI Elements XML file we modified previously.

For this, we will take the UI element that we extended previously and add the functionality using the Event we defined in the UI Element XML, similar to how we hooked up the exposed function in Chapter 7 - Using the Exposed Function.

Receiving and Reacting to the Event

Follow the steps below to receive and display a debug message from the event that is triggered when a button is pressed:

Flow Graph

1. Add the UI → Events → uiQuickStart → OnButtonPress node to your graph.
   
   OnButtonPress
   
   
2. Connect the On Event output and Button Name output of the OnButtonPress event node to the Show and Message inputs of a DebugDisplayMessage node.
   
   Connecting the OnButtonPress node to the Debug:DisplayMessage node
   
   
3. Next, connect the On Show output of our UI:Display:Display node to the Set input of a UI:Display:Config node; also set the Element input of the UI:Display:Config node to uiQuickStart and enable its Cursor and Mouse Events inputs (set them to 1).
   
   Enable the Cursor and Mouse Events inputs
   
   
4. Once you enter Game mode, you will notice that you have control over the cursor. Place the cursor over our UI button and click the left-mouse button; a message should appear in the top-left corner of the Perspective viewport showing "btnTest".
   
   btnTest
   

Schematyc (Experimental)

1. Add a DebugDraw component to your graph.
   
   DebugDraw component
   
   
2. Find and add the Signal → Receive → uiQuickStart → FlashElement:uiQuickStart → OnButtonPress node.
   
   OnButtonPress
   
   
3. Next, add the Function → Components → Debug Draw → Draw2DText and connect its In and Test pins to the Out and ButtonName pins of OnButtonPress node respectively.
   
   Draw2DText
   
   
4. To enable the Cursor and Mouse Events, we'll add two of the Function → Components → FlashElement:uiQuickStart → Set Instance Flag nodes and connect them in sequence after the RegisterKeyboardAction node.
   
   Set Instance Flag node
   
   
   Connect the two Set Instance Flags in sequence
   
   
5. You now need to select each Set Instance Flag node.
   1. On the first node set the Flag property to Hardware Cursor and check the Value property.
      
      Set Flag to Hardware Cursor and check the Value property
      
      
   2. On the second node, set the Flag property to Mouse Events and check the Value property.
      
      Set Flag to Mouse Events and check the Value property
      
      
6. Once you enter Game mode, you will notice you have control over the cursor. Place the cursor over our UI button and click the left-mouse button; a message should appear in the top-left corner of the Perspective viewport showing "btnTest".
   
   btnTest