With ForeUI we can define actions for each element, thus we can create interactive prototype and run simulation in web browser.  The behavior of element can be described as one or more event handlers, each handler is a flowchart that indicate the way to perform actions.  Here are some tips to help defining a clear and effective flowchart.

Don’t Place Pause Action at the End

The Pause action will pause the current thread and wait for a while before executing the subsequent actions.  In other words, Pause action can delay the subsequent actions. So if no action is defined after the Pause action, the Pause action will not really take effect, even if you place it in a loop, the Pause action will not pause anything in the next circle.

So placing the  Pause action at the end is not a good idea, the table below show some good and bad cases:

Good Cases Bad Cases
  • Event
    • Pause 1000ms
    • Action A
  • Event
    • Action A
    • Pause 1000ms
  • Event
    • Action A
    • Pause 1000ms
    • Action B
  • Event
    • Action A
    • Action B
    • Pause 1000ms
  • Event
    • Loop
      • Pause 1000ms
      • Action A
  • Event
    • Loop
      • Action A
      • Pause 1000ms
  • Event
    • Loop
      • Action A
      • Pause 1000ms
      • Action B
  • Event
    • Loop
      • Action A
      • Action B
      • Pause 1000ms

Use Only One Pause Action In the Loop

When you are defining animation, Pause action will be very useful.  Sometimes we need to place the Pause action in a loop.  But there is a limitation: if you place multiple Pause actions in one loop, the loop will not really work.  So please use one Pause action in one loop.  The table below shows a good case and a bad case:

Good Case Bad Case
  • Event
    • Loop
      • Pause 1000ms
      • Action A
      • Action B
      • Action C
  • Event
    • Loop
      • Action A
      • Pause 1000ms
      • Action B
      • Pause 1000ms
      • Action C

If you really need the behavior showed in the bad case, you can use this structure to workaround:

Case to Workaround
  • Event
    • Loop
      • Pause 1000ms
      • Switch
        • Case A: Action A
        • Case B: Action B
        • Case C: Action C

Thus you can perform one action in one circle, with one second interval.

Make Good Use of Copy and Paste

The behavior editor is improved a lot in V1.70 and provides copy and paste feature.  You cut, copy or paste item in the behavior tree via the context menu.  You can do these cross items, cross events, or even cross elements. That will a lot of time when you try to define similar behavior for multiple elements.

behavior_tree_context_menu[1]

Of course you can also use drag and drop to move or copy items in the behavior tree.

behavior_tree_dnd[1]