Is it possible to add a HTML5 equivalent of a Flash animation ?

Nov 20, 2012

Is it possible to add an HTML5 equivalent of a Flash animation ?

I know we can do this for widgets in Captivate 6, is it possible in Articulate Storyline ?

Thank you !!!

15 Replies
Steve Flowers

You'd need to manage the logic yourself. It's not completely straightforward (probably more than one way to accomplish it) but you should be able to setup a detection scheme and set a variable within Storyline. Using that variable you could control navigation through variant pathways.

I like the idea of having this built-in (like having a slide set and a branching trigger condition "if HTML5, if Flash). If you would, a feature request would be excellent.

Steve

Matt Hobbs

Steve Flowers said:

You'd need to manage the logic yourself. It's not completely straightforward (probably more than one way to accomplish it) but you should be able to setup a detection scheme and set a variable within Storyline. Using that variable you could control navigation through variant pathways.

I like the idea of having this built-in (like having a slide set and a branching trigger condition "if HTML5, if Flash). If you would, a feature request would be excellent.

Steve


Hi guys,

I am currently evaluating Storyline for an LMS project, part of the goal is to include lots of multimedia including Flash animations. We also want people to be able to access the courses from any device - PC's / laptops, iPad / tablets and smartphones.

Since Flash is not supported on iOS (and also the new Android versions), I came up with what is probably the same workaround as the OP, i.e. convert swf animations to html5 using Swiffy. Then, I embed the resulting html5 into my Storyline presentation as a web object.

I have got this working here on my local machine, it seems to work ok - I just run story_html5.html and the animations appear (Google Chrome browser). 

However, when I run the regular story.html (i.e. whole slideshow as pure Flash output) the slides with the web object are blank. Will my HTML5 web object not work when exported like this?

If so I can see the need for the detection logic Steve describes above. Somehow, a variable is set based on what browser / platform we are using. Then, in the story.html output, we would branch based on this variable to a slide containing the original swf. In the story_html5.html output, we would branch to the slide containing the web object. The branches would then converge back to the following slide.

Could we have please some more details on how to set up the detection logic / variable, are there built-invariables within Storyline that we can access to detect browser type for example? Or can this be emulated somehow?

Thanks,

Matt

Matt Hobbs

Hi Simon,

I have tried converting four different .fla animations so far. Two are animated (tweened) shapes plus audio, one is fairly simple and the other is rather complex. Both exported well, but with the caveats I will mentioned below. Another is simply a 'flick-book' style image animation, i.e. a series of images, like movie frames. This one did not work at all, Swiffy gave me an error about file size being too big. A final animation was a mix of the two types, again this failed due to file size.

The only action script used was stop() calls and setting of frame rate - the latter failed, so the html5 animation does not play at the correct speed compared to the .swf version. All motion was fine though and sound worked, so it was pretty successful for a first attempt. I did get a warning about streamed audio but sound still works for whatever reason.

A further goal is that I would like to make interactive animations using action script, i.e. different behaviour within the animation based on user clicks in various places. I am not sure that will be practical due to Swiffy's limited (if any?) support for this.

Can you tell us more about the kind of Swiffy errors you have encountered, are there workarounds? Do you know if the tool is in active development and we should expect full features in the future?

Finally, is anyone else trying something like this and are there any other tools or approaches to achieve the goal of animations that run on all targets? The Articulate Mobile Player is iOS only AFAIK (we want to support Android too) and we would also need our LMS (Moodle) to support TinCan in order to be able to track modules if we went this route. Not sure if this is possible in Moodle yet, would be grateful to hear of any experiences here.

Matt

Michael Hinze

@Matt,I have done some research into HTML5 animation tools. So far, I tested Adobe Edge (http://html.adobe.com/edge/animate/) and like it a lot. Also, there is now a a toolkit for Flash CS6 that allows you to publish Flash files as HTML5/Javascript (http://www.adobe.com/ca/products/flash/flash-to-html5.html). Another promising tool is Sencha Animator (http://www.sencha.com/products/animator/)

Brian Allen

Peak Bagger said:

I mean, if I create a SWF animation and also an HTML5 equivalent of the animation, is there a way to import both in Storyline and have the browser detecting which one to play depending on the device (old browser, HTML5 browser, iPad, etc...) used to display the course ?


I just submitted a feature request for this - great idea!  I really like the idea of being able to insert an alternative HMTL5 interaction that Storyline would use in place of the SWF interaction for the HTML5 published version of the course.

Steve Flowers

Hey Matt - 

One way to check for HTML5 is to retrieve the javascript variable player.isHTML5. In Flash it'll return undefined since this variable isn't declared. In HTML5, it'll return true. Since the AMP / iOS doesn't support JavaScript, the trigger won't even be called. Start by setting up a variable in Storyline. I setup a text variable called playerType with a default value of ios.

var sPlayer=GetPlayer();

if(player.isHTML5){

sPlayer.SetVar("playerType","html5"); //assumes you have a SL variable called playerType

}else{

sPlayer.SetVar("playerType","flash"); 

}

Using this setup you should be able to successfully detect which player type is being used whether it's the AMP, HTML5, or Flash based player. And by using trigger logic within your slides, you can tailor the presentation or the navigation path using conditions based on the value of this variable.

Setting this up as a master slide JavaScript trigger shouldn't cause much overhead. 

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