It's very nice animation. I appears however to be built in Flash. I spent half a day trying t figure out how this was done... then I right clicked on the browser window while it played. Flash! Again, I'm not trying to downplay its beauty, but Storyline can't build this. It can only play it. Can't build it!! That's frustrating. In 5 years, nothing has replaced Flash, and the program itself hasn't evolved to be acceptable in the mobile world. E-Learning has and will suffer because of the downfall of Flash. Craptivate, Storyline, even Edge will not compare to the customization and freedom that Flash gave us. I hate to be a broken record and after only 15 years in the biz feel like an old timer... Anyway, this well executed animation gave me some hope... Too good to be true.
Storyline 2 renders in flash in the web view, that's why there is the story.swf in all your builds. IIRC, the flash file acts as a container to render all the storyline activities, which is why html5 isn't always supported, as it isn't at the core what Storyline 2 was built to use (flash).
Thanks for the comments, Cole.
This is in fact built entirely in Storyline using some clever and perhaps unorthodox animation techniques. You are correct though. The output for this particular demo is limited to Flash as the html5 output produced less than desirable results. The next step for me is to create something similar that is compatible with html5. While I expect it to take longer, I have no doubt that it can be achieved. Where there is a will, there is a way.
Lovely!! For the animations that appear to slide in from a smaller shape within the screen, rather than the boundaries of the screen itself (e.g. the discussion bubbles on the phone that appear to slide up from the phone's screen rather than the bottom of the window) - how is that done?
Finally got some time to crack it. I added some text and a theme around it.
Here is the output:
http://kawstov.com/Demo/Learning/story.html
Here is the story file (SL2):
http://kawstov.com/Demo/Learning/Learning%20Animation%20Demo.story
Thanks again to Ian for his brilliant inspiration.
Regards,
Kawstov
Awesome that you were able to recreate this!
I downloaded the second link as well, but only got a zipfile with the published package. Could you please also share the link to the Storyline file?
Sara,
That's weird. The link is working fine at my end.
I am sharing the dropbox link for you:
https://www.dropbox.com/s/qk83pona3krp1dr/Learning%20Animation%20Demo.story?dl=0
Hi Kawstov - thank you for providing this. Very helpful! One question I have is why are the layers needed? Can you still create this without the layers? Are layers just needed to ease editing of each part of the scene?
Thank you!
Yes. You can create this type of interaction without layers. That's the route I took. Layers help keep things organized, but there are other ways keep things in order as well. I personally like to "group" large sections of the animation together. For example, all the elements used to create the computer are grouped, then the elements used to make the phone are grouped, and so on. This method simply worked for me. Something I like about Storyline is that there is no single way to achieve something like this. Two people could have two completely different approaches and get the same results.
Kawstov, thank you SO MUCH. This is immensely helpful for someone has the task of creating an eLearning module without any Storyline experience. Thank you so much for giving me something to work with; just going through your file has taught me a ton. You are a godsend! Thanks to the original creator as well.
Thanks alphonso...
By the way... ian you are right... it can be built with SL1 animations. The html5 version has a few clinks in the guitar strings animation... will do it later...
Hi Kyle,
Sorry for the late reply.
The music file is in the slide master. I kept it there for continuous playback irrespective of the slide number/ layer number.
Regards,
KS
Ian - simply brilliant, and thank you for reminding us that some of the most amazing ideas need only a simple solution.
Kawstov, thanks to you too for cracking it and sharing the source file
Ian - Thank you so much for inspiring me for this amazing animation. I relaunched the course 10 times but was unable to figure out how did you do this.
Kawstov - You made my day by providing the Storyline file. Thank you much!
Enjoy your weekend Guys! Thanks again. :)
137 Comments