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

Государственное образовательное учреждение высшего профессионального образования

Липецкий государственный педагогический университет

Факультет информационных и социальных технологий

Кафедра информатики

КУРСОВАЯ РАБОТА

по дисциплине

Теория и методика обучения информатике

на тему:

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

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

группы И-06-2

Астахов А.А.

Липецк 2010

СОДЕРЖАНИЕ

Введение

Глава 1. Основы WEB дизайна с использованием Flash технологий

Теоретические основы WEB дизайна

Объяснение термина

Создание технического задания

Этапы проектирования

. Необходимый инструментарий

Основные постулаты Web-дизайна

Использование Flash технологий при создании WEB продуктов

1.2.1 История появления Flash

1.2.2 Примеры использования Flash-технологий

1.2.3 Преимущества и недостатки

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

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

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

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

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

Заключение

Список литературы

ВВЕДЕНИЕ

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

Web-дизайн — это творчество, причем творчество ярко выраженное. Именно в сфере web-дизайна можно полностью проявить все свои способности, ведь здесь цензором результатов вашего труда являетесь вы сами и посетители вашей странички. Никто не ограничивает вас ни в объеме, ни в содержании, ни в компоновке разрабатываемого вами ресурса, никто не загоняет вас в какие-либо жесткие рамки.

Цели создания и публикации во Всемирной сети собственного web-ресурса могут быть совершено различными:

- для web-мастер стремится разместить в Сети информацию на своей страничке, которую в последствии можно использовать при поиске работы или интерактивном общении с другими людьми посредством Интернета;

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

- в ряде случаев посредством домашней странички можно просто зарабатывать деньги.

Целью данной работы является выявление основ WEB дизайна при создании объектов в технологиях Flash.

Объектом исследования является процесс обучения школьников WEB дизайну.

Предмет исследования - технологии программы Macromedia Flash.

Задачей исследования является изучение WEB дизайна на основе Flash технологий, а также выявить и рассмотреть их достоинства и недостатки.

Глава 1. WEB дизайн: Flash технологии

1.1 Теоретические основы WEB дизайна

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

Web-дизайн в определении Дениса Бородаева — вид графического дизайна, направленный на разработку и оформление объектов информационной среды Интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет Web-дизайн от Web-программирования, подчеркивает специфику предметной деятельности Web-дизайнера, позиционирует Web-дизайн как вид графического дизайна.

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

Web-дизайнер - сравнительно молодая профессия, и профессиональное образование в области Web-дизайна в России пока не распространено. В связи с увеличением спроса на Интернет, растет и спрос на дизайн сайтов, увеличивается количество Web-дизайнеров и таковым может работать человек, совершенно не связанный с дизайнерским образованием.

1.1.1 Объяснение термина

В настоящее время под термином Web-дизайн понимают именно проектирование структуры Web-ресурса, обеспечение удобства пользования ресурсом для пользователей. Немаловажной частью проектирования ресурса в последнее время стало приведение ресурса в соответствие стандартам W3C (Консорциум Всемирной паутины), что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств, а также кроссплатформенность (программное обеспечение, работающее более чем на одной аппаратной платформе и/или операционной системе) вёрстки ресурса. Также непосредственно с дизайном сайтов смежны маркетинг в Интернете (Интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация. Таким образом, визуальными средствами решаются самые разнообразные задачи, такие как, повышение продаж, укрепление доверия, создание определённого имиджа и другие.

1.1.2 Создание технического задания

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

1.1.3 Этапы проектирования

Дизайн основной и типовых страниц сайта

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

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

HTML-верстка

Утверждённый дизайн передаётся html-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает html-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны.

В небольших студиях, html-кодированием занимается Web-дизайнер.

Программирование

Далее html-кодер передает HTML-файлы программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Web-разработчики часто называют CMS «движком».

В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» — в данном случае правильно будет назвать его просто специалистом по CMS, должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «Web-дизайна».

При программировании сайта специалисту назначаются контрольные точки сроков.

Завершающим этапом разработки сайта под ключ является, конечно же, тестирование.

Web-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer и Opera.

Упомянутый Internet Explorer 6 слишком по-своему видит HTML-стандарты - отголоски старой борьбы за лидерство с Netscape. На данное время это морально устаревший браузер, создает много проблем для Web-дизайнера, и его хотели, чуть ли не объявить вне закона. Но поскольку он в стандартной поставке Windows XP, и стоит на более, чем половине всех компьютеров, - никуда не деться, приходится в нём тестировать обязательно. Далее тестируется вид с увеличенными шрифтами, при отсутствующем флэш-плеере и тому подобное. Обнаруженные ошибки отправляются на исправление до тех пор, пока не будут устранены.

Сроки контролирует менеджер проекта. Так же на этом этапе привлекают к работе дизайнера, чтобы он провел авторский надзор.

Размещение сайта в Интернет

Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

Наполнение контентом (любое информационно значимое наполнение) и публикация

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

Внутренняя SEO-оптимизация

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

Внешняя SEO-оптимизация

Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Поскольку SEO-оптимизация это разновидность шаманизма — она как магия, классифицируется на «белую» и «черную» - такую, после которой сайт за две недели попадает в топ, а потом в бан. Настоящая белая SEO оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

Так же на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

Процесс и результат

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

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

Конечным продуктом работы Web-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960х640 пикселей - размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь - отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновку и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки.

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

Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop или другом визуальном редакторе (например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.

Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.

1.1.4 Необходимый инструментарий

Для того чтобы Web-мастер чувствовал себя максимально комфортно при разработке нового проекта, помимо рабочего места и персонального компьютера ему необходим определенный набор программного обеспечения, базовый инструментарий, без которого создателю Web-сайта просто не обойтись. Начинающему Web-мастеру порой бывает трудно сориентироваться не только во всем многообразии наименований существующих программ, но даже в списке минимально необходимых для работы приложений. Можно что-либо забыть, упустить или даже просто не знать о том, что впоследствии вам понадобится какая-то про- грамма или утилита. Ниже предложен полный список средств, которыми вы должны располагать перед тем, как возьметесь за разработку своего первого Интернет-проекта. Данные программы рассчитаны на использование под управлением Microsoft Windows 9X. Итак, для полноценной работы Web-дизайнеру необходимы:

- Среда разработчика документов HTML — так называемый WYSIWYG-pe-дактор, рекомендуется программа Microsoft FrontPage версии 98 или 2000, либо FrontPage Express.

- Редактор векторной графики, рекомендуется CorelDraw Версии 8 или 9.

- Редактор растровой графики, рекомендуется Adobe Photoshop версии 4.0или выше.

- Браузер Microsoft Internet Explorer версии 4.0 или выше.

- Браузер Netscape Navigator версии 4.01 или выше.

- Перекодировщик кириллицы, рекомендуются программы ConvHTML и SNKDECode.

- Оптимизатор HTML, рекомендуется UtilMind HTML Compressor версии 1.5 или выше.

- Оптимизатор растровых изображений GIF, рекомендуется программа Gif-Clean 32.

- Оптимизатор растровых изображений JPEG, рекомендуется программа JPEGCleaner версии 2.1 или выше.

- Редактор GIF-анимации, рекомендуется программа Ulead GifAnimator.

- Фрагментатор графики, рекомендуется программа PictureDiser.

- FTP-клиент, рекомендуется программа CuteFTP.

- Adobe Photoshop

- CorelDraw

Значительная часть этих приложений доступна в Интернете для свободного копирования в виде версий freeware и shareware. Наконец, в качестве редактора HTML-документов вам понадобится программа Microsoft FrontPage Express, входящая в комплект поставки браузера Microsoft Internet Explorer 5.0 или выше и операционной системы не ниже Windows 98.

1.1.5 Основные постулаты Web-дизайна

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

При планировании и создании любого Web-ресурса важно помнить, что главный критерий, на который следует ориентироваться в процессе разработки страниц, это удобство конечного пользователя, то есть будущих посетителей вашего сайта или домашней странички. Оно и не удивительно: ведь именно для того, чтобы посетители могли ознакомиться с содержимым вашего ресурса, вы и создаете его. Сложность момента заключается в том, что упомянутых выше потенциальных посетителей существует великое множество, причем используют они чрезвычайно широкий спектр аппаратных средств и программного обеспечения. Отсюда вытекает необходимость определенной стандартизации подходов к Web-дизайну, выработки алгоритмов, которые могли бы удовлетворить всю вашу потенциальную аудиторию, позволяя людям адекватно и с максимальным комфортом воспринимать содержимое вашего сайта. Увы, на практике создание подобных универсальных решений не представляется возможным не только в связи с быстрой эволюцией вычислительной техники и программного обеспечения, но и по причине чрезмерной широты ассортимента уже существующих аппаратных и программных средств. Единственно возможным выходом в этой ситуации было бы адаптировать сайт к тем минимальным параметрам пользовательской системы, ниже которых отображение графической и текстовой информации на экране компьютера будет затруднительно. Такой подход выглядит достаточно привлекательным с точки зрения демократичности по отношению ко всем категориям пользователей: у владельцев устаревших компьютеров со слабыми мониторами и видеокартами в процессе знакомства с вашим ресурсом не возникнет особых сложностей, владельцы же современных машин тем более не будут испытывать каких-либо проблем. Именно отсюда и берет начало первое правило, которое вам следует усвоить и запомнить. Формулируется оно следующим образом.

ВНИМАНИЕ! В современном Интернете принято молчаливое соглашение о том, что — профессиональный сайт должен корректно отображаться при экранном разрешении 640x480 точек с цветовой палитрой в 256 цветов.

Следующее правило обусловлено тем, что вам неизвестно программное обеспечение, которое используется вашими потенциальными посетителями для просмотра Web-страниц. Речь идет о браузерах. Как уже говорилось, согласно статистике самыми популярными браузерами среди пользователей Интернета являются Microsoft Internet Explorer и Opera различных версий, все остальные распространены в значительно меньшей степени. Как известно, Microsoft Internet Explorer и Opera используют различные алгоритмы обработки HTML-кода, из-за чего один и тот же элемент в этих двух броузерах может отображаться совершенно по-разному. Среди начинающих Web-дизайнеров бытует мнение, будто заставить страницу выглядеть одинаковым образом в упомянутых программах решительно невозможно. Однако это совершенно не так: все различия между Opera и Explorer прекрасно поддаются количественной оценке и анализу, более того, существует множество алгоритмов, применение которых позволяет свести неадекватность отображения страниц к минимуму.

ВНИМАНИЕ! Web-страница должна идентично отображаться в любом браузере.

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

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

ВНИМАНИЕ! Все страницы Web-сайта, а также все интегрированные в них графические и интерактивные элементы должны быть минимальными по объему.

Другой момент, о котором обязательно следует упомянуть, касается навигации по сайту. У пользователя не должно возникать ни малейших затруднений при переходе от одного раздела созданного ресурса к другому, независимо от модели его компьютера и типа установленного программного обеспечения. Он должен отчетливо представлять себе логическую структуру вашего проекта и, по возможности, иметь доступ ко всем его компонентам в любой момент времени. Именно поэтому необходимо помнить следующее.

ВНИМАНИЕ! Созданная вами Web-страница должна обязательно включать навигационные элементы, охватывающие все разделы вашего сайта, причем эти элементы должны всегда быть на виду. Их расположение следует выбирать, исходя из максимального удобства для пользователя. Если они размещены в верхней части страницы и пропадают из поля зрения после скроллинга (прокрутки экрана вниз), не забудьте продублировать их в нижней части документа. Графические ссылки и активные элементы следует повторить в тестовой форме в расчете на пользователей, в браузерах которых отключено отображение графики или отсутствует поддержка Java.

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

ВНИМАНИЕ! Старайтесь выдержать весь проект в одном дизайнерском стиле, оформляйте различные его разделы таким образом, чтобы общее художественное решение было схожим для всего сайта.

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

ВНИМАНИЕ! Не используйте на одной Web-странице более трех различных шрифтов, включая шрифты, применяемые при создании графических элементов.

ВНИМАНИЕ! Используйте только корректные цветовые схемы и не применяйте при оформлении документов более трех различных цветов.

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

1.2 Использование Flash технологий при создании WEB продуктов

1.2.1 История появления Flash

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

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

В 1994 году с появлением World Wide Web (www) сеть Интернет начинает интенсивно развиваться. Появляется множество сайтов, посвящённых различной тематике.

Дизайнеры, да и просто пользователи Internet-ресурсов мечтали превратить Интернет из текстовой среды в мультимедийную, чтобы сайты были удобнее и привлекательнее.

Сначала страницы стали походить на электронную газету, но со спецификой возможностей компьютера и Интернета: появились переходы по ссылкам, новости вносились в сеть раньше, чем в печатные издания, появилась возможность просмотра архивов новостей и т.д.

Появляется необходимость создания анимации. Видеоролики не могли использоваться для встраивания в Web-документы из-за большого размера. Поэтому на сайтах используется gif-анимация (последовательное отображение рисунков), позже Web-мастера внедряют на своих сайтах анимацию, изготовленную с использованием одной из технологий векторной графики. Но из-за большого разнообразия программных средств и разработчиков программных продуктов возникала проблема с отображением анимации на компьютере пользователя. Для отображения того или иного формата необходимо было устанавливать всё новые и новые плагины. Если же они не были установлены, то посетители сайта не могли воспринять идею дизайнера, а в некоторых случаях получали просто раскиданную по экрану текстовую информацию вместо удобного сайта.

Выход был один - одна из компаний создателей векторной графики объединится с гигантом анимации и станет доминирующей на рынке векторной анимации. Такими компаниями стали FutureSplash Animator и Macromedia. Джонатан Гай, основатель компании FutureSplash Animator пытался сначала договориться с одним из гигантов - Adobe. Но сделка с этой компанией не состоялась. По-настоящему продуктом Джонатана заинтересовались после того, как FutureSplash Animator был использован такими компаниями, как Microsoft и Disney Online. В ноябре 1996 года Джонатан Гай и его коллеги присоединились к компании Macromedia, и FutureSplash Animator превратился Macromedia Flash 1.0. Yа сегодняшний момент компания Adobe всё-таки объединилась с Macromedia Flash.

К концу 20-го века возможности Web-анимации достигли уровня обычных видеороликов, и ограничивались лишь скоростными возможностями Интернета, что, по сути, и сдерживает графическое развитие Flash-технологий. Но в Macromedia Flash внедрены такие возможности, о которых не могут и мечтать создатели видеофильмов - это диалог, участие пользователя в анимации. Первоначально это были банальные кнопочки, от нажатия которых происходили те или иные графические изменения. Но очень быстро Macromedia Flash превратилось в среду разработки профессиональных приложений: сайтов, справочников, игр, Интернет-казино. Появление встроенного языка программирования ActionScript, позволяет разработчикам создавать CGI программы, полнофункциональные HTTP приложения.

В настоящий момент для создания таких приложений программисту необходимо быть немного и дизайнером, знать графические возможности Flash и ActionScript.

1.2.2 Примеры использования Flash-технологий

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

Недавно появившись, Flash уже завоевал большую популярность среди Web-дизайнеров. Flash придает сайтам динамичность, позволяет использовать больше звуковых и графических эффектов. Все программное обеспечение, необходимое для просмотра Flash-страниц, является свободно распространяемым (freeware). Программы для создания страниц - условно-бесплатные (shareware), и Macromedia обеспечивает возможность пользования ими в течение 30 дней.

Обычно Flash-проекты созданы посредством интеграции в обычный HTML-документ Flash-объекта. Для просмотра такой страницы необходим плагин, входящий в стандартную конфигурацию Windows 98. Размер этого плагина всего 160 кб. Если по каким-либо причинам этой программы нет, ее можно взять с сайта Macromedia. Однако в большинстве случаев Flash-страница сама определяет отсутствие необходимого программного обеспечения, автоматически скачивает его и после этого становится видимой.

Другим примером использования Flash-технологии является создание интерактивных локальных презентаций. Для этого в программе предусмотрена опция создания исполняемого (.exe) файла. Но и в этом случае размер программы остается небольшим и доступным для использования в Интернете.

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

Основным объектом, которым программист оперирует при создании Flash-анимации, является кадр. А использование мощной внутренней системы меток, ссылок и переменных позволяет проигрывать наборы кадров несколько раз в зависимости от значения конкретных переменных. Таким образом, экономится объем конечной программы и время загрузки.

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

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

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

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

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

1.2.3 Преимущества и недостатки

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

Дело в том, что Flash - это не обычная растровая (gif, jpg, bmp и т.п.) картинка и не html. А мультемидийная технология. Как у любой технологии, у этой есть свои преимущества и недостатки.

Рассматривать Flash-технологию стоит с нескольких позиций:

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

C функционально-технической стороны;

C практической стороны.

1. Оформление и культура сайта

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

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

2. Функционально-техническая сторона

Flash использует plug-in модули, мультемидийные функции, на сегодняшний день не интегрированные в браузеры. В силу присущих Flash-технологии свойств она имеет функциональные недостатки.

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

- Обесцениваются функции браузера:

Регулировка размера шрифта. Изменять шрифт средствами стандартных функций браузера нельзя. Поэтому шрифт у посетителя будет таким, каким его задал дизайнер (для справки: все дизайнеры обладают прекрасным зрением, делая шрифты мелкими и очень мелкими);

Кнопка «назад». Она перемещает не к началу сценария анимации, как ожидается, а на предыдущую страницу сайта, где Flash-элемент еще/уже отсутствует;

- Поиск по странице

Гиперссылки лишаются важного качества - изменяемости цвета в зависимости от движения по сайту посетителя. Вспоминаешь, был ли ты на этой странице или нет. Таким образом, затрудняется навигация по сайту в целом;

- Вес страниц увеличивается в разы;

- Навигация во Flash-сайтах часто неудобна;

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

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

3. Практическая сторона

Кроме технических тонкостей, которые увидит не каждый, Flash обладает рядом весомых практических недостатков:

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

- Flash-ролики создаются раз и навсегда. Вместо этого можно уделить внимание более частому обновлению содержания сайта;

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

Прежде, чем применять Flash на сайте, надо поставить себя на место пользователя: нужна информация; мало времени; модемная скорость; трафик заканчивается.

Проанализировав этот параграф, сделаем вывод:

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

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

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

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

web дизайн 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 Закрепление новых знаний:

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

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

Просмотр баннеров (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)

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

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

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

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

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

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

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

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

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

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

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

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

Слогана

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Яйцо – МТС;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ЗАКЛЮЧЕНИЕ

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

Таким образом сделаем выводы, что 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

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

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

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

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