Пошаговое объяснение к flash-анимации.

Муниципальное бюджетное учреждение
дополнительного образования
«Кулебакский Центр детского технического творчества»






Пошаговое объяснение
Работы с флэш-анимацией



Подготовила: М.В. Маслова,
педагог дополнительного образования
первой квалификационной категории






г. Кулебаки

Преобразование объектов
Нарисуем обычное яблоко:
Выберем инструмент овал и нарисуем круг, с помощью инструмента кисть нарисуем веточку и листочек. Каждую деталь рисуем своим цветом.
Копируем объект несколько раз: выберем инструмент стрелка, выделим наше яблоко, нажмём комбинацию клавиш Контрл +С, чтобы яблоко скопировалось, далее вставим его в нужные места, с помощью комбинации клавиш Контрл+V.
Далее нажмём на инструмент свободное преобразование и выделим любой из объектов. Мы можем менять пропорции нашего рисунка в ту или иную сторону с помощью маленьких чёрных квадратиков , так же можем вращать рисунок с помощью круговой стрелки. Маленькая прозрачная точка это центр вращения, вокруг которого и будет вращаться наш объект, если мы её перенесём на другое место. Если мы наведём курсор на границу обводки, то получим искажение объекта.
Для того, чтобы удалить часть обводки внутренних границ, выберем инструмент стрелка и нажмём на ту часть которую хотим удалить (эта часть выделит пунктиром) и нажмём делит.
Так же можно удалить фон, например ушек, и удалить внешнюю обводку.
Инструмент Субвыделение (обычная белая стрелка) позволяет выделять объект. С помощью этого инструмента мы можем деформировать наш объект, нажав на кнопочку Кружочек.
Также мы можем менять заливку объекта, для этого выберем меню окно – цвет, в появившемся окне выбрать тип и нужные нам цвета, можно сделать несколько цветов, переходящих друг на друга, всё зависит от вашей фантазии.
С помощью пипетки мы можем скопировать нашу заливку на остальные объекты.






Покадровая анимация. Временная шкала.
Шкала времени основной инструмент анимации. На ней отображаются [ Cкачайте файл, чтобы посмотреть ссылку ]
Сделаем анимацию.
Для этого нарисуем рожицу:
Выберем нужный цвет и обводку, тип линии и стиль и нажмём на инструмент Овал. Рисуем лицо, ручки, глазки и ротик, ротик искривляем с помощью инструмента чёрная стрелка, как бы делаем его недовольным.
Далее нажимаем на следующий кадр и нажимаем правой кнопкой мыши и выбираем вставить ключевой кадр. В этом кадре изменяем положение рта и рук.
Подводим инструмент черная стрелка ко рту и немножко изменяем положение рта. Туже операцию проделываем и с руками.
Ставим курсор в следующий кадр, делаем его ключевым. В этом кадре делаем ещё искажения.
То же самое делаем со следующим кадром. Добавим один кадр.
И протестируем, что у нас получилось, либо через меню Управление – тестировать ролик или с помощью горячих клавиш Контрл + Энтер.
Мы видим перед нами результат покадровой анимации, т.е. каждый кадр мы рисовали вручную и немного изменяли.



