Как да преоразмерите Adobe Edge Animate Stage

Сцената е мястото, където ще поставите своите елементи, като изображения, текст и нарисувани обекти. Сцената е HTML прозорец на живо, което означава, че това, което виждате на екрана, е това, което вашата публика вижда, когато гледа и взаимодейства с вашата композиция. Можете да оразмерите сцената по няколко различни начина:

• Пиксели: Adobe Edge Animate CC ви позволява да настроите Stage да остане определен размер, независимо от размера на прозореца на браузъра.

• Процент: За тези, които предпочитат по-отзивчив уеб дизайн.

• Тестване на отзивчив уеб дизайн: Може да искате да промените цвета на фона на сцената, за да тествате отзивчивостта на вашия дизайн.

Оразмеряване на вашата сцена по пикселни стойности

Най-вероятно една от първите стъпки, които ще искате да предприемете, е да оразмерите правилно своята сцена. Ако планирате да вмъкнете своята анимация в съществуваща уеб страница, първо определете колко място искате да заема вашата анимация на тази страница и след това оразмерете съответното ниво на сцената.

За да преоразмерите сцената, щракнете върху оранжевите числа в секцията за етап на панела със свойства — в крайната лява колона близо до горната част на екрана — както е показано. Щракването върху числата за ширина или височина ви позволява да въведете точните размери (в пиксели), които искате да има вашата сцена.

Ако не искате да въвеждате числата, Edge Animate ви дава алтернативен метод за преоразмеряване на сцената: Просто поставете курсора си върху едно от оранжевите числа. Когато курсорът се превърне в двойна стрелка (както е показано), можете да щракнете и плъзнете, за да увеличите или намалите размера на сцената.

Оразмеряване на вашата сцена по процент от размера на екрана

Ако искате да създадете анимация, която не трябва да отговаря на определено измерение, тогава трябва да превключите от пиксели (px) към проценти (%), като щракнете върху превключвателя (вижте тази фигура). Това е една стъпка към създаването на отзивчив уеб дизайн. Когато оразмерявате етапа по процент на екрана вместо по стойности на пиксели, етапът се оразмерява според размера на родителския елемент.

Един пример за родителски елемент може да бъде самият прозорец на браузъра — ако анимацията е самостоятелна уеб страница. Ако обаче анимацията е част от уеб страница, тогава родителският елемент може да бъде елемент div, в който е вложена анимацията.

За да накарате вашата сцена да запълни целия прозорец на браузъра, задайте ширината и височината на сцената на 100%, както е показано на тази фигура. За да накарате вашата сцена да запълни половината от прозореца на браузъра, задайте Stage на 50%; и така нататък, в зависимост от това колко от прозореца на браузъра искате да заема вашата анимация.

По подразбиране фонът на сцената е бял. Следователно няма да видите никаква разлика в Stage, когато превключвате между px и %.

За да тествате разликата между използването на px и % за размер на сцената, променете цвета на фона на сцената на нещо различно от бяло, като червено. След това експериментирайте с различни проценти и px размери, за да видите различните ефекти.

За да промените цвета на фона на сцената (както е показано), щракнете върху белия квадрат, за да изведете инструмент за избор на цвят.

Можете да кажете на Edge Animate да запази пропорциите на ширината и височината същите, като щракнете върху иконата за ширина и височина на връзката (маркирана на тази фигура). По подразбиране иконата за ширина и височина на връзката е изключена; с това по подразбиране в сила, Edge Animate няма да запази ширината (или височината) в същата пропорция, когато преоразмерявате.