dans une zone image - changer d'image avec un effet

Version imprimable

Bonjour,

J'ai un composant image dans ma page, en plus j'ai 2 boutons.
Chaque bouton fais changer l'image (c'est simpliste, mais c'est pour apprendre).

Le code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <mx:Script> <![CDATA[ import flash.geom.*; import flash.display.*; [Bindable] public var sourcePath:String; private function bouttonOne():void { sourcePath = "com\\img\\img001.jpg"; } private function bouttonTwo():void { sourcePath = "com\\img\\img002.jpg"; } ]]> </mx:Script> <mx:Image x="10" y="68" width="338" height="222" id="imagePrinted" source="{sourcePath}"/>
Quand j'appuie sur bouton 1 ça me met l'image img001.jpg et si bouton 2 img002.jpg.

Ca marche fonctionnellement c'est ok.
Mais esthétiquement c'est moche, en fait quand l'image change j'ai un "clignotement", j'imagine normal vu ma méthode, mais la je vois pas comment faire pour améliorer le truc, faire un fondu par exemple?

Merci
PS: si ma méthode est mauvaise, ce qui est possible:aie:, n'hésitez pas a en proposer d'autre.

16/12/2008, 12h29
Jim_Nastiq

regarde la classe Fade ou un autre effet (Effect) y'a ce qu'il faut de ce côté la ;)

Effectivement fade irait bien! Merci!
Mais j'essaie et je galère un peu:
Code:

1 2 3 4 5 6 7 8 9 10 <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/> <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/> <mx:Image x="10" y="68" width="338" height="222" id="imagePrinted" source="{sourcePath}" hideEffect="{fadeOut}" showEffect="{fadeIn}"/> imagePrinted.visible = false; sourcePath = "com\\img\\img001.jpg"; imagePrinted.visible = true;
C'est la méthode qu'il donne dans la doc(en tout cas pour la première partie, mais j'arrive pas à l'adapter, dans l'exemple il cache et affiche la même image alors que moi je souhaite la cacher et la rafficher, cette partie doit être mauvaise (trop rapide petre):
Code:

1 2 3 imagePrinted.visible = false; sourcePath = "com\\img\\img001.jpg"; imagePrinted.visible = true;
Bon fais fouiller un peu, vous dirait si j'ai trouver quelque chose.

16/12/2008, 15h00
Jim_Nastiq

utilises l'event EffectEvent.END (syntaxe à vérifier) pour savoir quand ton effet est terminé et agir en conséquence(chargé ta nouvelle image) ;)

J'y arrive pas :(
Ça clignote toujours, j'ai même l'impression que c'est pire:

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
34
35
36
37
38
39
40
41
42
	<mx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			import flash.display.GradientType;
 
			import flash.geom.*;
			import flash.display.*;
 
			[Bindable] public var sourcePath:String;
 
			private function buttonTwo():void{
				imagePrinted.visible = false;
				sourcePath = "com\\img\\img2.jpg";
			}
 
			private function buttonOne():void{
				imagePrinted.visible = false;
				sourcePath = "com\\img\\img1.jpg";
			}
 
			private function endEffect():void{
				if(imagePrinted.visible==false)
				{
					trace("endEffect if");
					imagePrinted.visible = true;
				}
				else
				{
					trace("endEffect");
				}
			}
		]]>
	</mx:Script>
 
	<mx:Fade id="fadeOut" duration="500" alphaFrom="1.0" alphaTo="0.0"/>
    <mx:Fade id="fadeIn" duration="2000" alphaFrom="0.0" alphaTo="1.0"/>
 
	<mx:Image x="10" y="68" width="338" height="222" id="imagePrinted" source="{sourcePath}"
		hideEffect="{fadeOut}" showEffect="{fadeIn}" effectEnd="endEffect()"/>
 
	<mx:Button x="356" y="147" label="Button1" click="buttonOne()"/>
	<mx:Button x="356" y="177" label="Button2" click="buttonTwo()"/>