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ů.

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

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

** Gary Kildall pochopil, že levné výpočetní čipy mohou posloužit jako univerzální počítače pro všechny ** Připravil pro ně proto první operační systém ** Později mu systém vyfoukl Microsoft a nazval ho MS DOS

23.  4.  2017 | Pavel Tronner | 53

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

** Už je to tady, lidé přestávají chápat počítače ** Systémy neuronových sítí začínají pracovat tak, že ani jejich tvůrci přesně neví, co se uvnitř děje ** Do budoucna to může být závažný problém

24.  4.  2017 | Jakub Čížek | 112

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

** Slavný osmibitový počítač Sinclair ZX Spectrum byl uveden právě před 35 lety ** Připomeňte si tento průkopnický počítač v tematických článcích ** Podívejte se, jak funguje dnes

23.  4.  2017 | Pavel Tronner | 13

Správný počítač má alespoň dva monitory. Anebo je to jinak?

Správný počítač má alespoň dva monitory. Anebo je to jinak?

** David si nedokáže představit práci bez dvou a více monitorů ** Kubovi naopak stačí jeden a ve více displejích se ztrácí ** Jaký přístup je lepší?

23.  4.  2017 | Jakub Čížek | 59

Český Google Překladač začal používat umělou inteligenci. Konec „drahoušků zákazníků“

Český Google Překladač začal používat umělou inteligenci. Konec „drahoušků zákazníků“

** Google ve svém překladači roky používal statistickou technologii ** Nyní zavádí strojové učení a neuronové sítě ** Rozdíl by měl být zvláště na větších textech patrný už nyní

20.  4.  2017 | Jakub Čížek | 31

Brno otevřelo největší českou dílnu pro bastlíře. Kladívka, vrtačky, 3D tiskárny, laserové řezačky. Je tu vše

Brno otevřelo největší českou dílnu pro bastlíře. Kladívka, vrtačky, 3D tiskárny, laserové řezačky. Je tu vše

** Máte nápad, ale chybí vám stroje a pořádná dílna? ** Chcete postavit ptačí budku, nebo krabičku pro Arduino? ** Brno otevřelo svůj FabLab – laboratoř pro bastlíře

19.  4.  2017 | Jakub Čížek | 31


Aktuální číslo časopisu Computer

První test AMD Ryzen

Velké testy: 22 powerbank a 8 bezdrátových setů

Radíme s koupí Wi-Fi routeru

Co dokáží inteligentní domy?