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

Flex Transition: Utilisation d'un Transition Effect Filter

Lorsque vous appliquez une transition, les effets sont appliqués à toutes les cibles en même temps. Parfois, ce comportement est le comportement souhaité. Cependant, parfois, vous voudrez que certains effets soient conditionnels, dépendant de quels changements se passent pour les cibles.

Par exemple, s'il on utilise cette transition:

<mx:transitions>
	<mx:Transition fromState="*" toState="*">
		<mx:Sequence targets="{[windowA, windowB, windowC, windowD]}">
			<mx:Blur blurYFrom="0" blurYTo="10" duration="100"/>
			<mx:Parallel >
				<mx:Move/>
				<mx:Resize/>
			</mx:Parallel>
			<mx:Blur blurYFrom="10" blurYTo="0" duration="100"/>
		</mx:Sequence>
	</mx:Transition>
</mx:transitions>

Flex Source Code Download: Télécharger le code source complet de l'application

Dans cet exemple, un flou est appliqué à toutes les cibles, les effets Move et Resize sont ensuite appliqués puis le flou est appliqué mais en inversé (pour supprimer le flou). Cela crée un effet sympa de tremblement quand les fenêtres bouges. Cependant, il y a un problème avec cette transition: le flou est toujours appliqué à toutes les cibles, même si la cible ne bouge pas. C'est un bon cas d'utilisation des Transition Effect Filter.

Un filtre sur un effet de transition vous permet de rendre l'effet conditionnel suivant une valeur de filtre.

Principales valeurs des Transition Effect Filters:

• add: La cible a été ajoutée grâce à un AddChild
• remove: La cible a été supprimée grâce à un RemoveChild
• show: La cible a été rendue visible en utilisant la propriété SetProperty pour fixer la propriété visible à true
• hide: La cible a été rendue invisible en utilisant la propriété SetProperty pour fixer la propriété visible à false
• move: Les propriétés x et y de la cible ont été modifiées durant la transition
• resize: Les propriétés width et height de la cible ont été modifiées durant la transition

Le code suivant corrige le problème du flou en appliquant le flou uniquement aux cibles qui ont bougé lors de la transition. On aurait aussi pu utiliser filter="resize" qui aurait eu le même effet:

<mx:transitions>
	<mx:Transition fromState="*" toState="*">
		<mx:Sequence targets="{[windowA, windowB, windowC, windowD]}">
			<mx:Blur blurYFrom="0" blurYTo="10" duration="100" filter="move"/>
			<mx:Parallel >
				<mx:Move/>
				<mx:Resize/>
			</mx:Parallel>
			<mx:Blur blurYFrom="10" blurYTo="0" duration="100" filter="move"/>
		</mx:Sequence>
	</mx:Transition>
</mx:transitions>

Flex Source Code Download: Télécharger le code source complet de l'application