Ajouter

Gestion du lissage (smoothing) sur l'image de fond (BackGround) d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo

L'exemple suivant va vous montrer comment gérer le lissage (smoothing) sur une image de fond  d'un composant Spark Border dans Flash Builder 4 Beta / Flex 4 Gumbo de trois manières différentes via la propriété smooth :

• Définition de la propriété smooth directement dans le BitmapFill du Spark backgroundFill
• Définition de la propriété smooth directement en ActionScript dans un conteneur fx:Script
• Création du composant (component) Spark Border avec l'image de fond lissée en ActionScript 3 (AS3)

Mise en avant : BitmapFill – backgroundFill –  smooth

Info utile :  le backgroundFill est utilisé pour dessiner le background d'un Spark Border. Définir cette propriété va « override » (outrepasser / neutraliser) les propriétés de Styles CSS backgroundAlpha, backgroundColor, backgroundImage et backgroundImageResizeMode définies par défaut.

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

1. Définition de la propriété smooth directement dans le BitmapFill du Spark backgroundFill

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/01/lissage-smoothing-image-fond-background-spark-border-flash-builder-flex-4/ -->
<s:Application name="Spark_Border_backgroundFill_BitmapFill_smooth_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" viewSourceURL="srcview/index.html">
    <s:controlBarContent>
        <s:CheckBox id="chckBx" label="smooth - lissage" />
    </s:controlBarContent>
 
    <s:Border id="brdr"
            cornerRadius="5"
            width="90%" height="90%"
            horizontalCenter="0" verticalCenter="0">
        <s:backgroundFill>
            <s:BitmapFill source="@Embed('assets/pattern.png')" smooth="{chckBx.selected}" />
        </s:backgroundFill>
    </s:Border>
 
</s:Application>

2. Définition de la propriété smooth directement en ActionScript dans un conteneur fx:Script 

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/01/lissage-smoothing-image-fond-background-spark-border-flash-builder-flex-4/ -->
<s:Application name="Spark_Border_backgroundFill_BitmapFill_smooth_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>
        <s:CheckBox id="chckBx" label="smooth - lissage" change="chckBx_change(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function chckBx_change(evt:Event):void {
                BitmapFill(brdr.backgroundFill).smooth = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
    <s:Border id="brdr"
            cornerRadius="5"
            width="90%" height="90%"
            horizontalCenter="0" verticalCenter="0">
        <s:backgroundFill>
            <s:BitmapFill source="@Embed('assets/pattern.png')" />
        </s:backgroundFill>
    </s:Border>
 
</s:Application>

3. Création du composant (component) Spark Border avec l'image de fond lissée en ActionScript 3 (AS3)

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/01/lissage-smoothing-image-fond-background-spark-border-flash-builder-flex-4/ -->
<s:Application name="Spark_Border_backgroundFill_BitmapFill_smooth_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.graphics.BitmapFill;
            import spark.components.Border;
            import spark.components.CheckBox;
 
            [Embed("assets/pattern.png")]
            protected const bgImg:Class;
 
            protected var chckBx:CheckBox;
            protected var brdr:Border;
 
            private function init():void {
                chckBx = new CheckBox();
                chckBx.label = "smooth - lissage";
                chckBx.addEventListener(Event.CHANGE, chckBx_change);
                Application(FlexGlobals.topLevelApplication).controlBarContent = [chckBx];
 
                var bgFill:BitmapFill = new BitmapFill();
                bgFill.source = bgImg;
                bgFill.smooth = chckBx.selected;
 
                brdr = new Border();
                brdr.backgroundFill = bgFill;
                brdr.percentWidth = 90;
                brdr.percentHeight = 90;
                brdr.horizontalCenter = 0;
                brdr.verticalCenter = 0;
                brdr.setStyle("cornerRadius", 5);
                addElement(brdr);
            }
 
            protected function chckBx_change(evt:Event):void {
                BitmapFill(brdr.backgroundFill).smooth = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
</s:Application>

Rendu de l'exemple (nécessite Flash Player 10) :

Télécharger la source de l'exemple

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

1. Définir le padding d'un composant Spark NavigatorContent dans Flash Builder 4 / Flex Gumbo
2. Définir le background color d'un composant Spark Application Control Bar dans Flash Builder 4 / Flex Gumbo
3. Hauteurs variables de ligne (variable row heights) dans un composant Spark VGroup de Flash Builder 4 / Flex Gumbo
4. Gestion de la visibilité de la bordure d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
5. Activer/Désactiver le click sur la zone transparente d'un composant Spark Graphic de Flash Builder 4 – Flex Gumbo
6. Créer un linear gradient backGround dans un composant Spark Border dans Flash Builder 4
7. Définir le BackGroundResize d'un composant Spark Border dans Flex 4
8. Configurer la couleur de la bordure d'un Container Spark Border
9. Définir le « Corner Radius » d'un composant « Border » Spark
10. Gestion du « drop shadow » sur un Panel Spark – Flash Builder 4