10 Replies Latest reply on Feb 6, 2013 2:31 PM by Rachel-Martin

    off stage object's

    greg_panta

      Hello Adobe community,

       

      I need a little help with a project i' m working. I' m trying to create a web site and i'm using flash catalyst because i want some specific actions on it. On flash catalyst stage, i have an image with specific dimensions, let's say 1600x1200, and a button in front of the image. Also i have an object, let's assume an image, dimensions 1600x400, outside the stage, on the right side. When i'm clicking the button, this object is moving, from right to left, and is entering in the stage replacing the first image. This is my project, and here is where my problem begins. I'm having the "classic" problem with scale, so after a litllte research i found something here.  I'm importing the fxp file to flash builder. On the <Application> tag, in the Main.mxml file, i'm removing the width and height attributes and replece them with this attribute: preinitialize="systemManager.stage.scaleMode='showAll'" . From flash builder menu, i'm choosing Project > Export Release Build to publish a version of my swf. I create an index.html page and i embeding the swf there. So,

      1. The file is only scaling horizontally, which means that i only see a part of my page, something like 3200x300 on the top of the screen. The rest height is cropped and the page is blank
      2. I can see the object that was outside the flash catalyst stage and shouldn't be visible.

       

      Any idea how can i fix those two things? 

        • 1. Re: off stage object's
          Chris W. Griffith Adobe Community Professional

          The question is how you want your content to be displayed? If you want to hide the offscreen elements, you can do that by editting the html output. By default it will use 100% as values for the width and height. Here is a simple sample with an offscreen yellow ball.

          Screen Shot 2012-11-19 at 8.31.14 AM.png

          Note the ball is shown, when it should not be and the entire page is white. The background color of the html is set to #ccc.

           

          Now by editing the width and height values in the html file to match the stage's defined values, I get this:

          Screen Shot 2012-11-19 at 8.30.08 AM.png

          As you can see, no yellow ball and the html is showing it's bg color. There are 3 references to the width and height in the file so make sure you adjust all 3.

           

          Hope this helps,

           

           

          Chris

          • 2. Re: off stage object's
            greg_panta Level 1

            When i'm using this code:

             

            <title>Untitled Document</title>

            <style type="text/css">

            body {

                margin-left: 0px;

                margin-top: 0px;

                margin-right: 0px;

                margin-bottom: 0px;

            }

            </style>

             

            </head>

             

            <body>

               <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%">

            <param name="movie" value="file:///C|/Users/user/Desktop/project scale/Main.swf" />

            <param name="quality" value="high" />

            <param name="LOOP" value="false">

            <param name="SCALE" value="exactfit">

            <embed src="file:///C|/Users/user/Desktop/project scale/Main.swf" width="100%" type="application/x-shockwave-flash" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" loop="false" scale="exactfit" />

            </object>

            </body>

             

            the result is this:

            Untitled.jpg

            the blue arrow shows the area, that shouldn't shown, and the black arrow shows the area that should be my index page. The stage i used i flash catalyst and flash builder is the size of the image shown with the black arrow, 1600x1200. The rest are (blank area) is cropped..

            If i set dimensions on the above html code:

            body {

                width:1600px;

                height:1200px;

                margin-left: 0px;

                margin-top: 0px;

                margin-right: 0px;

                margin-bottom: 0px;

            }

             

            and the result is this:

            Untitled2.jpg

            • 3. Re: off stage object's
              Chris W. Griffith Adobe Community Professional

              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=8,0,0,0" width="100%" height="100%">

              <param name="movie" value="file:///C|/Users/user/Desktop/project scale/Main.swf" />

              <param name="quality" value="high" />

              <param name="LOOP" value="false">

              <param name="SCALE" value="exactfit">

               

              <embed src="file:///C|/Users/user/Desktop/project scale/Main.swf" width="100%" type="application/x-shockwave-flash" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" loop="false" scale="exactfit" />

               

              See the width and height values in the <object> tag and the <embed> tag change those to 1600 and 1200.

               

              Note when you republish from Catalyst, it will overwrite that file, so lock it.

               

              Chris

              • 4. Re: off stage object's
                greg_panta Level 1

                I'm afraid it doesn't work.. Can you explain to me, on the above post, why the height is cropped?

                • 5. Re: off stage object's
                  Chris W. Griffith Adobe Community Professional

                  It is not cropped, the swf is rendering at it's defined size. That is why the browser window has a scroll bar. the swf content is larger than the browser window.

                   

                  You can also adjust the

                  <s:Application > to have both minWidth="1600" minHeight="1200" width="1600" height="1200"  values. But this has to be done in Flash Builder.

                   

                   

                  Chris

                  • 6. Re: off stage object's
                    greg_panta Level 1

                    i meant that is cropped on the first picture, where there is a lot of blank page.. I'll try that right now

                    • 7. Re: off stage object's
                      greg_panta Level 1

                      Ok, if i do that, the swf appears with dimensions 1600x1200, also the index that i'm embeding the Main.swf file appears with those dimensions, but i don't have scale..

                      • 9. Re: off stage object's
                        greg_panta Level 1

                        I read your post and this is exactly what i need, my flashcatalyst website to fit in any screen or in any window.But i don't understand how..how you did that?How can i do that?Do i need to laod it to flash builder and fix something from there?Do i have to creat an index.html and embed the swf there?It's something i can do from the catalyst for each state i have?I really don't know..

                        • 10. Re: off stage object's
                          Rachel-Martin

                          Another idea that might work, if you just wanted to adjust overall scale would be to simply embed your swf in a div with a hidden overflow.

                           

                          Then, use javascript to scale that div to the appropriate size when the window is resized.  That way, you can resize your swf to the appropriate size, while keeping your aspect ratio locked in and hiding any elements outside of the main stage (which was why I utilized this method).

                           

                          The resize function might look similar to the following:

                           

                          function resizeDiv()

                          {

                                    var swfDiv = document.getElementById("mySWF");

                                    if (swfDiv) // check to see if div exists, in case this is called before document finishes loading

                                    {

                                              var height = window.innerHeight;

                                              var width = window.innerWidth;

                                              var ratio = Math.min(height/1200, width/1600);

                                              height = 1200*ratio;

                                              width = 1600*ratio;

                           

                                              swfDiv.style.width = width + "px";

                                              swfDiv.style.height = height + "px";

                                    }

                          }