Проектирование рекламного ролика средствами Macromedia Flash MX

МИНИСТЕРСТВО  НАУКИ И ОБРАЗОВАНИЯ РФ

ГОУ ВПО  «КРАСНОЯРСКИЙ ГОСУДАРСТВЕННЫЙ  ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ ИМ. В.П. АСТАФЬЕВА»

Факультет информатики

Кафедра методики преподавания информатики. 
 
 
 
 

Курсовая  работа 

Проектирование  рекламного ролика средствами

Macromedia Flash MX 
 
 
 
 
 
 

Выполнила студентка 4курса

профиль «Дизайн и компьютерная графика»

Иванова Евгения Николаевна

Научный руководитель                                               Михайлина Елена Николаевна            
 
 
 
 
 
 
 
 
 
 
 

Красноярск, 2010. 
 

Содержание. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Введение

     Реклама (коммерческая) это публичное предоставление информации о товаре и услугах с помощью художественных, технических и психологических приемов с целью возникновения спроса и осуществления продажи.[1]

     В наше время конкурентная борьба на рынке товаров и услуг достигла огромных размеров. Чтобы привлечь покупателя, придумано много различных способов, существует не мало видов рекламы.

     Реклама — процесс донесения информации от рекламодателя до целевой аудитории посредством медиа-каналов или иными способами.

Сегодня все большее число крупных, средних  и даже малых предприятий приходят к осознанию того, что им необходимо иметь свое интернет-представительство. Предприятия создают свои веб-сайты. А для того, чтобы эти сайты имели большее количество поситителей, нужна реклама. Для этого создаются баннеры и рекламные ролики.

     Хороший, качественный рекламный ход способен в очень короткие сроки создать образ товара (фирмы), выделить его из массы ему подобных. Грамотно подобранная мотивация в рекламном сюжете способна сотворить чудо, и в один миг сделать товар или услугу жизненно необходимой! 

   Целью данной работы является создание рекламного ролика средствами macromedia Flash MX.

   Задача исследования: Выявить преимущества рекламного ролика созданного средствами macromedia Flash MX.

   Актуальность  исследования: Рекламные флеш ролики имеют

большую популярность.

Задачи  исследования:

1.Изучить  и описать средства Macromedia Flash MX

для  создания  рекламного ролика.

2. Разработать инструкцию создания рекламного ролика.

Методы  исследования: Структурирование теории по выбранной теме, обобщение и конкретизация материала, описание, разработка инструкции.

Предмет исследования: Рекламный ролик.

Объект  исследования: Процесс и технология создания рекламного ролика.

I.Теоретические основы производства рекламных роликов.

1. Особенности рекламных роликов.

Баннер представляет собой графическое изображение в формате GIF или JPG, анимированную картинку, flash-ролик. Баннер помещается на странице определенного сайта и имеет гиперссылку на сайт рекламодателя, т.е. человека который и заказал этот баннер.

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

Баннерная реклама - один из самых популярных и эффективных способов получения  пассивного дохода для владельцев сайтов 

Баннерная реклама также  имеет свою классификацию.

По  типу размещения её разделяют на:

Размещенную в баннерной сети (охватывание  большого количества сайтов);

Размещенную на отдельно выбранных сайтах (четкое позиционирование к тематике)

По  типу оплаты:

С оплатой  за количество показов;

С оплатой  за количество кликов (переходов)

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

1. GIF-баннеры  – самые простые. Они представляют  собой изображение в формате  .gif, а также могут содержать  несложную покадровую анимацию.

2. FLASH-баннеры  – объекты, использующие технологии  анимации Shockwave Flash. Более заметны  на странице, по сравнению с  gif баннерами того же формата. 

3. Rich media баннеры – наиболее сложные  в изготовлении баннеры. Они  же привлекают наибольшее внимание посетителей страницы благодаря использованию технологии Shockwave Flash и добавлению интерактивности. Принято различать простые и сложные рич медиа баннеры. Сложные рич (фронтлайны), как правило, состоят из тизера (teaser - дразнить), ремайндера и основного ролика. Показ баннера начинается с тизера - в прозрачном слое поверх других элементов страницы, затем баннер сворачивается до ремайндера, который напоминает пользователю о возможности просмотреть основной ролик - содержащий сложную анимацию. 

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

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

Отклик.

