(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

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

Джек Ди Геррингтон

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

                
<?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
Пример 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

                
<?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
Файл text.swf

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

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

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

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

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

Листинг 4. Line.php

                
<?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. Вращающаяся линия

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



 Распечатать »
 Правила публикации »
  Обсудить материал в конференции Дискуссии и обсуждения общего плана »
Написать редактору 
 Рекомендовать » Дата публикации: 02.03.2008 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
SmartBear Collaborator - Named User License (Includes 1 Year Maintenance)
ZBrush 4R6 Win Commercial Single License ESD
Комплект Dr.Web «Универсальный», 1 год, 5 ПК
EMS SQL Management Studio for InterBase/Firebird (Business) + 1 Year Maintenance
Microsoft Office 365 для Дома 32-bit/x64. 5 ПК/Mac + 5 Планшетов + 5 Телефонов. Подписка на 1 год.
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
CASE-технологии
СУБД Oracle "с нуля"
Новые материалы
Программирование на Visual Basic/Visual Studio и ASP/ASP.NET
Мастерская программиста
3D и виртуальная реальность. Все о Macromedia Flash MX.
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Пишу программы на заказ профессионально (2183)
Пишу программы на заказ на языках Pascal (численные методы, списки, деревья, прерывания) под...
 
Пишу программы на заказ для студентов (176)
Пишу для студентов на с, с++, паскаль в средах ms visual studio, qt, builder, borland c, delphi....
 
Ищу программиста для написания программы (15)
Ищу программиста ,владеющего Вижуал Бэйсик и программированием в Экселе, для написания...
 
И я там был (2)
И я там был, мед пиво пил, по усам текло, а в рот не попало.
 
Пишу программы на Lazarus (19)
Предлагаю разработку программ на заказ. Примеры программ: www.itproportal.ru
 
 
 



    
rambler's top100 Rambler's Top100