4 Replies Latest reply on Mar 30, 2011 1:22 PM by wm22

    Making My Site Fluid?

    wm22

      I just created my first website using Flash Catalyst and exported it for the web.  The problem that I am having is that I made my background 1920px wide, so when I open the html file in a browser it would be large enough for higher res monitors.  But, on smaller monitors, my content is cutoff on the right.

       

      So I opened the html file in a text editor, but I cannot figure out what I need to change so that my site stays centered no matter the browser window size or monitor size.

       

      Any help would be very much appreciated!

        • 1. Re: Making My Site Fluid?
          topelovely Level 4

          From Flash cs5 professional:

           

          Just create an empty rectangle box, convert to a symbol movieclip and  name the instance anything you want I have named mine frame_mc. Place  the script in a layer above the movieclip and insert the actionscript  below. That's all

           

          import flash.display.Stage;
          import flash.events.Event;

           


          var myStage:Stage = this.stage;
          myStage.scaleMode = StageScaleMode.NO_BORDER;
          myStage.align = StageAlign.TOP_LEFT;

           


          function resizeDisplay(event:Event):void{
             
              var swfWidth:int = myStage.stageWidth;
              var swfHeight:int = myStage.stageHeight;
             
              /*var frameYPos:Number = swfHeight - frame.height;
              var frameXPos:Number = swfWidth - frame.width;*/
             
              frame_mc.width = swfWidth/2;
              frame_mc.height = swfHeight/2;
             
              }
             
          myStage.addEventListener(Event.RESIZE, resizeDisplay);

           

          Then use the flash UILoader component to call your catalyst swf file.

           

          You cannot publish a liquid flash site from flash catalyst, but with flash builder. No one is giving a working solution in the forum yet. My work around is to use the above script in flash professional using UILoader to call the catalyst swf file. But this is also giving me some problem. see my post http://forums.adobe.com/thread/830450. If yours work, please let me know.

          • 2. Re: Making My Site Fluid?
            AdeptDigital Level 2

            wm22,

             

            This seems to be a rather simple fix if you are willing to use a little html and css.  First, I would avoid such a large image in the Catalyst and keep the width down to your content.  For example if your content is only 1000px wide and you want to fill a 2000px wide space just cut off the left and right 500px of the image and use them as curtains in the HTML and CSS files.  Then your SWF file from Catalyst is not quite as large.  I have also played, with limited success, at leaving the Catalyst background transparent and shifting the JavaScript to allow for the window:transparent command just like with a regular SWF from Flash.

             

            But lets say for the sake of argument that you need the SWF from Catalyst to be that wide and all you really want to do is center the SWF no matter what.  Have you tried a simple text based align:center command in your HTML?  I have a 1200 px Catalyst output that is centered here:

             

            electronic-lifestyle.com

             

            I used a wrapper div with the margins set to auto to achieve my centerpoint but for your purposes you could use the same div to simply set the align:center in your CSS.  I've seen this work with text fields, perhaps it will work with the flash output.  The only bummer is that you may get a horizontal scroll bar on the bottom that you have to take care of with the CSS.  Remember that just because we are using this hard core program doesn't mean we can't take advantage of some low tech fixes for our problems.

             

            It may be something worth trying if your feeling stuck and like me loath heavy AS3 coding to solve what should be a simple fix.

             

            Brett

            1 person found this helpful
            • 3. Re: Making My Site Fluid?
              AdeptDigital Level 2

              Hey,

               

              Just found the page I was thinking of when I was writing about the transparent mode for your project.  Look here:

               

              http://www.morearty.com/blog/2006/10/02/transparent-flex-apps-with-html-showing-through/

               

              If your site can use this then the image you want can be a simple background in HTML and the SWF from FC can function on top of it.

               

              Good Luck,

              Brett

              1 person found this helpful
              • 4. Re: Making My Site Fluid?
                wm22 Level 1

                Thanks guys for the help!!!