Sujets sur : ToolTip

Cours ActionScript 3 ‘ToolTip’

Comment créer une infos bulle ou ToolTip en AS3 ?

4 questions

Ecrit le 25 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Dans ce tutoriel, nous allons découvrir la création ActionScript du  Composant AS3 : ToolTip.

Un ToolTip est une bulle d’information, elle apparait généralement au dessus d’un bouton, d’un formulaire…

I – Cahier Des Charges Fonctionnel du ToolTip

Un ToolTip est un UIComponent composé :

  • d’un background ( arrière-plan )
  • d’un champ texte de type UITextField.

Comme nous l’avons appris dans les tutoriels précédents, il suffit de passer en paramètre une instance de la classe ToolTip au setter tooltip de la classe de base UIComponent.

La méthode show() (du composant) sera appelée lorsque l’UIComponent en question sera survolé par l’utilisateur.

Le composant ToolTip possède les fonctionnalités suivantes :

  • Personnalisation du texte ainsi que de son formatage.
  • Personnalisation de l’arrière-plan de l’infobulle.
  • Apparition après un délai défini de l’infobulle ( exprimé en millisecondes ).

II – Cahier Des Charges Techniques du ToolTip

Le Cahier Des Charges Technique du composant ToolTip est relativement simple.

  • Personnalisation du texte ainsi que de son formatage.

Pour cela, nous coderons un getter qui renverra une référence au champ texte de type UITextField.

  • Personnalisation de l’arrière-plan de l’infobulle.

Comme d’habitude, nous allons overrider la méthode de base applySkin de la classe UIComponent.

  • Apparition après un délai défini de l’infobulle ( exprimé en millisecondes ).

Nous allons overrider la méthode de base show de la classe UIComponent. Et ensuite, nous lancerons la méthode parente après le délai défini dans un setTimeOut.

Nous laisserons également la possibilité à l’utilisateur de modifier ce délai à tout moment à l’aide d’un getter / setter.

Conclusion

Ce Tutoriel conclut la série vous expliquant la création du Framework de Composants AS3 Facile.

Ci-dessous, le Composant AS3 ToolTip en action.

Évolutions des fonctionnalités

Je vous propose de laisser vagabonder votre imagination et de créer des Skins pour le composant ToolTip. Étonnez les Développeurs d’ActionScript-Facile.

Vous pouvez également ajouter un effet Tween pour gérer l’apparition du ToolTip, un effet alpha, lui ajouter une ombre

Sources commentées

  • ToolTipExample.as
  • com.actionscriptfacile.ui.tooltip.ToolTip.as
  • com.as3facileexemple.skin.classic.DefaultToolTipSkin.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Composant ToolTip Framework AS3 Facile”

component_tooltip_framework_actionscript-facile.zip – Téléchargé 1199 fois – 76,31 Ko

Quels sont les prochains tutoriels que vous souhaitez sur ActionScript-Facile ?

Voulez-vous des exemples d’utilisation des Composants AS3 Facile ? Des fonctionnalités supplémentaires, des nouveaux Composants ?

Dites moi cela tout simplement dans les commentaires juste en dessous.

[codesyntax lang= »actionscript3″ title= »ToolTipExample.as » bookmarkname= »ToolTipExample.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.tooltip.Tooltip.as » bookmarkname= »com.actionscriptfacile.ui.tooltip.Tooltip.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultToolTipSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultToolTipSkin.as »]

[/codesyntax]