Posicionar imagen en Flash
4 seguidores
Buenas a tod@s, buscaba ayudita a ver si alguien me puede decir como cargar imágenes como en esta web:
http://www.mitsoura.net/index_en.php#/p=theband&m=2
que se carga una imagen en el borde derecho y se queda ahí fija. Cómo se hace?? y redimensionarla sin que pierda calidad. Digo que se queda en el mismo sito al redimensionar el navegador. Saludos y gracias.
lestat
Ochionet
Ok, gracias por tu respuesta, le daré unas vueltas más. El problema es que no soy programador y me voy peleando con cosillas que me voy encontrando y luego normal que el código estea lioso. Gracias.
ochionet
No me he leido demasiado el codigo, pero a primera vista veo esto, stageResize parece estar en el _root y no dentro del clip, cierto?
si dices que donde = this, esta diciendo donde = clip, por lo que es muy probable que donde.stageResize() no llame a nada.
De todas maneras veo el código algo liado,
Saludos,
lestat
Alguna ayudita please, como me decía elSuricatoRojo, la imagen y algún elemento más no me aparecen en el escenario hasta que redimensiono el navegador, y en el caso de las imágenes que cargo en el clip vacío en slideshow, cada vez que se carga una imagen no la redimensiona hasta que lo habo yo con el navegador. Help me please!!! Gracias.
lestat
Hola de nuevo, pues seguro que está bien la solución que me pones, pero algo hago mal.
No quiero ser pesado pero es lo que me falta para finalizar. Gracias.
Tengo el primer fotograma el siguiente códido (donde el clip slideshow, es en el que se cargan las imágenes).
import flash.display.*;
stop();
//posiciones
galeria._x=0;
galeria._y=0;
stageResize = function ():Void {
holder._width = Stage.width;
holder._height = Stage.height;
slideshow._height = Stage.height
slideshow._xscale = slideshow._yscale
// -- posicionar holder (clip que contiene el fondo)
new mx.transitions.Tween(elementos, "_x", mx.transitions.easing.Back.easeInOut, elementos._x, Stage.width-0-elementos._width, 20, false);
new mx.transitions.Tween(menu, "_x", mx.transitions.easing.Back.easeInOut, menu._x, Stage.width-0-menu._width, 20, false);
new mx.transitions.Tween(direc, "_x", mx.transitions.easing.Back.easeInOut, direc._x, Stage.width-0-direc._width, 20, false);
new mx.transitions.Tween(direc, "_y", mx.transitions.easing.Back.easeInOut, direc._y, Stage.height-0-direc._height, 20, false);
new mx.transitions.Tween(forma, "_x", mx.transitions.easing.Back.easeInOut, forma._x, Stage.width-0-forma._width, 20, false);
new mx.transitions.Tween(forma, "_y", mx.transitions.easing.Back.easeInOut, forma._y, Stage.height-0-forma._height, 20, false);
slideshow._y = Stage.height-slideshow._height;
holder._x = (Stage.width/2) - (holder._width/2)
holder._y = (Stage.height/2) - (holder._height/2)
};
stageListener = new Object();
stageListener.onResize = stageResize;
Stage.addListener(stageListener);
// -- cargar imagen de fondo
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();
};
var holder:MovieClip=holder
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.addListener(my_listener);
mcLoader.loadClip('fondo.jpg', holder);
Stage.align = "TL";
Stage.scaleMode = "noScale";
loadMovie("menu.swf", menu);
loadMovie("logo.swf", elementos);
//loadMovie("slideshow.swf", foto);
loadMovie("direc.swf", direc);
loadMovie("forma.swf", forma);
var sizeListener:Object = new Object();
sizeListener.onResize = function() {
var sw:Number = Stage.width;
var sh:Number = Stage.height;
var newX:Number = sw/2;
var newY:Number = sh/2;
moveTo(centered, newX, newY);
updateAfterEvent();
};
Luego tengo el clip slideshow en el primer fotograma también donde tengo el siguiente códido:
[code]Stage.align = "TL";
Stage.scaleMode = "noScale";
//-------------------------------------------------------------------
// importar clase tween
//-------------------------------------------------------------------
import mx.transitions.Tween;
import mx.transitions.easing.*;
//-------------------------------------------------------------------
// declarar variables
//-------------------------------------------------------------------
var my_xml:XML = new XML ();
my_xml.ignoreWhite = true;
var parent:MovieClip = this;
var time:Number = 5;
var urls:Array = new Array ();
var prevMovie:String;
var index:Number = 0;
var depth:Number = 0;
//-------------------------------------------------------------------
// cargar XML
//-------------------------------------------------------------------
my_xml.onLoad = function (success) {
if (success) {
for (var i = 0; i
elsuricatorojo
Hola,
Lo que te está pasando es lo siguiente. Tienes vinculada la redimensión de la imagen unicamente al evento onResize del Stage por lo que cuando la carga la muestra normal y solo uando haces un resize aplica la lógica de redimensionamiento.
La solución es aplicar esa lógica tambien al evento onLoadComplete del MovieClipLoader o cuando detectes por otros métodos que la imagen se ha cargado. Por lo tanto lo que tienes que hacer es:
1) sacar a una función la lógica de redimensionamiento para poder reutilizarla. Lo tienes hacho con la función stageResize:
2) tambien necesitas vincular la logica de redimensionamiento al evento onResize (que tambien lo tenias hecho).
stageListener = new Object();
stageListener.onResize = stageResize;
Stage.addListener(stageListener);
3) ...y necesitas que cuando se cargue la foto aplicar ese stageResize. Como estas utilizando MovieClipLoader utilizamos el evento onLoadComplete
var donde = this
mclListener.onLoadComplete = function (target_mc:MovieClip) {
...
donde.stageResize() // El "donde" es para asegurar el scope, otra solución es utilizar Delegate.
};
La aproximación que estabas hachiendo de vincular la lógica de redimensionamiento al onEneterFrame funciona pero no es eficiente ya que como decia tpmmds vas a obligar a la aplicación ha hacer 24 calculos por segundo y en el 99% de los casos para nada.
Otra cosa...
veo que defines las funciones como:
miFuncion = function(){
}
Yo, te recomiendo que para como estas utilizando las funciones que las declares asi:
function miFuncion(){
}
La ventaja principal es que de la forma primera necesitas declarar la función antes de llamarla:
miFuncion()
miFuncion = function(){
}
// NO FUNCIONA
Mientras que de la segunda forma puede llamar a la función antes:
miFuncion()
function miFuncion(){
}
// SI FUNCIONA
Lo mismo no tiene nada que ver con tu problema o lo mismo si, que a veces son tonterias de estas las que te joden una mañana.
lestat
tpmmds
Puff, no doy con el error. El primer código lo tengo en el primer frame de la película. El del xml está dentro de un movieclip vacío que está en el primer frame de la película. Se te ocurre algo?
tpmmds
...pues nada, así te aseguras que se reescala; de esta forma seguro que no falla :-)
lestat
tpmmds
Muchas gracias por tu ayuda, pero no hay manera, voy a tener que dejar el onEnerFrame.
tpmmds
asegurate de llamarla DENTRO del onLoadComplete. No sé, puede que por estar anidadas las funciones no encuentre algo, AS2 es bastante probemático en este sentido. Habría que depurar a ver si realmente llega a llamar a la función cuando acaba de cargar la imagen.
lestat
Hola de nuevo, o algo hago mal (muy posible), o las imágenes no me aparecen hasta que redimensiono el navegador, y cada vez que carga una imagen tengo que redimensionar el navegador para que adapte la imagen. Gracias.
tpmmds
BuenAS:
Creo que añades las imágenes con la función loadImages, que vas llamando cada cierto tiempo con un setInterval. Llama DENTRO de esta función a la función stageResize que es la encargada de redimensionar el stage (escenario) con las nuevas dimensiones. Y el código que colocabas en la función enterFrame colócalo, como decía en el anterior post, dentro de stageResize (así tienes en la misma función todo el código encargado de reescalar el stage)
No sé si me he conseguido explicar.
No pasa nada grave si lo dejas como lo tienes, el problema es que estás continuamente redimensionando, y esto consume recursos.
lestat
tpmmds
Hola tpmmds, no te entiendo bien, es que si lo tengo en el Resize, las imágenes las carga del tamaño original y no me las adapta al tamaño del navegador sólo las redimensiona al cambiar el tamaño del navegador. No sé, me puedes echar un cabo? Saludos y gracias.
tpmmds
BuenAS:
Sí, va a ser mejor que lo quites de ahí, ya que es la función de controlador del evento enterFrame y se repite 24 veces por segundo :-) (los fps que tengas configurados). Añade ese código a la función de controlador del evento Resize, stageResize, que tienes más arriba. Llama a esta función cada vez que modifiques el escenario y quieras que se actualicen los tamaños (hay que hacerlo de forma manual ya que por su propia naturaleza, el evento Resize sólo se produce cuando el usuario cambia el tamaño del navegador.
Un saludo.
lestat
Bueno he encontrado una solución, seguro que algún programador si ve esto se estará tirando de los pelos, pero bueno me funciona poniendo en la peli principal:
slideshow.onEnterFrame = function (){
slideshow._height = Stage.height
slideshow._xscale = slideshow._yscale
slideshow._y = Stage.height-slideshow._height;
}
Gracias y saludos.
lestat
Buenas de nuevo, a raíz de lo que os preguntaba me ha salido otro problema a ver si encontráis donde está el error.
Lo que me pasa es que la imagen que cargo, si la cargo directamente en un movieclip me funciona perfectamente lo de que se redimensiona.
El problema está que quise cargar un archivo xml para pasar varias imágenes, y el problema es que no me carga las imágenes hasta que redimensiono la película o el navegador, luego si que aparecen las imágenes pero me respeta la primera si quiero que la imagen siguiente vuelva a ajustarse al navegador tengo que volver a redimensionarla. Os dejo aquí el código a ver si me podéis echar un cabo. Saludos y gracias.
Peli principal.
import flash.display.*;
stop();
//posiciones
galeria._x=0;
galeria._y=0;
stageResize = function ():Void {
holder._width = Stage.width;
holder._height = Stage.height;
foto._height = Stage.height
foto._xscale = foto._yscale
// -- posicionar holder (clip que contiene el fondo)
new mx.transitions.Tween(elementos, "_x", mx.transitions.easing.Back.easeInOut, elementos._x, Stage.width-0-elementos._width, 20, false);
new mx.transitions.Tween(menu, "_x", mx.transitions.easing.Back.easeInOut, menu._x, Stage.width-0-menu._width, 20, false);
new mx.transitions.Tween(direc, "_x", mx.transitions.easing.Back.easeInOut, direc._x, Stage.width-0-direc._width, 20, false);
new mx.transitions.Tween(direc, "_y", mx.transitions.easing.Back.easeInOut, direc._y, Stage.height-0-direc._height, 20, false);
foto._y = Stage.height-foto._height;
holder._x = (Stage.width/2) - (holder._width/2)
holder._y = (Stage.height/2) - (holder._height/2)
};
stageListener = new Object();
stageListener.onResize = stageResize;
Stage.addListener(stageListener);
// -- cargar imagen de fondo
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();
};
var holder:MovieClip=holder
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.addListener(my_listener);
mcLoader.loadClip('fondo.jpg', holder);
Stage.align = "TL";
Stage.scaleMode = "noScale";
loadMovie("menu.swf", menu);
loadMovie("logo.swf", elementos);
loadMovie("slideshow.swf", foto);
loadMovie("direc.swf", direc);
stop();
clip del xml
[code]Stage.align = "TL";
Stage.scaleMode = "noScale";
//-------------------------------------------------------------------
// importar clase tween
//-------------------------------------------------------------------
import mx.transitions.Tween;
import mx.transitions.easing.*;
//-------------------------------------------------------------------
// declarar variables
//-------------------------------------------------------------------
var my_xml:XML = new XML ();
my_xml.ignoreWhite = true;
var parent:MovieClip = this;
var time:Number = 5;
var urls:Array = new Array ();
var prevMovie:String;
var index:Number = 0;
var depth:Number = 0;
/*slideShow_mc = this.createEmptyMovieClip ("slideShow", this.getNextHighestDepth ());
// -- creo el clip contenedor
slideShow_mc._y = 0;
slideShow_mc._x = 0;*/
//-------------------------------------------------------------------
// cargar XML
//-------------------------------------------------------------------
my_xml.onLoad = function (success) {
if (success) {
for (var i = 0; i
lestat
Perfecto!!! Muchísimas gracias. Saludos.
elsuricatorojo
Lestad, pues el concepto es el mismo y es que creas un oyente del Stage para el evento onResize que se emite cada vez que se redimensiona el navegador (y por tanto el Stage ya en este caso el Stage ocupa el 100% del navegador). Por lo tanto cada vez que el oyente escuche el evento onResize puede actuar.
En el ejemplo anterior al escuchar el evento reposicionaba cont1 atacando ._x del contenedor. Si lo que quieres es escalar pues atacamos _height/_width o _xscale/_yscale segun te convenga. Por ejemplo, sobre el ejemplo anterior, si quisieramos que cont1 adquiera el alto del Stage y no pierda el ratio (no se distorsione):
function onResize(){
cont1._height = Stage.height
cont1._xscale = cont1._yscale
}
ochionet
hola, debes de tener un escuchador que se dispare si se sucede el evento de resize, seria algo asi :
import flash.display.*;
...
...
stage.addEventListener(Event.RESIZE, redimensiona);
...
...
private function redimensiona(e:Event):void
{
//aqui iria las modificaciones sobre los objetos que se estan viendo
...
...
}
Como veras el listener esta siempre activo, por lo que cualquier modificacion que sufra el navegador
disparara el metodo redimensiona
Saludos,
lestat
elSuricatoRojo
Gracias por tu respuesta, y si el caso fuera como el de esta web http://www.iamsecond.com/ la imagen que carga también a la derecha pero se redimensiona?
Saudos.
elsuricatorojo
Esa imagen está alineada a la esquina superior derecha en un flash que ocupa el 100% del navegador y no se esacala en función del tamaño del stage.
Si siquieres que la imagen sea externa, en AS2 los tiros van por:
1) Debes configurar el html que contiene el Flash para que lo muestra al 100%
2) Debes configurar el flash para que no se escale y se alinee con la esquina superior izquierda:
Stage.scaleMode = "noScale";
Stage.align = "TL";
3) Debes crear un contenedor para la foto (cont1 por ejemplo) y darlo de alta como listener del Stage (onResize) para que cuando el Stage se redimensione el contenedor actualice su ._x al Stage.width
function onResize(){
cont1._x = Stage.width
}
4) Debes cargar la imagen en otro contenedor (cont2 por ejemplo) dentro del contenedor antes mencionado (cont1) y cuando se haya cargado debes alinear la esquina superior derecha de cont2 con el 0,0 de cont1
cont1.cont2._x = -cont1.cont2._width
El tema de la calidad en el ejemplo que mencionas se reduce a que la imagen tiene mucha calidad. Ten en cuenta que no se escala, siempre tiene el mismo tamaño y si la ventana es mas pequeña se recorta.