Flash Catalyst: Snadný návrh RIA aplikace

Bez hezké grafiky se pořádná RIA aplikace neobejde, jenže vývojáři často nerozumí grafikům a grafici nechápou vývojáře. Flash Catalyst je nástroj, který zjednodušuje převod návrhu z Photoshopu, Illustratoru či Fireworks do Flexu 4 a slouží k prototypování i wireframingu. (Součástí článku je videotutoriál)

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.

Flash Catalyst je nástroj, který umožňuje grafikům vytvářet interaktivní prototypy aplikací bez kousku kódu. Ty následně vezme programátor a oživí je – vloží jim šém finální logiky a propojení s daty.

Flash Catalyst - videotutoriál
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…“.

Flash Catalyst do textu
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 do textu

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ě).

Flash Catalyst do textu
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.)

Flash Catalyst do textu
Č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.

Flash Catalyst do textu
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ý.

Flash Catalyst do textu
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:

Flash Catalyst do textu

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

  • Flash Catalyst do textu

    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í.

Flash Catalyst do textu

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/

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 33

Přehled komentářů

fos4 Re: Flash Catalyst: Snadný návrh RIA aplikace
fos4 Re: Flash Catalyst: Snadný návrh RIA aplikace
pr.rybar Ako sa maju robit RIA
dc Re: Ako sa maju robit RIA
pr.rybar Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
dc Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
Tom Krcha Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
pr.rybar Re: Ako sa maju robit RIA
Borek Bernard Re: Ako sa maju robit RIA
pr.rybar Re: Ako sa maju robit RIA
Borek Bernard Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
pr.rybar Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
dc Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
pr.rybar Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
pr.rybar Re: Ako sa maju robit RIA
Borek Bernard Re: Ako sa maju robit RIA
pr.rybar Re: Ako sa maju robit RIA
Borek Bernard Re: Ako sa maju robit RIA
pas Re: Ako sa maju robit RIA
Tom Krcha Re: Ako sa maju robit RIA
Gangsta Re: Ako sa maju robit RIA
MD Re: Ako sa maju robit RIA
Honza77 Dotazy
Tom Krcha Re: Dotazy
Zdroj: https://www.zdrojak.cz/?p=3120