Flash a 100% con contenido centrado
8 seguidores
Hola a todos.
Estoy intentando hacer una película flash que ocupe el 100% de la ventana de explorer y que cargue otra película dentro, y que esta que se carga siempre esté centrada, aunque se redimensione la ventana del explorador. ya se que es algo que se ha hablado varias veces, pero creo que tengo el tema un poco cruzado por no lo acabo de conseguir. Si alguien tiene algun ejemplo o sabe hacerlo bien, que me ayude por favor.
Un ejemplo de lo que necesito es este: http://www.milesaldridge.com en el cual el marco lateral blanco siempre tiene el mismo grosor y el contenido siempre esta centrado. Este es otro ejemplo: http://www.strawberryfrog.com
muchas gracias
gaspi
recupero este viejo post porque me he visto con el mismo problema final.
Si a mi documento HTML le quito el DOCTYPE funciona perfectamente pero entonces sería incorrecto.
¿Cuál sería la solución más idónea?
Gracias
txuma Plus
seguramente de que ese código no es del todo correcto con ese DOCTYPE, pero como habitualmente Exploter se lo traga casi todo... ;)
(no me he puesto a mirar el código así que hablo un poco por suposiciones. Si después saco un rato lo miro)
Usuario desconocido
La cuestión es que funciona con el doctype en Explorer y no lo hace en Firefox... soy usuario de Firefox pero... de quién es la culpa?
txuma Plus
A lo mejor funciona, pero dejar un documento sin DOCTYPE no me parece nada correcto, ¿no creeis?
xaviroyo
Al fiiiiiiiiiiiiin!!!!!!!!!!! jejeje
Muchas Gracias. Lo he probado y funciona
Usuario desconocido
Quítale la línea siguiente del html
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</code>
Y te funcionará. Lo he probado con el FireFox y funciona.
No me preguntes por qué... porque no lo sé :D
xaviroyo
Hola de nuevo msanchez. No hay manera, jeje, soy un negado. No consigo que me funcione en otro explorador que no sea explorer. He puesto código tal y como me has mostrado pero no me va. Échale un vistazo si quieres
http://www.xafdesign.com/extras/55sp.html
Si puedes mira el código a ver si encuentras el error. Verás que en saling pone "TL", es porque el la película flash también lo tengo así.
gracias y perdona que sea tan pesado con esto
una_china_en_mi_zapato
ya lo he posteado en otro post que trata un poco el mismo tema... este tutorial de toni lopez os puede ser util:
http://www.e-tonilopez.com/after-hours/archives/000383.html
-
Usuario desconocido
Acuerdate de lo que dije de la alineación del Flash, seguramente habrás puesto los parámetros en el html dentro del object, pero también hay que ponerlos en el embed, que es como incrusta el flash mozilla y netscape:
<code>
<object classid="clsid..." codebase="http://fpd..." width="100%" height="100%" id="virtua" align="middle">
<param name="movie" value="virtua.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="scale" value="noscale" /> <---------- este
<param name="salign" value="lt" /> <------------ y este
<param name="bgcolor" value="#202020" />
<embed src="virtua.swf" menu="false" quality="high" scale="noscale" salign="lt" bgcolor="#202020" width="100%" height="100%" name="virtua" align="middle" type="application/x-shockwave-flash" pluginspage="http://..." />
</object>
</code>
Fijate como también van dentro del embed los atributos que te he marcado
scale="noscale" salign="lt"
Saludos!
odrakir
No tengo tiempo (y la verdad tampoco muchas ganas :oops:) de leerme todo esto, pero yo hice una página que siempre ocupa el 100% de la ventana, que se reescala según reescales la ventana y que pasa el tamaño de la ventana a flash para que pueda centrar los elementos.
Mira mi primera respuesta para ver el código, no sé si funciona en todos todos los navegadores, pero seguro que en varios, a parte del explorer.
Odrakir.
xaviroyo
no he conseguido que se vea bien la página desde un explorador que no sea explorer, alguien me sabría decir porque?? o alguien sabe solucionarlo????
gracias
Usuario desconocido
Gracias, pero la idea del comportamiento fue de Canapé, yo sólo le di vidilla ;)
Usuario desconocido
<offtopic>
msanchez quiero que sepas que me ha encantado como has desarrollado el comportamiento de la interfaz en tu website ;-)
<//offtopic>
lagunaomar
creo que asi te saldra bien :)
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
}
xaviroyo
Hola de nuevo msanchez.
Me ha surgido otro problema con la programacion que me pasaste y es que sólo funciona en explorer, en lo demás exploradores me sale la web cortada y no se como solucionarlo, la web es esta www.cincuentaycinco.biz
gracias
xaviroyo
Es verdad, perdona las molestias, estaba allí y no lo había visto.
Muchas gracias
Usuario desconocido
En el primer mensaje te puse esto:
<fieldset>
Puede que la primera vez que abras el navegador no se llame a la función redimensión, porque no se ha producido un evento onResize, y el contenido no te quede centrado. Así que lo que deberás hacer será hacer una llamada redimension.onResize() nada más definirla.
</fieldset>
Que es exactamente lo que te pasa. Lo que tienes que hacer es lo que te puse en el segundo ejemplo, justo después de definir la función hacer la llamada para que la ejecute:
<code>
margen = 20;
redimension = new Object();
redimension.onResize = function() {
if (relleno==undefined)
createEmptyMovieClip("relleno", 1);
relleno.clear();
relleno.beginFill(0x000000);
relleno.lineStyle(0);
relleno.moveTo(margen, margen);
relleno.lineTo(Stage.width-margen, margen);
relleno.lineTo(Stage.width-margen, Stage.height-margen);
relleno.lineTo(margen, Stage.height-margen);
relleno.lineTo(margen, margen);
}
redimension.onResize(); <------------ Así se ejecuta la primera vez aunque no se redimensione
Stage.align = "TL";
Stage.scaleMode = "noScale";
Stage.addListener(redimension);
</code>
Saludos!
xaviroyo
muchas gracias Odrakir, aunque creo que no es exactamente lo que necesito. A ver si se pasa por aquí msanchez, que es quien me explico y pasó el codigo, supongo que tendrá un solución rápida.
gracias de todos modos.
odrakir
Hey, yo una vez expliqué en otro foro algo parecido. Os pongo el enlace, la verdad no sé si es la misma solución que está dando msanchez, porque fue hace mucho y ahora no tengo tiempo de releer lo mio ni lo vuestro. Este es el enlace:
http://www.subflash.com/foro/viewtopic.php?t=3328&highlight=onresize
y funciona.
Odrakir.
xaviroyo
Hola msanchez. Estaba probando lo que me explicaste hace unos días sobre este tema en un proyecto que estoy haciendo, funciona correctamente pero solo cuando escalas la ventana del explorador por primera vez, es decir, cuando entras por primera vez en la web, el contenido flash me aparece ajustado arriba a la izquierda y hasta que no escalo la ventana por primera vez no se me ajusta en el centro, luego ya funciona correctamente. Supongo que es que la función no actua hasta que se escala la ventana. ¿cómo podría solucionarlo para que aparezca ajustado nada mas entrar en la web??
gracias
Usuario desconocido
En lugar de dibujar un margen blanco, lo que podemos es dibujar un recuadro negro sobre fondo blanco, es más sencillo
<code>
margen = 20;
redimension = new Object();
redimension.onResize = function() {
if (relleno==undefined)
createEmptyMovieClip("relleno", 1);
relleno.clear();
relleno.beginFill(0x000000);
relleno.lineStyle(0);
relleno.moveTo(margen, margen);
relleno.lineTo(Stage.width-margen, margen);
relleno.lineTo(Stage.width-margen, Stage.height-margen);
relleno.lineTo(margen, Stage.height-margen);
relleno.lineTo(margen, margen);
}
redimension.onResize();
Stage.align = "TL";
Stage.scaleMode = "noScale";
Stage.addListener(redimension);
</code>
xaviroyo
Muy bueno, la verdad que eso que tu has llamado ladrillaco me servira de mucho. Muchas gracias. Pero tengo otra duda. No veo claro lo de trastear con la función redimensión como tu dices, para hacer lo de los márgenes y todo eso?? cómo lo harías si no es mucho pedir, jejeje.
gracias
xrv
genial!! :) te lo has currado tio!
Usuario desconocido
Hola, eso se hace con el evento onResize del objeto Stage, pero para que funcione tienes que indicarle la alineación del Flash y scaleMode tiene que ser "noScale"
En un ejemplo lo verás más claro. Crea una película de 400x300 píxels, añade un recuadro de color también de 400x300 y lo colocas en la posición 0,0.
En el primer frame de la película colocas lo siguiente:
<code>
redimension = new Object();
redimension.onResize = function() {
//En este ejemplo vamos a centrar el contenido en la ventana
_x = Math.floor((Stage.width - 400)/2);
_y = Math.floor((Stage.height - 300)/2);
}
Stage.align = "TL"; //TL = Top Left, alineación arriba izda.
Stage.scaleMode = "noScale";
Stage.addListener(redimension); //Cada vez que cambien las dimensiones se llama a la función onResize del objeto redimensión
</code>
Un último apunte, y es que así funciona en el flash player, pero para que funcione también en el navegador, tienes que poner las siguientes etiquetas al insertar el Flash:
<code>
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
</code>
Te las pone automáticamente al exportarlo si le indicas en configuración de publicación la alineación Flash y la escala.
Puede que la primera vez que abras el navegador no se llame a la función redimensión, porque no se ha producido un evento onResize, y el contenido no te quede centrado. Así que lo que deberás hacer será hacer una llamada redimension.onResize() nada más definirla.
Ahora puedes trastear con la función de redimensión. Puedes por ejemplo hacer que la película ocupe el 100% del espacio y situar elementos en los márgenes o dibujar un borde blanco como el ejemplo que has puesto, aquí ya entra la imaginación de cada uno :D
Uf, que ladrillaco... :D
xaviroyo
si, pero lo que yo necesito es que la el flash ocupe el 100% de la ventana del explorador, igual que en los ejemplos que he puesto, que todo sea flash y se redimensione y centre correctamente si cambio el tamaño de la ventana del explorador
xrv
tu crees que metiendole un margin al body de por ejemplo 20 px conseguirás eso? (pq no lo pruebas y nos lo dices?) :P
saludines