Storyline as a web design tool?

Jun 14, 2012

Morning All

This is a bit silly but I thought I'd try it out...

I was really pleased to see that I could customize the screen size in Storyline as it opens up a whole new world of possibilities.  I mean, why does a learning object have to be 800 x 600 and sit on it's own on a page?

To demonstrate the point I thought I would try to create an animated rotating banner for a new project I am working on.  I played around with the size until I found around 880 x 220 worked for my 960px site width (needing to allow for the player chrome - even if it is invisible).

I created a very simple 3 slide presentation on this template, modifying the player to remove every trace of chrome.  I looped the presentation so it is never ending and then published to flash and html5.

The whole thing was then moved to a public Dropbox folder and the story.html file embedded in the site by way of an iframe.

You can see it in action at

The site is a Moodle 2.2+ installation with a label resource used to hold the iframe.

What interests me here is the potential for developing small interactive blocks that can be embedded in course homepages, site homepages etc.  Of course, SCORM is not possible using the iframe/dropbox combination but it would be cool for adding some "bling" to a page...




27 Replies
Jeanette Brooks

Mike!! That is so clever and it looks beautiful! Love the idea, and love the way you implemented it! My only suggestion would be that Dropbox might be a bit sluggish for the animation and button response times. Unfortunately Dropbox doesn't allow browsers to cache content, so things end up running slower than they would on a normal web server. Still, the effect is really great and it's so fun to see Storyline used in all sorts of different ways like this. Thanks so much for sharing!

Mike Walters

That's a good point about Dropbox.  With a more complicated object it would be slow.  It is very useful for testing however as it means I can upload and move files around easily.  Dropbox has however just announced that they won't be creating Public folders in new accounts and the share function in other folders doesn't seem to work in the same way (oh well).

Once I am happy with the design I would most likely move it onto the actual site server and call it from there.

Thanks for the reply!


Mike Enders


I love the direction you're going with this.  I think I've spent more time playing with Storyline as a tool for non-eLearning uses than the other way around, so it's so cool seeing others experiment as well!  Would be cool to see how many different ideas the community could bake up using unusual size dimensions (for example 150 wide, by 800 high).  So in essence, you start with a particular dimension set, and then let that help dictate your approach.

Keep rolling with this, it looks great!


Mike Walters

Cool idea!

I'm thinking along the lines of small interactive guides or tools within a course homepage.

For example, in a homepage a small block could present the student/visitor with a simple set of choices that would then return suggestions or help based on the choice. e.g. "What course should I study".

