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.

Import dat výkresu z AutoCADu do editoru Flashe

Pokud potřebujete importovat do Flash editoru grafiku z výkresu AutoCADu, bude se Vám možná hodit následující postup. Dopracoval jsem se k němu na základě rad, které jsem získal v diskusi. Potřeboval jsem přenést do Flashe čárovou vektorovou grafiku, kterou jsem vytvořil v AutoCADu. Jednalo se rovinný axonometrický průmět vytvořený ze 3D modelu pomocí příkazu AutoCADu _solprof. Cesty přes formát DXF nebo AI zklamaly - entity jiných typů, než úsečka, kružnice, oblouk, tzn. elipsy a spline křivky se deformovaly. Naštěstí se našlo řešení.

1.krok - AutoCAD 2007: Vytvoření zdroje.
Je to 2D čárový rovinný axonometrický průmět 3D modelu ve formátu DWG AutoCAD 2007. Kolem grafiky je rámeček v proporcích budoucí scény ve Flashi, mj. pro pozdější nastavení správného měřítka. V mém případě má rámeček velikost S x V = 700 x 800 kreslících jednotek, protože výsledná velikost ve Flashi má být 700 x 800 px. Soubor DWG obsahuje jen čárovou grafiku 2D průmětu složenou z entit typu úsečka, oblouk, kružnice, křivka, spline a elipsa. Pro vytvoření průmětu jsem nastavil promítání do roviny a odstranění duplicit při překrývání se čar. (AutoCAD umožňuje i protorové rozložení obrysových čar, ale to nemá praktický význam, pokud chcete vygenerovat čárovou grafiku pro výkres).

2.krok - Adobe Ilustrator CS3: Načtení DWG souboru do prázného web dokumentu.
Otevřel jsem nový "web document" o rozměrech 700 x 800 px a pomocí příkazu Place vložil DWG. Měřítko jsem nastavil na "Scale to Fit Crop An". Tím se kreslící jednotky AutoCADu převedou 1:1 na pixely a grafika včetně rámečku se vystředí automaticky v dokumentu.

3.krok - Adobe Ilustrator CS3: Export do SWF.
Dokument není nutno ukládat. Postačí jej exportovat do SWF. Nastavil jsem přitom formát Flash Player 8.

4.krok - Flash 8 Profesional: Import SWF.
Importoval jsem SWF přímo na scénu. Pak jsem jej příkazem ungroup rozložil až na úroveň entit. Nastavil jsem pak u všech čar tloušťku hairline. Barvy zůstaly zachovány: v AutoCADu jsem používal barvy z množiny 16-ti základních, a ty se touto cestou bez problémů převedly.