3 Replies Latest reply on Jun 8, 2010 5:22 AM by Sam Souhrada

    Problems with Slice 9 Scale 9 images in flex

    Sam Souhrada Level 1

      I've tried multiple ways to get button skins to scale correctly when being re-sized but none of them have worked.

       

      1. I've tried embedding a PNG file and then setting the guide manually.

      2. I've also tried embedding a swf file that has guides built into it.

       

      I will paste the code I'm using below:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
          <mx:Style>
         
          .PNGButton
          {
              upSkin: Embed(source="/images/buttonBlue.png",  scaleGridLeft="10", scaleGridTop="11", scaleGridRight="90", scaleGridBottom="94");
              overSkin: Embed(source="/images/buttonGreen.png", scaleGridLeft="10", scaleGridTop="11", scaleGridRight="90", scaleGridBottom="94");
              downSkin: Embed(source="/images/buttonGray.png", scaleGridLeft="10", scaleGridTop="11", scaleGridRight="90", scaleGridBottom="94");
          }
         
          .SWFButton
          {
              upSkin: Embed(source="/images/buttons.swf", symbol='buttonBlue2',  scaleGridLeft="10", scaleGridTop="11", scaleGridRight="90", scaleGridBottom="94");
              overSkin: Embed(source="/images/buttons.swf", symbol="greenButton");
              downSkin: Embed(source="/images/buttons.swf", symbol="grayButton");
          }
         
         
      </mx:Style>
          <mx:HBox x="10" y="10">
              <mx:Button styleName="PNGButton"/>
              <mx:Button styleName="SWFButton"/>
          </mx:HBox>
          <mx:HBox x="234" y="10">
              <mx:Button styleName="PNGButton" width="125" height="50"/>
              <mx:Button styleName="SWFButton" width="125" height="50"/>
          </mx:HBox>

       


      </mx:Application>

       

       

      The PNG shows 3 version of itself... The flash version looks correct but none of them scale correctly as seen below:

      scaledButtons.JPG

       

      Any good methods to scale a graphic in Flex 3?

        • 1. Re: Problems with Slice 9 Scale 9 images in flex
          Sam Souhrada Level 1

          I noticed something strange as I was working on this. I found that if you embed the image into a class you can do scale 9 on it. However if you do it via css it doesn't work:

           

          This works:

           

          [Embed(source="/images/buttonOver.png",
                  scaleGridTop="10", scaleGridBottom="17",
                  scaleGridLeft="10", scaleGridRight="90")]
              [Bindable]
              public var imgCls:Class;

           

           

          This doesn't work:

           

          <mx:Style>
             
              Button
              {
                 
                  overSkin: Embed(source="/images/buttonOver.png",  scaleGridLeft="10", scaleGridTop="11", scaleGridRight="90", scaleGridBottom="94");
                 
              }
                 
          </mx:Style>

           

          <mx:Button label="Hello!" x="142" y="26" upSkin="{imgCls}" width="223" height="101"/>

           

          Original Image

          buttonOver.png

           

          Any ideas on how to get this done via CSS?

          • 2. Re: Problems with Slice 9 Scale 9 images in flex
            eliza004

            If CFDOCUMENT has external CSS included (not inline styles), then CFDOCUMENT finds those external resources to use, it does not include the resources like in CFINCLUDE. CFDOCUMENT acts as a browser and uses HTTP to get those resources (CSS and images). By this the server resolves the IP or URL that we have used to refer resources.

            So if the files are local, a better and simpler solution is, we can use “file:” protocol with 3 leading slashes (“file:///”) in the image SRC or CSS source. It also speeds up the CFDOCUMENT call.

            <IMG SRC="file:///c:\mywebsite\images\ myImage.jpg" style=”width:40; height:40” />
            OR
            <CFOUTPUT><IMG SRC="file:///#ExpandPath(/images/ myImage.jpg)#" /></CFOUTPUT>

            <link HREF="file:///c:\mywebsite\styles\myStyle.css" rel="stylesheet" type="text/css" />
            Any suggestions are appreciated.

            • 3. Re: Problems with Slice 9 Scale 9 images in flex
              Sam Souhrada Level 1

              I think you must have replied in the wrong thread.