Vytváření prototypů aplikací Flex a Adobe AIR

Kombinací panelu Stránky s ostatními funkcemi aplikace Fireworks můžete rychle vytvořit interaktivní prototypy webu a softwaru. Dokončený prototyp můžete převést na funkční web prostým exportem do aplikace Adobe Flash^®, Adobe Flex^®, Adobe AIR™ nebo Adobe Dreamweaver^®.

Prostudujte si následující články s obecnými tipy pro pracovní proces vytváření prototypů na stránkách Fireworks Developer Center:

• Nick Myers publikoval článek o navrhování interaktivních produktů s aplikací Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_cz

• Dave Cronin publikoval článek o odvětvových trendech v prototypování: http://www.adobe.com/go/learn_fw_prototypingtrends_cz

• Matt Stow publikoval článek o používání prefabrikovaných šablon CSS v aplikaci Fireworks: Předem připravené šablony CSS v aplikaci Fireworks CS4.

• Jim Babbage publikoval článek: Ukázky praktických tipů pro aplikaci Fireworks CS4: importování, exportování, symboly, prototypování, změna měřítka.

• Dave Hogue publikoval videokurz o používání aplikace Fireworks pro interaktivní návrh a rychlé vytváření prototypů:

  • Použití aplikace Fireworks k informačnímu a interaktivnímu navrhování: http://www.adobe.com/go/learn_fw_infointeract_cz

  • Vytváření interaktivních prototypů s aplikací Fireworks: http://www.adobe.com/go/learn_fw_creatinginteractivepro_cz

  • Rychlé prototypování s aplikací Fireworks: http://www.adobe.com/go/learn_fw_rapidpro_cz

  • Aplikace Fireworks jako součást kompletního navrhovacího procesu: http://www.adobe.com/go/learn_fw_completedesignpro_cz

• Článek o navrhování webových aplikací s aplikací Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_cz

• Kumar Vivek publikoval článek o navrhování pro mobilní zařízení s použitím aplikace Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_cz

Video s výukovým kurzem představujícím rozhraní aplikace pro vytváření prototypů naleznete na adrese www.adobe.com/go/lrvid4034_fw_cz.

Vytváření stránek

Na panelu Stránky vytvořte požadovaný počet stránek nebo obrazovek pro úvodní návrh. Během práce na návrhu můžete stránky podle potřeby přidat nebo odebrat.

Rozvržení společných prvků návrhu

Na plátně zadejte rozvržení prvků návrhu, které chcete použít na více stránkách, například navigační pruhy a obrázky na pozadí. K zarovnání prvků použijte automatická vodítka. Za účelem zajištění maximální flexibility vytvořte strukturu rozvržení pomocí stylů CSS. (Viz Inteligentní vodítka a Tvorba rozvržení s využitím stylů CSS.).

Sdílení společných prvků na více stránkách

V případě sdílení společných prvků dojde po provedení jedné změny k automatické aktualizaci všech příslušných stránek. Ke sdílení všech prvků na stránce můžete použít vzorovou stránku nebo můžete pomocí sdílení vrstev kopírovat dílčí sady prvků. (Viz Použití vzorové stránky a Sdílení vrstev.)

Přidání jedinečných prvků na jednotlivé stránky

Na jednotlivých stránkách můžete přidat jedinečné prvky návrhu, navigace nebo formulářů. Panel Společná knihovna obsahuje různá tlačítka, textová pole a rozbalovací nabídky, které urychlují proces návrhu. Symboly prvků ve složkách Flex Components, Mac, Mac, Win, Web & Application a Menu Bars obsahují vlastnosti, které můžete přizpůsobit pro jednotlivé instance symbolů. (Viz Vytvoření a použití symbolů komponent.)

Simulace navigace pomocí odkazů

Pomocí webových objektů, například řezů, aktivních oblastí nebo navigačních tlačítek, je možné vytvořit odkazy mezi různými stránkami prototypu. (Viz Odkaz na stránky v dokumentu aplikace Fireworks.)

Export dokončeného interaktivního prototypu

Aplikace Fireworks nabízí několik výstupních formátů pro váš prototyp. Všechny formáty zachovají hypertextové odkazy pro navigaci mezi stránkami. Viz tyto články:

• Pokud chcete s klienty sdílet flexibilní prototyp využívající styly CSS nebo jej dále upravovat v aplikaci Adobe Dreamweaver, naleznete informace v tématu Export rozvržení CSS.

