KeyWords> Stage.onResize, MovieClipLoader()
A estas alturas de Flash, hay pequeños detalles que marcan la diferencia, cuando vemos uuna web nueva que nos impacta, nuestro lado perverso nos lleva a buscar pequeños fallos o a pensar como se habrá hecho aquello que tanto nos gusta. Personalmente, una de mis manías consiste en comprobar si los contenidos se adpatan a la resolución de pantalla. Un claro ejemplo es el de una web que utiliza un fondo de pantalla que ocupa toda la ventana del navegador. Que feo queda cuando la imagen se distorsiona o queda cortada. Veamos como arreglar este problema.
Optimizamos el escenario, para el uso del objeto Stage.
-
Stage.scaleMode = 'noScale';
-
Stage.align = 'TL';
La función stageResize, redimensiona el el fondo de la película cada vez que se modifica el tamaño de la ventana del navegador.
-
stageResize = function ():Void {
-
holder._width = Stage.width;
-
holder._height = Stage.height;
-
};
-
stageListener = new Object();
-
stageListener.onResize = stageResize;
-
Stage.addListener(stageListener);
Necesitamos un preloader para la precarga de nuestro fondo de pantalla.
-
this.createTextField("my_txt", 1, 0, 0, 300, 100);
-
my_txt.autoSize = true;
-
var my_fmt:TextFormat = new TextFormat();
-
my_fmt.color = 0x000000;
-
my_fmt.font = 'Arial';
-
my_fmt.size = 10
-
my_txt.setNewTextFormat(my_fmt);
Mostrar precarga
-
var my_listener:Object = new Object();
-
my_listener.onLoadProgress =
-
function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
-
my_txt.text = 'Cargando ... ' + Math.round(bytesLoaded / bytesTotal * 100) + ' %';
-
};
-
my_listener.onLoadInit = function(target_mc:MovieClip) {
-
my_txt.removeTextField();
-
mcLoader.removeListener(my_listener);
-
stageResize();
-
};
Carga de la imagen.
-
var holder:MovieClip =
-
this.createEmptyMovieClip('holder_mc', this.getNextHighestDepth());
-
var mcLoader:MovieClipLoader = new MovieClipLoader();
-
mcLoader.addListener(my_listener);
-
mcLoader.loadClip('images/bg01.jpg', holder);
Publicar
El último toque consiste en configurar los parámetros de publicación, abrir el panel Configuración de publicación y asegurate de cambiar los siguientes valores:
- Dimensions: percent
- Escale: no scale
Descarga Fondopantalla.zip
Fondopantalla.zip se ha descargado 2,587 veces.
Loading ...
un saludo, lo que me pasa es que al redimensionar la ventana el fondo de la web se distorciona, asi como los textos de la web. no hay forma de que solamente el fondo de la web sea el que se escale sin que el contenido se vea afectado mantenienodse con las mismas dimensiones? gracias por todo.
Hola pixel, lo que puedes hacer, es cargar la imagen de fondo en un clip de película vacío en una capa inferior, veamos:
1. anular el siguiente código:
Código:
2. Crear un clip de película vacio (menú-> insertar > nuevo simbolo > clip de película),
3. Inserta una capa nueva que siempre estará debajo del resto de capas
4. Abre la biblioteca y arrastra el clip de película vacio al escenario.
5 Selecciona el clip de película vacio (un circulo pequeño) y se abre el inspector de propiedades.
6. En el inspector de propiedades, donde dice, escribe 'holder' sin comillas.
Con esto debería funcionar sin modificar nada. (el resto de código en fotograma1)
saludos
Hola! muy bueno, pero tengo un problema ya que la posición del fondo el el primer caso es 0,0 y cuando lo pongo dentro de MC me queda donde lo posiciones, como sería para que me Área de trabajo quede en el medio??, sin tener que posicionar en un lugar el MC.
Gracias por el ejemplo.
Saludos.
grmn
Puedes hacerlo modificando un poco la funcion stageResize:
saludos
Toni, muchas gracias por la ayuda!
Te cuento que sigue igual, el area de trabajo queda siempre a la izq arriba, y no en el centro, ya que cuando lo colocas en un html hay que dejarlo 100% no queda centrado.
Espero que me hayas entendido!
Saludos
Ah! me olvide, tiene un error ortográfico en:
holder._y = (Stage.height/2) - (holder._heigth/2)
El segundo "height" esta mal escrito.
Saludos
Toni, ya lo arregle! disculpa la cantidad de comentarios!
Lo que hice fue colocar todos los elementos de mi pelicula, menos el "holder" y el AS del mismo, en un MC con nombre "pelicula" y le aplique el mismo cambio que al fondo y quedo!
pelicula._x = (Stage.width/2) - (pelicula._width/2)
pelicula._y = (Stage.height/2) - (pelicula._heigth/2)
Gracias!!
Saludos.-
hola, ¿como puedo cargar un SWF 'encima' del fondo y que quede siempre en el centro de la pantalla, cualquiera que sea la resolucion del usuario?
el fondo se carga en 'holder'. supongo que tengo que crear otro movieclip vacio para meter ahi mi SWF, pero si lo hago me lo posiciona donde puse el movieclip y no se reposiciona al cambiar el tamaño de la ventana.
gracias
Juan, no es necesario que esté vacio, create uno con un cuadrado mismo llamalo pelicula, y copia este código en la función stageResize del primer frame de la peli.
pelicula._x = (Stage.width/2)
pelicula._y = (Stage.height/2)
grmn,
mirate la respuesta que doy con fecha 16 de febrero, está explicado paso a paso.
Daver, te has dejado algo creo,
Para que quede centrado el clip es:
saludos
Toni, lo probé con ese código y se me iba el clip a la izquierda arriba, probé a quitarle lo de restarle "-(pelicula._width/2)" y me funcionó.
Disculpa,
es que yo tengo la costumbre d alinear los clips de película en x:0 y:0 y por eso le tengo que restar la mitad del tamaño, supongo que tu clip, tiene el punto de registro al centro.
saludos.
No te tienes porque disculpar, era eso yo los ajusto al centro siempre
Hola Toni.
Estoy haciendo algo muy parecido a esto, pero en vez de tener una imagen fija de fondo, cargaría un swf que es un slideshow de fotos ("slideshow.swf").
El caso es que aunque en local y probando desde flash me va todo perfecto, al subirlo y abrir la página, el movieclip que carga "slideshow.swf" no se redimensiona al tamaño del navegador.
Para que se "entere" tengo que redimensionar manualmente el navegador... he probado a llamar a la función "stageResize" en los eventos onLoadInit, onLoadProgress y onLoadComplete. También he creado una función independiente a "stageResize" que redimensione el movieclip, pero no consigo que funcione bien.
Estoy pensando en redimensionar la página al cargarse con javascript, pero preferiría no usar éste sistema... ¿se te ocurre alguna solución?.
Muchas gracias por tu ayuda y por ésta web que es todo un referente
.
Hola toni, te escribo porque tengo un par de dudas y necesito tu ayuda y conocimientos.
En mi sitio tengo dos ejemplos y si pudieras verlos y decirme como poder hacerlo.
Ejemplo 1: Estoy probando un blog en flash al cual le e dado transparencias para hacerlo un poco mas interesante, el tema es que me gustaria poder buscar la forma de desplegarlo dentro de mi sitio, como un elemento externo y que tambien tenga el fondo adaptable como el que enseñaste en ese post.
url: http://felipe.orangemedialabs.com/flashblog/
Ejemplo 2: realize el ejemplo que muestras, para lograr que una imagen se adapte al tamaño del browser, pero no logro dejarlo sin margenes como el ejemplo tuyo, a mi me quedan margenes blancos. si pudieras decirme como solucionar esto porfavor.
Muchas Gracias por todo
Increible el sitio
Felipe, para que no te queden margenes blancos debes editar el html donde se carga la pelicula y agregar este codigo entre las atiquetes
y :
Espero te sirva, saludos
Solo una preguntita, este artículo se refiere a ActionScrip 2 o 3?