Component states have arrived along with gradients and a component editor UI refresh.

You can now apply different states to certain components to add to the interactivity of your scenarios. Set states for hover, active, selected, dragging and more defaults that are set based on user interaction or create your own custom states and set them using the action editor.

Component States

Component states allow you to be more creative with how your players interact with your content. You can now apply states to the following components:

• Text
• Image
• Video
• Audio
• Shape
• Icon
• Button
• Choices
• Download
• Blank

By default the following states are available:

• Hover - when the player hovers over the component
• Active - when the player presses the component
• Disabled - manually set via actions
• Selected - manually set via actions
• Visited - when the player has pressed the component
• Dragging - when the player is dragging the component
• Dropped - when the player has dragged the component
• Focus (for buttons) - when the component has keyboard focus

Setting the styles for these states is optional and will only be applied if there is a relevant state set for the component. Beyond the default states you can also create your own arbitrary custom states. These can then be set manually via the action editor.

Gradients

You can now add gradients to components that use a background color. You can add multiple colors, set their position in the gradient and also select the gradient type, either linear or radial. See the video above for an example.

Component menu UI refresh

This update also includes a UI update for the component settings menu. We have improved the grouping of controls for consistency and increased the number of controls you can see on screen at the same time making it easier to edit your components. The Show When control has been added to the top next to the hidden toggle for easier access and the new States control is available at the very top. When you select a state to edit the component menu will update to show only the controls you need.

Other updates

A few other improvements have been included in this update.

• You can now style individual hotspots in a hotspot component meaning they can be different sizes, color and use a different icon if required.
• You can now manually set the width and height of choices shown in a choices component under the layout controls
• There is a new default style option for visited choices in the style editor
• Countdowns can now be styled in the style editor and the alert shown when they start is now optional
• The "Pick Task" has been renamed to "Inventory Task" as this better fits the activity
• The charts component has been improved to handle colors and chart types better

Happy building

We hope these updates add another level to your learning content, branching scenarios, scenario based activities or whatever you are using Yo Scenario for. Any feedback, please get in touch.