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

Google Web Designer

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

О программе

Google Web Designer - программа для создания баннеров и web-страниц, ориентированных на интерактивность со зрителем и на показ анимации. Конечный результат сохраняется в "формате" HTML5, а именно, в набор html, js, css файлов и контентных файлов изображений, видео, аудио.
Интерфейс программы спроектирован так, чтобы в ней мог работать человек без знания языков программирования, форматирования и разметки. Тем не менее, если пользователь знаком с Javascript, CSS и HTML то он сможет создавать сложные функциональные веб приложения.

Google Web Designer

Как видно из названия, программа создана компанией Google и по их задумке в первую очередь направлена на создание баннеров для рекламной сети Google AdWords. На самом деле возможности GWD гораздо шире.

Интерфейс

С интерфейсом программы познакомьтесь из интерактивной презентации:

Эта презентация сделана, кстати, в программе ActivePresenter, о которой вы можете узнать подробнее и скачать на свой компьютер на странице "ActivePresenter - для создания профессиональных анимированных презентаций и тестов".

Принцип работы

Объекты страницы. На рабочем холсте, размер которого задан при создании проекта, можно размещать различные объекты: фигуры, картинки, тексты, видео. Параметры выделенного объекта можно менять на панели "Свойства". Параметры объектов можно изменять во времени, то есть, анимировать. Для этого нужно воспользоваться временной шкалой - расставить на ней ключевые кадры и в каждом кадре задать значение анимированного параметра. От кадра к кадру значение будет меняться плавно согласно кривой выбранного типа анимации.

Аудио тоже размещается на холсте, но на результирующей html странице не отображается. На аудио можно задавать какие-то действия типа старт, стоп, пауза.

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

Код. Пользователь, разбирающийся в HTML, CSS и Javascript может открыть код и вносить изменения прямо в нем. Кнопка [Код] находится вверху справа. Потом вернуться снова к визуальному редактору можно по соседней кнопке [Макет].

Просмотр и публикация. Текущий результат быстро просмотреть в браузере можно по кнопке [Предпросмотр]. А по кнопке [Опубликовать] вы сделаете результирующую сборку проекта в веб приложение.

Анимация. В вашем результирующем баннере/приложении объекты могут передвигаться, вращаться, менять прозрачность по расписанию или по событию. На шкале времени происходит работа по анимированию объектов по расписанию. Принцип заключается в расстановке кличевых кадров и в каждом таком кадре назначаются свойства того или иного, или сразу нескольких, параметров. После этого в промежутке между кадрами значение свойства будет меняться. Чтобы задать тип изменений (который по умолчанию lianer) - кликните на полоску между ключевыми кадрами и выберите интерполяцию.

События. Это могут быть клик по объекту мыши, наведение курсора на объект, загрузка страницы... На событие можно повесить действие, которое будет происходить с любым другим объектом или с ним самим. Этим делом в результирующем баннере/приложении будет заниматься Javascript и CSS, но пользователь GWD может без знания данных технологий в конструкторе событий все настроить сам.

3D в Google Web Designer

Программа предоставляет удобный инструментарий для управления css параметрами, отвечающих за трехмерность. Причем каждый из этих параметров можно анимировать и создать, например, такой 3d кубик, как вы видите слева. В этом примере шесть плоских картинок трансформированы в 3d пространстве для образования куба и объеденены в группу, для которой задана анимация вращения вокруг осей X,Y и Z.

У выделенного объекта на панели "Свойства" под плашкой "Преобразование, вращение и масштаб" вы увидите параметры X, Y и Z для перемещения в трехмерном пространстве и для вращения вокруг этих осей. Также под этой плашкой вы увидите радиобаттоны "Коррекция" и "Абсолютное значение". Если с "Абсолютным значением" все ясно - это значения, отсчитываемые от центра композиции, то про "Коррекцию" стоит сказать, что это настройка изменения значения относительно текущего состояния в тот момент времени, который обозначен ползунком на шкале времени. Если вы отметите радиобаттон "Коррекция", то все параметры будут выставлены в 0. Изменив значение какого-то параметра, вы автоматически создадите новый ключевой кадр для вашего объекта и они примет новое абсолютное значение параметра.

