4 Replies Latest reply on Jan 20, 2012 8:46 AM by Smosti

    MultiDPIBitmapSource help requested

    Smosti Level 1

      Hello everyone, first time posting here.

      I've been at this for hours and I can't figure out what im doing wrong, so figured i'd ask the pros.

       

      Im trying to make a decorative bar in a flex mobile project out of a repeating icon, a texture in a png file

       

      Im trying to work the MultiDPIBitmapSource as follows:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Image xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" fillMode="repeat"> 
                <s:source>
                          <s:MultiDPIBitmapSource source160dpi="@Embed('images/components/barra38x38.png')"
                                                                                      source240dpi="@Embed('images/components/barra57x57.png')"
                                                                                      source320dpi="@Embed('images/components/barra76x76.png')"/>
                </s:source>
      </s:Image>
      

       

      However, im running into the following issue:

      In both design mode and in the device, the 240 and 320 dpi images are getting scaled improperly and they are also getting

      zoomed and cropped.

       

      The images are 38x38 pixels, 57x57 pixels and 76x76 pixels as represented in the file names.

      What on earth am I doing wrong?

       

      Thanks!

        • 1. Re: MultiDPIBitmapSource help requested
          Smosti Level 1

          I figured the problem is somewhere along the lines of Flex not setting the HEIGHT of the bar correctly and thus

          clipping is ocurring, any ideas as to how to set the height of this component dinamically depending on the current

          DPI?

          • 2. Re: MultiDPIBitmapSource help requested
            Smosti Level 1

            Resolved ><

             

            Posting in case anyone has the same issue

             

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

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

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

                                 add="barraHorizontal(event)">

                      <fx:Script>

                                <![CDATA[

                                          import mx.events.FlexEvent;

             

                                          protected function barraHorizontal(event:Event):void

                                          {

                                                    var dpi:int = Capabilities.screenDPI;

                                                    if(dpi < 200){

                                                              trace('DPI < 200');

                                                              this.height = 32;

                                                              trace('Height = ' + this.height);

                                                    }

             

                                                    if(dpi >= 200 && dpi < 280){

                                                              trace('dpi >= 200 && dpi < 280');

                                                              this.height = 48;

                                                              trace('Height = ' + this.height);

                                                    }

             

                                                    if(dpi >= 280){

                                                              trace('DPI > 280');

                                                              this.height = 64;

                                                              trace('Height = ' + this.height);

                                                    }

             

                                          }

             

                                ]]>

                      </fx:Script>

                      <s:BitmapImage width="100%" height="100%" fillMode="repeat">

                                <s:source>

                                          <s:MultiDPIBitmapSource source160dpi="@Embed('images/components/barra38x38.png')"

                                                                                                      source240dpi="@Embed('images/components/barr a52x52.png')"

                                                                                                      source320dpi="@Embed('images/components/barr a76x76.png')"/>

                                </s:source>

                      </s:BitmapImage>

             

            </s:Group>

            • 3. Re: MultiDPIBitmapSource help requested
              sdsdfsdwefdcgdgcvedb Level 1

              I'd say your solution is fine, but in general when using applicationDPI in your Application makes flex scale all your compoenents at run time accordingly DPI on the device.

              So, there is no need to manually set the dimensions of the container - this will interfere with what flex does for you. I'd just use BitmapImage without any width/height set and use MultiDPIBitmapSource to set these 3 images.

              • 4. Re: MultiDPIBitmapSource help requested
                Smosti Level 1

                Thank you, however I may have forgotten to mention..

                The bitmap image im using is a pattern, thus I needed to repeat it on a 100% width with a fillMode of "repeat"

                Oddly enough, flex wasnt setting the image height automatically to the actual height of the DPISource, thus I had

                to do it manually.