Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex ToolTip – Appliquer des Effets aux ToolTips

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