Уроки постоянно добавляются
Анимация
- 1. Временная шкала | 3:11
-
- полноэкранный режим
Как работает анимация?
Прежде, чем рассказать, как создавать сайт на флэш, нужно сначала освоить и понять принципы работы в программе Adobe® Flash® CS4. Сначала рассмотрим принципы создания анимации во флэш, затем рассмотрим ActionScript® 3.0, а уж потом рассмотрим создание простого Flash сайта.
Чтобы понять, как работает анимация, нужно понять, как работает временная шкала, которая содержит слои. Эти слои можно создавать, удалять, объединять в группы и перемещать их относительно друг друга. Также Вы видите, что линия времени состоит из последовательности кадров, по которым можно перемещаться, передвигая маленький вертикальный прямоугольник красного цвета, расположенный над слоями.
Данный прямоугольник является воспроизводящей головкой, перемещая которую, Вы можете перемещаться по своей анимации. Временная шкала – это последовательность пронумерованных кадров. У каждого кадра есть порядковый номер, который проставлен над каждым пятым кадром.
Если воспроизводящая головка находится на непронумерованном кадре и нужно узнать номер текущего кадра, то можно, либо просчитать его самостоятельно по отрезкам временной шкалы, либо проверить текущий кадр в нижней части временной шкалы. Здесь же можно быстро перейти к нужному кадру, изменив значение на искомый номер кадра.
Просмотреть результат созданной анимации можно при нажатии горячих клавиш CTRL + ENTER или, воспользовавшись верхним меню – управление – тестировать ролик.
В появившемся окне вы видите результат своей созданной анимации, воспроизведение которой повторяется снова и снова.
Анимация – это набор статических кадров, в каждом из которых объект занимает другое положение. И когда Вы перемещаете воспроизводящую головку с, достаточно большой скоростью, Вы получаете иллюзию анимации, хотя на самом же деле, анимации никакой нет. Следует отметить еще и скорость перемещения воспроизводящей головки по кадрам. По умолчанию, данная скорость равна 24-рём кадрам в секунду. Скорость показывается в нижней части временной шкалы. Текущую скорость можно в любой момент изменить, достаточно лишь ввести нужное значение в ячейку.
Данная скорость означает, сколько кадров показывается за одну секунду времени. Чуть правее от значения скорости в нижней части временной шкалы отображается текущий промежуток времени. В нижней части линии времени расположены и другие иконки, облегчающие работу с анимацией, но о них расскажем в следующих уроках.
- 2. Кадры и ключевые кадры 1 часть | 3:11
- - полноэкранный режим
Создание простой Флеш анимации
В этом уроке Вы узнаете о кадрах и ключевых кадрах, а также научитесь создавать анимацию мигающего квадрата на сцене.
Ключевой кадр – это разновидность кадра, в котором происходит что-то новое, например, сейчас Вы видите нарисованный на сцене квадрат. Квадрат, как уже заметили, нарисован в первом кадре, который является ключевым. Об этом свидетельствует черный кружок, находящийся внутри данного кадра. Если сцена данного кадра пуста, то кружок будет отображаться белым с черной обводкой.
Теперь, создадим простую анимацию – мигание нарисованного квадрата. Для создания такой анимации, вы должны сначала задать себе вопрос «сколько данная анимация будет длиться по времени». Например, Вы хотите, чтобы данный квадрат оставался на сцене одну секунду, а затем исчезал. Одна секунда – это 24 кадра.
Это можно узнать из скорости перемещения воспроизводящей головки по временной шкале. В результате, нужно сделать так, чтобы квадрат оставался на сцене 24 кадра, а затем пропадал. Для этого, выделите 25-й кадр, в котором квадрат должен исчезнуть. О выделении свидетельствует, окрашенный в голубой цвет, прямоугольник.
Выбрав 25-й кадр, в верхнем меню, выберите «вставка» - временная шкала – ключевой кадр. В этом ключевом кадре должно произойти что-то новое, а именно, данный квадрат должен исчезнуть. Поэтому, оставаясь на 25-том кадре, выберите квадрат и удалите его со сцены. Кадр станет пустым.
В результате, 24-кадра, то есть одну секунду, квадрат находится на сцене, а 25-тый кадр становится пустым, т.к. квадрат в текущий момент удален.
Например, вы хотите, чтобы квадрата не было на сцене ровно одну минуту, для этого нужно расширить 25-й кадр на одну секунду, то есть до 48-го кадра. Выделите 48-й кадр, затем в верхнем меню выберите: вставка – временная шкала – кадр. В данном кадре ничего нового не происходит, а повторяется все, то же, что было в предыдущих кадрах.
В результате тестирования анимации видно как, квадрат одну секунду находится на сцене, затем исчезает ровно на одну секунду.
- 3. Кадры и ключевые кадры 2 часть | 2:01
- - полноэкранный режим
Как сделать Флеш анимацию?
Теперь попробуем сделать анимацию посложнее. Например, нужно сделать так, чтобы квадрат, сначала находился в левой части сцены, потом в правой, а затем исчез. Сначала определите, какое количество времени квадрат должен находиться в левой части сцены. Например, полсекунды. Полсекунды – это 12 кадров, следовательно, нужно выделить 12й кадр, а затем вставить ключевой кадр. «Меню»-«вставка»-«временная шкала»-«ключевой кадр». После чего переместите квадрат в правую часть сцены. Затем выделите первый ключевой кадр и переместите квадрат в левую часть сцены.
В результате, полсекунды квадрат сначала располагается в левой части сцены, затем полсекунды – в правой части сцены, а потом целую секунду, отсутствует.
Если вдруг необходимо изменить положение квадрата на другое, то нужно поставить воспроизводящую головку между ключевыми кадрами, а затем поменять положение объекта. Поясним, что за первое положение квадрата, отвечает первый ключевой кадр, следовательно, чтобы изменить положение квадрата, нужно поставить воспроизводящую головку между первым и 12-тым кадром. Для изменения второго положения квадрата, воспроизводящую головку нужно поставить между 12-тым и 24-тым кадром.
При тестировании ролика, вы видите другую анимацию, поскольку положения квадрата поменяли.
- 4. Как сделать покадровую анимацию в Adobe Flash CS6 | 3:24
- - полноэкранный режим
Как создать покадровую анимацию?
Бывают случаи, когда необходимо сделать анимацию движения губ персонажа или движения каких-либо объектов на сцене и для этого иногда удобно пользоваться покадровой анимацией, то есть объект анимировать покадрово. Например, стоит такая задача, как сделать покадровую анимацию объекта, взлетающего вверх и падающего вниз.
Пусть это будет, некий мяч, поэтому выберите инструмент «Овал» и нарисуйте на сцене мячик, удерживая клавишу «Шифт».
Для создания покадровой анимации, выделите второй кадр и нажмите клавишу «F6». Данная горячая клавиша отвечает за создание ключевого кадра. Как видно, созданный ключевой кадр ничем не отличается от предыдущего. Сделаем так, чтобы он отличался. Переместим объект чуть выше, имитируя его взлет вверх. Затем снова нажимаем F6 и снова перемещаем объект и так повторяйте эти действия до тех пор, пока объект, то есть мяч не пройдет нужный путь. Как видите, создавать анимацию таким способом достаточно трудоемко и длительно. Но в некоторых случаях без покадровой анимации не обойтись. Если делать покадровую анимацию вручную, то она может получиться неестественно, поэтому рассмотрим другой вариант – это создание покадровой анимации с использованием направляющего слоя.
Итак, сначала удалим созданные кадры, для этого выделите все кадры кроме первого и нажмите комбинацию горячих клавиш «Шифт + ЭФ5». Затем заблокируем первый слой, создадим второй слой и нарисуем на сцене прямую линию с помощью инструмента «линия».
После чего выберите инструмент «выделение» и искривите линию вверх. Удерживая клавишу ALT, создадим две дополнительные точки и опустим их вниз. В результате должна получиться направляющая линия будущей анимации.
Теперь второй слой заблокируем, а первый разблокируем. Обратите внимание, чтобы привязка к объектам была включена. Чтобы привязать объект к направляющей линии, достаточно выделить его и центр объекта переместить на линию, тем самым центр объекта автоматически будет присоединяться к линии.
Затем выберите первый кадр и нажмите F6, после чего измените положение объекта, привязывая его к линии. Затем снова нажимаем F6 и снова меняем положение, и так до тех пор, пока объект не пройдет весь заданный путь. В результате получится более естественная анимация объекта.
- 5. Режим многослойной структуры | 3:36
- - полноэкранный режим
Как анимировать объект в режиме многослойные структуры?
В этом уроке рассмотрим создание покадровой анимации в режиме многослойной структуры. Для этого сначала нужно нарисовать объект, который будете анимировать.
Пусть это будет тот же мячик или шарик, например. Задача такая, чтобы данный объект, взлетел, затем упал вниз.
Нарисовав объект, создадим второй слой, на котором нарисуем направляющую линию и искривим ее. После чего, второй слой заблокируем. Затем нужно определить, сколько кадров будет длиться анимация, например – 10 кадров. Значит, выделим 10-тый кадр на втором слое и нажмем F5. Тем самым продлили длительность направляющей линии.
Теперь, выделим 10-ый кадр на первом слое и вставим ключевой кадр, нажав F6. В результате получится два кадра. Начало и конец анимации. Находясь на 10-том кадре, с помощью инструмента привязки, переместим объект в конечную точку и привяжем объект к линии.
Теперь, выделив первый кадр, включите режим многослойной структуры, нажав на одноименную иконку внизу временной шкалы. Где расположена воспроизводящая головка, появились квадратные скобки, которые можно растянуть на всю линию времени.
Как видно, на сцене появилось два объекта с разной прозрачностью. Многослойная структура показывает предыдущее положение, текущее положение и последующие положения вашего объекта.
Итак, выберите пятый кадр и вставьте ключевой кадр, и в этом ключевом кадре поменяйте положение объекта, например, переместив его на середину пути. В результате, видим визуальную подсказку, где объект находился в предыдущем кадре, где находится сейчас, и где он будет находиться в следующем кадре. Данный режим облегчает создание покадровой анимации, потому что вы видите и представляете всю создаваемую анимацию.
Теперь проделайте ту же процедуру, которую уже сделали. Выберите средний кадр, между пятым и 10-тым, нажмите F6, чтобы вставить ключевой кадр, затем разместите объект между предыдущим и следующим объектом. Повторяйте данную процедуру многократно до тех пор, пока не создадите требуемую анимацию.
Когда создание анимации завершено, отключаем режим многослойной структуры и, нажав клавиши CTRL + Enter, тестируем результат ролика.
Также стоит отметить, что у данного режима есть его разновидность, которая активируется по соответствующей иконке внизу временной шкалы. «Контуры многослойной структуры» – в данном режиме показывается не прозрачная заливка размещаемых элементов, а их контуры.
- 6. Редактирование нескольких кадров | 1:07
- - полноэкранный режим
Настройки анимации – редактирование нескольких кадров
В этом уроке рассмотрим настройку анимации – режим редактирования нескольких кадров. Продолжая создавать анимацию, допустим, стоит такая задача, чтобы переместить анимацию к нижнему краю сцены.
Обратите внимание, что, прежде всего, слой с направляющей линией должен быть удален, а режим многослойной структуры должен быть отключен. Затем включите режим редактирования нескольких кадров.
В результате, на сцене должны появиться все объекты. После чего, выделим все созданные кадры и отредактируем положение всех объектов на сцене, переместив их чуть ниже.
После редактирования положения объектов, обязательно отключите данный режим, иначе можно нарушить всю структуру созданной анимации.
В итоге, анимация объектов смещена к нижнему краю сцены.
- 7. Анимация движения | 1:52
- - полноэкранный режим
Создание анимации движения
Поскольку, создание покадровой анимации является, достаточно, долгим процессом, в этом уроке рассмотрим создание анимации движения с помощью встроенных методов во Flash.
Сначала нарисуем на сцене объект, например звезду, с помощью инструмента «многоугольник». Затем выделим данный объект и, нажав правую кнопку мыши, выберем действие «создать анимацию движения».
Поскольку, можно анимировать только символы, программа спросит разрешение о том, чтобы нарисованный объект превратить в символ. Ответив утвердительно, анимация кадра автоматически расширится на 24 кадра, то есть на одну секунду. При этом воспроизводящая головка будет находиться на 24-том кадре. Теперь нужно указать конечное положение объекта, переместив его в нужную область на сцене.
Тем самым, автоматически будет создан вспомогательный путь движения, на котором отмечены точки положения объекта в определенном кадре.
Также стоит отметить, что при желании, Вы можете изменить траекторию движения объекта либо с помощью инструмента «выделение», либо с помощью инструмента «частичное выделение». Выбрав любой из инструментов, Вы сможете, как угодно, изменить траекторию движения объекта.
В результате тестирования ролика, видна только анимация движения объекта, а вспомогательный путь движения виден только при редактировании анимации.
- 8. Сглаживание анимации | 0:57
- - полноэкранный режим
Плавная анимация
Рассмотрим создание более естественной и плавной анимации. Для этого нарисуем объект и добавим анимацию движения, как это делали в прошлом уроке.
Затем выделим слой, на котором анимируется объект и раскроем панель «свойства». На данной панели присутствует такая опция, как «замедление». Если значение выставить на «минус сто», то движение объекта будет плавно ускоряться. Если же в значении выставить цифру «сто», то движение объекта будет плавно замедляться.
Чтобы визуально просмотреть анимацию объекта, протестируем ролик, нажав клавиши CTRL + Enter
- 9. Создание собственного анимационного пути | 2:06
- - полноэкранный режим
Как создать анимацию движения?
В этом уроке рассмотрим собственный способ создания направляющего пути для анимации движения. Для этого, выберите инструмент «карандаш» и нарисуйте свой собственный путь движения объекта. После чего, выделите нарисованный контур и сгладьте его с помощью дополнительных опций, которые доступны в нижней части панели инструментов. В результате получилась будущая траектория Вашего объекта. Выделите полученный контур, после чего, нажмите сочетание клавиш CTRL + X, чтобы скопировать данный путь в буфер обмена и удалить его со сцены.
Теперь нарисуйте форму, которую будете анимировать. Затем, выделив полученную форму, нажмите правую кнопку мыши и выберите, уже знакомое действие, «создать анимацию движения».
Чтобы создать анимацию движения по тому контуру, который скопировали в буфер обмена, нужно переместить воспроизводящую головку между первым и конечным кадром, а затем нажать сочетание клавиш «CTRL + V».
В результате, анимация движения будет повторять тот контур, который Вы нарисовали. Если одной секунды для данной анимации Вам мало, то увеличьте ее. Для этого, наведите курсор мыши на последний кадр, затем нажав и удерживая левую кнопку мыши, переместите курсор вправо. Тем самым, расширив длительность анимации. Для просмотра итогового результата, протестируйте ролик.
- 10. Ориентация объекта по анимационному пути | 2:10
- - полноэкранный режим
Анимация по траектории движения
В этом уроке рассмотрим создание анимации таким образом, чтобы ориентация объекта изменялась по анимационному пути.
Сначала нарисуем контур будущей траектории, а затем сглаживаем, копируем его в буфер обмена и удаляем со сцены. Подробно данные действия описывать не будем, поскольку, их рассматривали в предыдущих уроках.
Теперь нарисуем, например, стрелку, которая будет двигаться по заготовленному анимационному пути. После чего, выделим объект, и создадим анимацию движения. Затем, переместив воспроизводящую головку между начальным и конечным кадром, вставим заранее заготовленный контур траектории движения. В результате, объект будет перемещаться по данному анимационному пути. Теперь нужно сделать так, чтобы при перемещении, менялась и ориентация объекта, то есть нужно, чтобы кончик стрелки двигался параллельно заданному пути.
Для этого, отобразим панель свойств. После чего выделим первый кадр, затем выберем инструмент свободного преобразования и выделим объект. Теперь нужно повернуть стрелку так, чтобы ее кончик смотрел в след своего движения. Потом нужно выделить последний кадр и повернуть стрелку в конец своего движения. А на панели свойств, отметить галочкой опцию «ориентировать по траектории».
В результате, программа автоматически создаст ключевые кадры, которые показывают новое положение объекта с учетом его вращения по траектории.
- 11. Анимация формы | 1:41
- - полноэкранный режим
Создание анимация формы
В этом уроке рассмотрим создание анимации формы. Сначала, нарисуем на сцене объект, например, треугольник. Затем, определив длительность анимации, выделим нужный кадр, например, 24-й и нажмем клавишу F6, чтобы вставить ключевой кадр. После чего, трансформируем форму, или удаляем ее и рисуем другую, например, квадрат. Потом, на шкале анимации нажимаем правую кнопку мыши и выбираем «создать анимацию формы». В результате получается анимация, где треугольник превращается в квадрат.
Создать анимацию формы можно и другим способом. Для этого, нарисовав фигуру, выделите ее и нажмите правую кнопку мыши, а затем, выберите действие «создать анимацию формы». В результате, ничего не изменится. Но стоит выбрать другой кадр, нажать клавишу «F6 или F7 и вставить новую форму или трансформировать существующую, то объект будет анимироваться, превращаясь из треугольника в новую форму. Данную операцию можно проделывать многократно, тем самым, добиваясь желаемых результатов.
- 12. Подсказки формы | 3:34
- - полноэкранный режим
Подсказки формы
В этом уроке Вы научитесь использовать подсказки формы, позволяя понимать программе то, какую анимацию хотите создать. На примере рассмотрим трансформацию латинской буквы «T» в латинскую букву «V». Для этого понадобится инструмент «текст», выбрав который, напишем на сцене букву «V». После чего, нажимаем клавишу «ESC», чтобы выйти из редактирования текста, потом нажимаем клавишу «Q», для выбора инструмента свободного преобразования и, удерживая клавишу «Шрифт», увеличиваем размер буквы до, максимально большого.
После чего, выделяем объект, нажимаем правую кнопку мыши и выбираем «разделить», чтобы превратить объект, в простую форму. Далее, выбираем 24-й кадр и нажимаем «F7». В пустом кадре, аналогичным образом, напишем латинскую букву «T». Для удобства, включим режим многослойной структуры, чтобы видеть то, что происходит на сцене.
Далее, кликаем правой кнопкой мыши между двумя ключевыми кадрами, выбираем «Создать анимацию формы». Чтобы увидеть, как происходит трансформация одного объекта в другой, расширим квадратные скобки режима многослойной структуры. Затем, данный режим можно отключить.
В результате, анимация происходит не совсем так, как хотелось бы, поэтому с помощью подсказок формы нужно дать программе понять, какой результат вам нужен.
Для этого, обратимся к верхнему меню и выберем «модификация» - «Фигура» - «Добавить хинт кривой». И сразу запомним комбинацию горячих клавиш «CTRL+SHIFT+H». Данная команда добавляет на сцену красную точку, пронумерованную латинской буквой. Поскольку нужно сделать так, чтобы габаритные углы, нарисованных букв, оставались на своих местах, то переместим красную точку в левый верхний угол буквы «V». Затем выделим второй ключевой кадр, добавим подсказку формы, нажав «CTRL + SHIFT + H» и переместим красную точку в левый верхний угол буквы «T». Если точка меняет свой цвет на зеленый, то это означает, что программа правильно Вас «поняла», и знает, какую анимацию хотите создать.
Проделаем аналогичные действия и с правой частью букв.
В результате, видим именно тот результат, который нужно было достичь.
- 13. Анимация маски | 1:52
- - полноэкранный режим
Как анимировать маску?
В этом уроке рассмотрим, как анимировать маску. Первым делом, нужно создать текст, который будет появляться при использовании анимации маски. Для этого, выберите инструмент «Текст», напишите свой текст и отформатируйте его удобным для Вас образом. Перед нами следующая задача: нужно сделать так, чтобы текст, плавно появлялся на сцене.
Для этого, создайте новый слой, и переименуйте его на слой «mask». Предыдущий слой переименуйте на слой «text» и временно заблокируйте. На слое «mask», нарисуйте яркую полоску с помощью инструмента «прямоугольник». Затем выделите полоску с помощью инструмента выделения и, нажав правую кнопку мыши, выберите «создать анимацию движения».
После чего, выберите инструмент свободного преобразования и увеличьте ширину полоски так, чтобы она закрыла собой текст. Потом выделите последний кадр на слое с текстом и нажмите F5, чтобы расшить последний кадр.
Для завершения создания анимации маски, выделите слой «mask», и, нажав правую кнопку мыши, выберите «Маска».
В результате, Вы видите, как текст, плавно появляется. Таким образом, Вы научились создавать анимацию маски.
