Web 2.0 обещает нам многофункциональные интернет-приложения. Но что это такое многофункциональное интернет-приложение? В общем оно означает Web-приложение с высокой степенью интерактивности, а именно, с использованием виджетов, Web-форм и отчетов, содержимое которых мгновенно обновляется без запроса новой страницы с сервера.
Один из способов построения многофункциональных интернет-приложений (Rich Internet Applications - RIAs) - это использование динамического HTML (DHTML), который является комбинацией Ajax, JavaScript, каскадных листов стилей (CSS) и HTML. Но DHTML - не единственный способ добавления интерактивности в Web-приложения. Еще одним крупным игроком в этой области является Adobe Flash Player, который уже более десяти лет повышает интерактивность Web-сайтов.
Если первая версия Flash была инструментом для создания анимированных изображений, то новые версии могут поддерживать весь интерфейс в целом, обеспечивая управление доступом к Web-сервисам и полную поддержку сценариев при помощи ECMAScript (официальная версия JavaScript).
Основы Flash
Программа Flash Player - это плагин, интегрируемый в Web-браузер на компьютерах с операционными системами Microsoft® Windows®, Mac OS X или Linux. На момент написания статьи последней версией Flash Player являлась версия V8. Она распространяется бесплатно и входит в поставку большинства браузеров. Эта программа очень популярна и имеет огромное число пользователей. Эта популярность только усилилась с появлением таких сервисов, как YouTube и Google Video, которые используют Flash для воспроизведения видеопотоков.
Но Flash Player - это только одна часть уравнения. Для работы ему необходима Flash-анимация. Такая анимация - это чаще всего файл с расширением .swf, скомпилированный с помощью одного из инструментов разработки Flash. Но мы покажем в этой статье, что с помощью библиотеки Ming вы можете динамически создавать .swf-файлы почти также, как вы динамически создаете рисунки для построения диаграмм на своем Web-сервере. Библиотека Ming создает коды операций в новом .swf-файле из объектов и методов, которые вы написали в PHP-коде.
Вы можете посмотреть .swf-файл с Web-сайта любым из двух способов. Первый - просто следовать по ссылке .swf-файла. При этом вся область контента Web-сервера заменяется на Flash-анимацию. Этот метод удобен для отладки, но основной способ заключается в том, чтобы поместить анимацию в тег <object> внутри HTML-страницы. Этот тег <object> ссылается на SWF-анимацию с помощью URL-адреса. Преимущество подхода с использованием тега <object> ссостоит в том, что вы можете разместить анимацию в любом месте страницы и динамически управлять ей через код JavaScript, также как и любым другим элементом.
На листинге 1 показан пример тега <object>, который ссылается на SWF-анимацию.
Листинг 1. Встроенная Flash-анимация
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=6,0,40,0"
WIDTH="550" HEIGHT="400">
<PARAM NAME="movie" VALUE="lines.swf">
<EMBED src="lines.swf" WIDTH="550" HEIGHT="400"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
|
Этот набор тегов ссылается на файл с анимацией lines.swf. Внутренний тег <embed> нужен для того, чтобы Flash-анимация воспроизводилась во всех браузерах, где установлен плагин.
Эти теги также указывают высоту и ширину окна проигрывателя Flash Player - 550 и 400 пикселей соответственно. Важно отметить, что графика во Flash-анимации векторная. Это значит, что при использовании Flash-команд для рисования линий и текста, соответствующие элементы хранятся как координаты и масштабируются в соответствии с размером окна проигрывателя. Во Flash-анимации своя собственная система координат, которую вы можете использовать по своему усмотрению для оптимизации кода.
Ming
Первый метод использования Flash-анимаций, представленный в этой статье, заключается в динамическом создании анимаций с помощью библиотеки Ming. Библиотека Ming - это PHP-библиотека с набором объектов, которые соответствуют типам данных в SWF-анимации: спрайты (sprites), формы, текст, растровые рисунки и т.д. Я не буду рассказывать в этой статье, как собирать и инсталлировать Ming, потому что этот процесс не является простым и зависит от платформы. Для работы с этой статьей я использовал предварительно скомпилированное расширение библиотеки php_ming.dll для Windows-версии PHP.
Надо отметить, что Ming до сих пор находится в стадии разработки. На момент написания статьи текущая версия библиотеки - V0.4, и некоторые команды из ранних версий не работают в более поздних версиях. В данной статье я использовал версию V0.4, поэтому вам понадобится та же версия, чтобы использовать этот код.
В листинге 2 показан пример программы HelloWorld, реализованный с использованием библиотеки Ming.
<?php $f = new SWFFont( '_sans' ); $t = new SWFTextField(); $t->setFont( $f ); $t->setColor( 0, 0, 0 ); $t->setHeight( 400 ); $t->addString( 'Hello World' ); $m = new SWFMovie(); $m->setDimension( 2500, 800 ); $m->add( $t ); $m->save( 'hello.swf' ); ?> |
Запустив этот код из командной строки, вы получите файл hello.swf. Я открываю этот файл в своем Web-браузере и вижу результат (см. рисунок 1).
Рисунок 1. Пример HelloWorld с использованием Ming
Возвращаясь к коду, первое, что я делаю - создаю указатель на встроенные шрифты (_sans), затем я создаю текстовое поле, устанавливаю его шрифт, цвет и размер, а также задаю его значение ("Hello World"). Потом я создаю объект SWFMovie и задаю его размеры. Наконец я добавляю этот текстовый элемент к анимации и сохраняю анимацию в файл.
В качестве альтернативы непосредственному созданию файла можно выводить результирующую SWF-анимацию как страницу, используя вместо метода save данный код:
header( 'Content-type: application/x-shockwave-flash' ); $m->output( ); |
Этот процесс похож на создание растровых рисунков с использованием библиотеки ImageMagick в рамках PHP. Я буду использовать метод save для всех примеров с Ming, однако вы можете делать, как вам удобнее.
Заставим текст двигаться
Просто помещать текст во Flash-анимацию бессмысленно, лучше заставить его двигаться. Для этого я объединю пример из листинга 2, который состоит из двух частей: первый текст из маленького становится больше и больше, а второй остается статичным.
<?php
$f = new SWFFont( '_sans' );
$pt = new SWFTextField();
$pt->setFont( $f );
$pt->setColor( 0, 0, 0 );
$pt->setHeight( 400 );
$pt->addString( '1000' );
$tt = new SWFTextField();
$tt->setFont( $f );
$tt->setColor( 192, 192, 192, 90 );
$tt->setHeight( 350 );
$tt->addString( 'Points' );
$m = new SWFMovie();
$m->setDimension( 2500, 800 );
$pts = $m->add( $pt );
$pts->moveTo( 0, 0 );
$tts = $m->add( $tt );
$tts->moveTo( 1300, 200 );
for( $i = 0; $i < 10; $i++ ) {
$m->nextframe();
$pts->scaleTo( 1.0 + ( $i / 10.0 ), 1.0 + ( $i / 10.0 ) );
}
$m->save( 'text.swf' );
?>
|
Запуск этого кода из командной строки создает файл text.swf. Я открываю этот файл в своем Web-браузере и вижу результат (см. рисунок 2).
Сначала текст "1000" довольно маленький - 350 точек. Затем я использую метод scaleTo(), чтобы увеличить его до 750 точек. Для этого я использую метод nextframe() на анимационном объекте.
Чтобы понять, почему это работает, вам надо немного узнать о том, как Flash осуществляет анимацию. Анимация во Flash работает также как и в кино: с помощью кадров. Графические спрайты изменяют свое положение от кадра к кадру. Одно ключевое различие в том, что Flash не делает моментальный снимок каждого кадра. Он хранит состояние каждого объекта-спрайта для каждого кадра.
Если вы заметили, у меня есть одна переменная, $pt, которая содержит текст "1000." Я получаю новый объект $pts из метода add(), когда добавляю переменную $pt к анимации. Этот объект является SWFDisplayItem-объектом, ккоторый представляет экземпляр данного спрайта. Теперь я могу двигать этот экземпляр по поверхности анимации покадрово. Возможно, вас немного запутает то, что у меня может быть несколько версий спрайта текста "1000" или спрайта текста "points", которые могут двигаться одновременно.
Нарисуем картинку
Следующая вещь, которой мы будем заниматься, - это векторная графика. Начнем с простой линии, которая будет проходить от верхнего левого угла к нижнему правому углу кадра.
<?php $m = new SWFMovie(); $m->setDimension( 300, 300 ); $s = new SWFShape(); $s->setLine( 10, 0, 0, 0 ); $s->movePenTo( 10, 10 ); $s->drawLineTo( 290, 290 ); $m->add( $s ); $m->save( 'line.swf' ); ?> |
Я запускаю этот сценарий из командной строки, смотрю на полученный .swf-файл и вижу изображение как на рисунке 3.
Рисунок 3. Рисование простой линии
Довольно просто и не очень интересно. Что же я сделал? Я создал новый объект SWFShape, добавил несколько движений пера и линий. Затем присоединил этот спрайт-форму к анимации.
Чтобы стало интереснее, я использую тот же тип кадровой анимации, как с текстом. Но в этом случае я буду вращать линию вокруг центра анимации с помощью кода, показанного ниже.
<?php
$m = new SWFMovie();
$m->setDimension( 300, 300 );
$s = new SWFShape();
$s->setLine( 5, 0, 0, 0 );
$s->movePenTo( -100, -100 );
$s->drawLineTo( 100, 100 );
$ts = $m->add( $s );
$ts->moveTo( 150, 150 );
for( $i = 0; $i < 100; $i++ ) {
$ts->rotate( 10 );
$m->nextframe();
}
$m->save( 'rotate.swf' );
?>
|
В данном случае я рисую линию от точки с координатами -100, -100 до 100, 100, так чтобы центр линии был расположен в точке 0,0. Таким образом, когда я вращаю форму, вращение происходит вокруг центра линии.
Добавляя форму к анимации, я двигаю объект SWFDisplayItem, который возвращается в центр кадра. Затем я его вращаю с помощью метода rotate() и увеличиваю кадр в каждый момент времени.
Использование рисунков
Текст и основные векторные примитивы, такие, как линии, окружности, дуги, кривые и прямоугольники - это все замечательно, однако хорошо бы иметь доступ к изображениям нашей Flash-анимации. К счастью, библиотека Ming упрощает использование изображений, как вы можете видеть:
Листинг 6. Использование изображения
<?php
$img = new SWFBitmap( file_get_contents( 'megan.jpg' ) );
$s = new SWFShape();
$imgf = $s->addFill( $img );
$s->setRightFill( $imgf );
$s->movePenTo( 0, 0 );
$s->drawLineTo( $img->getWidth(), 0 );
$s->drawLineTo( $img->getWidth(), $img->getHeight() );
$s->drawLineTo( 0, $img->getHeight() );
$s->drawLineTo( 0, 0 );
$m = new SWFMovie();
$m->setDimension( $img->getWidth() * 2, $img->getHeight() * 2 );
$is = $m->add( $s );
$is->moveTo( $img->getWidth() / 2, $img->getHeight() / 2 );
for( $i = 0; $i < 10; $i++ )
{
$is->skewx( 0.02 );
$is->skewy( -0.03 );
$m->nextframe();
}
$m->save( 'image.swf' );
?>
|
Я запускаю этот сценарий из командной строки, смотрю на полученный .swf-файл и вижу изображение как на рисунке 4.
Рисунок 4. Анимация с изображением
Этот сценарий начинает работу с чтения локального .jpeg-файла (в данном случае фотография моей дочери Меган). Потом он создает прямоугольную форму и заполняет ее изображением. После этого на протяжении десяти кадров он применяет эффект наклона (skew), чтобы рисунок немного двигался.
Двигаемся дальше
Я лишь слегка коснулся того, что можно сделать с помощью библиотеки Ming. Один из аспектов, который я не упомянул в данной статье, - это интерактивная часть, где вы можете прикреплять простые сценарии к элементам. (Однако если вы задумали сложную Flash-анимацию и встает вопрос реализации интерактивности, то вам стоит задуматься об использовании Flash-инструментария для разработки анимации, которая сможет общаться с Web-сервисами в рамках вашего Web-приложения).
Еще одной опцией, о которой надо вспомнить, когда вы будете создавать более сложную Flash-анимацию, является использование авторских инструментов таких, как Adobe Flex или Laszlo. Оба инструмента поддерживают синтаксис XML для отображения пользовательского интерфейса Flash-анимации и предоставляют возможность простого создания сценариев JavaScript, которые обеспечат интерактивность интерфейса.
XML Chart и XML Gauge
Я был впечатлен еще двумя программами Flash SWF: XML Chart и XML Gauge, которые можно найти на сайте maani.us. Анимация упрощает поддержку динамических шкал и диаграмм на Web-сайте, просто создавая XML-страницы в PHP-приложении.
Сначала загрузите SWF-файл с сайта. Затем добавьте тег <object> на свою страницу и пропишите адрес источника данных для XML. Вы разработаете PHP-страницу, которая экспортирует XML в нужном вам формате. XML-форматы для таких анимаций хорошо задокументированы на сайте и их очень просто создавать.
Заключение
Flash дает возможность простым способом значительно повысить интерактивность Web-приложения. Начните с чего-нибудь маленького, например, с элементов управления типа виджета, которые недавно стали популярными. С программами XML Chart и XML Gauge вы можете опробовать такие типы Flash-виждетов до того, как потратите кучу времени на изучение Ming, Flex или Laszlo. Как бы то ни было, вам обязательно пригодится понимание возможностей Flash для повышения интерактивности PHP-приложений в Web 2.0.