Forum Discussion
help with a slide that uses an animation, states, and shapes filled with an image?
Hi everyone,
Newbie here, driving herself mad trying to figure out something that seemed so straightforward in my imagination but I can't figure out how to get Storyline to reach my vision.
I have 4 transparent rectangles with images (of pickleball paddles) in them and questions written on them. (I needed something I could change the state of so had to avoid grouping an object and a textbox). I'm trying to make it so the user can click on them in any order, and when the paddle is clicked, it spins and the answer appears in a different font. So far my triggers work for the first one but I can't figure out how to make it work for all 4 of them in any order.
I have a screenshot below and a storyline file with that slide attached. I'd so appreciate any help to send me in the right direction.
Thanks for considering,
Kathleen
Hi Kathleen. What you'll want to do is utilize layers to reveal the other side of each paddle. Set up triggers that pause the timeline of each layer once the entrance spin animation on the paddle completes, give a brief pause (0.5 sec), then have a trigger that plays the exit spin animation to resume the timeline. Use the "Hide layer when timeline completes" checkbox in the layer properties to save you from creating a dedicated trigger to hide the layer when the exit animation completes.
A fun interaction!
Good morning, Daniel, thank you for your help. I like the idea of using layers and manipulating the timeline from each layer. The only problem is that, in your example, the user has to click on the answer again to resume the timeline. I'm not sure why they would do that. So now I'm trying to figure out how to resume the timeline in some other way...
Ah! I figured you wanted these to act as flashcards. If that's not the case, you'll want to simply remove/deactivate the "Resume timeline..." triggers. Since we're not tracking state changes to determine when the Next button becomes active, you'll want to incorporate the use of True/False variables that are tied to each paddle layer. Triggers on the Base Layer are set up so that the next button becomes Active/Normal when each of the variables read True (note how we have four similar variables, each accounting for the different combinations in which the paddles can be reviewed). Also, I inserted hotspots on each layer to act as "covers" for the other paddles until the timeline is paused. I did this because should the user attempt to click a different paddle before the timeline paused, the graphic on the base layer would show through. If you would like to recreate/see this, you can temporarily hide the hotspots and try clicking the other paddles before the entrance animation completes on the layer.
Oh my goodness Daniel, this is so incredibly helpful - thank you! Your example is something that I'll hang on to as a template for further similar interactions. I truly appreciate you taking the time to explain it to me and to make a story file of it. I hope I can pay it forward to someone on this forum in the same way you did.
