Vous le savez déjà, vous pouvez appliquer des effets à vos composants Flex pour rendre l'expérience utilisateur plus intéressante. Et bien vous pouvez appliquer des effets comme le flou, le mouvement, etc, à l'apparition et à la disparition des Flex ToolTip. Vous pouvez utiliser tous les effets que vous utilisez avec des composants Flex. Vous pour presque toutes les autres propriétés des tool-tip, elles s'appliquent globalement. Vous pouvez modifier l'effet qui est appliqué à l'affichage des toolTip en modifiant la propriété showEffect (hideEffect pour la disparition des toolTips).
L'effet hideEffect est joué seulement si l'utilisateur reste sur le toolTip le temps du hideDelay. S'il sort de l'objet, il ne sera pas joué.
L'exemple suivant illustre ce fonctionnement et il montre comment on peut utiliser des effets simple ou composés:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initializeHandler(event)" viewSourceURL="srcview/index.html">
<mx:Style>
@font-face{
src: local("Georgia");
fontFamily:GeorgiaEmbedded;
}
ToolTip{
fontSize:16;
fontFamily: GeorgiaEmbedded;
background-color:#FFFFFF;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;
private function initializeHandler(event:Event):void{
ToolTipManager.hideDelay = 2000;
ToolTipManager.showEffect = toolTipShowEffect;
ToolTipManager.hideEffect = toolTipHideEffect;
}
]]>
</mx:Script>
<mx:Parallel id="toolTipShowEffect">
<mx:Fade alphaFrom="0" alphaTo="1" duration="1000"/>
<mx:Blur blurXFrom="10" blurYFrom="10" blurXTo="0"
blurYTo="0" duration="1000"/>
</mx:Parallel>
<mx:Parallel id="toolTipHideEffect">
<mx:Fade alphaFrom="1" alphaTo="0" duration="1000"/>
<mx:Blur blurXFrom="0" blurYFrom="0" blurXTo="10"
blurYTo="10" duration="1000"/>
</mx:Parallel>
<mx:Button id="button" label="ToolTip au survol" toolTip="ToolTip avec effet!"/>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Vous pouvez remarquer que cet exemple utilise une police Embed. Il faut utiliser une police embarquée car on va jouer avec l'alpha de notre toolTip. Dans cet exemple en particulier, l'effet Blur fait que le toolTip sera rendu comme un Bitmap, ce qui rend peu nécessaire le besoin d'embarquer la police. Cependant, même avec ce rendu Bitmap, le texte pourrait flasher très vite avant de disparaitre, ce qui n'arrivera pas si la font est embedded.
