Как сделать Игровой / Интерактивный баннер
В этом уроке я расскажу, как сделать игровой баннер. Сейчас очень распространены баннеры с онлайн игрой и это не удивительно. Рекламный игровой баннер очень привлекателен для посетителя, ему наверняка закочется поиграть (понажимать) по такому баннеру, тем самым он непременно перейдет по ссылке, которая находдится в таком игровом баннере, а эта ссылка может быть и на ваш ресурс, который может привлечь посетителя. Интерактивный баннер может быть простой (смена анимации при наведении курсора, взаимодействие пользователя с баннером) и сложный, вплоть до мини флэш игры внутри баннера. Именно такой игровой баннер будет рассмотрен в данном уроке.
Для этого урока я использовал программу Macromedia Flash Professional 8.
1 Создаем новый документ с нужными параметрами, я выбрал один из распространенных размеров баннеров 336х280 и частоту кадров 24 кадра в секунду.
2 Импортируем в библиотеку программы свои изоблажения курсора и объекта применения, в моем случае это муха и прицел (муху я импортировал раздельно крылья и тельце с прозрачным фоном, чтобы потом анимировать ее, как в уроке Эффект полета колибри .
3 Переименовываем первый слой в (Background), затем создаем новый слой и называем его (Myxa1).
4 Находясь на слое (Myxa1) перетаскиваем на сцену изображение тельца мухи и пока оно выбрано нажимаем кнопку "F8", чтобы преобразовать его в "Movie Clip" и называем его "myxa".
5 Дважды кликаем по "Movie Clip" тельца мухи, чтобы войти в него.
6 Перетаскиваем на сцену изображение крыла и пока оно выбрано нажимаем кнопку "F8", чтобы преобразовать его в "Movie Clip" и называем его "krilo".
7 Перетаскиваем мувик крыла на место, где оно должно находиться (на спинке).
8 Дважды кликаем по мувику крыла, чтобы войти в него.
9 Выбираем первый кадр, кликаем по нему правой кнопкой мыши и из выпадающего списка выбираем "Copy Frames", затем выбираем второй кадр, кликаем по нему правой кнопкой мыши и из выпадающего списка выбираем "Paste Frames".
10 Находясь на втором кадре выбираем наше крыло и отражаем его по вертикали, для этого идем в меню "Modify-->Transform-->Flip Vertical"
11 Затем перетаскиваем перевернутое крыло в нужное место инструментом "Free Transform Tool (Q)" и поворачиваем его, как нам надо.
12 Возвращаемся на главную сцену, нажимая на ссылку.
13 Присваиваем в панели "Properties" имя нашего "Movie Clip", называем его "myxa1", в дальнейшем в коде мы будем ссылаться на это имя.
Теперь можете протестировать флэшку "Control-->Test Movie", в результате должна получиться муха, машущая крыльями.
Теперь создаем траекторию полета для нашей мухи.
13 Создаем ключевой кадр на 100 кадре временной шкалы слоя (Myxa1), нажимая кнопку "F6".
14 Выбираем 1 кадр слоя (Myxa1), кликаем по слою правой кнопкой мыши и из выпадающего списка выбираем "Add Motion Guide".
15 Переходим на направляющий слой, выбираем инструмент "Pen Tool (P)" и создаем им первую точку (где должна начинаться анимация полета мухи, в моем случае начало полета мухи находится за пределами сцены), затем ставим вторую точку и образуется прямая линия, так ставим точки несколько раз, создавая ломанную линию, когда все точки расставлены и линии между ними проложены выбираем наш мувик мухи и перемещаем его по центру первой точки начала движения, чтобы привязать его к направляющей.
16 Находясь на слое (Myxa1) создаем ключевой кадр на 15 кадре, нажимая кнопку "F6", зажимаем наш мувик мухи мухи по центру и перемещаем его на вторую точку.
17 Так и дальше создаем ключевые кадры и постепенно перемещаем нашу муху по точкам, вплоть до последней. Если вы хотите, чтобы муха задержалась на одном месте подольше, то просто создайте ключевой кадр без перемещения мухи по направляющей и если вы хотите, чтобы объект двигался не в плоскости, а более объемно, можно применить инструмент "Free Transform Tool (Q)", чтобы уменьшать или увеличивать объект. Также для реалистичного движения объекта по экрану, его надо в некоторых ключевых кадрах отражать по горизонтали "Modify-->Transforn-->Flip Horizontal", когда объект меняет направление движения. После того, как вы создали все ключевые кадры и переместили объект в нужном направлении необходимо создать анимацию движения между ключевыми кадрами (Create Motion Tween).
18 Создаем новый слой поверх направляющего слоя для слоя (Myxa1), называем его (Myxa2), перетаскиваем на его сцену "Movie Clip" мухи и присваиваем ему имя в панели "Properties" "myxa2".
19 Создаем ключевой кадр на 100 кадре слоя (Myxa2), затем также кликаем по нему правой кнопкой мыши и из выпадающего списка выбираем "Add Motion Guide" и проделываем все шаги, которые проделывали с 15 по 17 шаг, только на этот раз для слоя (Myxa2) и на каждом направляющем слое лучше использовать разный цвет направляющих лигий, чтобы не запутаться в траекториях движения для разных мух.
По задумке игры должно быть 5 мух, поэтому мы должны создать 5 слоев с направляющими и присвоить название мувмкам в панели "Properties" тоже 5 раз (myxa1, myxa2, myxa3, myxa4, myxa5).
20 Когда мы сделали все предидущие шаги создаем новый слой и называем его (Cursor).
21 Находясь на слое (Cursor) перетаскиваем на сцену программы изображение курсора.
22 Пока изображение курсора выбрано нажимаем кнопку "F8", чтобы преобразовать его в "Movie Clip" и называем его "cursor".
23 Пока мувик курсора выбран вписываем его имя и в панели "Properties".
23 Дважды кликаем по мувику курсора, чтобы войти в него.
24 Теперь мы делаем анимацию выстрела, переименовываем слой в (Pricel), находясь на 1 кадре нажимаем кнопку "F9", чтобы открыть панель "Actions" и вводим следующий код:
25 Создаем ключевой кадр на 2 кадр, нажимая кнопку "F6" и пустой ключевой кадр на 3 кадре, нажимая кнопку "F5". Переходим на второй кадр и в панели "Properties" указываем имя этого кадра "blast".
26 Создаем новый слой, называем его (Vistrel), перетаскиваем его под слой (Pricel), создаем ключевой кадр на 2 кадре нажимая кнопку "F6". Находясь на 2 кадре рисуем радом с изображением прицела вспышку, которая будет появляться, когда пользователь кликнет по левой кнопке мышки.
27 Теперь нам надо перетащить рисунок вспышки под рисунок прицела, для этого, чтобы выделить весь рисунок вспышки находясь на томже 2 кадре слоя (Vistrel)кликаем по названию слоя. Рисунок вспышки выделяется и мы спокойно перетаскиваем его под прицел.
28 Возвращаемся на главную сцену, кликая по ссылке.
29 Создаем новый слой и называем его (Time_and_Total).
31 Выбираем инструмент "Text Tool (T)", настраиваем его и пишем в левом верхнем углу экрана "Время:" и правом верхнем углу "Попал:".
32 Затем все темже инструментом "Text Tool (T)" кликаем чуть правее от текста "Время:", в результате образуется текстовая область, затем спускаемся в меню "Properties", выставляем там "Dinamic Text" и указываем ему название "times".
33 Теперь темже инструментом кликаем чуть правее от текста "Попал:", в результате образуется текстовая область, затем спускаемся в меню "Properties", выставляем там "Dinamic Text", указываем ему название "total" и Var: "schet".
34 Создаем новый слой и называем его (ActionScript).
35 Находясь на слое (ActionScript) нажимаем кнопку "F9", чтобы открыть окно "Actions" и вводим туда следующий код:
36 Теперь возвращаемся на первый слой (Background), импортируем на сцену или в библиотеку программы свое изображение фона, выставляем его по центру программы, затем создайте пустой ключевой кадр на 100 кадре слоя (Background) нажимая на нем кнопку "F5". теперь у вас есть фоновое изображение, мы не помещали его раньше, чтобы он не мешал.
На этом мы закончим этот урок, выбираем наш интерактивный баннер (мини флэш игру), идем в верхнее меню, в пункт "Cjntrol-->Test Movie", чтобы посмотреть результат проделанной работы, если вы попадете по трем мухам за 15 секунд (как указанно в ActionScript), вас перекидывает на другой сайт или другую страницу сайта, которая указана в коде.