• Pokud chcete vytvořit tradičnější prototyp využívající tabulek, naleznete informace v tématu Export formátu Fireworks HTML.

• Pokud chcete distribuovat verzi PDF za účelem zadání komentářů nebo tisku, naleznete informace v tématu Export souborů Adobe PDF.

• Pokud chcete vytvořit prototyp aplikace Flex, naleznete informace v tématu Vytváření prototypů aplikací Flex. Pokud chcete vytvořit aplikaci Adobe AIR, naleznete informace v tématu Vytvoření aplikace v prostředí Adobe AIR.

Tvorba rozvržení s využitím stylů CSS

Rozvržení s využitím stylů CSS můžete vytvořit v dokumentu aplikace Fireworks a poté ho převést na stránky HTML s pravidly CSS, které replikují rozvržení. Rozvržení s využitím stylů CSS nabízí standardizovaný přístup s kódem čitelným různými prohlížeči.

Video s výukovým kurzem představujícím tvorbu rozvržení s využitím stylů CSS naleznete na adrese www.adobe.com/go/lrvid4035_fw_cz. Také si přečtěte následující zdroje:

• Výukový kurz o exportování CSS a obrazů v aplikaci Fireworks na adrese http://www.adobe.com/go/learn_fw_exportcssimages_cz.

• Výukový kurz o vytváření webových návrhů vyhovujících standardům v aplikaci Fireworks na adrese http://www.adobe.com/go/learn_fw_standardscompliantdesign_cz.

O rozvržení stránek na základě stylů CSS

Aplikace Fireworks umožňuje navrhovat stránky a okamžitě je exportovat na stránky HTML s pravidly CSS díky exportnímu modulu, který analyzuje rozmístění objektů. Navíc můžete nastavit zarovnání stránky a určit opakující se obraz na pozadí.

Můžete použít prvky HTML dostupné ve složce HTML ve Společné knihovně. Složka HTML obsahuje prvky HTML jako tlačítko, rozvírací seznamy a textová pole. Vlastnosti těchto prvků můžete upravovat pomocí panelu Vlastnosti symbolu. Když přetáhnete do stránky jakékoli prvky formuláře, vloží exportní modul při exportu rozvržení s využitím stylů CSS do stránky tagy <form>.

Veškerý text, na který jste umístili řez, bude v exportovaném HTML zobrazen jako obrázky. Pokud chcete, aby byl tento text zobrazen jako text, použijte součásti HTML ze Společné knihovny. Součásti HTML zahrnují nadpisy úrovně 1-6 a prvky odkazů.

Pravidla pro rozvržení s využitím stylů CSS

Všimněte si několika pravidel pro tvorbu rozvržení s využitím stylů CSS, abyste dosáhli očekávaných výsledků.

Exportní modul exportuje text v obdélnících. Pouze obrazy zakryté obdélníkovými řezy jsou exportovány a proto umístěte řezy na obrazy, které chcete exportovat. Tyto řezy „říkají“ exportnímu modulu, kde jsou obrázky.

Exportní modul vnímá text, obrázky a obdélníky jako obdélníkové bloky. Zjistí velikost a polohu těchto objektů, aby mohl vytvořit logické řady a sloupce, do kterých objekty umístí. Objekty umísťujte opatrně, aby jejich okraje nepřesahovaly.

Exportní modul hledá logické úseky, kde mohou být umístěny nepřerušované záměrné přímky mezi objekty a skupinami objektů. Uspořádejte rozvržení sloupců do obdélníků, aby exportní modul nevkládal logické řádky, které naruší rozvržení sloupců.

Při návrhu stránky použijte obdélníky, do kterých vložte objekty, které se budou chovat jako potomci obdélníku. Exportní modul dokáže tyto vztahy rodič-potomek rozpoznat. Exportní modul rozpoznává u prvků potomků logické řady a sloupce podobně jako v Pravidle 3.

Kromě těchto pravidel si všimněte následujících informací:

• Exportní modul exportuje pouze základní obdélníky. Chcete-li exportovat zaoblené rohy obdélníků, umístěte na ně řezy.

• Chcete-li exportovat tahy obdélníků, umístěte na tyto obdélníky obdélníkové řezy.

• Chcete-li exportovat symboly, umístěte na ně obdélníkový řez.

• Chcete-li exportovat filtry, které jste aplikovali na text nebo obdélníky, umístěte na ně obdélníkové řezy.

Export rozvržení CSS

