1. Accueil
2. Pôle de développement
3. Pôle de développement Flex
4. Flex en un clin d'œil

Flex en un clin d'œil : Créer une interface utilisateur simple

Sommaire

• Utilisation de contrôles
• Utilisation de conteneurs
• Mise en forme de composants
• Ajout d'effets
• Création d'états
• Définition de transitions d'état
• Utilisation d'info-bulles
• Contrôle du curseur

---

Ajout d'effets

Un effet est une modification apportée à un composant sur une courte période de temps. Le fondu, le redimensionnement et le déplacement d'un composant constituent des exemples d'effets. Pour former un comportement, un effet est associé à un déclencheur, tel qu'un clic de souris sur un composant, sa mise en surbrillance ou son affichage. En MXML, les effets sont appliqués en tant que propriétés d'un contrôle ou d'un conteneur. Adobe® Flex™ propose un ensemble d'effets intégrés avec des propriétés par défaut.

Les comportements vous permettent d'enrichir votre application d'animations, de mouvements et de sons en réponse à une action de l'utilisateur ou du programme. Vous pouvez, par exemple, utiliser des comportements pour provoquer le léger rebond d'une boîte de dialogue lorsqu'elle est sélectionnée ou l'émission d'un son lorsque l'utilisateur entre une valeur non conforme.

Les propriétés de déclenchement de Flex sont implémentées sous forme de feuilles de style CSS (Cascading Style Sheet). Dans le document Adobe Flex 2 Language Reference*, les déclencheurs sont répertoriés sous le titre "Effects".

Pour créer un comportement, définissez un effet spécifique avec un identifiant unique et associez-le au déclencheur. Le code suivant crée, par exemple, deux effets de zoom : l'un pour rétrécir légèrement le composant, l'autre pour lui faire reprendre sa taille originale. Ces effets sont affectés, à l'aide de leurs identifiants uniques, aux déclencheurs mouseDownEffect et mouseUpEffect du composant Button.

Notez que la propriété autoLayout du conteneur Panel est définie sur "false". Ceci permet d'éviter que le panneau ne change de taille lorsque le bouton est redimensionné.

Exemple

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="170" height="140"
>
    <!-- Define effects -->
    <mx:Zoom id="shrink" duration="100" zoomHeightTo=".9" zoomWidthTo=".9" />

    <mx:Zoom id="revert" duration="50" zoomHeightTo="1" zoomWidthTo="1" />
    
    <mx:Panel 
        title="Bouncy Button" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" autoLayout="false"
     left="41" top="24" right="42">

        <!-- Assign effects to target -->
        <mx:Button 
            id="bouncyButton" label="Click me!" 
            mouseDownEffect="{shrink}" mouseUpEffect="{revert}"
        />

    </mx:Panel>
</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Utilisation de méthodes et d'événements d'effet

Des méthodes peuvent être appelées sur des effets pour modifier leur lecture. Vous pouvez, par exemple, interrompre momentanément un effet en appelant sa méthode pause() et le relancer en utilisant sa méthode resume() , ou y mettre fin en appelant sa méthode end() .

Un effet distribue également les événements startEffect et endEffect lorsqu'il commence et se termine. Vous pouvez guetter ces événements et réagir aux changements d'état des vôtres.

L'exemple ci-après utilise les méthodes et événements de l'effet Move pour créer un jeu simple. L'objectif de ce jeu est de placer l'hélicoptère le plus près possible de la cible sans la toucher. Plus la cible est proche, plus vous marquez de points.

Le jeu utilise des symboles clip provenant de la bibliothèque d'un fichier SWF pour les animations de cible, d'hélicoptère et d'explosion. Pour plus d'informations, voir Intégration de ressources.

Exemple

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="525" height="450"
     viewSourceURL="src/EffectsChopperGame/index.html"
