Составление анимации в web-сайте с применением Macromedia Flash-технологии

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ КЫРГЫЗСКОЙ РЕСПУБЛИКИ

КЫРГЫЗСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ

им. И. АРАБАЕВА

ИНСТИТУТ НОВЫХ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

КАФЕДРА ИНФОРМАТИКИ И ТЕХНОЛОГИЯ ЕЕ ОБУЧЕНИЯ

ДИПЛОМНАЯ РАБОТА

Составление анимации в web-сайте с применением

Macromedia Flash-технологии

Бишкек - 2010 г

Оглавление

Введение

ГЛАВА I. Теоретические основы создания сайта с использованием Macromedia Flash. Введение Macromedia Flash

1.1 Что такое Flash

1.2 Анимация

1.3 Сфера применения анимацию Flash

1.4 Редакторы WEB-документов

1.5 Редактор HotMetal PRO

1.6 Редактор HotDog Professional 3

1.7 Редактор Dreamweaver

ГАВА II. Практическое решение создания сайта с использованием

Macromedia Flash.

2.1 Практическое решение примеров в программе Macromedia

Flash

2.2 Цель и место размещения Web документа

2.3 Сценарий и структура Web документа

2.4 Структура текста Web документа

2.5 Гипертекстовые ссылки

2.6 Приложение

Заключение

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

ВВЕДЕНИЕ

В последние годы мультимедиа стало образом жизни для многих пользователей, программы и игры сделаны более интересными и впечатляющими. В настоящее время использование мультимедиа строго обязательно для таких программ как Adobe Photo Shop, Adobe Illustrator Coral Draw, Adobe Flash и др. Революция в области мультимедиа началась с появлением в 1989 г. накопителя на компакт диске. Который мог помещать в себе сложные и большие мультимедиа приложения.

Каждый из нас уже сейчас может сделать свой вклад в развитие в область мультимедиа. Для этого достаточно создать свой web-сайт и разместить его в Internet. Но как это сделать? Ответ на данный вопрос я попробую дать в этой дипломной работе.

Дипломная работа состоит из двух глав. В первой главе рассматривается программа Macromedia Flash, сфера применения анимацию Flash и редакторы WEB-документов.

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

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

Новизна-дипломной работы. При создании Web-сайта использовался современный пакет Adobe Design Premium CS3, использование которого всегда являлось помощником начинающих и профессиональных разработчиков.

Дипломная работа разрабатывалось в текстовом редакторе Adobe Dreamweaver CS3 с использованием элементов языка разметки гипертекста HTML.В качестве примера изучалась задача о создании обучающей программы и созданию анимации в программе Macromedia flash Professional.

Одним из хороших решений оказалась программа Macromedia Flash.

macromedia flash корпоративный сайт

ГЛАВА I. Теоретические основы создания сайта с использованием Macromedia Flash. Введение Macromedia Flash

1.1 Что такое Flash?

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

Flash относится к программам создания двухмерной векторной анимации.

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

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

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

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

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

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

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

Второй способ анимации осуществляется с помощью промежуточных отображений (tweening animation). В этом случае задаются ключевые кадры (keyframes), а промежуточные Flash просчитывает автоматически. Понадобится задать только 2 кадра: начальный и конечный. По умолчанию Flash рассчитает промежуточные кадры по линейному закону, но можно задать возрастающую или затухающую экспоненту. Это нужно, чтобы отразить какие-нибудь процессы, происходящие в реальном мире. Например, движения мяча.

Кадры, слои, символы, временная шкала

Базовыми понятиями являются кадры (frames), символы (symbols), слои (layers) и временная шкала (timeline).

Временная шкала

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

Ее основные возможности:

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

Слои

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

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

Кадры

Анимация состоит из последовательности кадров. Кадр может быть как составленным вручную, так и сгенерированным Flash. Это относится к кадрам одного слоя. Так как сцены Flash состоят обычно из нескольких слоев, то итоговые "многослойные" кадры, могут содержать, как сгенерированные, так и "самодельные" слои.

В компьютерной анимации существует понятие - ключевые кадры (keyframes). Это кадры, которые Flash не вправе изменять в процессе создания анимации. Задаются ключевые кадры, а промежуточные между ними выстраивает Flash.

Элементарные операции с кадрами:

Вставить пустой ключевой кадр - Insert->Blank keyframe, F7 Ключевой кадр, повторяющий содержание предыдущего - Insert->Keyframe, F6Очистить ключевой кадр - Insert->Clear keyframe, Shift-F6 Вставить обычный кадр - Insert->Frame, F5 Удалить кадр - Insert->Remove Frames, Shift-F5

Символы

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

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

Существует три вида символов: анимация (movie clip), кнопка (button) и изображение (graphic):

- Изображение (graphic), представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).

- Кнопка (button). Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:

· Up - обычное состояние кнопки. Over - когда курсор мышки находится над кнопкой. Down - когда курсор находится над кнопкой и нажата клавиша мыши. Hit - обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал.

- Анимация (movie clip). Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (это встроенный язык Flash).Символы могут быть вложенными вне зависимости от типа. Это является самым главным их достоинством. Например, можно сделать кнопку, которая начнет двигаться, когда над ней будет "пролетать" курсор мыши, просто поместив в кадр Over символ - анимацию. Или (парадокс!) на изображение поместить бегущую кошку.

Символы можно создавать как "с нуля" (Insert->New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert->Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первое, т.к. в этом случае отпадает надобность его позиционировать и изменять под нужный размер.

Для управления символами используется так называемая библиотека (Library). Окно библиотеки находится по адресу Window->Library (или Ctrl-L).

1.2 Анимация

Покадровая анимация

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

Достоинства:

Покадровая анимация дает, в некотором смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться.

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

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

Недостатки:

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

Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.

Анимация с построением промежуточных кадров (tweened motion)

При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что сначала рисуется объект, потом на другом кадре производите изменения, Flash рассчитает те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и вы получаете плавную анимацию.

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

Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 12 кадров/сек., и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки - в другой за 3 секунды, то на это движение вам нужно отвести 36 кадров.

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

Shape tweening

Например, нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетек в силуэт волка. В этих случаях используется shape tweening.

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

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

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

В этой маленькой анимации круг переходит в некое подобие полумесяца. Немного о параметрах shape tweening. Появилась пара других параметров, если выбрать shape tweening в панели Frame - Easing и Blend. Поле Label содержит метку кадра. Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если задавать отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться и наоборот, если easing будет положительным, анимация будет замедляться.

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

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

На первом ключевом кадре (с которого начинается анимация) добавляется контрольная точка (Modify->Shape->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Надо прикрепить ее к той части изображения, которая двигается не так, как надо. Затем перейти на второй ключевой кадр, и прикрепить эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так можно отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие.

Удалить все точки можно с помощью Modify->Shape->Remove All Frame. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Frame.

И, наконец, наиболее часто используемая техника анимации во Flash - Motion Tweening. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ.

Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.

Вот какие параметры символа могут модифицироваться при использовании Motion Tweening:

размер (как пропорционально, так и непропорционально - отдельно высоту и ширину)

наклон

расположение

угол поворота

цветовые эффекты

можно использовать направляющие слои для задания траектории движения объекта

Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween.Универсальный способ включения/выключения motion tweening - с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:

Easing - обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.

Rotate позволяет управлять вращением. Auto - Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise - против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.

Orient to path - поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей. (см. ниже)

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

Направляющие слои(guide layers). Это слои, которые содержат кривую, по которой должен двигаться объект. Например, нужно анимировать самолетик, который выписывает виражи по небу. На создание этого движения может уйти много времени. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней.

Итак, если использовать траекторию, то вам нужен дополнительный слой для нее. Кстати, с одной траекторией можно использовать несколько символов.

Для того чтобы добавить направляющий слой, нужно выбрать слой, на котором находится нужный символ, и, нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим. (см. рис. 10 - Направляющий слой)

Далее, нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки.

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

Теперь, чтобы использовать этот слой, нужно взять нужный символ за центральную точку (маленький кружок) и перетащить ее на траекторию. Символ "зацепится" за нее, и будет видно, как он будет по ней скользить. Далее все по знакомому сценарию - ключевые кадры, включаем motion tweening… Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней то на панели Frame нужно включить флажок Orient to path.

Сложности:

1) Самое простое: чем больше у вас анимирующихся объектов в сцене, тем сложнее Flash обрабатывать их, и тем медленней будет воспроизведение.

2) Выгодней использовать один символ, содержащий мелкие объекты, чем много символов, отдельно для каждого объекта.

Основные достоинства Flash

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

Мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать "интеллект" для конкретной анимации. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash CS3 (несмотря на название "ActionScript") - это полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать.

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

Клипы, созданные во Flash, можно транслировать как по ТВ, так и через сеть

Недостатки:

1.Изображения, исполненные в технике векторной графики, всегда имеют стилизованный, «мультяшный» характер, ощущается их «нарисованность», хотя при известном навыке и использовании некоторых хитростей, например градиентных заливок, можно добиться потрясающих результатов.

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

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

1.3 Сфера применения анимации Flash

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

В последнее время технологии Flash нашли свое применение не только в сети, но на телевидении.

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

1.4 Редакторы Web документов

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

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

В этом дипломной работы мы рассмотрим основные редакторы Web-документов.

1.5 HoTMetal PRO 3.0

Редактор гипертекста HoTMetaL был одним из первых программных продуктов подобного рода. Основная цель редактора заключалась в том, чтобы красиво прорисовывать на экране изображение тегов. Здесь сказались преимущества графического интерфейса Windows перед интерфейсом командной строки MS-DOS. В среде Windows гипертекст в своем естественном виде лучше читается и редактируется. Одновременно фирмы-разработчики развивали в своих программах возможность анализа синтаксиса HTML, что помогало пользователю избежать некоторых ошибок, таких, например, как неправильное вложение документов.

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

Кратко рассмотрим создание гипертекстового документа путем сравнения.

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

Гипертекстовый документ создается совершенно по иному принципу. Здесь тоже можно использовать понятие стиля: это совместное использование элементов форматирования FONT, B, I, BQ и им подобным. Существенное же отличие от обычного Word-документа состоит как раз в том, что пользователь может увидеть все параметры оформления и область их действия прямо в HTML-документе. Изменить их может только он сам, путем редактирования текста документа. Дает ли это какое-нибудь преимущество? Думаю, что в некоторых случаях работать с файлом в формате гипертекста намного удобнее и легче, чем с таким же файлом в формате традиционного редактора для Windows.

Отдельно следует упомянуть использование кириллицы в HoTMetaL. Если пользователь выбирает для ввода не английский язык, то редактор автоматически преобразует введенные буквы в спецсимволы. Разумеется, разработчики редактора не предусматривали возможность использования кириллицы. Просто русские буквы занимают в кодовой таблице место «экзотических» букв из разных языков. В языке может использоваться латинский алфавит и некоторые его «расширения». При вводе русского текста символы прорисовываются обычным образом, но исходный код записывается по особому: буква А обозначается как À буква Б - как Á и т. д. Для броузеров с установленными русскими шрифтами это не имеет значения: кириллица в любом случае будет воспроизведена верно.

1.6 HotDog Professional 3

Редактор гипертекста HotDog Professional 3 создан фирмой Sausage Software. От других его выгодно отличает обилие инструментов, подпрограмм и сервисных возможностей. Такой инструмент можно рекомендовать тем пользователям, которые много и серьезно работают со своими Web-страницами. Версия 3 редактора разработана в 1996 году и предназначена для работы в среде Windows 95.

Окно редактора разделены на две области. Слева расположена панель так называемого «менеджера ресурсов» (resource manager). Он выполняет в редакторе те же функции, что и Проводник в Windows 95, то есть организует наглядный доступ к папкам и файлам. Вкладка Pages позволяет увидеть документы, открытые в редакторе. Вкладка Files обеспечивает просмотр папок на дискете. Пользователь может применять технологию Drag and Drop, то есть перетаскивать файлы при помощи мыши. Вкладка Faves служит для просмотра избранных источников информации. Вкладка WWW обеспечивает просмотр сайтов сайт (site) - набор Web-страниц, принадлежащих одному владельцу. и наглядное представление их структуры. Если менеджер ресурсов занимает слишком много места на экране, его можно отключить при помощи меню View.

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

Основное окно редактора содержит несколько вкладок. Каждая из них позволяет выполнять определенный тип операций редактирования. Смена вкладки означает только смену набора инструментов; окно документа при этом остается неизменным. Многие кнопки присутствуют на нескольких вкладках.

Кнопки форматирования напоминают используемые в текстовых редакторах. И те и другие имеют похожие значки и выполняют одни и те же по смыслу операции. Но в данном случае механизм форматирования другой. Он заключается в создании соответствующего элемента HTML и помещении выделенного фрагмента страницы внутри этого элемента. Форматировать можно не только текст, но и рисунки, гиперссылки и другие конструкции гипертекста.

1.7 Adobe Dreamweaver

Adobe Dreamweaver - идеальная программа для веб-дизайнеров, html-кодеров и разработчиков веб-приложений. Новые функции программы дают возможности удобной навигации между кодом и дизайном страницы.

Инструменты в Adobe Dreamweaver расположены так, что бы разработчику было удобно. Это ускоряет процесс от начала создания страницы и до её публикации или подтверждения заказчиком. Кроме того, новая версия программы поможет командам и разработчикам-одиночкам выйти на новый уровень в разработке и функциональности.

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

Редакторы для верстки веб-страниц бываю двух типов: визуальные и текстовые.
Визуальные редакторы не требуют от вас знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь. Однако, следует заметить, что ни один визуальный редактор не совершенен и все они так или иначе ограничены в своих возможностях, поэтому от профессиональных кодеров требуется умение писать код руками, именно поэтому профессиональным кодерам нужны текстовые редакторы. В этих редакторах вы пишите код своими руками. В текстовых редакторах, как правило, бывают разные функции облегчающие кодеру написание кода, такие, как подсветка кода (так легче видеть, где в коде вставлены стили, или скрипты, а где просто текст), различные горячие кнопки и клавиши, которые вставляют уже готовые конструкции (куски кода, спецсимволы) в код, и т.д. Какого же типа вам следует заводить редактор? Если вы изучаете html, css или другие технологии для разметки страниц, если вы хотите уметь создавать качественные страницы и быть профессиональным кодером, то безусловно вам нужен текстовой редактор. Если же у вас нет времени на изучение html, css и прочих технологий, если перед вами не стоит очень сложных задач в выполнении страницы, то смело заводите себе визуальный редактор и пользуйтесь им, он очень экономит время и силы. А лучше всего иметь у себя на компьютере и визуальный, и текстовой редакторы для разных нужд.

ГЛАВА II. Практическое решение создание сайта с использованием Macromedia Flash

2.1 Практическое решение примеров в программе Macromedia Flash (скриншоты примеров)

Пример анимационная баннер сайта.

Пример баннер сайта состоит 227 кадров и из 10 слоев.

1) Создаем документ File New либо Ctrl+N на пример задаём высоту Width 961 px и ширину Height 221px.

2) Импортируем объекты (рисунки) на рабочий стол, который мы используем для создания анимации File + Import + Import to Stage или Ctrl+R

3) Создаем слой Insert Layer, на 15,35,55 кадрах, создаем ключевые кадры Insert Keyframe или F6, и вставляем объект (рисунок), который будем анимировать и выделяем 55 кадр, переносим объект в нужное место.

4) Выделяем ключевые кадры, нажимаем на правую кнопку мыши, выходит контекстное меню в списке выбираем Create Motion Tween. В 15и 55 кадре выделяем объект (рисунок) в свойстве (Properties) в списке Color выбираем Alpha, задаем значение 0%. А в 35 кадре задаем значение Alpha 100%. Так мы создали 1-й анимационный слой. И так же делаем остальные текстовые анимации. В процессе рисунок сперва медленно появляется, а патом медленно исчезает.

