Первая страница

Amazing Slider

создание HTML5 слайдеров
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

О программе

Amazing Slider – программа с оконным интерфейсом, в которой можно создавать разнообразные слайдшоу из изображений и видео, встраиваемые в красивые слайдеры (листалки) и публикуемые в сети интернет. Пользователь имеет богатый выбор шаблонов слайдера, переходов между слайдами и стилизации выбранного шаблона под свой дизайнерский вкус.

Amazing Slider - интерфейс

Создание проекта состоит из пяти шагов, которые четко соответствуют своим кнопкам на главном меню программы:

1. Слайды

Amazing Slider - слайды

На этом шаге пользователь добавляет в проект изображения и видеоролики, которые по его замыслу станут слайдами в его интернет-презентации. Картинки добавляются с диска. Видео добавляются с диска или с видеохостингов Youtube, Vimeo по ссылке. Выделенный слайд можно отредактировать: добавить его заголовок и описание, которые во многих шаблонах будут динамически выезжать при наступлении очереди этого слайда. Здесь же можно добавить гиперссылку для перехода куда-то с этого слайда. Здесь же можно настроить индивидуальное время показа слайда, отличное от общих настроек...

Интересная опция для гиперссылки - её можно открыть в так называемом Lightbox - это модальное окно с затенением вокруг него в пределах текущей страницы. Размер Lightbox регулируем. В Lightbox открываются только статические изображения.

В верхней области окна есть поля для задания размера окна слайдера, именно слайдера, а не отдельного слайда.

2. Темы

Amazing Slider - темы

Самая интересная настройка, особенно, для новичков. Здесь пользователь выбирает шаблон для своего слайдера. Шаблонов много, а настроек у каждого шаблона еще больше. Здесь мне запомнился шаблон MediaGallery - он позволяет создавать галереи (альбомы). В двух других конструкторах HTML5-слайдеров, представленных в нашей подборке (см. список в конце статьи), именно галереи нет.

В окне тем шаблон не только выбирается, но и редактируется при желании. Погуляйте по закладкам Эффекты, Навигация, Элементы управления... Разбегутся глаза. На закладке CSS можно написать свои стили, если знаете синтаксис CSS и классы элементов слайдера. Так, например, можно изменить цвет фона страницы слайдера на темно-серый: body {background-color:#333;}

3. Переходы

Amazing Slider - переходы

Здесь настраиваются анимационные переходы между слайдами. Во-первых, можно выбрать сам тип перехода, во-вторых, открыть настройки это типа и их отъюстировать. Если вы поставите галочки напротив нескольких типов перехода, то все они будут применяться во время работы слайдера по случайному выбору.

Ограничение: не CSS переходы применимы только к статическим картинкам, 3d переходы нельзя увидеть в окне просмотра программы, а можно только в браузере после публикации. Видео, кстати, тоже, в самой программе не проигрывается.

4. Настройки

Amazing Slider - настройки

Здесь много настроек, касающихся поведения слайдера. Я, например, сразу снимаю галочку "Автозапуск слайдшоу" (чтобы слайды не переключались сами по таймингу), потому что, как правило, пользователь должен картинку/видео рассмотреть и руководить переходом к следующему слайду сам. И ставлю галочку "Автозапуск видео", чтобы после переключения слайда видеоролик запускался уже без дополнительной кнопки.

С этим окном у меня небольшой баг - по высоте окно не помещается в мой экран и кнопка OK внизу не видна. Тогда я после изменений каких-то настроек это окно открываю на весть экран (средней кнопочкой вверху справа) и кнопка OK появляется.

5. Публикация

Amazing Slider - публикация

В этом окне выбирается путь для экспорта HTML5 файлов. И здесь тоже можно задать цвет фона страницы, который замещает цвет фона, добавленный в окне "Темы" на закладке CSS. Также можно ваш проект можно конвертировать в плагин к одной из самых популярных CMS: WordPress, Joomla или Drupal.

Скачать

📥 Скачать портабельную версию Amazing Slider для всех версий Windows.
📥 Скачать версию Amazing Slider для Mac (dmg-файл).
📕 Почитать справки и приемчики по работе с программой, на английском.
📺 Посмотреть видео по работе в Amazing Slider для новичков (под скрипучую музыку без слов, даже английских).


Ещё статьи для вебмастеров, расширяющие технологический кругозор:
Памятка начинающему вебмастеру
Как работать с Flash в современное время
Спецсимволы HTML - коды около 2000 дизайнерских иконок
Blumentals WeBuilder - удобнейший редактор кода с предпросмотром
WYSIWYG Web Builder - мощный визуальный конструктор сайтов
RocketCake - лаконичный визуальный конструктор сайтов
Pinegrow - стильный визуальны конструктор сайтов
Lunacy - для макетирования интернет-страниц
Flip PDF - конвертор PDF документов в HTML5 приложение
Hi Slider - программа для создания продвинутых jQuery слайдеров
WOW Slider - программа для создания красивых HTML5 слайдеров
Moodle - практика администратора СДО
MediaWiki - как использовать для ведения и хранения документации
MediaWiki - как скачивать Wiki-страницы в PDF
MediaWiki - как подсвечивать синтаксис программного кода
Nicepage - конструктор сайтов и тем для CMS
PowerPoint в HTML5 - обзор софта конвертации
SVG - как сделать анимацию линии (имитацию рисования)
TimelineJS - библиотека для хронологических лент
TurboSite - лаконичный конструктор многостраничных сайтов
HTTP - коротко о протоколе
OpenAPI - спецификация, визуализация, инструментарий
Camtasia Studio = видеоредактор + видеограббер
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Индекс цитирования сайта - что это?
Как создать интерактивный кроссворд на сайте?
Новости
От рекламы не скрыться
Молодому дизайнеру книга
Как стать дизайнером с нуля
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь