Понедельник, 19.02.2018, 11:07Главная | Регистрация | Вход

Меню сайта

Точное время

Опрос Сайта

Добавить уроки по Photoshop?
Всего ответов: 22

Поиск

Начальные знания который потребуются для создания анимации - Форум
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Флеш » Flash Анимация » Начальные знания который потребуются для создания анимации (во флеш)
Начальные знания который потребуются для создания анимации
Smitg9Дата: Вторник, 27.10.2009, 22:53 | Сообщение # 1
Подполковник
Группа: Администраторы
Сообщений: 109
Награды: 1
Репутация: 51
Статус: Offline
Урок первый(часть 1)
Корневой ролик - та область, с которой начинается работа. В нем есть последовательность кадров, в нем можно создать несколько слоев.

Объект (символ, мувик) - по сути, маленький самостоятельный ролик - в нем, так же как и в корневом ролике есть свои кадры и слои. В объектах может быть любая графика и другие объекты. Объекты имеют свои параметры и характеристики, в них даже есть своя (внутренняя) система координат.

Кадр - область ролика, разделенная по времени.

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

1 это "выделение" с помощью него можно выделять прямоугольные области графики и объекты
2 это так называемое "суб выделение" при помощи него можно координировать
3 "прямая" - позволяет нарисовать прямую линию
4 "лассо" - можно захватывать часть изображения
5 "pen-tool" - (перевода я не знаю) позволяет нарисовать линии по точкам и задать угол между каждой
6 "текст"- текстовый ввод
7 "круг"- рисует окружность, либо овал
8 "квадрат" - рисует квадрат либо прямоугольник
9 "карандаш" - рисование от руки, карандашом
10 "кисть" -рисование кистью
11 "трансформация" -вращение, изменение размеров
12 "изменение заливки"- позволяет управлять заливкой: направление, радиус
13 "чернила"- придает дополнительную толщину
14 "заливка"- можно заливать цветами объекты
15 "пипетка" можно выбрать любой цвет из пределов рабочей области Flash MX
А теперь перейдем к практическому применению каждого из инструментов, для начала выбери из панели инструмент круг и потащи указатель на рабочей области вправо и одновременно вниз. У тебя получилось некое подобие круга, а чтобы получился точно круг, то нужно плюс ко всему во время рисования зажать shift.

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

Теперь если вы выделите наш объект инструментом выделение(см.выше), то в панели "свойства" должно появиться следующее:

Где:
1 - высота объекта
2 - ширина объекта
3 - положение по оси Х
4 - положение по оси Y
5 - заливка
6 - толщина линий обводки
7 - цвет линий обводки
8 - вид линий обводки
9 - настройка линий обводки

Я думаю, что если вы сами поэкспериментируете , со всеми параметрами, то вы быстро разберётесь со всем сами. Я расскажу вам поподробнее о панели "свойства": она отображает свойства активного(т.е. того которого вы выделили) объекта. По умолчанию она выглядит так:

1 - настройки публикации
2 - размер сцены
3 - фон сцены
4 - скорость смены кадров
Теперь вернёмся к нашему кругу и выделим его с помощью инструмента "трансформация"

Если перевести курсор в точку

1 - получаете возможность изменения размеров высоты
2 - изменение размеров ширины
3 - одновременно и ширина и высота
4 - вращение

Теперь давайте зальём наш круг градиентом, для этого выберите инструмент "заливка". А затем в панели "свойства" выберем цвет зелёный градиент

и щелкнем в центре нашего круга, получиться приблизительно это:

Но еще можно подкорректировать заливку, для этого выберем инструмент "изменение заливки" с снова щелкнем в центр круга, появиться круг отражающий состояние заливки, им можно управлять(очень похоже на то что я описал выше, инструмент трансформация). Далее я думаю не имеет смысла разбираться с остальными инструментами, так как если самому поэкспериментировать с ними, то вы все помёти сами. А какие никакие, основные навыки работы во Flash интерфейсе вы получили.

Теперь пришло время разбираться с анимацией и символами. Давайте для начала посмотрим что такое timelalane (далее таймлайн)

1 - слой (их может быть неограниченно), о них подробнее ниже
2 - скрыть то что нарисовано в слое
3 - запереть слой для редактирования
4 - отображать лишь контуры слоя
5 - активный фрейм (потому, что на нем стоит каретка)
6 - следующий фрейм (кадр)
7 - каретка которая показывает фрейм,который сейчас отображается в рабочей области
8 - создать слой
9 - создать направляющий слой
10 - создать папку, в которую можно помещать слои
11- удалить слой

