It was done in Flash so you would need the .fla file to work with it. You can export animations from Adobe Animate(Flash) as html5 canvas now which works great as web objects in SL.
Are you sure? Ian already proved that he is a brilliant Storyline Animation designer (https://community.articulate.com/e-learning-examples/storyline-2-flat-icon-animation). Just because it is published with flash does not mean he used Adobe Animate.
For the first Flat Animation someone already added a story file se here: https://community.articulate.com/e-learning-examples/storyline-2-flat-icon-animation?page=3
I am not sure I follow. My only point is Flash is absolutely dying and dead. All browsers have either phased it out completely or will soon. I made a living off of Flash design and development for nearly 10 years in the past, ditched it 3 years ago. My point here is about the technology used, we should all be avoiding using Flash at this point. The design is super cool and could easily be done with HTML5 too using https://greensock.com/ or Adobe Animate with canvas export.
I don't know exactly which animations Ian uses, but some of them are not working in HTML5 Output. But I am sure there are ways to do this with storyline as well. There are some crazy masking possibilities within storyline ;)
Untrue. As Ian mentioned in this animation: https://community.articulate.com/e-learning-examples/storyline-shape-shifting-animation, it was done entirely in Storyline.
Right click anywhere on the browser window and you will see the flash contextual menu. You can see references to it in the code:
// Detect min flash version
var g_bMinFlash = false;
if (navigator.plugins["Shockwave Flash"])
{
var arrDescription = navigator.plugins["Shockwave Flash"].description.split(" ");
var nVersion = Number(arrDescription[arrDescription.length - 2]);
g_bMinFlash = (nVersion >= 10) || isNaN(nVersion);
}
else
{
try
{
var oActiveX = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.10");
if (oActiveX)
{
g_bMinFlash = true;
}
}
catch (e) {}
}
That is all I am saying. Older version of Storyline maybe?
Anyways, that link you put is great.
I did not use Storyline2 but I am sure there are big differences between the way SL use to handle things when it was all flash based to now with canvas output. I find myself needing to code html5 animations frequently to get more robust concepts accomplished. Your link example is really inspiring in terms of storyline native animation.
I have to credit the eLearning Guys Podcast where this method is explained.
You can see the full episode here: http://www.theelearningguys.com/17
Short video about this method: https://www.youtube.com/watch?v=uj7vWvHGBaA&t=5s
And it works fine!
I believe it comes back to form, function, and target audience. Our audiences use Chrome and iOS. This particular file will not play in Chrome. So it looks great, and may not be stable for devices that can't play flash. Still very brilliant design, and I love the look and feel. I wish I knew how he made it. Great place to get ideas, but flash does not play well with others.
Howdy folks,
I see this has created quite the debate.
I can confirm that both my Flat Icon Animation demos were created entirely in SL1 and SL2, then published to Flash. At the time I published to Flash because the HTML5 output was not up to par. It's still not great for animations in my opinion, but it's getting better (in Chrome at least). The limitation on animations in IE would make it difficult to create something that is supported across all browsers, but you could probably get pretty close using the "masking" technique described above. This might not be the same masking effect you are used to if you have experience in video editing (Premiere, AE), but you can use it to create some interesting effects. I do this A LOT and recommend playing around with it if you haven't done so ... Expand
Howdy folks,
I see this has created quite the debate.
I can confirm that both my Flat Icon Animation demos were created entirely in SL1 and SL2, then published to Flash. At the time I published to Flash because the HTML5 output was not up to par. It's still not great for animations in my opinion, but it's getting better (in Chrome at least). The limitation on animations in IE would make it difficult to create something that is supported across all browsers, but you could probably get pretty close using the "masking" technique described above. This might not be the same masking effect you are used to if you have experience in video editing (Premiere, AE), but you can use it to create some interesting effects. I do this A LOT and recommend playing around with it if you haven't done so already!
27 Comments
Howdy folks, I see this has created quite the debate. I can confirm that both my Flat Icon Animation demos were created entirely in SL1 and SL2, then published to Flash. At the time I published to Flash because the HTML5 output was not up to par. It's still not great for animations in my opinion, but it's getting better (in Chrome at least). The limitation on animations in IE would make it difficult to create something that is supported across all browsers, but you could probably get pretty close using the "masking" technique described above. This might not be the same masking effect you are used to if you have experience in video editing (Premiere, AE), but you can use it to create some interesting effects. I do this A LOT and recommend playing around with it if you haven't done so ... Expand