ELC 356 - Animated menu using a carousel

Feb 02, 2022

Doris Chwist
By Doris Chwist

Everyone loves a carousel, right?  So here is my attempt to create a carousel with purpose.  The table of content is divided between the three photographs.  The radio buttons under the carousel allows the end user to select the photograph and then the banner displays the menu choices. 

I would have wished that my carousel be automated and rotate in a loop (like a gif) before the end user selects a radio button.  I also found it clunky; sometimes the triggers were slow to reveal the photo and sometimes the state of the buttons were laggy.  I suspect there is a better approach to creating a carousel menu.  I appreciate any suggestions.  D.

3 Replies
Nathanial Hilliard
2 years ago02/04/22 at 12:00 pm (UTC)
Doris, I looked at your story file and made some modifications to smooth out the carousel movements. (Click the ovals rather than hover.) I did not automate it, although you could probably do that with some cue points, changing the state of the individual ovals accordingly, and looping the timeline. You would need to check for the current state and reset the picture alignments when moving from the end to the begining.

https://360.articulate.com/review/content/3669b54f-4b88-487d-a477-d1761479a298/review

I did change your motion paths to relative starts and realigned the positions. To make this work easily, you should have all your images the same wdith, and the space between images and to the display position equal (I chose to just use no space between images, but you could add it back and adjust the movement paths).

There are 3 forward and 2 reverse paths for each image or menu group. The group is shifted foward or backward depending upon which oval is currently selected and which oval was previously selected (there are two variables to keep track of the selections). This way Storyline knows whether to move images forward or backward.

Note, some of the triggers (with PrevPos=0) are only needed since the carousel starts off screen. If you start on say image 1, then you only need triggers for moving 1 or 2 spaces forward or backward. Additional images would just require an additonal forward and backward motion path, plus another set of triggers.

I do not think the positions are perfect as is, but they are close and the mask hides any offset. Have a look and modify it according to your needs.
Sign In to Reply