Flash MX - MX2004 - Dibujar un borde a un JPEG cargado dinámicamente.
actionScript, actionScript avanzado | Diciembre 12th, 2004Versión para imprimir
loadMovie, lineStyle(), moveTo(), lineTo()
En el foro se plantea lo siguiente:
Estoy haciendo una web para la que me han pasado un montón de fotos con un marquito que rodea a cada foto de 1 pixel. El problema es que al cargar las fotos en un contenedor, el marco lo “suaviza” y en dos lados no muestra el marco y en los otros dos lo muestra más grueso.
Sé que en la bibliteca se puede controlar esto deshabilitando la opcion “Permitir Suavizado” pero aquí al ser una carga externa…
La única solución que se me ocurre es generar para cada imagen un swf en el que haya deshabilitado en la imagen la opcion de suavizado y en vez de cargar el jpg, cargar el swf. Lo que ocurre es que son más de 200 fotos.
Disponemos de varias opciones para solventar este ‘contratiempo’, por ejemplo modificar la imagen ampliando el tamaño de lienzo, o las que ya se mencionan anteriormente, pero ninguna válida si tratamos con un número de imágenes alto.
Una solución
Crear el marco de la imágen con actionScript. Para dibujar el marco de la imágen, usaremos una función, esta, es llamada una vez la imagen está totamente cargada (via loadMovie()). Veamos un poco de código:
drawBorder= function (clip, profundidad, pos_x, pos_y, ancho, alto) {
marco= createEmptyMovieClip("marco"+profundidad, profundidad);
with (marco) {
lineStyle(2, 0x000000, 100);
moveTo(pos_x, pos_y);
lineTo(pos_x+ancho, pos_y);
lineTo(pos_x+ancho, pos_y+alto);
lineTo(pos_x, pos_y+alto);
lineTo(pos_x, pos_y);
}
};
1. Creamos un clip de pelí cula contenedor.
2. Cargamos la imagen.
3. Cuando se detecta el fin de carga (getBytesLoaded() igual getBytesTotal(), se llama a la función que dibuja el marco drawBorder()( de esta forma, obtenemos el ancho y alto del la imagen).
this.createEmptyMovieClip("holder_mc", 1);
holder_mc.loadMovie("a3.jpg");
this.onEnterFrame = function() {
cargado = (holder_mc.getBytesLoaded()/holder_mc.getBytesTotal())*100;
if (cargado == 100) {
drawBorder(holder_mc, 2, 0, 0, holder_mc._width, holder_mc._height);
delete this.onEnterFrame;
}
};
Diciembre 13th, 2004 at 9:27 am
No es necesario crear un MC nuevo, así que mi idea serí a:
drawBorder= function (clip,grosor,color) {
if (!grosor) grosor=2
with (clip) {
var ancho=this._width //es necesario guardar los valores
var alto=this._height //alto y ancho del MC antes de empezar
//a dibujar
lineStyle(grosor, color, 100);
lineTo(ancho, 0);
lineTo(ancho, alto);
lineTo(0, alto);
lineTo(0, 0);
}
};
Llamarí amos a la función, p.e. como
drawBorder(holder_mc,5)
Diciembre 13th, 2004 at 10:00 am
Está claro que me precipité un poco al postear la función (se nota que aproveché algo que ya tenñia hecho para otra cosa), ya que muchos e los parámetros, no eran necesarios y como bien dices, no es necesario crear un clip de pelí ula para dibujar en el.
En todo caso Eliseo, que sepas que agradezco que envies tu versión, MUCHO MEJOR.
saludos!
Diciembre 13th, 2004 at 11:33 am
creo que el que me precipité un poco fuí yo
NO es
//MAL
var ancho=this._width
var alto=this._height
si no
//BIEN
var ancho=clip._width
var alto=clip._height
(tiene un comportamiento extraño el “this” dentro de un with -lo siento-)
Diciembre 13th, 2004 at 6:47 pm
Hola Tony
Creo que la solución más sencilla y rápida es quitar el borde a las imágenes con un script que crees en photoshop. Se lo pasas a las imágenes por lote y en 5 minutos lo tienes hecho dejando las imágenes bien.
un saludo
Febrero 3rd, 2005 at 2:14 am
Hola toni.
He llegado a este post por casualidad y curioseando yo cambiaria una cosa.
Por experiencia propia flash hay veces que inmediatamente después de devolver 100% descargado responde _width y _height como 0.
Yo en estos casos en vez de comprobar el porcentaje simplemente hago una comprobación del ancho, en este caso:
if(holder_mc._width > 0) { …
Asi siempre me aseguro de que voy a encuadrar algo “tangible".
Febrero 3rd, 2005 at 9:34 am
Hola Don,
no es la primera vez que me comentan algo asÃ, pero no me acostumbro a hacerlo, nunca he tenido el problema que comentas (debe er por eso)
saludos
Febrero 3rd, 2005 at 9:42 am
dondiegote, no es que no te crea, pero comprueba que en ese caso que comentas el preloader no ponga algo asà como
if (Math.round(getBytesLoaded()*100/getBytesTotal())==100)
Es que yo también he visto muchas veces que se usa Math.round, cuando deberÃa ser Math.floor (ó int())
Vamos
Math.round(996*100/1000)=100 //
Febrero 3rd, 2005 at 11:58 am
Eliseo,
int, se desestimó en flash 5 y se sustituyó por Math.round, asi que nos queda que lo correcto serÃa Math.floor ¿no?
saludos
Febrero 3rd, 2005 at 1:28 pm
Hola de nuevo.
Ese error me ha pasado, y ya varias veces, sobre todo en un visor de imágenes donde cargaba muchos jpgs y las probabilidades de que me sucediese eran mayores.
No soy el único, este mismo tema ya se trató en el foro:
http://www.after-hours.org/foro/viewtopic.php?t=1863&highlight=
Y lo que propongo es tan sencillo como lógico, y nunca me ha fallado.
Febrero 3rd, 2005 at 1:33 pm
ah!, eliseo no tengo el Math.round.
Te animo a probarlo con muchos jpgs.