флеш баннеры что такое
Требования к рекламным материалам
Flash-баннеры, видео и аудио
При этом вызов flash-баннера в HTML будет выглядеть следующим образом:
Во избежание ложных срабатываний не рекомендуется использовать ссылки, содержащие буквы русского, или какого-либо другого «национального» алфавита.
В рекламных материалах для Медийно-контекстного баннера допустимо указать только одну ссылку:
Пример правильного использования Flash:
Вы можете скачать архив с примерами flash-баннера, исходного кода Flash, альтернативной картинки и html-кода, который используется для показа баннера.
При размещении Медийно-контекстного баннера вызов видео не поддерживается.
При размещении Медийно-контекстного баннера вызов аудио не поддерживается.
1. Для тестирования уровня загрузки процессора рекламными материалами используется специально выделенный компьютер (Intel ® Core™2 Duo CPU P9600@ 2,53GHz, 2 ГБ оперативной памяти и 64-800 МБ видео памяти) c установленной 64-разрядной Windows 7 Профессиональная. Компьютер настроен стандартным образом для работы в офисе.
Для тестирования загрузки процессора загружается специальная страница, содержащая только тестируемый баннер. Другие программы при этом не запущены.
Для оценки загрузки используется стандартный TaskManager.
При таком тестировании баннер не должен потреблять более 50% процессорных ресурсов согласно данным в закладке Performance в Task Manager (UpdateSpeed установлен в значение High).
Считается, что баннер требует слишком много ресурсов, если загрузка более 50% ресурсов процессора происходит в течение заметного времени (доли/единицы секунд) или максимальная загрузка процессора в пике составляет более 70%.
Оптимизация использования оперативной памяти не производится, дополнительные утилиты или резидентные программы при старте не загружаются. После входа в систему объем памяти, занятой различными системными процессами, составляет порядка 62-63 МБ по данным Task Manager.
Flash баннер
Что такое флеш баннер? И существуют ли они до сих пор? Самое удивительное — да! Даже есть еще рекламные площадки, продолжающие продавать размещение этих баннеров. Для тех кому не понятно, почему это удивительно, поясняю: Технология макромедиа флеш давно не поддерживается, гугл отказался от неё. В замен пришли баннеры HTML5. Как следствие в хроме то же отключена поддержка этого контента. И вот вам причины:
Тут вы можете посмотреть как они выглядели https://leagency.ru/#example
А тут можно посмотреть цену и заказать https://leagency.ru/#price
После байкота этой технологии, происходила следующая чехорда: Делали креативы во флеше и переводили через онлайн сервис Swiffi. Благо это длилось не долго, гугл выпустила google web designer. Adobe выпустила edge animate, а потом и adobe animate CC с возможностью создавать html5 файлы. Так же ни кто не отменял разработку подобных объявлений при помощи фреймов и css. То есть писать баннеры чистым кодом, подключая некоторые бибилиотеки createJS, к примемеру.
Флеш программировался при помощи библиотек action Script 1.0 2.0 и 3.0, сейчас это HTML5 code snippets
Но у нашего поколения, в памяти останутся мультики, игры и баннер созданные на основе этой технологии. Их можно было качать в неограниченом кол-ве, это были шедевры народного искусства!
Лучший способ создать Flash-баннеры
Разработка Flash-баннеров часто сопровождается несколькими файлами, фрагментированным кодом и запутанными временными рамками. Из этого туториала вы узнаете, как создать шаблон проекта, который послужит прочной основой, которая поможет быстро разработать надежные флэш-баннеры, что позволит вам сосредоточиться на воплощении креативной идеи в жизнь.
Шаг 1. Настройка структуры папок проекта
При создании нескольких флеш-баннеров хорошее управление файлами имеет важное значение для поддержания эффективности вашего рабочего процесса. Запустите шаблон вашего баннерного проекта, создав структуру папок, показанную ниже:
Шаг 2: Создание шаблона Photoshop
Теперь мы собираемся создать набор шаблонов Photoshop, которые будут использоваться при разработке рекламной кампании на флеш-баннере. (Если у вас нет Photoshop, не беспокойтесь, вы можете перейти к шагу 5). Интерактивное рекламное бюро поддерживает Руководство по рекламным блокам, в котором перечислены общие размеры рекламных блоков (баннеров). Для целей этого урока мы собираемся создать три наиболее распространенных:
Давайте начнем с создания шаблона для широкого небоскреба. Откройте 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, чтобы отразить код, показанный ниже:
Давайте быстро рассмотрим изменения, которые мы внесли в класс Banner:
Сейчас это мало что дает, но здесь важно создать структуру классов, которая позволит нам централизовать логику баннера, уменьшая повторение кода. Теперь мы можем расширить класс Banner для создания наших отдельных классов баннерных документов.
Шаг 9: Баннерные классы документов
Давайте начнем с файла класса для широкого небоскреба. Создайте класс «WideSkyscraper» в своей папке Flash-проекта / as / banner /, как вы делали это для класса «Banner». Возьмите сгенерированный код заглушки класса и добавьте к нему, чтобы он выглядел так:
Давайте рассмотрим изменения, которые мы внесли в класс WideSkyscraper:
Теперь повторите этот шаг, чтобы создать классы баннерных документов для MediumRectangle и Leaderboard. После этого наша структура класса документа уже создана.
Откройте 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 / при предварительном просмотре или публикации.
Шаг 13: Основной график
По некоторым причинам некоторые системы показа рекламы требуют, чтобы первый кадр вашего фильма был пустым (например, Eyeblaster ), или импортировали свои классы / включали свой ActionScript в первый кадр. Часто расширения Flash, которые вы можете установить для этих систем показа рекламы, откажутся упаковать ваш файл, если вы не будете соблюдать это условие.
Именно здесь появляется функция init (), которую вы создали ранее в своем классе документов. Чтобы обеспечить возможность использования нашего шаблона в этой ситуации, мы собираемся создать временную шкалу из двух кадров с пустым первым кадром, второй — с остановкой. действие и вызов функции init (), как показано ниже:
Если вы сейчас скомпилируете этот файл, вы должны получить на панели «Вывод» следующее, подтверждающее, что ваш класс документов WideSkyscraper и базовый класс документов Banner работают:
О флеш-баннерах
Когда я вижу баннер, который меня интересует — я всегда на него кликаю. Но по-разному:
1) Если сайт, на котором расположен баннер, мне неинтересен — кликаю левой кнопкой мыши. Иногда, конечно раздражает, что открывается новая вкладка или, не дай Бог, новое окно. Но это не самое страшное.
2) Если сайт, на котором расположен баннер — хороший и интересный — то мне не хочется открывать его в этой же вкладке. И я кликаю колёсиком мышки. И что происходит? Ни-че-го. Тогда я кликаю правой кнопкой, чтобы выбрать «открыть в новой вкладке». И что происходит? Мне показывается «About Flash Player» и ещё пара пунктов, которыми я ещё никогда в своей жизни не пользовался (и даже не могу представить ситуацию, когда эти пункты мне понадобятся). Что же я делаю, чтобы всё-таки посмотреть на то, что рекламирует баннер? Обычно — ни-че-го (если, конечно, там не «предложение, от которого вообще нельзя отказаться»).
Например, баннер Иконзы на Хабре сверху не позволяет открыть себя в новой вкладке привычными методами. А баннер-то интересный и красивый. И ресурс очень хороший (имхо). Но узнал я об этом (нет, я так и не кликнул на баннер) только после того, как кто-то написал о ней, Иконзе, пост и там я увидел ссылку. Которую можно открыть в отдельном окне.
А ноутбуки справа до сих пор остаются некликнутыми. Так же, как и большинство баннеров на Хабре.
Мораль:
1) Может разработчики баннеров всё-таки будут предусматривать возможность открыть баннер в новой вкладке? Это ведь не сложно, правда?
2) Альтернативный вариант для разработчиков сайтов: может, есть какой-то способ (сам я не очень себе это представляю, но всё же) сделать на своём сайте все баннеры полностью кликабельными?
Мне просто почему-то кажется, что не я один такой… А при большом трафике даже 5% переходов могут составлять большие суммы, которые можно как сохранить, так и потерять. В общем, подумайте над этим. Спасибо.
Flash-баннер
Описание
Стандартный Flash-баннер фиксированного размера.
Flash-баннеры являются более эффективным средством рекламы, чем обычные JPEG или GIF-баннеры. Создание Flash-баннеров — это хороший выбор для тех, кто хочет привлечь внимание посетителей на свой сайт и донести до них важную информацию. Flash-баннеры могут иметь оригинальный дизайн, качественную анимацию и разные размеры.
Подготовка (для разработчиков)
Что необходимо подготовить
Для баннеров, состоящих из нескольких файлов, ограничения проверяются отдельно для каждого файла.
Для загрузки в баннер файлов, свыше указанных ограничений предусмотрено специальное поле с пометкой (URL), в котором указывается полный путь к файлу, расположенному на стороннем сервере.
Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла\n русских букв, пробелов, кавычек, тире и специальных символов.
Создание flash-ролика на ActionScript 2.0
ActionScript 2.0 и FlashPlayer не ниже 8.0.
Создайте прозрачную кнопку поверх всего баннера, и разместите на ней код:
Создание flash-ролика на ActionScript 3.0
Требования к среде разработки:
ActionScript 3.0 и FlashPlayer не ниже 9.0.
Подсчет событий
Для учета события в момент наступления действия, которое необходимо посчитать, вам нужно вызвать код:
для ActionScript 2.0:
для ActionScript 3.0:
где N — это номер события, число от 1 до 30.
Информацию об используемых номерах событий и их названий (что считает данное событие) рекомендуем передавать вместе с готовым flash-роликом для установки в систему управления рекламой.