Pixelnyújtás

A pixelnyújtás során folyamatosan rajzolunk ki egy adott képet, egyszerre egy-egy oszlop képpontjait, ráadásul a kép széléig megnyújtva azokat:

(Az animáció egy kattintással újraindítható!)

A feladat természetesen tetszõleges képpel is elvégezhetõ, de ha szeretnénk, a példában felhasznált fotót letölthetjük innen. (© Fotó: Kiss László)|Hozzunk létre egy új Flash dokumentumot: a színpad mérete 320×240 képpont, a képkocka-sebesség 30 fps legyen. A File > Import > Import to Library... menüpont segítségével töltsük be szimbólumkönyvtárunkba a megjeleníteni kívánt képet. Nyissuk meg a könyvtárat, majd a képfájl felett kattintsunk az egér jobb gombjával, és a megjelenõ helyi menübõl válasszuk ki a Properties... (tulajdonságok) tételt. A megnyitott párbeszédablakban kattintsunk az Advanced (haladó) gombra, hogy az ablak felfedje a képfájl speciális beállításait is.

|A kép tömörítését tetszés szerintire állíthatjuk, azonban a megfelelõ eredmény elérése érdekében célszerû a fotót JPEG formátumba, legalább 80%-os minõségben tömörítenünk. A kapcsolódásra vonatkozó (Linkage) rész alatt keressük meg az azonosító (Identifier) mezõt, majd gépeljük be ide a "rozsa" szót. Ennek segítségével hivatkozhatunk majd a képre programkódunkból. Gyõzõdjünk meg róla, hogy az Export for ActionScript jelölõ be legyen állítva, majd nyugtázzuk módosításainkat az OK gombra kattintva.|Kattintsunk egyetlen rétegünk elsõ képkockájába, majd nyissuk meg a cselekményszerkesztõt. Programunkban a bevezetõben is említett BitmapData objektum mellett a Flash beépített Rectangle (téglalap) objektumára is szükségünk lesz, így az elsõ lépés a megfelelõ osztályok importálása:

import flash.display.BitmapData;
import flash.geom.Rectangle;
|Hozzunk létre egy "kep1" nevû BitmapData objektumot úgy, hogy grafikai tartalomként betöltjük a szimbólumkönyvtárban található, és a "rozsa" azonosítóval ellátott képet. Ebbõl az információból fog táplálkozni megjelenítõ algoritmusunk. Hozzunk létre egy "kep2" nevû objektumot is, amely felveszi a kép méretét, nem átlátszó, kitöltõszíne pedig fehér (0x00FFFFFF). Ezt követõen készítsünk futási idõben egy üres, "kep_mc" példánynévvel ellátott filmklipet, majd kapcsoljuk hozzá a "kep1" objektum grafikai tartalmát. Fontos megjegyeznünk, hogy a BitmapData objektum pusztán egy tároló, így a megjelenítéshez egy filmklipet is létre kell hoznunk. Programkódunk most a következõképpen néz ki:

import flash.display.BitmapData;
import flash.geom.Rectangle;

var kep1:BitmapData = BitmapData.loadBitmap("rozsa");
var kep2:BitmapData = new BitmapData(320, 240, false, 0x00FFFFFF);
_root.createEmptyMovieClip("kep_mc", _root.getNextHighestDepth());
kep_mc.attachBitmap(kep1, this.getNextHighestDepth());

Futtatáskor azt tapasztaljuk, hogy megjelenik az animáció alapjául szolgáló kép.

|Az utolsó sorban cseréljük ki a "kep1" hivatkozást "kep2"-re, hiszen filmklipünknek a pixelnyújtásra használt objektum tartalmát kell majd megjelenítenie. Ezt követõen írjuk meg algoritmusunkat, amely viszonylag egyszerû: minden cikluslépésben olvassuk le a soron következõ oszlop (n) pixeleinek színét a "kep1" objektumról, majd ezzel a színnel húzzunk egy a kép széléig tartó, egy képpont magas téglalapot a "kep2" objektumra. A lépéseket addig ismételjük, amíg el nem érjük a kép szélét:

n = 0;
_root.onEnterFrame = function () {
if (n < 320) { for (i = 0; i < 240; i++) { kep2.fillRect(new Rectangle(n, i, 320 - n, 1), kep1.getPixel(n, i));
}
n++;
}
}
|Annak érdekében, hogy animációnk újraindítható legyen, szúrjunk be még egy eseménykezelõ függvényt is, amely visszaállítja nullára az aktuális oszlopszámot. Teljes programkódunk tehát így néz ki:

import flash.display.BitmapData;
import flash.geom.Rectangle;

var kep1:BitmapData = BitmapData.loadBitmap("rozsa");
var kep2:BitmapData = new BitmapData(320, 240, false, 0x00FFFFFF);
_root.createEmptyMovieClip("kep_mc", _root.getNextHighestDepth());
kep_mc.attachBitmap(kep2, this.getNextHighestDepth());
n = 0;
_root.onEnterFrame = function () {
if (n < 320) { for (i = 0; i < 240; i++) { kep2.fillRect(new Rectangle(n, i, 320 - n, 1), kep1.getPixel(n, i));
}
n++;
}
}
_root.onMouseDown = function () { n = 0; }

Mentsük el eddigi munkánkat, és gyönyörködjünk a végeredményben!

Jó munkát!

Figyelem! A tartalom legalább 2 éve nem frissült! Előfordulhat, hogy a képek nem megfelelően jelennek meg.