Пример № 1 Человек ставивший печать.

По кадровая анимация т.е анимируем каждый ключевой кадр.

Пример № 2. Морфинг.

1) Создаем новый слой (Insert Layer).

2) На 1-й кадр и рисуем четырехугольник.

3) Вставим пустой ключевой кадр (F 7) на 20 кадре рисуем овал.

4) Вставим пустой ключевой кадр (F 7) на 60 кадре рисуем треугольник.

5) Выделяем ключевые кадры, нажимаем на правую кнопку мыши, выходит контекстное меню в списке выбираем Create Shape Tween. И вот наш анимационный морфинг готов и для красоты создаем несколько слоев. И копируем слой, выделяем первый и последний кадр, при нажатие Shift нажимаем на правую кнопку мыши, выходит контекстное меню в списке выбираем Copy frames и вставляем на другой слой Past frames. И конечна, подвинем ключевые кадры.

Пример № 3 Слиток.

1) Создаем новый документ вставим на 1 кадр нужный рисунок (в качестве фона).

2) Создаем слой Insert Layer, на 20,60 кадрах, создаем ключевые кадры Insert Keyframe или F6 и рисуем звездочку. Выделяем 20 ключевой кадр, нажимаем на правую кнопку мыши, выходит контекстное меню в списке выбираем Create Motion Tween.

3) Выделяем 35 кадр и создаем ключевой кадр выделяем 35кадр звездочку переносим нужное положение и выбираем инструмент Free Transform Tool и трансформируем звездочку (увеличиваем). В свойстве в (Properties) в списке Rotate выбираем CCW (по часовой) а значение 1.

4) А в 60 кадре трансформируем звездочку в исходное положение.

Пример № 4 Ракета.

1) Создаем слой, на 10 и 35 кадре создаем ключевые кадры (F6) и на 10 кадре рисуем машину, выделяем 10 кадр нажимаем правую кнопку мыши, выходит контекстное меню в списке выбираем Create Motion Tween. И выделяем на 35 кадре машину переносим ее за кадр.

2) Выделяем 35 кадр открываем панель Action Script с помощи Window + Action или F 9 и прописываем код:

gotoAndStop(35); т.е клип остановится на 35 кадре.

3) Создаем еще один слой, на 40 и 80 кадре создаем ключевые кадры (F6) и на 40 кадре рисуем ракету, выделяем 40 кадр нажимаем правую кнопку мыши, выходит контекстное меню в списке выбираем Create Motion Tween. И выделяем 80 кадр выделяем ракету, переносим ее за кадр. в свойстве (Properties) в списке Color выбираем Alpha, задаем значение 0%.

4) Создаем еще один слой и вставим из библиотеки кнопку (Window + Library), выделяем кнопку открываем панель Action Script с помощи Window + Action или F 9 и прописываем код:

on (press, keyPress "p") {

gotoAndPlay(37);

}

5) Создадим направляющий слой Add Motion Guide (кнопка временной шкале в нижнем левом угле). На 40 кадре рисуем траекторию ракеты (линию).

6) Выделяем 40 кадр и ракету и переносим ракету на один конец линии и конечно же выделяем 80 кадр и ракету и переносим ракету на другую конец линии. И вот так мы создали еще один клип. В процесс машина отежает за кадр но на 35 кадре останавливается после нажатие кнопки ПУСК ракета взлетит на воздух.

2.2 Цель и место размещения документа Web

Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно, пользователь, который приобрел и установил на своей машине Microsoft Office 97, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.

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

В результате работа многих пользователей стала иметь большее отношение к Сети, чем они того сами, может быть желали. Так, одним из способов самовыражения стало размещение личных страничек в Internet. Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис: составить резюме в формате Web-страницы и разместить эту информацию в Сети. Существует огромный список серверов, дающих пространство для размещения вашей станицы в глобальной сети, однако при виртуальном подписании договора между двумя сторонами, оговаривается тот факт, что Вы не имеете права использовать ваш сайт в рекламных целях, а также вставлять в него чужую рекламу (условия и услуги на всех серверах разные). Наиболее популярными являются Geocities, Chat.ru, Fortunecity и другие.

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

2.3 Сценарий и структура Web документа

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

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

Итак, рассмотрим основные теги, входящие в каждый Web-документ. Прежде всего это <HTML></html>

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

Также основным тегом является <HEAD></head>

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

<BODY></body>

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

Без этих тегов невозможно создать ни одну Web-cтраницу.

2.4 Структура текста Web документа

Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим.

Ниже приведен шаблон типичного Web-документа. На его примере мы рассмотрим общие принципы построения HTML-страниц.

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

<COMMENT> Комментарий к документу </comment>

<HTML>

<HEAD>

<TITLE> Структура Web-страницы</title>

<STYLE> H2 {font-family: Arbat;}

CODE {font-family: Arbat;} </style>

<META

name=''Author''

content=''Irina''>

<META

name=''Keywords''

content=''WWW, HTML, document, element''>

</head>

<BODY bgcolor=#FFFFFF>

<A name=''top''>вверх</a>

Переход в <A href=''#bottom''> конец </a> документа <P>

Переход к <A href=''#S001''><B> ссылке 1 </b></a><P>

<P>

<HR>

<H1>Заголовок1<h1>

<H2>Заголовок2<h2>

<H3>Заголовок3<h3>

<H4>Заголовок4<h4>

<H5>Заголовок5<h5>

<H6>Заголовок6<h6>

<HR>

Здесь расположена <B>ссылка 1</b><A name=''S001''></a>

<HR>

<P>Здесь должен располагаться оригинальный текст Web-страницы

<HR>

<A name=''bottom''></a><P>

Переход в <A href=''top''> начало </a> документа

</body>

</html>

<COMMENT></comment>

Текст комментария. В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле - не исключение. Текст, помещенный внутри COMMENT, игнорируется броузером Броузер (browser) - программа для просмотра Web-страницы. COMMENT может располагаться в любом месте кода Web-страницы. Без конечного тега Тег (tag) - стартовый или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой., здесь по-видимому не обойтись: комментарий должен быть отделен от основного текста.

Существует, правда, одно ограничение: внутри комментария не должны располагаться другие элементы Элемент (element) - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любой Web-документ представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.. Так должно быть, разумеется, только в том случае когда необходимо, чтобы все содержимое элемента COMMENT не отображалось на экране монитора. Если в комментарии будет присутствовать другой элемент, то его содержимое будет выведено на экран, отформатированное соответствующим образом. С этой проблемой связана другая, похожая: обычный текст не может содержать фрагменты, имеющие вид тегов. Для того чтобы включать в текст подобные конструкции, существует элемент PLAINTEXT, о котором речь пойдет ниже.

Существует и другой способ обозначения комментария. Он заключается в использовании восклицательного знака и обрамлении текста комментария двойным тире. Например:

<!--Строка комментария-->

<!--Комментарий- -Не комментарий- -Снова комментарий-->

Внутри подобной конструкции можно помещать и теги: они не будут восприниматься броузером.

<HTML></html>

Отличительный признак HTML-документа. Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты Атрибут (attribute) - параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой присваивается определенный набор значений: стандартных или произвольных. Атрибуты располагаются внутри стартового тега и отделяются друг от друга пробелами. version, lang и dir, которыми в данном случае мало кто пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все гипертекстовые документы.

<HEAD></head>

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускается вложение элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID.

<TITLE></title>

Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна броузера. Эта особенность часто используется для организации поиска в WWW WWW, World Wide Web - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Internet. . Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы строка внутри TITLE, не будучи слишком длинной, достаточно отображала назначение документа.

<STYLE></style>

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

<META>

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

Дата, обозначающая «срок годности»документа:

name=''Expires'' content=''Дата''

Адрес электронной почты:

name=''Reply-to'' content=''Имя@Адрес''

Указание приложения, в котором был создан Web-документ:

name=''Generator'' content=''Название HTML-редактора''

Атрибут name используется приложением-клиентом для получения дополнительной информации о Web-страницах и их упорядочения. Этот атрибут часто заменяют атрибутом http-equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.