Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

Як зробити Ігровий / Інтерактивний банер

Для цього уроку я використовував програму Macromedia Flash Professional 8.

1 Створюємо новий документ з потрібними параметрами, я вибрав один з поширених розмірів банерів 336х280 і частоту кадрів 24 кадру в секунду.

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

2 Імпортуємо в бібліотеку програми свої ізоблаженія курсора і об'єкта застосування, в моєму випадку це качка і приціл.

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

3 Перейменовуємо шар в "Ytki".

4 Поки шар обраний натискаємо комбінацію кнопок "Ctrl + F8", щоб створити "Movie Clip" і називаємо його "ytki", в результаті ми відразу потрапимо в нього.

5 Перебуваючи в цьому мувіку перетягуємо на сцену зображення качки і поки вона обрана перетворюємо її в "Movie Clip" і називаємо його "Ytka".

6 Поки наш мувик качки все ще обраний натискаємо комбінацію кнопок "Ctrl + C", щоб копіювати об'єкт, потім комбінацію кнопок "Ctrl + Shift + V", щоб вставити скопійований об'єкт і виставляємо його паралельно першому, копіюємо і вставляємо мувик 5 разів.

7 Кількома за назвою шару, щоб вибрати всі мувік качки.

8 Поки все мувік обрані ще раз натискаємо комбінацію кнопок "Ctrl + C", потім + Ctrl + Shift + V ", щоб копіювати і вставити все виділені мувік, потім знову клікніть по назві шару, щоб виділити всі кліпи і натискаємо комбінацію кнопок" Ctrl + G ", щоб згрупувати всі мувік.

9 Повертаємося на головну сцену клікаючи по посиланню.

10 Перебуваючи на головній сцені перетягуємо на неї мувик наших качок з бібліотеки і виставляємо його в потрібне нам місце.

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

11 Створюємо ключовий кадр на 40 кадрі і перебуваючи на ньому переміщаємо наш мувик з качками в ліво.

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

12 Тепер створюємо анімацію руху "Creatr Motion Tween" між 1 і 40 кадрами.

13 Створюємо новий шар і називаємо його (Shest) і перебуваючи на ньому натискаємо комбінацію кнопок "Ctrl + F8", щоб створити мувік, називаючи його "Shest", в результаті ми відразу потрапимо в нього.

14 Відкриваємо екранну лінійку, для цього йдемо в меню "View -> Rulers", вибираємо інструмент "Rectangle Tool (R)", скасовуємо його обведення, встановлюємо темно-сірий колір заливки і малюємо їм вузький прямокутник, довжиною близько 400 пікселів, потім встановлюємо інструменту світліший колір заливки і малюємо невеликі прямокутники довжиною 50 пікселів на відстані 50 пікселів один від одного.

15 Потім натискаємо за назвою шару, щоб вибрати наш смугастий прямокутник і натискаємо кнопку "F8", щоб перетворити його в "Movie Clip", називаючи його "Shest_mc".

16 Поки мувик ще обраний копіюємо і вставляємо його впритул праворуч, потім натискаємо за назвою шару, виділяється два кліпи і групувалися їх.

17 Повертаємося на головну сцену.

18 Перебуваючи на 1 кадрі шару "Shest" перетягуємо на сцену мувик "Shest" і ставимо його впритул до качок і від лівого краю.

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

19 Створюємо ключовий кадр на 40 кадрі шару "Shest" і перебуваючи на ньому пересуваємо жердину вліво.

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

20 Створюємо анімацію руху між 1 і 40 кадрами шару (Shest).

21 Створюємо новий шар і називаємо його "Zanaves". Імпортуємо в бібліотеку програми завісу з прозорим фоном і перебуваючи на цьому шарі перетягуємо його на сцену.

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

22 Створюємо новий шар, називаємо його "Cursor" і перебуваючи на ньому перетягуємо на сцену з бібліотеки зображення прицілу, який буде служити нам курсором.

23 Поки зображення курсору вибрано, натискаємо кнопку "F8", щоб перетворити його в мувик і називаємо його "Cursor" і прописуємо його назву в панелі "Properties".

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

24 Створюємо новий шар і називаємо його (Text).

25 Вибираємо інструменту "Text Tool (T)", вибираємо статичний текст, налаштовуємо його стиль, колір, розмір і перебуваючи на першому кадрі пишемо "Подстреллі качку!".

26 Поки наш текст обраний перетворимо його в "Movie Clip" і називаємо його "Text".

27 Створюємо ключові кадри на 20 і 40 кадрі шару (Text).

28 Перебуваючи на 20 кадрі вибираємо наш мувик тексту, йдемо в панель "Properties" і виставляємо там "Color -> Alpha -> 0%".

Як зробити інтерактивний банер, банер гри, банер онлайн ігри, ігровий банер

29 Створюємо анімацію руху "Create Motion Tween" між 1-20 і 20-40 кадрами шару (Text).

30 Створюємо новий шар і називаємо його (ActionScript).

31 Перебуваючи на шарі (ActionScript) натискаємо кнопку "F9", щоб відкрити вікно "Actios" і вводимо туди наступний код:

32 Створюємо новий шар і називаємо його "Invisible_Button".

33 Перебуваючи на цьому шарі вибираємо інструмент "Rectangle Tool (R)", скасовуємо його обведення, встановлюємо будь-який колір заливки і малюємо їм прямокутник над усією сценою, потім вибираємо його, перетворюємо його в кнопку і називаємо її (Button).

34 Двічі натискаємо по новоствореної кнопці, щоб увійти в неї, потім маркер, який знаходиться під пунктом "Up" затискаємо і перетягуємо під пункт "Hit".

35 Повертаємося на головну сцену, натискаючи на посилання, наш прямокутник став напівпрозорим, тепер вибираємо його, відкриваємо вікно "Actions" і вводимо наступний код:

35 Тепер створюємо новий шар, називаємо його (Background), переміщаємо його під самий нижній шар, імпортуємо на сцену або в бібліотеку програми зображення фону і перебуваючи на шарі (Background) перетягуємо на сцену зображення фону і виставляємо його по центру сцени.