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

Flex Transition: Créer des Transitions en MXML (Move, Resize…), avec exemple

Toutes les applications et les composants ont une propriété states que vous pouvez utiliser pour définir les états à utiliser. De même, toutes les applications et les composants ont une propriété transitions qui est un tableau de toutes les transitions que vous voulez utiliser. Dans le MXML, vous pouvez définir la propriété transitions en utilisant directement dans le premier tag (root tag) d'une appli ou d'un composant:

<mx:transitions>
	<!-- les transitions entre états apparaitront ici-->
</mx:transitions>

Tous les éléments du tableau de transitions, doivent être des object Transition. En MXML, vous créez des instances de Transition en utilisant le tag <mx:Transition>. Tous les objets Transition doivent définir une propriété fromState et toState, et ces propriétés doivent correspondre aux états entre lesquels la transition doit être appliquée.

Par exemple ce code va créer une transition depuis un état appelé A à un état appelé B:

<mx:Transition fromState="A" toState="B"/>

Si vous voulez utiliser une transition depuis ou vers un état en particulier, vous pouvez utiliser l'astérisque comme joker (wild card), ce qui veut dire "tous les états".

L'exemple suivant crée une transition entre tous les états et un état nommé B:

<mx:Transition fromState="*" toState="B"/>

Les objets Transitions doivent avoir une propriété effet qui détermine quel effet sera appliqué pendant le changement d'état. La propriété effet est la propriété par défaut lorsque vous créez un objet Transition en utilisant le MXML.

Ce qui veut dire que vous pouvez simplement insérer un tag d'effet (Move, Resize, Blur ...) à l'intérieur du tag <mx:Transition>, comme ceci:

<mx:Transition fromState="A" toState="B">
	<mx:Move target="{vbox}"/>
</mx:Transition>

Remarquez que dans cet exemple, une cible doit être donnée à l'effet. Dans la plupart des cas, l'effet doit spécifier une ou plusieurs cibles quand il est utilisé dans une transition. Si vous voulez spécifier plus d'une cible, vous pouvez utiliser la propriété targets d'un effet et lui donner un tableau de cibles, comme dans l'exemple suivant:

<mx:Transition fromState="A" toState="B">
	<mx:Move targets="{[textInput1, textInput2, textInput3, textInput4]}"/>
</mx:Transition>

Dans beaucoup de cas, vous n'avez pas besoin de spécifier les propriétés de l'effet telles que l'opacité ou les coordonnées x et y. Lorsque les effets sont appliqués aux transitions, les propriétés to et from sont automatiquement liées aux propriétés des cibles dans l'état to et from. Par exemple, quand vous appliquez un effet Move en tant que transition, les propriétés xFrom et yFrom sont automatiquement fixées aux valeurs des propriétés x et y de la cible dans l'état from (fromState="") et les propriétés xTo et yTo sont automatiquement fixées aux valeurs des propriétés x et y de la cible dans l'état to (toState=""). Cependant, si vous voulez expliciter ces valeurs, vous pouvez le faire comme vous le feriez pour n'importe quel effet et ces paramètres remplaceront les paramètres automatiques.

Par exemple, le code suivant crée une transition qui utilise un effet Rotate avec les paramètres angleFrom et angleTo explicités:

<mx:Transition fromState="A" toState="B">
	<mx:Rotate target="{vbox}" angleFrom="0" angleTo="360"/>
</mx:Transition>

Exemple de Transition en MXML

L'exemple suivant crée 4 TitleWindow et 4 états, chaque états ayant une fenêtre plus grande que les autres. Cet exemple utilise une transition qui anime tous les changement d'états pour que les fenêtres bougent et se redimensionnent. Cet exemple peut aussi être réalisé entièrement en ActionScript:

