Utilidades AS 2.0 (Suavizar imagen)
Autor: Carles Araguz López, Publicat: 15:28:05, 31/08/2007
Categories: Programació, Tricks.
___El mundo de Flash y de la programación ActionScript está en auge. No es nada nuevo, pero cada vez son más, las posibilidades que este programa nos ofrece. Después del lanzamiento de ActionScript 3.0 implementado en Flash 9 y CS3, son muchos los que han dado el paso a la nueva versión. Posiblemente sea ese mi siguiente paso, pero de momento sigo desarrollando proyectos Flash con la versión 8 y ActionScript 2.0. Lo último que he descubierto es bastante interesante, y lo publico aquí porque no he encontrado ningún blog ni foro que tratara este problema en concreto.
___Muchos utilizaréis imágenes .jpg .png o .gif en vuestros trabajos, al igual que yo. Pero cuando no cargáis estas imágenes desde la biblioteca, pueden surgir problemas de visualización, sobretodo si hacemos escalados, rotamos la imagen, o en definitiva la deformamos. Vemos como la imagen no se suaviza, y queda fracturada. Cuando esto sucedía, teniendo la imagen en la biblioteca, no había más que seleccionar “Permitir suavizado” en las Propiedades de la imagen importada. Pero desarrollando una web esta semana, tuve que plantearme lo siguiente: “ ¿Cómo podemos solventar este problema si cargamos la imagen mediante LoadMovie o LoadClip?”, ya que era el caso en el que me encontraba.
Regiré Google y pregunté en uno de los mejores foros de Flash, y al final di con la solución. Se trata de la clase BitmapData. Yo no la conocía, pero gracias a la ayuda de Cay (en After Hours) supe en qué podía ayudarme. La clase BitmapData permite cargar las imágenes de una forma distinta a un simple LoadMovie de manera que podemos trabajar con mapas de bits y realizar distintos efectos sobre éstos, mediante filtros de flash. Veamos, pues, cómo solucionar el problema de suavizado de imagen.
___Este problema se puede solucionar simplemente cargando la imagen mediante BitmapData. Lo que haremos será cargar la imagen en un MovieClip (MC) con LoadMovie o LoadClip (yo uso LoadMovie). Una vez nos hayamos cerciorado de que la imagen está cargada al cien por cien (mediante un simple Listener o Preloader), aplicamos la clase BitmapData tal que así:
var imgBmp:BitmapData = new BitmapData(<ancho imagen>,<alto imagen>);
imgBmp.draw(<el MC donde tenemos cargada la imagen>);
<el mismo MC>.attachBitmap(imgBmp, <profundidad>, "Auto", true);
Cómo veis, lo primero que hacemos es definir el ojecto BitmapData imgBmp. Luego, con draw(), “pintamos” ese objeto con el mapa de bits que hemos cargado (instanciado somo MC). Una vez tenemos esto, sólo debemos attachar el mapa de bits en el MC donde tenemos la imagen. Es en el attachBitmap() dónde le especificamos explícitamente que suavice la imagen:
attachBitmap(bmp:BitmapData, depth:Number, [pixelSnapping:String], [smoothing:Boolean])
El parámetro booleano smoothing es el que indica si hay o no suavizado.
___Un ejemplo clarificador:
Espero que os haya servido de ayuda. Podéis descargaros los archivos aquí.
Documentación:
Livedocs: Las clases Bitmap y BitmapData
Livedocs: Creación de mapas de bits con la clase BitmapData
Livedocs: attachBitmap
Introducción a la API de imagen de Flash 8, por Guy Watson.
Agefir a
Menéame, a
del.icio.us o
envia'l per mail a un amic
Menéame, a
del.icio.us o
envia'l per mail a un amic
COMENTARIS
miKi mOrenu (17:06:58, 02/09/2007) WWW
Como siempre deleitando con tus tutoriales. Quería darte las gracias por las instrucciones para pasar una imagen a modo GameBoyCamera, me van de perlas. Te quería preguntar si me dejarías poner ese pequeño tutorial en un post para que todo el mundo lo pudiera ver paso a paso.
PD: los monólogos se acabaron:S, haber si el año que viene hay más suerte.
Como siempre deleitando con tus tutoriales. Quería darte las gracias por las instrucciones para pasar una imagen a modo GameBoyCamera, me van de perlas. Te quería preguntar si me dejarías poner ese pequeño tutorial en un post para que todo el mundo lo pudiera ver paso a paso.
PD: los monólogos se acabaron:S, haber si el año que viene hay más suerte.
Nico (15:51:22 16/07/2009) WWW
tengo un ligero problema.... yo lo que importo es un PNG con transparencia... y tanto en este como en otros ejemplos que encontré no me mantiene esa transparencia sino que me agrega un fondo blanco!
tenes idea como solucionar eso???
gracias!!
tengo un ligero problema.... yo lo que importo es un PNG con transparencia... y tanto en este como en otros ejemplos que encontré no me mantiene esa transparencia sino que me agrega un fondo blanco!
tenes idea como solucionar eso???
gracias!!
Nico (16:19:56 16/07/2009) WWW
LISTO!!!
era bastaaante simple, les copio el cofigo para imagenes PNG con transparencia:
Espero que les sirva!!
saludos
LISTO!!!
era bastaaante simple, les copio el cofigo para imagenes PNG con transparencia:
function loadBitmapSmoothed(url:String, target:MovieClip) {
var bmc:MovieClip = target.createEmptyMovieClip("bmc",target.getNextHighestDepth());
var listener: Object = new Object();
listener.tmc = target;
listener.onLoadInit = function(mc:MovieClip) {
mc._visible = false;
var bitmap:BitmapData = new BitmapData(mc._width, mc._height, true, 0x000000);
this.tmc.attachBitmap(bitmap, this.tmc.getNextHighestDepth(),"auto", true);
bitmap.draw(mc);
};
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(listener);
loader.loadClip(url, bmc);
}
loadBitmapSmoothed("flash.png", mi_mc);
Espero que les sirva!!
saludos
Oliver (19:04:20 04/08/2009) WWW
Estube buscando mucho una forma sencilla de cargar una imagen con suvizado mediante loadmovie, y tu función lo permite.
Muchas gracias!
Estube buscando mucho una forma sencilla de cargar una imagen con suvizado mediante loadmovie, y tu función lo permite.
Muchas gracias!
jesus arenas (20:31:57 09/09/2009)
Excelente tutorial, me ha servido de mucho, pero aun tengo un problema que no he podido resolver, ¿Como hago para que las imagenes sean cargadas en el centro del mc y no en la parte superior izquierda?
Excelente tutorial, me ha servido de mucho, pero aun tengo un problema que no he podido resolver, ¿Como hago para que las imagenes sean cargadas en el centro del mc y no en la parte superior izquierda?
Lîtus (21:34:44 09/09/2009) WWW
Hola Jesús,
Creo que el método attackBitmap no permite posicionar la imagen. Lo que puede que te sirva, en tu caso, será cargar la imagen en un contenedor y mover el contenedor (hacer justamente lo mismo pero no en tu MC sino en un MC auxiliar, para entendernos...)
Si no recuerdo mal, puedes cargar el BitmapData en cualquier MC, ya que ya contiene la información por sí mismo, así que en vez de hacer:
Haz lo siguiente:
Lo digo de cabeza y ahora mismo no lo he probado. Ya nos dirás si lo consigues.
Saludos,
Lîtus
Hola Jesús,
Creo que el método attackBitmap no permite posicionar la imagen. Lo que puede que te sirva, en tu caso, será cargar la imagen en un contenedor y mover el contenedor (hacer justamente lo mismo pero no en tu MC sino en un MC auxiliar, para entendernos...)
Si no recuerdo mal, puedes cargar el BitmapData en cualquier MC, ya que ya contiene la información por sí mismo, así que en vez de hacer:
var imgBmp:BitmapData = new BitmapData(<ancho imagen>,<alto imagen>);
imgBmp.draw(<el MC donde tenemos cargada la imagen>);
<el mismo MC>.attachBitmap(imgBmp, <profundidad>, "Auto", true);
Haz lo siguiente:
var imgBmp:BitmapData = new BitmapData(<ancho imagen>,<alto imagen>);
imgBmp.draw(<el MC donde tenemos cargada la imagen>);
<el mismo MC>.createEmptyMovieClip("contenedor", ....
<el mismo MC>.contenedor.attachBitmap(imgBmp, <profundidad>, "Auto", true);
<el mismo MC>.contenedor.x = ...
<el mismo MC>.contenedor.y = ...
Lo digo de cabeza y ahora mismo no lo he probado. Ya nos dirás si lo consigues.
Saludos,
Lîtus
Digue's la teva
Tots els comentaris estan moderats per l'administrador del Blog
Última visita:
00:15:05 03/09/2010
00:15:05 03/09/2010
