Flash Catalyst: Snadný návrh RIA aplikace

Znáte to, je to noční můra každého programátora. Naskinování aplikace, která nám už přece funguje, ale bez chybí jí to poslední – krásný grafický vzhled, který ji ve finále prodá.

Říká se, že většinu aplikací pro iPhone prodá jejich ikonka a první screenshot v iTunes. Podobná situace je v RIA aplikacích. Nikoho už nebaví graficky a ergonomicky zastaralé CRM a ERP portály. To je právě jeden z důvodů proč Flash Catalyst vznikl: Propojit svět tvůrčích nástrojů z Creative Suite a programátorské Flash Platformy – vzít z obou to nejlepší a umožnit nový, mnohem rychlejší a pohodlnější způsob komunikace mezi grafikem a programátorem.

Videotutoriál Flash Catalyst – kliknutím přejdete na stránku s videocastem (HQ, rozlišení 900×656).

Současný problém tvorby RIA aplikací souvisí s tím, že grafik a programátor musí úzce spolupracovat na GUI (graphical user interface) a programátor je ten, kdo převádí návrh aplikace do kódu. Toto workflow spolu nese spoustu nevýhod, jelikož programátor nemusí vždy přesně grafiku do aplikace implementovat. Jistě si vzpomenete na čas zbytečně strávený při dopozicování prvků, ladění barev a grafikovy věty typu „Ale tohle mělo být o pixel níž a ta červená není taková, jakou jsem si představoval a všechno je jinak, než jsem si představoval…“.

Současné workflow bez Flash Catalyst

(Grafik musí úzce spolupracovat s programátorem a z velké části znát dostupné možnosti, programátor občas grafiku implementuje nevhodně – nemusí cítit detaily tak přesně jako grafik.)

Flash Catalyst si klade za cíl tyto problémy při převodu grafiky z Illustratoru, Photoshopu či Fireworks do Flexu odbourat a umožňuje designéru UI a grafikovi vizuálně odladit takové záležitosti, jako třeba vzhled a chování tlačítek. Po schválení managerem a odsouhlasení prototypu zákazníkem tak předává programátorovi funkční layout kód, který Flash Catalyst na pozadí generuje. Grafik nepřevádí jenom vektorovou či bitmapovou předlohu do standardních komponent open-source frameworku Flex 4, ale definuje i stavy aplikace (změny uspořádání komponent) a přechody a animace mezi nimi. Dále pak může přidat i interakci (po kliknutí na tlačítko přejdi do dalšího stavu, při výběru položky ze seznamu proveď animaci a podobně).

Workflow s Flash Catalyst

(Nejprve se vytvoří interaktivní prototyp s hotovou grafikou, odsouhlasí se se zákazníkem a následně se předává programátorovi k finalizaci. Programátor již grafiku výrazně neupravuje.)

Časová osa

Animační časová osa je vteřinová, oproti frame-based ve Flashi Professional, a veškeré animace se převedou do srozumitelného kódu, který může programátor jednoduše následně upravit.

Nástroje, Vrstvy, Knihovna, Komponenty 

K dispozici jsou standardní nástroje pro jednoduchou práci s grafikou.

Flash Catalyst umožňuje round-tripping zpět do Photoshopu či Illustratoru. V praxi to znamená, že se rozhodnete komponentu vizuálně upravit až po importu do Flash Catalystu. Stačí daný prvek vybrat a zvolit Edit in Illustrator/Pho­toshop. Round-tripping na úrovni kódu mezi Flash Builder 4 a Flash Catalyst zatím není možný.

HUD (Heads-Up-Display) nabízí okamžité možnosti při výběru komponenty

Po kliknutí na Convert Artwork to Component se zobrazí menu, které vám umožní převést grafiku do funkční komponenty:

Pomocí Flash Catalystu můžete vytvářet například:

• 
  Rozhraní aplikací
• Interaktivní obsah do stránek
• Porfolia
• Produktové průvodce
• E-learning a vzdělávání
• Prototypy RIA aplikací
• Wire-framing
• Microsite
• Navigaci ve stránce
• Widgety

Nativní převod grafiky

Jistě váš okamžitě napadne, jak je to s převodem vektorových stínů, přechodů a primitivních tvarů z Illustratoru do Flash Catalystu. Vše je převedeno nativně do ActionScriptu, resp. MXML, nikoliv do bitmap – čímž se vektorové vlastnosti zachovají i při následném zvětšení/zmenšení objektů. Primitivní tvary jako elipsy, cesty apod. jsou též reprezentovány vektorově. Na bitmapy se při exportu převádí pouze vzory – patterns.

Spark komponenty

Flex 4 uvedl nový komponentový model, o který se Flash Catalyst opírá. Jde o oddělení logiky, chování a dat od vzhledu komponenty. Celou komponentu tak můžete kompletně graficky změnit, aniž by se to projevilo na jejím výsledném chování.

V červnu 2009 byla uvolněna první betaverze Flash Catalystu na labs.adobe.com, současně s nástupcem Flex Builderu, který nese název Flash Builder 4. V říjnu 2009 při příležitosti konference Adobe MAX vyšla další betaverze, která obsahuje rozšíření, včetně práce s videem. V současné době tedy Adobe nabízí tři nástroje pro přímou tvorbu RIA pro Flash Player a Adobe AIR: Flash CS4 Professional, Flash Builder 4 a Flash Catalyst.

Více info a stažení beta verze: http://labs.adobe.com/…ashcatalyst/