Back To Flash and ActionScript Forum

embed with widh relative to height

  • chopficaro
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 23, 2010
  • Posts: 30
  • Status: Offline

Post March 12th, 2010, 11:52 am

ive been able to embed my swf as an html object with its height and width relative to the window size, which was step one. now, i want to preserve the aspect ratio, so that the height is always relative to the width. i know this isnt a javascript or html forum but i figured someone here must have wanted to try this at some point. heres what i tried that didnt work:

javascript
Code: [ Select ]
window.onresize = function()
{
document.getelementById("containerA").style.width=document.getelementById("containerA").style.height/20+'px';
}
  1. window.onresize = function()
  2. {
  3. document.getelementById("containerA").style.width=document.getelementById("containerA").style.height/20+'px';
  4. }


html
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" lang="en" xml:lang="en">
 <head>
  <title>SWFObject - step 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    html, body, #containerA { width:100%; height:100%; }
    body { margin:0; padding:0; overflow:hidden;}
    </style>

    <style type="text/javascript" src="resize.js"></style>

 </head>
 <body>
  <div id="containerA">
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
    <param name="movie" value="yankeeScreenMenu.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="yankeeScreenMenu.swf" width="100%" height="100%">
    <param name="quality" value="autohigh" />
    <param name="menu" value="false" />
    <!--<![endif]-->
     <p>Alternative content</p>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
   </object>
  </div>
 </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
  2. <html xmlns="" lang="en" xml:lang="en">
  3.  <head>
  4.   <title>SWFObject - step 1</title>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <style type="text/css" media="screen">
  7.     html, body, #containerA { width:100%; height:100%; }
  8.     body { margin:0; padding:0; overflow:hidden;}
  9.     </style>
  11.     <style type="text/javascript" src="resize.js"></style>
  13.  </head>
  14.  <body>
  15.   <div id="containerA">
  16.    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
  17.     <param name="movie" value="yankeeScreenMenu.swf" />
  18.     <!--[if !IE]>-->
  19.     <object type="application/x-shockwave-flash" data="yankeeScreenMenu.swf" width="100%" height="100%">
  20.     <param name="quality" value="autohigh" />
  21.     <param name="menu" value="false" />
  22.     <!--<![endif]-->
  23.      <p>Alternative content</p>
  24.     <!--[if !IE]>-->
  25.     </object>
  26.     <!--<![endif]-->
  27.    </object>
  28.   </div>
  29.  </body>
  30. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 12th, 2010, 11:52 am

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post March 12th, 2010, 5:50 pm

You need to do this inside of the swf using actionscript so we need to know what version of flash/as your using. You also need a plan for what to do with the extra space inside your swf (should it all scale, or just the background and not the content, etc?)

I wrote a tutorial a while back that touches on this functionality by using flash as a background. Most of the techniques should apply to what your doing as well provided your using Actionscript 2.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • chopficaro
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 23, 2010
  • Posts: 30
  • Status: Offline

Post March 13th, 2010, 11:03 pm

what i want cant be done inside the action script. i want the height of the embedded flash to be 100%, i have already done that. i want the width of the embedded flash to be a specific fraction of the height in pixels. my object is a skinny menu bar with a small width compared to the height. so, when user resizes the window to about the same size as the menu bar, he should see only the menu bar and no other html. when he widens the window, he should see more of the other html.
  • chopficaro
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 23, 2010
  • Posts: 30
  • Status: Offline

Post March 14th, 2010, 7:04 pm

i found a solution

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 65 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.