Skip navigation
Bibis431
Currently Being Moderated

how to maintain aspect ratio of an external swf file in index.html the same as in flash.swf?

Jun 11, 2012 5:22 AM

Tags: #cs5 #help #as3 #swf #book #external #embed #flip #uiloader #scaling_problem

I need help with embeding a flip book into flash CS5 AS3, I am using a UILoader to run an external  single swf flip book (with no extra files or folders), using scale contents in the UILoader settings, the flip book loads and works in flash, but when I publish the settings, the flip book is scaled down to a very small window in index.html.

 

I have tried resizing the flip book before publishing (the flip book) and using maintain aspect ratio in the UILoader settings, but no joy so far.

 

Scale contents setting produces a small window in index.html and Maintain aspect ratio produces a very large window that over flows the whole screen.

 

I think the index.html needs amending as the swf file works fine, but unsure what to do. I have also tried changing the height below in both instances from 660 to 1500, but that had no effect either.

 

 

Many thanks in advance for all replies.

 

Here is the index.html file

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

  <title>preloader</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style type="text/css" media="screen">

  html, body { height:100%; background-color: #ffffff;}

  body { margin:0; padding:0; overflow:auto; }

  #flashContent { width:100%; height:100%; text-align: center; }

  </style>

</head>

<body>

  <div id="flashContent">

   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1360" height="660" id="preloader" align="middle">

    <param name="movie" value="preloader.swf" />

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

    <param name="bgcolor" value="#ffffff" />

    <param name="play" value="true" />

    <param name="loop" value="true" />

    <param name="wmode" value="gpu" />

    <param name="scale" value="showall" />

    <param name="menu" value="true" />

    <param name="devicefont" value="false" />

    <param name="salign" value="" />

    <param name="allowScriptAccess" value="sameDomain" />

    <param name="allowFullScreen" value="true" />

    <!--[if !IE]>-->

    <object type="application/x-shockwave-flash" data="preloader.swf" width="1360" height="660">

     <param name="movie" value="preloader.swf" />

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

     <param name="bgcolor" value="#ffffff" />

     <param name="play" value="true" />

     <param name="loop" value="true" />

     <param name="wmode" value="gpu" />

     <param name="scale" value="showall" />

     <param name="menu" value="true" />

     <param name="devicefont" value="false" />

     <param name="salign" value="" />

     <param name="allowScriptAccess" value="sameDomain" />

     <param name="allowFullScreen" value="true" />

    <!--<![endif]-->

     <a href="http://www.adobe.com/go/getflash">

      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" />

     </a>

    <!--[if !IE]>-->

    </object>

    <!--<![endif]-->

   </object>

  </div>

</body>

</html>

 
Replies
  • Currently Being Moderated
    Jun 11, 2012 8:00 AM   in reply to Bibis431

    1360 wide is VERY wide! Many monitors will have problems displaying that.

    What is the resolution of the monitor you are testing on?

    What is the desired display size?

    #flashContent { width:100%; height:100%; text-align: center; }

    Have you tried getting rid of the 100% and just setting the desired display size as <object> dimensions?... of course you need to use a correct aspect ratio.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2012 9:31 AM   in reply to Bibis431

    I think you are attempting to resize too many different things and they are not interating well together... scaling UILoader, then the .swf itself and then <object>.... that's 3 different means of attempting to set dimensions.

    While many 15" laptops may have 1280 wide resolution, most will not display the full wide. Once you get up to 1240 or some, scroll bars may be required. And it's almost impossible to perfectly fit to height to multiple screens... everyone has different toolbars etc that affect the height.

    So attempting to maintain aspect ratio may shrink the size way down so the height will fit.

    As for boxes in top right and left... we have no idea what that means.

    Please post a link to the actual page and then describe in detail the exact problems and we can follow along and visually see what you are talking about. Detail exactly what are the boxes and what is the UILoader.

    My advice though... do all the scaling in the HTML code, and don't attempt to do scaling in all 3 elements.

    To help you understand scaling as it relates to aspect ratio a little better:

    Here are examples of different scaling parameters available in the Publish settings. You can also add these parameters directly in the html (<param name="scale" value="noscale"). All the examples replace the actual Flash dimensions with 100% for both width and height (width="100%" height="100%"). These examples use the old <object> and <embed> to illustrate the different ways to scale Flash. Once you understand how it works I’d recommend that you use swfobject to place the Flash in your final project.

    View the source code for each page to see the full code.

     

    http://www.cidigitalmedia.com/tutorials/scale/exact_fit.html

     

    "exactFit" scales the file to fit exactly within the confines of the screen, irregardless if the movie becomes consequently distorted. The original aspect ratio is not maintained. So round things are not round and squares are not square.

     

    http://www.cidigitalmedia.com/tutorials/scale/noScale.html

     

    "noScale" is the default setting, and causes the movie to be displayed at the originally designed dimensions.

    http://www.cidigitalmedia.com/tutorials/scale/no_border.html

     

    "noBorder" causes the movie to be scaled to what ever dimensions are needed to have no border surrounding the movie within the player, which consequently could result in some of the movie being cut off from view. In other words, the movie will maintain the original aspect ratio and will fill the screen completely. But if the movie has to be streched wider to fill both sides of the screen, it will also stretch taller, but then some of the top and the bottom of the movie may be cut off from view.

     

    http://www.cidigitalmedia.com/tutorials/scale/show_all.html

     

    "showAll" scales the movie to the size of the screen (which could cause pixelation if the file contains raster information), the difference between showAll and exactFit is that showAll mantains initial movie size proportions. Because it maintains the original aspect ratio, there can be space to the sides or the top and bottom. But everything always shows and they are not distorted. But notice the photo in the center, it becomes pixilated at larger screen resolutions.

    The trickiest part of trying to go full screen is that it’s difficult to make the Flash wider without making it taller also, that is, to maintain the correct proportions or aspect ratio of everything on the stage. These methods are just simple scaling accomplished with html. There are also methods to dynamically scale the stage and it’s elements using Actionscript… but that’s a much more complex undertaking.

    Best wishes,

    Eye for Video

    www.cidigitalmedia.com

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2012 11:46 AM   in reply to Bibis431

    We just don't have enough information to be of much more help... we really need to see the whole page.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points