ATD TechKnowledge Hands-On Learning Workbook ATD TechKnowledge 2018 San Jose, CA Creating E-learning Games in Articulate Storyline 3 TH111HOL Thu, Jan 25 10:15 AM 12:30 PM Alexander Salas, CPLP Owner StyleLearn askstylelearn@gmailcom wwwstylelearncom
Table of Contents What do you think you will learn today?... 1 What s your favorite game and why?... 1 What s in a game?... 1 Mechanics, Dynamics and Aesthetics framework... 2 Games in E-learning... 4 Have a story!... 5 Show continuous feedback with points... 6 Motion Path loops... 7 Layer loops... 8 Character States... 10 Timeline Cue Point State changes... 11 Motion Path State changes... 11 Layer State changes... 12 Convert to Freeform... 13 Progress feedback with Sliders... 14
1 1. What do you think you will learn today? Get up and find someone or talk to the person next to you and share your answer to this question Write the answers shared with you here 2. What s your favorite game and why? Stay up or sit down but talk to someone and share your answer to this question Any lessons learned? Write the answers shared with you here 3. What s in a game? Decisions? y/n Feedback? y/n Story? y/n Challenges? y/n Consequences? y/n Strategy? y/n Engagement? y/n Competition? y/n Collaboration? y/n
2 4. Mechanics, Dynamics and Aesthetics framework Definition MDA is a formal approach to understanding games, one which attempts to bridge the gap between game design and development, game criticism, and technical game research Hunicke, LeBlanc and Zubek (2004) Mechanics Mechanics are the rules and purpose of the game Collect $200 when passing GO Two opponents mark Xs and Os in a 9-square grid, whoever makes three in a row wins Dynamics Dynamics are the result of a player s interaction with the established mechanics A player s roll of the dice is high enough to pass GO If each player does not make a mistake, the game is a draw Aesthetics The mechanics and dynamics of the game lead us to the aesthetics Why do players play? After reading the eight Aesthetics types below, circle the ones that you feel would be effective to use in your workplace
3 1) Sensation (Game as sense-pleasure): Player experiences something completely unfamiliar 2) Fantasy (Game as make-believe): Imaginary world 3) Narrative (Game as drama): A story that drives the player to keep coming back 4) Challenge (Game as obstacle course): Urge to master something Boosts a game's replayability 5) Fellowship (Game as social framework): A community where the player is an active part of it Almost exclusive for multiplayer games 6) Discovery (Game as uncharted territory): Urge to explore game world 7) Expression (Game as self-discovery): Own creativity. For example, creating character resembling player's own avatar 8) Submission (Game as pastime): Connection to the game, as a whole, despite of constraints Hunicke, LeBlanc and Zubek (2004) Reference Hunicke, R, LeBlanc, M, & Zubek, R (2004, July) MDA: A formal approach to game design and game research In Proceedings of the AAAI Workshop on Challenges in Game AI (Vol 4, No 1, p 1722)
4 5. Games in E-learning After reflecting on your answers to the previous questions and the MDA framework, answer this question: How can game design make E-learning effective? For the answer to this question, we need to go back to section 3 as games can be a catalyst of interaction for E-learning. From a basic standpoint, games naturally make any E-learning more interactive. The key to all this, is to make all design elements meaningful to the purpose of the training content For example, in corporate training, we want proficiency and performance on a particular job skill Next, we will explore how all of these elements and notions can come together with out-of-the-box functionalities found in Storyline 3 Are you game? Let s do this!
5 6. Have a story! Let s face it! As humans, we love stories. Stories get us engaged no matter the context Every game has a story or background scene at the very least Go ahead and create a story or situation for your game! Think about something that happened, whom it happened to and what needs to be done to make everything normal again For example; John is an accountant and he just received an email requesting sensitive information. The email states Our CEO needs this ASAP What are John s options? What should he do? What about if instead of a fictional character, the player is the protagonist of this tale? Write your What happened? story here Who s involved? What s the solution?
6 7. Show continuous feedback with points There s a beginning and there s an end. There are zero points and MAX points If points are part of your mechanics, then variables are your friend. 1) Create a number variable named points 2) Click the X between parentheses icon on the top right corner of the triggers panel 3) Click plus sign in the Variables panel and SELECT number variable to create 4) Now, reference the variable either by typing its name between parentheses i.e. %points% in a textbox or INSERT>REFERENCE with the textbox SELECTED 5) Repeat the same steps and create a maxpoints variable with a value of 100 Reference this value right next to the points variable NOTE: If your game is a quiz game, you may not need a max points variable for you can just reference the %ResultsScorePoints% variable once you have created a results slide.
7 8. Motion Path loops A Motion Path loop can be very helpful to increment number variables, create countdown timers or change character States indefinitely in a loop This loop is created when a shape i.e. rectangle is set with multiple motion paths and triggers that would activate each motion path after the other or loop between two paths 1) INSERT any shape i.e. rectangle and label it Timer 2) SELECT Timer and click ANIMATIONS>ADD MOTION PATH 3) Click on the stopping point (red) of the last motion path, press CTRL+D to duplicate it, now move it slightly to the right to separate it from the first one 4) Repeat step 2 as needed but, at least have three paths available 5) Rename the motion paths as FIRST, SECOND the last motion path created as STOP 6) Single-click the MOVE trigger created automatically when the first motion path was added and copy it 7) Double-click the copied trigger and modify it to MOVE Timer on the FIRST path WHEN animation completes on the SECOND path
8 8) Repeat steps 5 and 6 but this time reverse the order of motion paths i.e. move SECOND when FIRST completes 9) Now you can add\subtract a value to any custom number variable at the end of each motion path completion with a TRIGGER 10) Set a MOVE trigger to move the Timer shape on the STOP motion path whenever you want the animation loop to stop i.e. value of a variable is equal to zero in a countdown timer 11) SELECT the Timer shape and move it off the stage It will still work as programmed 9. Layer loops 1) SELECT any slide and add a layer by clicking on the blank paper icon under the Slide Layers panel (bottom right) 2) Double-click the Untitled Layer 1 and label it One 3) INSERT a textbox and INSERT>REFERENCE a number variable in layer One 4) Set layer One s Timeline to one second 5) With layer One selected, ADD a SHOW LAYER trigger to layer One WHEN Timeline ends layer One
9 6) ADD a ADJUST VARIABLE trigger to add\subtract a value from the referenced number variable WHEN Timeline starts on layer One 7) Click on layer One s properties (bottom-right gear icon) and set Revisits to RESET TO INITIAL STATE 8) Click the blank papers with green arrow icon to DUPLICATE layer One and label it Two 9) Go back and modify the triggers on each to show layer One at the end of layer Two and vice versa 10) DUPLICATE layer Two, rename it as TimerStop and remove all triggers 11) Add a trigger to layers One and Two to SHOW layer TimerStop WHEN variable CHANGES and the number variable is equal to the desired number i.e. zero for a countdown 12) Add a trigger to BASE layer to show layer ONE when needed i.e. timeline starts
10 10. Character States States are a great way to animate characters by changing over multiple poses using Timeline Cue Points, Triggers, Motion Path or Layer loops Creating Character States 1) Create a new slide 2) INSERT>CHARACTER and pick your favorite 3) SELECT the character, click on States under the Timeline panel (under the stage) 4) Click on EDIT STATES, click New State or Duplicate State icon and name it Neutral 5) Click on POSE, select a neutral pose (no smiles) 6) Repeat STEP 3 and name the new State as Alpha 7) Click FORMAT under CHARACTER TOOLS tab>recolor to BLACK and click DONE EDITING STATES
11 11. Timeline Cue Point State changes 1) Click on the 1-second mark on the TIMELINE 2) Right-click and click on CREATE CUE POINT AT PLAYHEAD to create a Cue Point 3) Repeat steps 1 and 2 at each 1-second interval for the next four seconds 4) Add a Trigger to CHANGE STATE OF Character 1 to STATE OF Neutral WHEN Timeline reaches CUE POINT #1 5) Repeat step 4 to alternate between the Normal, Neutral and Alpha Character States using the other Cue Points 6) Click and slide the Cue Points time the pose changes as needed for your interaction 12. Motion Path State changes 1) Copy the Timer shape and paste it on a new slide 2) Copy the Character previously created and paste it on the new slide 3) Create a Trigger to CHANGE STATE OF Character 1 to Neutral WHEN animation completes on the FIRST path 4) Repeat Step 3 to trigger a change at the completion of the SECOND path.
12 TIP: This can be used with the existing motion path loop or modify the MOVE triggers on the Timer shape to create a 6 or higher motion path loop. Of course, you may want to have 6 or more Character States to change to. 13. Layer State changes Layers can be used to simulate character changes as they hide one another by default 1) On a new slide, click on DUPLICATE layer (white papers icon with green arrow) to duplicate the BASE layer ONCE 2) INSERT>CHARACTER and place your favorite character on the right side of layer one 3) Click DUPLICATE layer (white papers icon with green arrow) to duplicate the new LAYER once 4) Label the new layer as HAPPY 5) Click anywhere off the stage and then click on the character on the new layer 6) Click DESIGN under CHARACTER TOOLS and change character pose to a happy-like pose 7) Select the HAPPY (or newest layer created) and change its properties to RESET TO INITIAL STATE (bottom-right gear icon)
13 8) Repeat steps 1-6 but by duplicating the last LAYER, rename the new Layer and change the pose to match a different emotion i.e. sad, confused, surprised, etc. 9) Set a SHOW LAYER trigger on each layer to show the next layer at the time of your choosing i.e. show layer HAPPY at 2 seconds of BASE layer s Timeline 10) Repeat step 8 as needed so ALL the layers you created are shown when desired 14. Convert to Freeform Many of the gamified interactions that you can create in Storyline can be transformed into quiz questions with oneclick simplicity using the CONVERT TO FREEFORM feature 1) Right-click an existing slide NEW SLIDE>BASIC LAYOUTS> TITLE ONLY to create a new slide 2) Click INSERT>CONVERT TO FREEFORM>PICK ONE 3) Click on SLIDE VIEW under QUESTION panel (right) 4) Click INSERT>BUTTON and add one button 5) Click on ADD TRIGGER for BUTTON 1 and set a SUBMIT INTERACTION trigger for this PICK ONE interaction 6) Select BUTTON 1 and DUPLICATE it three times by pressing CTRL + D
14 7) Arrange the buttons to your liking 8) CLICK on the BASE layer properties (bottom-right gear icon) and uncheck the Submit button 9) Click FORM VIEW and select BUTTON 1 for choice A and the other THREE buttons for choices B through D 10) SELECT choice A as CORRECT 11) Click on SLIDE VIEW and enter a question as the TITLE of the slide and Choose one at the end of the title 12) Label BUTTON 1 with the correct answer and buttons 2-4 with distractors aka wrong answers 15. Progress feedback with Sliders A progress bar is a common way to show players how far they have advanced in the game A progress bar in Storyline will require some ingenuity as it will need to track the player s progress slide by slide or level by level In this case we ll use a slider interactive object: 1) Go to VIEW>Slide Master 2) Select the MASTER slide (top one) 3) Go to INSERT>Slider and pick your favorite style 4) Click on the DESIGN tab under SLIDER TOOLS and set these parameters:
15 START = 0 END = 100 INITIAL = 0 STEP = 1 5) Create the following two number variables named Increment with a value of zero and Decrement with a value of 10 6) Copy and paste the TIMER shape with motion path loops from section 8 TWICE 7) Rename the TIMER shapes to ProgressUp and ProgressDown and set DURATION to 0.20 secs 8) Modify the triggers on each the ProgressUp and ProgressDown shape to loop their motion paths (see STEP 7 of SECTION 8) 9) SET a trigger to ADD a value of 1 to the Slider and the INCREMENT variables for each of the animation path completions on the ProgressUp shape 10) SET a trigger to SUBTRACT a value of 1 from the Slider and the DECREMENT variable for each of the animation path completions on the ProgressDown shape 11) Create two True or False variables named Backward and Forward with a default value of FALSE 12) SET a trigger to ADJUST the Forward variable to TRUE when the USER clicks\swipes the NEXT button 13) Repeat STEP 12 to ADJUST Forward to FALSE when the USER clicks\swipes the PREVIOUS button
16 14) SET a trigger to ADJUST the Backward variable to TRUE when the USER clicks\swipes the PREVIOUS button 15) Repeat STEP 14 to ADJUST Backward to FALSE when the USER clicks\swipes the NEXT button 16) SET a trigger to move the ProgressUp shape on motion path FIRST when the TIMELINE reaches 025 seconds WHEN Forward = TRUE 17) SET a trigger to move the ProgressDown shape on motion path FIRST when the TIMELINE reaches 025 seconds WHEN Backward = TRUE 18) SET a trigger to move the ProgressUp shape on motion path STOP when the INCREMENT variable changes if INCREMENT = 10 19) SET a trigger to move the ProgressDown shape on motion path STOP when the DECREMENT variable changes if DECREMENT = 0 TIP: Set a trigger to reset the INCREMENT variable to zero when the Forward variable equals True. Do the same correspondingly for the Backward variable. The End No grasshopper, this is only the beginning or is it? ; )