Importing interactive HTML5 content to Storyline2 (e.g. from Adobe Animate CC)
Apr 09, 2016
A SWF/HTML issue from another perspective ...
I have always looked upon Articulate products as perfect for scalable solution. Interactivity that could not be achieved in Presenter or frame based animations in combination with Storyline could be produces in other programs and embedded in the Articulate tool as swf files. Thus more complex content could be used when necessary.
Is it possible to produce frame based animations and interactive parts in, for instance Adobe Animate CC, publish it from Animate CC as HTML5 and then embed it into a Storyline production. The result should then show the animations, let the user interact whit it in a controlled way as is possible with imported swf inte Storyline today.
I would be most grateful for any advice in this matter.
34 Replies
You can display any external HTML/HTML5 content in a Storyline web object.
Hi P-O E!
Looks like Michael is assisting you here, but I wanted to share our documentation:
Web objects are a powerful way to leverage web-based resources by embedding them right in your Articulate Storyline courses. To learn how to use web objects, see this tutorial.
You can use the Html 5 or swiffy for embedding into a course, but in order to have data pass between the two. (ie. press an html5 button to tell storyline to progress is a little more difficult) So if you don't mind your animated content to be asyncronous, you can very easily put it into webObjects, and it will look great. Otherwise you will have to have to do some level of Javascripting in Flash, storyline and edited HTML5 to get a var to pass from HTML5 to Storyline . Hope this helps.
Thanks a lot for your replies!!
Hi P-O E,
Coming in here a bit late. I did try bringing in animation from Animate CC into Storyline and it worked wonderfully. The vector quality is maintained. The file size is low. I am simply loving the combination of the two.
Attached is an example of the integration.
Once unzipped.
1. Open the folder "Storyline..."
2. Click on "story_html5".
Whatever you see there is 100% vector.
Thanks,
Joy
Thanks for popping in to share Joy :)
My pleasure:)
Hi Joy Konsam,
I'm from Colombia, I do not know English very well, I hope I apologize. I would like to know how did you do to embed animation Animate cc to Articulate storyline. That would help me a lot.
Thank you very much.
Hi Yazmin and welcome to E-Learning Heroes :)
Hopefully Joy is still subscribed to the thread here, but if you do not here back soon you are welcome to utilize the 'Contact Me' option on the user profile to reach out directly.
Hi Yazmin,
Good to hear from you. I have tried explaining the process in the attached doc. Hope it is clear. If not, feel free to let me know.
Thanks,
Joy
Thanks so much for popping back in to share that Joy - very generous :)
Pleasure always:)
You're very kind, it worked well. Thank you very much. It's good to find people like you. :)
Glad to know that it worked.
Thank you Joy! This was just what I was looking for :)
Holy cow!! I've been beating my brains against a wall on this one for days. THANK YOU, Joy!!!!
Woo hoo! Glad you were able to find what you needed here Suzette. I like seeing these older threads continuing to assist.
I'm assuming this is for your custom work you mentioned here. Sounds like you can progress a bit more now. I'd love to see what you're working on :)
Welcome to E-Learning Heroes!
Thanks Joy! This is AWESOME!
I am still new in creating courses in Articulate and for me this is mind blowing! Thanks for sharing this Joy.
So glad this was helpful for you as well Homer. Thanks for popping in to share and welcome to E-Learning Heroes :)
Looks Great Man.
I have checked it @ Joy Konsam. Looks great.
Joy's document is very helpful. But it would be very nice if either 1) Articulate fixed storyline so that when you select the correct folder you could actually see something instead of assuming it wasn't working or 2) those kind of tips were spelled out in e-learning heroes instead of having to open a user submitted document.
Hi Alison,
We have documentation on adding web objects to your courses here, and it includes content on your local computer.
There are many ideas and solutions shared in the forums that may be out of our realm of support, so of course, use those at your discretion.
Hi Leslie,
I tried using that documentation first, but it includes the false
information (There must be a file called index.htm or index.html in the
folder you select, and all supporting files for the web content to function
must be in the same folder.) and it doesn't include the very important
information "Select the folder you have created. And a BIG surprise here,
you will see nothing. But don't worry, that's the fun part. Just click OK.
It will work."
So I was unsuccessful trying to follow online documentation and needed the
info in Joy's document to get it to work.
Thanks,
*Alison *