Чем больше баннер, тем больше отклик на него. Большие  баннеры более заметны, они могут  более эффектно и информативно воздействовать на пользователя, хотя часто за размещение большого баннера приходится больше платить. Вероятность того, что баннер быстро загрузится на текущую страницу и пользователь увидит его до того, как перейдет к другой странице, напрямую зависит от размера (в килобайтах) баннера. Если пользователь уйдет до окончания загрузки, будет уже совершенно неважно, насколько баннер был красочен и красиво анимирован. Помимо этого, многие службы по обмену баннерами лимитируют его размер (например, не более 15 килобайт).

По статистике, отклик у анимированных баннеров на 25% выше, чем у статичных. Самое  сложное в данном случае – добиться максимальной эффектности при небольшом  размере файла изображения. Анимированные  баннеры хороши также тем, что часто позволяют донести рекламное сообщение более эффективно. Например, использовать сюжеты "вопрос-ответ", "проблема-решение" и т.д., развернуто (за несколько кадров) рассказывать о преимуществах рекламируемого объекта и т.д. Здесь важным также является и скорость анимации (смены кадров): слишком медленная смена кадров равносильна использованию статичных баннеров (пользователь может не задержать свой взгляд и дождаться следующего кадра), а слишком быстрая анимация не дает возможности прочитать (рассмотреть) рекламное сообщение каждого кадра.

Размеры баннеров

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

По данным статистических исследований, в Интернете существует более 250 вариантов размеров баннеров.

Стандартные размеры  баннеров - это размеры баннеров, которые поддерживаются большинством баннерообменных сетей.

Полный баннер или Full banner 468 х 60. Это один из самых первых форматов баннеров в Интернете и самый распространенный размер баннера. Его удобно размещать в шапке сайта, то есть практически на самом видном месте.

Полубаннер или Half Banner 234 х 60.

Баннер 240 х 400. Вертикальный прямоугольник.

Баннер-"ушко" или Square Banner 100 х 100. Квадратная кнопка на втором месте по популярности баннеров в Интернете.

Этот компактный баннер идеален для размещения в  сайдбаре (по бокам страницы), за что их и называют "ушками". Особенно эффективны такие баннеры для напоминающей рекламы. Менее популярен квадратный баннер или Square Banner 125 х 125.

Вертикальный  баннер или Vertical Banner 120 х 240.

Баннер Кнопка_1 или Button_1 120 х 90. Баннер-кнопка_2 или Button_2 120 х 60.

Баннер 88х31. Баннер-кнопка или Micro Button на третьем месте по популярности в Интернете, это наиболее удобный  и эффективный баннер для обмена ссылками между сайтами. Этот формат баннеров также используется для счетчиков.

Популярные  в Интернете размеры  баннеров:

Баннер-растяжка 728 х 90.

Нестандартный баннер 468 х 15 поддерживается некоторыми баннерными сетями.

Прямоугольники 336 х 280; 300 х 250, прямоугольник-небоскреб или баннер для объявления на полстраницы 300 х 600.

Средний прямоугольник 300 х 250.

Квадрат 250 х 250. Чаще всего используется как всплывающее  окно.

Баннер-небоскреб  или башня 120 х 600, 160 х 600, и др.

Узкий баннер 80 х 150.

Микро-кнопка 80 х 15.

Использование цвета.

     Использование ярких цветов привлекают к себе взгляд пользователя. Подберите оптимальное сочетание цветов для баннера. Ниже приведен список некоторых распространенных цветовых сочетаний в порядке постепенного ухудшения восприятия их пользователем:  
- синий на белом; 
- черный на желтом; 
- зеленый на белом; 
- черный на белом; 
- зеленый на красном; 
- красный на желтом; 
- красный на белом; 
- оранжевый на черном; 
- черный на пурпурном; 
- оранжевый на черном; 
- черный на пурпурном; 
- оранжевый на белом; 
- красный на зеленом 
 Эти сочетания не являются аксиомой, не маловажно  