Теперь подробнее о том что такое слой. Можно легко понять если предположить, что у вас есть прозрачное стекло, под ним лежат листки бумаги на которых что то нарисованно. То же самое и здесь. Что такое покадровая анимация? Во Flash`e есть два способа рисования анимации. Первый- вы сами всё рисуете в каждом кадре, не очень продуктивный в следствие зачастую большого размера фаила, способ, но иногда незаменимый.

Есть также и второй способ, где вы указываете первый и конечный кадр, а Flash дорисовывает все за вас! Сейчас я расскажу о покадровой анимации, как я уже говорил в покадровой анимации художник рисует каждый новый кадр сам. Чтобы проделать подобное надо научиться вставлять кадры. Щелкните на таймлайне, пером кадре и нажмите f6, это вы вставили ключевой кадр (т.е. повторяющий содержание предыдущего), теперь измените содержание вашего вставленного фрейма, и снова вставляете следующий кадр.

И так пока не добьётесь своей цели, это и есть покадровая анимация. Есть еще один способ анимации, где flash рисует за вас. Давайте нарисуем не очень большой кружок в правом нижнем углу что то вроде этого:

выделим его, как на рисунке и преобразуем в объект, нажмем f8 и появиться вот такая панелька:

Где:
1 - выравнивание
2 - название символа(может быть любое)
3 - анимационный клип (в этот тип стот преобразовывать если ваш символ имеет кокое либо движение)
4 - кнопка, имеет четыре фиксированных положения(подробнее о кнопках в следущем уроке)
5 - графика, стоит преобразовывать если у вас объект статичен

Нам же нужен movie clip, ставим галочку и жмем ОК. Теперь на таймлайне вставляем ключевой (F6) фрейм на отметке 20

Во фрейме номер двадцать наш кружок из правого нижнего угла перемещаем в левый верхний угол

А затем ВНИМАНИЕ, выделяем первый фрейм и щелкаем правой кнопкой, выбираем create motion tween или также выделяем первый фрейм и в панели свойства выбираем Tween - motion. Таймлайн тут же окрашивается в сиреневый цвет

Теперь жмем Control+Enter и смотрим. Как ты наверно понял Flash за тебя нарисовал кадры 2-19. Давай теперь сделаем чтобы наш круг появлялся из ниоткуда, выдели круг в первом фрейме и в панели свойства выбери color - alpha - 34%, ну как. Если ты еще поэкспериментируешь сам то ты много чего поймешь, так что давай.

Теперь еще один пример анимации, как сделать из квадрата синего цвета круг зеленого. Нарисуйте в первом фрейме квадрат синего цвета. Вставьте ключевой кадр на отметке 20, и удалите из него квадрат, а на его месте нарисуйте крут зеленого цвета. Теперь выделите первый фрейм, в панели свойства выберите tween - snape.

Если вы сделали все правильно, то таймлайн должен окраситься не в сиреневый как предыдущем случае, а в зеленоватый цвет. Здесь анимация связана с изменением свойств самого объекта т.е. цвет, форма она называется Shape Tween. А рассмотренная в предыдущем случае, связанная с размерами и положением объекта, его прозрачностью и прочими эффектами Motion Tween.

Что то типа предисловия, на рассмотренных примерах я рассмотрел лишь простые объекты, типа круг и квадрат. Они могут быть любыми. И ЕЩЕ раз повторюсь, если вы будете сами экспериментировать на основе полученных здесь сведений, то вы не только быстрее разберетесь что к чему, но и создадите что-то своё.

 
Smitg9Дата: Вторник, 27.10.2009, 23:17 | Сообщение # 2
Подполковник
Группа: Администраторы
Сообщений: 109
Награды: 1
Репутация: 51
Статус: Offline
Урок первый(часть 2)
Теперь вернёмся к нашему кругу и выделим его с помощью инструмента "трансформация"

Если перевести курсор в точку

1 - получаете возможность изменения размеров высоты
2 - изменение размеров ширины
3 - одновременно и ширина и высота
4 - вращение

Теперь давайте зальём наш круг градиентом, для этого выберите инструмент "заливка". А затем в панели "свойства" выберем цвет зелёный градиент

и щелкнем в центре нашего круга, получиться приблизительно это:

Но еще можно подкорректировать заливку, для этого выберем инструмент "изменение заливки" с снова щелкнем в центр круга, появиться круг отражающий состояние заливки, им можно управлять(очень похоже на то что я описал выше, инструмент трансформация). Далее я думаю не имеет смысла разбираться с остальными инструментами, так как если самому поэкспериментировать с ними, то вы все помёти сами. А какие никакие, основные навыки работы во Flash интерфейсе вы получили.

Теперь пришло время разбираться с анимацией и символами. Давайте для начала посмотрим что такое timelalane (далее таймлайн)

1 - слой (их может быть неограниченно), о них подробнее ниже
2 - скрыть то что нарисовано в слое
3 - запереть слой для редактирования
4 - отображать лишь контуры слоя
5 - активный фрейм (потому, что на нем стоит каретка)
6 - следующий фрейм (кадр)
7 - каретка которая показывает фрейм,который сейчас отображается в рабочей области
8 - создать слой
9 - создать направляющий слой
10 - создать папку, в которую можно помещать слои
11- удалить слой

Теперь подробнее о том что такое слой. Можно легко понять если предположить, что у вас есть прозрачное стекло, под ним лежат листки бумаги на которых что то нарисованно. То же самое и здесь. Что такое покадровая анимация? Во Flash`e есть два способа рисования анимации. Первый- вы сами всё рисуете в каждом кадре, не очень продуктивный в следствие зачастую большого размера фаила, способ, но иногда незаменимый.

Есть также и второй способ, где вы указываете первый и конечный кадр, а Flash дорисовывает все за вас! Сейчас я расскажу о покадровой анимации, как я уже говорил в покадровой анимации художник рисует каждый новый кадр сам. Чтобы проделать подобное надо научиться вставлять кадры. Щелкните на таймлайне, пером кадре и нажмите f6, это вы вставили ключевой кадр (т.е. повторяющий содержание предыдущего), теперь измените содержание вашего вставленного фрейма, и снова вставляете следующий кадр.

И так пока не добьётесь своей цели, это и есть покадровая анимация. Есть еще один способ анимации, где flash рисует за вас. Давайте нарисуем не очень большой кружок в правом нижнем углу что то вроде этого:

выделим его, как на рисунке и преобразуем в объект, нажмем f8 и появиться вот такая панелька:

Где:
1 - выравнивание
2 - название символа(может быть любое)
3 - анимационный клип (в этот тип стот преобразовывать если ваш символ имеет кокое либо движение)
4 - кнопка, имеет четыре фиксированных положения(подробнее о кнопках в следущем уроке)
5 - графика, стоит преобразовывать если у вас объект статичен

Нам же нужен movie clip, ставим галочку и жмем ОК. Теперь на таймлайне вставляем ключевой (F6) фрейм на отметке 20

Во фрейме номер двадцать наш кружок из правого нижнего угла перемещаем в левый верхний угол

А затем ВНИМАНИЕ, выделяем первый фрейм и щелкаем правой кнопкой, выбираем create motion tween или также выделяем первый фрейм и в панели свойства выбираем Tween - motion. Таймлайн тут же окрашивается в сиреневый цвет

Теперь жмем Control+Enter и смотрим. Как ты наверно понял Flash за тебя нарисовал кадры 2-19. Давай теперь сделаем чтобы наш круг появлялся из ниоткуда, выдели круг в первом фрейме и в панели свойства выбери color - alpha - 34%, ну как. Если ты еще поэкспериментируешь сам то ты много чего поймешь, так что давай.

Теперь еще один пример анимации, как сделать из квадрата синего цвета круг зеленого. Нарисуйте в первом фрейме квадрат синего цвета. Вставьте ключевой кадр на отметке 20, и удалите из него квадрат, а на его месте нарисуйте крут зеленого цвета. Теперь выделите первый фрейм, в панели свойства выберите tween - snape.

Если вы сделали все правильно, то таймлайн должен окраситься не в сиреневый как предыдущем случае, а в зеленоватый цвет. Здесь анимация связана с изменением свойств самого объекта т.е. цвет, форма она называется Shape Tween. А рассмотренная в предыдущем случае, связанная с размерами и положением объекта, его прозрачностью и прочими эффектами Motion Tween.

Что то типа предисловия, на рассмотренных примерах я рассмотрел лишь простые объекты, типа круг и квадрат. Они могут быть любыми. И ЕЩЕ раз повторюсь, если вы будете сами экспериментировать на основе полученных здесь сведений, то вы не только быстрее разберетесь что к чему, но и создадите что-то своё.

 
Smitg9Дата: Среда, 28.10.2009, 13:33 | Сообщение # 3
Подполковник
Группа: Администраторы
Сообщений: 109
Награды: 1
Репутация: 51
Статус: Offline
Урок второй
( создаем первый полнофункциональный клип, Библиотека - что такое? Закрепление работы со слоями )
Слои необходимы для того, чтобы разделять как обособленные объекты, так анимированные композиции состоящие из нескольких объектов, также просто для того чтобы вы могли раскидать фрагменты сцены по слоям, как вам удобно. Размер файла не изменяется от количества слоев
Библиотека- это место где хранятся все ваши объекты. Вы можете импортировать в нее также растровые изображения и звуки (об этом подробнее на сл.занятии). Достаточно один раз создать какой либо объект либо поместить его в библиотеку, чтобы использовать его потом множество раз, причем меняя его размер место положение цвет. Основное окно библиотеки в интерфейсе Flash по умолчанию невидимо но по нажатию клавиш ctrl+L оно должно появиться


1 - название объекта
2 - область просмотра объекта
3 - развернуть окно на полную
4 - свернуть окно на полную
5 - удалить объект
6 - свойства объекта
7 - создать папку
8 - новый символ
Мы повторили что такое слои и рассмотрели библиотеку, самое время создать ролик который все это свяжет (пример смотри в самом конце страницы). Для начала давайте создадим новый файл (ctrl+N, если ты действительно хочешь научиться что-то делать быстро, то тебе надо освоить горячие клавиши, я всегда их указываю в скобках, но ты конечно можешь рыскать в различных менюшках ища нужную команду).

Указываем размер сцены 200Х200, цвет фона черный, если кто забыл это делается в панели "свойства". Далее рисуем окружность и выбираем инструмент "заливка", а теперь обратим внимание на панель "цветовой микшер"(shift+f9)

Здесь в поле 5 выбираем radial, затем щелкаем по бегунку 3 и в поле 9 пишем FFFFFF, теперь щелкаем по бегунку 6 и пишем в поле 9 - FF0000. Теперь о поле -это если вы хотите выбрать цвет для бегунка из предложенных визуально, поле 2 отображает результат смешения, поле 7 и 8 соответственно для выбора цвета м его дополнительных оттенков. Заливаем наш круг, получиться примерно следующее:

Теперь выделяем наш круг, в панели "свойства" выбираем размер 64.5 на 64.5. Далее F8 modify (указываем имя-big circle) -> graphik -> OK. Щелкаем на фрейме 20 - f6 на фрейме 36 - f6 и на фрейме 50 тоже. Выделяем наш круг в двадцатом фрейме (не двадцатый фрейм ,а круг в нем) и в панели свойства пишем color - alpha - 0%, то же самое и во фрейме 36. Правый клик на фрейме 1-> Create Motion Tween, на фрейме 36 то же самое. Добавляем 6 слоев и даем им имена sphere 1 -> sphere 6 + слой с названием loading text

В слое sphere 1 ставим ключевой(F6) кадр на отметке 15 открыв окно библиотеки перетаскиваем из нее символ big circle в центр круга и задаем размер ему 30Х30

Проделываем то же самое в слоях sphere 2...sphere 6, в результате если вы поставите каретку на фрейм 15 то увидите что-то типа

Где 1 -Наш большой круг, а 2 -шесть маленьких кружочков, которые вы по на вставляли в sphere 1.....sphere 6. Переходим снова к слою sphere 1, ставим ключевой кадр на фрейме 25 и оттаскиваем шарик от центра как показано на рисунке, затем тоже самое и в слоях sphere 2....sphere 6

1 - шарик в слое sphere 1,
2 - шарик в слое sphere 2 итп.
Выделите шары в кадре 15 в слоях sphere 1.....sphere 6 и пропишите им color - alpha - 0%, далее правый клик на фрейме 15 Create Motion Tween проделаете это в слоях sphere 1......sphere 6. А вот теперь ВНИМАНИЕ я объясню на примере слоя sphere 1.

Ставим ключевой кадр на отметке 35 и перетаскиваем наш шарик из положения 1 показанного на рисунке, в положение в котором находится шар слоя sphere 2, т.е. по часовой стрелке .

В слое sphere 2 шарик в ключевом 35ом кадре перетаскиваем из положения 2 в положение 3. То же самое проделайте и с оставшимися слоями sphere 3...sphere 6. Ну все теперь дело в шляпе, в слоях sphere 1....sphere 6 ставим ключевой кадр на отметке 46 и ставим шарику color - alpha - 0% и перетаскиваем их в центр большого круга (туда где они находятся во фрейме 15).

Теперь в слое loading text прописываем, любой текст, можно также анимированный, как у меня. Жмем ctrl+enter и любуемся.
тут можно скачать исходник (4 KB zip). Подведем итог, вы сделали целый анимационный клип, используя всего один символ заложенный в библиотеку, а также разобрались как можно применять слои

 
Форум » Флеш » Flash Анимация » Начальные знания который потребуются для создания анимации (во флеш)
Страница 1 из 11
Поиск:

portofollo.at.ua | Хостинг от uCoz