Более грубое и быстрое изменение значений 3d параметров возможно с помощью инструментов и - при выборе их на панели слева вы сможете мышкой вращать или передвигать выделенный объект в трехмерном пространстве.

Есть еще один 3d инструмент . Он служит для свободного вращения всей сцены. НО только для просмотра, на абсолютные значения это никак не влияет. Инструмент полезен для контроля того, как все у вас может выглядеть в трехмерности. Чтобы после применения этого инструмента вернуть сцену в первоначальное состояние надо на этой кнопке совершить двойной клик.

Компонент "Галерея"

Google Web Designer предлагает воспользоваться готовыми миниприложениями в виде компонентов, которые можно перетаскивать на холст мышкой из одноименной панели. Я освоил компонент "Перелистываемая галерея" и он мне понравился. Слева вы видите рекламный баннер на основе этого типа галереи.

После перетаскивание этого компонента на холст надо в его свойствах найти параметр "Изображения" и кликнуть по иконе в этом поле. Откроется окно, в котором по ссылке [Выбрать изображения] добавьте нужные картинки для будущего пролистывания в галерее. Ваши картинки смогут пролистываться как по клику, так и с помощью навигационной панели, вывод которой также есть в свойствах

Я же захотел создать собственные кнопки навигации влево/вправо. Столкнулся с невозможностью после крайнего правого состояния галереи переместиться в один клик на первое изображение. Пришлось применять небольшой скрипт на Javascript, который я повесил на событие клика по правой кнопке:
gwd.Loop1 = function(event) { ++myCount; if (myCount == mySum) { gwd.actions.gwdSwipegallery.goToFrame("gwd-swipegallery_1", 1, "slide"); myCount = 0; } else { gwd.actions.gwdSwipegallery.goForwards("gwd-swipegallery_1"); }; };
Счетчик слайдов и общее количество слайдов я объявил заранее через интерфейс кода:
var myCount = 0; // счетчик var mySum = 8; // общее кол-во слайдов

Скачивание и помощь

📥 Скачать Google Web Designer с официального сайта. Есть 32bit версия и 64bit для Windows. Есть сборки под Linux и Mac OS. Программа официально бесплатная. Небольшой нюанс заключается в том, для запуска и работы программа требует подключения к интернету. Как избежать такой зависимости я не разбирался.
Развернутая справка по работе с программой на сайте разработчика на русском.
Описание компонентов GWD - для чего и как выглядят в работе.
API компонентов GWD - свойства, события и методы. Для продвинутых пользователей.

Видео:
📺 Канал Google Web Designer на YouTube, на английском
📺 Знакомство с Google Web Designer направленность ролика - на работающих с контекстной рекламой Google AdWords, на русском
📺 Создание анимированного баннера на русском

Ещё программы для анимации:
ActivePresenter // создание интерактивных и анимированных презентаций и тестов
Algodoo // симулятор реального физического мира
Animiz // создание анимированных презентаций с персонажами
Articulate Storyline // конструирование онлайновых презентаций и обучающих курсов
Aurora 3D Animation Maker // создание и анимирование 3d текстов и фигур
Camtasia Studio // видеоредактор с анимационными инструментами
Cavalry // для создания сложносочиненных 2d анимаций
Corel PhotoMirage // производство стильных фото-анимаций
DP Animation Maker // "оживление" фотографий анимационными эффектами
Explaindio Video Creator // программа для создания рисованного видео
Express Animate // After Effects Lite с экспортом в Video, HTML5, GIF
FantaMorph // морфинг изображений
HelpXplain // для создания анимированных онлайн-презентаций
Hippani Animator // удобная анимационная студия с экспортом в HTML, video, анимированный gif
Piskel // крайне привлекательная программа для создания и редактирования анимаций в стиле pixel art
ProShow Producer // для создания продвинутых слайдшоу и видеопрезентаций
Saola Animate // программа для быстрого и удобного создания анимации в HTML5
ScreenToGif // анимированный Gif - запись/редактирование/конвертация
VoxEdit // воксельный редактор для моделирования и анимации
ФотоШОУ PRO // для создания видеороликов со слайдшоу
Онлайн-сервисы для создания анимации // работают в браузере без загрузки на компьютер
Новости
От рекламы не скрыться
Как пройти в библиотеку
Детская библиотека
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь