Hype 4 Pro 4.1.16

При всех своих достоинствах в виде шикарного вида, больших возможностей интерактивного взаимодествия с пользователем, использования красивейшей анимации и пр., сайты, созданные с использованием технолгии Flash, имеют два достаточно весомых недостатка – размер сайтов получается достаточно весомым, а для возможности их просмотра необходим специальный flash-плагин. Но прогресс не стоит на месте и теперь у Flash имеется альтернатива в виде HTML5 – пятой версии языка разметки HTML. Данный стандарт уже поддерживается последними версиями всех основных веб-браузеров и предлагает практически такие же возможности, что и Flash, при более меньшем размере получаемого контента и отсутствии необходимости устанавливать какие-либо плагины для его просмотра. Сегодня мы хотим рассказать об одном из приложений, позволяющих вести разработку на HTML5, которое называется Hype.

Hype является легким в использовании WYSIWYG-редактором для создания интерактивных веб-сайтов, анимации и многого другого, основной фишкой которого является автоматическая кодировка в HTML5 при экспорте готового материала.

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

WISIWYG-РЕДАКТОР::
WISIWYG является аббревиатурой от английского выражения What You See Is What You Get, которое можно перевести, как “что видишь, то и получишь”. И действительно, работа в редакторе происходит таким образом, что содержание отображается в процессе редактирования и выглядит максимально похожим на то, что пользователь увидит в конечном продукте. Полностью удовлетворяя требованиям WISIWYG, Hype позволяет создавать анимацию и интерактивные сайты, не требуя при этом знания исходного кода.

ИНСПЕКТОР
Инспектор представляет собой панель со множеством вкладок, инструментарий на которых позволяет управлять большим количеством параметров любого элемента сайта.

• Document. Задание размеров проекта и управлениями некоторыми функциями его показа. Отдельно хочется отметить функцию автоматической проверки совместимости создаваемого проекта с некоторыми версиями основных веб-браузеров (включая мобильные версии последних на android- и apple-девайсах). В случае найденных проблем с совместимостью, программа даст рекомендации по их устранению.
• Scene. Вкладка с параметрами анимаций, создаваемых в приложении. На любое доступное действие (6 вариантов) с объектом анимации, можно назначить то или иное событие (перейти на другую страницу, проиграть анимацию, запустить jаvascript или перейти по веб-ссылке).
• Metrics. Управление размерами и вращением любого выбранного элемента проекта.
• Element. Управление визуальным отображением элементов проекта (фон, рамка, прозрачность, отражение, тень).
• Text. Управление форматированием текста, используемыми шрифтами, интервалами и пр.
• Mouse Action. Выбор и управление событиями, происходящими при том или ином действии с выбранным элементом проекта. Набор событий аналогичен тому, что доступен во вкладке Scene. Как и в других вкладках, при возникновении проблем с совместимостью появится соответствующий значок, клик на котором вызовет дополнительное окно с описанием проблемы.
• Identity. Общая информация об выбранном элементе.

МЕДИАБРАУЗЕР
Медиабразер позволяет импортировать в проект фото-, видео- и аудиоматериалы из таких приложений, как Aperture, iPhoto, iTunes, GarageBand, а также из некоторых заданных папок. Причем, что интересно, количество папок жестко не задано, и пользователь может добавить свои папки к уже имеющимся. Для этого достаточно перетащить выбранную папку на окно медиабраузера. Отображение материалов в библиотеке выбранного приложения или в папке может осуществляться в трех режимах, на панели также присутствуют средства поиска того или иного файла по его названию, результаты поиска выводятся моментально, по мере ввода поискового запроса. Импорт материалов из браузера в проект также осуществляется перетаскиванием.

jаvascriptS
Принцип работы в Hype примерно такой же, как и во многих видеоредакторах: пользователь расставляет ключевые кадры, настраивает свойства объектов, а затем экспортирует готовый проект, получая на выходе папку с медиафайлами, используемыми в проекте и обычным jаvascript’ом.
Конечно, на самом деле все происходит не так быстро, как было описано в предыдущих строках. Например, создание покадровой анимации может осуществляться двумя способами: вручную или с помощью опции записи приложения. Режим записи как раз таки предоставляет возможность назначить, например, ключевые позиции перемещаемого элемента проекта, а переходы для создания анимации перемещения из одной точки в другую Hype сделает сам.

С помощью пункта Insert Elements на панели инструментов (как вариант, простым перетаскиванием на окно редактора) добавляем в проект графический файл с логотипом. Выделив логотип, запускаем процесс записи кнопкой Record Animation, расположенной на панели Timeline, затем в Инспекторе (в разделе Rotation вкладки Metrics), выставляем величину угла вращения (от 0° до 360°). После этого останавливаем запись, а приложение автоматически сделает переходы для создания анимации вращения.

Как уже говорилось выше, готовый проект можно экспортировать в HTML5 формате, причем в плане экспорта поддерживается интеграция с Dropbox, что предусматривает автоматическую публикацию созданной веб-страницы в публичной папке Dropbox и позволяет сразу после создания поделиться ссылкой с другими людьми (интеграция с Dropbox будет работать только в том случае, если у пользователя имеется соответствующий аккаунт).
Перед началом операции экспорта программой выводится дополнительное окно, в котором будут перечисленные проблемы совместимости, которые могут возникнуть при просмотре созданного проекта в том или ином браузере. Если проблема совместимости остро не стоит, то определенные браузеры можно исключить из тестирования.

Что нового:

Version 4.0.0:
Note: Now requires OS X 10.10 or later
New Features:

• Vector Shapes: Polygon, Path, and Pencil tools with Shape Morphing
• Sprite Sheet/Image Sequence import [pro]
• Page Turn transition for smooth scene swiping
• Skew transform
• Drop and Inset shadows
• External editor support for resources/jаvascript/head html [pro]
• Ad Fallback Images [pro]
• Official CDN to host runtime files [pro]
• jаvascript math equation timing functions [pro]
• Custom HTML attributes (like data-*) [pro]
• Many other enhancements, UI tweaks, and bug fixes

Снимки экрана:

• 
• 
•