Lire le tutorial: Flex Transition: Programmer des Transitions en ActionScript (Move, Resize…), avec exemple AS3

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
	<mx:states>
		<mx:State name="A">
			<mx:SetProperty target="{windowA}" name="width" value="500"/>
			<mx:SetProperty target="{windowA}" name="height" value="300"/>
			<mx:SetProperty target="{windowC}" name="width" value="150"/>
			<mx:SetProperty target="{windowC}" name="height" value="150"/>
			<mx:SetProperty target="{windowC}" name="y" value="333"/>
			<mx:SetProperty target="{windowD}" name="x" value="373"/>
			<mx:SetProperty target="{windowD}" name="width" value="150"/>
			<mx:SetProperty target="{windowD}" name="height" value="150"/>
			<mx:SetProperty target="{windowD}" name="y" value="333"/>
			<mx:SetProperty target="{windowB}" name="x" value="23"/>
			<mx:SetProperty target="{windowB}" name="y" value="333"/>
			<mx:SetProperty target="{windowB}" name="width" value="150"/>
			<mx:SetProperty target="{windowB}" name="height" value="150"/>
			<mx:SetProperty target="{windowC}" name="x" value="200"/>
		</mx:State>
		<mx:State name="B">
			<mx:SetProperty target="{windowD}" name="width" value="150"/>
			<mx:SetProperty target="{windowD}" name="height" value="150"/>
			<mx:SetProperty target="{windowC}" name="width" value="150"/>
			<mx:SetProperty target="{windowC}" name="height" value="150"/>
			<mx:SetProperty target="{windowA}" name="width" value="150"/>
			<mx:SetProperty target="{windowA}" name="height" value="150"/>
			<mx:SetProperty target="{windowB}" name="width" value="500"/>
			<mx:SetProperty target="{windowB}" name="height" value="300"/>
			<mx:SetProperty target="{windowA}" name="y" value="333"/>
			<mx:SetProperty target="{windowC}" name="x" value="200"/>
			<mx:SetProperty target="{windowC}" name="y" value="333"/>
			<mx:SetProperty target="{windowB}" name="x" value="23"/>
			<mx:SetProperty target="{windowD}" name="x" value="373"/>
			<mx:SetProperty target="{windowD}" name="y" value="333"/>
		</mx:State>
		<mx:State name="C">
			<mx:SetProperty target="{windowD}" name="width" value="150"/>
			<mx:SetProperty target="{windowD}" name="height" value="150"/>
			<mx:SetProperty target="{windowB}" name="width" value="150"/>
			<mx:SetProperty target="{windowB}" name="height" value="150"/>
			<mx:SetProperty target="{windowA}" name="width" value="150"/>
			<mx:SetProperty target="{windowA}" name="height" value="150"/>
			<mx:SetProperty target="{windowC}" name="width" value="500"/>
			<mx:SetProperty target="{windowC}" name="height" value="300"/>
			<mx:SetProperty target="{windowA}" name="y" value="333"/>
			<mx:SetProperty target="{windowB}" name="x" value="200"/>
			<mx:SetProperty target="{windowB}" name="y" value="333"/>
			<mx:SetProperty target="{windowC}" name="x" value="23"/>
			<mx:SetProperty target="{windowC}" name="y" value="19"/>
			<mx:SetProperty target="{windowD}" name="x" value="373"/>
			<mx:SetProperty target="{windowD}" name="y" value="333"/>
		</mx:State>
		<mx:State name="D">
			<mx:SetProperty target="{windowC}" name="width" value="150"/>
			<mx:SetProperty target="{windowC}" name="height" value="150"/>
			<mx:SetProperty target="{windowB}" name="width" value="150"/>
			<mx:SetProperty target="{windowB}" name="height" value="150"/>
			<mx:SetProperty target="{windowA}" name="width" value="150"/>
			<mx:SetProperty target="{windowA}" name="height" value="150"/>
			<mx:SetProperty target="{windowD}" name="width" value="500"/>
			<mx:SetProperty target="{windowD}" name="height" value="300"/>
			<mx:SetProperty target="{windowA}" name="y" value="333"/>
			<mx:SetProperty target="{windowB}" name="x" value="200"/>
			<mx:SetProperty target="{windowB}" name="y" value="333"/>
			<mx:SetProperty target="{windowD}" name="x" value="23"/>
			<mx:SetProperty target="{windowD}" name="y" value="19"/>
			<mx:SetProperty target="{windowC}" name="x" value="373"/>
			<mx:SetProperty target="{windowC}" name="y" value="333"/>
		</mx:State>
	</mx:states>

	<mx:transitions>
		<mx:Transition fromState="*" toState="*">
			<mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
				<mx:Move/>
				<mx:Resize/>
			</mx:Parallel>
		</mx:Transition>
	</mx:transitions>

	<mx:TitleWindow id="windowA" x="23" y="19" width="250" height="200" layout="absolute"
		title="Fenetre A" click="currentState='A'"/>
	<mx:TitleWindow id="windowB" x="309" y="19" width="250" height="200" layout="absolute"
		title="Fenetre B" click="currentState='B'"/>
	<mx:TitleWindow id="windowC" x="23" y="260" width="250" height="200" layout="absolute"
		title="Fenetre C" click="currentState='C'"/>
	<mx:TitleWindow id="windowD" x="360" y="260" width="250" height="200" layout="absolute"
		title="Fenetre D" click="currentState='D'"/>

</mx:Application>

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