Arbetsflöde för att skapa prototyper

Du kan, genom att kombinera panelen Sidor med andra kraftfulla Fireworks-funktioner, snabbt skapa interaktiva webb- och programprototyper. Om du vill konvertera en klar prototyp till en fungerande webbplats exporterar du den till Adobe Flash®, Adobe Flex®, Adobe AIR™ eller Adobe Dreamweaver®.

Om du vill ha allmänna tips om hur du skapar prototyper för arbetsflöden läser du i följande artiklar på Fireworks Developer Center:

En självstudievideo om att hur du skapar prototyper för programgränssnitt finns på www.adobe.com/go/lrvid4034_se.

Skapa sidorna

I panelen Sidor skapar du önskat antal sidor eller skärmar för den första designen. Vartefter designen utvecklas kan du lägga till och ta bort sidor.

Utforma gemensamma designelement

På arbetsytan utformar du sådana designelement som du vill ha på flera sidor, t.ex. navigeringsfält och bakgrundsbilder. Använd smarta stödlinjer när du justerar elementen. Strukturera layouten med CSS för att få maximal flexibilitet. (Se Smarta stödlinjer och Skapa CSS-baserad layout.).

Använda gemensamma element på flera sidor

När du använder gemensamma element uppdateras automatiskt alla aktuella sidor med en enda ändring. Använd en mallsida för att dela alla element som sidan innehåller, eller dela lager föra att kopiera underuppsättningar av element. (Se Använd en mallsida och Dela lager.)

Lägga till unika element på enskilda sidor

På varje sida lägger du till ett unikt design-, navigerings- och formelement. I panelen Gemensamt bibliotek finns ett antal knappar, textrutor och snabbmenyer som gör att designprocessen går mycket fortare. Komponentsymboler i mapparna Flex-komponenter, HTML, Mac, Win, Webb och program, samt Menyfält innehåller egenskaper som du kan anpassa för individuella symbolförekomster. (Se Skapa och använda komponentsymboler.)

Simulera användarnavigering med länkar

Från webbobjekt som segment, aktiveringspunkter och navigeringsknappar skapar du länkar mellan de olika sidorna i prototypen. (Se Länka till sidor i ett Fireworks-dokument.)

Exportera den färdiga interaktiva prototypen

Fireworks möjliggör flera exportformat för din prototyp vilka alla behåller hypertextlänkar för sidnavigering. Se följande artiklar:

Skapa CSS-baserad layout

Du kan utforma CSS-baserade layouter i ett Fireworks-dokument och sedan konvertera dem till HTML-sidor med CSS-regler som replikerar dina layouter. CSS-baserade layouter utgör ett standard-baserat tillvägagångssätt och ger en kod som kan användas i olika webbläsare.

En videosjälvstudiekurs om hur du skapar CSS-baserade HTML-sidlayouter finns på www.adobe.com/go/lrvid4035_se. Se även följande resurser:

CSS-sidlayout

Med Fireworks kan du utforma sidor och genast exportera HTML- och CSS-koden genom att använda en exporthanterare som analyserar placeringen av objekten. Dessutom kan du ange sidjustering och en upprepande bakgrundsbild.

Du kan använda HTML-elementen som finns i HTML-mappen i Gemensamt bibliotek. HTML-mappen innehåller HTML-element som knappar, listruteobjekt och textfält. Du kan redigera egenskaperna för elementen med hjälp av panelen Symbolegenskaper. När du drar ett formelement till sidan infogas taggen <form> när den CSS-baserade layouten exporteras.

All text som du har placerat ett segment på visas som bilder i den exporterade HTML-filen. Om du vill att den här texten ska visas som text använder du HTML-komponenterna från Gemensamt bibliotek. HTML-komponenterna innehåller rubrik 1-6 och länkelement.

Regler för CSS-baserade layouter

Du måste följa några regler när du skapar CSS-baserade layouter för att få de resultat du förväntar dig.

Regel 1: Använd rektanglar när du exporterar text och segment till exportbilder

