Animer son interface en Flex | Snoupix

Ce tutoriel va vous apprendre à utiliser une des forces du framework Flex d'Adobe, les possibilités d'animations dans une Interface et surtout leur simplicité à être mise en place (ceci dit ça mérite un tuto). Nous allons voir ensemble 2 grandes notions dans Flex, celle de Transition et celle d'Etat (state).

Voici le code de notre application sur lequel nous allons nous baser pour la suite de ce tuto. Il est composé d'une barre avec deux boutons, et d'un conteneur de type "canvas" qui contiendra les différentes "rubriques".

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:ApplicationControlBar x="10" y="10" width="160">
		<mx:Button label="Menu 1" click="currentState='rubrique1'"/>
		<mx:Button label="Menu 2" click="currentState='rubrique2'"/>
	</mx:ApplicationControlBar>
	<mx:Canvas x="10" y="51" width="500" height="341" id="contenant">
	</mx:Canvas>
</mx:Application>

La notion d'Etat dans Flex

Nous allons d'abord développer la notion d'Etat dans Flex: En fait, vous pouvez assimilez un état à une apparence de votre application à un instant donné. Un état de base est automatiquement crée en Flex, vous pouvez ensuite le décliner en sous état. Flex vous donne le choix d'un état par défault qui est activé dés le début de votre application.

Pour réaliser un Etat, 2 options s'offrent à vous: soit vous le faites à l'aide de l'interface de Flex Builder (votre document Mxml > onglet Design > Encart en haut à droite de Flex Builder

Sinon vous pouvez tout à fait les créer dans le code Mxml de votre application à l'aide de la balise <mx:states> et <mx:state> (la première étant l'élément parent de la 2ème). Voyons ce que ca peut donner:

<mx:states>
		<mx:State name="rubrique1">
			<mx:AddChild relativeTo="{contenant}" position="lastChild">
				<mx:TitleWindow x="114" y="96" width="250" height="200" layout="absolute" title="Tuto sur les animations Flex">
					<mx:Text x="10" enabled="true" y="10" width="90%" text="Comme vous allez le voir si vous cliquez sur un des éléments du menu, les animations en Flex sont toutes très zolies!"/>
				</mx:TitleWindow>
			</mx:AddChild>
		</mx:State>
		<mx:State name="rubrique2">
			<mx:AddChild relativeTo="{contenant}" position="lastChild">
				<mx:Form x="154" y="51">
					<mx:FormHeading label="Lorem ipsumeeuuh"/>
					<mx:FormItem label="Champ 1">
						<mx:TextInput text="valeur"/>
					</mx:FormItem>
					<mx:FormItem label="Champ 2">
						<mx:TextArea text="valeur" height="67"/>
					</mx:FormItem>
					<mx:Button label="Valider"/>
				</mx:Form>
			</mx:AddChild>
		</mx:State>
	</mx:states>

La balise <mx:state> ne comporte ici qu'un seul attribut qui est son nom ('name'). Ce nom sert à identifier l'état, vous l'utiliserez lorsque vous souhaiterez appeler chaque Etat. Pour ajouter un élément à l'Etat, il suffit d'utiliser la balise <mx:AddChild> avec son attribut target qui correspond à l'élément dans lequel nous allons placer nos éléments d'interface. Notre application

Pour que votre application commence à un état précis, ajouter un attribut currentState à votre application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" currentState="rubrique1">

Pour passer d'un état à l'autre, il vous suffit de changer la variable dont nous avons parlé plus haut: currentState. Ce qui donne ceci lorsque l'on traite les boutons du menu.

<mx:Button label="Menu 1" click="currentState='rubrique1'"/>
<mx:Button label="Menu 2" click="currentState='rubrique2'"/>

Les transitions

Les transitions dans Flex sont plutôt simple à mettre en place une fois qu'on maîtrise bien les différents états de notre application. Les transitions ne s'écrivent pas en ActionScript comme on aurait pu l'imaginer. ils s'écrivent aussi en Mxml. Toutes les informations sur les effets de transitions se stockent dans la balise <mx:Transitions> puis dans la balise <mx:Transition> pour chaque effet unique. Voyons ce que ca peut donner sur notre petite interface:

	<mx:Transitions>
		<mx:Transition id="effet" fromState="*" toState="*">
		</mx:Transition>
	</mx:Transitions>

Je vous conseille de placer ce code au début de votre application pour bien vous y retrouver quand vous serez amené à bosser sur des applications un peu plus complexes. Comme vous pouvez le voir, l'élément <mx:Transition> comporte 2 attributs primordiaux: fromState et toState qui indique quand doit être éxécutée l'animation, pour quel changement d'Etat (de quel état à quel état). On aurait pu mettre par exemple fromState="rubrique1" toState="rubrique2", mais l'effet de transition ne se saurait pas éxécuté lorsqu'on aurait souhaité aller à la rubrique 1 en étant sur la rubrique 2.

Pour avoir les mêmes effets partout et pour tout changement d'Etat on a donc remplacé les noms d'état par des étoiles: ce qui signifie "tous les états". Voyons maintenant ce qui se cache à l'intèrieur de ses transitions.

Les effets

Les différents effets se placent donc dans cette balise <mx:Transition>. Il existe une liste prédéfinie dans Flex 3 de 13 effets différents. Vous pouvez cependant créez vos propres effets de transitions en ActionScript 3 mais ce n'est pas l'objet du tuto.

Voici la liste des effets:

• Blur : Effet de flou
• Dissolve : Changement d'opacité
• Fade : Pareil que Dissolve
• Glow : Surbrillance des éléments
• Iris : Dur à expliquer (essayez^^)
• Move : Changement de position
• Resize : Redimensionnement des composants
• Rotate : Rotation des composants
• Wipedown : Aperçu de haut en bas
• WipeLeft : Aperçu de droite à gauche
• WipeRight : Aperçu de gauche à droite
• WipeuP : Aperçu de bas en haut
• Zoom : Le nom parle de lui même :)

Voici donc comment utiliser une transition:

<mx:WipeDown duration="1000" target="{contenant}">
</mx:WipeDown>

voilà ce n'est pas très compliqué, il suffit juste de préciser 2 attributs:

• target : qui contient le ou les identifiant du composant sur lequel on veut effectuer l'effet. Si on utilise plusieurs cibles il faut alors utiliser l'attribut targets ainsi: targets="{[cible1,cible2]}"
• duration : cet attribut correspond à la durée en ms de l'effet désiré.
  

Mais moi je veux 2 effets en même temps!

Pas de soucis, Flex a pensé à vous! Pour combiner plusieurs effets de transitions il suffit d'inclure la balise <mx:sequence> qui éxécute vos effets à la suite, ou bien la balise <mx:parallel> qui éxécute vos animations en même temps. Pour notre démo voici ce que ca donne:

<mx:transitions>
		<mx:Transition id="effet" fromState="*" toState="*">
		<mx:Parallel>
			<mx:WipeDown duration="1000" target="{contenant}">
			</mx:WipeDown>
			<mx:Fade duration="1000" target="{contenant}">
			</mx:Fade>
		</mx:Parallel>
		</mx:Transition>
	</mx:transitions>

Voilà ce premier tuto sur Flex est terminé, j'espère pour vous qu'il vous sera utile!