Использование flash – технологий при разработке сайта
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ
ФЕДЕРАЛЬНОЕ АГЕНСТВО ПО ОБРАЗОВАНИЮ
ГОУ СПО ТАМБОВСКИЙ БИЗНЕС - КОЛЛЕДЖ
ДИПЛОМНАЯ РАБОТА
Тема: ИСПОЛЬЗОВАНИЕ Flash – ТЕХНОЛОГИЙ ПРИ РАЗРАБОТКЕ САЙТА
Студента (ки) III курса 312 группы
Специальности 230103 «АСОИУ»
Павлова Д.Б.
Руководитель: Толмачёва Т.Н.
Тамбов 2006
Содержание
Введение 3
1 Обзор технологий для разработки Интернет приложений 5
1.1 Язык HTML 7
1.2 CGI – сценарии и язык PERL 8
1.3 Языки JavaScript и VBScript 9
1.4 Технология Macromedia Flash 11
2 Обзор технологии Macromedia Flash 13
2.1 Принцип действия 14
2.2 Возможности Flash 15
2.2.1 Использование векторной графики 15
2.2.2 Технология Symbol Conversation 16
2.2.3 Передача данных в потоковом режиме 17
2.2.4 Работа со звуком 18
2.3 Сценарии во Flash 19
2.4 Принципы Macromedia Flash 21
2.5 Применение Macromedia Flash в Web 23
3 Практическая реализация поставленной задачи 24 Заключение 39
Приложение 1А 40
Приложение 1Б 40
Список используемых источников 41
ВВЕДЕНИЕ
В последние годы мультимедиа стало образом жизни для многих пользователей компьютеров, сделав программы и игры более интересными и впечатляющими. В настоящее время использование мультимедиа строго обязательно для таких программ.
В 1994 году началась революция – World Wide Web. Всемирная паутина World Wide Web (WWW) соткана из Web-страниц, которые содержат в себе разную информацию в зависимости от тематики Web сайта.
Позже когда Web находился на заре своего развития, дизайну и разметке страниц уделялось совсем немного внимания.
Дизайнеры поняли, что точная технология размещения графики позволяющая точно повторить красоту печатной страницы стала популярной, хотя и ограниченной с точки зрения скорости и дизайна Web-страницы.
Среди большого множества средств и программных продуктов было очень сложно ориентироваться. Каждая компания разработчик пыталась ввести нечто новое в свои средства. Это очень сильно отражалось на пользователе, который порой даже не мог отобразить Web документ на своём компьютере. Постоянно существовала необходимость устанавливать всё новое программное обеспечение для просмотра и работы с Web документами, которые были созданы при помощи нового языка программирования для Web. Также они не могли справится с поставленными задачами и приходилось смешивать некоторые средства разработки для Web.
Одним из хороших решений оказалась Технология Macromedia Flash. Я выбрал её в качестве дипломной работы как одну из самых предприимчивых и надёжных средств.
Технология Macromedia Flash может справиться с заданиями любых размеров и сложности. Flash можно использовать для создания полноценного мультимедийного Web - сайта, насыщенного красивой графикой, с формами и интерактивностью, либо для создания баннера, навигационной панели или фоновой музыки для Web сайта.
После нескольких принятых соглашений об использовании Flash в качестве Web стандарта, он стал легко интегрироваться с HTML, что позволяет встроить Flash проект практически без швов. Flash не требует ничего дополнительного для перехода по ссылке, открытия окна броузера или выполнения чего-либо посредством HTML. Для достижения более сложной интерактивности Flash может взаимодействовать с JavaScript или VBScript.
Введение собственного интерпретатора сценариев “Action Script” расширило возможности Flash. Теперь помимо графической информации или живой анимации можно создавать свой собственный сценарий, который позволит пользователю управлять поведением проекта или получать какие либо динамические данные на запросы пользователя. Это избавляет разработчика создавать внешние модули для управления Web сайта.
Несмотря на то, что Flash разрабатывался для создания компактных быстро загружающихся мультимедиа продуктов, что делает его идеальной технологией для Web, его использование не ограничивается Интернетом. Любой разработанный во Flash продукт может быть выпущен как интерактивный фильм в Web, как видео ролик, пригодный для просмотра на компьютерах под управлением операционными системами Windows и MacOS, или даже как исполняемая программа, распространяемая на CD или дискетах.
Всё выше перечисленные факты можно отнести к актуальности данной темы.
При разработке Web – приложения я старался показать лишь некоторые возможности технологии Macromedia Flash. Раскрыть суть создания приложений по данной технологии, её плюсы и минусы.
Интернет – это будущее коммуникаций. На сегодняшний день Сеть позволяет получать видео изображение из любого уголка мира, отправлять письма с картинками, использовать Интернет телефонию и проводить международные телеконференции.
1 ОБЗОР ТЕХНОЛОГИЙ ДЛЯ РАЗРАБОТКИ ИНТЕРНЕТ ПРИЛОЖЕНИЙ
Около 20 лет назад Министерство Обороны США создало сеть - ARPAnet, которая назвалась Internet. ARPAnet была экспериментальной сетью, - она создавалась для поддержки научных исследований в военно-промышленной сфере, в частности, для исследования методов построения сетей, устойчивых к частичным повреждениям, получаемым, например, при бомбардировке авиацией и способных в таких условиях продолжать нормальное функционирование. Это требование дает ключ к пониманию принципов построения и структуры Internet. В модели ARPAnet всегда была связь между компьютером-источником и компьютером-приемником (станцией назначения).
На сегодняшний день исторические экспериментальные сети превратились в гигантскую мировую сеть. Она связывает практически все уголки земного шара, обеспечивая неограниченные возможности обмена информации между её пользователями.
Web – узлы представляют собой в большинстве случаев специализированные компьютеры, на которых хранится информация доступная пользователям.
Изначально информация хранящаяся в Интернет была в виде статического текста, который мог содержать в себе набор текстовой информации, и имелась возможность оформления и форматирования текста. Было принято применять единый язык оформления гипертекстовых документов HTML, который мог освоить даже стандартный пользователь. HTML стал стандартом и одновременно «корнем» для всех разрабатываемых Web страничек.
У большинства страниц был цветовой фон, немного графики по центру и текст – внешне не очень привлекательно, но тем не менее, эффективно. Потом в броузерах появились таблицы и фреймы, и создание Web-страницы превратилось в искусство. Внезапно сложные страницы стали стандартом, и ему соответственно не легко было следовать, так как методика была сложной, а броузеры оставались ограниченными в своих возможностях.
Производители интернет броузеров Netscape и Microsoft уделили особое внимание этим вопросам в своих 4.x – 5.х версиях, введя динамический HTML, или DHTML, который делает возможным точное размещение благодаря наличию слоёв, и ряд других хороших возможностей. Введённые при этом языки программирования JavaScript и VBScript позволяли использовать слои и точно размещать элементы на Web страничке. Но всё же главными проблемами были как доскональное изучение написания сценариев и совместимость Web броузеров.
Позже когда производители программных продуктов поняли, что разработка Web страничек с использованием слоёв и различного рода эффектов перестало интересовать стандартных пользователей, необходимо было разработать программы, которые могли «генерировать» Web странички для автоматизации труда разработчика, например такие как: Microsoft Front Page, Home Site. Но главной проблемой оставался объём информации для наполнения Web страничек: картинки, звуки и анимация.
Существовало множество идей по поводу различного рода технологий создания Web страничек, от ведущих корпораций производителей программных продуктов. Но выгоднее и эффективнее оказались разработки корпорации Macromedia. Они уже давно занимались внедрением проектов векторной графики в Интернет. Сама технология которую они «Macromedia Flash» составляла в себе совокупность средств разработки и отображения проектов.
Flash –разработки имеют мало ограничений в области дизайна. Графические элементы можно разместить точно в любом месте страницы, можно наложить элементы один на другой без применения необходимости написания сценариев. Во Flash можно создать диалоговые формы, которые будут получать информацию от пользователей и передавать её серверу. Также во Flash имеется такая возможность, как управлять прозрачностью, которая придаёт глубину и очарование работам.
Редактор для разработки Flash проектов позволяет расширить возможности разработчика так и в области дизайна так и программирования, так как Flash тоже имеет свой собственный язык программирования «Action Script», который позволяет придавать внутреннюю логику проекта, а также есть возможность как совместное
использование JavaScript и VBScript вместе с Flash проектом.
ЯЗЫК HTML
HTML (Hypertext Markup Language). Первая спецификация этого универсального и общедоступного языка разметки - HTML была утверждена в 1991 году. HTML стал стандартом и одновременно «корнем» для всех разрабатываемых Web страничек.
На сегодняшний день HTML остается самым универсальным, даже незаменимым средством разметки гипертекста, а, следовательно, и публикации в Интернет. Написание Web страничек на HTML не требует интерпретации исходного кода в двоичный код. Язык разметки гипертекста по определению должен интерпретироваться броузером. Это, безусловно, накладывает некоторые ограничения на возможности языка и на совместимость новых конструкций со старыми версиями броузеров. Однако, именно эта особенность языков разметки оставляет прекрасную возможность генерировать HTML-код другими программами (CGI-скриптами). Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей(CSS), иногда присутствуют Java-апплеты. По сути дела, можно вывести для современной Web-страницы:
Web-страница=HTML+DHTML(JavaScript/VBScript, CSS, Java-апплеты)+CGI
То есть на любой странице должна присутствовать HTML-верстка - расположение элементов дизайна текста и необходимые скрипты - как расширение HTML в области расположения и описания свойств различных объектов. CGI-скрипты могут играть первостепенную роль, формируя всю страницу, наполняя ее необходимыми, обновленными данными или второстепенную роль, - включаясь в нее.
1.2 CGI- СЦЕНАРИИ И ЯЗЫК PERL
Основу “Всемирной паутины” WWW составляют Web –узлы – компьютеры, на которых выполняется специальная программа – Web – сервер, ожидающая запроса со стороны клиента на выдачу документа. Документы сохраняются на Web –узле, как правило в формате HTML. Клиентом Web – сервера является программа – броузер, выполняющаяся на удалённом компьютере, которая осуществляет запрос к Web –-серверу, принимает запрошенный документ и отображает его на экране.
Аббревиатура CGI (Common Gateway Interface) обозначает часть Web – сервера , которая может взаимодействовать с другими программами, выполняющимися на этом Web – узле, и в этом смысле является шлюзом для передачи данных, полученных от клиента, программам обработки, таким как СУБД, электронные таблицы и так далее.
CGI включает общую среду, набор переменных и протоколы взаимодействия с этими программами.
Общая схема работы CGI состоит из следующих элементов.
· Получение Web- сервером информации от клиента – броузера. Для передачи данных Web – серверу в языке HTML имеется средство называемое формой, которая передает информацию введенную пользователем.
· Анализ и обработка полученной информации. Данные извлеченные из HTML формы, передаются для обработки CGI – программе. Они не всегда могут быть обработаны CGI – программой самостоятельно. В некоторых случаях запрос может состоять из обращения к некоторой базе данных, который CGI – программа читать не умеет. В этом случае CGI – программа на основании полученной информации формирует запрос к компетентной программе, выполняющейся на том же
Web – сервере.
· Создание нового HTML-документа и пересылка его броузеру. После обработки
полученной информации CGI-программа создаёт динамический HTML – документ,
или формирует ссылку на уже существующий документ и передаёт его броузеру.
CGI –программа может быть написана на любом языке программирования, имеющим средства обмена данными между программами.
В среде UNIX для этой цели наиболее часто используется язык Perl. а так как UNIX является наиболее популярной операционной системой для Web – серверов, то можно считать что Perl – наиболее популярный язык CGI программирования. Программа на языке Perl представляет собой последовательность операторов, которые
интерпретатор языка выполняет при каждом запуске без преобразования исходного текста программы в выполняемый двоичный код. По этой причине CGI – программы называют также CGI - сценариями или CGI – скриптами.
1.3 ЯЗЫКИ JavaScript и VBScript
JavaScript
В настоящее время трудно найти в Интернете HTML-страничку, не содержащую ни одного оператора а зыка JavaScript. Любой Web – мастер или создатель собственной страницы в Интернете заботится о том, чтобы как можно большее число потенциальных посетителей разработанного сайта или личной страницы увидели в окне своего броузера именно то, что задумывалось разработчиком страницы.
Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис Java – поэтому его называют
Java – подобным. Клиентские приложения выполняются броузером просмотра Web-
-документов на машине пользователя, серверные документы выполняются на сервере.
При разработке обоих типов приложений используется общий компонент языка называемый ядром и включающий определения стандартных объектов и конструкций:
переменные, функции, основные объекты и средство «LiveConnect» взаимодействия с Java-апплетами), и соответствующие компоненты дополнений языка, содержащие специфические для каждого типа приложений определения объектов.
Клиентские приложения непосредственно встраиваются в HTML-страницы и интерпретируются броузером по мере отображения частей документа в его окне.
Серверные приложения для увеличения производительности предварительно компилируются в промежуточный байт-код. После этого эти приложения запускаются на сервере по мере обращения к ним со стороны клиента.
Основные области применения JavaScript делятся на следующие категории:
· Динамическое создание документа с помощью сценария.
· Оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер.
· Создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа.
· Взаимодействие с пользователем при решении «локальных» задач, решаемых приложением JavaScript, встроенном в HTML-страницу.
VBScript…
Язык создания сценариев VBScript разработан фирмой Microsoft, является подмножеством достаточно распространенного в среде программистов языка Visual Basic разработки прикладных программ Windows-приложений. Как и его родитель, язык VBScript достаточно прост и лёгок в изучении.
Преимуществом его применения для создания сценариев является возможность использования, с небольшими корректировками, ранее написанных прицедур на языках Visual Basic и Visual Basic for Application.
Функциональные возможности сценариев, написанных на VBScript, ничем не отличаются от возможностей сценариев JavaScript: динамические создание документа или его частей, перехват и обработка событий и так далее.
VBScript используется для написания сценариев клиента (в этом случае броузер должен иметь встроенный интерпретатор этого языка), а также для написания сценариев на сервере (в этом случае сервер должен поддерживать язык VBScript).
Для создания сценариев клиента используется набор объектов, аналогичный набору JavaScript. Объекты клиента и сервера отличаются друг от друга, но существует общая часть (ядро) объектов, используемых при разработке как сценариев клиент, так и сценариев сервера.
1.4 ТЕХНОЛОГИЯ Macromedia Flash
Основными проблемами в сфере разработки приложений под Web были как объём странички и совместимость интернет броузеров. Корпорация Macromedia стремилась к использованию в Web всех последних новинок в области отображения информации.
Macromedia Flash- очень мощное, при этом простое в использовании, средство создания анимированных проектов на основе векторной графики с встроенной поддержкой интерактивности. Flash является идеальным рабочим инструментом для художников и дизайнеров, позволяющим дополнять создаваемые ими Web – проекты анимацией и звуком.
После нескольких принятых соглашений об использовании Flash в качестве Web стандарта, он стал легко интегрироваться с HTML, что позволяет встроить Flash проект практически без швов. Flash не требует ничего дополнительного для перехода по ссылке, открытия окна броузера или выполнения чего-либо посредством HTML.
Одной из них являлась отображение изображений при помощи векторной графики.
Общеизвестно что векторная графика занимает меньше места чем раннее использовавшейся растровая графика. Большое значение было предано совместного использования векторной графики и анимации. Это намного расширило круг интересов пользователей и разработчиков. Также имелась возможность вставки звукового сопровождения в Web страничку, придавая вместе с анимацией большую привлекательность. Внутренний язык программирования Action Script позволял сопровождать какие либо действия или события, какими либо звуковыми или видео эффектами. Возможности Action Script сравнимы с возможностями JavaScript и VBScript.
Изначально Flash разработки были мало известны пока корпорация Macromedia не предложила переделать один из разделов сервера Walt Disney используя Flash.
Это дало большую рекламу Flash технологии. Многие дизайнерские студии начали покупать пакеты программных продуктов для разработки Web страничек при помощи Flash технологии.
2 ОБЗОР ТЕХНОЛОГИИ Macromedia Flash
Первоначально программа называлась Splash Animator и продавалась малоизвестной фирмой Future Animation для изготовления мультфильмов на
PC - компьютере. Предназначалась для художников - аниматоров и пользовалась ограниченным успехом, пока в связи с бумом на WWW-приложения такой гигант, как фирма Macromedia, не обратила на нее внимание, купив и переименовав во Flash. Разработчики Flash поменяли интерфейс программы для облегчения и автоматизации разработки проекта. Причем мультимедийный гигант не только сменил название и интерфейс, но и переориентировал пакет на рынок Web-анимации (при этом был предложен и свой, внутренний формат файлов векторной графики «*.swf» , и реализована поддержка для других популярных графических форматов, в том числе и для анимированного GIF), и обеспечил пакету хорошую рекламу.
Однако изменения коснулись не только внешнего облика, но и содержания.
Во Flash понятие интерактивности значительно расширилось благодаря использованию сценариев Action Script (Действия), которые позволяют авторам разрабатывать достаточно сложные стили поведения - behaviors (перемещаемые элементы интерфейса, логику и начальную математику), впервые дающие возможность создавать электронные магазины. В результате программа получила широкое распространение в среде Web-разработчиков и продолжает служить хорошим подспорьем профессиональным аниматорам.
С момента появления в
Для работы во Flash не обязательно иметь какой либо опыт в профессиональном программировании – этот позволяет создавать Web – узлы с элементами интерактивности без необходимости написания исходных кодов JavaScript, Java или HTML.
2.1 ПРИНЦИП ДЕЙСТВИЯ
При разработке какого либо 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(JavaScript/VBScript, CSS)+Flash+CGI
Она получилась очень похожей на самую первую формулу. Flash играет роль модного дополнения к дизайну Web-страницы. На данный момент многие технологии ориентированы на это, к примеру, - Metastream, которая позволяет демонстрировать векторную 3D графику на Web-страницах. Все они имеют существенный минус - необходимость наличия у пользователя специального модуля расширения (plug-in).
2.2 ВОЗМОЖНОСТИ Flash
Создав Flash, компания Macromedia объединила множество мощных идей и технологии в одной программе, позволив пользователям получать через Web целые мультимедийные презентации.
Использование векторной графики.
Использование векторной графики как графического режима по умолчанию делает Flash незаменимым средством разработки для Web . Векторная графика – это объекты, определяемыми математическими уравнениями, или векторами, которые содержат информацию о размере, форме, цвете, границе и местоположении. Это эффектный способ обращения с графикой, в результате которого получаются файлы относительно небольших размеров даже при работе со сложными рисунками. Более того, векторная графика не зависит от разрешения, с которым просматривается объект
(Приложение 1а)
Векторная графика на сегодня - идеальное решение для разработки Web -сайтов, позволяющее с равной эффективностью воспроизводить изображения практически на всех типах компьютеров (Pc, Mac, NoteBook) и мониторов.
Обычно, растровое изображение состоит из тысяч или даже сотен тысяч точек, информация о цвете и расположении каждой содержится в файле, опираясь на эту информацию система создает изображение. Поэтому - качественные, многоцветные растровые изображения занимают очень много места.
По сути, вектор - это прямая, направленная от точки до точки, так как векторное изображение состоит из координат угловых точек, между которыми проходят прямые. Чтобы изобразить простую линию в растровом формате, потребуется указывать местоположение каждой точки этой линии, для изображения той же линии в векторе, необходимо лишь указать две точки и расстояние между ними, плюс - толщина линии и ее цвет. Естественно, что многие цифровые параметры неоднократно повторяются, именно они и позволяют легко сжимать векторные изображения в два, три раза. (Приложение 1б)
В отличие от растровых форматов, таких как GIF и JPEG, используемых в сети повсеместно, векторные изображения - графика, тексты, схемы и анимация легко экспортируются в необычайно компактные файлы формата SWF (Shock Wave Flash), которые быстро грузятся и способны потоково проигрываться непосредственно в Сети при помощи обычного броузера.
Технология 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-клип, который повторяется «вечно» и проигрывает один и тот же звуковой фрагмент. При этом соотношение качество/размер остается на приемлемом уровне.
Контроль над звуком происходит с точностью до единичного кадра, и его применение ограничено только воображением. Flash проигрывает звук несколькими способами. Он воспроизводится независимо от времени либо с синхронизацией анимации со звуковой дорожкой. Существует также возможность изменять уровень звука для каждого канала и применять эффект плавного увеличения и уменьшения громкости. Итак, Flash использует два типа звуков - связанный с событием (event sounds) и потоковый (stream sounds). Их главное различие в том, что первый должен полностью загрузиться, а второй начинает воспроизводиться по мере того, как будет получен достаточный объем данных, необходимый для синхронизации с первыми несколькими кадрами. На размер экспортируемого файла .swf значительно влияет степень компрессии, которая может составлять от 8 до 160 kBps и указывается в окне Publish Settings. Flash импортирует звуковые файлы в формате AIFF, WAV и MP3.
2.3 СЦЕНАРИИ ВО Flash
Мало что пленяет человека, как движение и взаимодействие. Именно это и делает Flash, предоставляя возможность создавать подконтрольные пользователю приложения, которые напрямую от творческого подхода автора к представлению интерактивности.
Возможность создавать кнопки, нажатие которых приводит к выдаче информации и воспроизведению звука или переносящее в другое место фильма проекта. Поэтому презентация в проекте может проходить в предопределённой последовательности или по пути указанному пользователем. Также возможно разработка проекта с какими либо расчетными действиями и обработки какой либо информации с помощью простого, но мощного языка сценариев “Action Script”.
Action Script можно рассматривать как основной язык программирования во Flash.
С его помощью можно запрограммировать проект Flash на выполнение различных задач. Подобно многим другим языкам программирования, термины Action Script определяют смысловую нагрузку, порядок их следования – логическую структуру, а знаки препинания – контекст.
Для разработки интерактивных элементов во Flash используют три основных компонента: событие (event), порождающее определённое действие, действие (action), порождаемое тем или иным образом событием, и целевой объект (target), выполняющий действие или изменяемый событием.
Логическая схема интерактивной функции при которой происходят действия в проекте, может быть представлена следующим образом:
· Событие – является инициатором какого либо действия в проекте. Во Flash события подразделяются на:
1 . События мыши/клавиатуры -эти события инициируются пользователем.
1. События кадров – если разрабатывается Flash ролик, то по достижении какого либо кадра возникает событие.
2. События переменных – событие происходит либо по истечении определённого интервала времени, либо значение переменной достигло того условия для которого запланировано событие.
· Целевой объект – это непосредственно объект над которым будет проведено действие вызванное событием. Целевые объекты подразделяются на четыре основных типа:
1. Текущий проект и его свойства.
2. Другой проект и его свойства (если проект находится в рамках основного проекта)
3. Графические элементы проекта (кнопка, рамка, фон и т.п.)
4. Внешние приложения (Интернет броузер или другие программы)
· Действие – действия которые выполняются над целевым объектом. Действия в Action Script состоят из самих действий, ссылок на целевой объект и параметров выполнения действий. Параметрами выполнения может быть, как и изменение свойств объекта, так и вычисление математического или логического выражения и присвоения результата его либо свойству объекта, либо какой либо переменной.
Для идентификации объектов или экземпляров проектов в сценариях Action Script им назначаются имена, что позволяет управлять отдельными объектами при помощи Action Script.
В последних версиях Flash было включено множество дополнительных возможностей для управления проектов при помощи Action Script. Теперь Flash стал не просто красивой фоновой заставкой для Web сайтов, а полнофункциональным средством для разработки сложных Web сайтов. Flash может вполне применятся и для простых “статических” страничек, так и для многоцелевых сайтов, например: продажа в Интернете, электронная почта и чат.
2.4 ПРИНЦИПЫ Macromedia Flash
В процессе создания Flash-проекта, особенно, когда уже есть сравнительный опыт,
разработки в других средствах рисования графики или редакторах Web дизайна, то можно отметить ряд преимуществ перед ними, которыми по некоторой мере Flash получил свою популярность:
1. Использование обозначений для элементов, которые появляются больше одного раза.
2. Объединение кадров в действиях перемещения (motion tweens), которые позволяет автоматически просчитать некоторые промежуточные моменты перемещения, для ускорения разработки проектов.
3. Объединение кадров в действиях трансформации (shape tweens), которые позволяет автоматически просчитать некоторые промежуточные моменты трансформации объектов, для ускорения разработки проектов.
4. Сокращение числа различных типов линий (пунктир, точки и т.п). Линии, нарисованные инструментом карандаш требуют меньше памяти, чем мазки кистью.
5. Использование слоёв, для разбиения перекрывающихся объектов клипа.
6. Сокращение числа различных шрифтов и стилей, путём преобразования их в объекты векторной графики.
7. Применение звукового формата mp3, как самого высококачественного и экономного музыкального формата.
8. Использование возможности анимации растровых изображений, или для статических элементов закраски объектов и фона.
9. Применение сценариев (Actions Script) вплоть до вставка их в отдельные кадры фильма.
10. Возможность сгруппировывать объекты на различных слоях.
11. Использование встроенных инструментов для изменения цветовых эффектов одного и того же объекта.
12. Использование единой палитры web-safe, во избежание расхождений с цветами броузеров.
13. Применение компонента управления проектом Library, который позволяет быстро найти любой объект и поменять его свойства.
14. Возможность вставки в текущий проект раннее созданный другой проект.
2.5 ПРИМЕНЕНИЕ Macromedia Flash в Web
Способы применения Flash, несмотря на некоторые небольшие минусы такие как требование от пользователя специального модуля расширения (plug-in), очень широки. Flash-проект способен сделать Web-страницу более привлекательной и стильной, а Flash баннер - затмить обычные анимированные GIF, тем более, что Flash-клипы (и любые действия в них) можно озвучивать. По этим причинам возникает неугасаемое желание каким-либо из способов применить технологию Macromedia Flash. Способы применения этой технологии выражаются в следующих объектах:
· Flash баннер
· Заставка в виде Flash-ролика
· Целая страница, представляющая собой Flash Movie
· Элемент дизайна в HTML-документе
· Фоновый звук к HTML-странице (в формате mp3)
Следует отметить, что Macromedia снабжает все свои продукты очень хорошо организованной и всеобъемлющей справочной системой и обучающими примерами в формате Flash, по которым можно освоить основные навыки работы с символами и текстом, организации flash-презентаций, синхронизации звука и создания кнопок.
Macromedia выпустила Flash-проигрыватели для всех основных операционных систем и типов броузеров, что обеспечило необходимую для Internet кросс-платформенность и популярность этой технологии. Согласно последним опросам в Cети, приблизительно 80% пользователей могут просматривать содержимое Web-сайтов на Flash без загрузки дополнительного программного обеспечения, и только 61% - Web-страницы с элементами Java. Скорее вынужденным шагом было свободное лицензирование Macromedia кода (Free Source licensing program) проигрывателя для Flash, которое ускорит использование формата swf в Web-приложениях нового поколения сторонними производителями программных продуктов.
3 ПРАКТИЧЕСКАЯ РЕАЛИЗАЦИЯ ПОСТАВЛЕННОЙ ЗАДАЧИ
Для описания поставленной задачи, я создал сайт с помощью языка HTML и двух фреймов. В левом фрейме отображается меню, где можно найти ссылки на интересующую нас информацию. Для того чтобы не делать слишком много одиночных ссылок, я решил сделать меню при помощи DHTML. Благодаря этому меню красиво выглядит, не занимает много пространства в окне и в нём легко вести поиск информации.
Рис.1 Меню сделанное на DHTML
Описание главного скрипта
<script type="text/javascript" language="JavaScript1.2">
<!—
Картинка на фон меню
stm_bm(["menu6d6f",430,"","../images/blank.gif",0,"","",0,0,250,0,1000,0,0,0,"","",0],this);
stm_bp("p0",[1,4,0,0,6,1,0,7,100,"",-2,"",-2,90,0,0,"#000000","#000000","../images/328.jpg",3,6,4,"#0099ff"]);
Код ссылок
stm_ai("p0i0",[0,"Введение","","",-1,-1,0,"../frame/main.php","main","","","","",0,0,0,"","",0,0,0,1,1,"#cc3300",1,"#6666ff",0,"","",3,3,1,1,"#003366 #0099cc #0099cc #003366","#33ccff #000000 #000000 #33ccff","#ffffff","#000000","bold 9pt Arial","bold 9pt Arial",0,0]);
stm_ai("p0i1",[6,1,"#000000","",-1,-1,0]);
Код во многих местах повторяется поэтому для экономии места строку типа «stm_aix("p0i13","p0i1",[])» писать мы не будем
stm_aix("p0i2","p0i1",[]);
stm_aix("p0i6","p0i0",[0,"Язык гипертекстовой <BR>разметки HTML","","",-1,-1,0,"../frame/1.php"]);
stm_aix("p0i7","p0i1",[]);
stm_aix("p0i13","p0i0",[0,"Язык XML - практическое <BR>введение","","",-1,-1,0,"../frame/2.php","main","","","","",0,0,0,"../images/arrow_r.gif","../images/arrow_r.gif",7,7,0,1,2]);
stm_bp("p1",[1,2,2,0,1,1,0,0,100,"progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,enabled=0,Duration=0.38)",-2,"progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=radial,enabled=0,Duration=0.38)",-2,72,0,0,"#000000","#ffffff","../images/328.jpg",0,1,1,"#000000"]);
stm_aix("p1i0","p0i0",[0,"Введение","","",-1,-1,0,"../frame/part1.php","main","","","","",0,0,0,"","",0,0,0,0,1,"#ffffff",1,"#275df4"]);
stm_aix("p1i1","p0i0",[0,"Просмотр XML документов","","",-1,-1,0,"../frame/part2.php","main","","","","",0,0,0,"","",0,0,0,0,1,"#ffffff",1,"#275df4",0,"","",3,3,0,0,"#003366"]);
stm_aix("p1i2","p1i1",[0,"Стилевые таблицы XSL","","",-1,-1,0,"../frame/part3.php"]);
stm_aix("p1i3","p1i1",[0,"DTD - определения","","",-1,-1,0,"../frame/part4.php"]);
stm_aix("p1i4","p1i1",[0,"Схемы данных","","",-1,-1,0,"../frame/part5.php"]);
stm_aix("p1i5","p1i1",[0,"Описание технологии","","",-1,-1,0,"../frame/part21.php"]);
stm_aix("p1i6","p1i1",[0,"XML в Microsoft Internet<BR> Explorer 5.0","","",-1,-1,0,"../frame/part22.php"]);
stm_aix("p1i7","p1i1",[0,"Использование Java<BR> XML - обработчиков ","","",-1,-1,0,"../frame/part23.php"]);
stm_aix("p1i8","p1i1",[0,"DOM совместимые анализаторы","","",-1,-1,0,"../frame/part24.php"]);
stm_ep();
stm_aix("p0i13","p0i1",[]);
stm_aix("p0i18","p0i0",[0,"Flash технология","","",-1,-1,0,"../frame/3.php","main","","","","",0,0,0,"../images/arrow_r.gif","../images/arrow_r.gif",7,7]);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i1",[0,"Часть 1","","",-1,-1,0,"../frame/3.php"]);
stm_aix("p2i1","p1i1",[0,"Часть 2","","",-1,-1,0,"../frame/6.php"]);
stm_aix("p2i2","p1i1",[0,"Часть 3","","",-1,-1,0,"../frame/7.php"]);
stm_aix("p2i3","p1i1",[0,"Часть 4","","",-1,-1,0,"../frame/8.php"]);
stm_ep();
stm_aix("p0i19","p0i1",[]);
stm_aix("p0i24","p0i0",[0,"Приложение 1","","",-1,-1,0,"../frame/app1.php"]);
stm_aix("p0i25","p0i0",[0,"Приложение 2","","",-1,-1,0,"../frame/app2.php"]);
stm_aix("p0i26","p0i0",[0,"Приложение 3","","",-1,-1,0,"../frame/app3.php"]);
stm_aix("p0i27","p0i0",[0,"Приложение 4","","",-1,-1,0,"../frame/app4.php"]);
stm_aix("p0i28","p0i1",[]);
stm_aix("p0i38","p0i0",[0,"Список ресурсов","","",-1,-1,0,"../frame/links.php","main","","","","",0,0,0,"","",0,0,0,1,1,"#cc3300",1,"#6666ff",0,"","",3,3,0,0]);
stm_ep();
stm_em();
//-->
</script>
Для описания больших документов были использованы так называемые якоря, позволяющие в документе использовать ссылки для быстрого перехода по заголовкам документа.
Рис.2 Пример использования якорей
Пример описания якорей в коде
<ul>
<li> <a href=#1>Тeговая модель документа</a>
<li> <a href=#2>Структура документа</a>
<li> <a href=#3>Элементы заголовка</a>
<li> <a href=#4>Основные классы элементов тела</a>
<li> <a href=#5>Элементы стиля</a>
<li> <a href=#6>Информационные элементы</a>
<li> <a href=#7>Управление отображением стиля символов текста</a>
<li> <a href=#8>Отображение ненумерованного списка</a>
<li> <a href=#9>Вложенные ненумерованные списки</a>
<li> <a href=#10>Вложенные нумерованные списки</a>
<li> <a href=#11>Пример списка определений</a>
<li> <a href=#12>Гипертекстовые контекстные ссылки</a>
<li> <a href=#13>Элемент img</a>
<li> <a href=#14>Таблицы</a>
<li> <a href=#15>Формы</a>
<li> <a href=#16>Элемент TEXTAREA</a>
</ul>
В основном сайт построен с помощью обычных страниц, где находится лишь текст и картинки и чтобы не описывать их все я покажу пример одной страницы.
Рис.3 Пример документа
Код документа
<HTML><HEAD>
<TITLE>Flash для чайников</TITLE>
<link rel="stylesheet" href="easy.css">
<script type="text/javascript" language="JavaScript1.2" src="../stm31.js"></script>
</head>
<BODY BGCOLOR=#BFBFBF BACKGROUND="back1.gif" >
<center><h4>Часть третья</h4>
<h3>Пора подвигать мышкой</h3>
</center>
<DIV CLASS="sa">
Текст для уменьшения объёма вырезан
Все ! Хватит делать лишние телодвижения ! Давайте наконец сделаем хоть что-то……
<hr>
<tr><td>
<center>
<script type="text/javascript" language="JavaScript1.2">
<!—
Описание ссылок, сделанных в DHTML
stm_bm(["menu0014",430,"","../images/blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0],this);
stm_bp("p0",[0,4,0,0,2,2,0,0,100,"",-2,"",-2,90,0,0,"#000000","#000000","",3,1,3,"#cccccc"]);
stm_ai("p0i0",[0,"Дальше","","",-1,-1,0,"../frame/8.php","_self","","","","",0,0,0,"","",0,0,0,0,1,"#000000",0,"#cccccc",0,"","",3,3,4,2,"#999999","#666666","#ffffff","#000000","bold 8pt Arial","bold 8pt Arial",0,0]);
stm_aix("p0i1","p0i0",[0," Назад ","","",-1,-1,0,"../frame/6.php"]);
stm_ep();
stm_em();
//-->
</script>
</tr></td></center>
<hr>
<p>
</DIV>
</BODY> </HTML>
Пример XSL - документа
<xsl>
Корневое правило
<rule>
<root/>
<HTML><HEAD>
Область сценария
<SCRIPT LANGUAGE="JSCRIPT"><![CDATA[
var ie4=((navigator.appName=="Microsoft Internet Explorer")&&(parseInt(navigator.appVersion) >= 4 ));
function msover(){
if (ie4){
event.srcElement.style.color="red";
event.srcElement.style.cursor = "hand";
}
}
function msout(){
if (ie4){
event.srcElement.style.color="black";
event.srcElement.style.cursor = "auto";
}
} ]]></SCRIPT>
</HEAD>
<BODY bgcolor="white">
<center>
<table width="80%" border="1">
<children/>
</table></center>
</BODY>
</HTML>
</rule>
Использование элемента select-elements
<rule>
<target-element type="journal"/>
<select-elements> <target-element type="title"/> </select-elements>,
<select-elements> <target-element type="contacts"/> </select-elements>,
<select-elements> <target-element type="issues-list"/> </select-elements>,
<select-elements> <target-element type="authors-list"/> </select-elements>.
</rule>
<!-- Formatting title element -->
<rule>
<element type="journal">
<target-element type="title"/>
Элемент title должен определяться внутри элемента journal
</element>
<tr><td align="center"><center>
<table width="80%" border="1"><tr><td width="100%">
<b><font color="blue">
<children/>
</font></b></td></tr>
</table></center>
</td></tr>
</rule>
<!-- Issues list -->
<rule>
<element type="journal">
<target-element type="issues-list"/>
</element>
<tr><td align="center">
<children/>
</td></tr>
</rule>
<rule>
<element type="issues-list">
<target-element type="issue"/>
</element>
<tr><td><center>
<table width="100%" border="0">
<tr><td colspan="2" bgcolor="gray">
<font color="white">Issues list</font></td></tr>
<children/>
<tr><td> </td></tr></table></center></td></tr>
</rule>
<rule>
<target-element type="issue"/>
<tr><td>
<table width="100%" border="0">
<tr><td colspan="2">Issue number
<b><eval>childNumber(this);</eval></b></td></tr>
<children/>
<tr><td> </td></tr></table></td></tr>
</rule>
<rule>
<element type="issue">
<target-element type="title"/>
<target-element type="date"/>
<target-element type="about"/>
<target-element type="home-url"/>
</element>
<tr>
<td width="40%"><font color="blue"><eval>tagName</eval></font></td>
<td width="60%" align="right"><div align="right"><b><font color="red">
<children/></font></b>
</div></td></tr>
</rule>
<rule>
<element type="issue">
<target-element type="articles"/>
</element>
<tr><td colspan="2" align="right" bgcolor="silver">
<center>Articles list</center></td></tr>
<children/>
</rule>
<rule>
<element type="articles">
<target-element type="article"/>
</element>
<tr><td colspan="2" align="right">Article number
<b><eval>childNumber(this);</eval></b></td></tr>
<children/>
</rule>
<rule>
<element type="article">
<target-element type="title"/>
<target-element type="url"/>
<target-element type="author"/>
</element>
<tr>
<td width="40%"><font color="maroon"><eval>tagName</eval></font></td>
<td width="60%" align="right"><div align="right"><b><font color="red">
<children/></font></b>
</div></td></tr>
</rule>
<rule>
<target-element type="article" position="last-of-type"/>
<children/>
<tr><td colspan="2" bgcolor="silver" width="100%"> </td></tr>
</rule>
<rule>
<element type="hotkeys">
<target-element type="hotkey"/>
</element>
<tr>
<td width="40%"><font color="maroon"><eval>tagName</eval></font></td>
<td width="60%" align="right"><div align="right"><b><font color="red">
<children/></font></b>
</div></td></tr>
</rule>
<!-- Contacts -->
<rule>
<element type="journal">
<target-element type="contacts"/>
<select-elements> <target-element type="address"/> </select-elements>,
<select-elements> <target-element type="tel"/> </select-elements>,
<select-elements> <target-element type="email"/> </select-elements>,
<select-elements> <target-element type="url"/> </select-elements>.
</element>
<tr><td><center><table width="100%" border="1">
<tr><td colspan="2" bgcolor="gray"><font color="white">Contact us:</font></td></tr>
<children/>
<tr><td> </td></tr></table></center></td></tr>
</rule>
<rule>
<element type="contacts">
<target-element type="address"/>
<target-element type="tel"/>
<target-element type="email"/>
<target-element type="url"/>
</element>
<tr>
<td width="40%"><font color="blue"><eval>tagName</eval></font></td>
<td width="60%" align="right"><div align="right"><b><font color="red">
<children/></font></b>
</div></td></tr>
</rule>
<!-- Authors -->
<rule>
<element type="journal">
<target-element type="authors-list"/>
</element>
<tr><td bgcolor="gray"><font color="white">Authors list</font></td></tr>
<tr><td>
<children/>
</td></tr>
</rule>
<rule>
<element type="authors-list">
<target-element type="author"/>
<select-elements> <target-element type="firstname"/> </select-elements>,
<select-elements> <target-element type="lastname"/> </select-elements>,
<select-elements> <target-element type="email"/> </select-elements>.
</element>
<table width="100%" border="1">
<tr><td colspan="2">Author index <b><eval>getAttribute("ID");</eval></b></td></tr>
<children/>
<tr><td> </td></tr></table>
</rule>
<rule>
<element type="author">
<attribute name="ID" has-value="yes"/>
<target-element type="firstname"/>
<target-element type="lastname"/>
<target-element type="email"/>
</element>
<tr>
<td width="40%"><font color="blue"><eval>tagName</eval></font></td>
<td width="60%" align="right"><b><font color="black">
Подсветка элементов
<DIV id='=tagName + formatNumber(childNumber(this),"1")' background-color="marron"
onmouseover='="msover("+ tagName + formatNumber(childNumber(this),1)+")"'
onmouseout='="msout("+ tagName + formatNumber(childNumber(this),1)+")"'>
<children/>
</DIV>
</font></b>
</td></tr>
</rule>
Определение стиля. Изменение стиля коснется всех элементов title и url,
вне зависимости от их месторасположения
<style-rule>
<target-element type="title"/>
<target-element type="url"/>
<apply font-style="italic" color="maroon"/>
</style-rule>
</xsl>
ЗАКЛЮЧЕНИЕ
В результате выполнения данной дипломной работы удалось описать возможности flash – технологии и обосновать её хорошие качества, а именно поддержка многих языков программирования, куда можно лёгко вставить flash код. Для работы во Flash не обязательно иметь какой либо опыт в профессиональном программировании – этот позволяет создавать Web – узлы с элементами интерактивности без необходимости написания исходных кодов JavaScript, Java или HTML.
Также мы узнали, что Flash можно использовать для создания полноценного мультимедийного Web - сайта, насыщенного красивой графикой, с формами и интерактивностью, либо для создания баннера, навигационной панели или фоновой музыки для Web сайта. Таким образом, я добился своей цели. Создал сайт, помогающий начинающим web – дизайнерам понять, как сделать простую Flash – анимацию и сайт в целом. Мы доказали что Macromedia Flash- очень мощное и при этом простое в использовании, средство создания анимированных проектов на основе векторной графики с встроенной поддержкой интерактивности. Использование векторной графики как графического режима по умолчанию делает Flash незаменимым средством разработки для Web. Используя свойства технологии Symbol Conversation можно создавать текстовые поля позволяющие вводить данные во время воспроизведения Flash-проекта для создания всевозможных форм сбора сведений от пользователей: ввода паролей, регистрационных, опросных и др. Это, наиболее значительное нововведение и шаг к созданию полноценных Web-сайтов.
Приложение 1
Отличие рисунков векторной и растровой графики при многократном увеличении.
Способы построения изображений в векторной и растровой графике.
Список используемых источников
1. Web-сайт своими руками - И. Шапошников .: БХВ – Санкт-Петербург, 2000.
2. Flash 4. Анимация в Интернете – Дерек Франклин, Брукс Паттон.: СПБ: Символ Плюс – Санкт- Петербург, 2000.
3. HTML 4.0 – Сергеев А.О.: БХВ - Санкт- Петербург, 1999.
4. Borland Delphi 4. Руководство Разработчика – Стив Пачеко.: Издательский дом «Вильямс» - Москва, 2000.
5. Эффективная работа в 3D Studio MAX 2 – Майкл Петерсон.: Питер Ком – Санкт-Петербург, 1999.
"Http://www.w3graphics.com" Http://www.w3graphics.com