Calendrier

Février 2012
Lu Ma Me Je Ve Sa Di
<< >>
12345
6789101112
13141516171819
20212223242526
272829

Canvas HTML5 : EaselJs en Haxe pour Javasript avec EaselHx

Dernière mise à jour Feb 10 2011

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

Nom : E-mail : Site web : Message :