The Custom Counter's appearance is customizable according to the project's needs. It can give an updated information about the progress to success or show only fail and update its image when success condition is achieved. When animations needed the custom counters supports sprites. Although the custom counter looks like a button it only takes interactions to account. You may assign a different design to each one of them aimed to offer more visual information to the user. It doesn't set an action for success and fail, but the Giver does.
KUBO AND THE TWO STRINGS: 3 Custom Counters for progress
JASON BOURNE Each letter in the upper right corner of the screen is a custom counter of states, Custom Counter Type: Image. Those counters' initial state is fail (semi-transparent) and when the letters are updated to full opacity, means the success has been achieved.
Selecting a certain type of counter determines the appearance of the counter. Cuestions as "Do I want to show the progress or just the fail and success of the challenge?", "Will I need several counters for the success fail?, "Do I need counters for giving some visual information?" or "Is there a way to hide the counters?"
Changing border colour (Type: Progress)
As the conditions controlled by the counter are achieved, the counter is updated, showing the fraction of success reached theretofore. This fraction is visually expressed with a border around the circle of the counter. Border color can be set with the Outline option of the General submenu.
If you use more than one counter on one same interactive video, you may find it appropriate to use different colors for each one of them.
Use images as state upgrade (Type: Image)
This option allows you to change the rounded progress bar in your counter for a binary counter ─yes/no─ based on different images. When clicking on the Type option you will be prompted to choose an option, select Image and then set the different states: Idle State and Success. Those states will define the appearance of your counter.
Type of image
- Use a static image
If you want to use a static image for the counter design, you only have to import the JPG, PNG or SVG (vector) file to the Library and then, choose it from the drop-down list Idle State or Add states: Success, whichever applies.
- Use a dynamic image (sprite)
You can also assign a sprite type animation to a counter. The procedure is identical, simply import the sprite type image file, go to the submenu General and choose it from the drop-down list Idle State or the Success drop-down list once the Add States has been activated. The design will be animated in this case rather than static.