Hvordan endre størrelsen på Adobe Edge Animate Stage

Scenen er der du skal plassere elementene dine, for eksempel bilder, tekst og tegnede objekter. The Stage er et levende HTML-vindu, som betyr at det du ser på skjermen, er det publikum ser når de ser på og samhandler med komposisjonen din. Du kan dimensjonere scenen på et par forskjellige måter:

• Piksler: Adobe Edge Animate CC lar deg stille inn scenen til å forbli en bestemt størrelse uansett størrelsen på nettleservinduet.

• Prosentandel: For de som foretrekker et mer responsivt webdesign.

• Testing av responsiv webdesign: Det kan være lurt å endre bakgrunnsfargen på scenen for å teste responsen til designet ditt.

Dimensjoner scenen din etter pikselverdier

Mest sannsynlig er et av de første trinnene du vil ta, å dimensjonere scenen din riktig. Hvis du planlegger å sette inn animasjonen på en eksisterende nettside, må du først finne ut hvor mye plass du vil at animasjonen skal ta opp på siden, og deretter dimensjonere scenen deretter.

For å endre størrelse på scenen, klikk på de oransje tallene i scenedelen av egenskapspanelet – i kolonnen helt til venstre nær toppen av skjermen – som vist. Ved å klikke på bredde- eller høydetallene kan du skrive inn de nøyaktige dimensjonene (i piksler) du vil at scenen skal ha.

Hvis du ikke vil skrive inn tallene, gir Edge Animate deg en alternativ metode for å endre størrelse på scenen: Bare plasser markøren over et av de oransje tallene. Når markøren blir til en dobbel pil (som vist), kan du klikke og dra for å øke eller redusere størrelsen på scenen.

Størrelse på scenen din etter prosentandel av skjermstørrelsen

Hvis du vil lage en animasjon som ikke trenger å passe til noen spesifikk dimensjon, bør du bytte fra piksler (px) til prosentandel (%), ved å klikke på bryteren (se denne figuren). Dette er ett skritt for å lage et responsivt webdesign. Når du størrelser scenen etter skjermprosent i stedet for etter pikselverdier, størrelser scenen seg selv i henhold til størrelsen på det overordnede elementet.

Et eksempel på et overordnet element kan være selve nettleservinduet - hvis animasjonen er en frittstående nettside. Men hvis animasjonen er en del av en nettside, kan det overordnede elementet være et div-element som animasjonen er nestet innenfor.

For å få scenen til å fylle hele nettleservinduet, sett scenebredden og høyden til 100 %, som vist i denne figuren. For å få scenen til å fylle halve nettleservinduet, sett scenen til 50 %; og så videre, avhengig av hvor mye av nettleservinduet du vil at animasjonen skal oppta.

Som standard er bakgrunnen til scenen hvit. Derfor vil du ikke se noen forskjell i scenen når du bytter mellom px og %.

For å teste forskjellen mellom å bruke px og % for scenestørrelse, endre bakgrunnsfargen på scenen til noe annet enn hvitt, for eksempel rødt. Eksperimenter deretter med forskjellige prosenter og px-dimensjoner for å se de forskjellige effektene.

For å endre bakgrunnsfargen på scenen (som vist), klikk på den hvite firkanten for å få frem en fargevelger.

Du kan fortelle Edge Animate å holde bredde- og høydeproporsjonene de samme ved å klikke på ikonet Link Width og Height (uthevet i denne figuren). Som standard er ikonet for koblingsbredde og -høyde slått av; med denne standarden i kraft, vil ikke Edge Animate beholde bredden (eller høyden) i samme proporsjon når du endrer størrelse.