WEB дизайн: Flash технологии

Очень серьезным вопросом, во многом определяющим качество восприятия информации, является рациональное размещение данных на экране.

Фрагменты текста должны располагаться  на экране так, чтобы взгляд пользователя сам перемещался в нужном направлении. Содержимое полей должно не «прижиматься» к краю экрана, а располагаться около его горизонтальных или вертикальных осей. Чтобы подчеркнуть симметрию, содержимое и наименования полей, относящихся к одной группе, должны выравниваться по вертикали. По возможности необходимо выравнивать все логически связанные группы данных.

Требуемая плотность расположения данных – понятие субъективное. Она зависит от конкретного пользователя и решаемой задачи. Однако существуют некоторые правила, регулирующие плотность  расположения данных на экране: [17]

● оставлять пустым приблизительно половину экрана (окна);

● оставлять пустую строку после  каждой пятой строки таблицы;

● оставлять четыре-пять пробелов между столбцами таблицы.

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

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

● проектировании и написании мультимедийных приложений-учебников по предметам, изучаемым в курсе средней школы;

● разработке ряда иллюстрированных демонстрационных моделей  и презентаций, отражающих природные явления, непосредственное восприятие, наблюдение и изучение  которых недоступно или затрудненно;

● создании обучающих  мультфильмов для учеников дошкольного  и младшего школьного возраста;

● дистанционном обучении (в качестве раздаточного учебного материала, учебных презентаций, анимационных моделей);

Наиболее популярной, многофункциональной и  удобной технологией создания самого разнообразного мультимейдийного контента в настоящее время является технология Macromedia Flash.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Глава 2. Разработка тематического и лабораторно  практического курса «WEB дизайн:Flash технологии»

 

2.1 Тематическое планирование  курса «WEB дизайн:Flash технологии»

 

2.1.1 Пояснительная записка

Цель: научить учащихся 10-х классов создавать Web-сайты с использованием технологии Macromedia Flash и размещать их в сети Интернет.

Форма аттестации: выставление  оценок по итогам самостоятельных работ  и итоговой творческой работы.

 

2.1.2. Тематическое планирование

 

№	Тема занятия	Количество часов
Создание графических  изображений с помощью Macromedia Flash
1.	Введение: примеры использования Macromedia Flash технологии в сети Интернет; место Macromedia Flash среди Web-технологий; первое знакомство с программой Macromedia Flash; идея создания сайтов в Macromedia Flash; обсуждение работы с личными проектами; тематическое планирование интерфейса.	1
2.	Интерфейс: рабочая область, ее параметры, сетка, линейка и магнит; полоса времени; ключевые кадры; слои; панель инструментов; инструменты; окна свойств; импорт изображений; работа с  библиотекой объектов.	1
3.	Рисование: линия, карандаш, ластик, кисть, круг, прямоугольник, текст, перо, пипетка, заливка линий и областей, выделения и деформация, лупа и рука, работа с кривыми, градиенты, текстуры.	1
4.	Объект Символ: создание, редактирование, трансформация, взаимное расположение, выравнивание, цветовые эффекты.	1
5.	Web-дизайн: композиция и стилистическое выравнивание.	0.5
6.	Самостоятельная работа №1:рисование сложного многослойного  изображения согласно эскизу.	1.5
Анимация в Macromedia Flash
7.	Движение: создание движения, изменение параметров движения, движение по траектории, движение с изменением цвета, движение нескольких объектов, движение с деформацией, движение анимированного объекта, импорт анимации, движение с подменой объекта.	2
8.	Звук: импорт звука, вставка  звука.	0.5
9.	Маски: работа с масками.	0.5
10.	Пример создания анимированных  спецэффектов.	1
11.	Web-дизайн: «Кадровое» планирование.	0.5
12.	Создание анимированного рекламного баннера.	1
Интерактивная анимация в Macromedia Flash
13.	Объект Кнопка: объект Кнопка, оживающая кнопка.	1
14.	Введение в Action Script: метки, события мыши, команды перехода, остановки и воспроизведения ролика.	1
15.	Интерактивная анимация: объект Видеоклип, внешнее управление проигрыванием видеоклипа, управление свойствами видеоклипа, перетаскивание видеоклипа мышью.	3
16.	Примеры создания интерактивной  анимации с использованием Action Script.	2
17.	Проблемы публикации сайта в сети Интернет.	1
18.	Публикация сайта в  сети Интернет.	1.5
19.	Web-дизайн: интерфейс и навигационная система.	0.5
20.	Создание собственного сайта с использованием Macromedia Flash: проведение консультаций.	5
21.	Пример итоговых творческих работ	5

 

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)