Forum Discussion

EarlKreuzer-e3e's avatar
EarlKreuzer-e3e
Community Member
1 year 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."

storyline 360

6 Replies

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    11 months ago

    Great work EarlKreuzer-e3e A few remarks ( without checking the code ).. as using acc-texts for selection can be troublesome if someone wants to make it really accessible. You could add classes to the elements and select them by class or object-id. Actually in the new advanced Javascript API there will be a direct selection in the Javascript window for elements ( by ObjectID ).

    One other thing that will be solved with the new API is that Objects targeted by the API will adapt to changed screensizes. GSAP as is has no knowledge of Storyline, so a change of a windowsize will result in wrong positions. Not anymore in the new API. The resize handler you have in your Storyline fixes it nicely too now.

  • JenBradley's avatar
    JenBradley
    Community Member
    15 days ago

    This is amazing! I've been trying to work out how to do this for ages! On a side note how did you get the rectangle with the coloured top bar? I've always done this by adding a separate line?

    • EarlKreuzer-e3e's avatar
      EarlKreuzer-e3e
      Community Member
      15 days ago

      Glad u like it and is useful.

      Line - Gradient fill 2 color - 2 stops

      stop 1 color (any) 2% stop position

      stop 2 color (white) 0% stop position

      Change thickness with stop 1 position

      Should be in notes in SL sample

      I try to use as little shapes as possible because storyline has problems with alignment and position especially when grouped.

      Best.