reklama

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
reklama
Určitě si přečtěte

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 104

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 36

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 74

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

** V notebooku s cenou nad 20 tisíc nesmí chybět kvalitní displej a rychlé úložiště ** Za dalších deset tisíc můžete dostat navíc styl nebo výkonnější komponenty ** Vybírat můžete z různých velikostí i konstrukcí

8.  12.  2016 | Stanislav Janů | 85


reklama