6 Replies Latest reply on Nov 9, 2010 5:07 PM by streak_viper

    Panini Scaling Question

    streak_viper Level 1


      Firstly, great product! And Panini is already an excellent leap forward.


      I'm curious about how to give an asset in my layout the characteristics of the "noBorder" StageScaleMode constant from within Catalyst (or builder, as the case may be). So essentially I want an asset (ie an image) to maintain it's aspect ratio (and crop if necessary to stay inside it's relative dimensions) rather than NU scaling and "stretching" as the window resizes.


      If this is not possible, I was contemplating creating a Flash project with these characteristics and then exporting the SWF file and using that in the FXP file (a dream within a dream ). The problem there is that I have no clue how to code the initial file in flash so I thought I'd ask here first.


      Thanks in advance


      - Leigh

        • 1. Re: Panini Scaling Question
          Tanya Heins-xmersq Level 1

          Hi Leigh,


          I think this is what you're after:


          In Panini, you can set an image border that scales relative to the browser size, but doesn't scale the enclosed image.  Attach the top, left, right and bottom of your image to the border of your Application stage and set the image Scaling property to none.


          Screen shot 2010-11-08 at 10.42.20 AM.png


          You can see the resulting behavior here.





          Message was edited by: Tanya Heins

          • 2. Re: Panini Scaling Question
            streak_viper Level 1

            Hey Tanya,

            Thanks for the reply. However, that's not quite what I'm looking for. The image in your example never actually resizes, it just crops - I need it to only crop when the aspect ratio constraints require it.


            Perhaps it's hard to explain - if you check out my old website http://www.vision-studios.ca/ you'll see what I'm talking about. As you enlarge or shrink the window, the image changes size as well, and only crops if you make the window unusually vertically or horizontally narrow.



            • 3. Re: Panini Scaling Question
              streak_viper Level 1

              I think I figured it out.... after extensive googling and code butchering (I haven't programmed anything since the 90's ) I made an SWF file that does what I need in Flash CS5 and then imported it into Catalyst. Adobe guys, FYI, it doesn't work in the preview for some reason - the image crops but does not resize - but when I actually export the project and put it up (I was gonna give links to the files on my web server for troubleshooting) it's fine. Not that that's too surprising since I'm more or less putting an SWF inside an SWF, but thought I'd pass it on


              If there's a better way to do this (ie from within catalyst) now or in the future then I'd love to hear it

              • 4. Re: Panini Scaling Question
                streak_viper Level 1

                *update* Apparently it didn't work in preview because it doesn't really work at all - I think I had the original SWF file in my cache and it fooled safari when I opened up the catalyst version.


                So, example files:

                is basically the idea I'm going for - the image resizes and crops but never distorts. Except that I want this functionality embedded in a smaller area in catalyst rather than the whole thing (ie the interface moves dynamically).


                However, when I do that, I end up with this (if you get the same result as above you may have to clear your cache... what I'm seeing, from both firefox and safari from my macbook pro and my tower is the image at around 200% not scaling, kinda like the problem in pre-panini catalyst when you tried to have the file scale) http://vision-studios.ca/dennycrane/catalyst/headache/Main.html (...and I just reloaded this file again on both computers when I went to add the link and now it's scaling down but not cropping to fill the screen... I'm wondering if maybe it scales back once the whole file is loaded? It's overly large still, 1.2 mb, I haven't optimized anything yet.....). This is just a test with the Flash CS5 file inserted into the Catalyst project and exported to an SWF. To get the effect in the SWF above I added some simple actionscript to the FLA, nothing other than


                import flash.display.StageScaleMode;



                stage.scaleMode = StageScaleMode.NO_BORDER;



                If I embed the image into my mockup frame work then the entire thing expands 200%, maybe more, which of course makes it all entirely useless.


                I can provide FXP files if this will help???? I'm starting to get the feeling this simply is outside of Catalyst's capabilities still... I'm already breaking brand-new software! Or maybe it's a problem with the SWF I'm embedded?



                • 5. Re: Panini Scaling Question
                  Tanya Heins-xmersq Level 1

                  Hmm.  Interesting issue.


                  I can get part way there in Panini with:


                  <s:BitmapImage left="10" right="10" top="60" 
                  bottom="10" fillMode="clip" smooth="true"

                  Test 2 here


                  However the resize happens keeping an x=0 and y=0 (top left) as a constant.  I expect that centering the image and bringing it to match the height or width (with appropriate cropping) would require some work in FlashBuilder.



                  • 6. Re: Panini Scaling Question
                    streak_viper Level 1

                    I can get the cropping functionality - same as setting the object scaling to 'none' from within catalyst - but the resize isn't occurring in the example above, it's only cropping and not resizing.


                    I suspect you're right, that there may be some builder coding required, though I would have no idea what that would be.


                    Adobe gurus, is there no existing way to do this?