Fireworks umožňuje exportovat rozvržení vytvořená na základě CSS. Tyto soubory vytvořené na základě CSS poté můžete otevřít a upravit v aplikaci Dreamweaver nebo jiném webovém editoru schopném pracovat s CSS.

Vytvoření ukázky dokumentu

K dokumentu, na kterém právě pracujete, můžete vytvořit i jeho ukázku. Ukázka se otevře v prohlížeči a předvede jeho funkce, přičemž je možné přecházet mezi jednotlivými stránkami.

1. Vyberte Příkazy > Ukázka aktuálního dokumentu.

2. Vyberte stránky, pro které chcete vytvořit ukázku a klepněte na tlačítko Vytvořit ukázku.

3. Vyberte složku a klepněte na Otevřít.

Vytváření prototypů aplikací Flex

proces vytváření prototypů pro Flex se podobá postupu při návrhu webových stran a softwarového rozhraní. (Viz Pracovní postup při vytváření prototypů.) V aplikaci Fireworks lze komponenty Flex přetahovat do pláten, nastavovat jejich vlastnosti a exportovat výsledné uživatelské rozhraní do formátu MXML. Uživatelské rozhraní lze pak dále zpřesnit v aplikaci Flex Builder.

Vytvoření uživatelského rozhraní Flex

Pomocí panelu Stránky vytvořte požadovaný počet obrazovek rozhraní pro úvodní návrh.

Vložení návrhových komponent Flex do rozvržení