найти оптимальное сочетание цветов с используемым изображением. Использовать эти сочетания лучше в чисто текстовых баннерах. От применения градиентной заливки фона лучше отказаться так как она занимает практически весь размер баннера. 
Вес баннера.

 Это размер  баннера выраженный в байтах (килобайтах). Здесь тоже нет жёстких требований  и ограничений. Всё зависит  от желания владельца сайта.  Запретить ему соответственно никто не может, разместить баннер размером и в 1 мегабайт. Но каковы будут последствия? И как долго будет грузиться страница? А если посетитель сидит на dial-up, то он просто не дождётся загрузки баннера и покинет страницу. Поэтому существуют негласные, а в баннерных сетях и гласные, ограничения по весу баннера. Например, баннер размером 468х60 ограничивают весом 15-20 кб. Такой баннер называется «оптимизированным». Вес баннера оптимизируется при его изготовлении за счёт сжатия. При этом иногда теряется его визуальное качество, но тут уж надо искать консенсус. Либо отличное качество, фотореалистичная композиция с многоцветностью и многокадровая анимация, либо вес баннера. 

 2. Преимущества технологии Flash в создании рекламного ролика.

Рекламный ролик можно создать в таких редакторах компьютерной графики:

 Adobe Photoshop— графический редактор, разработанный и распространяемый фирмой Adobe Systems. Этот продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop (Фотошоп). В настоящее время Photoshop доступен на платформах Mac OS X/Mac OS и Microsoft Windows.

Несмотря на то, что изначально программа была разработана как редактор изображений для полиграфии, в данное время она широко используется и в веб-дизайне. В более ранней версии была включена специальная программа для этих целей — Adobe ImageReady, которая была исключена из версии CS3 за счёт интеграции её функций в сам Photoshop, а также включения в линейку программных продуктов Adobe Fireworks, перешедшего в собственность Adobe после приобретения компании Macromedia.

     Начиная с версии  CS3 для создания анимации в ImageReady переходить не надо. Есть возможность открыть панель с кадрами анимации:   Window>Animation. Но попрежнему нет возможности создать анимаию движения и анимацию формы, как во Flash,   Но с помощью программы PhotoShop можно создать красивый фон, обработать фотографии, создать коллаж для последующего импорта во Flash.

CorelDRAW Graphics Suite X4 - новая версия графического пакета, позволяющего уверенно продвигать вперед любой графический проект. Точные инструменты, лучшая на рынке совместимость файлов и обновленное содержимое помогут воплотить творческие идеи в профессиональные результаты: от красочных логотипов и вывесок до необыкновенных маркетинговых материалов и привлекательной интернет-графики. В его состав входят редактор векторной графики CorelDRAW X4, редактор растровой графики PHOTO-PAINT X4, программа для преобразования растровых изображений в векторные Corel PowerTRACE X4, программа для создания скриншотов Corel CAPTURE X4, а также электронная книга по работе с пакетом CorelDRAW Handbook. Этот пакет сочетает в себе полный набор великолепных возможностей дизайна, скорость, простоту в использовании. CorelDRAW Graphics Suite подходит и для создания баннеров. Более 100 встроенных фильтров, возможность импорта и экспорта изображений разных форматов, удобство модификации и создания новой графики, безграничное пространство для преображения текста - именно поэтому CorelDRAW Graphics Suite и выбирают профессиональные дизайнеры, признавая его самым удобным софтом для своей работы.

Macromedia FlashMX

Среда разработки Flash MX: векторный редактор, управление анимацией, редактирование кода. Использование линейки времени. Обычные и ключевые кадры. Работа с панелью Movie Explorer. Редактирование кода, доступ к справочной информации. Компиляция флэш-ролика, различные способы его запуска. Символы различных типов, создание символов и их экземпляров. Создание кнопок и работа с ними. Типы текстовых полей. Встраивание шрифтов внутрь ролика. Работа с html-полями.

     Мощное  средство для создания мультимедийных Интернет-приложений: рекламных баннеров, обучающих проспектов, интерактивных  демонстраций, разносторонних интерфейсов и пр. В дополнение к привычным средствам работы с векторной графикой и анимацией, Flash понимает видео в форматах MPEG, DV, MOV и AVI. Работа с видео происходит так же, как в специализированном редакторе, к тому же любой фрагмент может быть снабжен порцией интерактива. Появились новые инструменты работы с графикой, изменена среда написания ActionScript (добавлен дебаггер, настройки подсветки синтсаксиса, свойств шрифта, панели инструментов). 
