Desplazamiento automático de Flash interno incrustado (HTML/CSS)

Soy un diseñador de medios en movimiento que intenta incorporar parte de mi trabajo para un cliente en un sitio web para su regalo de Navidad. Estoy tratando de cambiar el tamaño de un .swf para que coincida con el tamaño del navegador, ya que el tamaño fijo realmente está jugando con mi diseño de cambio de tamaño.Desplazamiento automático de Flash interno incrustado (HTML/CSS)

Cada vez que establezco el ancho/alto de .swf en "100%" o "automático", la película se corta en la parte superior e inferior debajo de los contenedores div. Cuando cambio el tamaño del contenedor al 100%, obtengo una película larga y delgada. He copiado mi código a continuación, y realmente agradecería su ayuda. No dude en criticar cualquier otra cosa sobre mi código, también, soy un virgen de CSS.

¡Muchas gracias! :)

<!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> 

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function MM_effectAppearFade(targetElement, duration, from, to, toggle) 
{ 
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle}); 
} 
</script> 

<title>Eat, Drink, and Be Mary</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<style type="text/css" media="screen"> 

     body { 
     background:url('images/home.jpg'); 
     background-repeat:no-repeat; 
     background-size:cover; 
     position:absolute; 

     } 

     html, body { 
     height:100%; 
     width:auto; 
     min-width:700; 
     } 

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


     .swfcontainer { 
      margin-top:3%; 
      width:100%; 
      height:30%; 
      margin-bottom:1px; 
     } 

     .swfcontainersmall { 
      margin-left:10%; 
      height:300px; 
      margin-right:10%; 
     } 

     .flashfile { 
      width:100%; 
      height:100%; 
      text-align:center; 
      margin:2; 
      padding:0; 
      overflow:hidden; 
     } 

     .textcontainer { 
      margin-bottom:3px; 
      margin-top:0; 
      margin-left:0; 
      width:100%; 
      margin-right:0; 
     } 

     .textcontainersmall { 
     margin-top:1px; 
     margin-bottom:1px; 
     margin-left:25%; 
     margin-right:25%; 
     } 

     #flashContent { 
     width:100%; 
     height:100%; 
     } 


     #wrap { min-height: 100%;} 

     #main {overflow:auto; 
     padding-bottom: 150px;} /* must be same height as the footer */ 

     #footer {position: relative; 
     margin-top:-100px; /* negative value of footer height */ 
     height:100px; 
     clear:both; 
     border-bottom:solid 4px #333; 
     } 

     /*Opera Fix*/ 
     body:before { 
     content:""; 
     height:100%; 
     float:left; 
     width:0; 
     margin-top:-32767px;/ 
     } 

</style> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<body> 
<div id="wrap"> 
    <div id="main"> 
     <div class="swfcontainer"> 
      <div class="swfcontainersmall"> 
       <div class="flashfile"> 
        <div id="flashContent"> 


         <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="300" height="300" align=                 "middle"> 
         <param name="SRC" value="EatDrinkAndBeMary.swf"> 
         <param name="wmode" value="transparent" /> 
         <param name="SCALE" value="noborder" /> 
         <param name="BGCOLOR" value= /> 
         <embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed> 
</object> 
        </div> 
       </div> 
      </div> 
     </div> 


     <div class="textcontainer"> 
      <div class="textcontainersmall"> 
     <img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" /> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />  
    <div> 
</body> 
</html>

Fuente

2011-12-22 user1111970

yo sólo haría uso de [swffit] (http://swffit.millermedeiros.com/) - mucho más fácil que hacerlo a mano ... – ptriek

¿Está swffit obsoleto para los navegadores más nuevos? – user1111970

¿Quieres decir 'compatible con navegadores modernos'? No estoy 100% seguro, pero todos los sitios en los que he estado trabajando funcionan como un encanto en todos los navegadores ... por ejemplo. http://www.aorta.be/ – ptriek

Espero que esto pueda apuntar en la dirección correcta. Pero como señala un ejemplo en línea, donde realmente podemos ver los elementos que está incrustando sería genial.

<html> 
    <head> 
     <style> 
.menu li { 
    display: inline; 
} 
.menu { 
    float: left; 
    padding: 0; 
    border: solid; 
} 
img { 
    float: left; 
    width: 200px; 
    margin: 0 30px; 
    border: solid; 
} 
#header { 
    margin-left: 20%; 
    margin-right: 20%; 
    padding: 0 5%; 
} 
     </style> 
     <title> 
     </title> 
    </head> 
    <body> 
     <div id="header"> 
      <ul class="menu left"> 
       <li>Elemento 1</li> 
       <li>Elemento 2</li> 
      </ul> 

      <img src="http://www.google.com/logos/2012/steno12-hp.jpg"> 

      <ul class="menu right"> 
       <li>Elemento 3</li> 
       <li>Elemento 4</li> 
      </ul> 
     </div> 
    </body> 
</html>

Fuente

2012-01-13 01:26:23 Darkade

Eso es simplemente un montón de código. para silenciar una pregunta de desbordamiento de pila, creo.

Si desea un objeto flash reponsive con css su debe mirar here o para una versión más corta here

CSS:

.embed-wrapper { 
    width: 100%; 
    max-width: YOURMAXWIDTHpx; 
} 
* html .arve-embed-container { 
    margin-bottom: 45px; 
    margin-bot\tom: 0; 
} 

.arve-embed-container { 
    position: relative; 
    padding-bottom: 56.25%; /* 16/9 ratio */ 
    padding-top: 30px; /* IE6 workaround*/ 
    height: 0; 
    overflow: hidden; 
}       

.arce-embed-container div, 
.arve-embed-container iframe, 
.arve-embed-container object, 
.arve-embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

tomar ese css y con esta html

<div class="embed-wrapper"> 
<div class="arve-embed-container"> 
<object YOURSTUFF=HERE> 
</object> 
</div> 
</div>

Podrías hacer que todo lo que está dentro del trabajo de empaquetamiento se redimensione automáticamente, así que 16: 9 para que puedas eliminar la mayor parte de tu código e implementar algo. g como este

Fuente

2012-01-31 14:46:25

Deberías echar un vistazo a http://fitvidsjs.com/. Parece que es lo que necesitas.

Fuente

2012-06-07 21:11:23

En el archivo flash
Conjunto
Stage.scaleMode = "noScale";

archivo html
establecer anchura de objetos 100%

Fuente

2012-11-16 13:06:43 Eric

Desplazamiento automático de Flash interno incrustado (HTML/CSS)

Respuesta

Cuestiones relacionadas