Du behöver inte vara expert på Flash för att skapa prototyper . Programmets flexibilitet gör prototyper med begränsade kunskaper i ActionScript 3 . Rapid prototyping hjälper användarna visualisera slutprodukten . Flash kan du skapa prototyper av varierande trohet ( hur nära prototypen liknar slutprodukten ) , vilket gör det enkelt att uppdatera interaktiva skikt och designkoncept från enkla wireframes till detaljerade genomförda konstruktioner . Instruktioner
Förberedelser
1
Skapa bilder som representerar de nödvändiga skärmar och stater , med hjälp av programvara som Fireworks , Photoshop eller Corel . Trohet dina bilder kan vara allt från wireframe till visuella mönster ( se referens 2 ) .
2
Öppna Flash och klicka på " File" och sedan klicka på " Ny " och klicka sedan på " Flash-fil ( ActionScript 3.0 ) " i menyn som öppnas . Klicka på " Fönster " i huvudmenyn och sedan på "Egenskaper" och klicka sedan på "Egenskaper" igen i utdragbar menyn . Skriv " 1024px " i " W "-fältet och " 768px " i " H " fältet .
3
Spara filen genom att klicka på " File " i huvudmenyn och sedan klicka på " Spara som , " skriva in ett namn ( t.ex. " proto " ) och sedan klicka på " Spara ".
4
Importera dina bilder genom att klicka på " File "och sedan klicka på " Importera " och sedan klicka på " importera till bibliotek . " Bläddra till den plats där dina bilder klicka sedan på " Öppna". Om dina bilder är i ordning , kommer Flash importerar automatiskt dem som nyckelbildrutor i det markerade lagret , annars måste du lägga till nyckelrutor genom att högerklicka på ramen , och sedan klicka på " Infoga nyckelbildruta " i utdragbar menyn för varje bilden ( se referens 3 ) .
5
Namn lagret " Wire " genom att dubbelklicka på " Layer 1 " och trycka på " Enter " på tangentbordet . Lägg keyframes mellan bilder på tidslinjen genom att klicka på den första bildrutan och tryck " F5 " på tangentbordet fyra gånger ( se referens 2 ) .
6
Ge dina bildramar namn genom att klicka på " Fönster " i huvudmenyn och sedan klicka på "Egenskaper" och sedan klicka på "Egenskaper" igen i utdragbar menyn . Med en bild ramen markerad och ange bildens namn i " Frame Label " fältet . Upprepa denna process till de andra bilderna ( se referens 2 ) .
7
Skapa ett nytt lager genom att klicka på " Insert Layer " längst ned på tidslinjen och namnge den " AS3 . " Högerklicka på bildruta 1 på " AS3 " lagret , klicka sedan på " Action " i den utdragbara menyn . Skriv in följande kod :
stop ( ) ;
( . Se referens 2 )
Knapp
8
Dubbel - klicka " Fill color " i verktygsfältet och klicka sedan på " None " för färgen ( det blir lådan med en diagonal röd linje ) . Dubbelklicka på " Stroke Color " i verktygsfältet och ange ett värde för " 3 " för " Stroke höjd , " klicka sedan någon färg ( se referens 2 ) .
9
Klicka på " Rektangel " verktyg i verktygsfältet och , medan du håller ner musknappen och dra över scenen för att rita en rektangel . Rektangeln ska vara en lämplig storlek för klickbara områden . Klicka på " Rektangel " verktyg , sedan i huvudmenyn klicka på " Ändra " och sedan på " Konvertera till Ny symbol " i den utdragbara menyn . Klicka på " knappen " radial rutan och skriv in " Button_btn " för namnet ( se referens 2 ) .
10
Dubbelklicka på knappen för att öppna dess tidslinje . Högerklicka på bildrutan med etiketten " Hit " och välj " Infoga nyckelbildruta . " Ändra färg på knappen . Gör samma sak för " Over . " Stryk färgen för " Up ". Detta kommer att ge dig en osynlig knapp som ska markeras när användaren för muspekaren över den . Klicka på " Scene 1 " längst ned på tidslinjen för att avsluta knappens tidslinje . Radera knapp från scenen ( se referens 2 ) .
11
Skapa ett nytt lager genom att klicka på " Insert Layer " längst ned på tidslinjen , och namnge det nya lagret " Buttons . " Sätt keyframes i " Knappar " lager på samma ramnummer som bilderna i " Wire " lagret ( se referens 2 ) .
12
Dra en " knapp " från biblioteket och placera den på scenen. Klicka på " Fönster " i huvudmenyn och sedan på "Egenskaper" och klicka sedan på "Egenskaper" igen i utdragbar menyn . Med knappen fortfarande markerad , skriv in ett unikt exempel namn , t.ex. namnet på sidan kommer det att navigera till , till exempel , " page1_btn " ( se referens 2 ) .
13
Högerklicka Frame 1 av " AS3 " lagret , klicka sedan på " Action " i den utdragbara menyn . Skriv in följande kod , ersätter " Sida1 " för dina namn bildruteetikett :
page1_btn.addEventListener ( MouseEvent.CLICK , onPage1 , falskt , 0 , true ) ;
funktion onPage1 ( evt : MouseEvent ) : . void {
gotoAndStop ( " page1 " ) ;
}
14
Upprepa processen för andra sidor
