zol_osпосмотреть оригинал

Как вставить 3D флеш галерею без специальных программ на вашу открытку.Эту осеннюю открытку мы сделали на МАСТЕР-КЛАССЕ "Золотая осень" в самом простом бесплатном конструкторе SharePoint Designer 2007. Это обыкновенный html-редактор, в котором можно создавать html-страницы.

Музыкальная открытка - это такая же  html-страница. Преимущество данного редактора в том, что кроме самого кода страницы вы видите, как страница будет отображаться в браузере. Поэтому не обязательно разбираться во всех этих кодах, достаточно иметь о них общее представление.

Мы воспользуемся готовым шаблоном.  Для этого скачайте папку karusel_3d.

Распакуйте ее и перенесите из нее в свою папку с открыткой все файлы кроме файла shablon.html:

karusel_3D_12

Чтобы одновременно выделить несколько папок или файлов необходимо зажать клавишу Ctrl.

Из файла shablon.html мы будем переносить части кода в нашу открытку. Самое главное понимать, что необходимо скопировать и куда вставить.

3D флеш галерея это  скрипт, который вставляется в виде кода в вашу открытку. Кроме кода нам понадобятся изображения, которые находятся в папке images. Названия этих изображений прописаны в документе default.XML:

karusel_3D_01Открыть этот документ можно, как  с помощью SharePoint Designer:

karusel_3D_04А также,  как самый обыкновенный текстовый документ:

karusel_3D_05

Для того, чтобы в 3D флеш галерее отобразились те изображения, которые вы хотите, либо загрузите в папку images изображения с такими же названиями, которые уже есть в папке, либо загрузив свои изображения в эту папку с другими названиями, пропишите эти названия в файле default.XML.

Обратите внимание на расширение файла которое прописано в документе default.XML:

karusel_3D_03В данном случае расширение у всех файлов PNG. Если у вас изображения с другим расширением, например jpg, правильно пропишите все это в документе default.XML, либо поменяйте само расширение в изображениях.

Также при загрузке изображений обратите внимание на размер самих изображений. в данном случае их размер: 400х267 px. Можете сделать их немного крупнее. Не забывайте. что размер самой флеш, которая прописана в коде: 750x500.

Вы можете уменьшить или увеличить количество изображений в карусели, добавив или удалив изображения из папки images. Главное, пропишите добавленные изображения в файле default.XML:

karusel_3D_06

После этого переходим к самой открытке. В него мы будем переносить код по частям из  файла shablon.html. Откройте его с помощью SharePoint Designer и скопируйте в html код вашей открытки (в моем случае это index.html) строчку   между <head></head> :

 <script type="text/javascript" src="swfobject.js"></script>

 

и вставьте ее также между этими тегами в своей открытке:

karusel_3D_07(можно просто перед закрывающимся </head>

karusel_3D_08

 Перед закрывающимся тегом </bodi> необходимо скопировать и вставить в вашу открытку следующую часть кода:

<script type="text/javascript">
swfobject.embedSWF("Flip.swf", "flip1", "750", "500", "10.0.0", false, {xmlfile:"default.xml", loaderColor:"0x666666"}, {wmode: "transparent"});
</script>

 

karusel_3D_09

karusel_3D_10

Теперь остается скопировать последнюю часть кода - контейнер с каруселью, который находится между тегами <div></div>:

<div class="flip_container">
<div id="flip1">
</div>
</div>

Его необходимо вставить в ту часть открытки, где вы хотите разместить саму 3D флеш галерею. Я решила его поместить сразу после названия:

karusel_3D_14

Сохраняем наш файл html, нажимаем предпросмотр, и если все сделано правильно, наслаждаемся просмотром. Что интересно, это флеш-анимация управляется курсором - ее можно замедлить или заставить крутиться в другую сторону!

По этому же принципу вы можете сделать другую 3D флеш галерею.

karusel_3D_15

Вот как она будет выглядеть: https://internet-ledi.ru//osen

Принцип переноса тот же. Также переносятся файлы и добавляется код в открытку. Скачать шаблон 2 варианта карусели можно ЗДЕСЬ.

Только первую часть кода между тегами <head></head> необходимо скопировать из файла sablon2.html вместе со стилем, иначе эта карусель не будет отображаться (в первом случае тоже был стиль, я его убрала и это никаким образом не отобразилось на открытке):

<script type="text/javascript" src="swfobject.js"></script>

<style type="text/css">
html, body {

}
.carousel_container {
width: 750px;
height: 500px;
}
</style>

karusel_3D_16

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

Хочу напомнить, что осенний марафон только набирает обороты, судя по тому,  что участники только начинают добавляться. Вы тоже можете стать участником конкурса на лучшую музыкальную открытку -

parad_otkr450

https://internet-ledi.ru//zolotaya_osen/marafon.html

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Авторизация на сайте
Анимированные фоны
Магазин
katalog
plus_i_minus4
turbobanner220
Как спасти от краха свой онлайн бизнес
Подпишись на новости сайта: