Флеш галерея на сайт или как создать флеш галерею быстро и бесплатно

Флеш галерея на сайт или как создать флеш галерею быстро и бесплатно.

Друзья, как обещал рассказываю, как я сделал флеш галерею для своего старого сайта, может кому пригодится:). Обращаю внимание, что материал «флеш галерея на сайт» уже устарел, вместе с технологией flash, но если очень хочется красоты, то в путь, предложенный методика полностью рабочая.

На мой взгляд, сейчас же актуальнее grid фотогалереи заточенные для просмотра на мобильных устройствах с поддержкой jquery и всевозможные lightbox. На такие технологии я и перевел свой новый фотоблог Креативная фотосъемка профессионально , чего и Вам желаю, потому что это удобнее в первую очередь мне.

Перечислю, почему не надо делать такую flash галерею для сайта или недостатки флеш-галерей для сайта:

• Достаточно трудоемко заливать и обновлять фотографии;
• Флеш галерея «плохо» индексируется в поисковиках (очень серьезный недостаток, кому нужно раскручивать сайт). Сейчас многие поисковики умеют вытаскивать текст из flash, но никакой автоматизации и софта для импорта данных из exif фотографий я не нашел (все ручками);
• Многие движки Flash галерей кривые при внешней привлекательности. Из того, что я попробовал, многие зависают при больших объемах фото, например, одна флеш галерея на сайт, объемом всего на несколько сотен фотографий сожрала всю выделенную на хостинге процессорную мощнось и стала тормозить страшно, а была удобная.
• Пользователю для просмотра нужно иметь Adobe flash Player (www.adobe.com/products/flashplayer.html есть почти у всех, но бывают исключения);
• Частенько проблемы с русским языком (проявлялось в разных браузерах, в зависимости от версии).

Достоинства флеш галереи и они есть?

• Красивая и симпатичная;
• Удобная для пользователя;
• Есть возможность побороться с пиратством своего контента, кому это надо.Что нужно для создания флеш-галереи?

flash галерея для сайта

Что нужно для создания флеш галереи?

• Хостинг для фотографа (~15$/год) (Желательно платный, не российский с живой техподдержкой, подойдет конечно и бесплатный narod.ru на безрыбье). Какой хостинг посоветовать? Я попробовал несколько, пока остановился на питерском https://beget.ru — удобно и быстро. Ну и когда место закончится приглядел безлимитный американский
• Зарегистрировать имя сайта, например malexeum.com :) (~20$/год);
• Отобрать красивые фотографии (у меня это был самый долгий этап с моим 500+ гиговым архивом и подойти надо со всей ответственностью);
• Выбрать движок флеш гареи, например simpleviewer.net (5+ бесплатных красивых, быстрых и удобных галерей с возможность демо просмотра . Что касается flash галереи SimpleViewer, то ограничения бесплатной версии: до 50 фотографий в одной галереи, нет встроенных разделов и категорий (как добавлять разделы — читайте ниже), маленький логотип simpleview внизу. Надо сказать расширенная версия галереи стоит довольно дешево, всего 45$;
• Понадобится программа (Фотошоп, Пикаса, Лайтрум) для автоматического создания флеш галереи (использует скрипт движка), я использовал фотошоп CS4, cs5, CS6. Кстати можно использовать кросс платформенное приложение svbuilder (https://www.simpleviewer.net/simpleviewer/pro/support/svbuilderpro/).

Поехали (подробная инструкция по созданию веб-галереи):

• Отобрали фотографии по категориям в отдельные папки;
• В Фотошопе Командой image-imagу size изменили размер фотографий до 500...800 пикселей. Поступили так со всеми фотографиями командой Automate-Batch фотошопа;
• В Adobe Bridge разложили фотографии категории в нужном порядке;
• Командой Tool-Batch rename изменили имена файлов (имена на английском!);
• Тут же в Adobe Bridge c помощью команды Tool-Replace metadata удобно прописать параметр Title и ключевые слова для фотографий;
• Скачали (https://www.simpleviewer.net/simpleviewer/support/photoshop_script.html) и установили скрипт для автоматического создания флеш галереи (В фотошопе он запускается File-Scripts-SimpleView;
• Старт и Финиш.

Скрипт SimpleViewer очень простой. Выбрали папку с исходными картинками (не больше 50), папку для готовой галереи, название галереи, размер фотографий в веб-галереи, цвет фона, тип галереи и вид кнопочек, число столбцов и строк, толщину рамки, место расположения меню.
Build !!!. ж-ж-ж-ж... 30 секунд и все готово.

Мы имеем готовую флеш галерею для сайта, которая состоит:

• первой страницы галереи index.html;
• папки IMAGES с фотографиями;
• папки thumbs с маленькими превьюшками;
• файла gallery.xml (список фотографий и путь к ним в формате: <image imageURL="images/pic01.jpg" thumbURL="thumbs/pic01.jpg" linkURL="« linkTarget=»" ><caption>Название фоточки</caption>;
• ну и файл SWF  (Кстати если, что то не работает, или фотографии в виде темных экранов, добавьте в папку с галереей файл simpleviewer.swf, может помочь);

Запускаем index.html и любуемся как красиво работает флеш галерея для сайта. Но у нас будет всего одна категория фотографий и ограничение в 50 фотографий.

Делаем категории флеш галереи.

Для создания категорий надо просто модифицировать файл index.html. А так же выполнить следующие действия:

• Для каждая категории создается своя флеш галерея и она должна находиться в своей папке.
• Все ссылки на категории прописываются в файле index.html, он будет одинаковый для каждой из категорий:

<body>
<div id="header" >
<a href = «https://malexeum.com/index.php»>Главная</a> | <a href = «.../Concept/index.html»>Концепт</a> |<a href = «.../Nature/index.html»>Природа</a> | <a href = «.../Predmetka/index.html»>Предметы</a> | <a href = «.../food/index.html»> Еда </a> | <a href = «.../Reportage/index.html»>Репортаж</a> | <a href = «.../corporate/index.html»>Корпоративы</a> | <a href = «.../Interior/index.html»>Интерьеры</a> | <a href = «.../arhi/index.html»>Архитектура</a> | <a href = «.../Extreme/index.html»>Экстрим</a> | <a href = «.../Dance/index.html»>Танцы</a> | <a href = «.../Portrait/index.html»>Портрет</a> | <a href = «.../Moda/index.html»>Мода</a> | <a href = «.../Models/index.html»>Модели</a> | <a href = «.../vip/index.html»>Персоны</a> | <a href = «.../Kids/index.html»>Дети</a> | <a href = «.../Wedding/index.html»>Свадьбы</a>
</div>

Для тех кому в новинку создавать html страничку (как было мне, например), можно скачать готовую мульти-галерею с категориями. Надо поменять только путь к папке с файлами ( <a href = «.../new/index.html»>Новая галерея</a>) и добавить еще категорий ( <a href = «.../new2/index.html»>Еще одна галерея</a>).

Настраиваем русский язык.

Разные браузеры по разному относятся к русскому языку, да и SimpleView заточен больше под английский и уже поменял несколько версий. Мне, чтобы победить кракозябры потребовалось:

• Во всех файлах index.html («Content-Type» content="text/html; charset=UTF-8") прописать кодировку UTF-8;
• открыть файл gallery.xml в блокноте  Notepad++ и сохранить (Файл-сохранить как-Кодировка UTF-8 без BOM)!

В конце для удобства я сделал еще простую общую страничку «ПОРТФОЛИО» — табличку со ссылками на каждую из флеш галерей на сайте https://malexeum.com/old/portfolio.php:

Вот и все у нас готова симпатичная и бесплатная флеш галерея для прекрасных фотографий, осталось загрузить готовые галереи на наш хостинг в папку public.htm, используя любой ftp клиент.

Есть вопросы — уточнения — улучшения, пишите например в фейсбуке на страничке malexeumphoto. Этой статье уже 10 лет и она немного устарела, есть гораздо лучше оптимизированные темы для фотографов в вордпресс.

Почитать другие статьи по теме «Креативная фотосъемка профессионально»: Статьи и уроки по фотосъемке.