«

»

Jul
07
2013

How to Control Storyline Navigation and Variables from Flash

While articulate storyline is simple enough for rapid e-learning development, the developers are not left aside completely. With the right combination of variables and javascript a lot of magic can be done. One of such example explained in this post.

I am covering two methods in this post related to flash:

  • how to control the storyline course navigation from flash
  • how to pass a value from flash to storyline

Storyline Navigation Control from Flash:

When storyline utilizes flash videos and animations you might often require to create some kind of interface between them for the smooth flow of e-learning (e.g. move storyline to next slide when the flash video playback is complete).

The similar scenarios may occur with the flash animations and interactions as well.

I have created a very simple example to show how this interface can be created (Flash communicates to Storyline):

Flash to Storyline Communication
In this example, I am calling a custom storyline javascript function from flash to set a storyline variable.

Step 1Define the flash interface. I am using the flash actionscript external interface class for this purpose here.

import flash.external.ExternalInterface;

ExternalInterface.call("FlashNaviListener", "prevSlide");

Step 2- Define a storyline variable for the connection and trigger(s) to control the navigation (like shown below)

Storyline variable to control navigation

Storyline variable to control navigation

??

Storyline trigger(s) to control navigation

Storyline trigger(s) to control navigation

 

Step 3 – Define a javascript listener function to receive value from flash as:

var player = GetPlayer();

FlashNaviListener = function(param){

player.SetVar("navigationControl",param);

player.SetVar("navigationControl",null);

}

 

In this case every time flash sends the command ‘nextSlide’ to storyline it will move to the next slide and the command ‘prevSlide’ will move the storyline to previous slide.

This is just the basic idea, you can extend the concept in so many ways (e.g. call this from the end of flash video timeline to move storyline next slide/particular slide)

Note that scope of this listener will be on the player level, that means you are not required add this code into every slide. Once added on the first slide, the method will be active for all the slides.

 

Passing Variable Values:

If we just tweak the steps explained above slightly, we can set a storyline variable from flash and assign it to a storyline text field as well.

 

Set storyline variable from flash and control navigation

Storyline variable configuration

??

Note the other variable in the list named toStory. This is used to receive the value from flash. The storyline variable here is assigned to a text field. We need wrap the % symbol around a variable to assign it to text field like shown below.

Set value to storyline text field from flash

??

See this demo in action here

You can download the source files and the demo used in this post from this link

Note: flash external interface will work from a webserver only (due to security constrains). So the demo may not work locally on modern browsers. You need to post them to some website (or try from your localhost). It works on IE 8 directly though.

You can refer browse more storyline related posts from the posts index

I would encourage you to subscribe for the future posts from us using the option on the right side bar.

 

8 comments

  1. Brad Kutmas says:

    wow, impressive! Any ideas on how to set a variable in Storyline from a Captivate quiz? The quiz is developed in Captivate and published as a swf, then imported into Storyline. If a person passes the captivate quiz, then a custom variable in Storyline changes value.

    1. electron says:

      Thanks for the feedback Brad. Regarding your question, you can create a javascript listener like explained in my post, and communicate from captivate. Since captivate does not suppose custom action script, you may want to create a custom widget from Flash and insert into captivate for communicating to storyline. Flash can communicate to javascript easily.

  2. brijesh says:

    thanks

  3. Angenoire says:

    Wow! This is great, but only work with IE 11.0.3.

    Chrome : 32.0.1700.107 m
    Firefox: 27.0.1

  4. symo says:

    How to find all Storyline variable names list accessible from JavaScript?

  5. Alan Baertschi says:

    Thank you very much for this example. This is exactly what I need! However… this appears to be ActionScript 2 instead of AS3.

    Would you be able to help me with the code for the Flash button (AS3) to send to the JS in Storyline? I’m guessing the JS would stay the same. Thank you!!

  6. Alan Baertschi says:

    Here is an updated example of how to create a button in a SWF to trigger Storyline to advance the next slide in AS3. I finally got it figured out. Hope this will help someone out there in the internets.

    ___________ AS3 (ActionScript 3.0)___________________

    play();

    //———-Flash Buttons to Control Storyline Navigation—————
    nextSlideBtn.addEventListener(MouseEvent.CLICK, nextSlideStoryline);
    prevSlideBtn.addEventListener(MouseEvent.CLICK, prevSlideStoryline);

    function nextSlideStoryline(evt:MouseEvent):void {
    ExternalInterface.call(“FlashNaviListener”, “nextSlide”);
    }

    function prevSlideStoryline(evt:MouseEvent):void {
    ExternalInterface.call(“FlashNaviListener”, “prevSlide”);
    }

    ___________Storyline Variable___________________

    navigationControl
    – Text

    ___________Storyline Trigger (Next Slide)___________________

    Action: Jump to slide
    Slide: next slide
    When: Variable changes
    Object: navigationControl
    On Condition: navigationControl == Equal to (ignore case) nextSlide

    ___________Storyline Trigger (Previous Slide)___________________

    Action: Jump to slide
    Slide: previous slide
    When: Variable changes
    Object: navigationControl
    On Condition: navigationControl == Equal to (ignore case) prevSlide

    ___________Storyline Trigger (JavaScript)___________________

    Action: Execute JavaScript
    Script:

    var player = GetPlayer();

    FlashNaviListener = function(param){
    player.SetVar(“navigationControl”,param);
    player.SetVar(“navigationControl”,null);
    }

    When: Timeline starts

    1. electron says:

      Thanks for sharing this Alan, Appreciate it! I am sure it will help our fellow developers.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>