Ako zmeniť veľkosť plochy Adobe Edge Animate

Plocha je miesto, kde umiestnite svoje prvky, ako sú obrázky, text a nakreslené objekty. Stage je živé HTML okno, čo znamená, že to, čo vidíte na obrazovke, vidí vaše publikum, keď si prezerá vašu kompozíciu a interaguje s ňou. Veľkosť plochy môžete nastaviť niekoľkými rôznymi spôsobmi:

• Pixely: Adobe Edge Animate CC vám umožňuje nastaviť plochu tak, aby si zachovala určitú veľkosť bez ohľadu na veľkosť okna prehliadača.

• Percento: Pre tých, ktorí uprednostňujú responzívnejší webový dizajn.

• Testovanie responzívneho webového dizajnu: Možno budete chcieť zmeniť farbu pozadia plochy, aby ste otestovali citlivosť svojho dizajnu.

Nastavenie veľkosti plochy podľa hodnôt v pixeloch

S najväčšou pravdepodobnosťou jedným z prvých krokov, ktoré budete chcieť urobiť, je správne nastavenie veľkosti plochy. Ak plánujete vložiť svoju animáciu na existujúcu webovú stránku, najprv určte, koľko miesta má vaša animácia zaberať na tejto stránke, a podľa toho upravte veľkosť plochy.

Ak chcete zmeniť veľkosť plochy, kliknite na oranžové čísla v časti Plocha na paneli Vlastnosti – v stĺpci úplne vľavo v hornej časti obrazovky – ako je znázornené. Kliknutím na čísla šírky alebo výšky môžete zadať presné rozmery (v pixeloch), ktoré chcete, aby mala vaša plocha.

Ak nechcete zadávať čísla, Edge Animate vám ponúka alternatívny spôsob zmeny veľkosti plochy: jednoducho umiestnite kurzor na jedno z oranžových čísel. Keď sa kurzor zmení na dvojitú šípku (ako je znázornené), môžete kliknutím a ťahaním zväčšiť alebo zmenšiť veľkosť plochy.

Nastavenie veľkosti plochy podľa percent veľkosti obrazovky

Ak chcete vytvoriť animáciu, ktorá nemusí zodpovedať žiadnemu konkrétnemu rozmeru, potom by ste mali prepnúť z pixelov (px) na percentá (%) kliknutím na prepínač (pozri tento obrázok). Toto je jeden krok k vytvoreniu responzívneho webového dizajnu. Keď zmeníte veľkosť plochy podľa percent obrazovky namiesto hodnôt v pixeloch, samotná plocha sa zväčší podľa veľkosti nadradeného prvku.

Jedným z príkladov rodičovského prvku môže byť samotné okno prehliadača – ak je animácia samostatnou webovou stránkou. Ak je však animácia jednou časťou webovej stránky, potom rodičovským prvkom môže byť prvok div, v ktorom je animácia vnorená.

Ak chcete, aby vaša plocha vyplnila celé okno prehliadača, nastavte šírku a výšku plochy na 100 %, ako je znázornené na tomto obrázku. Ak chcete, aby plocha zaplnila polovicu okna prehliadača, nastavte plochu na 50 %; a tak ďalej, v závislosti od toho, akú veľkú časť okna prehliadača chcete, aby vaša animácia zaberala.

Pozadie plochy je štandardne biele. Preto pri prepínaní medzi pixelmi a %.

Ak chcete otestovať rozdiel medzi použitím px a % pre veľkosť plochy, zmeňte farbu pozadia plochy na inú ako bielu, napríklad červenú. Potom experimentujte s rôznymi percentami a rozmermi pixelov, aby ste videli rôzne efekty.

Ak chcete zmeniť farbu pozadia plochy (ako je znázornené), kliknutím na biely štvorec otvorte výber farby.

Môžete povedať Edge Animate, aby zachoval rovnaké proporcie šírky a výšky, kliknutím na ikonu Link Width and Height (zvýraznená na tomto obrázku). V predvolenom nastavení je ikona Link Width and Height vypnutá; s týmto predvoleným nastavením nebude Edge Animate pri zmene veľkosti zachovávať šírku (alebo výšku) v rovnakom pomere.