Создание и использование слоёв.
Создадим две разные фигуры (прямоугольник и эллипс) и зальём каждую фигуру разным цветом заливки. Совместим эти две фигуры. Потом уберём прямоугольник на другую часть сцены и увидим, что часть круга пропала. Если оставшеюся часть круга наложить на прямоугольник, а потом убрать, то и на прямоугольнике пропадёт часть. На помощь на приходит слои, работа со слоями. При работе со многими слоями часто бывает мешает какой –то слой, что бы отключить его видимость, необходимо нажать на чёрный кружочек под глазом и слой отключиться, т.е. станет невидимым. Значок замочек нужен для того, если мы на этом слое всё уже сделали и не хотим ничего изменять.
Так же слоям можно и нужно менять имя для удобства работы со слоями.
Нарисуем эллипс и назовём так же наш слой, для добавления нового слоя нажмём на кнопку новый слой и назовём его квадрат и нарисуем квадрат с помощью клавиши Шифт. Добавим ещё один слой и назовём его круг. Рисуем круг. Выберем инструмент чёрная стрелка и попробуем перемещать каждую фигуру и увидим, что ничего не теряется. Мы можем манипулировать этими фигурами так, ка захотим. Для того чтобы перемещать слои местами, нужно нажать левой кнопкой мыши на слой и перетащить в нужное место, например поверх всех остальных слоёв. Отсюда следует, что слой, который находится выше всех он лежит перед нами и мы его видим. Если для большой и сложной картины у нас образовалось слоёв 20, мы можем объединить некоторые из них и положить в папку. Выделяем нужные слои и переносим в папку.
Если мы хотим что-то нарисовать на какой-нибудь фигуре, например кисточкой кривую линию, то мы увидим, что эта линия за другие фигуры не заходит. Этот рисунок будет нарисован только на слое круг. Для каждого слоя можно сделать свою анимацию, например эти фигуры будут передвигаться по разным сторонам. Для удаления слоя нажмём на слой, затем на значок корзинка. И слой удалится.






Использование библиотеки объектов.
Когда мы используем много раз один и тот же объект при создании анимации, нам удобно сохранять его в специальном файле, этот файл будет называться библиотека объектов.
Нарисуем любой объект, например, круг. Теперь чтобы этот объект занести в библиотеку и затем многократно использовать, мы должны его выделить и нажать по нему правой кнопкой мыши и выбрать пункт Преобразовать в символ. В появившемся диалоговом окне написать название объекта, выберем тип Фрагмент ролика и нажимаем ок. после этого объект расположился в библиотеке. Чтобы просмотреть объект, откроем окно библиотека через меню Окно.
Нарисуем ещё один объект, например, прямоугольник. Сделаем другой заливкой, поменяем стиль обводки, выделим его и нажмем правой кнопкой мыши, выберем пункт Преобразовать в символ.
На панели Библиотека внизу есть кнопки для создания нового символа, новой папки, для удаления символа.
Задача создание символа – для многократного использования.
Для того что бы добавить ещё один объект на сцену, мы просто перетаскиваем нужный нам объект из библиотеки на сцену.
Так же к символам мы можем применять различные свойства, например, увеличить или уменьшить яркость и отображение.
Так же эти объекты мы может трансформировать, искажать, переносить.
Если мы удаляем символ из библиотеки, то все объекты, связанные с этим объектом тоже исчезнут.
Так же мы можем импортировать рисунки, как в библиотеку, так и на сцену. Для этого выбираем пункт Файл – Импорт – Импортировать в рабочую область или в библиотеку. Выбираем нужный файл и нажимаем Открыть. Рисунок появиться и в библиотеке и на сцене. Если вы собираетесь выполнять различные манипуляции с этим объектом, то сначала нужно этот объект переконвертировать в символ.




Анимация движения
Нарисуем любой объект, например, солнышко и сделаем так, что бы оно передвигалось от одного края экрана к другому. Для того, чтобы у нас получилось движение мы должны указать начальное положение фигуры, т.е. 1 кадр, и конечное положение объекта, например 20 кадр, это будет конечная точка положения нашего объекта. Проигрывая этот ролик, мы увидим, как движется наше солнышко. Наш рисунок нужно переконвертировать в символ, для этого выделяем его и нажимаем правой кнопкой мыши и выбираем пункт преобразовать в символ, для того, чтобы он появился в библиотеке. То, что объект появился в библиотеке, мы видим по очертанию его границ. Затем выбираем кадр и делаем его ключевым (нажимаем Ф6). Для того, чтобы наш объект оказался в правой части экрана, нажмём на последний кадр и перетащим наш объект в нужное место. Просмотрим ролик.
Теперь попробуем сделать так, что бы объект дошёл до правой части экрана, затем развернулся и пошёл в левую часть экрана. Для этого, ставим рядом с последним кадром ключевой кадр, на котором объект развернётся, нажимаем клавишу Ф 6 и в этом кадре выбираем пункт Отразить слева на право. Увидим что наш объект развернулся. Дальше он должен вернуться назад, для этого переходим в какой-то кадр, например в 40, делаем его ключевым Ф6 и переносим наш объект в левую часть сцены. Протестируем ролик Контрл плюс Энтер.













