A couple of weeks ago I proposed two workflows for a common use case: learner has to click a number of hotspots which show explanations before being able to continue in the course. That example was for a non-responsive (maybe rescalable) project. If you missed it: Comparison Workflows for Hotspots
At the end I promised a follow-up article discussing how this can be realized in a responsive project, developed with Fluid Boxes. I will use exactly the same example, same variables (use both my custom theme and a shared action to get them quickly into the Fluid Boxes project – see Shared Actions Tips).
Preparation – Changes
The shape buttons (arrows) used as hotspots had 4 InBuilt states in the original article. I want to use as much normal fluid boxes as possible. For that reason I have to simplify the Visited state where originally I added a checkmark image. This is not possible in a normal fluid box. The new object states look now like::
Show/Hide Workflow – Changes
In the original file the text shapes containing the explanation when a hotspot is clicked, were grouped and stacked in the same location. Grouping allowed to simplify the actions. Each action had the Hide Group command, before showing the appropriate text shape. Two parts of the workflow are impossible in a normal Fluid Box:
- Grouping cannot be used. The consequence is that you’ll need to have a command line for each text shape to be hidden. In this example, where only 3 hotspots are used, that is not too bad but it is getting worse when the number of hotspots increases. The advanced actions FlashAct, ThemeAct and ActionAct have to be changed as well as the action On Enter.
- It is impossible to have objects stacked in the same location. For that reason I marked the Fluid box which will have the text shapes as being static. That is not a very nice workaround. Although I marked the Height and Width of the shapes to be 100% and 90% of the size of the Fluid Box, that setting is not honored, the shape will shrink a lot more for smaller screens, because the width/height ratio of the FB is kept.
Multistate Workflow – No Changes!
Great news! No changes are needed for the Multistate workflow, it works perfectly in a Fluid Boxes project. I didin’t even have to change the fluid box with the multistate object in a static fluid box. You have of course to be careful not to add objects to the states of the object, because no stackng is allowed.
Conclusion is clear to me: avoid the good old Show/Hide workflow when you are working with Fluid Boxes. You have a much nicer result using a multistate object.
I will insert a link to the responsive project for those who want to help testing it on mobile devices. Let me know if you are interested?