«

»

Apr
24
2013

Behind the Scenes – Decoding Articulate Storyline Output

Developer Analysis of Articulate Storyline

 

 

 

 

 

 

 

 

 

 

 

Today I have decided to make my hands a little dirty by decoding the Articulate Storyline published content. My objective is to study the output folder structure, files and get a deeper understanding of behind the scenes architecture. Why in the world someone would try this?

Reason 1 – Decoding is fun!

Reason 2 – This would help me to troubleshoot issues with emerging technologies such as HTML5 based e-learning courses

 

I have created a small storyline course with few slides of text and images combination like shown in the story view below

Story view of Articulate Storyline

 

I have published the output with all the 3 available options – Flash, HTML5 and iOS.

 

THE BASIC LAUNCH FILES AT THE ROOT FOLDER

story.html – Used to launch the flash version

story_html5.html – Used to launch the HTML5 version. When HTML5 compatible browser is not found the user will be redirected to story_unsupported.html

ioslaunch.html - I have noticed that this file being showed when we access the content from iPad. The page includes a ‘Play’ button. If the published content includes a mobile output (iOS) the play button on this screen redirects the users into Storyline iOS App (assuming the App is already installed) otherwise the HTML5 version of the content will be launched instead

index_lms_html5.html/index_lms.html – These files will appear only when you publish the content for LMS outputs

 

A DEEPER LOOK

The file structure will be little tricky to understand at first glance. You will see same file names of different file types. For example – frame.swf, frame.js, frame.xml

Each file type will be used for different applications – flash version, HTML5 version, iOS version respectively.

.swf files (\story_content\) –  generally used by the flash version of the course (no wonder and straight forward to figure out)

Key files utilized by the Storyline Flash Version

Key files utilized by the Storyline Flash Version

 

.js (sub-folders) – files used by the HTML5 course output

 

Key files utilized by the Articulate HTML5 Version

Key files utilized by the Articulate HTML5 Version

 

.xml (\story_content\) - files used by the storyline native iOS app

 

Key files utilized by the Storyline iOS App

Key files utilized by the Storyline iOS App

 

Inside mobile folder you will notice a file named data.gz this file is required for iOS app offline course download

Offline download file utilized by the Storyline iOS App

Offline download file utilized by the Storyline iOS App

 

So if your offline content download fails in iPad for any reason then make sure this file is exist properly. If not you will receive the error message in Storyline iOS App as “Cannot Download Content”

Articulate storyline app offline download failure

 

You will receive similar error when .XML (such as frame.xml) files are corrupt or failed to load as well.

 

EVEN DEEPER!

frame.[xml/swf/js] – The traditional articulate courses use to store the player configuration data into a file named playerproperties.xml. The storyline seems to be packing the player configuration (such as theme, layout, search data etc.) data into frame.[xml/swf/js] files. The course navigation info (course structure) also seems to be stored in this file.

Here is a collapsed view of frame.xml in a browser

 

Articulate storyline frame.xml structure

Inside the frame.xml

 

If you open the frame.js file you will notice a weird javascript (alien!) code,

 

Articulate Storyline frame.js file

Inside (p,a,c,k,e,d) frame.js

This is an encoded type javascript file and can be decompiled using free online tools such as javascript beautifier

 

Earlier, I have read some info about some browsers and servers would treat the (p,a,c,k,e,d) javascript files as a security threat. However I have not come across any such issues with my storyline output.

story.jsThis file looks like used by the flash course output. The file has all the javascript code required for the flash course to work with (like writing swf object into browser, fscommand, external asset windows etc.)

data.(js/swf/gz) – Looks like all the course contents are stored here. The text on slides, images information and vector data and lot more. I still have to dig deep into this file. But looks this file packs most of the course data into it.

fonts.[xml/swf/js] files – This is tricky area, I suspect these files are used for saving flash embedded or HTML5 Web Fonts data. But I am not sure though. I will update my findings if I find it other way.

I hope this post gives you some idea about the storyline content architecture behind the scenes and I am planning to cover some more advanced topics focusing storyline with iPads soon. So make you sure you subscribe to the new posts using the option on right sidebar.

You can also suggest ideas for new topics in the comments area and I would be glad to write about them.

 

You might also be interested in:

Efficient Translation of E-Learning Courses

 

8 comments

  1. John says:

    Great job! I’ve been searching the internet for someone who knows the value of knowing how something works. Very few on the Articulate blogs that can talk to the subject at this level. Thanks!

    1. electron says:

      Thank you for the feedback John!

  2. Marc says:

    I second John here, there is no technical information about these output files on the net. Thanks for the enlightenment.

    I’m still left with a question though: Is there any user/machine identifiable information included in these output files?

    1. electron says:

      Thank you Marc for your valuable feedback. Regarding your question, i have noticed meta.xml file (available at the root directory) contains some information about the author and the publish date (these values captured from publish settings). I am not sure if this is what you are looking for. Other details like machine IP or machine name not seems to be included anywhere.

      datepublished=”2013-05-09T00:52:36″
      <author name=”Electron Media” email=”" website=”" />

  3. Marc says:

    Thanks for answering my question.

    As far as I know google will index the information stored in these files (unless I excluded the whole web-folder in robots.txt, but that would exclude all the other files in that folder as well…or am I mistaken here?)

    Am I correct in assuming that changing, for example, the author name to “”, or to the name of the website would be a smart thing to do?

    —————————————————————————————————————–

    Another question I hope you could answer:
    You mentioned in your post that there were several files designated for Flash, HTML and iOS. Can I safely delete the ones that I don’t need?

    Thanks

    ps I am trying to understand your flash–>to xml conversion within storyline….but I have only an option to export to Word…not an option to directly export to .xml

    1. electron says:

      [As far as I know google will index the information stored in these files (unless I excluded the whole web-folder in robots.txt, but that would exclude all the other files in that folder as well???or am I mistaken here?)]
      You are correct google will definitely index everything. However the content files are not individual HTML files like web pages (they are player based) here, so i very much doubt if they have much of direct search engine impact (a search engine would need proper renderable web pages to generate launch links. Pieces of exposed information may not makes sense for a search engine. If you really want to hide stuff then you can remove the hosted course folder alone from indexing. I don’t see any issue with it.

      [Am I correct in assuming that changing, for example, the author name to ??????, or to the name of the website would be a smart thing to do?]
      Author name not displayed in the output (as far as i know). But changing it to website name can be just a good practice.

      [You mentioned in your post that there were several files designated for Flash, HTML and iOS. Can I safely delete the ones that I don???t need?]
      You can do this. But you will have to be careful though and sure of what you are removing. There could be some shared script files (JS libraries) which are likely shared between flash and HTML5 versions. Ideally it would be good if you can exclude the unwanted build options before publishing (for e.g. if you don’t want iOS uncheck iOS and offline view options before publishing)

      [ps I am trying to understand your flash???>to xml conversion within storyline???.but I have only an option to export to Word???not an option to directly export to .xml]
      Navigate to Articulate button > Translation > Export you will see option for exporting into XLIFF (XML Localisation Interchange File Format) along with word options. This is nothing but XML itself. It is a predefined XML format used by XML render tools used by localization providers.

      Hope it helps.

  4. Russman says:

    Hi – great stuff !

    Using your ‘behind the scenes’ approach from above, I just wondered if you had been able to work out a way of being able to change specific slide contents e.g. text on a slide (e.g. by decoding, changing and re-encoding the content data) somehow?
    Do you know whether this is possible?

    Thanks.

    1. electron says:

      Thanks for the feedback Russman. What you are asking is fairly complex. First of all the slide contents are stored in multiple formats (for flash frame.swf for HTML5 frames.xml and for iOS inside data.gz. Even within frame.xml file it will be extremely difficult to spot your content and edit. So i would recommend not to try this approach.

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>

Current month ye@r day *