Forum Discussion
Flashcard Animation in Storyline
I've created a number of Rise courses but after learning that's it's not fully accessible I'm switching back to Storyline, which is too bad. I like both programs but Rise is definitely faster to bui...
Rise 360 type Flashcards in Storyline 360
Overview: Enables flashcard animations that can incorporate images, text, or a combination of both, triggered by mouse click or tap, similar to the flashcard animations in Rise 360. Special thanks to Math Notermans from the Articulate E-Learning Heroes Community for his ingenious customized code and examples. Inspired by his work, I adapted one of his scripts to create a dynamic flashcard animation effect and meticulously designed it to emulate the seamless Rise 360 flashcard look and feel. FYI: Math's ingenious JavaScript method utilizes GSAP for animation, while Storyline's Alternative text "Alt Text" (Accessibility) is used to identify objects/groups to be called. In the paraphrased words of LL Cool J, this method "Rocks the Bells."
To address objects jumping to new locations when resizing the window, I applied the following fix/hack: Grouped the front card object/group and the back card object/group into one group (e.g., card 1 group, card 2 group, etc.).
To address over- or under-rotation caused by clicking objects too soon or repeatedly before the animation is completed, I implement the following fix/hack: I added a layer with a dead "hotspot" for each card to pause interaction for the duration of the rotation.
*I attempted to adjust the code for both issues, but this was the simple and most stable solution.
---------------------------------------------------------------------------------------------------------------------------------------
Sorry, Math, if I hacked up your code. Feel free to correct it if needed. So far, this has been stable for me and my clients.
Warning: Check that it is working as intended every time you update SL to the latest build.
