Posts Tagged FlashBuilder

Efectos de Entrada y Salida para PopUps en Flex

Posted by Shogoki in Programación on February 4, 2010

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
< ?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><mx :Script>
        < ![CDATA[
            import mx.effects.easing.Elastic;
            import mx.managers.PopUpManager;
            private function removePopUp():void
            {
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx>
    <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>
    <mx :LinkButton
        x="220"
        y="145"
        label="cerrar"
        skin="{null}" color="#000000" fontSize="11" fontFamily="Arial"
        click="removePopUp()"/>

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:

preview.jpg

Read the rest of this entry »

, ,

No Comments

Cerrar ventana modal al hacer Click fuera de la ventana en FlashBuilder

Posted by Shogoki in Programación, Tips on January 26, 2010

Una de las mejores funcionalidades de FlashBuilder y ActionScript3 es la clase PopUpManager que nos permite mostrar ventanas a los usuarios bien sea modales o no; a veces simplemente queremos dar la opción al usuario de cerrar la ventana al hacer click fuera de esta, al estilo de los PopUps hechos con JQuery y gracias al Evento MOUSE_DOWN_OUTSIDE de la clase FlexMouseEvent podemos hacerlo, como vemos en el siguiente ejemplo:

preview.jpg

Puedes ver y descargar el código fuente mediante el menú del botón derecho

, ,

1 Comment