Sujets sur : infobulle
Cours ActionScript 3 ‘infobulle’
Comment créer une infos bulle ou ToolTip en AS3 ?
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.
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/tooltip_exemple.swf |
É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é 1399 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 »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | package { import com.actionscriptfacile.ui.combo.element.ComboBoxElement; import com.actionscriptfacile.ui.utils.UIMargins; import com.actionscriptfacile.ui.combo.ComboBox; import com.actionscriptfacile.ui.text.UITextField; import com.actionscriptfacile.ui.tooltip.Tooltip; import com.as3facileexemple.skin.classic.DefaultComboBoxSkin; import com.as3facileexemple.skin.classic.DefaultToolTipSkin; import flash.display.Sprite; import flash.events.Event; import flash.text.Font; /** * * On reprend le même exemple que pour l'UITextField en ajoutant simplement * un ToolTip à la combobox * * @author Matthieu */ public class ToolTipExample extends Sprite { protected var m_comboFonts:ComboBox; protected var m_textField:UITextField; public function ToolTipExample() { /** * On construit la combobox */ m_comboFonts = new ComboBox(); m_comboFonts.applySkin( new DefaultComboBoxSkin() ); // on écoute les changements qui interviennent dans la combobox m_comboFonts.addEventListener(Event.CHANGE, changeHandler ); m_comboFonts.resize( 300, 70 ); m_comboFonts.componentsHeight = 25;// hauteur des éléments de la CombobBox m_comboFonts.margins = new UIMargins( 2, 2, 2, 2 );// ajout des marges au contenu de la liste /** * On construit son tooltip */ m_comboFonts.tooltip = new Tooltip(); m_comboFonts.tooltip.applySkin( new DefaultToolTipSkin() ); m_comboFonts.tooltip.label = 'Choisissez une Police de Caractère'; m_comboFonts.tooltip.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte m_comboFonts.tooltip.labelField.changeFormat("size", 12);// changement de la taille de la police du texte m_comboFonts.tooltip.labelField.changeFormat("font", "Arial");// changement de la police du texte m_comboFonts.tooltip.resize( 210, 30 ); // on ajoute tous les noms de polices autorisées comme élément de la combobox var fonts:Array = Font.enumerateFonts( true ); var boxElement:ComboBoxElement; for each ( var font:Font in fonts ) { boxElement = m_comboFonts.addElement( font.fontName, font.fontName ); boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte } /** * Définition du format du Titre de la ComboBox. * * Remarquez l'utilisation du paramètre true pour définir le format par défaut de notre Titre */ m_comboFonts.currentElement.labelField.changeFormat("font", "Arial",-1,-1,true); m_comboFonts.currentElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF,-1,-1,true); m_comboFonts.currentElement.labelField.changeFormat("size", 15,-1,-1,true); m_comboFonts.currentElement.labelField.changeFormat("bold", true,-1,-1,true); m_comboFonts.currentElement.labelField.alignCenter(); /** * On construit un UITextField */ m_textField = new UITextField(); m_textField.text = 'Enjoy Your Life :)'; m_textField.x = m_textField.y = 5; m_textField.width = m_textField.maxWidth = 300; m_textField.height = m_textField.maxHeight = 30; m_textField.changeFormat("size", 20);// changement de la taille de la police du texte m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur m_comboFonts.y = m_textField.y + m_textField.height; m_comboFonts.x = 20; m_comboFonts.tooltip.y = m_comboFonts.y - 55; m_comboFonts.tooltip.x = m_comboFonts.x + 200; addChild( m_textField ); addChild( m_comboFonts ); } /** * Fonction servant à écouter le changement de police au sein de la combobox. * On applique la police à l'UITextField que l'on a crée et placé sur la * scène. * * @param e Evenement de type Event.CHANGE */ private function changeHandler(e:Event):void { m_textField.font = m_comboFonts.currentLabel; m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.tooltip.Tooltip.as » bookmarkname= »com.actionscriptfacile.ui.tooltip.Tooltip.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | package com.actionscriptfacile.ui.tooltip { import com.actionscriptfacile.skin.ISkin; import com.actionscriptfacile.ui.text.UITextField; import com.actionscriptfacile.ui.UIComponent; import flash.display.DisplayObject; import flash.display.Sprite; import flash.utils.clearTimeout; import flash.utils.setTimeout; /** * La classe Tooltip est une infobulle comme on peut en voir dans n'importe quel logiciel graphique. * Elle sert à donner une information à l'utilisateur sur la fonction d'un objet graphique. * * @author Matthieu */ public class Tooltip extends UIComponent { // constante de skin ( arrière-plan ) static public const TOOLTIP_BACKGROUND_SKIN:String = 'TOOLTIP_BACKGROUND_SKIN'; private var m_background:DisplayObject; // l'arrière plan de l'infobulle private var m_texte:UITextField; // le champ texte de l'infobulle private var m_appearTimeout:Number; // le nombre qui va nous servir à réceptionner le setTimeOut private var m_appearTime:Number; // le temps ( en ms ) que va mettre l'infobulle à apparaître public function Tooltip() { /* * on crée une méthode init pour gagner des ressources, * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est * pas optimisé à la compilation, * on met donc toutes nos instructions dans une méthode privée init * */ init(); } /** * Initialise proprement les différents éléments du composant * */ private function init():void { /** * On définit le temps d'apparition à 1 seconde , on crée l'arrière-plan ( vide par défaut ) * ainsi que le champ texte puis on les ajoute à la displayList du composant. */ m_appearTime = m_appearTimeout = 300; mouseChildren = false;// désactive les évènements souris des enfants m_background = new Sprite(); m_texte = new UITextField(); m_texte.alignCenter(); addChild( m_background ); addChild( m_texte ); // on place le champ texte à 5 pixels histoire de laisser une marge m_texte.x = m_texte.y = 5; } /** * Définit / récupère le texte de l'infobulle */ public function set label( p_text:String ):void { // on définit le texte puis on resize avec une marge de 10 pixels en hauteur + 10 pixels en largeur m_texte.text = p_text; resize( m_texte.textWidth + 10, m_texte.textHeight + 10 ); } public function get label():String { return m_texte.text; } // récupère la référence UITextField du champ text de l'infobulle public function get labelField():UITextField { return m_texte; } /** * Récupère / définit le temps d'apparition de l'infobulle */ public function get appearTime():Number { return m_appearTime; } public function set appearTime(value:Number):void { m_appearTime = (value < 0 ) ? 0 : value; } /** * Applique une skin à un composant de type ToolTip * * @param p_skin Objet implémentant l'interface ISkin */ override public function applySkin(p_skin:ISkin):void { var definition:Class; definition = p_skin.getSkin( TOOLTIP_BACKGROUND_SKIN ) as Class; // si on a réussi à récupérer une définition pour l'arrière-plan alors ... if ( definition != null ) m_background = new definition(); // on l'applique // on rajoute le texte et l'arrière-plan à la displayList addChild( m_background ); addChild( m_texte ); } /** * Redimensionne intelligemment un composant de type ToolTip * * @param p_width nouvelle largeur du composant * @param p_height nouvelle hauteur du composant */ override public function resize( p_width:Number, p_height:Number ):void { // la hauteur maximale du ToolTip est la hauteur - 5 pixels m_texte.maxHeight = p_height - 5; // même chose pour la largeur, de cette manière on préserve la marge de 5 pixels que l'on s'est laissé. m_texte.maxWidth = p_width - 5; // la hauteur et la largeur du background sont égales aux dimensions passées en paramètre. m_background.width = m_texte.width = p_width; m_background.height = m_texte.height = p_height; } /** * Ajoute le composant à la display list de son lastParent après que le temps d'apparition * soit écoulé */ override public function show():void { // on se charge d'appeller le fonction show() parente au bout de m_appearTime ms. m_appearTimeout = setTimeout( super.show, m_appearTime ); } /** * Enlève le composant de la displayList de son lastParent */ override public function hide():void { // on tue le setTimeOut clearTimeout( m_appearTimeout ); // et on appelle la fonction hide() parente super.hide(); } /** * Détruit proprement un composant de type ToolTip */ override public function destroy():void { // on tue proprement le timeout clearTimeout( m_appearTimeout ); // on détruit proprement le texte m_texte.destroy(); // on enlève l'arrière-plan de la displayList removeChild( m_background ); // on passe les références à null. m_texte = null; m_background = null; // et on appelle la fonction destroy() parente super.destroy(); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultToolTipSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultToolTipSkin.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | package com.as3facileexemple.skin.classic { import com.actionscriptfacile.skin.Skin; import com.actionscriptfacile.ui.tooltip.Tooltip; // Import des classes gérant la partie graphique du composant dans le fla (movieclip) // Provient de ui.swc (créé avec la compilation de UI.fla) import com.as3facile.skin.tooltip.TooltipBackgroundSkin; /** * Définition du skin utilisé pour un composant ToolTip * * @author Matthieu */ public class DefaultToolTipSkin extends Skin { public function DefaultToolTipSkin() { setSkin( Tooltip.TOOLTIP_BACKGROUND_SKIN, TooltipBackgroundSkin ); } } } |
[/codesyntax]
Développement Facile