Kép pixelekre bontása BitmapData osztály segítségével
feltöltve: 2007.01.29 | szerző: error404 | olvasva: 5478 alkalommal
Mostani segédletben egy BitmapData osztállyal készített effektet fogunk létrehozni. Nagyon egyszerű elven működik, a kicsinyítésen és a nagyításon alapul, de erről majd később.Szükségünk lesz egy BitmapData osztályra , MovieClipLoader osztályra, valamint egy Matrix objektumra. A BitmapData, és a MovieClipLoader osztályt nem részletezném, mert mind a kettő megtalálható a segédletek között, de ezt majd az aktuális résznél újra leírom.
1.lépés: Hozzunk létre két NumericStepper Komponenst a színpadon, ezekkel a paraméterekkel:
2.lépés: Hozzunk létre egy Button Komponenst az alábbi paraméterekkel:
ActionScript
3.lépés: Hozzunk létre egy Layert, nevezzük el "AS"-nek, majd tegyük a legfelső helyre. Ezen a layeren az első képkockán helyeezük el elsőnek a következő kódrészletet:
import flash.display.BitmapData;
import flash.geom.Matrix;
var kepTolt:MovieClipLoader = new MovieClipLoader();
var figyel:Object = new Object();
var figyelNum:Object = new Object();
var kep_mc:MovieClip = this.createEmptyMovieClip("kep_mc", 1);
var pxMeret:Number = 100;
var sebesseg:Number = seb_num.value=10;//(miliseconds)
var szamol:Number = 0; ////////////a változók deklarálása
Beimportáljuk a BitmapData és a Matrix osztályt, majd deklarálom a kellő változókat.
Ha ezzel megvagyunk, írjuk be a deklaráció után a következő függvényt, ami majd az egész alapjául fog szolgálni:
function pixel() {
var egyPx = new BitmapData(kep_mc._width/pxMeret, kep_mc._height/pxMeret); /////////////////létrehozok 1(általunk meghatározott méretű)pixelnyi Bitmapdata objektumot
var mod = new Matrix(); /////////////////létrehozok egy mod nevű Mátrixot, ami majd a kép méretezéséért lesz felelős
mod.scale(1/pxMeret, 1/pxMeret); /////////////////a mátrix zsugorítása(Matrix.scale(sx,sy))
egyPx.draw(kep_mc, mod); /////////////////a kep_mc-t bitképpé alakítom, és a mod nevű mátrix szerint transformálom
pixel_mc.attachBitmap(egyPx, 1); /////////////////a pixel_mc MC-hez hozzárendelem az egyPx nevű BitmapData osztályt
pixel_mc._width = kep_mc._width;
pixel_mc._height = kep_mc._height; ////////////////a pixel_mc-t kihúzom akkora méretűre mint az alap kép
pxMeret /= 1.1; ///////////minden alkalommal csökkentem a fentebb deklarált pixel méretét(var pxMeret:Number=100)
pxMeret_num.value = pxMeret; ///////////frissítem a pxMeret_num értékét
if (pxMeret<=1) { ///////////ha a pxMeret értéke 1 alá esik, akkor megjeleníti újra az indító gombot, a pxMeret-et reseteli, ///////////és törli az időzítő függvényt.
indit_btn._visible = true;
pxMeret=pxMeretTemp
clearInterval(ido);
}
}
Mivel a pixel() függvény soronként magyarázva van, úgy érzem, jobb lesz, ha egy példán keresztül mutatom be az effektet:
Van egy 400*300-as képünk, amelynek betölt.jpg a neve. Létrehozunk egy 4*3-as Bitmapdata osztályt. "A bitmapdatát úgy képzelhetjük el, mint egy nagy táblázatot, aminek minden cellájában egy szín helyezkedik el." Reider
Ezután deklarálunk egy Mátrixot, mely majd a transzformáció alapja lesz. a draw() függvénnyel a kep_mc-t bitképadattá alakítjuk, majd (még a függvényen belül) ráhúzzuk a mod nevű traszformált Matrix-ot , ami 1/pxmeret (az első körben a pxMeret = 100, azaz a kép magasságát és szélességét a századára csökkentjük, kapunk egy 4*3-as képet). Majd fogjuk a 4*3as képünket, és felnagyítjuk az eredeti méretre, ami a pixelek növekedését is jelenti, most újra 100 hosszúságú a pixelünk, és 4*3 db van belőle. Ezekeután újraindul a folyamat, csak a pxmeret-et folyamatosan csökkentsük, így egyre több pixel fér majd el a felnagyított képen, ami eredményéül az eredeti képet kapjuk egyszercsak.
A következő képen az effekt 1. lépésének az eredményét láthatjuk:
FONTOS! a fenti képen a "pixel" kifejezés, nem a pxMeret-et jelenti, hanem az alap pixel méretet (1*1).
4.lépés: Nos, a nehezén túlvagyunk, nincs más dolgunk, mint megírni a kép lekezelő függvényt, ami azért lesz felelős, hogy végrehajtson utasításokat, ha betöltött a képünk. Ezen utasítás a értékét használjam
figyel.onLoadInit = function() { /////miután betöltött és inicializálódott a kép...
figyelNum.change = function() {
sebesseg = seb_num.value;
pxMeret=pxMeret_num.value=pxMeretTemp
clearInterval(ido);
ido = setInterval(_root, "pixel", sebesseg);
};
pixel();
ido = setInterval(_root, "pixel", seb_num.value);
}; //////////////////////////////////MovieClip loader....
function toltes() {
kepTolt.loadClip("betolt.jpg", kep_mc);
} Ehhez annyit fűznék hozzá, hogy ha a figyelNum változást vesz észre a seb_num nevű NumbericStepper Komponens értékében, akkor újraindítja az egészet az új értékekkel.
5.lépés: Végül gépeljük be az alábbi kódot, ami felelős lesz azért, hogy az indit_btn megnyomása után meghívjal a kezd() függvényt, amiben az érdekes a dispose(), ami kiüríti a memória azon részét, ahol a bizonyos BitmapData osztályt tároltuk. Az értékeket az eredeti pozícióba helyezi.
function kezd() {
pixel_mc.removeMovieClip();
var pixel_mc:MovieClip = this.createEmptyMovieClip("pixel_mc", 2);
pxMeretTemp=pxMeret
pxMeret = pxMeret_num.value;
egyPx.dispose(); ///////////a kép kiürítése a memóriából
szamol = 0;
toltes();
}
indit_btn.onRelease = function() {
kezd();
this._visible = false;
};
kepTolt.addListener(figyel);
seb_num.addEventListener("change", figyelNum);
pxMeret_num.value = pxMeret; ,