How do I create an interactive sign for a touchscreen?
How do I create an interactive sign for a touchscreen?
An interactive sign is a digital sign intended for deployment to a touchscreen. Interactive signs are created, edited and deployed in the same way as ‘normal’ signs. The only difference is that an interactive sign contains ‘events’:
- A touch-event is triggered when a certain layer is touched, making it act like a button.
- A timeline-event is triggered when the animation reaches a certain frame.
- A timeout-event is triggered when the user has not interacted with the sign for a specified amount of time.
The key to creating an effective usable interactive sign is planning. You need to decide where to add your events (to layers or frames or both), and what actions they will have. The possible actions for an event are:
- Jump to a particular frame in the sign.
- Pause / play the animation timeline.
- Launch a full-screen video playlist (then return to the original sign).
Example Interactive Sign
As an example, suppose we want to create a simple interactive menu. It will have an introductory animation for 2 seconds, and two ‘buttons’ (‘Special Offers’ and ‘Old Favourites’). When the user touches a button, the sign will show corresponding information for 4 seconds before returning to the introduction.
To achieve this, the timeline could be divided into these three sections:
- Introduction – from frame 1 to 50 (2 seconds)
- Special Offers – from frame 51 to 150 (4 seconds)
- Old Favourites – from frame 151 to 250 (4 seconds)
The sign will pause when the timeline reaches frame 50. Then when the user touches a button, the timeline will jump to the Special Offers or Old Favourites section as appropriate, resume playing, and then automatically jump back to the introduction at the end of that section. This could be planned out in more detail as follows:
Interactive Layers (acting as buttons)
‘Special Offers’ text layer – Touch-event [Jump to frame 51 / Play timeline].
‘Old Favourites’ text layer – Touch-event [Jump to frame 151 / Play timeline].
Frame 1: Introductory animation begins
Frame 49: Introductory animation finishes, with ‘Special Offers’ and ‘Old Favourites’ layers visible.
Frame 50: Timeline-event [Pause timeline]
Timeline (Special Offers)
Frame 51: Special Offers animation begins
Frame 149: Special Offers animation finishes
Frame 150: Timeline-event [Jump to frame 1]
Timeline (Old Favourites)
Frame 151: Old Favourites animation begins
Frame 249: Old Favourites animation finishes
Frame 250: Timeline-event [Jump to frame 1]
Adding Touch-Events in Creator
In the Layers panel, there is an events column identified by the event symbol at the top of the column (which looks like an arrow with a semi-circle).
- Click within the events column for the layer of interest.
- A ‘Layer Events’ dialog will appear.
- Click ‘Add New Event’ and choose the action to be triggered.
- Provide any other data needed for that action:
- If you choose ‘Timeline go to frame’, you will need to input the number of the frame that the timeline should jump to.
- If you choose ‘Video Play Fullscreen’, you will need to choose the video playlist that should be played.
- When you have finished, click ‘Update Events’. This will apply your changes and close the dialog.
- In the Layers panel there will now be a little event symbol next to your layer. This allows you to check at a glance which layers have touch-events associated with them.
- To edit or delete existing touch-events, click the event symbol on the relevant layer.
Note that it is possible to have multiple touch-events on the same layer, but they must be of different types.
Adding Timeline-Events in Creator
- In Creator, open the Animator panel (from the View menu, or using the ‘a’ shortcut key).
- Click on the frame where you want to add the timeline-event.
- Click the add-event icon next to the ‘Timeline Events’ title. (This icon looks like an arrow with a semi-circle and a green plus symbol.)
- A ‘Timeline Events’ dialog will appear. This behaves in a very similar way to the ‘Layer Events’ dialog described above. It allows you add, delete and edit the timeline-events on this frame.
Adding Timeout-Events in Creator
- In Creator, click the 'Sign' menu and choose 'Global Events'.
- Click 'Add New Event' and enter the timeout duration in seconds. This is the amount of time that must elapse (since the user last interacted with the sign) before the event will be triggered.
- Specify the action that will be executed when the event is triggered. For example, you might want to:
- Jump to an introductory part of the sign.
- Jump to the final frame of the sign so that the sign will complete and perhaps move onto the next sign in a sequence.
Previewing an Interactive Sign
Interactive signs can be played in Creator (click the triangular play icon in the Animator panel to start). This allows you to check that your events are behaving in the way you intended.
Be careful if you have a ‘Timeline Pause’ event in your sign! When this is triggered, the timeline will pause, and most of the controls in Creator will become disabled temporarily. You can exit this pause mode by doing either of the following:
- Click a layer that has a ‘Timeline Play’ event (if there is one in the sign).
- Click the orange ‘Paused’ label in the Animator panel.
Interactive signs can also be previewed in SignStix Director, but please note that the web preview component in Director is currently under development and so the interactive aspects of your sign might not behave quite as intended. If this is the case, please test your sign in Creator, or (the ultimate test) deploy it to your device.
SignStix devices are designed to work with USB touchscreens that are Win7 HID compliant. However, please note that we cannot guarantee compatibility with any particular model of touchscreen. Testing would be required to confirm compatibility.
Your installer will need to connect a USB cable from the touchscreen to one of the USB inputs on the SignStix device.
Get to grips with creating a dynamic interactive application with our new Video Tutorial.