Інтеграція 3D-галереї Piecemaker в тему WordPress

24

Від автора:

Цей підручник покаже вам, як успішно інтегрувати 3D флеш-ротатор зображення Piecemaker тему WordPress. Також ми обговоримо установку настроюваної панелі адміністрування, яка зробить супер легкої персональну налаштування роботи ротатора для користувачів.

Piecemaker – чудовий ротатор зображень 3D Flash з відкритим вихідним кодом, створений Бьорном Крюгером (Björn Crüger) з Modularweb.

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Інтеграція 3D-галереї Piecemaker в тему WordPress

Короткий огляд

Всі файли, включені в файл ZIP, для вас вже модифіковані. Ще ми включили папку, в якій знаходяться всі файли Piecemaker в первісному вигляді. Я раджу вам відзначитися на сайті Piecemaker і ознайомитися з ним до переходу назад до цього навчального посібника.

Крок 1. Модифікуйте ActionScript

Перший крок – модифікування ActionScript таким чином, щоб він добре взаємодіяв з WordPress. ActionScript, що поставляється з Piecemaker, визначає три значення, потрібні Piecemaker’у для правильного функціонування:

Джерело XML.

Джерело CSS.

Шлях до папки зображень.

Джерело XML визначає різноманітні установки Picemaker’а й дозволяє визначати зображення та їх опис. Файл CSS визначає стилі панелям характеристик Piecemaker’а, а каталог зображень говорить Piecemaker’, звідки отримувати зображення.

Відкрийте файл FLA під назвою «piecemakerNoShadow.fla» і відкрийте вікно дії (Actions). У рамці 1 ви побачите дії внизу. Будь ласка, зверніть увагу, що для відкриття вихідного файлу вам знадобиться Flash CS4.

Інтеграція 3D-галереї Piecemaker в тему WordPress

Для того, щоб Piecemaker правильно заробив в нашій темі WordPress, потрібно встановити ці змінні динамічно. Для цього ми використовуємо FlashVars. FlashVars – це змінні, які ми встановимо в своєму шаблоні сторінки WordPress, і які при завантаженні сторінки передадуться флеш-ролика. Далі, видаляємо дії за замовчуванням в першому кадрі флеш-файлу і замінюємо їх на наступний код:

stage.scaleMode = StageScaleMode.NO_SCALE;
// Pull in the Flashvars
// Set the required variables for piecemaker
piecemaker.xmlSource = String(allFlashVars.xmlSource);
piecemaker.cssSource = String(allFlashVars.cssSource);
piecemaker.imageSource = String(allFlashVars.imageSource);
piecemaker.dispatchEvent(new Event(«properties»));

Вищевказаний ActionScript спочатку завантажується в FlashVars, а потім замінює значення Piecemaker за замовчуванням на ці нові змінні. Наш файл Flash вже повністю підготовлений до запуску. Публікуємо SWF використовуючи який-небудь зручний FTP-клієнт.

Крок 2. Завантаження на сервер файлів і папок

Інтеграція 3D-галереї Piecemaker в тему WordPress

Наступний крок – завантаження на сервер необхідних файлів і папок в каталог теми WordPress. Цей підручник припускає, що ви будете вивантажувати все прямо в головний каталог теми. Ось список необхідних елементів:

piecemakerCSS.css

piecemakerNoShadow.swf

piecemakerXML.xml

папка ‘images’ (з зображеннями)

папка ‘swfobject’ (плюс вміст)

piecemakerXML.php (потрібен для використання з настроюваної панеллю адміністрування)

Крок 3. Підключення SWF і установка FlashVars

Наш наступний крок – вставити в свій шаблон сторінки WordPress ролик SWF. Ми використовуємо SWFObject 2 для вбудовування кліпу, а також визначимо три змінні FlashVars, згадувані в Кроці 1.

Спочатку потрібно послатися на swfobject в заголовку сторінки. Щоб це зробити, виберіть файл теми «header.php» в своєму улюбленому редакторі коду (мій — BBEdit) і додайте в початок сторінки наступний код: