От автора:
Этот учебник продемонстрирует вам, как успешно интегрировать 3D флэш-ротатор изображения Piecemaker в свою тему WordPress. Также мы обсудим установку пользовательской панели администрирования, которая сделает супер легкой персональную настройку работы ротатора для пользователей.
Piecemaker – великолепный ротатор изображений 3D Flash с открытым исходным кодом, созданный Бьорном Крюгером (Björn Crüger) из Modularweb.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Краткий обзор
Все файлы, включенные в файл ZIP, для вас уже модифицированы. Еще мы включили папку, в которой находятся все файлы Piecemaker в первоначальном виде. Я советую вам отметиться на сайте Piecemaker и ознакомиться с ним до перехода обратно к этому учебному пособию.
Шаг 1. Модифицируйте ActionScript
Первый шаг – модифицирование ActionScript таким образом, чтобы он хорошо взаимодействовал с WordPress. ActionScript, поставляемый с Piecemaker, определяет три значения, нужные Piecemaker’у для правильного функционирования:
Источник XML.
Источник CSS.
Путь к папке изображений.
Источник XML определяет разнообразные установки Picemaker’а и позволяет определять изображения и их описание. Файл CSS определяет стили панелям характеристик Piecemaker’а, а каталог изображений говорит Piecemaker’у, откуда извлекать изображения.
Откройте файл FLA под названием «piecemakerNoShadow.fla» и откройте окно действий (Actions). В рамке 1 вы увидите действия внизу. Пожалуйста, обратите внимание, что для открытия исходного файла вам понадобится Flash CS4.
Для того, чтобы Piecemaker правильно заработал в нашей теме WordPress, нужно установить эти переменные динамически. Для этого мы используем FlashVars. FlashVars – это переменные, которые мы установим в своем шаблоне страницы WordPress, и которые при загрузке страницы передадутся флэш-ролику. Далее, удаляем действия по умолчанию в первом кадре флэш-файла и заменяем их на следующий код:
|
1 2 3 4 5 6 7 8 9 10 |
stage.scaleMode = StageScaleMode.NO_SCALE; // Pull in the Flashvars var allFlashVars:Object = LoaderInfo(this.root.loaderInfo).parameters; // 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. Загрузка на сервер файлов и папок
Следующий шаг – загрузка на сервер требуемых файлов и папок в каталог темы WordPress. Этот учебник предполагает, что вы будете выгружать все прямиком в главный каталог темы. Вот список необходимых элементов:
piecemakerCSS.css
piecemakerNoShadow.swf
piecemakerXML.xml
папка ‘images’ (с изображениями)
папка ‘swfobject’ (плюс содержимое)
piecemakerXML.php (нужен для использования с пользовательской панелью администрирования)
Шаг 3. Подключение SWF и установка FlashVars
Наш следующий шаг – вставить в свой шаблон страницы WordPress ролик SWF. Мы используем SWFObject 2 для встраивания клипа, а также определим три переменные FlashVars, упоминавшиеся в Шаге 1.
Сначала нужно сослаться на swfobject в заголовке страницы. Чтобы это сделать, откройте файл темы «header.php» в своем любимом редакторе кода (мой — BBEdit) и добавьте в начало страницы следующий код:
|
1 |
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/swfobject/swfobject.js"></script> |
Далее откройте шаблон страницы WordPress, где вы хотели бы демонстрировать свой 3D ротатор Piecemaker, и вставьте следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="flashcontent"> <p>You need to <a href="//www.adobe.com/products/flashplayer/" target="_blank">upgrade your Flash Player</a> to version 10 or newer.</p> </div><!-- end flashcontent --> <script type="text/javascript"> var flashvars = {}; flashvars.xmlSource = "<?php bloginfo('template_url'); ?>/piecemakerXML.xml"; flashvars.cssSource = "<?php bloginfo('template_url'); ?>/piecemakerCSS.css"; flashvars.imageSource = "<?php bloginfo('template_url'); ?>/images"; var attributes = {}; attributes.wmode = "transparent"; swfobject.embedSWF("<?php bloginfo('template_url'); ?>/piecemakerNoShadow.swf", "flashcontent", "960", "610", "10", "<?php bloginfo('template_url'); ?>/swfobject/expressInstall.swf", flashvars, attributes); </script> |
Объяснение кода
Этот объем кода – просто стандартный код с swfobject, использующийся для вставки флэш в любую веб-страницу. То важное, что нас должно заинтересовать – это FlashVars:
|
1 2 3 |
flashvars.xmlSource = "<?php bloginfo('template_url'); ?>/piecemakerXML.xml"; flashvars.cssSource = "<?php bloginfo('template_url'); ?>/piecemakerCSS.css"; flashvars.imageSource = "<?php bloginfo('template_url'); ?>/images"; |
Заметьте, что мы назвали свои FlashVars так, как определили их в ActionScript в Шаге 4. К тому же мы пользуемся встроенной в WordPress функцией bloginfo() для ссылки на точное местонахождение трех нужных файлов.
Вот оно! Ну, как бы…
Вышеуказанные шаги дадут вам возможность успешно развернуть 3D ротатор изображений Piecemaker в своей теме WordPress, но мы-то хотим пойти еще дальше. В следующих шагах мы обсудим, как создать пользовательскую панель администрирования, позволяющую нам модифицировать установки Piecemaker’а прямо на сервере WordPress.
Если вы не интересуетесь установкой административной панели, можете перейти на вебсайт Piecemaker, прочесть документацию и начать делать действительно очень потрясную анимацию.
Шаг 4. Создайте панель администрирования
Мы не будем расписывать, как «с нуля» создается административная панель. Вместо этого предлагаем ознакомиться с очень подробным учебником здесь на Nettuts: Как создать лучшую панель WordPress.
После того, как вы установите свою панель администрирования согласно инструкциям указанного учебника, можно переходить к следующему шагу.
Шаг 5. Определите новую панель опций
Теперь нам нужно добавить дополнительные опции к панели администрирования, которую вы только что создали. Откройте файл темы «functions.php» и замените первый участок кода на следующий:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php $themename = "Nettuts"; $shortname = "nt"; $categories = get_categories('hide_empty=0&orderby=name'); $wp_cats = array(); foreach ($categories as $category_list ) { $wp_cats[$category_list->cat_ID] = $category_list->cat_name; } array_unshift($wp_cats, "Choose a category"); $tween_types = array("linear","easeInSine","easeOutSine", "easeInOutSine", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeOutInCubic", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeOutInQuint", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeOutInCirc", "easeInBack", "easeOutBack", "easeInOutBack", "easeOutInBack", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeOutInQuad", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeOutInQuart", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeOutInExpo", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeOutInElastic", "easeInBounce", "easeOutBounce", "easeInOutBounce", "easeOutInBounce"); |
Кусок вышеприведенного кода идентичен показанному в учебнике, но мы добавили новый массив с именем $tween_types. Этот массив содержит все разнообразные анимационные эффекты, доступные с помощью PieceMaker’а. Мы используем этот массив для формирования в своей пользовательской панели администрирования выпадающего списка разных анимационных эффектов. Можете просмотреть документацию Tweener для повторения визуализации многочисленных анимационных эффектов Piecemaker.
Кроме того, в файле functions.php добавьте следующий массив снизу тех, что вы уже создали в учебнике.
Таким образом, создается новая скользящая панель опций, подобная тем, что вы создали в учебном пособии. Это длинный участок кода, но он следует той же самой логике, что и учебник. Мы просто создаем переменные для всех возможных установок, которые нам придется определить в XML-файле Piecemaker’а. Важно обратить внимание на то, что мы постарались определить каждой опции значения по умолчанию (значения в ‘std’ – это значения по умолчанию). Для Piecemaker’а существует достойное количество установок, и нам не нужно заставлять своих пользователей устанавливать все эти опции, если они не хотят.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
array( "name" => "3D Rotator Options", "type" => "section"), array( "type" => "open"), array( "name" => "Segments", "desc" => "Number of segments in which the image will be sliced.", "id" => $shortname."_segments", "type" => "text", "std" => "9"), array( "name" => "Tween Time", "desc" => "Number of seconds for each element to be turned.", "id" => $shortname."_tween_time", "type" => "text", "std" => "3"), array( "name" => "Tween Delay", "desc" => "Number of seconds from one element starting to turn to the next element starting.", "id" => $shortname."_tween_delay", "type" => "text", "std" => "0.1"), array( "name" => "Tween Type", "desc" => "Type of animation transition.", "id" => $shortname."_tween_type", "type" => "select", "options" => $tween_types, "std" => "Choose a category"), array( "name" => "Z Distance", "desc" => "to which extend are the cubes moved on z axis when being tweened. Negative values bring the cube closer to the camera, positive values take it further away. A good range is roughly between -200 and 700.", "id" => $shortname."_z_distance", "type" => "text", "std" => "25"), array( "name" => "Expand", "desc" => "To which etxend are the cubes moved away from each other when tweening.", "id" => $shortname."_expand", "type" => "text", "std" => "9"), array( "name" => "Inner Color", "desc" => "Color of the sides of the elements in hex values (e.g. 0x000000 for black)", "id" => $shortname."_inner_color", "type" => "text", "std" => "0x000000"), array( "name" => "Text Background Color", "desc" => "Color of the description text background in hex values (e.g. 0xFF0000 for red)", "id" => $shortname."_text_background", "type" => "text", "std" => "0x666666"), array( "name" => "Text Distance", "desc" => "Distance of the info text to the borders of its background.", "id" => $shortname."_text_distance", "type" => "text", "std" => "25"), array( "name" => "Shadow Darkness", "desc" => "To which extend are the sides shadowed, when the elements are tweening and the sided move towards the background. 100 is black, 0 is no darkening.", "id" => $shortname."_shadow_darkness", "type" => "text", "std" => "25"), array( "name" => "Auto Play", "desc" => "Number of seconds to the next image when autoplay is on. Set 0, if you don't want autoplay.", "id" => $shortname."_autoplay", "type" => "text", "std" => "2"), array( "type" => "close"), |
Шаг 6. Обновите шаблон страницы
В этом шаге нам нужно слегка трансформировать шаблон страницы WordPress Шага 3. Вместо ссылки xmlSource на файл XML мы должны ссылать его на файл PHP. Используя файл PHP вместо файла XML, мы можем извлекать все значения, установленные пользователем в своей панели опций. Нужно заменить всего одну строку кода:
|
1 |
flashvars.xmlSource = "<?php bloginfo('template_url'); ?>/piecemakerXML.php"; |
Шаг 7. Сгенерируйте файл XML при помощи PHP
Мы почти закончили! В этом шаге мы создадим файл PHP, на который сослались в коде вверху. Этот файл PHP будет использован для извлечения всех значений из пользовательской панели опций и формирования файла XML, который нужен Piecemaker’у для должного функционирования. Код очень длинный, поэтому я попытаюсь разбить его на более удобоваримые части.
Создайте пустой файл PHP, назовите его «piecemakerXML.php» и вставьте в начало файла следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php require_once( '../../../wp-load.php' ); $segments = get_option('nt_segments'); $tweentime = get_option('nt_tween_time'); $tweendelay = get_option('nt_tween_delay'); $tweentype = get_option('nt_tween_type'); $zdistance = get_option('nt_z_distance'); $expand = get_option('nt_expand'); $innercolor = get_option('nt_inner_color'); $textbackground = get_option('nt_text_background'); $textdistance = get_option('nt_text_distance'); $shadow = get_option('nt_shadow_darknent'); $autoplay = get_option('nt_autoplay'); ?> |
Первая строка загружает WordPress в наш файл PHP. Это позволяет иметь доступ ко всем функциям WordPress по умолчанию, а также к любым значениям, хранимым в нашей базе данных.
Остальной код извлекает данные из пользовательской панели опций и сохраняет значения в переменных. Мы употребим эти переменные для генерации остальных установок Piecemaker’а.
Далее, нам нужно установить заголовок типа содержимого так, чтобы браузер знал, что мы собираемся вывести XML-контент, а не text/html, используемый по умолчанию. Мы также включим кое-какие первоначальные тэги установок Piecemaker.
|
1 2 3 4 5 6 7 |
<?php header("Content-type: text/xml"); echo '<?xml version="1.0" encoding="utf-8" ?> <Piecemaker> <Settings> <imageWidth>830</imageWidth> <imageHeight>360</imageHeight>'; |
Теперь мы выведем переменные, сохраненные нами в корректных тэгах XML и закроем тэг установок Piecemaker.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
echo '<segments>'. $segments . '</segments>'; echo '<tweenTime>'. $tweentime . '</tweenTime>'; echo '<tweenDelay>'. $tweendelay . '</tweenDelay>'; echo '<tweenType>'. $tweentype . '</tweenType>'; echo '<zDistance>'. $zdistance . '</zDistance>'; echo '<expand>'. $expand . '</expand>'; echo '<innerColor>'. $innercolor . '</innerColor>'; echo '<textBackground>'. $textbackground . '</textBackground>'; echo '<textDistance>'. $textdistance . '</textDistance>'; echo '<shadowDarknent>' . $shadow . '</shadowDarknent>'; echo '<autoplay>' . $autoplay . '</autoplay>'; echo ' </Settings> |
Последний шаг – вывод изображений, которые нам нужно включить в ротатор вместе с их характеристиками, а также мы закроем тэг XML Piecemaker’а.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<Image Filename="image1.jpg"> <Text> <headline>Description Text</headline> <break>Ӂ</break> <paragraph>Here you can add a description text for every single slide.</paragraph> <break>Ӂ</break> <inline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend.</inline> Ӂ<a href="//themes.5-squared.com/sansation/?style=cool_blue" target="_blank">hyperlinks</a> </Text> </Image> <Image Filename="image2.jpg"> <Text> <headline>Description Text</headline> <break>Ӂ</break> <paragraph>Here you can add a description text for every single slide.</paragraph> <break>Ӂ</break> <inline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend.</inline> Ӂ<a href="//themes.5-squared.com/sansation/?style=cool_blue" target="_blank">hyperlinks</a> </Text> </Image> <Image Filename="image3.jpg"> <Text> <headline>Description Text</headline> <break>Ӂ</break> <paragraph>Here you can add a description text for every single slide.</paragraph> <break>Ӂ</break> <inline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend.</inline> Ӂ<a href="//themes.5-squared.com/sansation/?style=cool_blue" target="_blank">hyperlinks</a> </Text> </Image> <Image Filename="image4.jpg"> <Text> <headline>Description Text</headline> <break>Ӂ</break> <paragraph>Here you can add a description text for every single slide.</paragraph> <break>Ӂ</break> <inline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend.</inline> Ӂ<a href="//themes.5-squared.com/sansation/?style=cool_blue" target="_blank">hyperlinks</a> </Text> </Image> </Piecemaker>'; ?> |
Заключение
Надеюсь, из этого учебного пособия вы узнали что-нибудь полезное. Комбинируя многочисленные технологии, мы можем добавить основам своего WordPress мощной функциональности. Что более важно, модифицирование основы под свои требования теперь легко сделает и неискушенный пользователь.
Автор: Sean Corey
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: //net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (12)