Convertir du Flash à HTML 5 et JavaScript automatiquement ? Oui, ça semble possible ! Du moins, c'est la solution proposée par Smokescreen, un convertisseur Flash écrit en JavaScript qui pourrait être une alternative à considérer sur les appareils comme les iPad, iPod et iPhone qui ne supportent pas le Flash (Monsieur Jobs le considère désuet et est à couteaux tirés avec Adobe).
J'étais sceptique face à cette approche car j'avoue avoir une bien mauvaise idée du fonctionnement interne du plugin, de Flash et HTML5 mais je me devais d'aller l'explorer. Après avoir visionné quelques démos, ça semble bien fonctionner, avec un léger ralentissement parfois peu notable. Il ne faut pas s'attendre à ce que ça soit parfait, la librairie Smokescreen est encore au stade de preview avec la version 0.1.3 qui prouve que le concept est réalisable (le code source est minifié pour ne pas en dévoiler tous les secrets).
Comment ça fonctionne ? Avec des fichiers SWF conçus avec Flash 8, certaines animations, le streaming de son, les effets sonores et du ActionScript de base peuvent être supportés par Smokescreen.
Qu'est-ce qui ne fonctionne pas ? Internet Explorer et Opera (reconnaissance trop faible du HTML 5 je suppose. Voir le test de compatibilité HTML 5 des fureteurs).
Pour faire la démonstration, on nous propose quelques bons choix avec les capsules Strong Bad email de HomeStar Runner. Autres démos disponibles ici.
Je suis même allé jusqu'à désactiver le plugin Flash de Firefox pour voir si tout était conforme. Étonnant, ça marche! Mais y a-t-il un tour de passe-passe qui se cache derrière ces fichiers SWF ? Est-ce truqué ? J'ai donc extrait tout le code nécessaire et j'ai tenté ma chance avec un fichier d'animation Flash tiré d'un projet que notre entreprise a réalisé récemment.
J'ai enregistré localement la librarie JavaScript, j'ai déposé mon fichier SWF et j'ai épuré le code HTML du démo comme ceci :
<!DOCTYPE html>J'en conclus que ça fonctionne et plutôt bien! Mais patientez encore un peu, ce sera bientôt lancé en open source prochainement! À surveiller.
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="js/smokescreen.0.1.3-min.js"></script>
<script>
function urlParam(name, _default) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]")
var regexS = "[\\?&]" + name + "=([^&#]*)"
var regex = new RegExp(regexS)
var results = regex.exec(window.location.href)
if (results == null) {
return _default
}
else {
return results[1]
}
}
function embed(container) {
var url = 'swf/mon-animation.swf'
var element = document.getElementById(container)
var size = urlParam('size', 1)
var width = 550 * size
var height = 400 * size
var name = 'animation'
var params = {}
new Smokescreen(url, element, width, height, name, params)
}
</script>
</head>
<body>
<div>
<div id="fljs">
No Smokescreen :(
</div>
<script>
embed('fljs', true)
</script>
</div>
</body>
</html>
impressionnant, dommage que ce ne soit pas du tout exploitable à cause de cette cochonnerie d'IE qui mange le marché et nivelle par le bas toutes les tentatives des entreprises...
salut j'ai tester de mon coter avec ton code j'ai rien qui fonctionne
a la place de No Smokescreen :( ...
peu tu en dire un peux plus svp
@10tribu Avec quelle version de fureteur ? Quelle version de Flash a été utilisée pour créer le SWF ?
N'oublie pas que c'est encore en développement de la part des concepteurs, c'est possible que tout ne soit pas 100% compatible (je suis allé voir, pas de nouvelle version depuis).
Si tu veux, tu peux m'envoyer le code par email, je vérifierai.
@10tribu
Tu as peut-être tout simplement eu le même problème que moi : en copiant le code j'ai bêtement oublié d'enlever les numéros de ligne.
Après que je me sois rendu compte de ma bourde ça a marché nickel.
Bonjour,
J'ai tenté de convertir une animation flash avec du action script et qui dépend d'un fichier xml mais cela ne donne rien. Juste un rectangle noir. J'ai cru voir que cela fonctionne avec du code AS mais à priori celui de mon animation est trop complexe.
Dommage...