[Flex3] Quelqu'un maitrise les effets ? [Résolu]

[ToniConti]

Bonjour à tous,

J'aurais besoin des lumières de quelqu'un qui aurait percé les mystères des effects en Flex
J'ai une application (simplifiée au maximum) dont voici le code source :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="com.*" xmlns:views="pfp.views.*" xmlns:cas="cas.*"
				layout="vertical" width="100%" height="100%" horizontalAlign="left">
 
	<mx:ApplicationControlBar id="connecteur" width="100%">
		<mx:Button label="Connection" click="seq.play()"/>
	</mx:ApplicationControlBar>
 
	<mx:Sequence id="seq" duration="500">
		<mx:Move target="{connecteur}" yTo="-40"/>
		<mx:Move target="{panel}" yTo="{connecteur.y}" effectEnd="connecteur.includeInLayout=false; connecteur.visible=false"/>
		<mx:Resize target="{panel}" heightTo="{panel.y - connecteur.y + panel.height}"/>
	</mx:Sequence>
 
	<mx:Panel id="panel" height="100%">
		<mx:DataGrid height="100%"/>
	</mx:Panel>
 
</mx:Application>

L'effet souhaité est de voir la barre de connection se dérober vers le haut tout en faisant en sorte que le reste de l'application occupe toute la place désormais disponible.
Ça fonctionne exception faite que les trois effets s'exécutent en séquence alors que j'aimerais qu'ils s'éxécute de manière synchrone.
Et c'est sur ce point que je coince depuis 3 jours...

Ce que j'ai déjà pu tester sans succès :

- Remplacer <mx:sequence> par <mx:parralèle>
- Utiliser les changements d'états + Transitions
- Laisser mon panel se redimentionner tout seul en définissant simplement son attribut "resizeEffect" (histoire de maitriser la "duration")

Hélas aucune de ces solutions n'a porté ses fruits.
Exemple de solution qui ne fonctionne pas :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="com.*" xmlns:views="pfp.views.*" xmlns:cas="cas.*"
				layout="vertical" width="100%" height="100%" horizontalAlign="left">
 
	<mx:ApplicationControlBar id="connecteur" width="100%">
		<mx:Button label="Connection" click="currentState = 'connecté'"/>
	</mx:ApplicationControlBar>
 
	<mx:states>
		<mx:State name="connecté">
			<mx:RemoveChild target="{connecteur}"/>
		</mx:State>
	</mx:states>
 
	<mx:transitions>
		<mx:Transition fromState="*" toState="connecté">
			<mx:Sequence>
				<mx:SetPropertyAction target="{connecteur}" name="includeInLayout"/>
				<mx:Parallel targets="{[connecteur, panel]}" duration="500">
					<mx:Move target="{connecteur}" yTo="-40"/>
					<mx:Move target="{panel}" yTo="{connecteur.y}"/>
					<mx:Resize target="{panel}" heightTo="{panel.y - connecteur.y + panel.height}"/>
				</mx:Parallel>
				<mx:RemoveChildAction target="{connecteur}"/>
			</mx:Sequence>
		</mx:Transition>
	</mx:transitions>
 
	<mx:Panel id="panel" height="100%">
		<mx:DataGrid height="100%"/>
	</mx:Panel>
 
</mx:Application>

Je serai vraiment reconnaissant à toute personne pouvrant me venir en aide !

Excellente journée à tous,

Anthony.

[npirard]

Bonjour,

perso voici mon code, il semble que j'ai une imbrication en moins (Tu as sous "Sequence" un "Parallel"). Je ne sais pas si cela peut t'aider mais j'avais fait cela pour tester les effets de mouvements de Panel à l'écran. (En parallel).

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<s:states>
		<s:State name="vue1"/>
		<s:State name="vue2"/>
		<s:State name="vue3"/>
	</s:states>
 
	<s:transitions>
		<s:Transition fromState="vue1" toState="vue2">
			<s:Parallel>
				<s:Resize target="{c1}" duration="1000"/>
				<s:Resize target="{c2}" duration="1000"/>
				<s:Move target="{c2}" duration="1000"/>
				<s:Move target="{c1}" duration="1000"/>
			</s:Parallel>
		</s:Transition>
 
	</s:transitions>
 
<componenent:compo1 id="c1"  width.vue1="600" height.vue1="400" x.vue1="86" y.vue1="38"
							 width.vue2="145" height.vue2="117" x.vue2="87" y.vue2="452"
							 width.vue3="145" height.vue3="117" x.vue3="87" y.vue3="452"
							 click="compo11_clickHandler(event)"
							 />
		<componenent:compo2 id="c2"  width.vue1="145" height.vue1="117" x.vue1="86" y.vue1="446"
							 width.vue2="600" height.vue2="400" x.vue2="86" y.vue2="38"
							 width.vue3="145" height.vue3="117" x.vue3="546" y.vue3="452"
							 click="compo21_clickHandler(event)"
/>

Donc si tu fais cela avec ton code, est-ce que cela change quelque chose?

Code :

1
2
3
4
5
6
7
8
<mx:Transition fromState="*" toState="connecté">
			<mx:Parallel>
 
					<mx:Move target="{connecteur}" yTo="-40"/>
					<mx:Move target="{panel}" yTo="{connecteur.y}"/>
					<mx:Resize target="{panel}" heightTo="{panel.y - connecteur.y + panel.height}"/>
							</mx:Parallel>
		</mx:Transition>

[ToniConti]

Hello,

Merci pour ta réponse,
J'ai adapté mon code comme ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="com.*" xmlns:views="pfp.views.*" xmlns:cas="cas.*"
				layout="vertical" width="100%" height="100%" horizontalAlign="left">
 
	<mx:ApplicationControlBar id="connecteur" width="100%">
		<mx:Button label="Connection" click="currentState = 'connecté'"/>
	</mx:ApplicationControlBar>
 
	<mx:states>
		<mx:State name="connecté"/>
	</mx:states>
 
	<mx:transitions>
		<mx:Transition fromState="*" toState="connecté">
				<mx:Parallel duration="500" effectEnd="connecteur.includeInLayout=false; connecteur.visible=false">
					<mx:Move target="{connecteur}" yTo="-40"/>
					<mx:Move target="{panel}" yTo="{connecteur.y}"/>
					<mx:Resize target="{panel}" heightTo="{panel.y - connecteur.y + panel.height}"/>
				</mx:Parallel>
		</mx:Transition>
	</mx:transitions>
 
	<mx:Panel id="panel" height="100%">
		<mx:DataGrid height="100%"/>
	</mx:Panel>
 
</mx:Application>

En effet ça fonctionne déjà mieux !
Par contre ça ne produit pas l'effet désiré : l'application s'allonge par le bas.

Ce qui m'a conduit sur une nouvelle piste qui fonctionne !
--> Au lieu d'essayer de remonter chaque composant de mon application, je remonte l'application elle-même et le redimensionnement de mon panel se fait tout seul !

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="com.*" xmlns:views="pfp.views.*" xmlns:cas="cas.*"
				layout="vertical" width="100%" height="100%" horizontalAlign="left">
 
	<mx:VBox id="connecteur" width="100%">
		<mx:ApplicationControlBar width="100%">
			<mx:Button label="Connection" click="connection.play()"/>
		</mx:ApplicationControlBar>
		<mx:Spacer height="18"/>
	</mx:VBox>
 
	<mx:Parallel id="connection" duration="500">
		<mx:Move target="{this}" yTo="-64"/>
		<mx:Resize target="{this}" heightTo="{this.height + 64}"/>
	</mx:Parallel>
 
	<mx:Panel id="panel" height="100%">
		<mx:DataGrid height="100%"/>
	</mx:Panel>
 
</mx:Application>

Un grand merci pour ton intervention qui m'a mené à la solution !

A bientôt.