Разработка Flash-баннеров часто сопровождается несколькими файлами, фрагментированным кодом и запутанными временными рамками. Из этого туториала вы узнаете, как создать шаблон проекта, который послужит прочной основой, которая поможет быстро разработать надежные флэш-баннеры, что позволит вам сосредоточиться на воплощении креативной идеи в жизнь.
Шаг 1. Настройка структуры папок проекта
При создании нескольких флеш-баннеров хорошее управление файлами имеет важное значение для поддержания эффективности вашего рабочего процесса. Запустите шаблон вашего баннерного проекта, создав структуру папок, показанную ниже:
Шаг 2: Создание шаблона Photoshop
Теперь мы собираемся создать набор шаблонов Photoshop, которые будут использоваться при разработке рекламной кампании на флеш-баннере. (Если у вас нет Photoshop, не беспокойтесь, вы можете перейти к шагу 5). Интерактивное рекламное бюро поддерживает Руководство по рекламным блокам, в котором перечислены общие размеры рекламных блоков (баннеров). Для целей этого урока мы собираемся создать три наиболее распространенных:
- Широкий небоскреб (шириной 160 пикселей и высотой 600 пикселей)
- Средний прямоугольник (шириной 300 пикселей и высотой 250 пикселей)
- Таблица лидеров (728 х 90 х в высоту)
Давайте начнем с создания шаблона для широкого небоскреба. Откройте Photoshop и выберите «Файл»> «Создать». Настройте свойства для вашего нового документа Photoshop, как показано ниже:
Шаг 3: Добавление групп слоев
Чтобы слои в вашем файле Photoshop были такими же структурированными, как и папки вашего проекта, когда пришло время создавать дизайн баннера, мы добавим группы слоев в файл шаблона для хранения основных элементов дизайна.
Используя New Group из меню в правом верхнем углу панели Layers, создайте структуру Layer Group, показанную ниже:
Группа слоев «Фон» будет содержать элементы дизайна, которые всегда находятся на заднем плане вашего баннера, например, цвет или текстуру.
Группа слоев «Передний план» будет содержать элементы дизайна, которые всегда находятся на переднем плане вашего баннера, например логотип компании.
Группы слоев «Рамка» будут содержать элементы дизайна ключевых моментов в вашей последовательности флэш-баннера или взаимодействия. Это может включать ключевые сообщения, критические точки анимации или пользовательские интерфейсы.
Шаг 4: Сохранить
Теперь ваш шаблон готов к сохранению. Перейдите в «Файл»> «Сохранить как» и перейдите к папке «design» в структуре папок вашего проекта. Назовите файл в соответствии с его размерами, в данном случае «160×600», и убедитесь, что он в формате Photoshop, с установленными слоями.
Это ваш первый фантастический шаблон флеш баннера! Повторите эти шаги для среднего прямоугольника (шириной 300px и высотой 250px) и таблицы лидеров (728px x 90px ростом). С этими шаблонами Photoshop мы готовы перейти к Flash.
Шаг 5: Создание вашего Flash проекта
Начнем с создания Flash-проекта, чтобы вы могли перемещаться по структуре файлов в Flash IDE. Откройте Flash CS4 (процесс очень похож во Flash CS3, хотя интерфейс Flash будет отличаться) и перейдите в «Окно»> «Другие панели»> «Проект». На панели «Проект» щелкните раскрывающийся список «Проекты» и выберите «Новый проект». Укажите имя проекта как «BannerTemplate».
Для корневой папки перейдите к папке / banner_template / development /, которую вы создали в шаге 1, используя значок папки. Убедитесь, что версия ActionScript установлена на ActionScript 3.0, и нажмите «Создать проект».
Шаг 6: папка классов проекта Flash
Теперь мы собираемся установить свойства Flash Project, чтобы помочь Flash выполнить работу по заглушению наших классов для нас. Щелкните раскрывающийся список со значком шестеренки в правом верхнем углу панели «Проект» и выберите «Свойства проекта». В поле «Сохранить классы» перейдите в папку / as /, созданную на шаге 1, и нажмите кнопку «ОК».
Шаг 7: Папка с баннером
Если вы выполнили последний шаг правильно, вы должны увидеть маленькие скобки кода теперь на значке / as / folder. Сейчас мы собираемся создать папку для всех классов, специфичных для наших шаблонов баннеров. Выберите папку / as / и щелкните значок новой папки в нижней части панели. В появившемся диалоговом окне назовите вашу папку «banner» и нажмите «OK».
Шаг 8: Базовый класс документа Banner
Теперь (наконец-то!) Вы готовы создать базовый класс документа для баннера. Если вы не знакомы с использованием классов документов (или классов в целом), рекомендуется сначала прочитать этот быстрый совет .
Выбрав папку / as / banner /, щелкните значок «Создать класс» в нижней части панели. В поле Class добавьте имя класса Banner после имени пакета banner. и нажмите Создать класс.
Теперь нам нужно взять заглушку этого класса и изменить ее на функциональный базовый класс документа. Добавьте к ActionScript, чтобы отразить код, показанный ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
package banner {
import flash.display.MovieClip;
public class Banner extends MovieClip {
// Constants:
// Public Properties:
// Private Properties:
private var config:Object;
// Initialization:
public function Banner(config:Object = null):void {
}
// Public Methods:
public function init():void {
trace(«Banner class initialized»);
}
// Protected Methods:
}
}
|
Давайте быстро рассмотрим изменения, которые мы внесли в класс Banner:
- Импортирован класс MovieClip.
- Сделано, чтобы класс Banner расширял MovieClip (чтобы его можно было использовать в качестве класса документа).
- Сделано, чтобы функция инициализации документа Banner получала необязательный объект конфигурации, который мы можем использовать для передачи параметров.
- Создана публичная функция init (), которая выводит трассировку при вызове. Причина, по которой это удобно, будет объяснена, когда мы начнем создавать баннер .FLA.
Сейчас это мало что дает, но здесь важно создать структуру классов, которая позволит нам централизовать логику баннера, уменьшая повторение кода. Теперь мы можем расширить класс Banner для создания наших отдельных классов баннерных документов.
Шаг 9: Баннерные классы документов
Давайте начнем с файла класса для широкого небоскреба. Создайте класс «WideSkyscraper» в своей папке Flash-проекта / as / banner /, как вы делали это для класса «Banner». Возьмите сгенерированный код заглушки класса и добавьте к нему, чтобы он выглядел так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
package banner {
public class WideSkyscraper extends Banner {
// Constants:
// Public Properties:
// Private Properties:
private var config:Object;
// Initialization:
public function WideSkyscraper() {
super();
}
// Public Methods:
public override function init():void {
trace(«WideSkyscraper class initialized»);
super.init();
}
// Protected Methods:
}
}
|
Давайте рассмотрим изменения, которые мы внесли в класс WideSkyscraper:
- Сделано, чтобы класс WideSkyscraper расширял Banner.
- Вызывается функцией документа базового класса Banner с помощью super () в функции документа WideSkyscraper.
- Переопределите базовую функцию init () класса Banner пользовательской функцией init (), которая при вызове выводит трассировку, а затем вызывает функцию init () класса Banner.
Теперь повторите этот шаг, чтобы создать классы баннерных документов для MediumRectangle и Leaderboard. После этого наша структура класса документа уже создана.
Шаг 10: Создание вашего баннера .FLA
Теперь мы можем начать создавать нужные нам файлы .FLA. Опять же, давайте начнем с создания шаблона для широкого небоскреба (160×600).
Откройте Flash CS4 и выберите «Файл»> «Создать». Выберите «Flash File (ActionScript 3.0)» в качестве Типа и нажмите «ОК». На панели «Свойства» измените параметры публикации и свойств, как показано ниже:
Теперь сохраните ваш файл как «160×600.fla» в папке / development / вашего проекта.
Шаг 11: установка относительного исходного пути
Теперь мы собираемся установить относительный исходный путь и относительный путь публикации. Это становится важным, когда вы хотите сделать копию своего шаблона шаблона баннера, переименовать его и начать работать, или когда вы хотите передать шаблон кому-то еще. Абсолютные пути могут быть реальной проблемой для обновления (особенно для нескольких файлов!) Каждый раз, когда вы хотите начать проект.
Чтобы установить исходный путь, выберите «Файл»> «Параметры публикации» и перейдите на вкладку «Flash». Теперь нажмите кнопку «Параметры» рядом с раскрывающимся списком «Сценарий», чтобы открыть окно «Дополнительные параметры ActionScript 3.0». Убедитесь, что Source Path является активной вкладкой, и нажмите «+», чтобы добавить путь «./as». Теперь вы можете добавить текст «banner.WideSkyscraper» в поле «Класс документа». Ваше окно должно выглядеть так:
Нажмите кнопку ОК, и ваш документ теперь связан с классом WideSkyscraper, созданным на шаге 9.
Шаг 12: установка относительного пути публикации
Чтобы задать путь публикации, выберите «Файл»> «Параметры публикации» и перейдите на вкладку «Форматы». Нам не нужен файл HTML, поэтому снимите этот флажок. В пути публикации для SWF выберите папку / www / в папке вашего проекта, как показано ниже. Если все выглядит правильно, нажмите ОК. Ваш скомпилированный SWF-файл теперь будет помещен в папку / www / при предварительном просмотре или публикации.
Есть немного больше информации об этом в этом скринкасте Quick Tip .
Шаг 13: Основной график
По некоторым причинам некоторые системы показа рекламы требуют, чтобы первый кадр вашего фильма был пустым (например, Eyeblaster ), или импортировали свои классы / включали свой ActionScript в первый кадр. Часто расширения Flash, которые вы можете установить для этих систем показа рекламы, откажутся упаковать ваш файл, если вы не будете соблюдать это условие.
Именно здесь появляется функция init (), которую вы создали ранее в своем классе документов. Чтобы обеспечить возможность использования нашего шаблона в этой ситуации, мы собираемся создать временную шкалу из двух кадров с пустым первым кадром, второй — с остановкой. действие и вызов функции init (), как показано ниже:
Если вы сейчас скомпилируете этот файл, вы должны получить на панели «Вывод» следующее, подтверждающее, что ваш класс документов WideSkyscraper и базовый класс документов Banner работают:
|
1
2
|
WideSkyscraper class initialized
Banner class initialized
|
Шаг 14: Создание класса символов библиотеки
Теперь мы собираемся создать символ библиотеки для размещения баннера, будь то анимация или интерфейс. Перейдите в меню «Вставка»> «Новый символ» и дайте ему имя «креатив», выберите «Экспорт для ActionScript» и присвойте ему класс «Креатив». Убедитесь, что выбран тип Movie Clip, и нажмите кнопку «ОК».
Теперь добавьте некоторый текст-заполнитель на сцену, как показано ниже, чтобы вы могли что-то увидеть, когда добавите его на свой этап в коде позже:
И это все, что нам нужно из файла .FLA! Идите дальше и создайте другие .FLA для Среднего прямоугольника (300 х 250 высотой) и таблицы лидеров (728 х 90 высотой). Имея это в виду, мы можем вернуться к нашему классу документов Banner и начать добавлять основные функции ко всем этим баннерам.
Шаг 15: Добавление фонового спрайта
Практически во всех правилах для баннеров рекомендуется размещать сплошной цвет фона в файле Flash, поскольку цвет фона сцены может быть перезаписан, когда объект Flash встроен в страницу HTML. Вместо того, чтобы углубляться в каждый .FLA и рисовать фигуры на сцене, мы можем централизовать эту задачу в коде. Откройте свой класс Banner и обновите файл, чтобы отразить код, показанный ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
package banner {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.Graphics;
public class Banner extends MovieClip {
// Constants:
private const BG_COLOR:Number = 0x0E0E0E;
// Public Properties:
// Private Properties:
private var config:Object;
// Initialization:
public function Banner(config:Object = null):void {
}
// Public Methods:
public function init():void {
trace(«Banner class initialized»);
// Create background
var bg:Sprite = new Sprite();
bg.graphics.beginFill(BG_COLOR);
bg.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
bg.graphics.endFill();
addChild(bg);
}
// Protected Methods:
}
}
|
Давайте вспомним изменения, которые мы внесли в класс Banner:
- Импортированы классы Sprite и Graphics.
- Добавлена константа BG_COLOR и ей присвоено шестнадцатеричное значение.
- Создал спрайт bg и нарисовал прямоугольник с заливкой BG_COLOR, которая покрывает всю нашу стадию.
- Добавлен bg в список отображения.
Теперь все, что вам нужно сделать, это изменить значение BG_COLOR, чтобы получить правильный цвет фона для всех ваших баннеров.
Шаг 16: Добавление в список отображения
Теперь нам нужно добавить символ Creative, созданный на шаге 14, в список отображения, так как это будет контейнер для выполнения объявления. Это действительно легко сделать, просто обновите функцию init () следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
// Public Methods:
public function init():void {
trace(«Banner class initialized»);
// Create background
var bg:Sprite = new Sprite();
bg.graphics.beginFill(BG_COLOR);
bg.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
bg.graphics.endFill();
addChild(bg);
// Add Creative
var creative:Creative = new Creative();
addChild(creative);
}
|
Шаг 17: Добавление интерактивной области
Другим распространенным требованием является то, что область клика баннера должна открывать новое окно на основе переменной «clicktag», передаваемой со страницы HTML, когда внедряется Flash-объект. Давайте создадим служебный класс, чтобы справиться с этим для нас. На панели «Проект Flash» перейдите в папку / as / banner / и создайте новую подпапку с именем / util /. Создайте здесь новый класс под названием «ClickArea» и закодируйте его, как показано ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
package banner.util {
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;
public class ClickArea extends Sprite {
// Private Properties:
private var clickthroughURL:String;
// Initialization:
public function ClickArea(loaderInfo:Object,stage:Stage) {
// Create clickable area
this.graphics.beginFill(0x00FF00,0);
this.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
this.graphics.endFill();
// Determine clickthrough URL (by checking known naming conventions)
if(loaderInfo.parameters.clicktag != null) {
clickthroughURL = loaderInfo.parameters.clicktag;
} else if(loaderInfo.parameters.clickTag != null) {
clickthroughURL = loaderInfo.parameters.clickTag;
} else if(loaderInfo.parameters.clickTAG != null) {
clickthroughURL = loaderInfo.parameters.clickTAG;
}
// Add button behaviour
this.buttonMode = true;
this.addEventListener(MouseEvent.CLICK, mouseClickHandler, false, 0, true);
}
// Public Methods:
// Protected Methods:
private function mouseClickHandler(e:MouseEvent):void {
if(clickthroughURL != null) {
navigateToURL(new URLRequest(clickthroughURL),»_blank»);
} else {
trace(«Clickthrough»);
}
}
}
}
|
Давайте быстро подведем итог, что делает класс ClickArea:
- Импортирует необходимые классы Flash.
- Основан на классе Sprite.
- Функция конструктора ClickArea требует двух переменных, объекта loaderInfo и рабочей области. Мы передадим их из нашего класса документов Banner.
- Рисует прозрачную кликабельную область шириной и высотой сцены.
- Пытается получить URL перехода по клику из объекта loaderInfo и присвоить его переменной clickthroughURL.
- Добавляет поведение при щелчке мыши, которое запускает clickthroughURL в новом окне или выводит трассировку, если URL-адрес недоступен. Это удобно при тестировании в Flash IDE.
Теперь снова откройте свой класс Banner и добавьте import banner.util.ClickArea в свой список импорта классов Flash и обновите функцию init (), чтобы создать экземпляр ClickArea и добавить его в список отображения, как показано ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
// Public Methods:
public function init():void {
trace(«Banner class initialized»);
// Create background
var bg:Sprite = new Sprite();
bg.graphics.beginFill(BG_COLOR);
bg.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
bg.graphics.endFill();
addChild(bg);
// Add Creative
var creative:Creative = new Creative();
addChild(creative);
// Create clickable area
var clickArea:ClickArea = new ClickArea(loaderInfo,stage);
addChild(clickArea);
}
|
Мы добавляем основные принципы разработки баннеров в этот класс, но реальная ценность заключается в том, что мы добавляем их ко всем нашим баннерам в одном централизованном классе. Любые общие задачи, которые вы неоднократно выполняете в баннерах, могут быть добавлены сюда, чтобы высвободить ваше время для создания уникальной анимации или взаимодействия, которое имеет баннерное объявление.
Шаг 18: Публикация ваших .FLA
Когда весь наш код хорошо организован, открытие отдельных .FLA и их публикация начинают доставлять неудобства. Хорошая новость в том, что мы можем автоматизировать это. Перейдите на панель «Проект» и установите флажок рядом с каждым баннером. .FLA-формат (если вы не видите их в этом списке, щелкните раскрывающийся список со значком шестеренки и выберите «Обновить»), как показано ниже:
Теперь вы можете опубликовать все свои баннеры в папке / www /, которую вы настроили в шаге 12, щелкнув раскрывающийся список со значком Gear и выбрав «Опубликовать проект».
Шаг 19: HTML презентация страницы
Последний элемент, который нам нужно завершить, чтобы завершить наш шаблон баннерного проекта, — это создание HTML-страницы, на которой они будут представлены, чтобы их можно было легко показывать клиенту. Загрузите SWFObject и поместите файл swfobject.js в папку / www /, затем создайте файл HTML в редакторе по вашему выбору и напишите код, показанный ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ />
<title>Banner Signoff Template</title>
<style type=»text/css» media=»screen»>
body { padding:60px;
.banner { padding:0 40px 40px 0;
</style>
<script src=»swfobject.js» type=»text/javascript»></script>
<script type=»text/javascript»>
var flashvars = { clickTag: «http://www.hornergraphic.com/» }
swfobject.embedSWF(«160×600.swf», «wide_skyscraper», «160», «600», «9», false, flashvars);
swfobject.embedSWF(«300×250.swf», «showcase», «300», «250», «9», false, flashvars);
swfobject.embedSWF(«728×90.swf», «leaderboard», «728», «90», «9», false, flashvars);
</script>
</head>
<body>
<div class=»banner»><div id=»wide_skyscraper»></div></div>
<div class=»banner»><div id=»showcase»></div></div>
<div class=»banner»><div id=»leaderboard»></div></div>
</body>
</html>
|
Вы можете прочитать больше о том, как использовать SWFObject в онлайн-документации , но давайте быстро рассмотрим ключевые вещи, которые мы делаем здесь:
- Объявление двух стилей CSS, чтобы создать пространство вокруг страницы и отдельных баннеров.
- Включая swfobject.js, создаем тестовый clickTag для перехода на наши баннеры и пишем операторы встраивания swfobject.
- Определение структуры div и назначение уникального идентификатора div для SWFObject для динамической замены нашим SWF-файлом.
Теперь сохраните этот файл как index.html в папке / www /. Теперь вы можете предварительно просмотреть свои баннеры в веб-браузере или загрузить эту папку где-нибудь для просмотра вашим клиентом:
Шаг 20. Просмотр структуры файла вашего проекта
В завершение рассмотрим структуру заполненных папок и убедимся, что все файлы находятся в соответствующем месте:
Теперь у вас есть шаблон проекта с:
- Набор шаблонов Photoshop для создания обложки.
- Набор шаблонов Flash для импорта ресурсов библиотеки и создания анимации на временной шкале.
- Структура класса документа, позволяющая реализовать функциональность в одном или всех форматах баннеров.
- Способ собрать все ваши баннеры одновременно.
- HTML-страница для просмотра всех баннеров вместе для вас и вашего клиента.
Вывод
Этот урок действительно только начало. Определите повторяющиеся задачи в своих баннерных проектах и настройте шаблон проекта для их решения, чтобы он максимально ускорил ваш рабочий процесс. Расширьте его, добавив свои любимые облегченные фреймворки ( TweenNano отлично подходит для скриптовой анимации) и библиотеки, чтобы ваши любимые инструменты были у вас под рукой при запуске вашего следующего проекта.
Если вы используете Subversion или какой-либо другой вид управления исходным кодом, это будет отличный проект для включения в ваш репозиторий, чтобы вы могли со временем улучшить его и проверить последнюю версию каждого баннерного проекта, который вы запускаете.
Есть идеи о том, как это можно улучшить, или комментарии о проблемах, которые мешают развитию вашего баннера? Присоединяйтесь к обсуждению ниже!