Управляемая данными анимация с Edge Animate
На этой неделе я продемонстрировал Edge Animate в двух городах Техаса в рамках тура Create the Web. Анимации — это не то, о чем я обычно трачу много времени, думая, но я был благодарен за возможность показать, что я считаю довольно крутой программой. На моей первой презентации один из участников спросил, поддерживает ли Edge Animate анимацию, управляемую данными. Услышь то, что я сказал ему, и взгляни на простое доказательство концепции.
Во-первых, я сказал ему, что, на мой взгляд, Edge Animate подойдет для проектов, управляемых данными, но только для тех, в которых задействована хотя бы некоторая анимация на основе временной шкалы. Это различие может не иметь смысла, если вы никогда раньше не использовали Edge Animate. (Я рекомендую вам скачать его по ссылке, которой я поделился выше.) В Edge Animate есть временная шкала, которая позволяет вам создавать анимации с течением времени.
Так, например, моя анимация может делать что-то одно от времени 0 до времени 1, а что-то другое от времени 1 до времени 4. Интеграция данных с этим не должна быть проблемой. Представьте себе простую анимацию погоды. У вас могут быть части, чтобы влететь термометр и собраться вместе, как головоломка. В конце вы отображаете текущую температуру.
Зачем нужен Adobe Edge Animate CC
Другой пример — анимация, полностью управляемая данными без понятия «время». Примером этого может быть простая круговая диаграмма, которая обновляется живыми данными, используя анимацию для плавного изменения секторов.
Очевидно, здесь есть серая зона, и каждый проект индивидуален. Edge Animate также упрощает добавление интерактивности в ваши проекты, поэтому допущение, что только проекты, в которых есть всякое дерьмо, имеет смысл, также не совсем справедливо. Надеюсь, вы меня поняли.
Со всем этим, давайте посмотрим на реальную демонстрацию. Это будет не самая захватывающая анимация Edge, которую вы увидите, но, надеюсь, она проиллюстрирует концепцию. Для моей демонстрации я хочу создать анимацию коробки, которая появляется на экране, а затем просто отображает текст.
Управляемая данными часть будет исходить из того факта, что отображаемый нами текст должен быть взят из файла на стороне сервера. Вы можете представить, что это ColdFusion, PHP или какой-то другой скрипт. Пока что я просто сделал это простым текстом.
Я начал с создания анимации и использования статического текста. Я использовал две секунды для анимации «Прямоугольник прилетает» и одну секунду, чтобы текст постепенно исчез.
Вы можете увидеть это в действии здесь: http://www.raymondcamden.com/demos/2012/nov/7/v1/Untitled-2.html . Обратите внимание, что я не удосужился настроить какой-либо preloader или обеспечить доступную поддержку. Я стараюсь сделать это как можно проще.
Итак, теперь у нас есть основная анимация. Мы могли бы настроить его, чтобы сделать его красивее. Изменить поток движения. И т.д. Но давайте сосредоточимся на том, чтобы сделать эти данные управляемыми. Для этого мне нужно сначала остановить автоматический запуск анимации. Мой Ajax-вызов может быть медленным, поэтому я не хочу, чтобы что-либо выполнялось, пока я не верну свои данные.
2 Знакомство с программой Adobe Edge Animate и простая анимация
Отключить автозапуск так же просто, как щелкнуть по рабочей области в Edge Animate и отключить его в свойствах.
Это было просто. Следующая часть была немного сложнее. В обычном приложении я бы слушал событие типа DOM ready, прежде чем делать то, что мне нужно. Но я знаю, что у Edge Animate тоже есть свои события. Я предположил — но не был уверен — что есть событие, которое я мог бы прослушать и вызвать свою собственную логику. Когда сцена еще выбрана, я щелкнул значок Действия:
Я заметил событие creationComplete и предположил, что это безопасная ставка. Исходя из предположения, что вся моя логика уместится здесь, я использовал полезное меню действий, чтобы указать, как писать код. Сначала я выбрал «Задать текст элемента», а Animate добавил следующий блок:
// Change an Element’s contents. // (sym.$(«name») resolves an Edge Animate element name to a DOM // element that can be used with jQuery) sym.$(«Text»).html(«NewText»);
Мой текстовый символ уже назывался Текст, поэтому я оставил код как есть. Часть, которая читает «NewText», будет изменена на результат моего вызова Ajax, но сейчас я просто хотел убедиться, что это сработало.
Далее я знал, что хочу запустить анимацию сам. Это тоже было легко. Я выбрал действие «Воспроизвести с» и указал значение 0.
// play the timeline from the given position (ms or label) sym.play(0);
В этот момент я заметил нечто странное. Когда я тестировал свою анимацию, текст в прямоугольнике не обновлялся. Что-то подсказало мне, что это может быть событие, которое я использовал.
У меня нет доказательств этого (но я узнаю), но я был готов поспорить, что когда Edge Animate запускал анимацию в самом инструменте, он никогда не вызывал событие creationComplete. Вместо этого я сохранил свою работу, запустил ее в браузере и увидел, что все работает как положено.
Вы можете просмотреть эту версию здесь: http://www.raymondcamden.com/demos/2012/nov/7/v2/Untitled-2.html . Теперь вы должны увидеть, как запускается анимация и используется новый текст, а не слово «STATIC».
Woot! Так что теперь моя работа была почти завершена. Я сделал копию своей работы и открыл ее в другом редакторе. Файл Untitled-2_edgeActions.js содержал обработчик событий и пользовательскую логику, которую я создал. Вот как Edge Animate экспортировал его.
/*********************** * Adobe Edge Animate Composition Actions * * Edit this file with caution, being careful to preserve * function signatures and comments starting with ‘Edge’ to maintain the * ability to interact with these actions from within Adobe Edge Animate * ***********************/ (function($, Edge, compId)< var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes //Edge symbol: ‘stage’ (function(symbolName) < Symbol.bindSymbolAction(compId, symbolName, «creationComplete», function(sym, e) < // insert code to be run when the symbol is created here // Change an Element’s contents. // (sym.$(«name») resolves an Edge Animate element name to a DOM // element that can be used with jQuery) sym.$(«Text»).html(«NewText»); // play the timeline from the given position (ms or label) sym.play(0); >); //Edge binding end >)(«stage»); //Edge symbol end:’stage’ >)(jQuery, AdobeEdge, «EDGE-122609956»);
Источник: coderlessons.com
Что такое Adobe Edge Animate CC? — манекены
Взгляните на Adobe Creative Cloud и все доступные инструменты, сервисы, приложения и программное обеспечение; это включает Adobe Edge Animate CC. Adobe полностью охватила облако; теперь вы можете получать последние обновления и функции, не дожидаясь следующей полной версии. Подписка на Creative Cloud означает доступ ко всем последним событиям.
Что еще лучше, так это то, что Edge Animate полностью совместим со многими названиями в Creative Cloud — с добавлением дополнительных функций. Edge Animate использует HTML5, который (даже сейчас) не поддерживает все браузеры. К счастью, Adobe предоставляет функции, которые помогут вам, когда ваша аудитория не использует современные браузеры. Скорее всего, вы обнаружите, что в наши дни больше поддержки HTML5, чем для Flash; жюри все еще не знает, что это значит для будущего Flash.
Ваши инструменты находятся в облаке
Все эти инструменты и сервисы доступны через Creative Cloud Creative — универсальный магазин для большинства креативных программ Adobe (включая Photoshop, After Effects, InDesign, Illustrator, Fireworks, Muse, и Dreamweaver). Большинство инструментов для большинства этих программных продуктов совместимы с Edge Animate. Вы можете начать работу с Creative Cloud со свободным членством в течение 30 дней, включая 2 ГБ облачного хранилища и ограниченный доступ к сервисам. Вы можете найти больше о Creative Cloud онлайн.
Создание анимированного веб-контента
- Если работа с jQuery звучит страшно, даже если это хороший страх, это не должно. Edge Animate делает все кодирование для вас. Все, что вам нужно сделать, — это создать творческие аспекты вашего дизайна.
- С другой стороны, если вы знаете, как кодировать jQuery, и вам нравится погружаться в скобки, то Edge Animate предоставляет очень функциональную панель кода, из которой вы можете работать.
Сотрудничество с другими инструментами публикации
Хотя Edge Animate — потрясающий инструмент для создания онлайн-контента, он фактически не публикует вашу анимацию онлайн. К счастью, Edge Animate совместим с несколькими инструментами публикации, приложениями и платформами.Вот краткий обзор каждого инструмента и приложения.
iBook Files
Если вы еще не знали, iBooks является одним из самых популярных и загружаемых приложений для устройств Apple, включая iPhone и iPad.
Используя Edge Animate для создания ваших композиций, вы можете быть уверены, что ваша аудитория увидит, что ваша анимация безупречно работает на некоторых из самых популярных телефонов и планшетов. Еще лучше, вы можете экспортировать композицию Edge Animate в форматы, совместимые с iBook Author от Apple.
Adobe InDesign
InDesign — это программное обеспечение для настольных издательских систем, которое также делает Adobe. Он позволяет создавать страницы для печати, планшета и других платформ и устройств. InDesign также является частью Creative Cloud от Adobe и хорошо работает с Edge Animate. Экспорт файлов из Edge Animate — это вопрос нажатия нескольких элементов меню, а затем только размещение файлов в InDesign.
InDesign выводит документы ePUB, которые работают на iPad Apple. Приложение iBook для iPad использует формат ePUB. Благодаря этим инструментам вам предоставляется еще один способ включить ваши анимационные композиции в iBooks.
Adobe Dreamweaver
Adobe Dreamweaver помогает начинающим веб-разработчикам создавать веб-сайты с 2005 года, когда Adobe приобрела Dreamweaver от Macromedia. Используя Dreamweaver, веб-дизайнер может взломать HTML-сайты и мобильные приложения с кросс-платформенной совместимостью, множеством функций и многоэкранными превью. Теперь, выпуская Edge Animate 1. 0, Adobe обновила Dreamweaver, чтобы включить поддержку ваших анимационных проектов: вы можете продолжать создавать веб-сайты в Dreamweaver и импортировать свои проекты из Edge Animate.
Adobe Fireworks
Adobe Fireworks — еще один бывший программный продукт Macromedia, который вы можете использовать для создания растровой и векторной графики. Веб-дизайнеры используют его в сочетании с Dreamweaver, а теперь Edge Animate, для создания интерфейсов, экранных проектов и интерактивного контента для планшетов и телефонов.
Adobe Muse
Adobe Muse — еще один инструмент для создателя веб-сайтов, нацеленный непосредственно на художников-дизайнеров с небольшим или отсутствующим навыком кодирования. Muse совершенно новый; предварительный просмотр был выпущен в 2012 году.
Если вы дизайнер, которому удобно создавать макеты печати, то работа с Muse должна происходить естественным образом. Кроме того, если вы хотите, чтобы ваш сайт дизайна имел композицию, созданную в Edge Animate, такие проекты легко добавить на ваш сайт Muse.
Adobe Inspect
В конце 2012 года Adobe Shadow была переименована в Inspect.
В настоящее время Flash не будет работать на нескольких типах устройств, но Edge Animate будет — и вы захотите просмотреть свою работу на столько же различные размеры экрана, как вы можете. Вот где Inspect вступает в игру. Этот инструмент позволяет мгновенно просматривать обновления, которые вы делаете в своей анимации на разных устройствах.
Источник: rus.blender3dtutorials.com
Adobe Edge Animate — красивая анимация кнопки с нуля за 30мин
Решил сделать страничку с красивой анимацией, и под руку попалась Edge Animate. Поискав на хабре какие-нибудь статьи по ней, понял что особо никто не писал гайдов, поэтому решил изучать самостоятельно.
В итоге 30 минут знакомства с программой, и на удивление красивый результат.
Adobe Edge Animate распространяется бесплатно, все что нужно это зарегистрировать учетную запись Adobe ID, и установить сам Edge.
Те кто работали с Adobe After Effects, поймут интерфейс достаточно быстро, а так же приятным удивлением будет все те же работающие хоткеи.
Задача : создать анимацию кнопки, которая при нажатии менялась бы из выключенной во включенную, а так же раздвигались дверцы в котором был бы основной контент сайта.
Задача понятна, поехали.
При открытии Edge у нас уже создан элемент Stage, который выставлен на TimeLine(Снизу), в раздел Elements(Справа) и его настройки показаны слева.
Stage это главный див, в котором и будем работать, поэтому меняем его разрешение на нашу рабочую область 1100×600. Рядом с разрешением есть 2 квадратика: Первый это заливка цветом, второй заливка градиентом. К слову, очень удобно реализовано изменение цвета, а так же есть возможность сохранить цвет в палитру.
В настройках Stage убираем галочку с пункта Autoplay, чтобы анимация не запускалась без клика и ставим заливку цвета серым цветом.
Создаем главный див для кнопки, для этого выбираем в верхней панели инструментов овал, и зажимая шифт растягиваем его на 150px.
После того как создали круг, перемещаем его по центру дива(при пересечении главных осей, появляются фиолетовые линии, перетаскиваем круг на их пересечении)
Теперь у нас появился новый див под название Ellipse, который добавился в область тайм лайна, и в раздел Elemets (в этом разделе, как вы поняли из названия, находятся все элементы проекта, здесь можно сразу добавить эвенты к ним, по нажатию на фигурные скобки, а так же управлять вложенностью дивов, путем перетаскивания, что несомненно удобно!)
Сразу меняем название элипса на Button для удобства, это можно сделать по двойному клику на название в области таймлайна, в окошке элементы, а так же в окошке настроек сверху (Несомненно удобно).
Настройки элипса более расширенные по сравнению со Stage.
Большинство функций являются изменением свойств css, можно увидит что изменяет каждая функция если навести на ее значок.
Перед описанием функций, хотел бы рассказать как происходит анимация, и их управление. Она здесь сделана с помощью кейфреймов (ромбиков), рядом с каждой функцией они присутствует. Если мы нажмем на ромб, у нас добавится этот самый кейфрейм на таймлайн, и ему присваивается значение функции которое сейчас выставлено, отодвинув ползунок времени, мы можем создать еще один кейфрейм с другим значением функции, и при воспроизведении анимации, значение функции будем меняться от первого значения кейфрейма до втрого значения. Подробнее я покажу на примере.
Пробежимся быстро по функциям.
В самом верху мы видим название дива, кнопка c — дает возможность прописать класс для него, а двойные скобки прописать эвент.
Ниже раздел отображения элемента.
Глаза, 2 кубика и шкала прозрачности отвечают за css свойства: Display, Overflow, Opactiy.
Position and Size — за расположение и размер дива
Color — за заливку цветом, градиентом, а так же добавление бордера.
Transform — изменение дива относительно точки origin (что бывает очень удобно если див нужно уменьшить относительно центра).
Следующая пачка настроек
Cursor — курсор при наведении
Corners — сглаживание углов (очень удобно, есть возможность сгладить все углы одинаково, либо каждые 4 или 8 сторон по разному, если бы можно было сохранять их как цвет в палитре было бы супер)
Shadow — настройки тени
Filters — разные дополнительные фильтры такие как blur, invert, contrast (но они поддерживаются пока не во всех браузерах)
Clip — маска дива(но только по 4 сторонам)
Accessibiity — добавление атрибутов title и tab index.
Каждую функцию можно анимировать, поэтому все зависит только от вашей фантазии.
Ну а теперь начнем создавать нашу задумку.
Выставляем цветом button темно серый, и применяем функцию shadow чтобы имитировать ее объем
После этого добавляем еще один круг, для внутренней части кнопки с цветом активности.
Тут нам на помощь приходят хоткеи из After Effects, выбираем button и нажимаем Ctrl+D. Переименовываем его в btn_inner, и перетаскиваем его в окне элементы внутрь Button
Теперь мы вложили btn_inner в див Button, и если мы начнем анимировать Button, то btn_inner так же начнет изменяться. Все просто и удобно!
Выключаем Shadow, добавляем в Color цвет бордеру(3й квадратик слева) на красный, и задаем размер 6px. Центрируем наш див, и меняем размер в Transform на 76%. Изменяем цвет на прозрачный, и добавляем Radial градиент
В итоге получаем
Добавляем текст «OFF», ArialBlack 33px, цвет черный, и Shadow красный. Переименовываем в btn_text_off, и засовываем в Button в элементах.
Теперь начнем анимировать. Первым делом добавим к Button эвент(двойные скобочки), справа в элементах. Выбираем click, и нажимаем справа play, теперь по нажатию на див button, у нас будет проигрываться анимация, все просто и элементарно.
Нам нужно изменить shadow у button из dropShadow на InsetShadow, к сожалению добавить несколько shadow в Edge нельзя, поэтому будем хитрить.
Нажимаем на P и у нас в окне таймлайна выбирается элемент pin, он позволяет не создавать самостоятельно каждый кейфрейм, а делать это автоматически. перемещаем ползунок на отметку 0.250 и именяем значение shadow-blur 0. Тем самым у вас получается такая анимация.
Нажимаем еще раз P чтобы выключить pin, перемещаем ползунок на значение 0,5 и в настройки градиента button, и меняем значение как показано на картинке
Добавляем градиент в палитру, и закрываем окошко. Теперь нажимаем опять P, и перемещаемся на отметку 0,250, открываем окно градиента, выбираем градиент из палитры, и меняем из значения на прозрачный не меняя положение точек.
У вас должна получится анимация изменение тени кнопки, проверить можно с помощью клавиш ctrl+enter (и снова привет AE)
Отлично тень меняется, теперь нужно анимировать размер кнопки, т.к. она отдаляется от нас.
Перемещаем ползунок на начало, нажимаем p, выбираем Button, перемещаем на отметку 0.425 и меняем значение transform на 95%.
Так же при создании анимации, можно выбрать как анимация будет происходить, либо линейно, либо по разным шаблонам. Для выбора их, нужно выделить анимацию, и рядом со значком pin нажать на иконку графика. Здесь вы можете поиграться со значениями и выбрать самое подходящее для вас.
Теперь анимируем красный бордер, от 0,250 до 0,500 изменяем значение бордера с красного на голубой.
И получаем примерно так
Содержание текста нельзя анимировать, поэтому сделаем копию текста, и анимируем его прозрачность.
Ctrl+d на тексте, переименовываем в btn_text_on, изменяем цвет на синий, и тень на темно синюю.
С помощью нашего любимого пина, анимируем прозрачность(сверху под глазом), у btn_text_off с 0,115 до 0,305; значения с 1 до 0. У btn_text_on
с 0,250 до 0,425; значения с 0 до 1, чтобы одно на другое немножко заезжало
Проверяем ctrl+enter, все супер.
Осталось сделать двери. Создаем 2 квадрата размером с половину ширины, один ставим слева, другой справа. Соответственно Left_door, Right_door. Цвет для заливки берем из бэкграунда, благо есть палитра которой можно воспользоваться, а сам бэкграунд делаем темнее.
А теперь вкладываем button в left_door, т.к. кнопка будет уезжать вместе с дверью влево. Перемещение в 1 клик, плевое дело, все как нужно.
С помощью пина анимируем левую и правую. Анимируем 0,600 до 3,0 на -480px для левой и для для правой двери 1030px. Выбираем обе анимации и выбираем Easing EasyInOut — Quart.
Чтобы сделать паз для кнопки в правой двери воспользуемся маской, и обрежим круг на половину. Для этого ctrl+d на button, удаляем все вложенные дивы в него, а так же все кейфреймы, и переименовываем в door_right_btn, вкладываем его в Right_door и перемещаем ползунок времени вперед.
Теперь, убираем тень, и заливаем более темным цветом. Переходим в раздел clip, и ставим значение 75 слева. Для эффектности добавляем inset Shadow 7px полупрозрачным черным. А так же анимируем DropShadow у Left_door и Right_door.
И вот наш результат
По окончанию работы под превью окном справа появляется желтый треугольник, там нас предупреждают какие функции в каких браузерах не работают, что несомненно так же удобно.
Чтобы прописать css стили из edge, нужно зайти в event Stage, выбрать compositionReady и прописать
$(«#Stage»).css(«margin»,»auto»); $(«body»).css(«background-color»,»#232323″);
Итого на все про все 30 минут
Все что получилось уже можно редактировать в блокноте, и накручивать что угодно. А на деле мы имеем удобный и быстрый инструмент для создания красивой кросбраузерной анимации.
Написав этот топик, я не претендую на самый простой или самый быстрый способ создания подобной анимации, я просто рассказал что Adobe Edge Animate очень удобная и быстро осваиваемая программа, в которой может разобраться любой человек без опыта работы с JS.
То что получилось можно посмотреть здесь
Пишите вопросы, постараюсь на все ответить, если тема интересная, в ближайшем будущем могу сделать еще пару уроков по Adobe Edge
Источник: habr.com
Adobe представила Edge Animate 1.0 и другие инструменты для работы с HTML5
Компания Adobe завершила бета-тестирование трех инструментов для работы с HTML5, а также сообщила о разработке некоторых новых.
Программа Edge Animate 1.0, известная на этапе тестирования как Adobe Edge, это инструмент для создания HTML5-анимации, аналогичной Flash, но основанной на стандартах HTML, JavaScript и CSS. Программа Edge Animate пока что предлагается бесплатно, а позже будет стоить $14,99 в месяц или же $499 за пожизненную лицензию. Программа также была добавлена к семейству приложений, которые входят в состав Creative Cloud.
Другая разработка — Edge Inspect, ранее известная как Shadow, дает возможность производить отладку приложений на нескольких мобильных устройствах одновременно. А новый сервис Edge Web Fonts предлагает более пятисот бесплатных шрифтов.
Adobe также продемонстрировала два других инструмента из семейства Edge, которые пока что далеки от релиза. Это дизайнерская программа Edge Reflow, которая способствует разработке адаптивных веб-страниц, меняющих структуру, в зависимости от того, на каком устройстве они просматриваются. Вторая разработка — Edge Code редактор кода для программистов, включающий предпросмотр в реальном времени, а также возможность редактировать CSS и JavaScript в режиме работы с HTML. Также открыт доступ к новому облачному сервису PhoneGap Build, предназначенному для разработки приложений для iOS, Android, Windows Phone, webOS, BlackBerry OS, Bada и Symbian с использованием HTML5, CSS и JavaScript.
Материалы по теме:
- W3C планирует закончить работу над HTML 5 в 2014 году, а над HTML 5.1 — в 2016 году;
- Microsoft отметила День программиста выпуском Visual Studio 2012.
Источник:
Источник: 3dnews.ru