2008 février - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3

Archive de février, 2008

fév

Flex Transition: Utilisation d'un Transition Effect Filter

Par fnicollet 0 Commentaires

Categories: Effect, Exemple, MXML, States and Transition Tags: Effect, filter, Move, Transition.

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>

Lire la suite: 'Flex Transition: Utilisation d'un Transition Effect Filter'

fév

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

Par fnicollet 2 Commentaires

Categories: ActionScript, Effect, Exemple, States and Transition Tags: ActionScript, currentState, Effect, fromState, Move, Resize, States, toState, Transition.

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 la suite: 'Flex Transition: Programmer des Transitions en ActionScript (Move, Resize…), avec exemple AS3'

fév

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

Par fnicollet 1 Commentaire

Categories: Effect, Exemple, MXML, States and Transition Tags: currentState, Effect, fromState, Move, Resize, SetProperty, States, toState, Transition.

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.

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

fév

Flex Effect: Création d'effets Tween personalisés (TweenEffectInstance) et exemple

Par fnicollet 4 Commentaires

Categories: ActionScript, Effect, Exemple and Tween Tags: Effect, onTweenEnd, onTweenUpdate, Tween.

Lorsque vous voulez créer des effets qui changent au cours du temps, vous devez créer un tween effect. La classe d'effet Tween étend TweenEffect et TweenEffectInstance plutôt que Effect et EffectInstance. Voyons maintenant comment utiliser la classe mx.effects.Tween pour créer des changements animés.

Le constructeur de la classe Tween requiert que vous lui passiez 4 paramètres: un objet de callback, une valeur de départ, une valeur de fin et une durée (en millisecondes). L'exemple suivant crée un objet Tween qui envoie automatiquement un notification par intervalle de 5000 millisecondes. Chaque notification inclut une valeur entre 0 et 100. La progression des valeurs est un changement linéaire entre 0 et 100. Les notifications sont envoyées à l'objet lui-même (this).

new Tween(this, 0, 100, 500);

Contrairement au reste du framework Flex, la classe Tween n'utilise pas le modèle d'événement normal. Au lieu de cela, elle utilise un modèle de callback, dans lequel l'objet callback doit définir des méthodes avec des noms spécifiques. Ces méthodes sont ensuite appelées en réponse à des événements spécifiques. Dans le cas d'une classe Tween, l'objet callback peut définir les méthodes onTweenUpdate() et onTweenEnd(). La méthode onTweenUpdate() reçoit des notifications lorsque les valeurs changent au cours du temps. La méthode onTweenEnd() reçoit des notifications lorsque le tween (animation) s'est terminé.

Lire la suite: 'Flex Effect: Création d'effets Tween personalisés (TweenEffectInstance) et exemple'

fév