Анимация движения нескольких объектов.
Для этого думаем, что у нас будет двигать, а что не будет. Например, бабочка летит на цветок, или бильярдные шары бьются друг о друга на бильярдном столе. Создадим 1 слой и назовём его стол. Рисуем стол. На двух других слоях рисуем по шару. Один шар будет ударять другой шар и остановится, а другой шар, по которому ударили, будет двигаться дальше. Стол останется неподвижным.
Попробуем создать данную анимацию.
Создаем новый файл и начинаем расставлять декорации.
Первый слой будет стол. Рисуем стол, с помощью инструмента прямоугольник и с помощью инструмента преобразование и искажаем стол, предварительно нажав на первый кадр, что бы выделилась не только заливка, но и обводка.
Определяем время нашей анимации, например 2 секунды, для этого нам понадобится 24 кадра. Выделяем 24 кадр и делаем его ключевым.
Дальше делаем шары каждый на отдельном слое.
Создаём слой и называем его шар1. Выделяем 1 кадр этого слоя и рисуем первый шар. Делаем ему радиальную заливку и с помощью клавиши Шифт рисуем шар.
Создаём 3-й слой, называем его шар2 и рисуем шар. Выделяем 1-й кадр и рисуем шар. Далее помещаем наши шары в библиотеку объектов, т.к. если мы этого не сделаем то у нас ничего не получится. Выделяем один шар и преобразовываем его в символ, затем то же самое проделываем со вторым шаром.
Обращаем внимание на первый кадр, там мы видим, как будут расположены объекты, до того, как будет происходить действие.
Шар1 ставим первым среди слоёв.
Синий шар поставим в самое начало, а красный чуть подальше.
Для шара1 выделяем 12 кадр и делаем его ключевым. И в этом кадре синий шар ударится о красный шар. Далее для шара 2 делаем 12 кадр ключевым. И начиная с этого кадра красный шар будет двигаться до последнего кадра. Выделяем последний 24 кадр для слоя 2, делаем его ключевым. И добавляем движение. В последнем кадре шар 2 у нас должен стоять на другом конце стола. В окне свойства, мы можем менять какие-либо параметры объекта, например, задать объекту движение повороты по часовой или против часовой стрелки.
Так же можно задать траекторию движения, по которой наш объект будет двигаться. Для этого выберем нужный шар и нажимаем на кнопку Вставить направляющий слой. Этот слой добавляется над тем объектом, который будет двигаться вдоль этого направления. Линии, которые мы нарисуем, при проигрывании анимации не будут видны. Затем совмещаем центр шара с линией. Подвинем шар 1 поближе к шару 2 для более реалистичной анимации, затем совмещаем конечную линию и центр шара 2.
Тестируем ролик и видим, что шар движется вдоль линии, которую мы указали.

Анимация формы.
При анимации формы компьютер сам составляет промежуточные кадры.
Например мы хотим круг превратить в квадрат. Для этого выбираем любой кадр и делаем его ключевым.
Рисуем круг, делаем 30-й кадр ключевым, удаляем круг и рисуем квадрат. Теперь выбираем 1-й кадр и щёлкаем по нему правой кнопкой мыши и выбираем пункт Вставить анимацию формы. Мы видим, что наши кадры стали зелёными и появилась стрелка, это значит, что всё сделано правильно. Тестируем ролик и видим, что одна фигура превращается в другую. Это и есть анимация формы.
Произведём с квадратом некоторые изменения. Исказим его стороны внутрь. Тестируем ролик и видим, что из одной фигуры получаем другую.
Анимация формы не применима для объектов, находящихся в библиотеке, т.е. для символов.
























