Umíme ve Flashi - 31. díl - vlastní komponenta

V dnešním díle si vytvoříme jednoduchou komponentu, která bude zobrazovat barvy z barevné paletky.
Umíme ve Flashi - 31. díl - vlastní komponenta

Komponenty

Panel komponent jistě známe všichni. Časem ale dospějeme do situace, kdy zjistíme, že připravené komponenty nestačí a přitom bychom nějakou další komponentu jistě využili. Pak není nic jednoduššího, než se pustit do tvorby komponenty vlastní. A že to není zas tak složitá práce, to si ukážeme v dnešním díle.

Úkolem bude vytvořit komponentu, která bude umožňovat vybrat barvu ze zobrazené barevné paletky. Prakticky se bude jednat o klasický Movie Clip s tlačítkem, které po kliknutí zobrazí objekt s barevnou paletou, kde budeme pomocí myši vybírat potřebné barvy. To, že z daného MC vytvoříme komponentu, je záležitost několika snadných kroků.

Tvorba komponenty

V novém flashovém dokumentu si připravíme prázdný MC, který pojmenujeme „komponenta“. Abychom měli práci snazší, nebudeme barevnou paletku generovat pomocí AS, ale vložíme jí jako rastrový obrázek. Zkopírujeme si tedy nějakou barevnou paletku, třeba přímo z flashového prostředí, upravíme jí tak, aby nezobrazovala nadbytečné objekty a vložíme ji do vytvořeného MC „komponenta“.

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

Barevnou paletku převedeme na MC a pojmenujeme její instanci jako „barvy“. Vybereme jí a na panelu akcí jí přiřadíme tento skript:

on (release) {
 _visible = false;
}
onClipEvent (load) {
 _visible = false;
}

Dále si vytvoříme dvě dynamická textová pole a pojmenujeme je „hodnota“ a „popis“. U pole „popis“ ještě navíc vyplníme část „Var:“, kde vložíme název proměnné „popiska“. Tyto pole budou sloužit pro zobrazení názvu komponenty a hodnoty zvolené barvy.

Pod textovými poli vytvoříme obdélník, který převedeme na MC a instanci pojmenujeme „pozadi“. Tento MC bude sloužit jako pozadí celé komponenty a my budeme jeho barvu měnit na panelu vlastností u dané komponenty.

Dále si vytvoříme čtvercový MC, který bude sloužit jako tlačítko pro zobrazení barevné paletky a navíc se v něm bude zobrazovat aktuálně zvolená barva. Instanci vytvořeného čtverce pojmenujeme „tlacitko“ a vložíme do něj ještě jeden objekt čtvercový objekt, jehož instanci pojmenujeme „vypln“. Ten budeme dynamicky měnit podle zvolené barvy.

Na takto vytvořený MC „tlacitko“ umístíme skript:

on (release) {
 this._parent.barvy._visible = true;
}

Přesuneme se nyní na první snímek osy v MC „komponenta“ a vložíme do něj příkazy, které budou řídit celý proces výběru barvy a její zobrazení v textových polích a obarvení pozadí tlačítka:

barvaPozadi = "0xFFFFFF";
var poz:Color = new Color(pozadi);
poz.setRGB(barvaPozadi);
popis.textColor = barvaTextu;
hodnota.textColor = barvaTextu;
import flash.display.BitmapData;
var paletkaBMP:BitmapData = BitmapData.loadBitmap("paletka");
this.onMouseMove = function() {
 if (barvy.hitTest(_root._xmouse, _root._ymouse) == true && barvy._visible == true) {
  barva = "0x"+paletkaBMP.getPixel(_xmouse-barvy._x, _ymouse-barvy._y).toString(16);
  var my_color:Color = new Color(tlacitko.vypln);
  my_color.setRGB(barva);
  hodnota.text = barva;
 }
};

Pokud nyní otestujeme animaci, měly by vypadat takto.

Vytvoření komponenty

Teď už nás dělí jen pár kroků od vytvoření vlastní komponenty. Přesuneme se do knihovny symbolů dokumentu a klikneme pravým tlačítkem na MC „komponenta“. Z nabídky zvolíme „Component definition“. Pomocí tlačítka „+“ přidáme dva parametry komponenty, které budou měnit popisek a barvu pozadí této komponenty.

Název parametrů zvolíme libovolný, v části „Variable“ musíme vyplnit přesný název proměnné, kterou chceme měnit (popiska, barvaPozadi) a pak už jen určíme typ proměnných, které do parametrů chceme zadat.

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

Zaškrtneme spodní položku „Display in Components Panel“ a můžeme vyplnit text, který se po najetí na komponentu zobrazí.

Vedle již zmíněných položek můžeme v okně nastavení komponenty vytvořit textový popisek této komponenty (Description), zvolit ikonku, případně určit cestu k vlastnímu grafickému rozhraní pro zadávání parametrů a dále cestu k souboru, který slouží pro zobrazení změn parametrů přímo v editačním režimu.


Pokud máme nastavení komponenty dokončené, podíváme se do knihovny symbolů, kde se komponenty již standardně zobrazuje.

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

Vložení do seznamu komponent

Posledním krokem je umístění komponenty do seznamu nabízených komponent. Tento krok je jako poslední nejjednodušší a spočívá v přesunutí zdrojového FLA souboru naší komponenty do adresáře Program Files\Macromedia\Flash 8\en\Configuration\Components\, to v případě že používáme Flash 8, jinak analogickou cestu můžeme použít i u straších verzí, nebo můžeme zkusit toto umístění: Documents and Settings\Název_uživatele\Data aplikací\Macromedia\Flash MX\Configuration\Components\. Nakonec ukončíme Flash a znovu jej spustíme a komponentu již nalezneme společně s dalšími v seznamu komponent.

Zdrojový soubor dnešní komponenty ve Flash8 formátu si můžete stáhnout zde.

V příštím, závěrečném dílu tohoto seriálu, se podrobněji podíváme na nejčastější problémy při práci s Flashem.

Témata článku: Software, Programování, Složitá část, Dokončené dílo, Komponenta, Textové pole, Díl

1 komentář

Nejnovější komentáře

  • gully, gully 15. 5. 2006 9:04:06
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
Určitě si přečtěte

Jak se dostat do Windows, když neznáte heslo nebo nejste administrátor

Jak se dostat do Windows, když neznáte heslo nebo nejste administrátor

** S instalačním diskem Windows a znalostí pár příkazů odemknete téměř každý počítač s Windows. ** Poradíme i jak se tomu bránit

Včera | Tomáš Holčík | 34

Nový solární článek dokáže zachytit téměř veškerou energii světelného spektra ze Slunce

Nový solární článek dokáže zachytit téměř veškerou energii světelného spektra ze Slunce

** Vědci vytvořili nový typ solárního článku, který se pyšní neuvěřitelnou efektivitou ** Speciální trojrozměrná struktura dokáže zachytit téměř všechny vlnové délky světla ze Slunce ** Systém solárního článku využívá koncentrátorových čoček pro světlo

22.  7.  2017 | Karel Javůrek | 18

Další důkaz o existenci Planety 9

Další důkaz o existenci Planety 9

21.  7.  2017 | Jiří Černý | 5


Aktuální číslo časopisu Computer

Test 11 telefonů do 6 000 Kč

Postavte si a přetaktujte počítač

Srovnali jsme 7 sportovních kamer

Která zaměstnání nahradí roboti?