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

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

Les transitions fonctionnent de la même manière en MXML qu'un ActionScript (AS3) car vous devez fixer les mêmes propriétés et ces propriétés auront le même effet que vous utilisiez du MXML ou de l'ActionScript.

Vous pouvez construire une nouvelle instance de mx.states.Transition en utilisant le constructeur:

var transition:Transition = new Transition();

Vous pouvez ensuite fixer les propriétés fromState et toState:

transition.toState = "*";
transition.fromState = "*";

Vous pouvez maintenant assigner un effet en utilisant la propriété effect:

var move:Move = new Move();
move.targets = [textInput1, textInput2];
transition.effect = move;

Enfin, il vous suffira d'ajouter simplement cette transition à la propriété transitions de l'application ou du composant:

transitions = [transition];

Il n'y a pas de vrais avantage à utiliser une transition en AS3 plutôt qu'en MXML. Le choix que vous devrez faire sera basé sur le type de document sur lequel vous voulez définir les états. Si vous ajoutez des transitions à un document MXML, vous devriez utiliser le MXML pour définir ces transitions et inversement.

L'exemple suivant montre comment reproduire l'exemple de création de transitions en MXML mais cette fois, les transitions sont écrites en Action Script.

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="initTransition();"
	viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.effects.Move;
			import mx.effects.Parallel;
			import mx.effects.Resize;
			import mx.states.Transition;

			public function initTransition():void{
				// création d'une nouvelle transition
				var transition:Transition = new Transition();
				// transition depuis tous les états, vers tous les états
				transition.toState = "*";
				transition.fromState = "*";
				// création des effets à composer
				var moveEffect:Move = new Move();
				var resizeEffect:Resize = new Resize();
				var parallelEffect:Parallel = new Parallel();
				// assigner les cibles à l'effet parallelEffect contenant le move et le resize
				parallelEffect.targets = [windowA, windowB, windowC, windowD];
				parallelEffect.addChild(moveEffect);
				parallelEffect.addChild(resizeEffect);
				// assigner l'effet à la transition
				transition.effect = parallelEffect;
				// on remplit le tableau transitions avec la transition que l'on vient de créer
				transitions = [transition];
			}

		]]>
	</mx:Script>
	<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: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