Бесплатные видео-уроки

Adobe Edge Animate

Создание графики, анимации и интерактивного контента для веб

  • бесплатно
  • перспективно
  • быстро
  • доступно

Введение в Edge Animate

Видео: 8 мин. 18 сек. Формат: HD.

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

Инновации рулят

Существенные изменения в интернете происходили тогда, когда кто-нибудь создавал что-то принципиально новое, тем самым заставляя вещи работать иначе. Если такой коммерческий продукт работал хорошо и широко признавался, то он становился стандартом de facto. Вот два всем известных примера от компании Adobe:

  • кроссплатформенный формат электронных документов PDF
  • Flash Player

Тем не менее, одними из главных вопросов в интернете всегда были соблюдение прав собственности на такие продукты и патенто-зависимость. Эти проблемы словно платная дорога в центре города. Плюс, авторитеты в области разработки веб-стандартов отличились созданием таких правил, которым следовало лишь небольшое количество веб-разработчиков. В эту категорию, например, попал формат XHTML.

Практичные стандарты

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

С момента появления HTML 5, люди, отвечающие за написание веб-стандартов (W3C) упорно работают над тем, чтобы дать интернет-сообществу понятную карту, ясно показывающую где мы были и куда идем.

Новые возможности

В HTML 5 появилось достаточное количество новых возможностей, но наиболее заметные из них, конечно, те, которые позволяют создавать графику и анимировать ее.

Если Вы думаете, что все это сильно напоминает Flash, то будете правы.

Одна блестящая новая возможность, которую предлагает HTML 5 — это патентонезависимый, полностью соответствующий веб-стандартам способ изменения графики, ее цвета, размеров, формы и положения во времени. Эта техника использует новые теги HTML, а также всю мощь языка программирования JavaScript, а также библиотеку, созданную на его базе — jQuery. Эти технологии с открытым кодом доступны любому пользователю сети независимо от того создает он веб-сайты или веб-браузеры.

Где используется Edge Animate

Если Вам нужна убедительная причина для чего изучать еще одну технологию анимации, то вот Вам целых три:

  • iPhone
  • iPod
  • iPad.

Если Вы flash-дизайнер или flash-разработчик, то уже, наверняка, в курсе дебатов между Apple и Adobe относительно судьбы Flash-технологии. Но как для веб-дизайнера и разработчика для Вас более важен тот факт, что контент, созданный на базе Flash не просматривается в наиболее популярных мобильных устройствах в мире, упомянутых выше. Однако, при использовании HTML 5 и JavaScript Вы сможете добавить своим сайтам солидный кусок аудитории, которая пользуется продукцией Apple и некоторых других производителей.

Почему все-таки Edge Animate

Для начала скажем, что большинство дизайнеров видят мир несколько иначе по сравнению с разработчиками (программистами). Если Вы художник, то Вам, наверное, будет несколько неудобно описывать каждый круг, цвет и линию в Вашем произведении с помощью кода JavaScript, хотя теоретически это возможно :)

Скорее всего Вам будет гораздо удобнее инструмент, который напоминает Adobe Illustrator, Photoshop или Flash. Это именно тот случай, когда на помощь приходит Edge Animate.

У Edge Animate точно такая же шкала времени, что и у Flash и After Effects. Панели Свойства (Properties) и Элементы (Elements) напомнят Вам аналогичные и любимые инструменты рисования и редактирования растровых изображений (фото, например). Когда Вы используете Edge Animate для создания графики в HTML 5, Вы можете полностью сконцентрироваться на разработке, тонкой настройке и подгонке своей работы. Программа сама сгенерирует код HTML 5 и Javascript, который необходим для Ваших веб-страниц.

Где взять Edge Animate

Если Edge Animate еще не установлен на Ваш компьютер, то Вы возможно задаетесь вопросом, а где же его взять. На момент написания этого текста получить эту программу можно бесплатно. Просто станьте членом Adobe Cretaive Cloud и программа Ваша.

Об уроках этого сайта

Задача моих уроков — помочь Вам освоить эту программу в полной мере.

В них Вы найдете пошаговые инструкции использования каждой возможности, которые предлагает Edge Animate, включая те, о которых Вы пока мало что знаете. Например, как встроить код HTML 5 и Java Script в Ваши веб-страницы или внести изменения в уже существующие с помощью этой программы.

В дополнение ко всему, здесь Вы найдете ясную оценку каждой возможности предлагаемой Edge Animate, что поможет понять какие из них действительно Вам полезны, а также где и  как их использовать.

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

Про Windows и Macintosh

В обоих версиях как для Windows, так и для Macintosh Ваши анимации будут воспроизводятся практически идентично .

Кнопки в любых диалоговых окнах выглядят одинаково и выполняют одинаковые функции. Ответ программы на любую команду идентичен.

Одно из существенных отличий между версиями для Windows и Mac — это используемые вспомогательные клавиши потому, что Ctrl в Windows эквивалентен (здесь граф знак) в Macintosh. Поэтому в те моменты, когда в этом курсе будет говориться о клавиатурных командах Вам нужно будет об этом помнить.

Содержание курса

Весь материал курса делится на три части, каждая из которых состоит из нескольких уроков. Познакомьтесь с полным списком уроков Edge Animate. Ну, а если коротко, то:

Часть 1. Работа на сцене

Как театр начинается с вешалки, так и изучение Edge Animate мы начнем со знакомства с рабочим пространством программы. Вы узнаете в деталях о том, как программа создает HTML, JavaScript и CSS. Затем получите первый опыт создания графики в Edge Animate и научитесь импортировать графику из других программ. По ходу дела Вы начнете работать со шкалой времени и панелью Свойства, чтобы заставить двигаться созданные графические элементы. Кроме того мы поработаем с текстом и Вы увидите как легко можно изменять его размер форму и цвет.

Часть 2. Анимация в Edge Animate

Из уроков этого раздела Вы узнаете о том, как анимировать элементы на сцене. Вы познакомитесь с продвинутыми техниками эффективной работы в программе.

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

Вы научитесь управлять шкалой времени, а также редактировать ее и созданные Вами анимационные переходы (transitions).

Несколько уроков будут посвящены триггерам (triggers) и акциям (actions). Вы будете часто использовать их в дальнейшем, автоматизируя анимацию и добавляя интерактивность Вашим веб-страницам.

Часть 3. Edge Animate, HTML 5 и JavaScript

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

Теперь самое время поговорить о создании и сохранении проекта в Edge Animate.


Добавьте комментарий
bbcode:
[br]  [b][/b]  [i][/i]  [u][/u]
[img]link image[/img]
[color=colour][/color]
[url]link[/url]
[url=link]title[/url]
 
* Введите проверочный код
* Поля с красной звездочкой необходимо заполнить