Flash c’est reparti !, Animate CC c’est parti !

Après une période de doute et d’incertitude, notamment suite à l’annonce de l’arrêt du logiciel Edge Animate pourtant lancé depuis quelques temps, les choses semblent avancer dans le domaine de la production d’animation html5.
Adobe semble vouloir relancer un de ses produits phares anciennement Adobe flash et relancé sous le nom d’Animate CC. Les habitués ne seront pas dépaysés en retrouvant leur IDE, même interface, même logique d’animation.
On vous proposera même de produire des animations au format swf, comme si cette technologie ne voulait pas vraiment disparaître. Mais si en apparence les choses semblent identiques c’est pourtant au coeur du logiciel que ce niche la nouveauté.
A la création d’un nouveau fichier on vous proposera de produire deux types de documents : Canvas ou WebGL l’action script 3 étant relégué plus bas.
La bibliothèque create js soutient désormais le processus d’animation et de programmation HTLML5/JS. Vous découvrirez assez vite les limites de ce que vous pouvez faire avec cette technologie, moins aboutie et moins performante que le moteur de rendu flash, car ici c’est votre navigateur qui doit prendre en charge le rendu de l’animation et même si create js se montre habile à gérer vos animations, il convient de veiller à la taille de vos animations, qui peuvent assez vite mettre en difficulté votre navigateur et votre machine. Voir article sur les nouveautés Animate CC

Un cas concret

Réaliser une animation HTML5, avec Animate CC n’est pas vraiment un problème en soit, malgré quelques restrictions et des warnings sur le panneau de sortie (vous indiquant les styles graphiques ignorés), la chose se fait sans trop d’écueil, mais pour piloter cette animation, c’est quelque peu différent, notamment avec les terminaux mobiles qui ne permettent pas de lancer un médium (audio, vidéo de façon automatique). Cette restriction des constructeurs étant le moyen de limiter les frais de bande passante inopinés lorsque le lien cliqué mène à une vidéo ou un enregistrement sonore.
Un événènement « trigger » déclenchant la lecture est nécessaire pour lire les médias.

La solution adoptée : détecter le user agent

Pour cette animation voir le résultat j’ai décidé d’avoir deux comportements distincts donc deux animations suivant que l’utilisateur est desktop ou mobile. Pour ce faire je détecte le user agent grâce à un javascript.

<script src="js/mobile-detect.js"></script>
<script>
   var md = new MobileDetect(window.navigator.userAgent);
    if (md.mobile()) {
        location.href = (md.mobileGrade() === 'A') ? '/mobile/' : '/lynx/';
		document.location.href ="http://www.i-com.fr/voeux/2017/voeux-mobile.html";
    } else {
		document.location.href ="http://www.i-com.fr/voeux/2017/voeux-desktop.html";
	}
</script>

Les mains dans le code

Au niveau du code javascript la programmation est en POO, tous comme l’AS3, la logique reste la même toutefois, vous pouvez vous documenter sur cette bibliothèque :
Le choses sont assez simple d’un côté il nous faut une animation desktop qui se lancera à l’ouverture de la page, le son également chargé s’executera pendant la lecture de l’animation
de l’autre il faut prévoir un bouton d’action qui permettra aux mobinautes de lancer l’animation
Dans les deux cas je prévois un bouton qui permettra de couper le son pendant la lecture de l’animation pour une consultattion discrète.

Premier scénario :

_main = this;
_main.stop();
// j'arrête l'animation
createjs.Sound.on("fileload", handleLoad);
// je charge le son
createjs.Sound.registerSound("audio/son2.mp3", "soundID");
// je creé mon objet son
function handleLoad(event) {
	_main.audio1 = createjs.Sound.play("soundID");
	_main.play();
// le son est chargé je joue l'animation
}

this.bt_play.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame() {
	this.audio1.paused = false; // pause 
	this.bt_play.alpha = 0;
	this.bt_pause.alpha = 1;
}
// Je Crée mon bouton pour jouer l'animation
this.bt_pause.addEventListener("click", fl_ClickToGoToAndStopFromFrame.bind(this));

function fl_ClickToGoToAndStopFromFrame() {
	this.audio1.paused = true; // pause 
	this.bt_pause.alpha = 0;
	this.bt_play.alpha = 1;
}
// Je Crée mon bouton pour arrêter le son

Voir le résultat

2éme scénario
ici c’est assez similaire au niveau du code, il faudra juste charger le son au chargement de la page mais ne pas l’exécuter, de la même manière l’animation ne démarre qu’au clic sur le bouton « bt_demarre »

this.bt_demarre.addEventListener("click", fl_GO.bind(this));
function fl_GO() {
_main.audio1=createjs.Sound.play("soundID");
_main.play();

}

Voir le résultat