Integrating Flash Movies with Storyline

In a previous post, I wrote about integrating Flash movies with Storyline in a manner that enables you to easily create and insert complex animations into your eLearning course. The example I used was of a title, created in Flash, layered over top of existing Storyline content. Today, I want to expand on that idea a little bit, and mention a few other ways you can leverage Flash from within Storyline. These tips all stem from the same basic idea: in most respects, imported Flash elements are treated by Storyline in the same way that photos are. If you imagine your Flash element as a photo (albeit a moving one), Flash will become one of the most versatile tools in your arsenal and your workflow will increase dramatically.

 

Just as you can with photos, you are able to drag a Flash movie on the timeline to adjust its start and finish positions. This means that syncing your Flash c
lip with audio can be done by done easily from within Storyline, with no need to adjust the movie with Flash Professional.
Using the timeline, you can adjust Flash movies spatially as well. They can be positioned above or below other layers, just as a photo can. I recently created a Flash animation in which an umbrella floats down and settles on the ground, creating a gentle shadow over top of some other images (which were animated in Storyline). After syncing it with the audio, I was able to reposition the Flash element on the timeline so that it floats down from below the title bar, but settles above the other images.

You can also reposition and resize the Flash movie on the slide itself – a simple but much overlooked ability which again mirrors how photos can be manipulated within Storyline to create engaging animations in eLearning courses. In creating my umbrella animation in Flash, I didn’t have to worry about how large the umbrella needed to be, or where to position it, as I could take care of those details from within Storyline.

As a final tip, you can apply Storyline animations to Flash movies as well! Often when I need to animate something in Flash, I’ll do the complex size/shape/angle changes within Flash Professional, and then import the Flash movie to Storyline and apply additional simple effects like fades or fly-ins. This allows me to quickly try out different animations within the context of my course, and makes changing them in the future much easier.

Making this kind of small adjustment in Flash and then re-importing and testing it in Storyline would be frustrating and time-consuming, but it can be finished in a matter of minutes within Storyline by treating the Flash movie as if it were a photo. May this increase your productivity, and decrease your headaches! For more tip on creating engaging eLearning solutions, visit our website at: www.PathwaysTrainingandeLearning.ca.

 

Programming tips: Modifying Storyline eLearning modules’ variables from Adobe Flash

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:

1. The first trigger should pause the timeline when ‘pauseModule’ changes to True.
2. The second trigger should resume the timeline when ‘pauseModule’ changes to False.
3. The third trigger should make the module jump to the next slide if ‘navigateTo’ changes to the value “next”.
4. The fourth trigger should make the module jump to the previous slide if ‘navigateTo’ changes to the value “prev”.
5. 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.