Анимация в Microsoft® Expression® Blend®

С этим уроком также смотрят

Откройте новые возможности продуктов Expression® Studio c нашим новым видеокурсом!


Microsoft® and Expression® are registred trademarks of the Microsoft® group of companies.

Обновлен: 16 ноября 2010

Expression® Blend® 3,
Разработка ПО

Loading the player...
Текст урока
Microsoft® Expression® Blend® — программа, предназначенная для разработки дизайна web интерфейсов и графических настольных приложений. Blend® содержит в себе также ряд инструментов по работе с графическими объектами. Оживить их поможет инструменты по работе с анимацией. Посмотрим, как это работает.

Схема создания анимации в Blend® очень проста, состоит она всего из нескольких шагов:
Во-первых, необходимо создать объект. Для этого можно воспользоваться инструментами Expression® Blend® , такими как «Rectangle», «Ellipse» и «Textblock». Также можно загрузить графический объект, изначально подготовленный в другом приложении. Во-вторых, необходимо создать анимацию и обозначить начальное положение и начальные свойства объекта.
В-третьих, обозначить конечные место положение и свойства объекта.

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

На конкретном примере рассмотрим работу с анимацией и со шкалой TimeLine. Создадим десятиминутный ролик с использованием текста и графических объектов.

Для начала необходимо создать проект. Для этого в меню «File» выберете команду «New project». В появившемся окне укажите название проекта и его расположение. Затем нажмите «Ok».

Проект создан и перед нами появилось белое полотно, на котором мы и будем создавать анимацию.
Для работы с анимацией нам понадобится панель «Object and Timeline». Если в вашем приложении Expression® Blend® эта панель не отображается, поставьте галочку в меню «Window» напротив «Object and Timeline».
На панели «Object and Timeline» пока не отображается сама временная шкала – «Timeline», она появится тогда, когда мы перейдем в режим для работы с анимацией.

Для начала нам необходимо создать несколько объектов, которые и будут оживать благодаря анимации Expression® Blend®. Создадим три круга с помощью инструмента «Ellipse».
Выберете его на панели инструментов, расположенной слева. С помощью курсора мыши определите размер круга, перемещая курсор и одновременно удерживая нажатой левую клавишу мыши. После того, как объект создан, на панели «Properties» вы сможете выбрать стиль и цвет заливки.
Заметьте, что на панели «Object and Timeline» появился новый объект - «Ellipse». Для создания второго и третьего объекта мы сможем просто скопировать объект «Ellipse», а затем нажатием сочетания клавиш «Ctrl + V» вставить объект на рабочую область. Объекты созданы. С помощью инструмента «Selection» мы можем перемещать их.
Теперь создадим три текстовых поля, которые в конце анимации должны будут соединится в одно единое слово. Для этого выберете инструмент «Textblock» и определите размер текстового поля на рабочей области. Выберете характеристика шрифта на панели «Properties». Затем аналогичным способом создайте несколько таких полей и в каждое из них введите слог, который будет являться частью конечного слова.

Теперь, когда всегда элементы созданы, мы можем приступить непосредственно к анимации. Для удобной работы с анимацией переключите рабочее состояние Expression® Blend® на Анимацию, для этого в меню «Window» - «WorkSpaces» выберете «Animation».
Для создания анимации, на панели «Object and Timeline» нажмите кнопку с изображением плюса – «New». В появившейся форме введите название анимации и нажмите «Ok».

На панели «Object and Timeline» появилась временная шкала «Timeline». Также вокруг рабочей области появилась красная рамка и заголовок «timeline recording is on».

Теперь мы можем создать первый ключевой кадр. Для этого выделите все объекты на рабочей области и нажмите кнопку «record keyframe». На временной шкале напротив каждого элемента на первой секунде нашей анимации появился ключевой кадр, с которого и начнется движение объектов.

Для того чтобы создать движение объектов, необходимо переместить желтый ползунок на определенный кадр и изменять свойства объекта. Выберем кадр на третьей секунде анимации и с помощью инструмента «Selection» изменим положение объектов. Также мы можем поменять свойства объекта, например, его размер и цвет. Стоит заметить, что на шкале «Timeline» кадры между ключевыми кадрами были созданы автоматически, чтобы объект плавно перемещался от одного ключевого кадра к другому.

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

После того, как мы изменили конечный ключевой кадр, мы можем перейти к просмотру анимации с помощью временной шкалы «Timeline». На панели отображается время выбранного кадра, а также кнопки воспроизведения. С помощью кнопок «Go to first frame» и «Go to last frame» мы можем перейти к первому и последнему кадру. А с помощью кнопок «Go to previous frame» и «Go to next frame» перейти к предыдущему или следующему кадру соответственно. Кнопка «Play» служит для воспроизведения анимации. Нажмите её.
На рабочей области оживут созданные объекты. С каждым кадром их положение, размер и цвет будут меняться. И только на финальном кадре наша анимация остановится, и все объекты встанут на свое место.

Таким образом, создать анимацию всего за несколько минут – не проблема. Microsoft® Expression® Blend® содержит для этого все необходимые инструменты. Для работы со временной шкалой понадобится лишь создать несколько ключевых кадров, все остальное сделает Blend®, автоматически создав промежуточные кадры.

Microsoft® Expression® Blend® – это универсальная программа, как для профессионалов, так и для новичков. Она позволяет быстро и эффективно создать любую анимацию. Пользователю данного приложения не обязательно знать языки программирования, так как анимацию в Blend® можно создать с помощью простого и удобного визуального редактора.
Комментарии (0)

Оглавление
1. Создание первого проекта и краткий обзор интерфейса 2:36 0 4311
2. Линейки разметки 7:42 1 2020
3. Динамические объекты и шкала времени 5:27 0 1509
4. Изменение порядка объектов на верстаке 1:27 0 1028
5. Настройки объектов 7:03 0 1167
6. Наборы заготовок 1:06 0 1260
7. Панель инструментов 4:34 0 1072
8. Строка меню 8:51 0 1406
9. Анимация в Microsoft® Expression® Blend® 8:42 0 4898
Яндекс цитирования
Нажмите нравится, чтобы читать "TeachVideo.ru" в facebook