Редактор

В редакторе черновик превращается в готовое демо. Здесь можно проверить шаги, переименовать сцены, поправить подсказки, скрыть чувствительные данные, настроить внешний вид, сохранить изменения, открыть предпросмотр и поделиться результатом.

Верхняя панель

• Поле названия меняет имя черновика.
• Переключатель режима показывает либо редактирование, либо предпросмотр.
• Сохранить фиксирует текущие изменения. Пока черновик не менялся или уже сохранён, кнопка неактивна.
• Поделиться открывает публичную ссылку, приватную ссылку, код вставки и скачивание видео/GIF.

В режиме предпросмотра часть кнопок скрывается, чтобы не мешать проверке демо глазами зрителя.

Если участник открыл проект, который создал другой пользователь аккаунта, редактор остается доступен для просмотра настроек. Действия, которые меняют проект или его ссылки, остаются видимыми, но становятся неактивными и показывают подсказку с причиной.

Наблюдатель рабочего пространства тоже может открыть проекты в режиме просмотра, но не может сохранять, публиковать, менять ссылки или запускать экспорт.

Когда открыт Просмотр, рядом с вкладкой появляются иконки десктопа и телефона. Они переключают только внутренний предпросмотр редактора: публичная ссылка и вставка на сайт выбирают мобильный вид автоматически по ширине плеера. В режиме телефона предпросмотр показывает демо внутри рамки устройства, а таймлайн ставит сразу под канвасом. Текст подсказки и кнопки действий идут ниже, а круглые стрелки назад и вперед остаются в нижней части мобильного предпросмотра, если в демо больше одного шага.

Цвет элементов плеера

В секции Дизайн параметр Основной цвет меняет цвет кнопки Начать / Продолжить / Повторить и активных индикаторов нижней панели. Выберите любой цвет, например чёрный или жёлтый: Smotree автоматически поставит на кнопке белый либо чёрный текст — тот, который лучше читается на выбранном фоне.

Эта настройка относится только к элементам самого плеера. Цвета кнопок стартового экрана, заставок, меню и подсказок продолжают настраиваться отдельно.

Список сцен

Слева находится список шагов, стартового экрана и экранов глав. Используйте его, чтобы:

• выбрать нужный шаг;
• добавить пустой шаг или экран главы;
• продублировать сцену — копия появляется сразу под исходным шагом;
• удалить лишнюю сцену;
• скачать статичный кадр как PNG, если это не видео-шаг.

В меню скачивания можно выбрать чистое изображение или изображение с подсказками. Во втором варианте Smotree добавляет в PNG все подсказки этого шага, обрезает медиа под тот же формат канваса, что виден в редакторе и просмотрщике, учитывает позицию загруженного изображения внутри холста и сохраняет изображение в размере, удобном для просмотра целиком, без увеличения исходника. Точки и области сохраняют вид из редактора: позицию подсказки, синюю карточку с текстом, рамку области и маркеры изменения размера. Текстовые карточки callout сохраняют тот же вид, текст, номер и кнопку действия, что и на канвасе редактора. Если подсказок несколько, карточки нумеруются, а текст сохраняется с контрастным цветом поверх выбранного фона.

На карточках шагов могут появляться короткие отметки: например, если на шаге есть видео-кружок или приближение.

Форма на заставке

Форма в Smotree — это режим существующего шага Заставка, а не форма поверх произвольного экрана. Добавьте её через Добавить → Форма или откройте обычную заставку и переключите режим Кнопки на Форма.

В правой панели выберите заранее созданную workspace-форму, измените текст, цвет фона и цвет текста кнопки отправки и укажите, что произойдёт после успешного ответа: переход к следующему шагу, к выбранному шагу или открытие URL. Заголовок, подзаголовок, фон, выравнивание, блюр и тема заставки продолжают работать как обычно; длинный подзаголовок расширяется по высоте и не обрезается.

Поля редактируются в разделе «Формы и лиды». Изменения выбранной формы появляются в опубликованном и встроенном демо без повторной публикации проекта.

Рабочая область

Центральная область показывает выбранный шаг и инструменты автора:

