4 Replies Latest reply on Jul 14, 2011 11:13 AM by Francisc

    How to calculate width for assets

    Francisc Level 3



      I want to have a large image that covers the full width of a device.

      How do I calculate which is the width I want?

      I will probably have 3 versions, each for one of the 3 DPI settings.


      Thank you.

        • 1. Re: How to calculate width for assets
          Shongrunden Adobe Employee

          I'm not sure I fully understand what you are looking for, but does MultiDPIBitmapSource help?


          http://opensource.adobe.com/wiki/display/flexsdk/Using+Different+Bitmaps+Based+On+Screen+D PI

          1 person found this helpful
          • 2. Re: How to calculate width for assets
            Francisc Level 3



            Sorry for being unclear.

            My problem is that coming from a web / desktop dev background, I always knew what the dimmensions of my website / application should be.

            960px, 800px etc. I decided how wide and tall it should be, while knowing that going over 1000px was risky and problably not worth it, 960px gives me plenty of space.


            Now I am trying to build for mobile, and while websites aren't all that complicated, Flex poses a problem: I don't understand (yet) how do deal with screen size even for a single DPI group.


            Taking 240 DPI and Android for example, if I want to have a JPG image that fills the whole screen, how wide should that image be?

            What can I count on? Which is my point of equilibrium?

            • 3. Re: How to calculate width for assets
              Shongrunden Adobe Employee

              A desktop application is much different than a mobile application.  On desktop you typically have some minimum width/height threshold that you know every monitor will be at least that big, for example 800x600.  Some people design applications for just that minimum resolution and some people build applications that can expand larger than that, but in the end you have basically the exact same application on every monitor.


              The story is much different on mobile devices.  The range of screen size and screen DPIs is much larger and must be accounted for.  You have mobile phones that are often something like 480x800 in portrait orientation, but then also 800x480 in landscape orientation.  So you can't really design an application that is only 480x480 because that just isn't much space and every device will have a ton of precious space that isn't utilized.


              Then bring in tablets which typically have a significantly larger screen size so the application layout that you have for a mobile phone often doesn't make sense on a tablet.  Many applications have a completely different UI on tablet vs on the phone.


              So in mobile applications you'll want to use relative sizing and positioning as much as possible (width/height=100%, top/left/right/bottom, VerticalLayout/HorizontalLayout, etc.), you'll want to learn about the options you have available in the Flex SDK for dealing with different DPIs (dpi scaling and CSS media queries), and you'll also want to think of if your application should act the same on tablets as on mobile phones or if the UI should be completely different.

              • 4. Re: How to calculate width for assets
                Francisc Level 3

                Understood. Thank you.