Технічне створення Web-додатків (стр. 7 из 9)

При використанні класичного методу взаємодії у Web PHP скрипт має генерувати усю сторінку і відправляти її клієнту.

При використанні механізмів взаємодії у Web 2.0 скрипт має 2 режими роботи:

· виконання потрібних дій, генерація сторінки та відправлення її клієнту в форматі HTML (як у класичному методі) — якщо браузер користувача не має підтримки JavaScript та Java Апплетів або це ініціалізація web-програми.

· виконання потрібних дій, генерація лише тієї частини сторінки, що змінилася та відправлення її клієнту в форматі XML, JSON та подібних — якщо відбувається взаємодія за допомогою технології Ajax.

При використанні другого методу взаємодії навантаження на сервер та трафік між сервером та клієнтом зменшується, а реакція користувацького інтерфейсу та зручність роботи з Web-програмою — збільшується.

В цілому web-програма функціонує добре в будь-якому браузері, відгук на дії користувача та взаємодія між сервером та клієнтом відбувається досить швидко (завдяки швидкій роботі Java Апплету). Але основна перевага розробленої web-програми в тому, що її можна розширювати за допомогою зручних засобів розробки на мові Java.

Розроблений базовий набір засобів є доволі простим але він ефективно виконує взаємодію web-програми з сервером.

В рамках даної роботи запропонований новий підхід до створення Ajax-додатків, що полягає в застосуванні поруч з JavaScript-сценариями Java-аплетів. Задачі розподіляються так.

Java-аплет:

Обчислення, що потребують багато часу

Складні в реалізації алгоритми

Засоби асинхронної обробки даних

JavaScript-сценарий:

Взаємодія з елементами Web-сторінки

Створено набір базових засобів для написання Ajax-додатків, що реалізує запропонований підхід.

4. Створення flash-анімації за допомогою програми SWISHMAX

Програма SWISHMAX - це відносно нова розробка австралійської компанії SWiSHzone. Вона є розширеною версією програми Swish2, яка вже встигла завоювати популярність серед користувачів у всьому світі (тим паче, що перша версія цієї програми розповсюджувалася безкоштовно). Перевагою цієї програми можна вважати, перш за все, простоту використання.

Навіть непідготовлений користувач за короткий час зможе створити з її допомогою професійні флеш-роліки.

SWISHMAX має всі кращі якості Swish2 і при цьому володіє великою кількістю додаткових опцій - додатковими інструментами для малювання (AutoShapes), можливістю створення скриптів і їх відладки, величезних кількістю нових ефектів (більше 200), що настроюються, покращуваними опціями експорту. Випробувати програму в роботі може будь-який охочий, викачавши її дистрибутив розміром близько 9 Мб.

Програма повністю функціональна протягом 15 днів.

Ці теги також указують висоту і ширину вікна програвача FlashPlayer - 550 і 400 пікселів відповідно. Важливо відзначити, що графіка в Flash-анімації векторна. Це означає, що при використанні Flash-команд для малювання ліній і тексту, відповідні елементи зберігаються як координати і масштабуються відповідно до розміру вікна програвача.

У Flash-анімації своя власна система координат, яку ви можете використовувати на свій розсуд для оптимізації коду.

4.1 Бібліотека Ming

Перший метод використання Flash-анімацій, представлений в цій статті, полягає в динамічному створенні анімацій за допомогою бібліотеки Ming. Бібліотека Ming - це PHP-бібліотека з набором об’єктів, які відповідають типам даних в SWF-анімації: спрайт (sprites), форми, текст, растрові малюнки і т.д.

Приклади роботи програм - Динамічне створення Flash-анімації за допомогою PHP pdesign.com.ua Я не розповідатиму в цій статті, як збирати і інсталювати Ming, тому що цей процес не є простим і залежить від платформи. (див. Ресурси). Для роботи з цією статтею я використовував заздалегідь скомпільоване розширення бібліотеки php_ming.dll для Windows-версії PHP.

Треба відзначити, що Ming до цих пір знаходиться у стадії розробки. На момент написання статті поточна версія бібліотеки - V0.4, і деякі команди з ранніх версій не працюють в пізніших версіях. У даній статті я використовував версію V0.4, тому вам знадобиться та ж версія, щоб використовувати цей код.

Запустивши цей код з командного рядка, ви отримаєте файл hello.swf. Я відкриваю цей файл в своєму Web-браузере і бачу результат (див. рисунок 1).

Рис.1. Приклад HelloWorld з використанням Ming

Повертаючись до коду, перше, що я роблю - створюю покажчик на вбудовані шрифти (_sans), потім я створюю текстове поле, встановлюю його шрифт, колір і розмір, а також задаю його значення (”Hello World”). Потім я створюю об’єкт SWFMovie і задаю його розміри. Нарешті я додаю цей текстовий елемент до анімації і зберігаю анімацію у файл.

Як альтернатива безпосередньому створенню файлу можна виводити результуючу SWF-анімацію як сторінку, використовуючи замість методу save даний код

header( ‘Content-type: application/x-shockwave-flash’ )

$m->output( )

Приклади роботи програм - Динамічне створення Flash-анімації за допомогою PHP pdesign.com.ua

Цей процес схожий на створення растрових малюнків з використанням бібліотеки ImageMagick в рамках PHP. Я використовуватиму метод save для всіх прикладів з Ming, проте ви можете робити, як вам зручніше.

В початок

Примусимо текст рухатися

Просто поміщати текст в Flash-анімацію безглуздо, краще примусити його рухатися. Для цього я об’єднаю приклад з лістингу 2, який складається з двох частин: перший текст з маленького стає більше і більше, а другою залишається статичним.

Лістинг1. 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 );

$m->save( ‘line.swf’ );

?>

Я запускаю цей сценарій з командного рядка, дивлюся на отриманий .swf-файл і бачу зображення як на малюнку 3.

Рис.2. Малювання простої лінії

Досить просто і не дуже цікаво. Що ж я зробив? Я створив новий об’єкт SWFShape, додав декілька рухів пера і ліній. Потім приєднав цей спрайт-форму до анімації.

Щоб стало цікавіше, я використовую той же тип кадрової анімації, як з текстом. Але в цьому випадку я обертатиму лінію навколо центру анімації за допомогою коду, показаного нижче.

Лістинг 2. Лінія , що обертається

<?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 );

Приклади роботи програм - Динамічне створення Flash-анімації за допомогою PHP pdesign.com.ua $m->nextframe();

}

$m->save( ‘rotate.swf’ );

?>

В даному випадку я малюю лінію від крапки з координатами -100, -100 до 100, 100, так щоб центр лінії був розташований в крапці 0,0. Таким чином, коли я обертаю форму, обертання відбувається навколо центру лінії.

Додаючи форму до анімації, я рухаю об’єкт SWFDisplayItem, який повертається в центр кадру. Потім я його обертаю за допомогою методу rotate() і збільшую кадр в кожен момент часу.

Використання малюнків

Текст і основні векторні примітиви, такі, як лінії, кола, дуги, криві і прямокутники, - це все чудово, проте добре б мати доступ до зображень нашої Flash-анімації. На щастя, бібліотека Ming спрощує використання зображень, як ви можете бачити:

Лістинг 3. Використання зображення

<?php

$img = new SWFBitmap( file_get_contents( ‘megan.jpg’ ));

$s = new SWFShape();

Створення flash-анімації за допомогою програми SWISHMAX4. Створення flash-анімації за допомогою програми SWISHMAX1.

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

Рис.3. Анімація із зображенням

Приклади роботи програм - Динамічне створення Flash-анімації за допомогою PHP pdesign.com.ua

Цей сценарій починає роботу з читання локального .jpeg-файла (в даному випадку фотографія моєї дочки Меган). Потім він створює прямокутну форму і заповнює її зображенням. Після цього впродовж десяти кадрів він застосовує ефект нахилу (skew), щоб малюнок небагато рухався.

Я лише злегка торкнувся того, що можна зробити за допомогою бібліотеки Ming. Один з аспектів, який я не згадав в даній статті, - це інтерактивна частина, де ви можете прикріплювати прості сценарії до елементів. (Проте якщо ви задумали складну Flash-анімацію і встає питання реалізації інтерактивності,, то вам варто задуматися про використання Flash-інструментарію для розробки анімації, яка зможе спілкуватися з Web-сервісами в рамках вашого Web-додатку).

Ще однією опцією, про яку треба пригадати, коли ви створюватимете складнішу Flash-анімацію, є використання авторських інструментів таких, як Adobe Flex або Laszlo.

Обидва інструменти підтримують синтаксис XML для відображення призначеного для користувача інтерфейсу Flash-анімації і надають можливість простого створення сценаріїв JavaScript, які забезпечать інтерактивність інтерфейсу.

XMLChart і XMLGauge

Я був вражений ще двома програмами FlashSWF: XMLChart і XMLGauge, які можна знайти на сайті maani.us (див. Ресурси). Анімація спрощує підтримку динамічних шкал і діаграм на Web-сайті, просто створюючи XML-сторінки в PHP-додатку.

Приклади роботи програм - Динамічне створення Flash-анімації за допомогою PHP pdesign.com.ua