Hur du ändrar Adobe Edge Animation Stage - dummies

Steget är där du placerar dina element, t.ex. bilder, text och ritade objekt. Scenen är ett levande HTML-fönster, vilket innebär att det du ser på skärmen är vad publiken ser när de ser och interagerar med din komposition. Du kan dimensionera scenen på ett par olika sätt:

• Pixlar: Med Adobe Edge Animate CC kan du ställa in scenen för att förbli en viss storlek oavsett storleken på webbläsarfönstret.

• Procent: För de som föredrar en mer lyhörd webbdesign.

• Testa responsiv webbdesign: Du kanske vill ändra bakgrundsfärgen på scenen för att testa din designs lyhördhet.

Storleksanpassa ditt scen med pixelvärden

Det är troligt att en av de första stegen du vill ta är att dimensionera ditt steg korrekt. Om du planerar att infoga din animering i en befintlig webbsida, bestämma först hur mycket utrymme du vill att din animering ska ta upp på den sidan och sedan dimensionera scenen i enlighet därmed.

Om du vill ändra storlek på scenen klickar du på orange siffror i avsnittet Stage på panelen Egenskaper - i kolumnen till vänster längst upp på skärmen - som visas. Genom att klicka på bredd- eller höjdnumren kan du skriva in de exakta dimensionerna (i pixlar) som du vill att ditt scen ska ha.

Om du inte vill skriva in siffrorna, ger Edge Animate dig en alternativ metod för att ändra storlek på scenen: Placera markören bara över ett av de orange siffrorna. När markören blir en dubbelpil (som visat) kan du klicka och dra för att öka eller minska scenens storlek.

Om du vill skapa en animering som inte behöver passa någon specifik dimension, bör du byta från pixlar (px) till procent () %), genom att klicka på växeln (se denna figur). Detta är ett steg för att skapa en lyhörd webbdesign. När du storlekerar scenen med skärmprocent istället för pixelvärden, kommer scenstorleken i sig enligt storleken på moderelementet.

Ett exempel på ett moderelement kan vara själva webbläsarfönstret - om animationen är en fristående webbsida. Om animeringen är en del av en webbsida kan dock moderelementet vara ett div-element inom vilket animeringen är kapslad.

För att få ditt steg att fylla i hela webbläsarfönstret, sätt stegbredden och höjden till 100%, som visas i denna figur. För att få ditt steg fyllt hälften av webbläsarfönstret ställer du scenen till 50%; och så vidare, beroende på hur mycket av webbläsarfönstret du vill att din animation ska uppta.

Som standard är scenens bakgrund vit. Därför ser du ingen skillnad i scenen när du växlar mellan px och%.

För att testa skillnaden mellan att använda px och% för scenstorlek, ändra bakgrundsfärgen på scenen till något annat än vitt, till exempel rött. Experimentera sedan med olika procentandelar och px dimensioner för att se de olika effekterna.

Om du vill ändra bakgrundsfärgen på scenen (som visas) klickar du på den vita rutan för att få fram en färgplockare.

Du kan berätta Edge Animate för att hålla bredden och höjdproportionerna samma genom att klicka på ikonen Link Width and Height (markerad i denna figur). Som standard är ikonen Link Width and Height avstängd. Med den här standarden kommer Edge Animate inte att hålla bredden (eller höjden) i samma proportion när du ändrar storlek.