• точка внимания;
• область;
• текстовая подсказка;
• плашка действия;
• блюр;
• экран главы;
• приближение;
• запись или загрузка видео-кружка;
• загрузка медиа для пустого шага.

На стартовом экране инструменты холста заблокированы, потому что их нельзя добавить к стартовому экрану. На заставках инструменты аннотаций и приближения заблокированы, но можно добавить видео-кружок или AI-озвучку. На пустом шаге инструменты заблокированы только до загрузки медиа или преобразования в заставку. После загрузки изображения или видео можно добавлять аннотации, плашку действия, блюр и приближение как на обычном шаге. Smotree подсказывает допустимые форматы и ограничение размера для загружаемых изображений: PNG, JPG, WebP или GIF до 10 MB. Пустой шаг всегда держит стабильный широкоформатный холст: до загрузки он показывает два действия, а после загрузки вставляет изображение или видео внутрь холста без изменения его размера. Чтобы создать шаг из кадра видео, сначала щелкните по таймлайну и выберите отметку; затем Smotree создаст новый пустой шаг и поместит в него этот кадр как изображение. На видео-шаге ручки обрезки задают фактический старт и конец шага: левая ручка сдвигает начало воспроизведения, правая может укоротить ролик или продлить шаг удержанием последнего кадра. Ползунок Масштаб меняет только плотность кадров на таймлайне: при увеличении масштаба раскадровка становится подробнее и может появиться горизонтальная прокрутка для точной обрезки или выбора кадра. Кнопка Уместить таймлайн подгоняет раскадровку под видимую ширину, а кнопка сброса обрезки возвращает исходный диапазон видео.

Если на шаге уже есть видео-кружок, инструмент Аудио блокируется. Чтобы добавить озвучку, сначала удалите видео-кружок.

Инструмент приближения и кнопка его проверки называются Предпросмотр. Пока идет анимация проверки, кнопка предпросмотра временно неактивна.

Правая панель

Правая панель отвечает за детали выбранного объекта и общие настройки демо:

• текст, тип, порядок и цвета подсказок;
• куда вести зрителя после последней подсказки;
• тип, текст, цвета и назначение плашки действия в собственной панели;
• интенсивность и скругление блюра;
• цвет и шрифт текста, фон, изображение предпросмотра и кнопки экрана главы;
• стартовый экран;
• меню просмотра;
• дизайн, фон, шрифты и рамка;
• кнопки плеера;
• заголовок и описание демо.

Плашка действия редактируется отдельно от цепочки обычных аннотаций. Правая панель показывает пять компактных текстовых вариантов: четыре в сетке по два и «Изображение» на всю ширину. Нажмите на нужный вариант, чтобы сменить тип; текущий отмечен цветом и галочкой. Текстовые плашки создаются в компактном размере: вариант со стрелкой показывает текст и простую стрелку, без стрелки — залитую кнопку, а верхняя панель занимает всю ширину кадра. У всех текстовых вариантов настраиваются фон и цвет текста; выбранный фон отображается без прозрачности. Плашки со стрелкой и без неё подстраивают ширину под текст и не переносят его на вторую строку; слишком длинный текст обрезается многоточием. Выбор плашки на канвасе не добавляет вокруг неё обводку или тень. Для изображения редактор сохраняет пропорции загруженного файла, показывает миниатюру и оставляет на канвасе четыре угловые ручки. Действия применения ко всем шагам и удаления находятся в отдельной нижней части панели.

Для стартового экрана, экранов глав и CTA-кнопок действуют ограничения длины. Уже сохраненный длинный текст переносится или обрезается в интерфейсе так, чтобы не перекрывать соседние элементы.

Проверка перед публикацией

1. Пройдите все шаги в списке слева и удалите дубли.
2. Переименуйте непонятные сцены.
3. Сократите длинные подсказки.
4. Проверьте, что подсказки не закрывают важные элементы интерфейса.
5. Переключите предпросмотр на телефон и проверьте, что текст подсказок и действия стартовых экранов читаются под демо.
6. Закройте блюром email, имена клиентов, токены, внутренние адреса и другие чувствительные данные.
7. Откройте предпросмотр и пройдите демо как новый зритель.
8. Сохраните изменения, затем опубликуйте демо или откройте Поделиться.