Extending Animation in Storyline
This original card game uses Javascript and the GSAP animation library to extend the “out of the box” capabilities of Storyline 360
Magic
It’s not possible to program a computer player, detect a winning hand, or shuffle a deck of cards in Storyline. Such magic requires Javascript.
Animation
The game of Ninety-Nine keeps track of 53 cards, uses GSAP to animate them, and Javascript to detect who won or if the deck is empty.
Music
Ninety-Nine has four audio tracks, demonstrating my ability to source and then make use of audio to enhance a learning experience.
The Game of Ninety-Nine
I wanted a way to demonstrate how my web development experience can be harnessed to extend the capabilities of Storyline 360.
I invented a card game and have used it to showcase my ability to program in Javascript, use the GSAP animation library, and integrate the results within a Storyline project.
The Challenge
Ninety-Nine includes 53 cards, all of which appear in the game despite most being hidden in the deck. When a card is dealt, it’s animated in, and the card it replaces is animated out.
Storyline 360 can manage many of these tasks, but it’s much easier to do so using GSAP and Javascript. What’s more, Storyline 360 can’t shuffle a deck, program a computer player, understand the value of one card relative to another, or detect who won.
I set out to create this game to demonstrate how Javascript and the GSAP animation library enhance the capabilities of Storyline 360 and allow it to do things it wouldn’t otherwise be able to do.
I hope you enjoy playing it as I did creating it.
- A physical deck of cards
- Storyline 360
- Powerpoint
- The Gimp
- Audacity
- DaVinci Resolve
- Envato
- Javascript
- The GSAP animation library
Why a Card Game?
Ninety-Nine showcases my skills with Javascript and GSAP and their integration into a Storyline project.
I started looking for a simple card game that wouldn’t require me to code and debug the logic controlling the computer player and win detection.
After discounting several possibilities, I invented my own card game from scratch, and Ninety-Nine was born.
It’s called Ninety-Nine because the winner is the first player to score ninety-nine or above.
Creating an intuitive and well-designed interface for Ninety-Nine was a priority. I also took the opportunity to push the boundaries of Storyline, using music to test its capabilities as a “jukebox.”
Ninety-Nine is a game of chance, but there are tactics a player can use to “beat the odds.” In particular, the judicious use of the fold button is helpful.
Design
A game of Ninety-Nine consists of a series of rounds. A round ends when the last card is dealt from the deck or a player clicks the “Show” button. A player wins the round if they…
- Have the highest pair, or
- Have the Joker (trumps everything)
A game of Ninety-Nine ends when a player’s score totals 99 or more.
I purchased the design for a deck of cards and located a suitable back. I resized the cards for the web and exported them as JPEG images.
As you can see in the wireframe, my interface groups the control elements in one location for efficient gameplay.
The gameboard’s wireframe (click image to expand) shows the locations of a scoreboard, quit, and deal buttons.
Clicking the deal button initiates a round, and the fold and show buttons are used during play.
I found this arrangement made for fast and intuitive gameplay.
Development
Articulate Storyline 360 was the foundation for Ninety-Nine, but Javascript provides the crucial gameplay.
The GSAP animation library handles card animation. I can also place the game into debug mode, which lets me click on player two’s cards and inspect them.
I selected the game’s music tracks from Envato. Storyline 360 plays the next track when a variable changes and Javascript handles wrapping.
Javascript shuffles the deck between rounds and handles as much of the new round reset as possible to ease trigger management. I attached the core Javascript functions to the Window object to get around Storyline 360’s scoping constraints.
Click the above image and play a few rounds of Ninety-Nine.
Summary
Ninety-Nine explored what’s possible when Storyline 360’s “out-of-the-box” functionality is extended with Javascript and GSAP.
It was a fun exercise and provided valuable insights into ways Javascript and GSAP can interact with a Storyline 360 project.
It also revealed interesting limitations that make it easy to create unmanageable code. For example, Storyline 360’s structure forces programmers to store code in an object’s trigger and to repeat code. That isn’t ideal, but I did find a workaround.
