Ajouter

Fondu (Fading) entre deux images en utilisant l'effet CrossFade de Flash Builder 4

Voici une démonstration de l'effet Spark CrossFade avec l'utilisation de deux images dans Flash Builder 4 Beta / Flex 4 Gumbo Beta :

Mise en avant : s:CrossFade

Attention : vous devez impérativement disposer du SDK 4.0.0.10007 ou supérieur.

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/22/fondu-fading-entre-deux-images-en-utilisant-leffet-crossfade-de-flash-builder-4/ -->
<s:Application name="Spark_CrossFade_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <mx:Button id="btn"
                label='Lancer le  "CrossFade effect"'
                click="button1_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            [Embed("assets/fl_player_appicon.png")]
            private const FlashPlayerIcon:Class;
 
            [Embed("assets/flash_builder_logo.png")]
            private const FlashBuilderIcon:Class;
 
            protected function button1_click(evt:MouseEvent):void {
                xFade.stop();
                xFade.bitmapFrom = new FlashBuilderIcon().bitmapData;
                xFade.bitmapTo = new FlashPlayerIcon().bitmapData;
                xFade.play();
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:CrossFade id="xFade" target="{logo}" duration="3000" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:Image id="logo" source="{FlashBuilderIcon}" />
    </s:VGroup>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

Autre(s) source(s) proche(s) de ce sujet :

1. Afficher des images dans un composant Spark List en utilisant un item renderer (itemRenderer) personnalisé dans Flash Builder 4 / Flex Gumbo
2. Afficher des Images dans un composant Spark List
3. Ajouter un effet d'ouverture et fermeture à un composant ComboBox
4. Effet d'AutoScrolling sur un composant Spark TextArea