Работа с текстом во Флеш.
Для работы с текстом в программе Адоб флеш сиэс 4 есть специальный инструмент Текст, в виде большой буквы Т. После того, как мы ввели текст, на панели свойства у нас появились различные параметры для работы с текстом. При выборе статического текста, мы можем увеличить только длину. При выборе динамического текста, мы можем менять длину и ширину текста. При выборе вводимого текста, мы можем его изменять при просмотре. Просмотрим ролик и увидим, что у вводимого текста мы можем изменять текст, допечатывать.
Давайте введём текст. В поле свойства мы видим, что можно изменить шрифт, стиль, размер, цвет текста. Для того, чтобы отредактировать текст, его нужно предварительно выделить или инструментом Текст или Стрелка. Для выделенного текста мы можем задать анимацию движения. Выберем кадр, например 30-й, сделаем его ключевым, добавим направляющий слой, что бы движение было интересным и нарисуем нашему тексту траекторию. Выберем последний кадр и переместим наш текст в конец траектории. Нажмем по 1-му кадру правой кнопкой мыши и выберем пункт создать классическую анимацию.
Для того чтобы задать анимацию для буквы, мы должны предварительно преобразовать её в обыкновенный рисунок, после этого нашей букве уже нельзя будет поменять шрифт, размер, но сможете сделать ей анимацию формы и сделать градиентную заливку. Если же это текст, то градиентную заливку, мы создать не сможем.
Введём одну любую букву, выделим её стрелкой и нажмём меню Модификация - Разделить. И видим, что наш символ стал рисунком. Выберем 20-й кадр и сделаем его ключевым. Уберём эту букву, а на её место поставим какую-нибудь другую. И зададим ей другой цвет. Преобразуем эту букву в рисунок Контрл+Б. После этого мы может задать анимацию формы правой кнопкой мыши щёлкнем по 1-му кадру.
Если мы введём целое слово, состоящее из нескольких букв, то для преобразования его в рисунок, нам понадобится выполнить 2 действия: нажать два раза Конрл+Б или Модификация – Разделить тоже 2 раза. Теперь мы видим, что наше слово превратилось в рисунок. Выберем 20-й кадр, сделаем его ключевым. Удалим рисунок МУХА и введём новый текст СЛОН. И сделаем с ним то же самое, выделяем его и 2 раза Контрл+Б, для преобразования текста в рисунок. Теперь мы можем задать анимацию формы и протестировать ролик.
Для того чтобы задать анимацию для текста, сначала текст мы должны превратить в рисунок.
Так же мы можем к тексту применять трансформацию.
И задать радиальную заливку, применив к слову комбинацию клавиш Контрл+Б дважды.



Создание и использование клипов.
Клип – создание объекта, который находится в библиотеке и создание движения происходит в самой библиотеке, например, шагающие ноги, затем на самой сцене делаем эффект движения как буд-то он идёт на нас.
Создаём символ, называем его Колобок и видим, что он появился в библиотеке.
Создаём рисунок, выбираем заливку жёлтого цвета и инструментом Овал рисуем круг, ножки, ручки, рот и глазки синего цвета. Создаём движение в самом клипе. Далее выделяем 2-4 кадр и делаем их ключевыми. Затем во 2 кадре поднимаем стрелкой (щёлкаем 2 раза левой кнопкой мыши по ноге) правую ногу и левую руку, а в 4 кадре наоборот, поднимает левую ногу и правую руку. Третий кадр и 1 оставляем без изменений. Возвращаемся на сцену и копируем колобка из библиотеки и увидим, что наш колобок шагает. Клип готов, помещаем его на сцену и делаем ему основное движение. Делаем колобка маленьким, нажимаем инструмент свободное преобразование и с помощью клавиши Шифт делаем колобка маленьким. Выберем 36 кадр и делаем его ключевым и задаём свободную трансформацию, делаем его большим. Затем выделяем любой промежуточный кадр и вставляем анимацию движения. Уведём, что колобок будет колобок, будет двигаться на нас.















Основные понятия флэш-анимации.
Основные инструменты рисования в программе это овал, круг (при нажатой клавише Шифт), прямоугольник, квадрат (при нажатой клавише Шифт), карандаш и кисть. Для кисти можно выбрать тип, толщину, рисует она цветом заливки, а карандаш чёрным. Для перемещения объекта, сначала выделяем объект (обводим его) чёрной стрелкой. Белая стрелка или суб-выделение, с помощью неё мы можем изменять объект, например растянуть. Стёрка позволяет стереть то, что нам не нужно.


Преобразование формыPicture 2Описание: Преобразование формы15