Workflow voor het maken van prototypen

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:

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:

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:

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.

Regel 1: Maak gebruik van rechthoeken om tekst en segmenten te exporteren naar exportafbeeldingen

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.

Regel 2: Zorg dat objecten elkaar niet overlappen

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.

Regel 3: Plan de lay-out voor rijen en kolommen

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.

Regel 4: Behandel het document als een tweedimensionaal document

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.

  1. Kies Bestand > Exporteren.

  2. Selecteer in het pop-upmenu Exporteren de optie CSS en afbeeldingen.

  3. Klik op Opties om de HTML-paginaeigenschappen in te stellen.

  4. Klik op Bladeren om een achtergrondafbeelding op te geven en de achtergrondafbeeldingstegels in te stellen:

    • Selecteer Niet herhalen om de afbeelding maar eenmaal weer te geven.

    • Selecteer Herhalen als u de afbeelding zowel horizontaal als verticaal wilt herhalen.

    • Selecteer Herhalen-x als u de achtergrondafbeelding horizontaal wilt herhalen.

    • Selecteer de optie Herhalen-y als u de achtergrondafbeelding verticaal wilt herhalen.

  5. Selecteer de pagina-uitlijning op de browser als links, midden of rechts.

  6. Geef aan of de bijlage een vaste positie heeft of dat deze kan schuiven.

  7. Klik op OK en vervolgens op Opslaan.

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

Opmerking:

Wanneer u in Fireworks een Flex-ontwerpcomponent bewerkt, kunt u de gewijzigde XML-code naar uw Flex-project kopiëren. Zo bespaart u tijd wanneer u het gewijzigde componentgedrag in uw project wilt herhalen.

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.

Opmerking:

afbeeldingssegmenten, rollovers en hotspots zijn alleen van toepassing op prototypen die zijn gebaseerd op HTML. Vermijd deze webobjecten wanneer u Flex-prototypen maakt.

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.

  1. Selecteer het Flex-component op het canvas.

  2. Open het deelvenster Symbooleigenschappen (Venster > Symbooleigenschappen).

  3. Stel in het deelvenster Symbooleigenschappen de eigenschappen en gebeurtenissen van het component in.

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.

  1. Kies Bestand > Exporteren.

  2. Kies in het pop-upmenu Exporteren het menu-item MXML en afbeeldingen.

  3. Selecteer Afbeeldingen in submap plaatsen als u de afbeeldingen wilt opslaan in een andere map dan de MXML-code.

  4. Selecteer Alleen huidige pagina als u alleen de pagina wilt exporteren die momenteel geselecteerd is.

  5. Klik op Opslaan om het exporteren te voltooien.

    Alle afbeeldingen die bij het prototype horen, worden geëxporteerd naar de afbeeldingenmap. Daarnaast worden afbeeldingen van de volledige MXML-pagina's ook gemaakt met de andere afbeeldingsbestanden. MXML-pagina's hebben deze voorvertoningafbeeldingen niet nodig en deze kunnen worden verwijderd.

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

  1. Kies Opdrachten > Flexibele skin > Flexibele skin exporteren.

  2. Selecteer de map waarnaar u het Fireworks-document wilt exporteren en klik op Openen.

MXML-exportbeperkingen

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

Met MXML-export krijgen componenten geen ander uiterlijk

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

MXML-export negeert segmenten

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.

MXML-eigenschappen zijn beperkt tot eigenschappen van rijke symbolen

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.

Stijlen zijn ingesloten

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.

Frames worden niet ondersteund

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.

  1. Selecteer Opdrachten > AIR-pakket maken en klik op Voorvertoning.

Een Adobe AIR-toepassing maken

  1. Kies Opdrachten > AIR-pakket maken en stel de volgende opties in:

    Toepassingsnaam

    Geef de naam op die in installatievensters wordt weergegeven wanneer gebruikers de toepassing installeren. Met de extensie geeft u de standaardnaam op van de Fireworks-site.

    Toepassings-ID

    Voer een unieke ID in voor uw toepassing. Gebruik in de ID geen spaties of speciale tekens. De enige geldige tekens zijn 0-9, a-z, A-Z, . (punt) en - (streepje). Deze instelling is verplicht.

    Versie

    Geef een versienummer op voor uw toepassing. Deze instelling is verplicht.

    Map Programmamenu

    Geef de map van het menu Start van Windows op waarin u de snelkoppeling wilt plaatsen naar de toepassing die u hebt gemaakt. (Niet van toepassing op Mac OS)

    Beschrijving

    Voeg een beschrijving van de toepassing toe die wordt weergegeven wanneer een gebruiker de toepassing installeert.

    Copyright

    Geef de copyrighttekst op die wordt weergegeven als info van Adobe AIR-toepassingen die op de Macintosh geïnstalleerd zijn. Deze informatie wordt niet gebruikt voor toepassingen die geïnstalleerd zijn onder Windows.

    Inhoud van het pakket

    Selecteer Huidig document om de map van waaruit de bestanden worden opgenomen automatisch te laten selecteren.

    Basisinhoud

    Klik op Bladeren om de pagina te selecteren die wordt weergegeven als basisinhoud. Als u Huidig document hebt geselecteerd, is de basisinhoud automatisch ingesteld.

    Opgenomen bestanden

    Geef op welke bestanden of mappen in uw toepassing worden opgenomen. U kunt HTML- en CSS-bestanden, afbeeldingsbestanden en JavaScript-bibliotheekbestanden toevoegen. Klik op de knop met het plusteken (+) om bestanden toe te voegen, en op het pictogram Map om mappen toe te voegen. Als u een bestand of map uit uw lijst wilt verwijderen, selecteert u het bestand of de map en klikt u op de knop met het minteken (-). De bestanden of mappen die u selecteert om in het Adobe AIR-pakket op te nemen, moeten zich in de basisinhoudmap bevinden.

    Systeemchroom en Transparant

    Geef de stijl van het venster (of de chroom) op die moet worden gebruikt wanneer gebruikers de toepassing op hun computers uitvoeren. Met Systeemchroom wordt de toepassing voorzien van de standaardvensters van het besturingssysteem. Met Transparant chroom wordt de standaardsysteemchroom verwijderd en kunt u een eigen chroom voor de toepassing maken. Met de transparantfunctionaliteiten kunt u toepassingsvensters maken die niet rechthoekig zijn.

    Breedte en Hoogte

    Geef de afmetingen in pixels op van uw toepassingsvenster wanneer dit wordt geopend.

    Pictogramafbeeldingen selecteren

    Klik met de muisknop om aangepaste afbeeldingen voor de toepassingspictogrammen te selecteren. Selecteer de map voor iedere pictogramgrootte en selecteer het afbeeldingsbestand dat u wilt gebruiken. Toepassingspictogrammen voorzien van afbeelding worden alleen in PNG-bestanden ondersteund.

    Opmerking:

    Geselecteerde aangepaste afbeeldingen moeten op de site van de toepassing staan en hun paden moeten relatief zijn ten opzichte van de hoofdmap van de site.

    Digitale handtekening

    Klik op Instellen om uw toepassing te ondertekenen met een digitale handtekening. Deze instelling is verplicht. Zie de volgende sectie voor meer informatie.

    Pakketbestand

    Geef de map op waarin het installatieprogramma van de nieuwe toepassing moet worden opgeslagen (AIR-bestand). De standaardlocatie is de hoofdmap van de site. Klik op de knop Bladeren om een andere locatie te selecteren. De standaardbestandsnaam is gebaseerd op de sitenaam waaraan de extensie .air is toegevoegd. Deze instelling is verplicht.

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.

  1. Ga naar het dialoogvenster AIR-pakket maken. Klik bij de optie Digitale handtekening op de knop Instellen.

  2. Voer in het dialoogvenster Digitale handtekening een van de volgende handelingen uit:

    • Om een toepassing te ondertekenen met een vooraf gekocht digitaal certificaat, klikt u op de knop Bladeren, selecteert u het certificaat, typt u het bijbehorende wachtwoord en klikt u vervolgens op OK.

    • Als u een digitaal certificaat wilt maken dat u zelf ondertekent, klikt u op de knop Maken en vult u het dialoogvenster in. De optie Type toets van het certificaat verwijst naar het beveiligingsniveau van het certificaat: 1024-RSA gebruikt een 1024-bits sleutel (minder veilig) en 2048-RSA gebruikt een 2048-bits sleutel (veiliger). Klik op Maken als u klaar bent. Voer vervolgens het bijbehorende wachtwoord in in het dialoogvenster Digitale handtekening en klik op OK.

      Opmerking: Java® Runtime Environment (JRE) moet op uw computer zijn geïnstalleerd.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid