Umíme ve Flashi – 2. díl – novinky verze 8, pokračování

Dnes se v první části podíváme na zajímavý filtr pro deformaci objektů podle barevné předlohy. Ve druhé části se zmíníme o neméně zajímavých blend modech, které umožňují nastavení různých druhů vzájemného barevného prolínání objektů.
Umíme ve Flashi – 2. díl – novinky verze 8, pokračování

DisplacementMapFilter

Nový filtr, který nám umožňuje vytvořit velmi zajímavé deformace objektů v závislosti na barevné předloze. Abychom mohli filtr použít., musíme mít, jak již bylo zmíněno, barevnou předlohu, podle které budeme výsledný objekt deformovat. Předloha musí mít formát bitmapového objektu. Proto, pokud chceme použít jako předlohu vektorový objekt, musíme jej před použitím překreslit do jiného, který již bude bitmapový.

Co se funkcí týče, nejedná se o nijak složitou proceduru, samotné překreslení objektu do bitmapy provedeme příkazem:

cilovyObjekt.draw(zrojovyObjekt);

Použijeme metodu „draw“ pro překreslení objektu do bitmapy. Nebudeme se zde podrobněji rozepisovat o dalších parametrech této metody, bylo by to na samostatný článek a my zde chceme tvořit a ne jen číst. Proto si řekneme, že tato metoda má několik parametrů, které se mohou využít při transformaci původního objektu do nového bitmapového, jako je například změna rozměrů, barev, vyhlazení, prolínání a oříznutí.

Parametry filtru

Konstruktor filtru samozřejmě obsahuje několik parametrů, pomocí kterých máme možnost ovlivnit výsledný efekt:

  • mapBitmap – zdrojový bitmapový objekt, který slouží jako předloha pro deformaci objektu
  • mapPoint – určení odsazení výsledného deformovaného objektu od originálu, používá se objekt „flash.geom.Point“
  • componentX – hodnota, určující na který kanál předlohy bude reagovat deformace v x-ovém směru. Možné jsou hodnoty 1-červená, 2-zelená, 4-modrá, 8-průhlednost
  • componentY – obdoba horního parametru, pouze se jedná o deformaci v y-ovém směru.
  • scaleX – hodnota, kterou se násobí výsledný posuv zjištěný z předlohy v x-ovém směru
  • scaleY – stejně jako v předchozím případě, pouze v y-ovém směru
  • mode – mód filtru, zde určíme, jak se zobrazuje výsledek na krajích zdrojového objektu
  • pokud je „mode“ nastaveno na „color“, můžeme pomocí parametrů „color“ a „alpha“ určit barvu nebo průhlednost krajních částí, kde již není dispozici zdrojový objekt.

Vytvoření efektu

