Auto-hide Skin Elements

Learn to use a Timer's logic block to hide elements, like a menu, during user interaction.

The basic set-up to hide elements

1. Open the Skin Editor.

2. Add an element. A Text Box, for example.

3. Add a Timer element by first selecting it in Toolbar and then drag around the Text Box in the Canvas. The Text Box will become a child of the Timer.

   

4. In the Timer properties, open the Timer panel and select Player Inactive for Type.

5. Set Timeout to 2 seconds. Keep Repeat set to One Time.

6. In the Appearance panel, notice that the arrows next to Visible are orange. This means there is already a Logic Block applied. Click the orange arrows to open the logic block.

   The Logic Block states that if the Timer is not active, the Timer (and all of its child elements) will not be visible. This is an expression with one condition.

   We just need to make one adjustment to this expression so that the text box hides when we interact with the panorama.

7. Change the Value from false to true.

   Now it states if the player is inactive (meaning, no user interaction) and the Timer is is now active (value = true), then the Timer and all its children will hide (visible = false). Then, after 5 seconds (the timeout set in the Timer properties) the Timer becomes inactive and the Logic Block falls back to the default value of Visible = true.

   

   Click OK to close the settings.

8. Use Live Preview to see it in action. When you spin or interact within the player, the text box will hide and when you stop interacting, the text box will appear again.

9. Save the skin.

Hide elements only during interaction

In the above example, the Text Box starts hidden and doesn’t appear until after interaction. But, what if you had a menu showing initially and only wanted to hide it during interaction? For, this, you’d have to not make the Text Box (or menu) a child of the Timer. Again, we’ll use the Text Box as an example, but you could hide an entire menu or even the entire skin in this manner.

1. Add a Timer to the Canvas.

2. Add a Text Box to the Canvas.

3. Add a variable. Open the Skin’s Properties (click anywhere outside of the Canvas) and add the following variable:

   Name	Type	Init Value
   var1	True/False	false

4. In the Timer’s properties, add a few actions:

   Source	Action	Type	Target
   Activate	Visibility	Hide Element	Text 1
   Add an Action Filter: Trigger = var1; Comparison = =; Value = true.

   Source	Action	Type	Target
   Deactivate	Visibility	Show Element	Text 1

   Source	Action	Variable Name	Operation	Value
   Deactivate	Set Variable Value	var1	Set(=)	true

5. Save the project and test the output. The element should show initially, then hide when you interact with the panorama. And then it should return to being visible.

See also…

• Logic Blocks

• Timer

• Download and Add V6 components to V7