Efectos de Entrada y Salida para PopUps en Flex

En el último tip vimos como cerrar una ventana emergente (PopUp) de flex al hacer click fuera de la ventana, hoy veremos como podemos animar las entradas y salidas de dicho popup mediante los métodos creationCompleteEffect y removedEffect respectivamente

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300"
height="174" backgroundAlpha="0"
mouseDownOutside="removePopUp()"
creationCompleteEffect="{myFade}"
removedEffect="{myFade}"
horizontalCenter="0" verticalCenter="0">
<mx:Script>
<![CDATA[
import mx.effects.easing.Elastic;
import mx.managers.PopUpManager;
private function removePopUp():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Fade id="myFade" duration="1000"/>
<mx:Canvas
width="226"
height="122" borderStyle="solid" borderColor="#000000"
backgroundColor="#FFFFFF" horizontalCenter="0" verticalCenter="0">
<mx:Text
text="Hola soy PopUp con Animación de entrada y salida :D"
height="45" width="202" fontFamily="Arial" fontSize="12" color="#000000"
horizontalCenter="1" verticalCenter="2"/>
<mx:Label x="10" y="10"
text="Ventana Modal" fontWeight="bold" fontSize="14" fontFamily="Arial" color="#000000"/>
</mx:Canvas>
<mx:LinkButton
x="220"
y="145"
label="cerrar"
skin="{null}" color="#000000" fontSize="11" fontFamily="Arial"
click="removePopUp()"/>
</mx:Canvas>

Como se ve bastante sencillo solo basta con crear el efecto deseado en nuestro caso: <mx:Fade /> y asociar dicho efecto a los métodos creationCompleteEffect y removedEffect como se muestra en las lineas 5 y 6, esto daría como resultado lo siguiente:

No hace falta siquiera crear el tag <mx:Fade /> solo basta con colocar el nombre de la clase “Fade”, “Blur”, “WipeDown”, “WipeUp”, etc, para que el efecto funcione:

1
2
3
4
5
6
7
8
9
10

La ventaja de usar las etiquetas para los efectos es que podemos manipular sus propiedades como por ejemplo la duración del efecto. Otros efectos que podemos usar son: <mx:WipeDown/> ó <mx:WipeUp />:

Los tags <mx:Sequence/> y <mx:Parallel> para combinar varios efectos son validos igualmente:

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

Se puede usar también <mx:AnimateProperty/> para hacer cosas un poco más complejas:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300"
height="174" backgroundAlpha="0"
mouseDownOutside="removePopUp()"
creationCompleteEffect="{myParallelEffects}"
removedEffect="{mySequenceEffects2}"
horizontalCenter="0" verticalCenter="0">
<mx:Script>
<![CDATA[
import mx.effects.easing.Elastic;
import mx.managers.PopUpManager;
private function removePopUp():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Parallel id="myParallelEffects">
<mx:Blur duration="1000"/>
<mx:Fade duration="1000"/>
</mx:Parallel>
<mx:Sequence id="mySequenceEffects2">
<mx:AnimateProperty
property="scaleX"
fromValue="1.0"
toValue="0.1"/>
<mx:AnimateProperty
property="scaleY"
fromValue="1"
toValue="0.1"/>
<mx:Parallel>
<mx:AnimateProperty
property="z"
fromValue="0"
toValue="600"/>
<mx:Fade />
</mx:Parallel>
</mx:Sequence>
.
.
.

En otro tip mostrare como usar la clase Tweener para conseguir efectos más complejos

Descargar Código Fuente

Actionscript 3, FlashBuilder, FlexBuilder

This entry was posted on February 4, 2010, 3:09 pm and is filed under Programación. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

Psycho Side