Google Web Designer

для HTML5 анимации

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

О программе

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

Как видно из названия, программа создана компанией 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 // создание анимированных презентаций с персонажами
• Aphalina // программа для создания SVG-анимации
• Articulate Storyline // конструирование онлайновых презентаций и обучающих курсов
• Aseprite // анимация в стиле пиксельной графики
• Aurora 3D Animation Maker // создание и анимирование 3d текстов и фигур
• Camtasia Studio // видеоредактор с анимационными инструментами
• Cavalry // для создания сложносочиненных 2d анимаций
• Corel PhotoMirage // производство стильных фото-анимаций
• DP Animation Maker // "оживление" фотографий анимационными эффектами
• Enve // гармоничное сочетание растровой и векторной анимации
• Explaindio Video Creator // программа для создания рисованного видео
• Express Animate // After Effects Lite с экспортом в Video, HTML5, GIF
• FantaMorph // морфинг изображений
• HelpXplain // для создания анимированных онлайн-презентаций
• Hippani Animator // удобная анимационная студия с экспортом в HTML, video, анимированный gif
• 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 // многоплатформенное приложение для создания веб-роликов
• ФотоШОУ PRO // для создания видеороликов со слайдшоу
• Онлайн-сервисы для создания анимации // работают в браузере без загрузки на компьютер

Новости

От рекламы не скрыться

Умелые ручки

Спонсориат

домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь