На відміну від більшості графічних форматів, флеш дає дизайнерам змогу по-справжньому розкрити свій потенціал і звільнити креативність. Жоден статичний банер чи навіть анімований покадровий Gif не має таких можливостей і гнучкості, як флеш-банери. Закономірно, що для дизайну банерів більшість розробників обирають саме цей формат.
Сьогоднішній урок, по суті – буде першим кроком до створення банерів у флеші. Попри всю свою простоту, він включатиме три важливі аспекти, які притаманні без перебільшення кожному флеш банеру:
- Створення основи (сцени, на якій розгортатиметься вся дія банері)
- Лінкування (прив’язування банера до того чи іншого сайту, на який він посилатиметься)
- Створення анімаційного ряду (того, що побачить відвідувач і що спонукатиме його перейти за лінком)
Створення основи: тло та поля
Створення основи – це, мабуть, найпростіший, і при цьому – дуже важливий крок при створенні банера. Перш за все потрібно визначитись з його розмірами. Я обрав один з найбільш стандартних форматів: 468 x 60.
Другий крок – це вибір тла. Тут також все просто. Для банера-прикладу я вибрав світло-блакитний колір. Насправді, мені дуже імпонують банери у світлих кольорах. Ви можете обрати будь-який інший колір, який вам подобається.
Нарешті – створення полів (рамок) вашого банера. Цей крок необов’язковий, якщо ви працюєте з темним тлом (бо в такому разі банер доволі помітно виділятиметься на сцені).
Якщо ж йдеться про світлі банери – краще обмежити їх полями, щоб вони краще виділялися і впадали у око. Я зазвичай використовую колір тла, але набагато темніший. У деяких випадках рамки не використовуються навіть при світлому кольорі тла – але тут усе вже залежить від ідеї та уяви дизайнера.
Якщо з розміром та тлом все зрозуміло, то про створення рамок я розповім трішки детальніше:
- Створюємо окремий шар (layer), в якому будемо малювати тільки наші рамки (щоб у майбутньому вони не заважали нашій анімації). Цей шар повинен знаходитися вище, ніж основний.
- Оберіть інструмент чотирикутник Rectangle Tool у панелі інструментів.
- Вимкніть заливку, обравши перекреслену червоною лінією іконку у таблиці виборів кольорів заливки
- Тепер ваш інструмент буде малювати чотирикутник, який складається виключно з контуру (без заливки). Акуратно малюємо чотирикутник, який точно повторює форму нашого банера (таким чином, щоб контур обмежував границі банера).
- Зберігаємо файл і публікуємо його (Shift+F12 або ж пункт File -> Publish). У папці зі збереженим файлом повинен з’явитися однойменний html-файл. Запускаємо його – банер повинен відобразитися у браузері. Якщо всі чотири рамки видно – все гаразд. Якщо якась із них не відображається, значить ви не зовсім точно намалювали контури чотирикутника – повертаємося до кроку #3.
Результат повинен вийти приблизно таким:
Створення посилання на сайт
На жаль, флеш не передбачає створення посилання безпосередньо під час вставки банера у сайт (тобто методами html). Тому впроваджувати лінк у банер потрібно під час розробки. В даному прикладі ми будемо користуватися методами Action Script 3.0 (оскільки ця версія скрипкової мови, безперечно, має неабиякі перспективи і буде розвиватися). Втім, якщо вас цікавить створення посилань у Action Script 2.0 – прочитайте статтю Віталія про те, як робити банери клікабельними.
- Створюємо ще один шар (layer) над тими двома, що уже наявні у шкалі часу (timeline).
- Вибираємо інструмент чотирикутник (rectangle tool) і вимикаємо цього разу контури (клікаємо на іконку, перекреслену червоним кольором в панелі вибору кольорів для контурів (stroke color).
- Знову обводимо повністю нашу сцену (колір заливки не має значення, оскільки ми все-рівно робитимемо цей елемент прозорим).
- Конвертуємо дану заливку на символ (детальніше про символи та їх створення можна прочитати у однойменній статті ), але при цьому ОБОВ’ЯЗКОВО вибираємо тип символу Button.
- У полі instance-name пишемо назву нашого символу (в моєму випадку url_to_site), яка потім буде використовуватися для створення коду посилання
- Активуємо кадр, в якому розміщена наша кнопка, і вставляємо туди наступний код:
- Зберігаємо та публікуємо банер. Якщо ви все зробили правильно – то при запуску згенерованаго html-файла банер буде активним і при кліку переводитиме вас на потрібний сайт.
Після створення у ефектах кольору вибираємо абсолютну прозорість
url_to_site.addEventListener(MouseEvent.CLICK,clickHandler); function clickHandler(event:MouseEvent):void{ navigateToURL(new URLRequest("http://адреса_вашого_сайту/"),"_blank"); }
В моєму випадку посилання веде на сторінку «Уроки флеш» на цьому сайті.
Ось результат перших двох кроків.
Поки-що це просто залитий кольором контур, який реагує на клік. Але вже в наступному уроці ми перетворимо його на інтерактивний банер, додавши анімацію. Про створення анімаційного ряду читайте у наступній статті.
Липень 30, 2009 о 11:56
крок 6 –де саме активовується кадр
я незрозумів куди саме вставляти код !!