Hur man ändrar storlek på Adobe Edge Animate Stage

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

• Pixels: Adobe Edge Animate CC gör att du kan ställa in scenen så att den förblir en viss storlek oavsett storleken på webbläsarfönstret.

• Andel: För dig som föredrar en mer responsiv webbdesign.

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

Ändra din scen efter pixelvärden

Troligtvis är ett av de första stegen du vill ta att dimensionera din scen korrekt. Om du planerar att infoga din animation på en befintlig webbsida, bestäm först hur mycket utrymme du vill att din animation ska ta upp på den sidan och storleksanpassa sedan scenen därefter.

För att ändra storlek på scenen klickar du på de orange siffrorna i avsnittet Stage på panelen Egenskaper – längst till vänster längst upp på skärmen – som visas. Genom att klicka på siffrorna för bredd eller höjd kan du skriva in de exakta måtten (i pixlar) som du vill att din 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 helt enkelt markören över ett av de orangea siffrorna. När markören förvandlas till en dubbelpil (som visas), kan du klicka och dra för att öka eller minska storleken på scenen.

Anpassa din scen efter procentandel av skärmstorleken

Om du vill skapa en animation som inte behöver passa någon specifik dimension, bör du byta från pixlar (px) till procent (%), genom att klicka på reglaget (se den här bilden). Detta är ett steg för att skapa en responsiv webbdesign. När du storleksanpassar scenen efter skärmprocent istället för efter pixelvärden, anpassar scenen sig själv efter storleken på det överordnade elementet.

Ett exempel på ett överordnat element kan vara själva webbläsarfönstret - om animeringen är en fristående webbsida. Men om animeringen är en del av en webbsida kan det överordnade elementet vara ett div-element inom vilket animeringen är kapslad.

För att få din scen att fylla hela webbläsarfönstret, ställ in scens bredd och höjd till 100 %, som visas i den här bilden. För att din Stage ska fylla halva webbläsarfönstret, ställ in Stage till 50 %; och så vidare, beroende på hur stor del av webbläsarfönstret du vill att din animation ska uppta.

Som standard är bakgrunden på scenen vit. Därför kommer du inte att se någon 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 procentsatser och px-dimensioner för att se de olika effekterna.

För att ändra bakgrundsfärgen på scenen (som visas), klicka på den vita fyrkanten för att få fram en färgväljare.

Du kan säga åt Edge Animate att behålla bredd- och höjdproportionerna desamma genom att klicka på ikonen Länkbredd och höjd (markerad i den här bilden). Som standard är ikonen för länkbredd och -höjd avstängd; Med denna standard i kraft kommer Edge Animate inte att hålla bredden (eller höjden) i samma proportion när du ändrar storlek.