Динамическое создание Flash-анимации с помощью PHP

Использование библиотеки Ming для динамического создания Flash-анимаций

Многофункциональные интернет-приложения (Rich Internet Applications) - это новый модный термин для Web 2.0, а ключевым компонентом всего Web 2.0 является Adobe Flash. Научитесь интегрировать Flash-анимацию в свои приложения и создавать Flash-анимацию динамически с помощью библиотеки Ming.

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.

Листинг 2. Hello.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, который состоит из двух частей: первый текст из маленького становится больше и больше, а второй остается статичным.

Листинг 3. Text.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).

Рисунок 2. Файл text.swf

Сначала текст "1000" довольно маленький - 350 точек. Затем я использую метод scaleTo(), чтобы увеличить его до 750 точек. Для этого я использую метод nextframe() на анимационном объекте.

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

Если вы заметили, у меня есть одна переменная, $pt, которая содержит текст "1000." Я получаю новый объект $pts из метода add(), когда добавляю переменную $pt к анимации. Этот объект является SWFDisplayItem-объектом, ккоторый представляет экземпляр данного спрайта. Теперь я могу двигать этот экземпляр по поверхности анимации покадрово. Возможно, вас немного запутает то, что у меня может быть несколько версий спрайта текста "1000" или спрайта текста "points", которые могут двигаться одновременно.

В начало

Нарисуем картинку

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

Листинг 4. Line.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, добавил несколько движений пера и линий. Затем присоединил этот спрайт-форму к анимации.

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

Листинг 5. Вращающаяся линия

 
$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. Использование изображения

 
$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.

Ресурсы

Научиться

Оригинал статьи Generate Flash movies on the fly with PHP (EN).
Adobe Systems - сайт для всего, что связано с Flash.(EN)
Документацию по библиотеке Ming можно найти на сайте PHP.(EN)
В статье "Ajax-слайдшоу с помощью DHTML и XML" (EN) показано, как создать слайдшоу с помощью DHTML и Ajax.(EN)
maani.us - сайт, где вы найдете XML Chart и XML Gauge.(EN)
Стандарт ECMAScript описывает интерпретатор языка сценариев ECMAScript в среде исполнения Flash.(EN)
Расширьте свои навыки в PHP, изучив PHP-проектов на сайте IBM developerWorks.(EN)
Посмотрите все темы, посвященные PHP на сайте developerWorks.
Посетите раздел Open source на сайте developerWorks, где вы найдете множество информации о методах, инструментах и обновлениях продуктов, которые помогут вам применять технологии с открытым кодом и использовать их вместе с продуктами IBM.
С техническими новостями, мероприятиями и Web-трансляциями на сайте developerWorks вы всегда будете в курсе событий.(EN)
Посетите книжный магазин Safari, где вы найдете массу информации по технологиям с открытым кодом.
developerWorks предлагает интересные аудио-интервью и дискуссии для разработчиков программного обеспечения.(EN)