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




 
 
SEGÉDLETEK Effektus-trükk

Kép effektezése Convolution Filter segítségével
  feltöltve: 2007.07.06 | szerző: error404 | olvasva: 5636 alkalommal

 
 

A célunk az, hogy egy un. effektező programot hozzunk létre viszonylag egyszerűen, flash8-ban. Ehhez szükségünk lesz egy Bitmapdata osztályra, valamint egy Convolution (csavarodás) Filterre. A BitmapData osztályról nem irnék, mert arra már készült egy remek segédlet, amit megtekinthetsz ITT. A Convolution Filter arról szól, hogy megkell adnunk egy 2 dimenziós tömböt (min. 3x3), amiben a középső elem maga a pixel amit vizsgálunk, a körülötte lévő elemek pedig a szomszédjai, értékük pedig a hatás mértékét határozzák meg.

Nos, akkor lássunk neki:

Design

1.lépés: A Stage az 600x500as. hozzunk létre egy új MC(MovieClip) (CTRL+F8) keret_mc néven, pipáljuk ki az Export for Actionscript mezőt. Ideintifiler legyen ugyanaz mint a neve.


1.lépés


A létrejött MC-be belépve hozzunk létre egy téglalapot,ami majd a keret lesz, a szine lehet bármilyen tetszés szerint, én a feketét válaszottam(0x000000) . A Properties panelen állítsuk be a következőket:
W(Width):590, H(Height):490, X:295, Y:245.

2.lépés: Az előző eljárással hozzunk létre mégegy MC-t, menu_mc néven, Export for AS itt is legyen bekapcsolva. Az MCbe lépve készítsünk egy 4px-es lekerekítésú téglalapot:W:140, H:175, X:70, Y:87,5. Hozzunk létre egy új Layert, s azon, az ábrán látható módon hozzunk létre 4 gombot (létrehozunk egy szöveget, Convert to Symbol...(F8), majd a Button-ba lépve a Hit képkockán létrehozunk egy nagyobb téglalapot (kb 125x16), majd Instance name-nak rendre beírjuk ugyanazt,amint aminek elneveztük az Objektumot.)


Könyvtárban lévő gombok


3.lépés: Hozzunk létre a fent leírt módon egy text_prot nevű MC-t helyezzünk el benne egy szövegmezőt:W:18,H:18,X:9,Y:9, kapcsoljuk be a "Show Border Around text" opciót, betűtípus: Arial, Méret:12.

ActionScript

4.lépés: Minden akciót, minden függvényt a _root első képkockáján fogunk elhelyezni.

import flash.filters.ConvolutionFilter;
import flash.display.BitmapData;
var szamol:Number = 0;
var kepTolt:MovieClipLoader = new MovieClipLoader();
var figyel:Object = new Object();
var kep_mc:MovieClip = this.createEmptyMovieClip("kep_mc", 1);
var arany:Number;
var oszlopSzam:Number = 3;
var sorSzam = Number=3;
var tomb:Array = [1, 1, 1, 1, 1, 1, 1, 1, 1];
var mod:Number;
var effekt:ConvolutionFilter;
var kepAdat:BitmapData;
//////////////////////////////////////változók deklarálása
this.attachMovie("keret_mc", "keret_mc", 2);
keret_mc._x = 5;
keret_mc._y = 5;
this.attachMovie("menu_mc", "menu_mc", 4);
menu_mc._x = 6;
menu_mc._y = 6;
/////////////////////////////////////egymás fölé másolom a két MC-t a könyvtárból

Beimportálom a szükséges osztályokat, és deklarálom a változókat, hogy a későbbiekben egyszerűbb legyen az élet:)
a _root-ra másolom a Kösnyvtárból a keret_mc-t és a menu_mc-t, erre azért van szükség, hogy a keret a kép feletti szinten(2), a menü pedig a keret feletti szinten (4) legyen.

function meretez() {
   var meretH:Number, meretW:Number;
   arany = kep_mc._width/kep_mc._height;
   if (kep_mc._width>kep_mc._height and kep_mc._width>keret_mc._width) {
     meretW = kep_mc._width;
     kep_mc._width = keret_mc._width;
     kep_mc._height -= (meretW-kep_mc._width)/arany;
   } else if (kep_mc._height>kep_mc._width and kep_mc._height>keret_mc._height) {
     meretH = kep_mc._height;
     kep_mc._height = keret_mc._height;
     kep_mc._width -= (meretH-kep_mc._height)/arany;
   }
   kep_mc._x = 5;
   kep_mc._y = keret_mc._y+keret_mc._height-kep_mc._height;
}
////////////////////////////////////a kép átméretezése

Ennek a függvénynek (meretez) elég nagy a jelentősége, mert ő felelős azért, hogy a képünk mindig beleférjen a keretbe. Az a lényege, hogy ha nagyobb a betöltött kép szélessége, mint hosszúsága ÉS a szélessége nagyobb mint a keret szélessége(nincs sok értelme egy képet nagyítani, főleg ha jpg) ,akkor a meretW változó a kép széességével lesz egyenlő, hogy tudjunk mihez viszonyítani, majd a kép szélességét egyenővé tesszük a keret szélességével, és a magasságból kivonjuk az
( eredeti szélesség-aktuális szélesség) osztva arány-t . A másik esetben ugyanez a helyzet csak cserélődik a szélesség meg a magasság.

kepTolt.addListener(figyel);
figyel.onLoadInit = function() {
/////miután betöltött és inicializálódott a kép...
  kepAdat = new BitmapData(kep_mc._width, kep_mc._height, false, 0x000000);
  meretez();
  kepAdat.draw(kep_mc);
  kep_mc.attachBitmap(kepAdat, 3);
  menu_mc.reset_btn.onRelease = function() {
     kepTolt.unloadClip(kep_mc);
     kep_mc.removeMovieClip();
     _root.createEmptyMovieClip("kep_mc", 1);
     toltes();
  };
};
//////////////////////////////////MovieClip loader....
function toltes() {
  kepTolt.loadClip("betolt.jpg", kep_mc);
}
/////////////////////////////////elkezdem a gyökérben lévő "betolt.jpg" betöltését

A MovieClipLoader és a Bitmapdata osztályra nem térnék ki, mint fentebb is említettem, erre már vannak remek segédletek:
A MovieClipLoader osztály ismertetés
Dinamikus képgaléria és képátmenet by BitmapData

A reset_btn-re írunk egy onRelease függvényt, ami előbb eltávolítja a képet, és a kep_mc-t majd újraindítja az egész folyamatot.

function menuOszt() {
  for (i=0; i<oszlopSzam; i++) {
     for (j=0; j<sorSzam; j++) {
        var mezok = menu_mc.bevitel.attachMovie("text_prot", "text"+szamol, 10+szamol);
        mezok._x = 25+i*30;
        mezok._y = 5+j*30;
        szamol++;
     }
   }
}
////////////////////////elhelyezek a menu_mc.bevitel-ben annyi text mezot, ahany sor es oszlop van
function menuCrea() {
  menu_mc.createEmptyMovieClip("bevitel", 1);
  menu_mc.bevitel._x = 5;
  menu_mc.bevitel._y = 5;
  menuOszt();
  toltes();
}
////////////////////////////////a textek előkészítése

A menuCrea függvény létrehoz egy bevitel nevű MC-t a menu_mcben, pozícionálja, majd meghívja a menuOszt függvényt. Azért jobb, ha egy külön MC-be rakjuk a texteket, mert ha esetleg tovább akarjuk fejleszteni (változtatható sor/oszlop szám) , kevesebb lesz a munka a textek törlésével.
A menuOszt függvény egyszerűen meghatározott példányszámban, és meghatározott helyre kimásolja a _root-ba a Könyvtárból a "text_prot" MC-t, amit ugye elérhetővé tettünk az AS számára.

menu_mc.ok_btn.onRelease = function() {
  effektProg(1);
};
//////////////////////////meghivom az effektProg függvényt, ezzel rárakom a BitmapData-ra a torzítást
menu_mc.pelda1_btn.onRelease = function() {
  this._parent._parent.tomb = [5, 0, 0, 0, 0, -3, 0, 2, -3];
  effektProg(2);
};
menu_mc.pelda2_btn.onRelease = function() {
  this._parent._parent.tomb = [1, 1, 1, 1, 1, 1, 1, 1, 1];
  effektProg(2);
};
//////////////ugyanaz mint az ok_btn onRelease függvénye csak itt előre meghatározom, hogy mi //////////////legyen az a tömb, amiből a filter az adatokat veszi

A menu_mc-n belül lévő gomokhoz rendelek onRelease függvényeket,amelyek ugyanazt a függvényt hívják meg csak más paraméterrel. Lássuk :

function effektProg(azon) {
  mod = 0;
  for (i=szamol-1; i>=0; i--) {
  //végigmegy a kiosztott szövegmezőkön
    if (azon == 1) {
    ///ha az ok_btn lett megnyomva....
      if (isNaN(menu_mc.bevitel["text"+i].ertek) == true) {
      //ha nincs semmi a szövegmezőbe írva
        tomb[i] = 0;
        //akkor töltse fel a szövegmezőt és a tömböt egyaránt 0 értékkel
        menu_mc.bevitel["text"+i].ertek = tomb[i];
        //visszaírom a tomb értékét a szövegmezőbe
      } else {
        tomb[i] = parseFloat(menu_mc.bevitel["text"+i].ertek);
        //különben meg csak egyszerűen töltse fel a tombot az aktuális szövegmező értékével
      }
    }
    mod += tomb[i];
  }
  effekt = new ConvolutionFilter(oszlopSzam, sorSzam, tomb, mod, 100);
  kepAdat.applyFilter(kepAdat, kepAdat.rectangle, new Point(0, 0), effekt);
}

Eme függvény pedig az egész lelke lenne. Végigmegy a szövegmezőkön, majd az adatokat egy tömbbe rendezi. Ezt a tömböt pedig felhasználja a filter elkészítésére.ha esetleg nem lenne semmi írva az egyik szövegmezőbe, akkor azért hogy ne okozzon fennakadást, 0-val helyettesíti.

menuCrea();
//és a motor beindul....

A végén ezzel az egy hívással elindítjuk az egészet.

 

A Convolution Filter deklarációja:
Most csak azokat irom ide le, amik szervesen a filter részei(BitmapData osztályt stb-t nem).

import flash.filters.ConvolutionFilter;
var oszlopSzam:Number = 3;
var sorSzam = Number=3;
var tomb:Array = [1, 1, 1, 1, 1, 1, 1, 1, 1];
var mod:Number;
var br:Number=100;
var effekt:ConvolutionFilter;

effekt = new ConvolutionFilter(oszlopSzam, sorSzam, tomb, mod, br);

Ami magyarázatra szorul:
mod: a kontrasztot növelhetjük vele ha túl sötét lenne a kép (optimális:a tomb elemeinek az összege)
br: még világosíthatjuk a képünket ha szükség van rá, ez a Birghtness jellemzőt növeli.

Példaprogram:

Remélem, hogy mindenkinek átlátható és érthető ez a kis segédlet, továbbá, hogy valakinek segít is valamiben:)

 
 
 
 

© 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 >>> : .. .