The Timer component gives you the power of time in the design studio. It enables you to move a component with a predefined speed or kick an action at a specific timing. It can become a real timeline for your project.
1. Edit the Timer
The Timer is a system component: when you insert it, it isn't displayed on your screen, you find it in the List of Objects.
The Properties window gives you access to different options:
Edit timer: lets you create markers, i.e. define specific time(s) to which you want to match specific actions (also available by double-clicking on this component)
Options: you can choose an autoplay and a repetition frequency.
Duration: to define the duration required to fully execute the requested action.
2. Practical cases
1. Define a timing to execute an action
If you want to execute an action within a predefined timing, you should combine the Synchronization and Timer components.
Example: Define the auto-scroll speed of a scrolling area.
- Insert a Scrolling Area component, configure an horizontal scrolling with a 2000px weight.
- Insert a Timer component and define an auto-play with a 4-seconde duration.
- Insert a Synchronization component and in the Properties window, select the two other components. Synchronize the time for the Timer and the "x" positions for the Scrolling Area.
2. Trigger an action at a precise timing
You can also define markers on the Timer and use them to create a timeline. Do you know how to use it? Kid games (if the kid hasn't answered after 10 seconds) or if you want to create a sequence of actions, other than using delays.
Example: Display automatically a pop-up after 5 seconds.
- Insert a Pop-up component and edit its content.
- Insert a Timer component, define an auto-play with a 4-seconde duration. In the Properties window, click on EDIT TIMER to create a marker. At 4 seconds, click on + ADD MARKER to create it.
- Select the Timer and open the Interactivities window. Click on + ADD ACTION to select a trigger. Select the one corresponding to the marker "Time 00:04.00" and the action Define action on a component selecting the Pop-up and the action Open pop-up.