3 Replies Latest reply on Feb 7, 2010 10:58 AM by CoreyRLucier

    BitmapImage changes in build 13875

    monkeymagiic Level 1

      Hello furry friends

       

      As my last post was about updating my current SDK from an early build of Flex 4 to the newer milestone one (build 13975) so is this one.

       

      It appears my BitmapImages within SparkSkins are not showing anymore, the assets I am importing are not dynamic and sitting in a assets folder as .PNG files. has something changed with the use of BitmapImages?

       

      Here is my class:

       

      <?xml version="1.0" encoding="utf-8"?>
      <!--
      *
      * Generic Button Skin
      * 
      * @author    Tyrone Neill
      * @date      08/10/09
      * @see       http://www.tyroneneill.com
      * 
      -->
      <s:SparkSkin 
           xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           minWidth="70" minHeight="21"
           currentStateChanging="currentStateChangingHandler( event )"
           creationComplete="creationComplete( event )">
           
           <fx:Metadata>
                [ HostComponent( "spark.components.ButtonBarButton" ) ]
           </fx:Metadata>
           
           <fx:Script>
                <![CDATA[
                     import mx.events.FlexEvent;
                     import mx.events.StateChangeEvent;
                     import mx.utils.ObjectUtil;
                     
                     
                     /* ==================================================== */
                     /* = CONSTANTS                                                    = */
                     /* ==================================================== */
                     
                     /** 
                      * Define the skin elements that should not be colorized. 
                      * For button, the graphics are colorized but the label is not.
                      * @private 
                      * */
                     private static const exclusions:Array = [ "labelDisplay" ];
                     
                     /* ==================================================== */
                     /* = OVERRIDE METHODS                                          = */
                     /* ==================================================== */
                     
                     /**
                      * Colorize Exclusions
                      * @inheritDoc
                      * */
                     override public function get colorizeExclusions():Array 
                     {
                          return exclusions;
                     }
                     
                     /* ==================================================== */
                     /* = PROTECTED METHODS                                          = */
                     /* ==================================================== */
                     
                     /**
                      * Current State Changing Handler
                      * @protected
                      * */
                     protected function currentStateChangingHandler( event:StateChangeEvent ):void
                     {
                          //Handle State Change Effects here
                          backgroundGradientColorTop.color = hostComponent.getStyle( 'backgroundGradientTopColor' ) as uint;
                          backgroundGradientColorBottom.color = hostComponent.getStyle( 'backgroundGradientBottomColor' ) as uint;
                     }
                     /**
                      * On Creation Complete
                      * @protected
                      * */
                     protected function creationComplete( evt:FlexEvent ):void 
                     {
                          var dataObj:Object = hostComponent.data;
                          
                          /* Set Data for Image and ToolTip */
                          hostComponent.toolTip = dataObj.label;
                          icon.source = dataObj.icon;
                     }
                     
                ]]>
           </fx:Script>
           
           <!-- states -->    
           <s:states>
                <s:State name="up" />
                <s:State name="upAndSelected" />
                <s:State name="over" />
                <s:State name="overAndSelected" />
                <s:State name="down" />
                <s:State name="downAndSelected" />
                <s:State name="disabled" />
                <s:State name="disabledAndSelected" />
           </s:states>
           
           <!-- transitions -->    
           <s:transitions>    
                <s:Transition fromState="up" toState="over" autoReverse="true">
                     <s:AnimateColor targets="{ [ backgroundGradientColorTop, backgroundGradientColorBottom ] }" 
                                         colorFrom="{ getStyle( 'backgroundGradientTopColor' ) }" 
                                         colorTo="{ getStyle( 'rollOverColor' ) }" 
                                         duration="150" />
                </s:Transition>
                <s:Transition fromState="over" toState="up" autoReverse="true">
                     <s:AnimateColor targets="{ [ backgroundGradientColorTop, backgroundGradientColorBottom ] }" duration="150" />
                </s:Transition>
                <s:Transition fromState="down" toState="over" autoReverse="true">
                     <s:AnimateColor targets="{ [ backgroundGradientColorTop, backgroundGradientColorBottom ] }" duration="150" />
                </s:Transition>        
                <s:Transition fromState="*" toState="upAndSelected" autoReverse="true">
                     <s:AnimateColor targets="{ [ backgroundGradientColorTop, backgroundGradientColorBottom ] }"
                                         colorFrom="{ getStyle( 'backgroundGradientTopColor' ) }" 
                                         colorTo="{ getStyle( 'rollOverColor' ) }"
                                         duration="150" />
                </s:Transition>        
           </s:transitions>
      
           
           <!-- background gradient -->
           <s:Rect left="2" right="2" top="2" bottom="2" 
                     radiusX="{hostComponent.getStyle('cornerRadius')} " 
                     radiusY="{ hostComponent.getStyle('cornerRadius') }">
                <s:fill>
                     <s:LinearGradient rotation="90" >
                          <s:GradientEntry id="backgroundGradientColorTop" ratio="0" alpha="1" />
                          <s:GradientEntry id="backgroundGradientColorBottom" ratio="1" alpha="1" />
                     </s:LinearGradient>
                </s:fill>
           </s:Rect>
      
           <s:BitmapImage id="icon" 
                             x="{ ( this.width / 2 ) - ( icon.width / 2 ) }"
                             y="{ ( this.height / 2 ) - ( icon.height / 2 ) }"
                             includeIn="disabled, disabledAndSelected, down, downAndSelected, over, overAndSelected, up, upAndSelected" />
                
      </s:SparkSkin>
      
        • 1. Re: BitmapImage changes in build 13875
          monkeymagiic Level 1

          Looking at this more and more it does not seem to be a BitmapImage issue I am having as I see my BitmapImages are working within my itemrenderers though not the SparkSkins, any ideas?

          • 2. Re: BitmapImage changes in build 13875
            monkeymagiic Level 1

            I appear to be talking to myself

             

            After looking up some of the posts it appears BitmapImage has changed and the you would now need to Embed the image?

             

            I changed the component from a Spark BitmapImage to a MX Image control:

             

            <s:Graphic>
                      <ns:Image id="icon" x="{ ( this.width / 2 ) - ( icon.width / 2 ) }" y="{ ( this.height / 2 ) - ( icon.height / 2 ) }" 
                                  includeIn="disabled, disabledAndSelected, down, downAndSelected, over, overAndSelected, up, upAndSelected" />
                      <!--
                 <s:BitmapImage id="icon" 
                                   includeIn="disabled, disabledAndSelected, down, downAndSelected, over, overAndSelected, up, upAndSelected" />
                      -->
                 </s:Graphic>
            
            

             

             

            Now what worries me about this is I would imagine the Image control is a heaview component than the humble BitmapImage? not so comfortable using this in my appz to be honest.

             

            Any thoughts very welcome

             

            Tyrone

            • 3. Re: BitmapImage changes in build 13875
              CoreyRLucier Adobe Employee

              You are correct...(you are talking to yourself).

               

              No, just kidding.  You are correct, BitmapImage no longer supports dynamic loading of image assets, the source for your BitmapImage must be in the form of embed data.  So as of now you should make use of an mx:Image or roll your own component.

              1 person found this helpful