Exporthanteraren exporterar text som har placerats i rektanglar. Eftersom det bara är bilder som är täckta med rektangulära segment som exporteras, placerar du segment på bilderna och exporterar dem. Dessa segment "talar om" för exporthanteraren var bilderna finns.

Regel 2: Undvik att överlappa objekt

Exporthanteraren behandlar text, bilder och rektanglar som rektangulära block. Hanteraren undersöker storlek och position på objekten för att fastställa de logiska raderna och kolumnerna och kunna placera dem i layouten. Placera objekten noggrant så att kanterna inte överlappar varandra.

Regel 3: Planera layouten för rader och kolumner

Exporthanteraren letar efter logiska partitioner där en tydlig och synbar linje kan placeras mellan objekt eller grupper av objekt. Omslut kolumnlayouterna i en rektangel för att förhindra att en logisk rad som bryter kolumnlayouten infogas.

Regel 4: Behandla dokumentet som tvådimensionellt

När du utformar sidan; använd rektanglar för att omsluta objekt som du vill behandla som underordnade rektanglar. Sådana underordnade och överordnade relationer upptäcks i exporthanteraren. De underordnade elementen skannas för logiska rader och kolumner, som i regel 3.

Förutom dessa regler bör du tänka på följande:

  • Endast primitiva rektanglar exporteras. Om du vill exportera rundade hörn i rektanglar placerar du rektangulära segment ovanpå dem.

  • Om du vill exportera linjerna i rektanglar placerar du rektangulära segment ovanpå de rektanglar som har sådana.

  • Om du vill exportera symboler placerar du ett rektangulärt segment ovanpå dem.

  • Om du vill exportera filter som du har använt i text eller rektanglar, placerar du rektangulära segment ovanpå dem.

Exportera en CSS-layout

Fireworks låter dig exportera layouter som du skapar som CSS-baserade filer. Du kan sedan öppna och redigera dessa CSS-baserade filer i Dreamweaver eller en annan CSS-kompatibel redigerare.

  1. Välj Arkiv > Exportera.

  2. På snabbmenyn Exportera väljer du CSS och bilder.

  3. Ange HTML-sidans egenskaper genom att klicka på Alternativ.

  4. Klicka på Bläddra om du vill ange en bakgrundsbild och ställa in om bakgrundsbilden ska upprepas:

    • Välj Ingen upprepning om bilden endast ska visas en gång.

    • Välj Upprepa om du vill att bilden ska visas upprepade gånger i både vertikal och horisontell ledd.

    • Välj Upprepa x om du vill att bilden ska visas upprepade gånger i horisontell ledd.

    • Välj alternativet Upprepa y om du vill att bilden ska visas upprepade gånger i vertikal ledd.

  5. Välj sidjustering på webbläsaren som vänster, centrera eller höger.

  6. Markera bilagsrullning som fast eller rullande.

  7. Klicka på OK och sedan på Spara.

Skapa en dokumentdemonstration

Du kan skapa en demonstration av det Fireworks-dokument som du arbetar med. Demonstrationen öppnas i en webbläsare som visar funktionerna och som låter dig navigera genom sidorna.

  1. Välj Kommando > Demonstrera aktuellt dokument.

  2. Välj de sidor du vill skapa en demonstration för och klicka på Skapa demo.

  3. Markera mappen och klicka på Öppna.

Skapa prototyper av Flex-program

Prototyp-skapandet för Flex är som det arbetsflöde som används för webbplatser och programvarugränssnitt. (Se Arbetsflöde för att ta fram prototyper.) Med Fireworks kan du dra Flex-komponenter till arbetsytan, ange deras egenskaper och exportera det resulterande användargränssnittet till MXML. Du kan sedan förfina ett sådant gränssnitt i Flex Builder.

Skapa Flex-användargränssnitt

I panelen Sidor skapar du önskat antal sidor i gränssnittsskärmarna för den första designen.

Infoga Flex-designkomponenter i layouten