Abychom si mohli efekt vyzkoušet, otevřeme si nový dokument a připravíme si některé objekty. Dejme tomu, že budeme chtít deformovat textové pole. K tomu si připravíme MC, do kterého nakreslíme obdélník, jehož výplň bude barvy šedé 50% (#808080) a velikost bude odpovídat velikosti hlavní scény.

Hodnota šedé je 50%, protože na ní nebude reagovat výsledný filtr. Do MC ještě nakreslíme kruh, kterému nastavíme přechodovou radiální výplň, kde jedna barva(krajní) bude již zmíněná šedá a druhou barvou bude například zelená. Kruh převedeme na MC a na panelu akcí mu přiřadíme následující akce:

on (press) {
  this.startDrag();
}
on (release) {
  stopDrag();
}

Celý objekt s šedým pozadím a kruhem použijeme jako předlohu, pro deformaci textu. Protože budeme chtít ale deformovat pouze část, kde budeme přetahovat kruh, musíme vytvořit ono šedé pozadí a stejně tak vytvořit šedé okraje vytvořeného kruhu pro plynulý přechod výsledného efektu.

Výsledný MC s pozadím a kruhem může vypadat takto:

Klepněte pro větší obrázek

Dále si vytvoříme MC, do kterého napíšeme ukázkový text. Objekt s textem vložíme na hlavní scénu a instanci pojmenujeme „zdroj“. Dále na scénu vložíme druhý objekt se zeleným kruhem a šedým pozadím, který pojmenujeme „objektFiltr“.

Otevřeme si panel akcí prvního snímku osy a vložíme do něj následující kód:

Xbarva = 1;
Ybarva = 2;
Xsmer = 75;
Ysmer = 75;
Mode = "color";
offset = new flash.geom.Point(0, 0);
var bmp = new flash.display.BitmapData(zdroj._width, zdroj._height);
var displaceFilter = new flash.filters.DisplacementMapFilter(bmp, offset, Xbarva, Ybarva, Xsmer, Xsmer, Mode);
var poleFiltru:Array = new Array();
poleFiltru.push(displaceFilter);
zdroj.filters = poleFiltru;
onMouseMove = function () {
 bmp.draw(objektFiltr);
 var filtr:Array = zdroj.filters;
 filtr[0].mapBitmap = bmp;
 zdroj.filters = filtr;
};

Všimneme si objektu „bmp“, který nám slouží jako bitmapový objekt, do kterého překreslujeme aktuální stav MC „objektFiltr“. Pak už jen použijeme událost pohybu myši, při které aktualizujeme nastavení filtru pro objekt s textem „zdroj“.

Výsledek si můžete prohlédnout zde.
Zdrojový soubor ukázky ke stažení zde.

blendMode

Mezi další zajímavosti jistě patří prolínání objektů. Tato vlastnost ovlivňuje příslušný klip a jeho zobrazení v závislosti na podkladu. Výborné je, že lze této vlastnosti využít i pro přehrávané videa ve flv formátu.

Velmi jednoduchou ukázku možností filtrů si nyní ukážeme. Otevřeme si nový dokument a na scénu vložíme tři obrázky, které převedeme na MC a pojmenujeme je postupně „obr1“, „obr2“ a „obr3“.

Každému objektu pak můžeme přiřadit následující akce:

on (press) {
  this.startDrag();
}
on (release) {
  stopDrag();
}

Jak jsem již uvedl, budeme testovat vlastnost blendMode. Její hodnoty mohou být od 1 do 14 a každá představuje určitý druh reakce na pozadí. Abychom si udělali lepší představu, otevřeme si panel akcí a prvnímu snímku hlavní scény přiřadíme tento kód:

import mx.controls.ComboBox;
this.createEmptyMovieClip("ovladani", this.getNextHighestDepth());
this.createClassObject(ComboBox, "komboObj", this.getNextHighestDepth());
komboObj._x = 10;
komboObj._y = 10;
komboObj.addItem("obr1");
komboObj.addItem("obr2");
komboObj.addItem("obr3");
ovladani.createClassObject(ComboBox, "kombo", this.getNextHighestDepth());
ovladani.kombo._x = 180;
ovladani.kombo._y = 10;
ovladani.kombo.addItem("normal", 1);
ovladani.kombo.addItem("layer", 2);
ovladani.kombo.addItem("multiply", 3);
ovladani.kombo.addItem("screen", 4);
ovladani.kombo.addItem("lighten", 5);
ovladani.kombo.addItem("darken", 6);
ovladani.kombo.addItem("difference", 7);
ovladani.kombo.addItem("add", 8);
ovladani.kombo.addItem("substract", 9);
ovladani.kombo.addItem("invert", 10);
ovladani.kombo.addItem("aplha", 11);
ovladani.kombo.addItem("erase", 12);
ovladani.kombo.addItem("overlay", 13);
ovladani.kombo.addItem("hardlight", 14);
blend = new Object();
blend.change = function(evt) {
 eval(komboObj.selectedItem.label).blendMode = evt.target.selectedItem.data;
};
ovladani.kombo.addEventListener("change", blend);
for (i=1; i<4; i++) {
 eval("obr"+i).blendMode = 1;
}

V něm vytvoříme dva komboboxy, pomocí kterých můžeme měnit zmiňovanou vlastnost blendMode jednotlivých objektů. Abychom ale komboboxy mohli do scény importovat, musíme příslušnou komponentu „ComboBox“ přetáhnout do knihovny našeho dokumentu.

Nyní už jen stačí otestovat výsledný soubor a vyzkoušet si různé nastavení vlastnosti „blendMode“.

Ukázku si můžete prohlédnout zde.
Zdrojový soubor je k dispozici zde.

Témata článku: Software, Programování

1 komentář

Nejnovější komentáře

  • gully, gully 17. 10. 2005 2:28:04
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
Určitě si přečtěte

To tu ještě nebylo. Specialisté ukázali, že zavirované mohou být i titulky SRT

To tu ještě nebylo. Specialisté ukázali, že zavirované mohou být i titulky SRT

** Stáhnete si film a titulky třeba z OpenSubtitles.org ** A osud vás za ten warez záhy potrestá ** Specialisté totiž ukázali, že i v titulcích může být schovaný virus

24.  5.  2017 | Jakub Čížek | 58

WannaCry se neměl vůbec rozšířit. Stačilo, abychom používali Windows Update

WannaCry se neměl vůbec rozšířit. Stačilo, abychom používali Windows Update

** WannaCry se masivně rozšířil kvůli zranitelnosti ve Windows ** Ta mu umožnila, aby se pokusil sám napadnout další počítače ** Jenže ta chyba už je dva měsíce opravená!

22.  5.  2017 | Jakub Čížek | 97


Aktuální číslo časopisu Computer

Bojujeme proti Fake News

Dva velké testy: fotoaparáty a NASy

Co musíte vědět o změně evropského roamingu

Radíme s výběrem základní desky