Jak změnit velikost Adobe Edge Animate Stage

Plocha je místo, kam umístíte své prvky, jako jsou obrázky, text a nakreslené objekty. Stage je živé HTML okno, což znamená, že to, co vidíte na obrazovce, vidí vaše publikum, když si prohlíží vaši kompozici a interaguje s ní. Velikost Stage můžete upravit několika různými způsoby:

• Pixely: Adobe Edge Animate CC umožňuje nastavit vymezenou plochu tak, aby si zachovala určitou velikost bez ohledu na velikost okna prohlížeče.

• Procento: Pro ty, kteří preferují responzivnější webový design.

• Testování responzivního návrhu webu: Možná budete chtít změnit barvu pozadí vymezené plochy, abyste otestovali citlivost svého návrhu.

Změna velikosti plochy podle hodnot pixelů

S největší pravděpodobností jedním z prvních kroků, které budete chtít udělat, je správné nastavení velikosti plochy. Pokud plánujete vložit svou animaci na existující webovou stránku, nejprve určete, kolik místa má vaše animace na této stránce zabírat, a podle toho upravte velikost vymezené plochy.

Chcete-li změnit velikost vymezené plochy, klikněte na oranžová čísla v části Plocha na panelu Vlastnosti – ve sloupci zcela vlevo v horní části obrazovky – jak je znázorněno. Kliknutím na čísla šířky nebo výšky můžete zadat přesné rozměry (v pixelech), které chcete, aby vaše vymezená plocha měla.

Pokud nechcete zadávat čísla, Edge Animate vám nabízí alternativní metodu pro změnu velikosti vymezené plochy: Jednoduše umístěte kurzor na jedno z oranžových čísel. Když se kurzor změní na dvojitou šipku (jak je znázorněno), můžete kliknutím a tažením zvětšit nebo zmenšit velikost vymezené plochy.

Nastavení velikosti plochy podle procenta velikosti obrazovky

Pokud chcete vytvořit animaci, která se nemusí vejít do žádného konkrétního rozměru, měli byste přepnout z pixelů (px) na procenta (%) kliknutím na přepínač (viz tento obrázek). Toto je jeden krok k vytvoření responzivního webového designu. Když změníte velikost vymezené plochy podle procenta obrazovky namísto podle hodnot pixelů, velikost vymezené plochy se změní podle velikosti nadřazeného prvku.

Jedním příkladem nadřazeného prvku může být samotné okno prohlížeče — pokud je animace samostatnou webovou stránkou. Pokud je však animace součástí webové stránky, pak nadřazeným prvkem může být prvek div, do kterého je animace vnořena.

Chcete-li, aby vaše vymezená plocha vyplnila celé okno prohlížeče, nastavte šířku a výšku vymezené plochy na 100 %, jak je znázorněno na tomto obrázku. Chcete-li, aby vaše vymezená plocha zaplnila polovinu okna prohlížeče, nastavte vymezenou plochu na 50 %; a tak dále, v závislosti na tom, jakou část okna prohlížeče chcete, aby vaše animace zabírala.

Ve výchozím nastavení je pozadí plochy bílé. Proto neuvidíte žádný rozdíl ve Stage, když přepnete mezi px a %.

Chcete-li otestovat rozdíl mezi použitím px a % pro velikost vymezené plochy, změňte barvu pozadí vymezené plochy na jinou než bílou, například červenou. Poté experimentujte s různými procenty a rozměry pixelů, abyste viděli různé efekty.

Chcete-li změnit barvu pozadí vymezené plochy (jak je znázorněno), kliknutím na bílý čtverec vyvolejte výběr barvy.

Můžete říci Edge Animate, aby zachoval proporce šířky a výšky stejné, kliknutím na ikonu Link Width and Height (na tomto obrázku zvýrazněná). Ve výchozím nastavení je ikona Link Width and Height vypnutá; s tímto výchozím nastavením nezachová Edge Animate při změně velikosti šířku (nebo výšku) ve stejném poměru.