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.

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.

Diskuze (1) Další článek: Ke stažení: používejte MPlayer bez příkazové řádky

Témata článku: Software, Programování, Rastrový obrázek, Textové pole, Textový popisek, Popisek, Složitá práce, VLA, Dokončené dílo, Komponenta, Díl, Složitá část, Komp, Přesný název


Určitě si přečtěte

Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

** Každý nový počítač si zaslouží počáteční péči ** Odinstalujte bloatware a nezapomeňte na vhodné nastavení ** Poradíme, jak se o počítač s Windows 10 postarat

David Polesný, Stanislav Janů | 71

David PolesnýStanislav Janů
PočítačeNotebooky
CZ.NIC bezplatně naděluje USB/NFC klíče. Jak jej získat?
Lukáš Václavík
CZ.NICeGovernment
Starlink podle betatesterů: Rychlejší a levnější než satelitní internet v Česku

Starlink podle betatesterů: Rychlejší a levnější než satelitní internet v Česku

** Reddit se začíná plnit zkušenostmi se Starlinkem ** Při přímé viditelnosti dá i 120 Mb/s ** Klasický satelitní internet už teď dalece překonává

Jakub Čížek | 48

Jakub Čížek
StarlinkPoskytovatelé internetu
Vodafonu se zhroutila kabelovka. Síť bývalého UPC má výpadky
Lukáš Václavík
VodafoneUPC
AMD uvádí grafické karty Radeon RX 6800, 6800 XT a 6900 XT. Útočí přímo na modely od Nvidie

AMD uvádí grafické karty Radeon RX 6800, 6800 XT a 6900 XT. Útočí přímo na modely od Nvidie

** AMD představilo tři nové grafické karty ** Všechny s architekturou RDNA2, kterou používají i PS5 a Xbox Series ** Karty útočí přímo na GeForce RTX 3000

Karel Javůrek | 78

Karel Javůrek
Radeon RX 6000Grafické kartyAMD
Google vymyslel technologii superpřesného GPS. Už ji podporuje Pixel 5 a dorazí i na ostatní telefony

Google vymyslel technologii superpřesného GPS. Už ji podporuje Pixel 5 a dorazí i na ostatní telefony

** Kvalita GPS ve městech občas stojí za starou bačkoru ** Mohou za to odrazy signálu od okolních budov ** Google má jejich 3D model, a tak spolupracuje s výrobci GPS čipů

Jakub Čížek | 40

Jakub Čížek
NavigaceTechnologieGoogle
Vybrali jsme 12 programovatelných hraček a stavebnic pro děti a jejich rodiče

Vybrali jsme 12 programovatelných hraček a stavebnic pro děti a jejich rodiče

** Získejte děti pro matematiku a základy techniky ** Kupte jim hračku nebo stavebnici, které vdechnou vlastní život ** Vybrali jsme stavebnice pro malé caparty i budoucí experty

Jakub Čížek | 10

Jakub Čížek
Stavebnice

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5