1 Reply Latest reply on Jul 13, 2010 9:29 AM by Bryan_Hg

    How to change skined button image dynamically

    Bryan_Hg

      Hi
         I want to create a skin for a group of buttons, and each of buttons has different image, so i try these:

       

         First, extend an class from s:Button,  and make 4 properties to save the images : components.skinedButton.mxml

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

      <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:mx="library://ns.adobe.com/flex/mx">

      <fx:Declarations>

      </fx:Declarations>

      <fx:Script>

      <![CDATA[

           import skin.skinButton;

       

           import spark.primitives.BitmapImage;

           public var up_image : BitmapImage = new BitmapImage;

           public var over_image : BitmapImage = new BitmapImage;

           public var down_image : BitmapImage = new BitmapImage;

           public var disabled_image : BitmapImage = new BitmapImage;

       

       

           public function set up_source(value:Object):void {

                up_image.source = value;

           }

           public function set over_source(value:Object):void {

               over_image.source = value;

           }

           public function set down_source(value:Object):void {

                down_image.source = value;

           }

           public function set disabled_source(value:Object):void {

                disabled_image.source = value;

           }

      ]]>

      </fx:Script>

      </s:Button>

       

      next: place an object of components.skinedButton in a window:

      <components:skinedButton x="10" y="19" skinClass="skin.skinButton"

                up_source="@Embed('../assets/images/MenuWnd/up.png')"

                over_source="@Embed('../assets/images/MenuWnd/over.png')"

                 down_source="@Embed('../assets/images/MenuWnd/down.png')"

                disabled_source ="@Embed('../assets/images/MenuWnd/disabled.png')"

      />

        • 1. Re: How to change skined button image dynamically
          Bryan_Hg Level 1

          and third: skin.skinButton.mxml

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

           

          <!--

           

              ADOBE SYSTEMS INCORPORATED

              Copyright 2008 Adobe Systems Incorporated

              All Rights Reserved.

           

              NOTICE: Adobe permits you to use, modify, and distribute this file

              in accordance with the terms of the license agreement accompanying it.

           

          -->

           

          <!--- The default skin class for the Spark Button component. 

           

                 @see spark.components.Button

           

                @langversion 3.0

                @playerversion Flash 10

                @playerversion AIR 1.5

                @productversion Flex 4

          -->

          <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

                       xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

          creationComplete="initButtonSkin()"

          minWidth="72" minHeight="72" alpha.disabled="0.5">

           

              <!-- host component -->

              <fx:Metadata>

                  <![CDATA[

                  /**

                   * @copy spark.skins.spark.ApplicationSkin#hostComponent

                   */

                  [HostComponent("components.skinedButton")]

                  ]]>

              </fx:Metadata>

           

              <!-- states -->

              <s:states>

                  <s:State name="up" />

                  <s:State name="over" />

                  <s:State name="down" />

                  <s:State name="disabled" />

              </s:states>

           

          <fx:Script fb:purpose="styling">

          <![CDATA[

          /* Define the skin elements that should not be colorized.

          For button, the graphics are colorized but the label is not. */

          static private const exclusions:Array = ["labelDisplay"];

           

          override public function get colorizeExclusions():Array {

          return exclusions;

          }

           

          override protected function initializationComplete():void {

          useChromeColor = true;

          super.initializationComplete();

          }

           

          private function initButtonSkin():void

          {

          skinImage.source = hostComponent.up_image.source;

          skinImage. source.up = hostComponent.up_image.source;

          skinImage.source.over = hostComponent.over_image.source;

          skinImage. source.down = hostComponent.down_image.source;

          skinImage. source.disabled = hostComponent. disabled _image.source;

          }

          ]]>

          </fx:Script>

           

          <s:BitmapImage id="skinImage" includeIn="up"

             left="0" right="0" top="0" bottom="0" />

           

          </s:SparkSkin>

           

          However, when the program runs, the image of the button do not change, it keep showing the up.png, how could this happen? and how to change the image source in different state in the script?