Створення web - сторінки з підключенням програми Macromedia Flash
МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ
ДОНЕЦЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ
Кафедра теорії пружності і
обчислювальної математики
Спеціальність «Прикладна математика»
КУРСОВА РОБОТА
на тему: Створення web - сторінки з підключенням програми Macromedia Flash
Виконав студент
3 курсу групи І
Малінков Артем
Науковий керівник
Профатіло Л.Н.
Донецьк, 2011
Содержание
Введение
В настоящее время Интернет-технологии развиваются быстрыми темпами, и все большее распространение находят программные продукты позволяющие создавать веб-приложения, интерактивные программные продукты, веб-анимацию. К таким программным продуктам можно отнести: Adobe Gif Animator, 3dsmax, Corel R.A.V.E., Macromedia Flash, Maya и многие другие.
Flash-технологии,
или, как их еще называют, технологии
интерактивной веб-анимации, были
разработаны компанией
Недавно появившись, Flash уже завоевал большую популярность среди вебдизайнеров. Flash придает сайтам динамичность, позволяет использовать больше звуковых и графических эффектов.
Целью данной работы является развитие навыков для создания web-сайта с flash-технологией.
Цель работы
Цель данной курсовой работы – создание web – страницы со встроенными Flash-приложениями. Данные приложения являются интерактивными со зрителем и работающие независимо от зрителя. Эти приложения помогут в развитии навыков в работе web-дизайнера.
Раздел 1. Язык программирования HTML
HTML (от англ. Hyper Text Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб - страниц создаются при помощи языка HTML. Текстовые документы содержащие разметку на языке HTML традиционно имеют расширение .html или .htm. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera.Html-документ - это текст, состоящий из HTML-кодов и основного текста документа. Для форматирования текста, задания структуры документа, встраивания ссылок и мулитимедиа-объектов в HTML-документах используются специальные кодовые слова, которые называются дескрипторами разметки (тегами). С помощью команд этого языка выполняются следующие действия:
- вывод текстовой информации
любого цвета, размера с
- Вывод графических изображений,
- Организация ссылок и переход на другие разделы документа и любые другие документы в WWW,
- Вызов звуковых файлов,
- Организация таблиц,
- Разделение экрана на
- И многие другие функции. [1]
1.1. Структура HTML – документа
В данной курсовой используются такие теги:
<html >
<head>
<title>
<body>
<ul>
<li>
<script>
<object>
В первую очередь
нам потребуется создать файл
с расширением "htm" или "html"
и открыть его для
Текст для HTML-документа набирается в том виде, в котором его должен показать браузер, а при выделения фрагментов, которые предназначены для разметки документа (тегов), используются угловые скобки (знаки "больше" и "меньше") .
Любой документ HTML начинается с открывающего тега и заканчивается соответствующим ему закрывающим тегом . Закрывающий тег отличается от открывающего наличием косой черты перед названием тега. В языке HTML нет различий между большими и малыми буквами при записи тегов, однако принято записывать открывающий тег большими буквами, а закрывающий - малыми. Часть документа, которая находится в пределах от открывающего до соответствующего ему закрывающего тега, называется контейнером (to contain - содержать что-либо). Теги, у которых есть закрывающий и открывающий варианты записи называются парными, а те, которые используются только в одном виде (например, тег <br/> ), называются непарными. Весь файл web-страницы - это по сути дела один большой контейнер HTML (так как начинается и заканчивается ).
Внутри контейнера HTML последовательно записываются два контейнера:
1. (заголовок документа).
Внутри этого контейнера
2. (тело документа). Этот
контейнер содержит всё то, что
должен показать браузер
Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and Office systems. Standard Generalized Markup Language (SGML)». [2]
1.2 Отличительный признак HTML-документа
Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты4 version, lang и dir, которыми в данном случае мало кто пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом заканчиваются все гипертекстовые документы.
Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускается вложение элементов TITLE, ISINDEX, BASE, NAME, LINK, NEXTID.
Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна браузера. Эта особенность часто используется для организации поиска в WWW. Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы строка внутри TITLE, не будучи, слишком длинной, достаточно отображала назначение документа.
1.3 Синтаксис HTML
Заготовка типичной WEB-страницы:
<HR>
<H1> Заголовок 1 h1>
<H2> Заголовок 2 h2>
<H3> Заголовок 3 h3>
<H3> Заголовок 4 h4>
<H3> Заголовок 5 h5>
<H3> Заголовок 6 h6>
<HR>
Здесь расположена <B> ссылка 1 b><A name = “S001”>a>
<HR>
<P> Здесь должен располагаться оригинальный текст WEB-страницы
Переход в <A href = “#top”>начало> документа
body>
html>
Cуществует большое различие
между стандартом официальном и стандартом
фактическим. HTML постоянно
Рассмотрим основные элементы HTML.
<HTML>html>
Означает документ на языке HTML. Я уже упоминал о том, что одним из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и коечным тегами должна находится вся WEB – страница. В принципе этот элемент. Он имеет атрибуты version, long и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY и других, определяющую общую структуру WEB-страницы. Конечным тегом html> оканчиваются все документы в формате HTML.
<HEAD>head>
Область заголовка Web – страницы, её первая часть. HEAD служит
только для формирования общей структуры
документа. Этот элемент может иметь атрибуты IANG, DIR,
должен включать элемент TITLE и допускает
вложение элементов BASE, META, LINK,
<TITLE>title>
Элемент для размещения заголовка Web – страницы. Строка текста , расположенного внутри этого элемента, отображается не в документе, а в заголовке окна броузера. Эта строка часто используется при организации поиска в WWW. Эта строка должна достаточно точно отражать назначение документа.
<STYLE>style>
Элемент для
описания стиля некоторых элементов Web
<META>
Элемент содержит служебную информацию, которая не отражается при просмотре Web- страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент Meta содержит два основных атрибута, первый из которых определяет тип данных, а второй – содержание. Вот несколько примеров meta – данных:
Дата, обозначающая срок годности документа:
Name – “Expires” content = “Дата”
Адрес электронной почты:
Name = “Reply – to” content = “ Имя @ Адрес “
Имя автора Web-страницы:
Name = “Author” content = “ Имя автора”
Набор ключевых слов для поиска:
Name = “Keywords” content = “слово 1, слово 2, слово 3…”
Краткое описание содержания Web- страницы:
Name = “Description” content = “Содержание страницы”
Описание типа и характеристик Web – страницы:
Name = “Content – Type” content = “ Описание страницы”
Указание приложения, в котором была создана Web – страница:
Name = “Generator” content = “Название HTML – редактора”
Атрибут Name используется приложением – клиентом для получения дополнительной информации о Web – страницах и их упорядочения. Его часто заменяют атрибутом http – equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.
Элемент META может содержать URL. Шаблон атрибута таков:
URL = “http: // адрес”
<BODY>body>
Этот элемент заключает в себе гипертекст, который определяет собственно Web – страницу. Конечный тег этого элемента надо искать в конце HTML-файла. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
Атрибут, определяющий фон страницы, является одним из самых важных для дизайна.
background = “Путь к файлу”
Более простое оформление фона сводится к заданию его цвета:
bgcolor = “#RRGGBB”
Цвета фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего. Оба приведенных выше атрибута не являются альтернативными и часто используются совместно: если по каким-либо причинам не может быть найден рисунок фона, используется цвет.
Поскольку фон станицы может изменятся, необходимо иметь возможность подбирать соответственный цвет текста. Для этого имеются следующей атрибут:
text = “#RRGGBB”
Для задания цвета текста гиперссылок используются следующие атрибуты:
link = “#RRGGBB”
Точно так же можно задать цвет для просмотренных гиперссылок:
vlink = “#RRGGBB”
Можно также
указать изменение цвета для
последней выбранный
Alink = “#RRGGBB”
В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле – не исключение. Текст, введений внутри этого элемента, игнорируется браузером. Эти элементы могут располагаться в любом месте WEB-страницы. Признаком комментария служит восклицательный знак, а текст комментария должен обрамляться двойным дефисом. [2]
1.4 История HTML
Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+ , и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0 которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2 , в большинстве своем используются по сей день.
В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения.
В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.
Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум ),компании-производители браузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение – фреймы, не были включены в спецификацию 3.2. Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.
И наоборот, элементы APPLET и SCRIPT,
необходимые для расширения HTML другими
программными кодами версии 3.2, не сыграли
той роли, которую были призваны сыграть.
Это объясняется тем, что броузеры различных
версий по-разному интерпретировали программы
на разных языках JAVA, JAVASCKRIPT,
Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году.
В это время уже было очевидно, что дальнейшее
развитие гипертекста будет осуществляться
за счет скрипт - программирования. Это
оказалось немногим более эффективным,
чем вводить в язык все новые элементы.
Появившиеся в то время браузеры (Netscape Navigator 4,
В результате, использование
всех возможностей Dynamic HTML
Раздел 2. Macromedia Flash
2.1 Технология Macromedia Flash
Основными проблемами в сфере разработки приложений под Web были как объём странички и совместимость интернет броузеров. Корпорация Macromedia стремилась к использованию в Web всех последних новинок в области отображения информации.
Macromedia Flash- очень мощное, при этом простое в использовании, средство создания анимированных проектов на основе векторной графики с встроенной поддержкой интерактивности. Flash является идеальным рабочим инструментом для художников и дизайнеров, позволяющим дополнять создаваемые ими Web – проекты анимацией и звуком.
После нескольких
принятых соглашений об
Одной из них
являлась отображение
Общеизвестно что векторная графика занимает меньше места чем раннее использовавшейся растровая графика. Большое значение было предано совместного использования векторной графики и анимации. Это намного расширило круг интересов пользователей и разработчиков. Также имелась возможность вставки звукового сопровождения в Web страничку, придавая вместе с анимацией большую привлекательность. Внутренний язык программирования Action Script позволял сопровождать какие либо действия или события, какими либо звуковыми или видео эффектами. Возможности Action Script сравнимы с возможностями JavaScript и VBScript.
Изначально Flash разработки были мало известны пока корпорация Macromedia не предложила переделать один из разделов сервера Walt Disney используя Flash.
Это дало большую рекламу Flash технологии. Многие дизайнерские студии начали покупать пакеты программных продуктов для разработки Web страничек при помощи Flash технологии.
- Обзор технологии Macromedia Flash.
Первоначально программа называлась Splash Animator и продавалась малоизвестной фирмой Future Animation для изготовления мультфильмов на PC - компьютере. Предназначалась для художников - аниматоров и пользовалась ограниченным успехом, пока в связи с бумом на WWW-приложения такой гигант, как фирма Macromedia, не обратила на нее внимание, купив и переименовав во Flash. Разработчики Flash поменяли интерфейс программы для облегчения и автоматизации разработки проекта. Причем мультимедийный гигант не только сменил название и интерфейс, но и переориентировал пакет на рынок Web-анимации (при этом был предложен и свой, внутренний формат файлов векторной графики «*.swf» , и реализована поддержка для других популярных графических форматов, в том числе и для анимированного GIF), и обеспечил пакету хорошую рекламу.
Однако изменения коснулись не только внешнего облика, но и содержания.
Во Flash понятие
интерактивности значительно
С момента появления в 1996 г. технология Flash стала фактическим стандартом для разработки насыщенных мультимедийных Web-сайтов. В качестве наиболее ярких примеров можно назвать серверы Citibank, Fox, PepsiCola, Paramount, Plymouth, Chrysler, Nestle и Warner Bros.
Для работы во Flash не обязательно иметь какой либо опыт в профессиональном программировании – этот позволяет создавать Web – узлы с элементами интерактивности без необходимости написания исходных кодов JavaScript, Java или HTML.
2.3 Принцип действия.
При разработке какого либо Web сайта в Интернете, его неотъемлемую часть составляет язык разметки HTML как единый стандарт разметки документа и передачи гипертекстовой информации.
Сама Flash технология никогда не претендовала на место HTML, но, на данный момент, с помощью Flash можно сформировать полноценную страницу-ролик Такой подход можно действительно расценивать, как некое вытеснение HTML. На многих страницах, использующих Macromedia Flash, присутствует ощущение, как будто HTML нет вовсе. В данном случае HTML-код сведен к минимуму за счет Flash. Смысл этого кода - правильное расположение Flash-клипа. Для варианта с одним большим Flash-роликом, представляющим собой законченную страницу, подойдет следующий вид:
Web-страница=HTML+Flash
В случаях, когда Flash использует Action Sript, эту формулу дополняет JavaScript.
Flash также имеет возможность передавать какие либо параметры при выполнении CGI. Также CGI может быть вызванным из Flash, выполнить какие-либо действия и выдать ответ в виде заранее подготовленного Flash-клипа. Сгенерировать Flash CGI-программой пока не представляется возможным. Если же того потребуется в связи с повсеместным использованием Flash, то Macromedia может разработать нечто наподобие библиотеки для генерации изображений CGI-программами. Пока самая разумная цель использования технологии Flash есть дополнение полноценного HTML-документа небольшими клипами. Многие популярные сайты, не желая отставать от моды, пошли по этому пути. Пользователь, заходя на такие страницы, либо любуется действиями Flash-ролика, либо видит на его месте просто фон и, не обращая внимания, продолжает знакомиться с содержанием HTML-страницы. Это значит, что Flash-клипы здесь используется скорее, как анимированные GIF и не несут в себе жизненно важного смысла для всего сайта. В таком случае можно применить новую формулу:
Web-страница=HTML+DHTML(
Она получилась очень похожей на самую первую формулу. Flash играет роль модного дополнения к дизайну Web-страницы. На данный момент многие технологии ориентированы на это, к примеру, - Metastream, которая позволяет демонстрировать векторную 3D графику на Web-страницах. Все они имеют существенный минус - необходимость наличия у пользователя специального модуля расширения (plug-in).
2.4. Возможности Flash.
Создав Flash, компания Macromedia объединила множество мощных идей и технологии в одной программе, позволив пользователям получать через Web целые мультимедийные презентации.
Использование векторной
Использование
векторной графики как
Векторная графика на сегодня - идеальное решение для разработки Web -сайтов, позволяющее с равной эффективностью воспроизводить изображения практически на всех типах компьютеров (Pc, Mac, NoteBook) и мониторов.
Обычно,
растровое изображение состоит
из тысяч или даже сотен
тысяч точек, информация о
По сути, вектор - это прямая, направленная от точки до точки, так как векторное изображение состоит их координат угловых точек, между которыми проходят прямые. Чтобы изобразить простую линию в растровом формате, потребуется указывать местоположение каждой точки этой линии, для изображения той же линии в векторе, необходимо лишь указать две точки и расстояние между ними, плюс - толщина линии и ее цвет. Естественно, что многие цифровые параметры неоднократно повторяются, именно они и позволяют легко сжимать векторные изображения в два, три раза. (Приложение 1б)
В отличие
от растровых форматов, таких
как GIF и JPEG, используемых в
сети повсеместно, векторные
Технология Symbol Conversation
Подход Flash к разработке также облегчает создание сложных мультимедийных презентаций, при этом размеры файлов остаются небольшими. Так как такие элементы, как векторы, растровые изображения и звук обычно используются в одном проекте несколько раз, Flash, благодаря своей внутренней функции Symbol Conversation позволяет создавать единственный экземпляр объекта, который можно повторно использовать вместо того, чтобы каждый раз пересоздавать новый. Такой подход существенно уменьшает размер файла проекта.
К дополнению была разработана библиотека - Library. Она представляет собой перечень всех используемых констант, в качестве которых могут выступать как нарисованные символы, так и импортированные графика и звуки. С помощью библиотеки можно обращаться к любому элементу независимо от того на каком слое или кадре он находится.
Цветовые палитры, а также градиентные заливки можно импортировать (и экспортировать) из других графических приложений (например, Macromedia Fireworks и Adobe Photoshop), что обеспечивает неизменность цветов на всем сайте. Палитра сохраняется в файле .fla и не влияет на размер экспортируемого файла .swf. По умолчанию Flash использует палитру web-safe.
Используя свойства технологии Symbol Conversation можно создавать текстовые поля позволяющие вводить данные во время воспроизведения Flash-проекта для создания всевозможных форм сбора сведений от пользователей: ввода паролей, регистрационных, опросных и др. Это, наиболее значительное нововведение и шаг к созданию полноценных Web-сайтов. Кроме того, поля применяются для динамической замены текста. Такое свойство может быть использовано для отображения постоянно обновляемой информации: биржевой, спортивной, прогнозов погоды. Когда пользователь создает текстовое поле, он назначает ему переменную. При этом возможно передавать переменные в разные сцены ролика, в server-side-приложения для занесения их в базы данных и даже загружать новые данные.
Передача данных в потоковом режиме
Главный решающий фактор, определяющий способность Flash создавать быстро загружающиеся приложения мультимедиа для Web – это передача содержимого в потоковом режиме. Несмотря на другие его достоинства, без этой особенности Flash вряд ли бы стал практичным для использования в Web.
Потоковая передача содержимого – это ещё один пример технологии, порожденный необходимостью. До её появления ограниченная скорость соединения не позволяла пользователям просматривать или прослушивать файлы, до тех пор пока всё их содержимое не было полностью загружено на компьютер. Однако разработчики осознали, что пользователям не нужно видеть или слышать каждый байт одновременно: можно получить точно такое же впечатление от содержимого проекта, получая его постепенно.
Потоковые возможности означают, что даже большие файлы со звуком, анимацией и растровыми могут начинать отображаться практически сразу.
Работа со звуком.
Озвучивание Web сайта фоновой музыкой пока еще мало распространено, но любители озвучивать Web-страницы иногда используют эту возможность, хотя это, в общем, не принято.
Доказано, что dhtml, html или любой другой стандарт не может быть тесно интегрирован со звуковыми файлами. Фоновый звук, который подключается через тег BGSOUND или EMBED, может иметь формат mid или wav. При использовании первого формата страница начинает бренчать и поскрипывать, но по размеру mid вполне подходит для сети Интернет. Ясно, что mid качеством отличается в обратную сторону. Звуки в формате wav имеют неплохое качество, но размер дает о себе знать, замедляя загрузку сайта, что конечно, зависит от продолжительности звукозаписи.
С появлением и распространением Flash любители озвучивать страницы стали помещать на страницу мало заметный Flash-клип, который повторяется «вечно» и проигрывает один и тот же звуковой фрагмент. При этом соотношение качество/размер остается на приемлемом уровне.
Контроль
над звуком происходит с