The possibilities are pretty much endless and now having support for HTML5 etc makes it a pretty flexible way of creating these "micro-apps" (it's the only way I can think of describing them).


Bruce Graham

From what I gather, my website (built in SL) does not have any Search Engine Optimisation, but then I built it as somewhere to send people AFTER we were talking, to show capability, (in effect, a course aboyut me!), rather than as somewhere to get hold of me initially.

I use the SEO built into other places that I "inhabit" online to drive people to the website via contact information they find, and from there they get hold of me.

...and it seems to be working rather well as a strategy! 


Mike Walters

Good question Nancy,

There are two answers...

Firstly and simply, I was working on the site and didn't want to be loading the banner all the time as working in developer mode on Moodle slows down the page load times considerably (as it individually caches around 200 different CSS files).

Second reason is a bit more sinister!

This theme has a dropdown menu when the user is logged in that looks like this...

However, when the banner is in place it obscures the menu like this...

This isn't a Storyline problem, it's a problem with Flash.  Flash objects always sit in the top layer of the page (I have no idea why, I've tried playing with positions and the z-index attribute) causing this problem.

There is a solution however, if instead of calling the story.html file in the iframe you call the story_html5.html file this problem goes away.  The downside of course is that html5 just isn't quite there yet and the player chrome returns and a lot of the animation and text effects are lost.  You can see the flash banner on the link in my previous post and the html5 banner on the site.



Steve Flowers

If the Flash component is embedded with something called Wmode (window mode): Transparent or Opaque, it should allow other stuff to load on top. In your published output, try changing the line that looks like this:

var g_strWMode = "window"

To this:

var g_strWMode = "transparent" 

Or -- to this:

var g_strWMode = "opaque" 

That should allow your menu content to float above the Flash component. The downside of this mode is screen readers (JAWS) won't pick up your Flash content, which affects the accessibility of the component. If it's an enhancement to the base content on the page, it should be OK.


Mike Walters

Well there you go!  Steve you're a star.

I'm not a great coder and I love it when I learn something new like this.  Crazy thing is, if you actually go in and look at story.html, there it is commented out:

var g_strWMode = "window"; // opaque | window (use "window" for optimal performance, opaque for webobject support)

I changed it to opaque and lo and behold it works like a charm.

Of course, the next question is - should I not be embracing HTML5 anyway?!


Steve Flowers

Was going to suggest this as well. I'd embrace both Flash and HTML5. In this case, I wouldn't publish to the iOS player but checking the other two will get you where you need to be on legacy platforms and more modern browsers.

Love HTML5 but 100% of my audience can't see it (IE7). Thankful that tools are starting to cater to the old and the new with a single workflow.

Mike Walters

Sorry, my comment about HTML5 wasn't really that clear!

The ability to publish to both Flash and HTML5 simultaneously is probably THE key reason I have moved to Storyline.  But I was considering if it was going to be easier just to call the story_html5.html file directly, knock out the flash component altogether (although it would still be there in the output) and design for HTML5 given that certain things don't work the same.

Of course Steve just pointed out something I hadn't considered in that those people still using IE7 can't see HTML5 and so I need to keep that Flash component for the time being...

(who'd have thought a quick post about a silly banner would turn into this?!)


Nancy Woinoski

Hi  Mike - Steve's point is right on the money. Everyone is so eager to jump to HTML5 but the standard is not really there yet  - older browsers don't support it and even the ones that do have varying degrees of support. I think the best way to go is to offer the swf and HTML5 versions. When doing your design you just have to be aware of the limitations of HTML5 and then decide what you are willing to live with in terms of user experience.

Gerry Wasiluk

Nancy Woinoski said:

Hi  Mike - Steve's point is right on the money. Everyone is so eager to jump to HTML5 but the standard is not really there yet  - older browsers don't support it and even the ones that do have varying degrees of support. I think the best way to go is to offer the swf and HTML5 versions. When doing your design you just have to be aware of the limitations of HTML5 and then decide what you are willing to live with in terms of user experience.

Well said, Nancy and Steve.  Did a preso on Storyline last week to local learning leaders and that was my main message to them when in comes to mLearning right now.

We're in crazy time . . .

Leslie Shapiro

Hi everyone,

I'm hoping this thread is not dead.

I am looking into the possibility of designing a small web site - to be used as a web site, not an LMS intro page or anything else - with Storyline.

What might the drawbacks be in doing this? For instance, is it possible to use meta tags for search optimization? This was mentioned above but it didn't look like anyone had needed it/hadn't tried it. I'm not a web designer (just enough to be dangerous, as with most things!) so maybe I am missing some important keys that make SL not a good tool for this purpose. But it SEEMS like it would work....

Thanks for your input!

Mike Walters

Hi Leslie,

I don't see why you couldn't use Storyline to design a small website (like Bruce has done).  I'm sure someone will chip in but I don't think SEO is going to be possible.

Personally, I wouldn't do a website in SL unless I wanted it to look and behave like an eLearning resource. I always turn to Wordpress in the first instance for all website development.

That said, if you wanted to create something like a brochure site that visitors would be directed to, rather than searching for, SL could potentially create some awesome content. *brain starts to wander thinking of an interactive brochure with characters, videos and variable controlled content...*



This discussion is closed. You can start a new discussion or contact Articulate Support.