As part of our series of tutorials, regarding extended functionality in Storyline by using Javascript and/or assets created in external tools, I want to jump in to a more advanced topic that will ultimately take our eLearning modules to the next level.
Let’s say you created in Adobe Flash a very fancy navigation bar with play, next slide and previous slide buttons, with some beautiful animations and states for the buttons that could hardly be done directly in Storyline, and now you are wondering how you will be able to actually control the module with that externally developed asset.
One option, and probably the simplest, is to import the flash object into your Storyline project and then cover the clickable areas with hotspots. While effective, because they will easily trigger the actions you want, this hotspots will also interfere with the states of your buttons, like the hover and clicked states. This happens because your hotspots are basically covering your Flash object and, in consequence, this object is not receiving any mouse inputs.
Another option is to have variables in Storyline that, modified by the Flash object, will drive the eLearning module, pausing and resuming the timeline, and going to the next or previous slide. In this tutorial, I want to show you how to achieve this by only using 2 variables in Storyline, that way we can also explore a bit more about triggers on the slides.
Just a heads up, since we will be using ActionScript 3 in Flash, we will have to do a bit more with coding compared to the first 2 tutorials.
Setting up the environment in Storyline
Let’s start by setting up the environment within Storyline, that way when we jump to coding in Flash, we will already know what to modify in our eLearning module.
The first step is to create 2 variables in Storyline that, as I mentioned before, will affect our module, pausing it or resuming it, and making it navigate to different slides. This variables could be as follows:
- pauseModule: This variable is a Boolean or True/False and its default value is set to False.
- navigateTo: This variable is Text variable and it’s default value is set to blank.
The second step is to create the triggers on the slide that will actually affect it. This triggers could be as follows:
- The first trigger should pause the timeline when ‘pauseModule’ changes to True.
- The second trigger should resume the timeline when ‘pauseModule’ changes to False.
- The third trigger should make the module jump to the next slide if ‘navigateTo’ changes to the value “next”.
- The fourth trigger should make the module jump to the previous slide if ‘navigateTo’ changes to the value “prev”.
- The fifth trigger should reset the value of ‘navigateTo’ to blank when the timeline of the slide starts.
Note: On the third and fourth triggers, the comparison to the values “next” and “prev” shouldn’t be case sensitive, that way we can ensure that inputs like “Next” or “PREV” have the same effect on the module.
Extending a bit further our work in Storyline, we can easily create a Master slide and implement this triggers in there, that way we don’t have to repeat this process n-times throughout our module.
Controlling our eLearning module with AS3
Now that we have set our variables and triggers in Storyline, it is time to go to Flash and create the code that will activate those triggers.
Let’s assume we have created 3 buttons and they are as follows:
- A play/pause button called ‘playPauseBtn’
- A next button called ‘nextBtn’
- A previous button called ‘prevBtn’
With that in mind, let’s create our code in AS3. In this part, I will explain each line of code so that we all have a clear understanding of what they do.
The first step is to import the libraries related to the events of the mouse (e.g. Click event) and related to the communication of our Flash object with Storyline.
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
The ExternalInterface library will allow us to call Javascript functions that are external to our Flash object, and the MouseEvent library, will capture the mouse input on our buttons.
var playPause:Boolean = false;
var navigateTo:String = “”;
In the lines of code above we are defining the same two variables we defined in Storyline, the ‘playPause’ variable relates to the ‘pauseModule’ variable and will indicate whether to play or pause the timeline of our eLearning module; the ‘navigateTo’ variable will determine if the module has to navigate to the next or previous slide from the current slide. These variables will be modified by the functions linked to the following event listeners:
playPauseBtn.addEventListener(MouseEvent.CLICK, controlTimeline);
nextBtn.addEventListener(MouseEvent.CLICK, navigateNext);
prevBtn.addEventListener(MouseEvent.CLICK, navigatePrev);
In essence, an event listener, is a function that will be executed when an event happens, in this case, the controlTimeline function will be executed when the playPauseBtn is clicked, and the navigateNext and navigatePrev functions will be executed when the next or previous buttons are clicked, respectively.
Now let’s see how these 3 functions are defined, starting with the controlTimeline function:
function controlTimeline(evt:MouseEvent):void{
playPause = !playPause;
ExternalInterface.call(“GetPlayer.SetVar”, “pauseModule”, playPause);
}
We will take a more in-depth look at the structure of AS3 in a future tutorial, in the meantime, let’s understand what the previous function is doing.
Basically, what the contolTimeline function does is to toggle the value of the variable playPause between True and False, as explained on a previous tutorial (link to the first programming tips article), and then it executes our beloved Javascript function “SetVar” (please refer to the first programming tips article for a better understanding of this function) by passing the two necessary parameters.
function navigateNext(evt:MouseEvent):void{
navigateTo = “next”;
ExternalInterface.call(“GetPlayer.SetVar”, “navigateTo”, navigateTo);
}
function navigatePrev(evt:MouseEvent):void{
navigateTo = “prev”;
ExternalInterface.call(“GetPlayer.SetVar”, “navigateTo”, navigateTo);
}
And finally, the previous functions will indicate the eLearning module to navigate forward or backwards by changing the value of the variable ‘navigateTo’ to “next” or “prev”.
Before finishing the tutorial, let’s remember that this interaction can’t be tested locally within storyline and, as indicated on the first programming tips tutorial, we would need to make use of other tools to verify if our customized code is working.
If you want to know more about Javascript and ActionsScript 3 applied to eLearning or about how to use other tools, such as software for 2D or 3D animation to enrich the outcome of your products, don’t forget to visit our blog or our website at www.pathwaystrainingandelearning.ca.
Pathways 