Do pláten vložte komponenty Flex ze složky Flex v panelu Společná knihovna. Tyto symboly komponent při kombinaci s exportem do MXML zajistí, že výsledek bude odpovídat očekávání. Když dokument exportujete do formátu MXML, jsou všechny tyto symboly převedeny na odpovídající tagy MXML. Objekty nerozpoznané jako komponenty Flex jsou však exportovány jako bitmapy, propojené do dokumentu MXML pomocí značky <mx:Image>. (Viz Vytvoření a použití symbolů komponent.

Symboly Kurzor, Posuvník, Záložka a ToolTip jsou ve výstupu MXML ignorovány, protože tyto komponenty nelze přímo převést z aplikace Fireworks do MXML. Například symbol Posuvník se automaticky objeví v instancích kontejneru Flex, pokud lze obsah kontejneru posouvat. V aplikaci Fireworks tyto symboly slouží jako indikátory funkce součástí návrhu rozhraní.

Sdílení společných komponent Flex na více stránkách

Jestliže sdílíte jeden prvek Flex mezi více stránkami, bude jeho změna automaticky promítnuta do všech stránek (nebo obrazovek). Ke sdílení všech komponent Flex na stránce můžete použít vzorovou stránku nebo můžete pomocí sdílení vrstev kopírovat dílčí sady komponent. (Viz Použití vzorové stránky a Sdílení vrstev.)

Zadání vlastností komponent Flex

V panelu Vlastnosti symbolu (Okno > Vlastnosti symbolu) zadejte vlastnosti a události pro všechny komponenty Flex vložené na kreslicí plátna.

Export rozvržení Flex do MXML

Exportujte rozvržení uživatelského rozhraní Flex a výsledný soubor MXML otevřete v aplikaci Flex. Fireworks exportuje nezbytný kód MXML se všemi informacemi o stylech a absolutním pozicování. Vývojáři v jazyce Flex mohou toto rozhraní použít, aniž by museli znovu vytvářet rozvržení ve Flexu.

Úprava vlastností prvků Flex

Vlastnosti a události komponent Flex lze upravit v panelu Vlastnosti symbolu.

Export dokumentu aplikace Fireworks do formátu MXML

Aplikace Fireworks vám pomůže vytvořit rozvržení internetových RIA aplikací, protože povoluje export položek Společné knihovny ve formě použitelné v aplikaci Adobe Flex Builder. Fireworks exportuje nezbytný kód Flex (MXML) se všemi informacemi o stylech a absolutním pozicování.

Po dokončení exportujte prototyp aplikace Flex do formátu MXML pro další úpravy v aplikaci Flex Builder. V zobrazení návrhu vypadá prototyp jako jeho obdoba Fireworks, s výjimkou komponent typu kurzor nebo posuvník, které nejsou exportovány.

Vytvoření a export vzhledů Flex

Ke komponentám Flex můžete přidávat vzhledy přímo v aplikaci Fireworks a poté je exportovat pro následné použití při tvorbě webových stránek a rozhraní aplikací založených na Flexu

Přidávání vzhledů k prvkům aplikace Flex

Můžete vytvářet vzhledy pro mnoho různých prvků aplikace Flex na základě šablon vzhledů Flex a upravovat je v aplikaci Fireworks.

1. Vyberte možnost Příkazy > Změna vzhledů aplikace Flex > Nový vzhled aplikace Flex.

2. Proveďte jednu z následujících akcí:

   • Chcete-li vytvořit vzhledy Flex pro všechny dostupné prvky, vyberte možnost Více prvků.

     Aplikace Fireworks vytvoří jeden dokument se všemi dostupnými prvky Flex.

   • Chcete-li určit prvky, pro které chcete vytvořit vzhledy, vyberte možnost Konkrétní prvky.

     Vyberte jen prvky s připojeným konkrétním stylem nebo všechny instance prvku.

3. Klepněte na tlačítko OK.

Export vzhledů Flex

Omezení exportu MXML

Než použijete nástroj pro export do formátu Flex MXML, je třeba znát jeho schopnosti a omezení:

Při exportu do MXML nejsou vytvářeny vzhledy komponent Flex, a to ani při jejich úpravě v aplikaci Fireworks. Při exportu do MXML jsou pouze vytvořeny dokumenty MXML, které lze použít v prostředí Flex. Tyto dokumenty mohou obsahovat také odkazované obrazy pro objekty Fireworks, které nelze převést na tagy MXML. Tyto obrázky jsou do dokumentu MXML přidány prostřednictvím tagů <mx:Image>.

Vzhledem k tomu, že při exportu do MXML jsou vytvářeny dokumenty složené z tagů pro Flex, nejsou řezy při vytváření obrázků a buněk tabulek brány do úvahy. Když jsou při exportu do MXML vytvářeny obrazy, je použito nastavení optimalizace dokumentu, ze kterého je zjištěn formát obrazu a metoda komprese.

Funkce exportu do MXML vytváří vlastnosti tagů MXML na základě komponent Flex ve Fireworks. Fireworks nabízí podmnožinu komponent Flex s omezeným počtem vlastností.

Vlastnosti rozeznané jako styly jsou odděleny od vytvořených tagů MXML, ale jsou uchovány ve stejném dokumentu MXML uvnitř značky <mx:Style>. Fireworks neumí definovat styly v externím souboru CSS.

Vytváříte-li návrhy a rozvržení pro výstup do MXML, nepoužívejte snímky. Pokud chcete mít v rámci jednoho dokumentu rozdílné návrhy, použijte stránky.

Vytváření prototypů aplikací Adobe AIR

Adobe^® AIR™ for Fireworks umožňuje přetvořit prototyp Fireworks do desktopové aplikace. Například některé stránky prototypu spolu komunikují kvůli zobrazení dat. Pomocí Adobe AIR lze vložit takovou sadu stránek do malé aplikace, kterou nainstalujete na počítač uživatele. Když uživatel aplikaci spustí na své pracovní ploše, aplikace načte a zobrazí prototyp ve svém vlastním aplikačním okně, nezávisle na prohlížeči. Uživatelé poté mohou prototypem procházet přímo na počítači, aniž by potřebovali připojení k Internetu.

Viz článek, který publikoval Ethan Eismann o aplikaci Adobe AIR a zkušenostech s touto značkou: http://www.adobe.com/go/learn_fw_airexperiencebrand_cz.

Přidat události myši Adobe AIR

Objektům v dokumentu můžete přidat předdefinované události myši Adobe AIR. Aplikace Fireworks nabízí čtyři předdefinované události myši: zavřít okno, přetáhnout okno, maximalizovat okno a minimalizovat okno.

1. Vyberte objekty na plátně, kterým chcete přiřadit chování události myši.

2. Vyberte Příkazy > Události myši AIR a zvolte událost.

Náhled aplikace Adobe AIR

Můžete zobrazit náhled aplikace Adobe AIR bez nastavení jakýchkoli parametrů aplikace Adobe AIR.

Vytvoření aplikace v prostředí Adobe AIR

Podepsání aplikace Adobe AIR digitálním certifikátem

Digitální podpis je zárukou toho, že kód aplikace nebyl od doby jejího vytvoření autorem softwaru nijak změněn ani poškozen. Digitální podpis vyžadují všechny aplikace Adobe AIR, bez tohoto podpisu je není možné nainstalovat.