På arbetsytan infogar du Flex-komponenter från Flex-mappen i panelen Gemensamt bibliotek. Dessa komponentsymboler fungerar specifikt med MXML-export och ser till att du får de resultat du förväntar dig. När du exporterar ditt dokument som MXML, konverteras dessa symboler till resp. MXML-tagg. Objekt som inte känns igen som Flex-komponenter exporteras istället som bitmappar, som länkas till MXML genom en <mx:Image>-tagg. (Se Skapa och använda komponentsymboler.)

Obs!

När du redigerar en Flex-designkomponent i Fireworks kan du kopiera den modifierade XML-koden till ditt Flex-projekt. Detta sparar tid för dig när du vill replikera det modifierade komponentbeteendet i projektet.

Symbolerna Cursor, ScrollBar, Tab och ToolTip ignorerar vid en MXML-utmatning eftersom dessa komponenter inte har en direkt översättning från Fireworks till MXML. Ett exempel: symbolen ScrollBar visas automatiskt i Flex-behållarförekomster när det går att rulla i deras innehåll. I Fireworks fungerar dessa symboler helt enkelt som indikatorer på hur delar av en gränssnittsdesign fungerar.

Obs!

Bildsegment, överrullningar och aktiveringspunkter används bara i HTML-baserade prototyper. Undvik dessa webbobjekt när du skapar Flex-prototyper.

Dela gemensamma Flex-komponenter över flera sidor

När du delar en Flex-komponent över flera sidor uppdaterar en ändring automatiskt alla påverkade sidor (eller skärmar). Du kan använda en mallsida för att dela alla Flex-komponenter den innehåller, eller dela lager för att kopiera underuppsättningar av komponenter. (Se Använd en mallsida och Dela lager.)

Ange egenskaper för Flex-komponenterna

I panelen Symbolegenskaper (Fönster > Symbolegenskaper), anger du egenskaper och händelser för varje Flex-komponent som du infogat på arbetsytan.

Exportera en Flex-layout till MXML

Exportera Flex-användargränssnittets layout och öppna den resulterande MXML-filen i Flex. Fireworks exporterar nödvändig MXML med all formateringsinformation och absolut placering bevarad. Flex-utvecklare kan använda det här gränssnittet utan att behöva skapa layouten i Flex på nytt.

Redigera Flex-komponentegenskaper

Du kan redigera egenskaperna och händelserna för Flex-komponenter i panelen Symbolegenskaper.

  1. Välj Flex-komponenten på arbetsytan.

  2. Öppna panelen Symbolegenskaper (Fönster > Symbolegenskaper).

  3. Ange egenskaperna och händelserna för komponenten i panelen Symbolegenskaper.

Exportera ett Fireworks-dokument till MXML

Fireworks kan hjälpa dig med layouten av RIA-program (Rich Internet Applications) genom att aktivera exporten av gemensamma bibliotekstillgångar som kända komponenter för användning i Adobe Flex Builder. Fireworks exporterar nödvändig Flex-kod (MXML) med formateringsinformation och absolut placering bevarad.

När du slutför en Flex-programprototyp exporterar du den till MXML för vidare redigering i Flex Builder. I designvyn ser prototypen ut som dess Fireworks-motsvarighet, förutom för komponenter som markörer och rullningslister som inte exporteras.

  1. Välj Arkiv > Exportera.

  2. På snabbmenyn Exportera väljer du MXML och bilder.

  3. Välj Lägg bilder i undermappen om du vill spara bilderna i en separat mapp från MXML-koden.

  4. Välj Endast aktuell sida om du bara vill exportera den aktuella sidan.

  5. Klicka på Spara för att slutföra exporten.

    Alla bilder som är associerade med prototypen exporteras till bildmappen. Dessutom skapas även bilder av de kompletta MXML-sidorna med de övriga bildfilerna. MXML-sidor kräver inte dessa förhandsvisningsbilder och kan tas bort.

Skapa och exportera Flex-skal

Du kan skapa skal för Flex-komponenter i Fireworks och sedan exportera dem för användning när du bygger Flex-baserade webbplatser och programgränssnitt.

Flex-skalkomponenter

Du kan skapa skal för ett antal olika Flex-komponenter baserat på Flex-skalmallar och redigera dem i Fireworks.

  1. Välj Kommando > Flex-skal > Nytt Flex-skal.

  2. Gör något av följande:

    • Skapa Flex-skal för alla tillgängliga komponenter genom att markera Multipla komponenter.

      Fireworks skapar ett dokument med alla tillgängliga Flex-komponenter.

    • Ange de komponenter som du vill skapa skal för genom att markera Specifika komponenter.

      Välj bara komponenterna med en specifik tillhörande stil eller markera alla förekomster av komponenten.

  3. Klicka på OK.

Exportera Flex-skal

  1. Välj Kommando > Flex-skal > Exportera Flex-skal.

  2. Markera den mapp till vilken du vill exportera Fireworks-dokumentet och klicka på Öppna.

Begränsningar vid MXML-export

Innan du använde Flex MXML-exportfunktionen är det viktigt att du känner till dess funktioner och begränsningar:

När du exporterar till MXML skapas inte skal för komponenter

Export till MXML skapar inte skal för komponenter i Flex, även om du ändrat dem i Fireworks. MXML-export genererar helt enkelt MXML-dokument för användning i Flex. Dessa dokument kan även innehålla länkade bilder för Fireworks-objekt som inte kan konverteras till MXML-taggar. Dessa bilder läggs till i MXML-dokumenten via <mx:Image>-taggar.

När du exporterar till MXML ignoreras segment

Eftersom MXML-exporten är utformad att generera ett taggbaserat dokument för användning med Flex, beaktas inte segment när du skapar bilder eller tabellceller. När MXML-exporten skapar bilder används dokumentets optimeringsinställningar för att fastställa bildformatet och komprimeringsmetoden.

MXML-egenskaper är begränsade till symbolegenskaper

MXML-exportfunktionen baserar egenskaperna för en MXML-tagg på Flex-komponenten i Fireworks. Fireworks tillhandahåller en underuppsättning av Flex-komponenter med ett begränsat antal egenskaper.

Format bäddas in

Egenskaper som känns igen som format separeras från de MXML-taggar som skapas, men behålls i samma MXML-dokument i en <mx:Style>-tagg. Fireworks kan inte definiera formaten i en extern CSS-fil.

Ramar stöds inte

När du skapar designer och layouter för MXML-utmatning får du inte använda ramar. Om du vill ha olika designer i ett dokument använder du sidor.

Skapa prototyper av Adobe AIR-program

Med Adobe® AIR™ för Fireworks kan du omvandla en Fireworks-prototyp till ett program. Ett exempel: vissa prototypsidor interagerar med varandra vid visning av data. Du kan använda Adobe AIR till att paketera den här uppsättningen med sidor till ett litet program som kan installeras på en användares dator. När användaren kör programmet från skrivbordet läser programmet in och visar prototypen i sitt eget programfönster, oberoende av webbläsare. Användare kan sedan bläddra i prototypen lokalt på datorn utan behov av en Internet-anslutning.

Mer information finns i Ethan Eismanns artikel om Adobe AIR och "upplevelsestämpeln": http://www.adobe.com/go/learn_fw_airexperiencebrand_se.

Lägga till Adobe AIR-mushändelser

Du kan lägga till fördefinierade Adobe AIR-mushändelser i objekt i dokumentet. I Fireworks kan du ange fyra mushändelser: stänga fönster, dra fönster, maximera fönster och minimera fönster.

  1. Markera de objekt på arbetsytan som du vill använda mushändelsebeteende på.

  2. Välj Kommandon > AIR Mouse-händelser och välj händelsen.

Förhandsvisa ett Adobe AIR-program

Du kan förhandsvisa ett Adobe AIR-program utan att ange Adobe AIR-programparametrar.

  1. Väjl Kommandon > Skapa AIR-paket och klicka på Förhandsvisa.

