Forum Discussion

OrganizationSta's avatar
OrganizationSta
Community Member
5 years ago

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 build and looks slick enough to impress. I really like the flashcard feature in Rise and I'm trying to figure out how to create an interaction in Storyline that looks like a flashcard being flipped over like it does in Rise. 

I've looked at these articles: https://community.articulate.com/articles/4-flashcard-interactions-your-learners-will-love and https://community.articulate.com/discussions/articulate-storyline/how-to-create-objects-that-turn-over-like-in-rise-in-storyline-360 but while they're really great interactions I'm keeping for other scenarios, none of these mimic that flipping the card over motion. Some of the articles linked are 5-8 years old so the shared examples don't open in my Storyline (360). Does someone have any recent examples that haven't been shared yet? 

Thanks! :) 

General E-Learning

19 Replies

Show More
  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    3 years ago

    Next step...
    first i add a variable for the scale... A number set to 2.5
    As it is a Storyline variable i need to add this line to each Javascript trigger to get that value.
    var player = GetPlayer( );
    To get the variable for the scale i use this code.
    var myScale = player.GetVar("scaling");
    And then i can change the scale:2 everywhere to scale:myScale

    Now you can easily change the scale... 2.5 is a bit too big when you test it.
    2.07 perfectly covers all 4 cards. I do have a calculation somewhere to calculation the perfect percentage for things like this, but for now not using that as i dont want to complicate things.

    So now the repositoning part...
    Quite some solutions for that, but using the simplest one. I add a shape that has the position i want for the final scaled Cards. GSAP has a nice helper function 'getProperty'. With that we can grab the postion of that element, and reposition our card to it.
    var xPos = gsap.getProperty(CTRL, "x", "px");
    You can get any property from an element... height, width, whatever... if you add a second parameter as here 'px' the property is given back in pixels. If you dont add that, its more versatile. I seldom add that second parameter as i noticed it works better letting GSAP decide what unit to use. So like this...
    var xPos = gsap.getProperty(CTRL, "x");

    At this point i have to focus on other projects.... will continue this later...

  • EarlKreuzer-e3e's avatar
    EarlKreuzer-e3e
    Community Member
    2 years ago

    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.