План-конспект урока на тему: «Создание анимированного рекламного баннера в среде Macromedia Flash»

2.2 План-конспект урока на тему: «Создание анимированного рекламного баннера в среде Macromedia Flash»

Цель урока: закрепление приобретенных навыков работы в среде Macromedia Flash и изучение нового понятия баннер.

Задачи урока:

· Образовательные:

закрепление навыка работы в среде Macromedia Flash;

изучение нового понятия баннер.

· Воспитательные:

воспитание чувства ответственности за результат работы;

формирование и развитие навыков корректного поведения при обсуждении вопросов;

воспитание бережного отношения к компьютерной технике.

· Развивающие:

развитие творческих способностей;

формирование умений выступать перед аудиторией;

формирование и развитие умения кратко и точно отвечать на поставленный вопрос

Тип урока: урок направленный на получение и закрепление знаний, умений и навыков.

Метод обучения: проектный.

Форма обучения: групповая.

Технические средства: компьютеры, мультимедийный проектор, интерактивная доска.

План мероприятия:

I Организационный момент (2 мин.)

II Изложение нового материала (10 мин.)

III Закрепление новых знаний:

1.  Устная работа (8 мин)

2.  Создание баннера на компьютере (20 мин)

3.  Просмотр баннеров (5 мин)

IV Домашнее задание (2 мин)

Ход урока:

I Организационный момент.

Учитель: Сегодня мы продолжим изучение программы Macromedia Flash и выполним практическую работу по созданию баннера в этой программе.

Учитель: Какие ассоциации у вас вызывает слово баннер?

Учащиеся: Интернет, реклама, прямоугольник.

II Изложение нового материала (презентация “Понятие баннера”).

Новый материал - (Слайд 1)

Комментарии. Весь рассказ сопровождается показом презентации (Приложение 1)

История

Баннер – это прямоугольное графическое изображение, рекламирующее Web-узел, продукцию или услуги и содержащее в себе ссылку на этот Web-узел. Баннеры также бывают информационными, которые сообщают о каком-либо событие. (Слайд 2)

Когда зародилась баннерная реклама, сказать сложно. Она появилась, когда стала развиваться коммерция в Сети. Нужно было рекламировать свои услуги в Сети владельцам сайтов. Да и сами сайты нуждались в рекламе.

Энциклопедия Wikipedia утверждает, что первый графический рекламный модуль в Интернете, на который можно было кликнуть для перехода к информации рекламодателя, был продан в 1993 году на сайте Global Network Navigator, принадлежавшем американскому компьютерному издательству O'Reilly. (Слайд 3) Однако днем рождения баннера следует считать 25 октября 1994, когда на сайте Hotwired (принадлежавшем самому известному американскому журналу о технологиях Wired) был размещен баннер AT&T, который выглядел ужасно, но был инновацией. (Слайд 4) Размер баннера - 468х60 - впоследствии стал самым известным стандартом в Интернет - рекламе, хотя и был вытеснен более крупными форматами 10 лет спустя.

На рисунке ниже изображен баннер, который предположительно считается самым первым в Интернет. Он появился в 1994 году. (Слайд 5)

Размеры

Баннер может иметь любые размеры по вертикали и горизонтали – это ведь всего лишь рекламная картинка! Но, как и все в этом мире, эти размеры подвергались стандартизации, в результате которой можно выделить несколько основных типов.

Наиболее распространенными являются баннер размером 468х60. Благодаря удачному подбору размера сторон, такие рекламные картины имеют хороший отклик и, кроме того, прекрасно встраиваются в шапки большинства страниц Интернета. Кроме того, он является первым форматом в сети Интернет. (Слайд 6)

Размеры 125*125, 120*90, 120*60 чаще всего встречаются на страницах слева или справа в колонке меню сайта.

Кнопки 88*31 вносятся обычно вниз страницы.

В Рунете большой популярностью рекламодателей пользуются размеры 100?100, а также 150?80, несмотря на то, что они не стандартизованы.

Часто создается целая серия баннеров, имеющая единый стиль, но разные размеры. (Слайд 8)

Классификация баннеров

Можно провести различные классификации баннеров.

Баннеры делятся по виду на статичные и анимационные. Статичные баннеры являются обычными картинками. В основном это логотипы. Настоящие рекламные баннеры являются анимационными. (Слайд 9)