Macromedia Flash MX - лучший на сегодняшний день пакет программ для реализации ваших фантазий во Flash.  
Основные особенности новой версии Macromedia Flash MX - поддержка стандартов ECMAScript, HTML, MP3, Unicode и XML  
Macromedia Flash MX - возможность импорта видео в форматах MPEG, DV (Digital Video), MOV и AVI,  
Macromedia Flash MX значительно улучшил инструменты для работы с графикой и динамической загрузки изображений и звука.

Технология ShockwaveFlash имеет следующие  достоинства:

• Flash может работать не только с растровой, но и с векторной графикой. Это позволяет создавать различные анимационные эффекты (морфинг, масштабирование), работать с различными степенями прозрачности и сложными градиентными заливками. При этом размер файла остается небольшим.
• Flash-баннеры интерактивны. Их элементы могут реагировать на движение мыши, такие баннеры могут содержать различные виды элементов контроля и разнообразные меню. Взаимодействие с пользователем можно программировать.
• Flash-баннеры могут содержать ссылку не на одну страницу (как обычные GIF и JPG баннеры), а на несколько, таким образом у пользователя есть возможность выбрать конкретную.
• По истечении определенного времени или после взаимодействия с пользователем возможна загрузка нового баннера на месте текущего.
• Flash-баннеры работают со звуком, реализуя две возможности 
  Первая – отдельные звуковые эффекты, короткая фоновая музыка, воспроизводимая циклически. Такие звуки загружаются вместе с баннером. 
  Вторая возможность – музыка или звуковые эффекты, подгружаемые с сервера по мере проигрывания их пользователю и синхронизированные с анимацией баннера. В этом случае длина звукового фрагмента не ограничена.
• С помощью устанавливаемой на сервере программы Macromedia Generator имеется возможность динамически менять содержание баннера. Можно заменять текст, картинки, ссылки на URL и пр. у однажды созданного баннера. Это идеально подходит, например, для новостных баннеров, автоматизируя процесс их обновления.
• Flash-баннеры создаются в специальном редакторе, выпущенном Macromedia. С помощью редактора создается промежуточный файл с расширением .fla для внутреннего пользования и редактирования (аналог .psd в Adobe Photoshop). Для использования в Сети данный файл конвертируется в файл с расширением .swf. Возможна конвертация .fla файла и в другие популярные форматы - avi, анимированный GIF, и т.д.

II. Проектирование рекламного  ролика

на  тему "Выбирайте  дистанционное обучение!"

2.1 Аннотация

Задача: реклама, повышение имеджа вуза.

Цель: привлечь внимание абитуриентов к выбору вуза.

Характер: носит рекламно-информационный характер.

Особенности: служит ссылкой на главную страницу сайта Красноярского Государственного Университета им. В.П. Астафьева.

Целевая аудитория: рекламный ролик «Выбирайте дистанционное образование» создан для абитуриентов, выбирающих вуз.

Размер: 309×373 px.

Использование цвета: цвет фона #3180АЕ. Остальные используемые цвета: #93C5E1, #54B0CF, #FFFFFF.

Средства  создания рекламного ролика: Macromedia Flash MX.

Вид  ролика: Flash- баннер; может быть как внешнм, так и внутренним,

Четкое позиционирование к тематике.

Время на показ ролика: 13 секунд.

Сценарий  ролика:

1. Плавное появление  прямоугольников сверху и снизу. Вверху прямоугольник растягивается справо на лево, внизу наоборот, с лева на право. 
2. Плавное появление названия вуза и название ролика.
3. Появление еще двух одинаковых прямоугольников белого  цвета, которые будут использоваться в виде экранов, на которых будут появляться изображения и текст.
4. Текст, используемый в ролике: «Использование современных технологий», «Обучение в удобное время, в удобном месте», «Независимость студента от географического расположения вуза».
5. Исчезновение всех прямоугольников, акцентирование внимания на названии вуза.

2.2. Этапы создания рекламного ролика.

       Создадим простой Flash-ролик. Для Красноярского Государственного Университета им. В.П. Астафьева. На тему «Выбирайте дистанционное обучение» На заголовке ролика будет отображается название вуза. Также, ролик будет служить ссылкой на главную страницу web- сайта вуза

1. Открываем программу Macromedia Flash Mx , и задаем параметры для данного Flash-ролика.

Устанавливаем значение свойств ролика: цвет фона #3180АЕ, размер окна 309 × 373 px. Частоту смены кадров оставим по умолчанию 12 кадров в секунду.

 С помощью  анимации формы и анимации  движения создаем появление заголовка   ролика. (Рис.1)

