I have a slide that contains 4 slide layers. All layers including the main timeline contain an audio track that is synced to the animation (fade in/out) of various graphics. Clicking buttons on the main slide triggers each of the others. It plays correctly in the web/flash version, however when viewing the HTML5 version on my iPad the slide layer animations do not begin playing until the ENTIRE audio track for that layer plays through. How can I get the animations on the slide layers to play in sync with the audio as intended?
First, if you haven't already, make sure you have Private Browsing disabled in Safari. You mentioned this is working in the Flash version, I assume this means you've tried the course in the Mobile Player, then, correct?
What triggers are you using for the buttons that show the layers? Are there any additional triggers for the audio or animations?
I can’t use the Mobile Player for this project. It has to be playable inMobile Safari. The buttons that show the layers also set variables to true andsome other objects states to normal. Basically each link gets a “checkmark” anda Boolean flag so that when the user has viewed all content the next button ismade active. In addition when all the sub layer animation buttons are clicked atext box is displayed indicating the user may now click Next to proceed. Thereare no additional triggers within the animations except when ending theanimation to set a flag that it has been completed.
I took a look this morning and found your case (#00317402 for my reference). I see that Cleo is working with you on this. I'll be sure to follow along with the case progress so I can keep this thread updated.
After running some test, I was able to isolate the cause of the issue. What is causing the animation not to sync with the audio is because it's grouped. To resolve the issue, you need to ungroup Shape1 (see attached 00317402-UngroupShape1.jpg for your reference) and republish your file.
Unfortunately when I ungrouped the items and republished the issue still remained, The audio on the slide layer plays thru and then the animation plays afterward.
This problem only seems to occur when the course is being served from a web server. Accessing the story_html5.html file on my local hard drive does not show the error.
I ended up removing the slide layers from the page entirely. Instead I created a new scene and made a separate page for the content on each of the slide layers. Then back on the original "launch" page I changed the triggers from "show layer" to "jump to slide". I also had to create another version of the "launch" page that represented its "finished" state. When a user "closes" one of the fake slide layers they are sent to this duplicate version (otherwise they would have to sit through the original slide's entire animation again) Having the content on separate slides has an additional benefit because it allows me to use the "Notes" sidebar as a "Transcript" which you cannot do for a slide layer. Also it makes replaying and "scrubbing" the audio easier to deal with as well.
I had to do quite a bit of futzing with triggers and variables too because when a user clicks an icon on the launch pages I have it set to a visited state (adds a check mark)
NB. I have run into audio issues having more than one audio file in a slide in HTML5. Now I combine them all into one file before I import it.
No problem. One other caveat ... make sure you set the trigger action of the Previous button to go to the page before the launch page(s)...otherwise it will just open the fake slide layers over and over.... also set the next button action too (unless you WANT users to click Next to view each fake layer)
Agreed, Sam. Since one of the main selling points of Storyline has been its ability to produce HTML5-based content, you would think they to document what it CAN'T do so that developers have to redo hours of work.
Originally most of my attempts at audio in HTML5 seemed problematic on the iPad1 iOS5 (apparently it MAY work on iOS6 but we have been unable to test that as yet). However I have since been making layers with audio now with the aim of at least getting the HTML5 version to work in Chrome (no use of flash is allowed in this project). When running the course locally on Chrome it seems fine but over HTTP it behaves as you mention and the audio finished playing BEFORE the animation played through....so thanks for the tips - looks like I may have to rebuild the course in a way you mention.
Hopefully these issues will be sorted out in the next release but until then it seems we need to compile a list of workarounds and ways to structure storyline to perform better in HTML5.
I've been testing my course on an LMS and for iOS6 the audio plays from the beginning each time on my layers but I still notice the animation synching issue. If you can "design" around that, you may still be able to use slide layers with audio BUT it's definitely a concern. I can't go down that road with much confidence, unfortunately. This definitely needs to be fixed. I could live with it being a fraction of a second off but this is ridiculous.
15 Replies
Hi Randall,
First, if you haven't already, make sure you have Private Browsing disabled in Safari. You mentioned this is working in the Flash version, I assume this means you've tried the course in the Mobile Player, then, correct?
What triggers are you using for the buttons that show the layers? Are there any additional triggers for the audio or animations?
Are you able to share the project file here, or send it to us privately?
Thanks!
I can’t use the Mobile Player for this project. It has to be playable inMobile Safari. The buttons that show the layers also set variables to true andsome other objects states to normal. Basically each link gets a “checkmark” anda Boolean flag so that when the user has viewed all content the next button ismade active. In addition when all the sub layer animation buttons are clicked atext box is displayed indicating the user may now click Next to proceed. Thereare no additional triggers within the animations except when ending theanimation to set a flag that it has been completed.
Hi Randall,
I took a look this morning and found your case (#00317402 for my reference). I see that Cleo is working with you on this. I'll be sure to follow along with the case progress so I can keep this thread updated.
Thanks!
Christine
Hi Christine,
Cleo sent me the following response
After running some test, I was able to isolate the cause of the issue. What is causing the animation not to sync with the audio is because it's grouped. To resolve the issue, you need to ungroup Shape1 (see attached 00317402-UngroupShape1.jpg for your reference) and republish your file.
Unfortunately when I ungrouped the items and republished the issue still remained, The audio on the slide layer plays thru and then the animation plays afterward.
This problem only seems to occur when the course is being served from a web server. Accessing the story_html5.html file on my local hard drive does not show the error.
Hi Randall, I'll be doing something like this in the very near future. Please post here if you find a solution. Thanks, Mark
Hi Mark,
I ended up removing the slide layers from the page entirely. Instead I created a new scene and made a separate page for the content on each of the slide layers. Then back on the original "launch" page I changed the triggers from "show layer" to "jump to slide". I also had to create another version of the "launch" page that represented its "finished" state. When a user "closes" one of the fake slide layers they are sent to this duplicate version (otherwise they would have to sit through the original slide's entire animation again) Having the content on separate slides has an additional benefit because it allows me to use the "Notes" sidebar as a "Transcript" which you cannot do for a slide layer. Also it makes replaying and "scrubbing" the audio easier to deal with as well.
I had to do quite a bit of futzing with triggers and variables too because when a user clicks an icon on the launch pages I have it set to a visited state (adds a check mark)
NB. I have run into audio issues having more than one audio file in a slide in HTML5. Now I combine them all into one file before I import it.
Hope this helps
That's a huge help! Thank you Randall.
No problem. One other caveat ... make sure you set the trigger action of the Previous button to go to the page before the launch page(s)...otherwise it will just open the fake slide layers over and over.... also set the next button action too (unless you WANT users to click Next to view each fake layer)
Chiming in. I found this problem in December. Like you, I had to remove audio from slide layers in HTML5.
It seems like quite a serious problem. Shame it isn't posted somewhere so that new developers won't have to figure this out by trial and error.
Agreed, Sam. Since one of the main selling points of Storyline has been its ability to produce HTML5-based content, you would think they to document what it CAN'T do so that developers have to redo hours of work.
Hey everyone,
Originally most of my attempts at audio in HTML5 seemed problematic on the iPad1 iOS5 (apparently it MAY work on iOS6 but we have been unable to test that as yet). However I have since been making layers with audio now with the aim of at least getting the HTML5 version to work in Chrome (no use of flash is allowed in this project). When running the course locally on Chrome it seems fine but over HTTP it behaves as you mention and the audio finished playing BEFORE the animation played through....so thanks for the tips - looks like I may have to rebuild the course in a way you mention.
HTML5 audio seems like a pretty major issue. (Another thread where I've discussed audio : http://community.articulate.com/forums/p/25346/139555.aspx#139555)
Hopefully these issues will be sorted out in the next release but until then it seems we need to compile a list of workarounds and ways to structure storyline to perform better in HTML5.
Cheers
We are having issues here as well with slide layers with video or audio. it sounds like we should move away from using slide layers in HTML 5.
The response i have gotten from Articulate is that there are inconsistencies with audio and video in html 5 when played from browsers.
"inconsistencies" O_o
That's marketing speak for "crap! this doesn't work like we said it would in our press release"
Having been a developer for the past 15+ years I feel the developer's pain. But Articulate really over-hyped this tool IMO.
I've been testing my course on an LMS and for iOS6 the audio plays from the beginning each time on my layers but I still notice the animation synching issue. If you can "design" around that, you may still be able to use slide layers with audio BUT it's definitely a concern. I can't go down that road with much confidence, unfortunately. This definitely needs to be fixed. I could live with it being a fraction of a second off but this is ridiculous.
This discussion is closed. You can start a new discussion or contact Articulate Support.