Plenty of new tools are arising in order to make a quick-move from the “old” Flash to the “new” HTML5, as HTML5 can’t still be taken into consideration when you need to create loads of contents. Simply put, there are no IDEs which would allow rapid-application-development. If you want graphic libraries, you must do it yourself. Coding? The same. Sound? The same.
Sure, there are lot of pre-written libraries, but they can’t be usable in a real pro environment. I can’t charge my interactives 1 or 2MB of javascript libraries (minimified, of course), only to have very limited possibilities, given that for me is a must-have compatibility with many browsers and platforms. Scalable graphics, toons animation with A/V support, etc. Many of my old customers are calling now companies in third-party countries, which are employing hordes of pseudo-programmers only to make what we could do before using a very compact and tiny team. Maybe cheaper. I don’t like the results in many situations and I don’t think my customers like ’em. Cheap and quick is never a real solution if you wanna be a top-notch in your field. Functionality and design are the answers. Before that could be done in a more or less cheap and fast way, as we had tools. Now STILL it can’t be done.
Adobe Edge should be in a future a possible answer.
Some of the answers we have now (Edge not being a realiable solution today we can take into account) are “Flash Professional Toolkit for CreateJS” (formerly called Wallaby), which didn’t meet the requirements the last time I tried it.
I’ve tested today Google’s Swiffy. The last time it wasn’t either ready. And it isn’t! But I found a use today, so I thought I should comment.
It works pretty fine for plain animations (cartoons) in the main timeline, and supports a very basic (but still usable) subset of AS2 (more limited AS3). Enough for clicks and so on… And I found the way to inter-communicate with the animation, so I can rely in Swiffy for the animation and cover from outside the rest (such as sync audio or whatever is needed). The cost is pretty high, though (164Kb), but at least I’m not forced to write my own animation engine (which is why I wasted this entire day to test Swiffy).
There are things you must considerate, such as the fact that some times you can’t play two things at the same time (ie, the main timeline and a mc). But if you learn the rules, it isn’t difficult to create quick, realiable and fashionable animations.
This is how you do it:
AS2 (place this on the root of your Flash movie):
// "custom methods" broadcasted to JS
playSound = function(id){fscommand('playSound',id)}
_stop = function() {fscommand('stopped');stop();}
// orders coming from JS (such as FlashVars)
this.onEnterFrame = function(){
if(this.command){
var c = this.command;
if (c=='play'){
play();
} else if (c=='stop'){
stop();
}
}
this.command = null;
}
I used AS2, because it offers more methods and classes, including fscommand. You have as well getURL (and navigateToURL in AS3), but it’s much more rough than fscommand, as it addresses directly a named js function instead of passing it to the browser, such as “javascript:function()”.
You can see in this code two parts:
- Send info to javascript using fscommand.
- Receive info from javascript using the old-school flashvars method.
This is how you receive info in the javascript-side (well, Swiffy is nothing more than JS, but we’ll make the illusion, as if it was a different thing):
function swiffycontainer_DoFSCommand(cmd,args){
if(cmd=='stopped'){
alert('movie stopped')
} else if(cmd=='playSound'){
// do whatever, ie play sound id "args"
}
}
Hear this. The function receiving the fscommand must be called DIVNAME + “_DoFSCommand”. DIVNAME is the name of the div containing the swiffy object, such as (fix the DIV tags, as this damm CODE tag in WP doesn’t handle it):
DIV id="swiffycontainer" style="width: 808px; height: 424px">
CLODEDIV
That div is used later (code auto-inserted by Swiffy) as follow:
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);
stage.start();
So, we need the name of the div, in this example “swiffycontainer”, and append “_DoFSCommand”. You will receive one or two arguments in that function (depending on your desires), being the first one mandatory (as you’re commanding something) and the second one optional (you can pass here any options if you need to).
And, finally, this is how you send commands or info to the Swiffy object:
stage.setFlashVars('command=play');
You’re setting FlashVars as key=value. And you must address stage, which is the var you defined before to hold the swiffy object (well, Swiffy did it for you, but can change that name).
This sample one-liner will set the variable “command” to the string “play”. You will read that from the enterFrame handler you wrote before, and make something with it.
The part I don’t like is using SVG. Doesn’t seem very good in performance in complex animations, compared to their opponents Flash & canvas. That’s browser’s fault, as they have the SVG specs since ancient times (!).
In my preliminary tests, seems that the output is supported in much more browsers than those stated in the Swiffy website, but that may depend on the features you need (maybe some filters won’t work in older FF versions, or something like that). But works in a wide range of browsers/versions for the basic features I tested.
Cheers.
Julio Sancho's Blog 