Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les Tweens en Flash

Par thoutmosis (Legrand), le 25 mai 2011

Ne vous est-il jamais arrivé de vouloir mettre un peu plus d'animation sur vos sites flash ? En avez-vous assez de déplacer vos objets à l'aide de la timeline ? Ne vous êtes-vous jamais dit: “Ah que j'aimerais pouvoir bouger tout ça en code, de manière simple et souple, sans EnterFrame ?”

Si la réponse à l'une de ces questions est oui alors il est fort probable que vous n'employez pas encore une librairie de tween… Mais au fait, qu'est-ce qu'un tween ?

Prérequis

Pour pouvoir suivre ce tutoriel il vaudrait mieux que vous sachiez ce qu'est une interpolation dans Flash ou ce qu'est une interpolation tout court.

Les Tweens et les librairies de Tweens:

Qu'est-ce qu'un Tween ?

Tween n'est rien de plus que l'équivalent anglais du mot français “interpolation”. Si vous avez déjà fait du flash ce mot devrait vous dire quelque chose, en effet il est possible de créer différents types d'interpolations à l'aide de la timeline de flash, par exemple pour déplacer un objet d'un point A vers un point B. Dans le cas d'un Tween crée à l'aide d'une librairie de Tween, tout se fait par le code et est donc contrôlé sans timeline.

Voici un exemple ( cliquez sur le carré rouge autant de fois que vous le voulez ):

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

En résumé, une interpolation ( et donc un tween ), c'est l'action de définir/calculer des transitions entre deux états ( un de début et un de fin ) d'une propriété d'un objet. “C'est très joli tout ça mais à quoi cela sert-il dans les faits ?”

A quoi ça sert un Tween ?

A une multitude de choses parmi lesquelles :

  • Contrôler parfaitement la durée d'une animation
  • Lancer plusieurs animations en même temps et / ou à la suite.
  • Animer des objets avec des effets de types : élastiques, rebond, exponentiel etc…
  • Créer des effets de toute beauté en manipulant des filtres.
  • Créer des actions qui se déclenchent après un délai.
  • Appeler des fonctions à la fin d'une animation.

Et tout ça en code !! Les possibilités sont énormes et dépendent surtout de la librairie de tween que vous allez choisir. Mais au fait pourquoi utiliser une librairie ?

Pourquoi ne pas utiliser les Tween de base de flash ?

En effet, l'API de flash possède son propre lot de fonctionnalités permettant de créer des tweens tout en code, cependant cette librairie est peu pratique, assez lente et terriblement pauvre en fonctionnalités. Il existe cependant des librairies alternatives écrites par des développeurs et à libre disposition sur la toile.

les différentes librairies de Tween:

Les différentes librairies de Tween

Il existe pas mal de librairies de tweens différentes à disposition sur la toile et parmi les plus connues se trouvent notamment :

  • Les Tweeners de Caurina
  • Tweenlite, TweenMax
  • Fuzekit

Si vous vous rendez sur le site des éditeurs de ces librairies, vous trouverez souvent une liste d'articles et de tutos dédiés à leur utilisation ce qui nous amène à la question suivante…

Comment choisir sa librairie de Tween ?

Parmi les différents critères à prendre en compte les plus importants (à mon sens), sont les suivants:

  1. Être à l'aise avec sa librairie.
  2. La clarté de la syntaxe et la simplicité d'utilisation.
  3. Les performances (en effet certaines librairies sont plus rapides que d'autres)
  4. Les fonctionnalités et plugins additionnels (ces derniers nous sauvent la vie bien plus souvent qu'on ne le pense).

Je vous recommande vivement d'essayer plusieurs librairies afin de déterminer laquelle vous convient le mieux. Cependant mieux vaut en connaître plusieurs car nombreuses seront les occasions où vous aurez à passer d'une librairie à une autre. Pour ma part j'ai décidé de vous présenter la librairie de Tween de greensock, j'ai nommé TweenLite/TweenMax.

Pourquoi avoir choisi Tweenlite ?

Pour plusieurs raisons parmi lesquelles :

  • Une syntaxe claire
  • Fait partie des librairies les plus utilisées.
  • Une prise en main rapide
  • Un système de plugins vraiment facile à comprendre et à mettre en place
  • Les performances. En effet, utilisée correctement, cette librairie est l'une des plus rapides
  • Un lot de fonctionnalités énorme
  • Dispose d'un swf d'exemple qui vous permettra de générer vos codes sources à l'aide de cases à cocher: Pratique lorsqu'on débute !!

Conclusion

Dans le prochain chapitre nous attaquerons directement les choses sérieuses en codant nos premiers tweens. En attendant vous pouvez toujours faire des recherches sur les librairies de tweens existantes ( il y en a beaucoup ).