. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK ActionScript

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; ,

Végül egy példa :

 
 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .