Een prototype maken van Flex- en Adobe AIR-toepassingen

Door het deelvenster Pagina's te combineren met andere krachtige Fireworks-functies, kunt u snel een prototype maken van interactieve webpagina's en software. U kunt een gebruiksklaar prototype eenvoudig omzetten in een werkende site door het te exporteren naar Adobe Flash^®, Adobe Flex^®, Adobe AIR™ of Adobe Dreamweaver^®.

Zie de volgende artikelen op het Fireworks Developer Center voor algemene tips voor workflows voor het maken van prototypen:

• Het artikel van Nick Myers over het ontwerpen van interactieve producten met Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_nl

• Het artikel van Dave Cronin over trends bij het maken van prototypes: http://www.adobe.com/go/learn_fw_prototypingtrends_nl

• Het artikel van Matt Stow over het gebruik van vooraf samengestelde CSS-sjablonen in Fireworks: Prebuilt CSS templates in Fireworks CS4 (Vooraf samengestelde CSS-sjablonen in Fireworks).

• Het artikel van Jim Babbage: Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling.

• De videozelfstudies van Dave Hogue over het gebruik van Fireworks voor IxD en het snel maken van prototypen:

  • Fireworks gebruiken voor ontwerpen met informatie en interactie: http://www.adobe.com/go/learn_fw_infointeract_nl

  • Interactieve prototypen maken met Fireworks: http://www.adobe.com/go/learn_fw_creatinginteractivepro_nl

  • Snel prototypen maken met Fireworks: http://www.adobe.com/go/learn_fw_rapidpro_nl

  • Fireworks als onderdeel van het complete ontwerpproces: http://www.adobe.com/go/learn_fw_completedesignpro_nl

• Een artikel over het ontwerpen van een websitetoepassing met Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_nl

• Het artikel van Kumar Vivek over ontwerpen voor mobiele apparaten met Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_nl

Zie www.adobe.com/go/lrvid4034_fw_nl voor een videozelfstudie over het maken van prototypes van toepassingsinterfaces.

De pagina's maken

Maak in het deelvenster Pagina's het aantal pagina's of schermen dat u in eerste instantie in uw ontwerp wilt opnemen. U kunt later in de ontwerpfase naar wens pagina's toevoegen of verwijderen.

Gemeenschappelijke ontwerpelementen instellen

Stel op het canvas de ontwerpelementen in die u op meerdere pagina's wilt gebruiken, zoals navigatiebalken en achtergrondafbeeldingen. Lijn de elementen uit met behulp van Slimme hulplijnen. Gebruik voor maximale flexibiliteit CSS als structuur voor uw lay-out. (Zie Slimme hulplijnen en Op CSS-gebaseerde lay-outs maken).

Gemeenschappelijke elementen op meerdere pagina's delen

Als u gemeenschappelijke elementen gebruikt, hoeft u een wijziging slechts één keer in te voeren. Alle pagina's waarop de elementen voorkomen, worden vervolgens automatisch bijgewerkt. Neem alle gemeenschappelijke elementen op in een stramienpagina of deel lagen als u subsets van elementen wilt kopiëren. (Zie Een stramienpagina gebruiken en Lagen delen.)

Unieke elementen toevoegen aan afzonderlijke pagina's

Voeg op elke pagina unieke ontwerp-, navigatie- of formulierelementen toe. In het deelvenster Gemeenschappelijke bibliotheek vindt u veel knoppen, tekstvakken en pop-upmenu's die het ontwerpproces versnellen. Componentsymbolen in de mappen Flex Components, HTML, Mac, Win, Web & Application en Menu Bars bevatten eigenschappen die u kunt aanpassen, zodat u uw eigen versies van de symbolen kunt maken. (Zie Componentsymbolen maken en gebruiken.)

Navigatie door de gebruiker simuleren met koppelingen

U kunt vanuit webobjecten zoals segmenten, hotspots of navigatieknoppen, koppelingen tot stand brengen tussen de verschillende pagina's van uw prototype. (Zie Koppeling naar pagina's in een Fireworks-document.)

Het voltooide, interactieve prototype exporteren

Fireworks beschikt over verschillende uitvoerindelingen voor prototypen. In al deze indelingen blijven de hypertextkoppelingen voor het navigeren behouden. Zie de volgende artikelen:

• Zie Een CSS-lay-out exporteren voor informatie over het delen van een flexibel, op CSS gebaseerd prototype met clients of over verdere bewerking hiervan in Adobe Dreamweaver.

• Zie Fireworks HTML exporteren als u een conventioneler, op een tabel gebaseerd prototype wilt maken.

• Zie Adobe PDF-bestanden exporteren als u een PDF-versie wilt uitsturen om opmerkingen in te maken of om af te drukken.

• Zie Prototype maken van Flex-toepassingen als u een prototype wilt maken van een Flex-toepassing. Zie Een Adobe AIR-toepassing maken als u een Adobe AIR-toepassing wilt maken.

Op CSS-gebaseerde lay-outs maken

U kunt op CSS gebaseerde lay-outs ontwerpen in een Fireworks-document en deze vervolgens omzetten in HTML-pagina's met CSS-regels die uw lay-outs weerspiegelen. Op CSS gebaseerde lay-outs bieden een op standaarden gebaseerde ontwerpmethode en de CSS-code die Fireworks genereert is geschikt voor de meeste browsers.

Zie www.adobe.com/go/lrvid4035_fw_nl voor een videozelfstudie over het maken van HTML-paginalay-outs op basis van CSS. Zie ook de volgende bronnen:

• Zelfstudie over het exporteren van CSS en afbeeldingen in Fireworks: http://www.adobe.com/go/learn_fw_exportcssimages_nl.

• Zelfstudie over het ontwerpen van websites volgens geldende normen met Fireworks: http://www.adobe.com/go/learn_fw_standardscompliantdesign_nl.

CSS-paginalay-out

Met Fireworks kunt u pagina's ontwerpen en de HTML- en CSS-code meteen exporteren met een exportengine die de positie van de objecten analyseert. Verder kunt u de uitlijning van de pagina instellen en een zich herhalende achtergrondafbeelding opgeven.

U kunt de HTML-elementen gebruiken uit de map HTML van de gemeenschappelijke bibliotheek. De map HTML bevat HTML-elementen als knop- en vervolgkeuzelijstobjecten en tekstvelden. In het deelvenster Symbooleigenschappen kunt u de eigenschappen van deze elementen bewerken. Wanneer u een willekeurig formulierelement naar de pagina sleept, worden door de exportengine codes van het type <form> ingevoegd bij het exporteren van de op CSS gebaseerde lay-out.

In de geëxporteerde HTML wordt alle tekst waar u een segment op had geplaatst als afbeelding weergegeven. Als u wilt dat deze tekst als tekst verschijnt, moet u de HTML-componenten uit de gemeenschappelijke bibliotheek gebruiken. De HTML-componenten bevatten koppen 1 t/m 6 en koppelingselementen.

Regels voor lay-outs die op CSS zijn gebaseerd

Om de verwachte resultaten te kunnen behalen wanneer u op CSS gebaseerde lay-outs maakt, moet u een paar regels in acht nemen.

De exportengine exporteert tekst die in rechthoeken is geplaatst. Aangezien alleen afbeeldingen die door rechthoekige segmenten zijn bedekt geëxporteerd worden, moet u segmenten op de afbeeldingen plaatsen die u wilt exporteren. Dankzij deze segmenten "weet" de exportengine waar de afbeeldingen zich bevinden.

De exportengine behandelt tekst, afbeeldingen en rechthoeken als rechthoekige blokken. De grootte en de positie van deze objecten worden geanalyseerd om de logische rijen en kolommen vast te stellen en deze in de lay-out te plaatsen. Plaats de objecten voorzichtig, zodat hun grenzen elkaar niet overlappen.

De exportengine zoekt naar logische scheidingen waar een duidelijke zichtlijn tussen objecten of groepen objecten kan worden geplaatst. Plaats uw kolommenlay-outs in een rechthoek om te voorkomen dat de exportengine een logische rij invoegt waardoor de lay-out van uw kolommen teniet wordt gedaan.

Wanneer u uw pagina ontwerpt, moet u rechthoeken gebruiken om objecten in te voegen die als onderliggende objecten van de rechthoek moeten worden behandeld. De exportengine herkent dit soort relaties tussen bovenliggende en onderliggende objecten. De exportengine scant de onderliggende elementen op logische rijen en kolommen, zoals in regel 3 aangegeven.

Afgezien van deze regels, moet u rekening houden met het volgende:

• De exportengine exporteert alleen primitieve rechthoeken. Als u de ronde hoeken van rechthoeken wilt exporteren, moet u er rechthoekige segmenten op plaatsen.

• Als u de lijnen van rechthoeken wilt exporteren, moet u rechthoekige segmenten over de rechthoeken met lijnen plaatsen.

• Als u symbolen wilt exporteren, plaatst u er een rechthoekig segment op.

• Als u de filters die u op tekst of rechthoeken hebt toegepast wilt exporteren, moet u er rechthoekige segmenten op plaatsen.

Een CSS-lay-out exporteren

Met Fireworks kunt u lay-outs exporteren die u maakt als op CSS gebaseerde bestanden. Vervolgens kunt u deze op CSS gebaseerde bestanden openen en bewerken in Dreamweaver of een andere CSS-compatibele editor.

Een documentdemo maken

U kunt een demo maken van het Fireworks-document waaraan u werkt. De demo wordt geopend in een browser om de functies te demonstreren. In deze demo kunt u door de pagina's bladeren.

1. Kies Opdrachten > Demo huidig document.

2. Selecteer de pagina's waarvoor u een demo wilt maken en klik op Demo maken.

3. Selecteer de map en klik op Openen.

Prototype maken van Flex-toepassingen

Het maken van prototypen voor Flex is hetzelfde als de workflow voor websites en software-interfaces. (Zie Workflow voor het maken van prototypen.) Met Fireworks kunt u Flex-componenten op het canvas slepen, de eigenschappen opgeven en de verkregen gebruikersinterface exporteren naar MXML. Vervolgens kunt u de gebruikersinterface verfijnen in Flex Builder.

Flex-gebruikersinterface maken

Maak in het deelvenster Pagina's het aantal interfacerasters dat u in uw eerste ontwerp wilt opnemen.

Flex-ontwerpcomponenten in de lay-out invoegen

Voeg op het canvas de Flex-componenten in uit de map Flex van het deelvenster Gemeenschappelijke bibliotheek. Deze componentsymbolen werken met name met MXML-export om ervoor te zorgen dat u de resultaten krijgt die u verwacht. Wanneer u uw document exporteert als MXML, wordt elk van deze symbolen omgezet in hun respectievelijke MXML-tags. Objecten die niet worden herkend als Flex-componenten,worden geëxporteerd als bitmaps, die aan de MXML worden gekoppeld met de tag <mx:Image>. (Zie Componentsymbolen maken en gebruiken.)

De symbolen Cursor, Schuifbalk, Tab en Knopinfo worden tijdens MXML-uitvoer genegeerd, omdat deze componenten geen directe vertaling hebben van Fireworks naar MXML. Het symbool Schuifbalk wordt bijvoorbeeld automatisch weergegeven in exemplaren van Flex-containers wanneer de inhoud kan worden geschoven. In Fireworks dienen deze symbolen als indicator voor hoe de delen van een interfaceontwerp werken.

Flex-componenten op meerdere pagina's delen

Wanneer u één Flex-component deelt met meerdere pagina's, worden met één wijziging automatisch alle betrokken pagina's (of vensters) bijgewerkt. U kunt een stramienpagina gebruiken om alle Flex-componenten te delen of u kunt lagen delen om subsets van componenten te kopiëren. (Zie Een stramienpagina gebruiken en Lagen delen.)

Eigenschappen voor de Flex-componenten opgeven

Geef in het deelvenster Symbooleigenschappen (Venster > Symbooleigenschappen) de eigenschappen en gebeurtenissen op voor elk Flex-component dat u in het canvas hebt ingevoegd.

De Flex-lay-out exporteren naar MXML

Exporteer de lay-out van de Flex-gebruikersinterface en open het verkregen MXML-bestand in Flex. Fireworks exporteert de benodigde MXML, waarbij alle stijlen en de absolute positionering behouden blijven. Flex-ontwikkelaars kunnen deze interface gebruiken zonder dat zij de lay-out opnieuw moeten maken in Flex.

Flex-componenteigenschappen bewerken

U kunt de eigenschappen en gebeurtenissen van Flex-componenten bewerken in het deelvenster Symbooleigenschappen.

Een Fireworks-document exporteren naar MXML

Met Fireworks kunt u RIA's (Rich Internet Applications) ontwerpen door elementen van gemeenschappelijke bibliotheken te exporteren als bekende componenten voor gebruik in Adobe Flex Builder. Fireworks exporteert de benodigde Flex-code (MXML), waarbij alle stijlen en de absolute positionering behouden blijven.

Wanneer u het prototype van een Flex-toepassing voltooit, exporteert u deze naar MXML voor verdere bewerking in Flex Builder. In Design ziet het prototype eruit als een equivalent van Fireworks, behalve dat componenten zoals cursors en schuifbalken niet worden geëxporteerd.

Flex-skins maken en exporteren

In Fireworks kunt u het uiterlijk van Flex-componenten wijzigen en deze exporteren voor gebruik bij het bouwen van op Flex gebaseerde websites en toepassingsinterfaces.

Skin Flex-componenten

