Дипломная работа: Технічне створення Web-додатків
JavaScript-сценарий:
Взаємодія з елементами Web-сторінки
Створено набір базових засобів для написання Ajax-додатків, що реалізує запропонований підхід.
4. Створення flash-анімації за допомогою програми SWISHMAX
Програма SWISHMAX - це відносно нова розробка австралійської компанії SWiSHzone. Вона є розширеною версією програми Swish2, яка вже встигла завоювати популярність серед користувачів у всьому світі (тим паче, що перша версія цієї програми розповсюджувалася безкоштовно). Перевагою цієї програми можна вважати, перш за все, простоту використання.
Навіть непідготовлений користувач за короткий час зможе створити з її допомогою професійні флеш-роліки.
SWISHMAX має всі кращі якості Swish2 і при цьому володіє великою кількістю додаткових опцій - додатковими інструментами для малювання (AutoShapes), можливістю створення скриптів і їх відладки, величезних кількістю нових ефектів (більше 200), що настроюються, покращуваними опціями експорту. Випробувати програму в роботі може будь-який охочий, викачавши її дистрибутив розміром близько 9 Мб.
Програма повністю функціональна протягом 15 днів.
Ці теги також указують висоту і ширину вікна програвача Flash Player - 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), щоб малюнок небагато рухався.
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
