html5 animation works in flash output but not html5 output?

Good Afternoon David, and welcome to Heroes!

I assume you are referring to the "Learn to Use ClaroRead Plus 6! from claro software" animation that slides in within the "What is ClaroRead?" tab on Slide 2.  If so, the performance of this animation was quite similar for me in both HTML5 and Flash, using Google Chrome.

If I have misunderstood the problem, could you upload a copy of your .story project file so that we can take a closer look?  Thanks!

Hi Justin

Thanks very much for taking the time to respond!

I was using firefox and ie to test intially and as mentioned before, the little falling box animation with the bouncing text

fails to playin either of these browsers when I view the html5 version but plays just fine when I view the flash output.

I downloaded the latest version of chrome and like the others, it plays the flash version with no problems at all, nicely in fact.

But when i view the html5 page in chrome it performs the worst of the three browsers as no only does the animation not play, there is also no dropshadow effect on the yellow background box.

I am stumped? But then this is the first thing I have tried to build in storyline so maybe I am making some rookie mistakes!

I will upload the project on the link if that would help...many thanks

regards

David

Hello again, David.

Oddly enough, I'm seeing similar results today although everything seemed to work find a couple of days ago.  ...not sure what I'm missing!

Thanks for submitting your Articulate Support Case Number 00357298.  You're in good hands with Jayem, and I will be following along as well.  Thanks!

Hi David,

I see that our Support team is testing your file and Jayem will be in touch with you shortly. I'll follow along here so that I can update the thread with information about your case (# 00357298 for my reference).

Hi, David!  I am eager to see what the Articulate folks discover when examining your file; the behavior is the same on Safari.

On a side note, your animated menu is gorgeous!  

Hi David and Andrew,

I see that Jayem is further testing your HTML5 output, but also pointed you to this KB article about how shadows may not display properly in HTML5. 

Hi,

Has there been any resolution to this?  Or, does anyone have any experience in making html5 in web objects work with a 100% html5 storyline output as David was attempting?

I think the ability to add custom html5 animations from Edge or elsewhere is essential for those who want 100% html5 output (say, for mobile) and have an occasional need for some basic custom animations -- if you need that, there is really no other choice but to understand how to make this approach work.   It's analogous to being able to occasionally insert custom flash SWFs for flash-based SL projects... and we know that is a common need for many given the lack of custom animation support in SL currently.

In theory, since the web object is an "independent" iframe floating above the main content during playback in the browser,  the web object should display any valid html/html5 (including html5 based animations) that the viewer's browser is capable of supporting, whether the rest of the SL project is published as html5 or flash. (although I'm not sure if the iframe approach is used for web objects in projects published as html5, I would think that's the case).

Beyond the idea of using a web object to do this (which is kind of a "hack" but currently the only way to insert externally developed html5 content)...  Captivate 6/7 has a tool called "app packager" that allows html5 code (from Edge or elsewhere) to be integrated with an already-published html5 project (ie, the html5 is actually merged with the published html5 to exist where you want it on a selected slide). This allows the added html5 to play seamlessly as a part of the published html5, without the need for web objects/iframes to overlay a separate html file.  It would be very cool to see some sort of similar capability in a future SL version, or better yet, allow for direct insertion of html5 code, as content, in the SL authoring environment.  I know, I need to make a feature request...  but right now, I'm mainly interested in my opening question

Thanks!

- Doug

As a follow-on to my post just above, I now see that the same issue David originally posted about (conceptually) in this thread was addressed in this thread back in May:

http://community.articulate.com/forums/t/30011.aspx

The bottom line in that post is that an html5-based web object (allowing the viewer to draw with a mouse on an html5 canvas) was made to work in an SL project that was published as html5... achieving 100% html5.

Gerry Wasiluk was able to do it at the time (May of this year), but he was using a "special version" of SL he could not disclose due to NDA... (presumably a precursor to SL Update 3?).  Long story short, I downloaded Gerry's story file from that post just now, published it as html5 using SL Update 3, and it did in fact work for me fine, locally, on Firefox, Chrome, and IE9.

So, perhaps something in Update 3 solved the problem that was affecting David's use case above, or perhaps it is dependent on the nature of the html5 in the web object...

Would still like to hear if  David's case was resolved, or if others have other experiences using html5 web objects in an html5 published project?

- Doug

Good Morning, Doug.

In David's specific Support Case, he helped us to uncover a software defect within Articulate Storyline whereby a Web Object with three shapes behind it errantly has one of these three shapes placed on top of the Web Object within our HTML5 output--odd behavior to be sure!

The Articulate Quality Assurance Team is taking a look at how to resolve this unexpected behavior.  In the interim, the workaround for the problem was to simply group the three shapes, which appears to resolve the issue.

Please let us know if you need anything else, and have a great day!

Thanks Justin, that's very good info to know... the good news is that it seems external html5 can in fact be combined with html5-published projects using the web object method.   By the way, discoveries like this seem like they should be posted in the searchable support knowledge base, perhaps in a "known issues" section... but I found nothing about this issue there... info like this could be invaluable to people struggling with such problems.

I had also heard that some people were having issues with html5-based web objects not showing up on ipads (maybe just in the case of using the mobile player, not sure) even though they worked everywhere else... Not sure if that is related to the bug you mentioned or is a separate issue?

Doug

Hello again, Doug.

I can't think of an iPad or AMP-specific manifestation of this behavior.  If you'd like to provide a link to the relevant post or submit an affected file for further review, we'd be happy to take a closer look.  Thanks!

Justin,

One of the ipad AMP-specific issues I've seen is on the same thread I mentioned in an earlier post above, where Gerry Wasiluk was helping out someone back in May that couldn't get an html5 web object to render on an ipad (worked when accessing via web on AMP, but the downloaded version (for offline viewing) via AMP apparently did not work....Also, note that this project does not seem to have the 3-objects-behind issue that you mentioned). 

At the time, in early May, Gerry's special version of SL (presumed to be a beta of Update 3) was used to publish to html5 and this made everything work... so, perhaps the subsequent Update 3 release has solved these problems... not sure (I have no ipad presently to test on, but I'm interested in this capability for future projects)

The thread I mentioned is here:

http://community.articulate.com/forums/t/30011.aspx

- Doug

Hi, Doug.

We don't have a documented issue related to the thread you referenced, but I can confirm that I am unable to reproduce Eric's problem within the current build of Storyline, so it is possible that this issue was resolved as a side-effect of something else we fixed.

If you find that you are able to reproduce a similar problem, please don't hesitate to let us know!