| Зміст |
|
| Створення гри петля | Розширення HTML |
Чуйний макетів
Цей урок демонструє, як створити чуйним макетів за допомогою JavaScript. Додати дві коробки до бібліотеки. Зробити один червоний і один зелений. Ці поля є всього лише кілька прикладів. Будь-які фігури або об'єкти можуть бути використані.
Додати поле до редактора.
Організувати коробках, тому вони заповнюють лівого і правого боків. Залишити межу навколо них.
Це зараз приклад веб-сторінку з контентом з лівого і правого боків. Він буде виглядати штраф на робочому столі веб-браузера або телефон в ландшафтному режимі. На жаль, цей макет не буде добре працюють в портретному режимі. Або, дві коробки має зменшили малі для припасування або розширений на весь екран і відрізали сторонах коробки.
Ця ситуація є, де необхідні реагувати-макети. В портретному режимі один короб повинен рухатися над іншою. Для цього нам необхідно перемістити коробки, за допомогою JavaScript. Це означає, що якщо вимкнути 'За допомогою шкали часу' для коробки і встановлення на 'Сценарій ID'.
Для того, щоб перенести коробки за межі фільму, нам необхідно вимкнути кліп у фільмі властивості.
Це найкраще місце, упорядкування полів у на 'На зміну розміру' події фільму.
Функції, що ми повинні є GetLeft, GetTop, GetWidth і GetHeight. Ці функції надають рамках веб-браузера або пристрій за допомогою координат фільму. Коли кліп увімкнено, ці значення повернення межі фільму. Якщо ви використовуєте 'Жоден' фільм масштабі, GetLeft та GetTop завжди повертає 0 і можуть бути проігноровані.
Перша дозволяє організувати дві коробки, так що один заповнює у лівій частині і інші заповнює у правій бічній стороні.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
Далі, ми додамо обмежувальною рамкою розміру 10. Це значення 10 не обов'язково в пікселях, вона знаходиться в тому ж масштабі фільму. Використання фільму масштабувати 'Жоден' на все, щоб бути в пікселях.
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
Нарешті ми будемо тестувати, щоб побачити, якщо ширина веб-браузера або пристрій менш ніж висота. Коли це відбудеться, перегрупувати ящики по вертикалі.
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}
Тепер ви можете бачити, якщо розміри програвача, два поля буде організувати себе автоматично. Ці дві коробки можна легко замінити інші фігури та об'єкти. Цей приклад може бути розширена за рахунок обробляти більш складне компонування.
| Створення гри петля | Розширення HTML |