Metaldragons Reloaded
Жизнь Портала => Учебники => Тема начата: ToX от Августа 08, 2009, 12:02:31 am
-
Оглавление:
1 Азы работы с флэшем (данная тема)
2 Разбор полётов Symbol-ам (http://www.metaldragons.ru/forum/index.php?autocom=blog&blogid=2&showentry=12)
3 Автоматическая анимация (http://www.metaldragons.ru/forum/index.php?autocom=blog&blogid=2&showentry=14)
Это пособие было написано для тех кто хочет научится пользоваться Флэшем с нуля.
Опишу самые основные принципы работы с ним для создания простейшей анимации.
И так в путь :)
Запускаем флэш
Видим такую картину:
(http://img291.imageshack.us/img291/3690/99340609.th.jpg) (http://"http://img291.imageshack.us/img291/3690/99340609.jpg")
1 меню инструментов
2 меню слоев
3 меню кадров (прогресс бар)
4 дополнительные окна ( в данном случае палитры)
5 рабочая зона
6 дополнительные опции
Далее по порядку
Меню инструментов
(http://img291.imageshack.us/img291/1003/71013057.jpg)
1 курсор для работы с графикой (и его опции)
2 курсор для работы с вершинами
3 нарисовать прямую
4 лассо для выделения графики (и его опции)
5 нарисовать кривую
6 вставить текст
7 нарисовать геометрический предмет (и их опции)
8 карандаш или кисть (и их опции)
9 трансформация графики
10 заливка контуров и фона (контуры-карандаш, фон- кисть или пустая область) (и их опции)
11 пипетка
12 ластик
13 перемещение рабочей области
14 масштабирование
15 цвета заливки контурной (верхняя) и фоновой (нижняя)
16 опции выбранного инструмента (в данный момент это опции курсора для работы с графикой, включенная опция «магнит» будет притягивать выбранный вами объект(ы) к находящимся рядом объектам (при работе с маленькими деталями лучше отключить))
Меню слоев
(http://img291.imageshack.us/img291/4705/92642753.jpg)
1 отобразить/скрыть слой
2 закрыть слой от изменений
3 отобразить/скрыть цвет (остаются только контурные линии)
4 название слоя
5 рисунок карандаша означает что этот слой выделен для редактирования
6 добавление новых слоев
7 удаление слоя
При создании сложного рисунка старайтесь делать каждую движущуюся часть на новом слое, иначе может получится так что части склеятся и разлепляя их придётся каждый раз залатывать дыры в рисунке.
Меню кадров (прогресс бар)
(http://img291.imageshack.us/img291/1680/26234525.jpg)
Кадры каждого слоя идут параллельно друг другу, в данном случае у нас три слоя. В качестве образца так выглядят основные виды кадров
1 шкала нумерации кадров (временная шкала)
2 набор кадров с применённой трансформацией (автоматической анимацией) (светло-серый фон, закрашенная точка, с линией ведущей к финальному кадру трансформации)
3 кадр на котором отсутствует какая либо графика (белый фон с незакрашенной точкой)
4 кадр с присутствием графики (серый фон и закрашенная точка)
5 вид отображения графики находящейся в кадре на рабочей области (полезно при создании плавного движения)
6 количество кадров в секунду и положение бегунка на времянной шкале (в секундах)
7 масштаб отображения рабочей области
Нажав правой кнопкой по выделенному кадру получим вот такое меню:
(http://img177.imageshack.us/img177/3762/85353378.jpg)
1 зафиксировать все объекты в выделенном кадре
2 растянуть кадр до выделенной точки на временной шкале
3 удалить выделенные кадры
4 тоже самое что и №2 но добавит в конце разтягиваемого кадра ещё один ключевой кадр
5 вставить пустой кадр
6 очистить кадр от графики
7 сделать ключевым кадром
8 сделать выделенные кадры пустыми
9 вырезать кадр
10 копировать кадр
11 вставить кадр
12 удалить кадр
13 выделить все кадры
При работе с растянутым на несколько клеток кадром будьте внимательны, добавив в этот кадр хотябы точку, точка появится на всех клетках растянутого кадра. Чтобы в растянутый кадр добавить что-то в определённом месте временной шкалы, вставьте в этом месте ключевой кадр и редактируйте его.
Дополнительные меню
(http://img177.imageshack.us/img177/4853/68991277.jpg)
Выбрать на палитре нужный цвет можно и без заумного описания :)
1 цвета заливки, контурной и фоновой
2 тип заливки
Дополнительные опции
(http://img177.imageshack.us/img177/4898/60486960.jpg)
В этом меню будут отображаться дополнительные возможности применимые к выделенному на данный момент объекту(ам), слою(ям), кадру(ам) и т.д.
На данном рисунке отображены опции рабочей области
1 размер рабочей области
2 цвет рабочей области
3 частота кадров в секунду
-
И так начнем рисовать
Первый кадр у нас создан автоматически, набросаем на нём что-нибудь простенькое, что угодно
В моем случае это вот такая мордаха
(http://img291.imageshack.us/img291/1743/59857549.th.jpg) (http://"http://img291.imageshack.us/img291/1743/59857549.jpg")
Добавляем новый кадр (На панели кадров тыкаем правой кнопкой по следующему за первым кадром пустому кводратику и выбираем Insert Keyframe если хотим чтобы прошлый кадр продублировался или Insert Blank Keyframe если хотим чтобы следующий кадр был чистым)
На втором кадре изменим что-нибудь, например пусть моргнет глазами. (если делать следующий кадр сразу с закрытыми глазами то выглядеть это будет не красиво, морда будет моргать ими со скоростью звука, так что изменяйте форму глаза так плавно, как медленно хотите чтоб они моргали (изначально в настройках стоит 12 кадров в секунду, значит если хотите чтоб они закрывались и открывались в течении секунды то вам надо сделать 12 кадров).
В каждом следующем кадре немного изменяем форму глаз, примерно так:
(http://img177.imageshack.us/img177/3907/47069342.th.jpg) (http://"http://img177.imageshack.us/img177/3907/47069342.jpg")
Теперь выбираем во вкладке Control наверху опцию Test Movie и смотрим что из этого получилось, после чего можете отредактировать не понравившийся момент и переделать его. Файлик просмотра автоматически сохраняется тудаже где сохранена ваша флэшка, с темже именем и обновляется каждый раз когда вы будете выбирать опцию test movie.
Для простоты стирания ненужных кадров можно использовать не мышь а выделив ненужные кадры нажать - Shift+F5
С одним принципом анимации разобрались, теперь возьмём в пример автоматическую анимацию.
Сделайте кадр и нарисуйте в нём рожицу
Вот так :
(http://img177.imageshack.us/img177/4080/91232051.th.jpg) (http://"http://img177.imageshack.us/img177/4080/91232051.jpg")
Растяните этот кадр примерно на 19 клеток а в 20ой клетке сделайте новый кадр и в нем из недовольной рожицы сделайте радостную вот так :
(http://img177.imageshack.us/img177/1831/94882379.th.jpg) (http://"http://img177.imageshack.us/img177/1831/94882379.jpg")
Теперь действуем так
1 выделяем все получившееся кадры от начального до конечного
2 в меню дополнительных опций выберите вкладку TWEEN и там укажите SHAPE (кадры должны быть выделены) если все получилось то выделенные кадры будет пересекать длинная полоса со стрелкой на конце, от начального кадра к финальному
(http://img177.imageshack.us/img177/7760/33074254.jpg)
3 (пункт не обязательный но в нем можно выбрать звуковое сопровождение для данного кадра, это так на будущее)
(http://img177.imageshack.us/img177/8076/63265479.th.jpg) (http://"http://img177.imageshack.us/img177/8076/63265479.jpg")
Жмем опять вкладку Control наверху, затем Test movie и смотрим как быстро может меняться настроение :) если хотите можете точно также добавить трансформацию в обратную сторону, 21ым кадром сделайте копию 20го и растяните его (копию) до 40ой клеточки а 41ым сделайте снова недовольную рожицу. Теперь точно также выделите все кадры с 21го по 41ый и примените опцию SHAPE. Теперь снова жмём Test Movie и смотрим как наша мордочка бесконечно меняет свое настроение :)
Вот наверное и все самые основные азы которые потребуются начинающему аниматору.
Практикуйтесь )) и не бойтесь пробовать что-то новое ибо кнопочка «Save» спасет мир ;)
-
Спасибо большущее.
Мррррр.... Даж загорелась идеей создать простенькую флешку про жителей сайта х) как программка называется, подскажи, пожалуйста
-
Именно эта - Macromedia Flash MX, есть версии и новее но уже от производителей фотошопа. И я както не в курсе что там надобавляли да и мне этой хватает с головой пока-что )) ссылочку прямую пока не нашел но если что могу со своего компа сделать торент ссылку, вместе с серийником 38.8 мегобайт весит.
-
Спасибо.
-
Очень интересно, я тож иногда занимаюсь анимацией, но толькодля мини игр (ни одна не получилась, времени нет).
Эт ж надо столько терпения что бы это делать х/
Молодец хвалю
-
Спасибо. Полезно и познавательно. Надо воспользоваться.
-
Пасиба информацию, теперь хоть что-то буду знать.))
-
Пасяба. А то у мя только "Флэш МХ для чайников".
Буду знать больше.
-
добавил наверх темы оглавление со ссылками на другие учебники ) Пользуйтесь))