3 Replies Latest reply on Feb 2, 2012 6:26 PM by Chris W. Griffith

    Resizable background image without stretching

    ErikaDparit

      Hi,

      Im working on a flash catalyst (5.5) project and the main structure is going to be something similar to this http://www.intecdigital.com/

      i.e in the center there is going to be a video player or an image showing, depending on the page we are viewing, and a background image which I want to be evenly resized when the user is resizing the window, just like the above website reference.

      I am using the constraints and I have centered the video player,I have my buttons  aligned on top and it works fine,I even added a "Fullscreen" option which also works fine,but the problem is that the background is not resizing evenly but it keeps stretching which is not good.Is there a way I can do something similar to the above website?

       

      Another issue that I would like to avoid is, when the window is being resized by the user, how can I set the minimum  Width and Height that it can be resized (lets say the window will stop being resized if width less than 600 and height less than 300), because if I don't then the things will overlap each other which is also not a good thing to happen.

       

      I can provide images of my project if necessary.

      Thank you in advance

      Erka

        • 1. Re: Resizable background image without stretching
          Chris W. Griffith Adobe Community Professional

          Erka-

           

          Flash Catalyst does not expose the minWidth or minHeight attribute for the application. However, you can import your project into Flash Builder and add those attributes.

           

          As for the resizing and scaling, you might want to read by post on it: http://chrisgriffith.wordpress.com/2011/06/22/understanding-resizing-and-scaling-in-flash- catalyst/

           

          So, you acheive the effect you are wanting, you are going to need to also write some custom ActionScrip to listen for the window size change event, then update the sizing/positioning of your background image.

           

          An alternate idea would be to have no background in the Flash Catalyst file, enable the transparency option in the html embed/object code. Then display the background image as part of the HTML/CSS layer and manage the resizing there.

           

          Chris

          1 person found this helpful
          • 2. Re: Resizable background image without stretching
            ErikaDparit Level 1

            Hello Chris,

            thank you very much for your helpful reply!

             

            I was wondering, how can I enable transparency in the html code?You mean I should open the file on Flash Builder and do something there or just leave a white color on the Artboard settings and add no background image? Being a total noob on scripting and whatever it may include, I think I am going to look for tutorials that have to do with "enabling transparency on flash builder".

             

            About the custom AS that I would have to write so that it will listen when the window size changes and thus update the position/size of the background image, do you think I could do it in Flash Professional (the AS file I mean) and then in this file insert my swf with Dreamweaver or FP? (it is not that I know how to do this either in FP or Dreamweaver,it is just that I have seen a couple of tutorials explaining something similar) .Like I said, I know nothing about scripting, even if I found a script to do what Im looking for I would have no clue of where to put this script so that will work together with the rest of my project.

             

            I have downloaded the swffit, I think it might help me somehow to what I want to do, I just don't know how to use it,where should I "paste" it....I guess I  have to do some more research about these stuff.

             

            Another problem (most important) that I have now, is that I can't make my application's content show on the internet when I upploaded it to my FTP, but Im going to open a new topic so that it will be more easy to be spotted as a unsolved issue, I hope you can help me with that.

             

            Again thank you very much, Chris!

            Erika

            • 3. Re: Resizable background image without stretching
              Chris W. Griffith Adobe Community Professional

              Here is some information on the transparency, in the published HTML file look for the two references to wmode and change their values to transparent.

              <param name="wmode" value="transparent">

               

              http://kb2.adobe.com/cps/127/tn_12701.html

               

              You will have to write any custom ActionScript in Flash Builder. Flash Professional does not understand Flash Catalust or Flash Builder projects.

               

              Chris