Canvas HTML5 : EaselJs en Haxe pour Javasript avec EaselHx
EaselJs
EaselJs est une librairie créée par grant skinner.
Sa principale fonction est de simplifier la gestion de la liste d'affichage, les interactions et les animations simples dans un canvas HTML.
Cette lib déclare des objets bien définis qui seront familliés à certains comme le montre la doc Elle reste cependant relativement fine.
Le petit outil associé zoë permet (en gros) de convertir des anim flash en objets BitmapSequence d'easelJs.
EaselHx
EaselHx est un dépot git des classes "externs" Haxe permettant d'utiliser EaselJs avec ce language. Ce dépot ne supporte cependant que EaselJs 2.1 alors que la v 3.0 vient de sortir. Cependant le "forker" et ajouter les quelques fonctionnalités manquantes ne doit pas prendre longtemps.
Le fait d'utiliser ce dépot avec EaselJs apporte les avantages supplémentaires suivants :
- environnement résolument orienté objet relativement propre et évolutif.
- typage stricte avec les vérifications d'incohérences associées à la compilation
- auto-complétion dans les IDE permettant de coder en Haxe comme FlashDevelop
Exemple
Pour note et tests personnels j'ai fait un petit exemple absolument pas fonctionnel (un pseudo-carousel).
Bien que la version montrée ici utilise la version 2.1 d'EaselJs et que la lib ait déjà évoluée et gagné en performance, l'exemple interactif au survol de la souris donne une idée des possibilités, .
Il montre aussi comment retailler à la volée des images trop grandes avant de les montrer dans un contexte animé.
Remarque : Les images ne sont pas incluses avec les sources, (voir dans la classe "Carousel" pour la nomenclature de nommage)
Sources avec projet FlashDevelop
Exemple en ligne > Passer la souris au dessus du carousel pour l'animer
0 Commentaires
-
(you)Feb 23, 2012 at 00:09