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
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)
.js (sub-folders) – files used by the HTML5 course output
.xml (\story_content\) – files used by the storyline native iOS app
Inside mobile folder you will notice a file named data.gz this file is required for iOS app offline course download
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”
You will receive similar error when .XML (such as frame.xml) files are corrupt or failed to load as well.
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
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: