Microsoft DirectAnimation. Клиентские компоненты
В данном обзоре мы познакомимся с четырьмя клиентскими мультимедийными компонентами, входящими в состав Microsoft DirectAnimation. Эти мультимедийные компоненты позволяют создавать изображения на основе векторной графики, управлять графическими изображениями, использовать анимацию и могут быть включены в состав HTML-документов. К мультимедийным компонентам DirectAnimation относятся:
-
Компонент Path для перемещения других объектов по заданной геометрической или сплайновой траектории с возможностью управления скоростью перемещения, проигрыванием вперед и назад и т.п.
-
Компонент Sequencer для создания комплексных последовательностей с использованием компонентов ActiveX, скриптовых программ и Dynamic HTML.
-
Компонент Sprite для добавления к HTML-документам статических и анимированных графических изображений и управления ими.
-
Компонент Structured Graphics для создания векторной графики и манипуляций с ней.
Ниже мы рассмотрим каждый компонент, опишем его свойства, методы и события и приведем примеры его использования в составе HTML-документов.
Компонент Path
Данный компонент используется для перемещения объектов по заданной геометрической или сплайновой траектории с возможностью управления скоростью перемещения, проигрыванием вперед и назад и т.п.
Компонент Path представляет собой безоконный компонент, который описывается внутри HTML-документа следующим образом:
<OBJECT ID=pathObj CLASSID=”CLSID:D7A7D7C3-D47F-11d0- 89D3-00A0C90833E6"> <PARAM NAME=”PropertyName” VALUE=”Value”> </OBJECT>
Доступ из программы на JavaScript осуществляется по идентификатору:
pathObj.PropertyName=Value
В табл. 1 перечислены свойства, поддерживаемые компонентом Path.
Методы и события, поддерживаемые компонентом Path, перечислены в табл. 2
Чтобы увидеть компонент Path в действии, рассмотрим следующий пример. Разместим в нашем документе графическое изображение и компонент Path:
<img id=logo src=’ie5logo.jpg’ style=”position:absolute; left : 150; top : 50;”> <OBJECT ID=pathObj CLASSID=”CLSID:D7A7D7C3-D47F-11d0-89D3-00A0C90833E6"> </OBJECT>
Графическое изображение имеет идентификатор logo и с помощью атрибутов стиля расположено в абсолютной точке экрана с координатами (150, 50). С помощью компонента Path можно перемещать любой элемент HTML-документа. Единственным условием является то, что у него должны быть заданы атрибуты left и top.
В документе мы также располагаем кнопку, нажатие которой приводит к началу перемещения графического изображения:
<button onClick=”doClick()”>Play</button>
Весь код расположен в функции doClick, которая выглядит следующим образом:
function doClick()
{
pathObj.bounce = 1;
pathObj.direction = 0;
pathObj.duration = 3;
pathObj.repeat = 5;
pathObj.target = ‘logo’;
pathObj.rect(150, 50, 400, 400);
pathObj.Play();
}
В первой строке мы задаем значение свойства bounce равным 1, что означает, что компонент выполняет перемещение до конечной точки, а затем перемещает объект в обратном направлении. Свойство direction задает направление перемещения. В нашем примере мы используем значение по умолчанию — перемещение в прямом направлении. Далее мы задаем время, отводимое на перемещение объекта (свойство duration). В нашем примере мы отводим 3 секунды для прохождения трассы от начальной до конечной точки. Следующая строка задает число повторений перемещения (свойство repeat). Далее мы указываем сам перемещаемый объект (свойство target) и траекторию его перемещения. В нашем примере используется прямоугольная траектория, задаваемая методом Rect, в котором мы задаем начальную точку, а также ширину и высоту прямоугольника. И, наконец, метод Play запускает перемещение на выполнение.
Как мы отметили выше, компонент Path позволяет использовать несколько траекторий. Помимо уже использованной траектории Rect мы можем использовать траекторию Oval (указывается начальная точка, ширина и высота), траекторию Polygon (указывается число точек и массив координат вершин), PolyLine (также указывается число точек и массив координат вершин) и Spline (указывается число точек — оно должно быть кратно 4, и набор координат). Для создания массива координат вершин мы можем использовать объект Array. Ниже показано, как это сделать для функции polygon.
function doPolygon()
{
points = new Array(6);
points[0] = 150; points[1] = 50;
points[2] = 400; points[3] = 400;
points[4] = 100; points[5] = 200;
setParams()
pathObj.polygon(3, points);
pathObj.Play();
На CD-ROM вы найдете примеры использования компонента Path.
 |
|
Компонент Sequencer
Данный компонент применяется для создания комплексных последовательностей с использованием компонентов ActiveX, скриптовых программ и Dynamic HTML. С помощью компонента Sequencer можно:
-
управлять различными элементами HTML-документов;
-
вызывать скриптовые программы;
-
вызывать функции других компонентов ActiveX;
-
устанавливать или получать значения других компонентов ActiveX.
Компонент Sequencer представляет собой безоконный компонент, который описывается внутри HTML-документа следующим образом:
<OBJECT ID=sequencerObj CLASSID=clsid:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96> </OBJECT>
|
|
Наборы действий
Набор действий (Action Set) — это логическая группа именованных процедур, которые управляют поведением объектов в составе HTML-документов. Например:
<script language=”Jscript” FOR=”Seq” event=”oninit”>
Seq.item(“ActionSet1”).at(1.000, “RotateAll()”,-1, 0.050, 1);
Seq.item(“ActionSet1”).Play();
</script>
В табл. 3 перечислены свойства наборов действий и их синтаксис.
property=sequencerObj(“ActionSetName”).PropertyName
Компонент Sequencer поддерживает ряд методов, которые перечислены в табл. 4. Синтаксис для вызова методов показан ниже.
sequencerObj.MethodName(Parameters)
Параметры указываются через запятую. Например:
Seq.item(“ActionSet1”).at (1.000, “RotateAll()”, 1, 0.050, 1); Seq.item(“ActionSet1”).Play();
Компонент Sequencer может служить источником ряда событий, которые перечислены в табл. 5. Синтаксис обработчика событий показан ниже.
<SCRIPT LANGUAGE=”JavaScript” FOR=sequencerObj EVENT=event ( parameters ) > <!— Скриптовая программа —> </SCRIPT>
Давайте рассмотрим пример использования компонента Sequencer. Разместим в HTML-документе элемент DIV, который будет выглядеть следующим образом:
<div id=demo style=”position : absolute; top : 0; left : 0; height : 50; width : 450;”> <font color = #000000 size=+4><b><center> Компонент Sequencer</center></b></font> </div>
Этот элемент, обладающий идентификатором demo, расположен в абсолютной позиции 0,0 и имеет размеры 50 на 450 пикселов. Внутри него расположен текст, который выводится черным цветом выделенным шрифтом, превышающим базовый на 4 единицы. Текст располагается в центре элемента DIV.
Далее мы зададим набор действий — это будет простая функция, которая изменяет цвет фона элемента DIV на цвет, заданный в качестве параметра:
function change(color)
{
demo.style.background = color;
}
Нам осталось лишь написать программу, которая будет управлять набором действий. Мы разместим ее в обработчике события onInit, возникающего после загрузки компонента в памяти. Код этой программы приведен ниже.
<SCRIPT LANGUAGE=”JavaScript” FOR=sequencerObj EVENT=onInit> sequencerObj(“demo”).at(0.5, “change(‘yellow’)” , -1, 5.0) sequencerObj(“demo”).at(1.5, “change(‘red’)” , -1, 5.0) sequencerObj(“demo”).at(2.5, “change(‘wheat’)” , -1, 5.0) sequencerObj(“demo”).at(3.5, “change(‘coral’)” , -1, 5.0) sequencerObj(“demo”).play(); </SCRIPT>
Что делает эта программа? Она задает сценарий выполнения набора действий, описанного функцией change. Синтаксис может показаться непривычным, поэтому мы подробно рассмотрим первую строку.
В ней мы указываем, что перечисленные действия выполняются для объекта с идентификатором demo. Затем мы задаем время выполнения первого действия — через 500 миллисекунд после начала выполнения набора действий. Далее указывается, что именно мы хотим выполнить — функцию change в нашем примере, и как часто мы хотим ее повторять — каждые 5 секунд. В последующих строках мы лишь меняем «временной отступ» каждого следующего действия.
В последней строке мы запускаем описанный выше набор действия и сценарий для него на выполнение.
Вы можете сами поэкспериментировать с компонентом Sequencer — текст приведенного здесь примера вы найдете на CD-ROM в файле SEQUENCER.HTM.
|
|
Компонент Sprite
Данный компонент используется для добавления к HTML-документам статических и анимированных графических изображений и управления ими.
До появления Microsoft Internet Explorer 4.0 в распоряжении разработчиков существовало не так много средств для создания анимационных изображений. Можно было использовать анимированные GIF-изображения, состоящие из набора кадров одинакового размера, отображающихся один за другим. Анимацию можно было создать средствами Macromedia Shockwave или Macromedia Flash, что требовало освоения нового программного продукта и включения в состав HTML-документа соответствующего компонента, загрузка которого с сервера занимает продолжительное время. Анимацию можно было реализовать также с помощью специально написанного Java-аплета, что подразумевало знакомство с языком Java и использование одного из средств разработки.
Теперь ситуация изменилась. В вашем распоряжении находится компонент Sprite, с помощью которого возможно создавать анимированные графические изображения, управлять скоростью их воспроизведения, а также перемещать спрайты по экрану, используя, например, компонент Path, с которым мы познакомились выше.
Использование компонента Sprite мы начинаем с того, что размещаем его в HTML-документе:
<OBJECT ID=spriteObj CLASSID=”clsid: FD179533-D86E-11d0-89D6-00A0C90833E6"> <PARAM NAME=”PropertyName” VALUE=”Value”> </OBJECT>
После этого нам становятся доступны свойства, методы и события, которые перечислены в табл. 6.
Источником спрайтов может быть как файл, содержащий набор кадров в формате GIf, JPG, WMF или PNG, так и набор отдельных файлов, каждый из которых содержит отдельный кадр.
|
|
Компонент Structured Graphics
Данный компонент используется для создания векторной графики и манипуляций с ней. Отличительной особенностью компонента Structured Graphics является то, что вся графика создается чисто клиентскими средствами, «на лету», и практически не требует времени для загрузки и отображения. Создаваемая векторная графика прозрачна для фона HTML-документа и может программно управляться, масштабироваться, вращаться из скриптовых программ.
Векторная графика может задаваться либо с помощью соответствующих методов, либо с помощью файла, в котором хранится описание требуемых для отображения графических примитивов. В последнем случае используется свойство SourceURL, как это показано на следующем примере:
<SCRIPT LANGUAGE=”JavaScript” FOR=”SGControl” EVENT=”onmouseover”> SGControl.SourceURL=”graph.txt” </SCRIPT>
Графические примитивы описаны в файле GRAPH.TXT, который выглядит следующим образом:
SetLineColor(255,0,0) SetLineSTYLE(1,3) SetFillColor(100,0,100) SetFillSTYLE(1) Polygon(11, 40,10, 30,30, 10,30, 26,45, 20,60, 40,50, 60,60, 54,45, 70,30, 50,30, 40,10)
Фактически данный файл содержит вызовы соответствующих методов, которые могли бы вызываться и из скриптовой программы.
Векторная графика также может создаваться с помощью объекта DADrawingSurface. Этот объект доступен через свойство DrawSurface.
Для того чтобы вы могли использовать компонент Structured Graphics, вы должны поместить в HTML-документ следующий объект:
<OBJECT ID=SGObj STYLE=”WIDTH:width; HEIGHT:height: Z-INDEX:z-index” CLASSID=”CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME=”PropertyName” VALUE=”Value”> </OBJECT>
Параметры компонента могут быть заданы либо с помощью атрибутов PARAM, либо непосредственно из скриптовой программы.
Свойства, поддерживаемы компонентом Structured Graphics, приведены в табл. 7.
Перечисленные ниже методы компонента Structured Graphics могут использоваться как параметры атрибута PARAM, как функции скриптовых программ или как элементы внешних текстовых файлов. В случае использования атрибута PARAM название метода формируется следующим образом:
<OBJECT ID=SGObj STYLE=”WIDTH:width; HEIGHT:height: Z-INDEX:z-index” CLASSID=”CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME=”LINEnnnn” VALUE=”MethodName(Parameters)”> </OBJECT>
где LINEnnnn — это строка LINE, за которой следует целочисленный индекс строки, начиная с 0001. Например:
<PARAM NAME=”Line0001" VALUE=”SetFillColor(0,0,255)”> <PARAM NAME=”Line0002" VALUE=”SetFillStyle(1)”> <PARAM NAME=”Line0003" VALUE=”SetFont(‘Verdana’,40,650,0,0,0)”>
Компонент Structured Graphics поддерживает методы, которые доступны во всех трех вариантах использования (табл. 8).
Методы, используемые только в скриптовых программах, приведены в табл. 9.
Компонент Structured Graphics может служить источником ряда событий, которые перечислены в табл. 10. Напомним, что обработчик события задается следующим образом:
<SCRIPT LANGUAGE=”JavaScript” FOR=SGeObj EVENT=event ( parameters )> <!— Скриптовая программа —> </SCRIPT>
Рассмотрим следующий пример. Пусть мы хотим иметь в составе HTML-документа вращающийся текст. Начнем с того, что поместим в документ компонент Structured Graphics и зададим его абсолютное местоположение и размер:
<OBJECT ID=StrGr STYLE=”POSITION: ABSOLUTE; HEIGHT:500;WIDTH:500; TOP:50;LEFT:20;VISIBILITY;VISIBLE; Z-INDEX:-1" CLASSID=”CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> </OBJECT>
Далее разместим перед закрывающим элементом </OBJECT> следующие параметры:
<PARAM NAME=”Line0001" VALUE=”SetLineColor(255,255,255)”> <PARAM NAME=”Line0002" VALUE=”SetFillColor(0,0,255)”> <PARAM NAME=”Line0003" VALUE=”SetFillSTYLE(1)”> <PARAM NAME=”Line0004" VALUE=”SetLineSTYLE(0)”> <PARAM NAME=”Line0005" VALUE=”SetFont(‘Verdana’,24,650,0,0,0)”> <PARAM NAME=”Line0006" VALUE=”Text(‘Structured Graphics’, 0, 30, 0)”>
Первая строка задает цвет линии — белый в нашем примере. Затем мы задаем цвет заполнения (в нашем примере — синий), стиль заполнения (полное заполнение, solid), стиль линии (0 — нет контура), шрифт (Verdana, размер 24 точки, вес — 650, отсутствует наклон, подчеркивание и перечеркивание) и сам текст.
Расположим кнопку, которая будет запускать вращение текста:
<button onclick=”RotateZ()”>Rotate</button>
и напишем обработчик ее нажатия:
function RotateZ()
{
StrGr.Rotate(0,0,10);
window.setTimeout(“RotateZ()”, 20, “JScript”);
}
Как видно из приведенного кода, функция RotateZ выполняет вращение текста на 10 градусов по оси Z каждые 20 миллисекунд.
Исходный текст данного примера находится на CD-ROM в файле STRGRAPH.HTM.
|
|
Объект DADrawingSurface
Выше мы кратко упомянули о том, что свойство DrawSurface возвращает объект DADrawingSurface. С помощью этого свойства мы можем управлять графическими примитивами, используя обширный набор функций библиотеки DirectAnimation. Сначала мы должны получить сам объект и ссылку на библиотеку:
daLib = StrGr.Library; daSurf = StrGr.DrawSurface;
После этого нам становятся доступны все функции библиотеки DirectAnimation. В следующем примере показано, как использовать некоторые векторные примитивы этой библиотеки. Сначала мы размещаем компонент Structured Graphics и выводим на экран синий прямоугольник:
<OBJECT ID=StrGr STYLE=”POSITION: ABSOLUTE; HEIGHT:500;WIDTH:500;TOP:50;LEFT:20; VISIBILITY;VISIBLE; Z-INDEX:-1" CLASSID=”CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME=”Line0001" VALUE=”SetLineColor(255,255,255)”> <PARAM NAME=”Line0002" VALUE=”SetFillColor(0,0,255)”> <PARAM NAME=”Line0003" VALUE=”SetFillStyle(1)”> <PARAM NAME=”Line0004" VALUE=”SetLineStyle(0)”> <PARAM NAME=”Line0005" VALUE=”Rect(10, 10, 50, 50)”> </OBJECT>
Далее используем кнопку, нажатие которой приводит к отрисовке окружности, заполненной зеленым цветом:
<button onClick=”doClick()”>Run</button>
Обработчик нажатия кнопки:
function doClick()
{
daLib = StrGr.Library;
daSurf = StrGr.DrawSurface;
daSurf.fillcolor(daLib.ColorRgb(0,255,0));
daSurf.oval(-60, -50, 90, 90);
StrGr.DrawSurface = daSurf;
}
Обратите внимание на последнюю строку функции doClick. В ней мы присваиваем значение измененного изображения компоненту Structured Graphics и, таким образом, вызываем отрисовку графического примитива.
Исходный текст данного примера находится на CD-ROM в файле STRGRAPH2.HTM.
|
|
Заключение
В этом обзоре мы познакомились с четырьмя клиентскими мультимедийными компонентами, входящими в состав Microsoft DirectAnimation. Эти компоненты доступны для Web-разработчиков, начиная с Microsoft Internet Explorer версии 4.0, и позволяют создавать изображения на основе векторной графики, управлять графическими изображениями, использовать анимацию и могут быть включены в состав HTML-документов.
КомпьютерПресс 7'1999
