Інтернет змінюється. Тепер, коли всі сучасні настільні та мобільні браузери підтримують HTML5, а Adobe припинила роботу з Flash для мобільних браузерів, настав час подумати, який спосіб доставки вибрати - і, звичайно, для мобільних платформ, HTML5 є найкращим варіантом для інтерактивного вмісту.
Hype (доступний у магазині Mac App Store) створює анімований та інтерактивний вміст HTML5, не вимагаючи введення одного рядка коду. У цьому посібнику ми збираємося створити анімований банер HTML5, використовуючи простий, але потужний редактор сцен та анімаційну систему на основі ключових кадрів Hype. Врешті-решт, ви будете знати, як створити і оживити сцену, а також як реагувати на сцену та події користувачів.
01 Для початку спочатку додайте свої об’єкти на сцену, перетягнувши свої зображення в нову сцену Hype. Впорядкуйте фотографії від найближчих до найвіддаленіших за допомогою меню Упорядкувати, яке має кілька різних способів розташування та зміни розміру об’єктів.
02 Увімкніть запис, натиснувши кнопку Record у правій частині елементів керування анімацією. Перемістіть курсор часу на три секунди і перемістіть небо, гори, пагорби та траву вліво.Переміщуючи кожне зображення далі, ніж одне за ним, створюється захоплюючий ефект паралакса. Нарешті, перемістіть футбольний м'яч від лівого краю сцени до правого. Натисніть кнопку Запис ще раз, щоб вимкнути запис, і натисніть Відтворити, щоб переглянути.
03 Виберіть елемент футбольного м'яча в списку елементів Hype і натисніть на меню Властивості, що з’явиться. Виберіть властивість Кут повороту та клацніть трикутник розкриття футбольного м’яча, щоб розкрити його властивості. Виберіть нову властивість і скиньте курсор часу на початок. Натисніть кнопку KeyFrame, щоб додати початковий кадр клавіші. Збільште часову шкалу до трьох секунд і ще раз натисніть кнопку Кадрова рамка, щоб створити кінцевий ключовий кадр. Поверніть футбольний м’яч, переключившись на Hype’s Metrics Inspector і змінивши значення обертання осі Z на 1080 градусів.
04 Зміна функцій хронометражу анімаційного футбольного м’яча змусить його рухатися природніше по горизонту. Щоб змінити функцію синхронізації для її горизонтального переміщення, двічі клацніть анімацію для Origin (ліворуч) і виберіть функцію Linear timing. Виконайте ту саму дію з іншими анімаційними футбольними м’ячами, щоб створити дуже природний на вигляд ефект.
05 Коли ця сцена закінчиться, нам потрібно автоматично перейти до останньої сцени нашого банера. Перейдіть до інспектора сцени, щоб побачити дії, що стосуються сцени Hype. Клацніть меню Дія, пов’язане з дією «Увімкнено анімацію», і виберіть «Перейти до сцени ...». Це додає меню Сцена та Перехід, які автоматично встановлюються для миттєвого переходу до наступної сцени.
Для тих, хто шукає натхнення, ознайомтеся з цими прикладами HTML5 на нашому побратимському сайті Creative Bloq.