>
    <mx:Script>

        <![CDATA[
            // Easing equations have to be explicitly imported.    
            import mx.effects.easing.Quadratic;

            // Embed movie clip symbols from the library of a Flash SWF. 

            [Embed(source="assets/library.swf", symbol="DartBoard")]

            public var DartBoard:Class;
            
            [Embed(source="assets/library.swf", symbol="Helicopter")]

            public var Helicopter:Class;

            [Embed(source="assets/library.swf", symbol="Explosion")]

            public var Explosion:Class;

            // Event handler for the effectEnd event.            
            private function endEffectHandler():void 
            {

                helicopter.visible = false;
                explosion.visible = true;
                score.text = "0"; 
                pauseButton.enabled = resumeButton.enabled = 
                    selfDestructButton.enabled = false;
            }

            // Event handler for the "Play Again!" button.            
            private function playAgainHandler():void 
            {

                // Call resume() to make sure effect is not

                // in paused state before it ends or calling
                // pause() on it later will not work.
                flyChopper.resume();
                
                // End the effect
                flyChopper.end();
                
                // Reset assets to their original states. 
                helicopter.visible = true; 
                explosion.visible = false;
                startButton.enabled = pauseButton.enabled = 
                    resumeButton.enabled = selfDestructButton.enabled = true;
            }

            
            private function pauseChopperHandler():void
            {
                // Pause the Move effect on the helicopter.
                   flyChopper.pause();
                   
                   // Calculate player's score based on the inverse of the


                   // distance between the helicopter and the dart board.
                   score.text = String(Math.round(1/(helicopter.x - dartBoard.x)*10000)); 
                   
                   pauseButton.enabled = false; 
                   resumeButton.enabled = true;
            }

            
            private function resumeChopperHandler():void
            {
                flyChopper.resume();
                resumeButton.enabled = false; pauseButton.enabled = true;
            }

        ]]>
    </mx:Script>
    
    <!-- Create a Move effect with a random duration between .5 and 1.5 seconds -->
    <mx:Move 
        id="flyChopper" target="{helicopter}" 
        xBy="-290" easingFunction="mx.effects.easing.Quadratic.easeIn"

        duration="{Math.round(Math.random()*1500+500)}" 
        effectEnd="endEffectHandler();" 
    />

    
    <mx:Panel 
        title="Effects Chopper Game" width="100%" height="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" 
        paddingBottom="10" horizontalAlign="right"

    >

        <!-- The game canvas -->
        <mx:Canvas width="100%" height="100%">

            <mx:Image 
                id="dartBoard" width="100" height="150.2"
                source="{DartBoard}" x="10" y="20"

            />

            <!-- Hide the explosion animation initially. -->
            <mx:Image 
                id="explosion" source="{Explosion}" 
                y="50" x="0" added="explosion.visible = false;"

            />            

            <mx:Image 
                id="helicopter" width="80" height="48.5"
                source="{Helicopter}" right="0" y="67"

            />

        </mx:Canvas>

        <!-- Instructions -->
        <mx:Text 
            width="100%" color="#ff0000" 
            text="Pause the helicopter as close as possible to the dartboard without hitting it." 
            textAlign="center" fontWeight="bold"

        />

            
        <mx:HBox>
            <mx:Label text="Score:" fontSize="18"/>
            <mx:Label id="score" text="0" fontSize="18"/>        
        </mx:HBox>

     
        <mx:ControlBar horizontalAlign="right">
            <mx:Button 
                id="startButton" label="Start" 
                click="flyChopper.play(); startButton.enabled=false;"

            />

            <mx:Button id="pauseButton" label="Pause" click="pauseChopperHandler();"/>

            <mx:Button id="resumeButton" label="Resume" click="resumeChopperHandler();"/>

            <mx:Button 
                id="selfDestructButton" label="Self destruct!" 
                click="flyChopper.resume(); flyChopper.end();"

            />
            <mx:Button label="Play again!" click="playAgainHandler();"/>

        </mx:ControlBar>

       
    </mx:Panel>    
</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

---

Pour plus d'informations

Pour plus d'informations sur les styles applicables aux composants, reportez-vous à la section "Using Styles" du document Flex 2 Developer's Guide*.

À propos de l'auteur