Автор работы: Пользователь скрыл имя, 26 Февраля 2012 в 15:48, научная работа
Язык HTML в своем развитии прошел несколько версий. Заметим, что после версий 1.0 и 2.0 в марте 1995 года был подготовлен черновой вариант версии 3.0, в которой по сравнению с версией 2.0 было много добавлений. Не углубляясь пока в детали, отметим, что основные производители навигаторов (фирмы Netscape и Microsoft) разработали свои расширения языка HTML, которые оказались несовместимыми между собой. В настоящее время ситуация осталась прежней, хотя совместимость навигаторов Netscape Navigator версии 3.0 и Microsoft Internet Explorer версии 3.0 несколько улучшилась.
В листинге 35 мы привели исходный текст документа HTML, в котором расположены два изображения - обычное cpanel.gif и чересстрочное cpaneli.gif.
Листинг 35. Файл chap4\interl\interl.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Чересстрочные
графические изображения</
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><IMG SRC="cpanel.gif"></TD>
<TD><IMG SRC="cpaneli.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
На рис. 48 показан фрагмент окна навигатора в момент загрузки изображений, расположенных в документе. Из рисунка видно, что обычное изображение загружается сверху вниз и появляется сразу с нормальной четкостью. Чересстрочное изображение отображается целиком, однако его четкость увеличивается по мере загрузки документа.
Рис. 48. Рисование обычного и чересстрочного изображения
3.4 Анимация
Как мы уже говорили, формат GIF позволяет хранить в одном файле несколько графических изображений. При отображении такого файла навигаторы могут показывать эти изображения по очереди, как кадры обычного кинофильма. Подготовив достаточное количество кадров, вы можете создать небольшой фильм (или мультфильм) и разместить его в документе HTML.
Редактор GIF Construction Set
В этом разделе мы создадим маленький мультфильм с использованием приложения GIF Construction Set, с которым вы уже знакомы.
За основу мы возьмем рисунок, показанный на рис. 38. Подготовим на базе этого рисунка семь изображений, как это показано на рис. 49.
Рис. 49. Семь изображений для мультфильма
Все эти рисунки отличаются изображением лучей солнца, которые как бы расходятся из центра. Кроме того, в каждом рисунке изменяется цвет одной буквы в слове Picture.
Теперь, когда кадры нашего мультфильма готовы, займемся их объединением в один графический файл GIF.
Запустите приложение GIF Construction Set и выберите из меню File строку Animation Wizard. На экране появится первая диалоговая панель программы полуавтоматического создания мультфильма. Нажмите в ней кнопку Next.
На экране появится следующая диалоговая панель (рис. 50).
Рис. 50. Выбор назначения создаваемого анимационного файла GIF
В ней вы должны указать назначение создаваемого анимационного изображения. Если вы собираетесь разместить это изображение в документе HTML, включите переключатель Yes, for use with a Web page. При этом будет использована палитра, максимально совместимая с навигатором Netscape Navigator.
Включив указанный выше переключатель, нажмите кнопку Next. После этого на экране появится диалоговая панель, в которой вы должны выбрать, как будет отображаться ваш мультфильм (рис. 51).
Рис. 51. Выбор способа отображения анимационного файла GIF
Если включить переключатель Loop indefinitely, анимационный файл будет прокручиваться непрерывно. Обычно используется именно этот режим отображения. Однако вы можете включить переключатель Animate once and stop, при этом содержимое файла будет показано только один раз.
Продолжим работу, нажав кнопку NEXT. В следующей диалоговой панели вы должны указать способ, которым были получены изображения, из которых создается анимационный файл GIF (рис.52).
Рис. 52. Указание способа получения изображений
Если анимационный файл создается из сканированных фотографий, включите переключатель Photorealistic (фотореалистичные изображения). В том случае, когда изображения были нарисованы при помощи графического редактора, включите переключатель Drawn. Если к тому же в нарисованном изображении были использованы только 16 цветов, включите переключатель Drawn in sixteen colours. Введенная вами информация будет использована программой полуавтоматического создания анимационного файла GIF для выбора подходящей палитры.
Указав способ получения изображения, нажмите кнопку Next и переходите к следующей диалоговой панели, позволяющей задать интервал времени между отображением отдельных кадров файла (рис. 53).
Рис. 53. Указание интервала отображения кадров
По умолчанию интервал между кадрами составляет 0.1 секунды, однако вы можете выбрать другое значение при помощи списка, расположенного в диалоговой панели.
Выбрав интервал, нажмите кнопку Next и переходите к формированию списка файлов GIF, из которых будет создан анимационный файл. На рис. 54 мы показали этот список уже заполненным.
Рис. 54. Создание списка изображений для анимационного файла
Для заполнения списка в диалоговой панели, показанной на рис. 54, нажмите кнопку Select. На экране появится диалоговая панель Open, показанная на рис. 55.
В этой панели вам нужно выбрать сначала первый файл, который будет использован для первого кадра, и нажать кнопку OK, затем второй и так далее. После добавления всех кадров нажмите кнопку Done.
Список, показанный на рис. 54, можно редактировать, удаляя из него отдельные файлы при помощи кнопки Delete и добавляя новые. Когда список будет готов, нажмите кнопку Next. Вслед за этим вы увидите диалоговую панель с сообщением о том, что все готово и можно приступать к созданию анимационного файла. Нажмите в этой диалоговой панели кнопку Done.
В результате работы программы полуавтоматического создания анимационного файла GIF будут автоматически созданы блоки заголовка, управляющие блоки и блоки изображений (рис. 56).
Рис. 56. Созданные блоки анимационного файла
При необходимости вы можете отредактировать любой блок, например, изменив интервал отображения отдельных кадров или настройку палитры. Можно также задать смещение расположения кадров по вертикали или горизонтали, а также других параметры.
В заключение сохраните созданный файл, выбрав из меню File строку Save as, и указав имя для файла.
Анимационный графический файл включатся в документ HTML таким же образом, что и обычный. В листинге 36 мы привели исходный текст простейшего документа HTML, в который включен только что созданный нами анимационный графический файл sunani.gif.
Листинг 36. Файл chap4\animate\animate.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Прозрачные
графические изображения</
</HEAD>
<BODY>
<IMG SRC="sunani.gif">
</BODY>
</HTML>
Внешний вид этого документа показан на рис. 57.
Рис. 57. Документ HTML с анимационным графическим изображением
Редактор Microsoft GIF Animator
Еще одно удобное приложение для создания анимационных графических файлов GIF создано корпорацией Microsoft и называется Microsoft GIF Animator. Главное окно этого приложения показано на рис. 58.
Рис. 58. Главное окно приложения Microsoft GIF Animator
Пользоваться этим приложением
очень просто. Сначала вам нужно
подготовить набор обычных
Затем нажмите вторую слева кнопку, расположенную в верхней части окна приложения и при помощи появившейся на экране диалоговой панели выберите файл изображения для первого кадра вашего мультфильма.
В левой части окна приложения Microsoft GIF Animator отображаются пиктограммы кадров мультфильма. После выполнения только что описанной процедуры в списке пиктограмм появится содержимое добавленного вами файла.
Далее при помощи кнопки с изображением чистого листа бумаги и знака “плюс” добавьте в мультфильм по одному файлы остальных кадров.
Теперь обратите внимание на блокнот, расположенный в правой части главного окна приложения.
На странице Option этого блокнота находится меню Import Color Palette, с помощью которого можно выбрать палитру для создаваемого изображения.
В большинстве случаев вы должны выбрать значение Browser Palette. При этом создается глобальная палитра с использованием так называемого безопасного набора цветов, который гарантированно отображается без искажений наиболее популярными навигаторами.
Если же выбрать строку Optimal Palette, для каждого кадра будет создана отдельная палитра, что обеспечивает более высокое качество изображения, но приводит к увеличению размера файла.
На странице Animation обратите
внимание на переключатель Looping. Если он
включен, изображение будет
Страница Image позволяет задать
параметры изображений, такие как
размеры и смещение, продолжительность
отображения для отдельных
После добавления кадров и
настройки всех параметров вы можете
выполнить предварительный
Готовый анимационный файл можно записать на диск, нажав кнопку с изображением дискеты.
Редактор PhotoImpact GIF Animator
Еще одно средство для подготовки анимационных файлов GIF, которое, безусловно, заслуживает внимание, это редактор PhotoImpact GIF Animator. Этот редактор вы можете получить через Internet на сервере www.ulead.com фирмы Ulead Systems.
Главное окно приложения PhotoImpact GIF Animator показано на рис. 59.
Рис. 59. Главное окно приложения PhotoImpact GIF Animator
Это приложение очень удобно, так как вы можете добавлять файлы отдельных кадров создаваемого мультфильма, просто перемещая их мышью из папки, раскрытой на поверхности рабочего стола Microsoft Windows 95 или Microsoft Windows NT в окно списка пиктограмм, расположенное в левом нижнем углу главного окна. Кроме того, вы можете сделать щелчок правой клавишей мыши по строке кадра и при помощи контекстного меню изменить параметры любого кадра.
3.5 Видеофрагменты в документах HTML
Анимационные изображения, выполненные в виде файлов GIF, используются в документах WWW достаточно широко, так как для их подготовки можно использовать недорогие или даже бесплатные средства. Однако таким образом вы сможете сделать только “немое кино”. Полноценные озвученные видеофрагменты можно разместить в документах HTML как ссылки на файлы в формате Microsoft Video for Windows (файл AVI).
Существует несколько возможностей для создания файла AVI.
Во-первых, вы можете записать
в файл AVI сигнал от видеомагнитофона
или видеокамеры. Для этого вам
придется приобрести специальный адаптер,
предназначенный для ввода
Заметим, однако, что файл
AVI с высококачественным видеофрагментом
длительностью порядка
Во-вторых, вы можете сделать файл AVI как мультфильм из отдельных изображений, нарисованных любым графическим редактором. Эта технология напоминает технологию создания анимационных файлов GIF, с тем исключением, что в отличие от файла GIF файл AVI можно озвучить. Причем озвучивание файла AVI можно выполнить в любое время.
Более подробно технология подготовки файлов AVI с использованием пакета программ Microsoft Video for Windows была нами подробно описана в 15 томе ”Библиотеки системного программиста”, который называется “Мультимедиа для Windows”.
Теперь о том, как вставить файл AVI в документ HTML.
Для вставки файлов AVI вы можете использовать описанный выше оператор <IMG> с различными параметрами, такими как DYNSRC, START и CONTROLS.
Приведем список параметров оператора <IMG>, которые используются для вставки файлов AVI с их кратким описанием.
Параметр Описание
DYNSRC
Этот параметр аналогичен параметру SRC, указывающему путь к файлу с графическим изображением. Он определяет путь к файлу AVI, содержащему видеофрагмент
SRC
С помощью параметра SRC можно указать путь к графическому изображению, которое появится в документе HTML вместо файла AVI в том случае, если навигатор не способен проигрывать видеофрагменты
START
Параметр определяет момент,
когда нужно начинать проигрывание
видеофрагмента. Если этот параметр имеет
значение FILEOPEN, проигрывание начинается
сразу, как только файл будет загружен.
Если же значение параметра равно MOUSEMOVE,
проигрывание начнется после того,
как пользователь поместит курсор на
окно, предназначенное для
CONTROLS
Если указан этот параметр,
под окном с видеофрагментом
отображаются органы управления, позволяющие
управлять процессом
LOOP
Параметр LOOP определяет, сколько
раз будет проигрываться