If you want to read this in english. Checkout the openfl forum.

Il ne s'agit pas ici d'un tutoriel mais d'un retour d'expérience sur la création d'une application multi-plateforme avec un seul code source (langage Haxe) :

• html5 pour tablettes tactiles
• flash pour navigateurs de bureau (indispensable pour que l'application fonctionne sur IE8 par exemple)

Le plugin est téléchargeable sur le site d'Adobe gratuitement. Il faudra cependant s'abonner à FlashCC (je n'ai pas testé le plugin sur AnimateCC) le temps du projet (29.99EUR HT/mois pour la formule mensuelle). Une fois le plugin installé, un nouveau type de projet apparaitra. Cela permettra d'exporter les graphismes et animations dans un format compatible avec OpenFL.

Tout d'abord, il faut savoir qu'à l'heure actuelle, beaucoup de fonctions sont désactivées dans FlashCC pour que le plugin fonctionne. C'est le cas notamment des BlendModes et des filtres.

Ainsi, quand on importe dans notre projet OpenFL/FlashCC des graphismes venant d'Illustrator par exemple, ces options sont supprimées. L'image de gauche comporte des options (blendMode, alpha, ombre portée) tandis que l'image de droite est le résultat obtenu après import dans notre projet OpenFL/FlashCC.

La liste des incompatibilités est affichée lors de l'import.

Ainsi, pour produire ce type d'image dans notre application flash/html5, nous avons 2 solutions :

• Recréer les effets en code. Attention les BlendModes ne fonctionnent pas en html5 (sauf webgl)
• Importer en tant qu'image bitmap

Ayant d'abord écarté le Webgl à cause de son manque de support sur tablette. J'ai ensuite écarté le Canvas car diffuser une vidéo à l'intérieur d'un Canvas sur tablette semblait ne pas fonctionner. Finalement, après quelques essais en Dom, les performances globales de mon application n'étaient pas satisfaisantes. Je suis donc reparti pour le Canvas mais en sortant la vidéo du Canvas (cf partie vidéo).

L'utilisation de FlashCC pour un projet openFL permet d'utiliser des images vectorielles facilement. Cependant, il arrive parfois qu'on obtienne un résultat quelque peu différent quand on compile pour html5. Les formes apparaissent souvent "fermées" sur cette plateforme (à gauche la forme souhaitée, à droite la forme obtenue en html5).

Encore une fois, 2 solutions s'imposent à nous :

• Convertir les images vectorielles posant problème en Bitmap. Evidemment, on oublie alors le bénéfice du vectoriel.
• Utiliser ces correctifs.

L'affichage de champs textes créés à partir de FlashCC posent problème en flash. En effet, les champs textes flash n'utilisent pas les polices incorporées. Bizarrement, la propriété embedFonts est paramétrée à false. Forcer son paramétrage à true fait disparaître le texte. La seule solution que j'ai trouvé est de copier les propriétés du champs texte dans un nouveau TextField en mettant bien embedFonts à true (cf bug).

J'ai fait un script si jamais vous rencontrez le même problème :

Il semblerait que placer certains clips avec des rotations négatives posent problème. Certaines positions sont incorrectes. A éviter donc.

Dans de nombreux cas en html5, un simple clip à 2 états créé avec FlashCC ne fonctionne pas. Seule la 1ère frame semble utilisable.

Une solution simple quand cela arrive semble de garder l'image de la 1ère frame sur la seconde.

A noter aussi, que certaines animations réalisées sur FlashCC ne se lancent pas en html5. Il vaudra alors peut-être mieux les créer via la librairie Actuate. FlashCC servant alors seulement à prototyper ses animations.

La gestion de la vidéo avec OpenFL est légèrement différente selon la plateforme. La manière de récupérer la durée et les statuts de la vidéo est différente. Flash utilise onMetaData et l'évènement NetStatusEvent.NET_STATUS tandis que html5 utilise onPlayStatus qui agit comme NetStatusEvent.NET_STATUS avec des noms de statuts parfois différents. Le snippet suivant montre la manière dont j'ai créé ma vidéo.

Suite à quelques problèmes de performance dans la version html5 Dom, je suis finalement passé au Canvas. Les vidéos Canvas passant très mal sur mobile, il m'a fallu trouver comment afficher une vidéo en dehors du Canvas. J'ai donc créé une balise en pur javascript pour ensuite le manipuler depuis Haxe. Il faut pour cela modifier le template html (cf Partie template).

lime.embed ("openfl-content", ::WIN_WIDTH::, ::WIN_HEIGHT::, "::WIN_FLASHBACKGROUND::");
//create the video			
var video = document.createElement('video');
video.id = "videoDisplay";
video.autoPlay = false;
document.body.appendChild(video);

Puis j'ai légèrement modifié mon code Haxe. A noter que cela implique de masquer/afficher la vidéo au moment opportun, placer la vidéo à la bonne position et utiliser l'évènement Event.ENTER_FRAME qui est cette fois indispensable dans la version html5.

#if html5
var htmlVideo:VideoElement;
htmlVideo = cast(Browser.document.getElementById('videoDisplay'), VideoElement);	
htmlVideo.src = videoName;
htmlVideo.style.top = videoY + "px";
htmlVideo.style.left = videoX + "px";
htmlVideo.style.visibility = "hidden";
#end

function play():Void
{
	#if html5
	duration = Std.int(htmlVideo.duration);
	htmlVideo.play();
	htmlVideo.style.visibility = "visible";
	#end
}
function onUpdate(e:Event):Void
{
	#if html5
	handleProgression(Std.int(htmlVideo.currentTime) / duration);
	#end
}

Pour avoir un seul fichier html qui choisit la version de l'application à présenter (flash ou html5), il faudra modifier le template html pour qu'il corresponde à nos besoins. Celui se trouve dans le répertoire haxelib openfl\x,y,z\templates\html5\template. Ensuite, il suffit de l'indiquer dans le fichier project.xml avec ses fichiers dépendants.

<section if="html5">
	<template path="Assets/template/template.html" rename="index.html"  />
	<dependency path="Assets/dependencies/swfobject.js"  />
	<assets path="Assets/exportflash" rename="" embed="false" />
</section>

Pour gérer des paramètres d'application depuis le template html, il faudra utiliser une manière différente pour les deux plateformes :

Pour flash, il suffit d'utiliser les flashvars à l'aide de swfobject.

so = new SWFObject("flash.swf", "flash-content", "100%", "100%", "11", "#FFFFFF");
so.addVariable("myParameter", data);

En revanche, pour html5, il faut utiliser les métadonnées suivantes pour informer le compilateur de rendre cette fonction accessible en javascript.

//.hx
#if html5
@:keep @:expose("parameters.sendParameters")
public static function sendParameters(data:String):Void
{
	trace('parameters : ', data);
}
#end
//.html
lime.embed ("openfl-content", ::WIN_WIDTH::, ::WIN_HEIGHT::, "::WIN_FLASHBACKGROUND::");
parameters.sendParameters(data);

Au final, mon application a été un succès et je suis très satisfait de mon expérience avec OpenFL. Mon avis est cependant mitigé concernant l'utilisation de FlashCC compte tenu de son coût et de ses limitations actuelles. Mais il est tout de même possible que je tente l'expérience une nouvelle fois puisque la création de template graphique avec FlashCC permet quand même un gain de temps, à condition de savoir où l'on met les pieds.