Рисунок 1- Создание заголовка. 

2. Создаем два  новых слоя. В каждом слое создадим окошечко, в котором будут появляться данные изображения и описание преимуществ дистанционного образования (Рис.2). С помощью анимации формы появление окошечек можно сделать плавным.

Рисунок 2- Появление окошечек.

3. Импортируем в библиотеку программы изображения, подготовленные за ранее в программе Photoshop CS4.

   Из  растровых форматов Macromedia Flash MX работает с GIF, PNG, JPEG и BMP. Важно помнить, что хотя возможно редактировать и изменять размеры растровых изображений во Flash, swf – файл всегда будет содержать информацию об оригинальном растровом изображении. Чтобы уменьшить размеры конечного файла, пользователю следует заранее привести импортируемое растровое изображение к тому размеру, в котором он желает его экспортировать. 

4.  Преобразовываем векторные изображения в растровые.

   Macromedia Flash MX позволяет преобразовать растровые  изображения в объекты векторной графики. Для этого необходимо выполнить команду Меню/Преобразовать/Растр/Трассировка растрового изображения, предварительно выделив изображение на рабочем столе. Откроется одноименное диалоговое окно. В окне Трассировка растрового изображения доступны следующие настройки:

• Угловой порог. Этот параметр определяет число острых углов и  

     сглаживаемых контуров;

• Точность линий. Этот параметр определяет, насколько точными и 

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

• Минимальная область. Это параметр определяет число соседних пикселей, 

     учитываемых при назначении цвета  конкретной области векторизуемого 

     изображения. Вводится число пикселей  от 1 до 1000;

•   Порог цвета. Если разница в значении составляющих кодировки цвета RGB для двух пикселей меньше цветового порога, то цвета этих пикселей считаются одинаковыми. Пользователь может вводить в соответствующее поле значения от 1 до 500. Чем выше значение, тем меньше число цветов, используемых для отображения векторной фигуры.

Из библиотеки в новый слой вставляем первое изображение. С помощью инструмента  трансформация (Free Transform) подгоняем изображение до нужных размеров.

5. Делаем плавное появление картинки в одном окошечке и появление текста в другом.

Задерживаем изображение и текст на 8-10 кадров и так же плавно делаем исчезновение изображения и текста (Рис.3). Таким же образом анимируем еще несколько изображений.  

Рисунок 3- Появление изображения и текста. 

6. Следующий этап ролика: акцентирование внимания на названии вуза.

Удаляем все элементы ролика. Копируем кадры(Copy Frames), в которых находится заголовок с названием и вставляем их (Paste Frames) в новом слое.

Размещаем заголовок в центре. Анимируем  его появление и делаем задержку на 20 кадров. 

Рисунок.4 - Акцентирование внимания на названии вуза 

7. После того, как вы сделали flash-ролик, нужно сделать  его функциональным.  

Вставить flash-ролик  в код страницы и сделать его  ссылкой с помощью HTML-кода, при  нажатии на баннер должна открываться  веб-страница, которую он рекламирует. Смысл создания любого баннера или рекламного ролика в осуществлении перехода на рекламируемый веб-сайт.

Для этого  нужно создать отдельный слой в баннере и добавим в него кнопку с кодом перехода на встроенном во Flash языке программирования Action Script.

Нажимаем  F9, чтобы открыть панель Actions. Выделяем первый кадр самого верхнего слоя, чтобы выделить кадр с кнопкой, затем нажимаем на маленьком кружочке в центре кнопки. После этого вставляем в панель Action код перехода по клику на flash-баннере. При этом сайт, на который ссылается баннер, откроется в новом окне браузера:  
 

on (release) {

    getURL("http://www.idiso.kspu.ru", _blank);

}

8. Просмотр  ролика

Когда будут анимированы все объекты, можно просмотреть мультик с  помощью горячих клавиш  Ctrl + Enter или с помощью команды меню File – Publish Preview. Также программа Flash позволяет просмотреть одну сцену это можно сделать спомощью команды Control – Play или нажатием клавиши Enter.

9)  Сохранение ролика. Когда ролик готов, его нужно сохранить. Для  последующего редактирования ролик можно сохранить в формате fla: (File/Seve As..), ( Ctrl +Shift+S).