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

HIPPO Animator

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

HIPPO Animator - что умеет?

HIPPO Animator - редактор для создания анимационных роликов, рекламных баннеров, игр, мультфильмов. Поддерживается экспорт в HTML, AVI, анимированный GIF, последовательность PNG картинок. Удобен и по-хорошему прост в использовании. Есть стандартный таймлайн, на котором отмечаются ключевые кадры и задаются параметры элемента, которые должны меняться по выбранному алгоритму от ключевика до ключевика. Для продвинутых пользователей есть скриптовая поддержка анимации с помощью встроенного языка Javascript.
Начиная с версии 5 программа называются Hippani Animator.

Интерфейс

Интерфейс стандартен для большинства программ по работе с анимацией.

HIPPO Animator / интерфейс

1 - Главное меню. Тут все возможные операции.

2 - Панель кнопок. Вынесены в виде кнопок наиболее востребованные операции и элемента для вставки в сцену.

3 - Закладки. В виде закладок открывается всё, что в других программах открывается в виде окон. Это, например, редактор того или иного элемента - векторный редактор для svg картинки, растровый редактор для растровой картинки, текстовой редактор для текстовых элементов, редактор кода для скрипта... Даже Справка по клавише F1 открывается как закладка. И надо сказать, что это удобно, открыв один раз - иметь в течении сессии быстрый доступ на нужную закладку.

4 - Шкала времени. Таймлайн (timeline). Каждому элементу сцены отведен свой слой. Слой можно перетаскивать, меняя его уровень. Вверху таймлайна - номера кадров (не секунд). Чтобы поставить ключевой кадр для элемента следует совершить ДВОЙНОЙ КЛИК в месте пересечения слоя нужного элемента и номера кадра. Также можно ставить ключевой кадр на саму сцену и прописывать к нему команду скрипта.
В проекте может быть создано несколько таймлайнов. Это удобно для группировки объектов. Создать новый объект Tameline, по правой кнопке мыши добавить его на основную шкалу времени. По правой кнопке мыши открыть его на редактирование. Добавить несколько элементов, анимировать их...

5 - Сцена. Это окно просмотра сцены. В нем удобно располагать элементы на сцене, их масштабировать, вращать и производить другие операции, вызвать контекстное меню по правой кнопке мыши.
На одном таймлайне может быть создано несколько сцен. Такое дробление может быть удобно, например, для презентации со слайдами, где сцена будет исполнять роль одного слайда.

6 - Библиотека. В ней отражаются все загруженные или созданные для проекта объекты - изображения, тексты, видео, звук, интерактивные элементы... В библиотеке можно создавать папки и распределять элементы по папкам.

7 - Свойства. В этом окне динамически отображаются свойства выделенного на сцене или в библиотеке элемента. Значения свойств можно менять в этом окне, когда требуется пиксельная точность. Для элемента, на который наложена анимация, в этом окне можно задать кривую изменения значения. Этот параметр называется "Тип плавного изменения скорости анимации" и появляется в окне Свойств только для того ключевого кадра, с которого анимация начинается.

Основные особенности

- таймлайн и ключевые кадры;
- экспорт в HTML, видео или растровые картинки;
- создание виджетов для смартфонов;
- векторная графика (импорт, редактор, рисовалка);
- растровая графика (импорт, экспорт, редактор);
- добавление на сцену кнопок, элементов форм, гиперссылок и др. интерактивных элементов;
- создание слайд-шоу для интернет-страницы;
- импорт MP4, YouTube и Vimeo видео;
- импорт аудио;
- анимация по заданному алгоритму (задается кривой);
- встроенный javascript движок;
- встроенный проигрыватель проекта;
- простота использования;
- крайне малый вес для такого развернутого функционала (25 мб);
- справка на русском языке (с корявым переводом).

Пример проекта

В проекте использован элемент "Последовательность изображений" (ImageSequence). Простым английским языком - это слайдшоу. Последовательность действий примерно такая:

- В библиотеку проекта добавить нужные картинки со своего диска;
- Открыть ImageSequence и добавить в него картинки из библиотеки;
- Присвоить ImageSequence идентификатор "SS";
- Добавить кнопку СТОП и задать ей скрипт ImageSequenceStop('SS');
- Добавить кнопку ЛИСТАТЬ и задать ей скрипт ImageSequencePlay('SS');
- Добавить кнопку СЛЕДУЮЩИЙ и задать ей скрипт ImageSequenceNext('SS');
- Добавить кнопку ПРЕДЫДУЩИЙ и задать ей скрипт ImageSequencePrevious('SS')...

Вы можете скачать файл проекта Hippo_newart_games.hani, открыть его в своем редакторе и посмотреть, как там всё устроено.

Скачать

  • Вот zip-файл c портабельной версией Hippo Animator 3.3.5143 Она начинает работать без предварительной инсталляции. Первый запуск может быть не особенно быстрым, т.к. в папке программы будет создана новая подпапка с данными - это нормально. Не забудьте ввести пароль при распаковке архива: newart.ru
  • Вот zip-файл c портабельной версией Hippani Animator 5.1 (пароль для разархивирования newart.ru). По сравнению с Hippo-версией есть ряд усовершенствований. Например, появился элемент Hot Spot для навешивания событий не только на Button, но и на любые другие элементы, поверх которых расположен Hop Spot. В окне Javascript появилась подсветка синтаксиса...
  • Вот ссылки на портабельную версию Hippani Animator 5.1.6360 для Windows для 64bit. Пароль для разархивирования: newart.ru
  • Вот ссылка на официальный сайт программы, где вы сможете скачать свежую триал-версию.
  • Ссылка на онлайновое руководство пользователя Hippani. Подробное. На английском по умолчанию, но внизу страницы есть переключатель языка.
  • Видео:
    Видеоролики по программе на Youtube.

    Ещё программы для анимации:
    Algodoo // симулятор реального физического мира
    Animiz // создание анимированных презентаций с персонажами
    Aphalina // программа для создания SVG-анимации
    Aseprite // анимация в стиле пиксельной графики
    Aurora 3D Animation Maker // создание и анимирование 3d текстов и фигур
    Cables.gl // сервис для разработки различного рода визуализаций
    Camtasia Studio // видеоредактор с анимационными инструментами
    Cavalry // для создания сложносочиненных 2d анимаций
    Corel PhotoMirage // производство стильных фото-анимаций
    DP Animation Maker // "оживление" фотографий анимационными эффектами
    Enve // гармоничное сочетание растровой и векторной анимации
    Explaindio Video Creator // программа для создания рисованного видео
    Express Animate // After Effects Lite с экспортом в Video, HTML5, GIF
    FantaMorph // морфинг изображений
    Google Web Designer // конструктор HTML5 баннеров и приложений
    HelpXplain // для создания анимированных онлайн-презентаций
    Moho Pro // профессиональная программа для создания мультфильмов
    Piskel // крайне привлекательная программа для создания и редактирования анимаций в стиле pixel art
    Pivot Animator // простой редактор для создания костной анимации по ключевым кадрам
    PixelOver // пикселизация и анимация 2d и 3d
    Pro Motion NG // пиксельное рисование и анимация
    ProShow Producer // для создания продвинутых слайдшоу и видеопрезентаций
    Saola Animate // программа для быстрого и удобного создания анимации в HTML5
    ScreenToGif // анимированный Gif – запись/редактирование/конвертация
    Spriter // создание костной анимации персонажа для игровых движков
    Tahoma2D // для создания 2d мультипликации
    TouchDesigner // композер для генеративной графики
    VoxEdit // воксельный редактор для моделирования и анимации
    WebAnimator // редактор анимации для веба
    Wick Editor // многоплатформенное приложение для создания веб-роликов
    Онлайн-сервисы для создания анимации // работают в браузере без загрузки на компьютер

    вебмастер Newart.ru
    [[ Все обзоры программ для художников, вебдизайнеров, фотографов ]]
    Раз реклама
    Два реклама
    Объявление
    # графические редакторы онлайн - Аватан, Фотошоп...
    Творческой личности
    Детская энциклопедия
    домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
    конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь