21. června 2008

Ukládání komplexních stavových informací ve Flash aplikaci


Představte si, že ve Flashi vytváříte nějakou složitou aplikaci: například katalog produktů nebo e-shop. Aplikace umí zobrazovat katalogové listy produktů a přehledy produktů tříděné či filtrované podle různých kritérií, a to v různé formě (textový výpis zkrácený či podrobný, nabídku produktů s náhledy apod.) Aplikace také umí uživateli nabídnout panely pro nastevní třídících kritérií. Dále tu naleznete také seznamy prodejen, detailní informace o jednotlivých prodejnách. Mohou tu být i jiné informace jako certifikáty, návody a pod. Je to prostě spousta stránek s různou strukturou dat, různým obsahem a formátovaných podle různých šablon.

Vy přitom chcete, aby si tato aplikace uchovávala historii pohybů uživatele a dovolovala uživateli se vracet zpět a nabízet mu vždy správně zkompletovanou stránku se správným obsahem. Je tedy jasné, že si aplikace musí "pamatovat" ke každému kroku uživatele množství různorodých dat, které navíc budou mít pokaždé jinou strukturu. Ukážu Vám, jak to lze zařídit pomocí jednorozměrného indexového pole.

Stačí si uvědomit, že každá stránka aplikace je popsána konečným souborem parametrů. Soubor je sice pokaždé jinak strukturovaný, ale to hlavní je, že je konečný a struktura souboru je podobná pro podobný typ stránek. Mezi parametry uváděné v souboru patří například název šablony stránky (karta produktu, přehled s náhledy, ...) a dále soubor parametrů, které jednoznačně určují obsah (například ID produktu nebo soubor hodnot výběrových kritérií + číslo stránky přehledu).

Všechny tyto parametry můžeme pokaždé spojit do jednoho řetězce - "serializovat" je - a to podle nějakého námi zvoleného schématu. Serializovaný řetězec pak vždy uložíme příkazem push() na konec pole, které si specielně pro účel uchovávat historii vytvoříme.

Pole se bude jmenovat například historie_arr a každý záznam v něm bude odpovídat jednomu kroku uživatele. Informace první stránka aplikace) bude uložena na indexu 0, další bude mít index 1 atd. Poslední stránka bude dosažitelná na momentálně nejvyšší hodnotě indexu - historie_arr[n].

V aplikaci pak umístéme tlačítko pro pohyb zpět v historii. Na toto tlačítko "pověsíme funkčnost", která pomocí akce historie_arr.pop() přečte poslední záznam v poli historie a odstraní ho. Jelikož tento záznam obsahuje veškeré potřebné údaje, stačí ho pak už jen rozparsovat a podle získaných dat zrekonstruovat požadovanou stránku.

Možností, jak data serializovat je mnoho. V některém z příštích článků Vám popíšu docela šikovnou metodu, kterou jsem odkoukal od přírody.

Rozměry prvků v knihovně Flash editoru

Základní grafické prvky můžete mít uložené v knihovně symbolů přímo ve velikosti, v jaké je pak ve Flash animaci používáte. Například logo. Pokud má být ve finále široké 83 pixelů, bude mít tutéž velikost i v knihovně. Logo pak stačí jen přetáhnout na určené místo ve Flash animaci a nic více neřešit. Určité potíže nastanou jen, když chcete rozměry loga později proporcionálně zmenšit, a to například tak, aby jeho šířka byla přesně 64 pixelů. Musíte si vzít k ruce kalkulačku a vypočítat si novou výšku ručně a vypočtenou hodnotu zadat do panelu Info. Zabere to sice pár desítek vteřin, ale proč to nedělat chytřeji.

Osvědčil se mi postup, kdy mám prvek uložený v knihovně tak, aby alespoň jeden jeho charakteristický rozměr (šířka či výška) byl roven právě 100 pixelů. Po umístění prvku do Flash animace pak stačí nastavit na panelu Transform procentuální měřítko hodnotou, která odpovídá požadovanému rozměru v pixelech a druhý rozměr se nastaví automaticky ve správné proporci - tedy pokud máme na panelu zatrženou volbu proporcionální změny rozměrů (Constrain).

Logo si tedy uložíme tak, aby jeho šířka v khihovně byla 100px. Po přetažení loga na určené místo v animaci pak pocí panelu Transform nastavíme velikost instance loga na 83% resp. 64%. Šířka tak bude požadovaných 83px resp. 64px a výška se vždy dopočítá automaticky.

Tento postup je samozřejmě nejvhodnější pro vektorové objekty.