Различают имиджевые, кликовые и информационные баннеры. Первые, как следует из названия, формируют имидж компании, бренд, а вторые стараются привлечь потенциальных клиентов на собственную web-страницу, третьи информируют о каком-либо событии. (Слайды 10-13)

Баннеры могут также отличаться технологией изготовления. Самый распространенный формат – GIF. Он подходит для неанимированных или несложных анимированных баннеров. При использовании GIF-формата размер его очень мал, и это хорошо, поскольку тогда повышается вероятность того, что пользователь загрузит баннер до конца. (Слайд 14)

Баннеры формата GIF рисуются в различных растровых или векторных графических редакторах. Для этих целей используются специальные программы типа Ulead GIF Animator или Adobe ImegeReady. (Слайд 15)

Особой популярностью несколько лет пользуются Flash – баннеры, созданные в программе Macromedia Flash. Данные баннеры имеют преимущества по сравнению с GIF-баннерами: (Слайд 16)

- они могут реализовывать более сложную анимацию;

- имеют меньший размер;

- грузятся даже тогда, когда пользователь отключил в своем браузере функцию отражения графики.

Существует также третий, самый редкий стандарт, так называемый интерактивный баннер. Такие баннеры создаются с использованием технологии CGI, Java или VBS, а также элементов HTML и Flash-анимации. (Слайд 17)

Создание баннера

Итак, баннер - это приглашение на ваш сайт. Конечно, оно должно быть оригинальным, заметным, необычным, но в тоже время простым и понятным. Хороший баннер – это некая идея, которая должна заинтересовать посетителя и зажечь в нем желание сходить по ссылке.

Основные задачи, которые должен решать баннер:

1.  Привлечь внимание посетителей

2.  Отличаться от других баннеров

3.  Соответствовать теме сайта

При измерении эффективности баннеров пользуются термином CTR (Click Through Ratio), измеряемого в процентах и выражающего отношение числа показов баннера к числу нажатий на него. Для обычных баннеров он составляет от 0,5 до 1,5 %. Существуют и другие более сложные расчеты эффективности баннеров.

Посетитель сайта затрачивает на просмотр баннера не более 3-5 секунд. Поэтому мысль на баннере должна быть выражена четко и образно. Основными элементами баннера являются слоган и визуальный образ. К разработке и того и другого следует переходить после уяснения задач баннера. Придумывание хорошего слогана очень важно. Плохая фраза может испортить самый прекрасный образ. (Слоган – девиз или краткая фраза, выражающая основную мысль рекламного сообщения). В области рекламы существуют конкурсы на слоган, так по итогам 2006 года победителем стал слоган Yandex “Найдется все” (поисковая система). Победа была одержана над слоганом “Управляй мечтой” (Toyota). (Слайд 18)

Придумав слоган, можно подбирать иллюстрирующий его графический образ.

Также при создании баннера нужно учитывать, что просматриваться он будет в чуждом окружении, и мы ничего не будем знать о странице, на которой он окажется, и не сможем предусмотреть цветовой гаммы. Поэтому необходимо явно обозначить границы баннера – по его периметру. Кроме того, у баннера не должно быть прозрачного фона – обязательно сплошной (но не обязательно одноцветный).

Баннер должен нести некую идею, иначе он будет непривлекателен, ему будет нечем привлечь, заинтриговать, заинтересовать посетителя. Хороший баннер можно сравнить с головоломкой – она не сразу решается, но найдя ответ, посетитель получает положительные эмоции и запоминает его.

Можно считать, что каждый баннер состоит из следующих частей: (Слайд 19)

1.  Слогана

2.  Визуального объекта, иллюстрирующего слоган (часто это логотип).

3.  Цветовой гаммы (для имиджевых баннеров цвета часто совпадают с цветом рекламирующего сайта)

4.  Дополнительной информации (адрес web-страницы, пояснительный текст)

5.  Дополнительных элементов оформления, подчеркивающих основную мысль и стиль баннера. В случае имджевых баннеров очень удобно сделать один шаблон и, подставляя разные слоганы и визуальные объекты, получить целую серию баннеров.

Создать хороший баннер очень сложно. Как говорят практики: “Нужно запомнить одно правило – если созданный баннер вам не нравится, то вряд ли он понравиться другим”.

III Закрепление новых знаний:

1.  Устная работа.

Комментарии. Учащимся выдается Приложение 2. В круглых скобках записаны правильные ответы к заданиям.

1. Назовите компании, которые используют следующие слоганы:

“О ком ты думаешь сейчас?” (МТС)

“Розовый цвет доверься ему и пятен нет” (Ваниш)

“С “…” веселей. В доме чисто в два раза быстрей” (Мистер Пропер)

“Управляй мечтой” (Toyota)

“Иммунитета много не бывает” (Имунели)

“Корм энергичных кошек” (KiteKat)

“Все, что нужно человеку” (шоколад “Аленка”)

“Свобода быть собой” (Саваж)

Построй свое общение” (МегаФон)

“Живи на яркой стороне” (Билайн)

“Счастье – это просто” (Фруктовый сад)

“Объединяя поколения” (печенье “Юбилейное”)

2. Составьте слоган (несколько) для баннера сайта о животных (о городе).

3. Назовите 2-3 компании, в логотипе которых имеется конкретный объект, иллюстрирующий ее бренд:

Яйцо – МТС;

Пчела – Билайн;

Профиль человека - Мегафон.

Многие бренды и компании используют для своих логотипов два - три цвета.

4. Назовите 2-3 компании, в логотипе которых имеется два цвета:

Билайн (черный и желтый);

МТС (красный и белый);

Северсталь (синий и красный).

2.  Создание баннера на компьютере

Практическая работа расписана по этапам в Приложении 3.

3.  Просмотр баннеров

Комментарии. Все, созданные, баннеры могут быть переданы на учительский компьютер и с помощью программы Macromedia Dreamweaver вставлены в HTML-документ и показаны через проектор.

IV Домашняя работа.

Продумайте дизайн, слоган и подберите картинки для баннера, рекламирующего вашу будущую профессию.

Приложение 4.

ЗАКЛЮЧЕНИЕ

В заключении надо также отметить, что в отличие от других технологий анимации Web-страниц, при использовании Flash-технологий отсутствует проблема несоответствия размеров экрана и страницы

Естественно, Flash не обходится без недостатков. Основным серьезным недостатком использования Flash-объектов является необходимость для конечного пользователя иметь установленный плагин. Хотя, как было сказано выше, во многих случаях, пользователь уже имеет эту программу.

Второй недостаток заключается в высоких требованиях к ресурсам компьютера, на котором просматривается Flash-ролик. Проигрыватель анимации отнимает достаточно много ресурсов процессора, а скорость проигрывания сильно зависит от размеров экрана. Но, тем не менее, программа для проигрывания Flash-роликов работает на любом компьютере под управлением ОС Windows любых версий.

Таким образом сделаем выводы, что Flash противопоказан крупным информационным сайтам (главная цель которых — погоня за посетителями);

Flash применим для малого сайта узкой специализации (например, для сайта, чей адрес узнается с визитки его представителя и только);

Использование Flash хорошо подходит для рекламы и развлечений (баннеры, промо-сайты, игры);

Если можно обойтись без Flash, лучше обойтись без Flash.

СПИСОК ЛИТЕРАТУРЫ

1. Бородаев Д.В. Web-сайт как объект графического дизайна. Монография. — Х.: "Септима ЛТД", 2006. — С. 288.

2. Грибов Д.Е. Macromedia Flash 4. Интерактивная web-анимация. - М. ДМК. 2000. - 672 с.

3. Гончаров А.Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. — "КУДИЦ-ПРЕСС", 2007. — С. 320.

4. Дунаев Владислав. Кухня Photoshop – СПб.: Симбол-плюс, 2006 г.

5. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб.: Симбол-плюс, 1999 г.

6. Мильберн Кен, Крото Джон. Внутренний мир Flash 5 для дизайнеров. К: Диасофт. 2000. - 496 с.

7. Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008. — С. 816

8. Смирнова И.Е. “Начало Web-дизайна”, Санкт-Петербург, “БХВ-Петербург”, 2003 г.

9. Франклин Д., Паттон Б. Flash 4. Анимация в интернете. - СПб. Символ Плюс. 2000.-464 с.

10. Энди Андерсон, Марк Дел Лима, Стив Джонсон. Macromedia Flash MX 2004 Show Me: Macromedia Flash MX 2004. – М.: Вильямс, 2005. – С. 544

11. Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — С. 368

Электронные источники:

12.  http://www.diwaxx.ru/web, Diwaxx.ru, с. «WEB-дизайн»

13.  http://ru.wikipedia.org/wiki/Web-Дизайн

14.  http://www.i2r.ru/static/255/ с. «Библиотека Интернет Индустрии I2R.ru»