U kunt skins maken voor een breed scala flexibele componenten op basis van de sjablonen voor Flex-skins, en deze bewerken in Fireworks.

1. Kies Opdrachten > Flexibele skin > Nieuwe flexibele skin.

2. Ga op een van de volgende manieren te werk:

   • Als u Flex-skins wilt maken voor alle beschikbare componenten, selecteert u Meerdere componenten.

     In Fireworks wordt één document gemaakt met alle beschikbare Flex-componenten.

   • Als u de componenten wilt opgeven waarvoor u skins wilt maken, selecteert u Specifieke componenten.

     Selecteer alleen de componenten waaraan een specifieke stijl is gekoppeld of selecteer alle varianten van de component.

3. Klik op OK.

Flex-skins exporteren

MXML-exportbeperkingen

Voordat u de Flex MXML-exportfunctie gebruikt, is het belangrijk dat u de mogelijkheden en beperkingen van deze functie kent:

Met exporteren naar MXML worden er geen skins gemaakt voor componenten in Flex, ook niet als u deze in Fireworks hebt bewerkt. Met MXML-export worden er MXML-documenten gemaakt voor gebruik in Flex. Deze documenten kunnen ook gekoppelde afbeeldingen voor Fireworks-objecten bevatten die niet kunnen worden omgezet in MXML-tags. Deze bestanden worden toegevoegd aan het MXML-document met de volgende tag: <mx:Image>.

Omdat MXML-export is ontworpen voor het genereren van een op tags gebaseerd document voor gebruik met Flex, worden segmenten niet meegenomen bij het maken van afbeeldingen of tabelcellen. Wanneer bij MXML-export afbeeldingen worden gemaakt, worden de optimalisatie-instellingen van het document gebruikt om de bestandsindeling en compressiemethode te bepalen.

De MXML-exportfunctie baseert de eigenschappen van een MXML-tag op het Flex-component in Fireworks. Fireworks biedt een subset Flex-componenten met een beperkt aantal eigenschappen.

Eigenschappen die worden herkend als stijlen, worden gescheiden van de gemaakte MXML-tags, maar blijven in hetzelfde MXML-document staan, in de tag <mx:Style>. Fireworks kan de stijlen niet definiëren in een extern CSS-bestand.

Gebruik geen frames bij het maken van ontwerpen en lay-outs voor MXML-uitvoer. Gebruik pagina's als u meerdere ontwerpen in een document wilt hebben.

Prototype maken van Adobe AIR-toepassingen

Met Adobe^® AIR™ voor Fireworks kunt u een Fireworks-prototype transformeren in een desktoptoepassing. Sommige prototypepagina's hebben bijvoorbeeld interactie met elkaar om gegevens weer te geven. Met Adobe AIR kunt u deze set pagina's verpakken tot een kleine toepassing die op de computer van een gebruiker kan worden geïnstalleerd. Wanneer de gebruiker de toepassing uitvoert vanaf zijn desktopcomputer, wordt de toepassing geladen en geeft deze het prototype weer in zijn eigen toepassingsvenster, onafhankelijk van een browser. Gebruikers kunnen vervolgens lokaal op hun computer zonder internetverbinding naar het prototype bladeren.

Raadpleeg het artikel van Ethan Eismann over Adobe AIR en belevingsmerken: http://www.adobe.com/go/learn_fw_airexperiencebrand_nl.

Adobe AIR Mouse-gebeurtenissen toevoegen

U kunt vooraf ingestelde Adobe AIR Mouse-gebeurtenissen toevoegen aan objecten die zich in uw document bevinden. Fireworks biedt vier vooraf ingestelde muisgebeurtenissen: venster sluiten, venster slepen, venster maximaliseren en venster minimaliseren.

1. Selecteer de objecten op het canvas waarop u een muisgebeurtenis wilt toepassen.

2. Selecteer Opdrachten > Gebeurtenissen AIR Mouse en kies de gebeurtenis.

Een voorvertoning van een Adobe AIR-toepassing bekijken

U kunt een voorvertoning van een Adobe AIR-toepassing bekijken zonder dat u daar enige Adobe AIR-toepassingsparameters voor hoeft in te stellen.

Een Adobe AIR-toepassing maken

Een digitaal certificaat toepassen op een Adobe AIR-toepassing

Een digitale handtekening biedt zekerheid dat de code voor de toepassing niet is gewijzigd of corrupt is geraakt sinds het schrijven van de code door de bouwer van de software. Voor alle Adobe AIR-toepassingen is een digitale handtekening nodig. Installatie zonder deze handtekening is niet mogelijk.