Skapa ett Adobe AIR-program

  1. Välj Kommando > Skapa AIR-paket och ange följande alternativ:

    Programnamn

    Ange det namn som visas i installationsfönstren när användare installerar programmet. Filtillägget anger namnet på Fireworks-webbplatsen som standard.

    Program-ID

    Ange ett unikt ID för programmet. Använd inte blanksteg eller specialtecken i ID:t. De enda giltiga tecknen är 0-9, a-z och A-Z, . (punkt), och - (streck). Den här inställningen är obligatorisk.

    Version

    Anger ett versionsnummer för programmet. Den här inställningen är obligatorisk.

    Programmenymapp

    Ange en mapp på Windows Start-meny där du vill att genvägen till programmet ska skapas. (Gäller ej Mac OS)

    Beskrivning

    Lägg till en beskrivning av programmet som visas när användare installerar det.

    Copyright

    Ange ett copyrightmeddelande som visas i Om-informationen för Adobe AIR-program som installeras i Mac OS. Denna information används inte för program som installeras i Windows.

    Paketinnehåll

    Välj aktuellt dokument för att automatiskt välja den mapp som filerna ska inkluderas från.

    Rotinnehåll

    Klicka på Bläddra för att välja den sida som ska visas som rotinnehåll. Om du valde Aktuellt dokument anges rotinnehållet automatiskt.

    Inkluderade filer

    Ange vilka filer eller mappar som ska tas med i programmet. Du kan lägga till HTML- och CSS-filer, bildfiler och JavaScript-biblioteksfiler. Klicka på plusknappen (+) för att lägga till filer och på mappikonen för att lägga till mappar. Om du vill ta bort en fil eller mapp från listan markerar du filen eller mappen och klickar på minusknappen (-). De filer eller mappar som du angav skulle ingå i Adobe AIR-paketet måste tillhöra rotinnehållsmappen.

    Systemkrom och Genomskinlig

    Ange det fönsterformat (eller det krom) som ska användas när användare kör programmet på sina datorer. Systemkrom omger programmet med operativsystemets standardfönsterkontroll. Med Genomskinlig elimineras standardsystemfärgen och du får skapa en egen färg för programmet. Med de genomskinliga funktionerna kan du skapa programfönster som inte är rektangulära.

    Bredd och Höjd

    Ange måtten på programfönstret när det öppnas i pixlar.

    Välj ikonbilder

    Klicka för att välja egna bilder för programikonerna. Välj mapp för varje ikonstorlek och välj den bildfil du vill använda. PNG-filer kan bara hanteras för programikonbilder.

    Obs!

    De valda anpassade bilderna måste finnas på programwebbplatsen och sökvägarna till dem måste vara relativa roten för webbplatsen.

    Elektronisk underskrift

    Klicka på Ställ in om du vill signera programmet med en digital signatur. Den här inställningen är obligatorisk. Mer information finns i följande avsnitt.

    Paketfil

    Ange den mapp där det nya programinstallationsprogrammet (.air-fil) sparas. Standardplatsen är webbplatsens rot. Klicka på Bläddra för att välja en annan plats. Standardfilnamnet baseras på webbplatsens namn med filtillägget .air. Den här inställningen är obligatorisk.

Signera ett Adobe AIR-program med ett digitalt certifikat

En digital signatur är en försäkring på att koden för ett program inte har ändrats eller förstörts sedan den skapades av programmets författare. Alla Adobe AIR-program kräver en digital signatur och kan inte installeras utan en sådan.

  1. I dialogrutan Skapa AIR-paket klickar du på knappen Ange, bredvid alternativet Digital signatur.

  2. Gör något av följande i dialogrutan Digital signatur:

    • Om du vill signera ett program med ett köpt elektroniskt certifikat klickar du på knappen Bläddra, väljer certifikatet, anger tillhörande lösenord och klickar sedan på OK.

    • Om du vill skapa ett eget digitalt certifikat klickar du på knappen Skapa och fyller i fälten i dialogrutan. Certifikattypsalternativet betecknar certifikatets säkerhetsnivå: 1024-RSA använder en 1024-bitars nyckel (mindre säkert) och 2048-RSA använder en 2048-bitars nyckel (mer säkert). Klicka på Skapa när du är klar. Ange sedan motsvarande lösenord i dialogrutan Digital signatur och klicka på OK.

      Obs! Det måste finnas en installerad JRE (Java Runtime Environment) på datorn.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy