Анимация движения воFlash. Как создать анимацию по траектории во флеше

Анимация движения по заданной траектории

Анимация движения воFlash. Как создать анимацию по траектории во флеше

Вы уже знаете, как в программе Macromedia Flash Professional 8 делать flash-ролики с анимацией движения, но это движение было по прямой. Теперь пора разобраться, как делать движение по заданной траектории. Для задания траектории нам понадобится дополнительный слой.

Откройте программу Macromedia Flash Professional 8, и создайте в ней новый документ. Слои создаются на временной ленте с помощью нажатия иконки Insert Layer (вставить слой).

Для создания нового слоя можно также выбрать в меню Insert — Timeline — Layer. Так создается обычный слой.

Возможно, Вы это уже делали, когда создавали анимацию движения без траектории.

Но теперь Вам понадобится направляющий слой.

Он создается с помощью иконки Add Motion Guide (добавить направляющую движения), или с помощью меню Insert — Timeline — Add Motion Guide.

Создайте его, он у Вас появится на временной ленте выше основного слоя. Если направляющий слой будет ниже — он не будет работать. В таком случае его нужно перетащить мышкой вверх.

Выделяете в основном слое первый кадр, с которого начнется анимация движения, и если он не ключевой, делаете его ключевым с помощью меню Insert — Timeline — Keyframe (или с помощью нажатия на него правой клавишей мыши и выбора Insert Keyframe). Размещаете на этом кадре объект.

Это может быть импортированная картинка, группа объектов, или текст. Если Вы импортируете картинку, сначала подготовьте ее в графическом редакторе, и затем в программе Macromedia Flash выберите в меню File — Import — Import to Stage.

Если объект рисованный, то сгруппируйте его с помощью меню Modify — Convert into Symbol.

Затем выбираете на основном слое последний кадр, которым будет заканчиваться анимация движения, и делаете этот кадр ключевым. В этом кадре перетаскиваете объект в конечное положение, в котором он будет находиться в конце анимации движения.

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

После этого выделите первый кадр, и перетащите объект на начальную точку траектории. Объект на начальной точке должен закрепиться. Вы увидите, как он притянется к начальной точке — контуры объекта станут жирнее.

Чтобы в программе Macromedia Flash Professional 8 объект притянулся, в меню View — Snapping должны быть включены пункты Snap to Guides (захват по направляющим) и Snap to Objects (захват по объектам). Также проверьте, включен ли пункт Snap Align (захват по выравниванию). Хотя последний пункт на притяжение объекта к траектории не влияет, все же его лучше тоже включить.

Теперь перейдите программе Macromedia Flash на конечный кадр. Выделите его в направляющем слое, и выберите в меню Insert — Timeline — Frame.

Добавится обыкновенный кадр, не ключевой (для добавления можете также нажать правой клавишей мыши на кадр, и выбрать Insert Frame).

Таким образом, у Вас будет на конечном кадре в основном слое ключевой кадр, а в направляющем слое простой кадр.

После этого в последнем кадре притяните объект к конечной точке траектории.

Далее делаете в программе Macromedia Flash анимацию движения: выделяете какой-нибудь промежуточный кадр между начальным и конечным, и в панели Properties выбираете в списке Tween (заполнение кадров) пункт Motion (движение).

Если Вы хотите, чтобы объект поворачивался по направлению траектории, а не просто перемещался, включаете в панели свойств пункт Orient to Path (если этого свойства Вы не видите, нажмите на белый треугольник в правом нижнем углу панели свойств).

Также в панели свойств в программе Macromedia Flash Professional 8 Вы можете добавить следующие свойства для Вашей анимации движения:

Scale (масштаб): при включенной опции, если размер или форма объекта в начальном или конечном ключевых кадрах будут изменены, то это изменение во время анимации движения будет происходить плавно.

Ease (замедление): используется, если нужно ускорить, или замедлить движение. Для применения опции передвиньте бегунок вверх или вниз, или впишите в окошко цифры от −100 до 100.

Rotate (вращение): объекты при движении вращаются по или против часовой стрелки, Количество оборотов объекта во время анимации движения прописывается в окошке.

Задание: сделать flash-ролик с анимацией движения по траектории. Вот, что получилось у меня:

В этом flash-ролике я использовал, кроме анимации движения (кораблик) также покадровую анимацию (слова)  и анимацию с изменением формы (волны).

о том, как сделать анимацию движения по траектории в программе Macromedia Flash Professional 8

Более подробные сведения Вы можете получить в разделах “Все курсы” и “Полезности”, в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях. Это не займет много времени. Просто нажмите на ссылку ниже:

    Подписаться на блог: Дорога к Бизнесу за Компьютером

Источник: http://pro444.ru/business/animaciya-dvizheniya-po-zadannoj-traektorii.html

Анимация во Flash. Начало. Рисуем птичку

Анимация движения воFlash. Как создать анимацию по траектории во флеше

RISK

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

Для начала следует уяснить несколько необходимых терминов, которые используются во флеше:

Корневой ролик – та область, с которой начинается работа. В нем есть последовательность кадров, в нем можно создать несколько слоев.

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

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

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

В этом уроке мы нарисуем птичку – простейшую галочку.

Мы могли бы сделать последовательность кадров, рисуя каждый кадр заново, но это было бы долго. Поэтому мы сделаем 1 цикл взмаха крыльев птички в отдельном объекте (символе), а потом будем просто перемещать объект.

Для создания объектов существует несколько способов:

  • Сначала нарисовать что-либо, выделить и воспользоваться командой “Convert to Symbol” (“Преобразовать в Символ”)
  • Создать новый символ в библиотеке (библиотеку можно открыть или в меню “Window->Library”, или с помощью горячей клавиши Ctrl+L) и там рисовать.

Воспользуемся первым способом.

Итак, мы нарисовали галочку, теперь ее нужно выделить и в контекстном меню (правой кн. мыши) выбрать “Convert to Symbol”

В появившемся окошке выбираем “Graphic” (об остальных вариантах – в другом уроке). Обратите внимание на пункт “Registration” – здесь можно выбрать точку, которая будет началом координат нового символа. Для нашего символа лучше выбрать начало координат в центре – для этого нужно нажать в средний квадратик (1)

После этого птичка при выделении будет иметь такой вид:

Здесь виден маленький крестик в середине – это начало координат этого символа.

Теперь этот символ появился в библиотеке – у него есть имя “Symbol 1” (2) (имя можно изменить на любое другое, но мы этого делать не будем).

Для того чтобы зайти в объект нужно нажать на него 2 раза в корневом ролике или в библиотеке. При этом откроется графика, заключенная в объекте, и его внутренняя последовательность кадров.

Зайдя в объект, создадим новый ключевой кадр (3). Проще всего это сделать с помощью горячей клавиши F7 (“создать пустой ключевой кадр”). В новом кадре мы должны нарисовать следующую фазу движения взмаха крыльев птички.

Чтобы можно было ориентироваться на предыдущие кадры, существует функция показа нескольких кадров (4). При нажатии на них над линейкой кадров появляется область, на границе которой видны маленькие кружочки (5). Нажимая и удерживая их, можно расширять или сужать область видимости.

При этом текущий кадр открыт для редактирования, а остальные показаны полупрозрачно.

Так, ориентируясь на предыдущие кадры, мы рисуем несколько фаз одного взмаха крыльев так, чтобы последний кадр подходил к первому

Теперь можно просмотреть анимацию этого объекта, нажав Enter. При этом проигрываются все кадры этого объекта с начала до конца. На этом этапе можно оценить правильность анимации и что-то исправить.

После того как объект с анимацией одного взмаха готов, можно выйти из него – для этого достаточно нажать на любое пустое место ролика, или нажать “Scene 1” над областью рисования (6). Теперь мы опять находимся в корневом ролике.

Но при попытке запустить ролик, нажав Enter, вы обнаружите, что движения не происходит. И немудрено – в корневом ролике пока еще только один кадр.

Для того чтобы создать новые кадры достаточно выделить пустое место в любой позиции на временной линейке – я выбрал 40-ю – и нажать F5 (создать кадр).

Теперь, нажав Enter, вы увидите несколько повторяющихся взмахов крыльев птички.

Для того, чтобы объект с птичкой перемещался необходимо создать “движение” в кадрах. Для этого нажмите в любом месте на созданных кадрах правой кн. мыши и выберите “Create Motion Tween”

Теперь кадры приобрели такой вид:

Для того чтобы завершить движение, выделите последний кадр и нажмите F6 (создать ключевой кадр) затем переместите птичку в любое место – например, к правому краю.

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

Теперь можно усложнить движение – введем траекторию.

Для этого нажать кнопку (7). Над текущим слоем появится новый слой (обратите внимание, что между ними особая линия – т.е. слой с объектом и слой с траекторией неразрывно связаны).

Теперь, перейдя в слой траектории с помощью “карандаша” рисуем любую линию (но, при этом в ней не должно быть сложных пересечений, иначе флеш вас не поймет _).

Для того, чтобы птичка начала перемещаться по траектории, нужно в начальном кадре (8) поместить на начало линии (9), а в конечном (10) – на противоположный конец линии (11).

Если вы все сделали правильно, то при просмотре птичка полетит по линии.

При этом можно задать “ориентацию к траектории” – т.е. птичка будет поворачиваться в соответствии с направлением движения. Для этого, нажав на любой кадр со стрелочкой в нижнем меню “Properties” ставим галку “Orient to path” (12). На всякий случай в параметре “Rotate” лучше указать “None” (13) – этот параметр задает вращение объекта, но об этом позже _~

Теперь птичка летит “носом вперед”)))

Объект с птичкой не обязательно движется из начала линии в ее конец – ее можно перемещать по линии свободно как в ту, так и в другую сторону. Для примера, выделим один из промежуточных кадров движения (14) и переместим птичку в другую позицию (15) (но при этом она должна быть на линии). Как мы видим, на этом месте появился ключевой кадр с новой позицией птички.

Так же сделаем в другом месте – выделим еще кадр (16) и переместим птичку в позицию (17)

Теперь наша птичка летает взад-вперед по линии.

На этом все))

Запомните “горячие клавиши”, которые мы здесь применили:

  • F5 – создать (добавить) кадр (не ключевой, а простой, без изменений)
  • F6 – создать ключевой кадр.
  • F7 – создать пустой ключевой кадр.

Еще, при создании “движения” в кадрах существуют некоторые тонкости.

В одном слое с движением может быть только один объект. При попытке создать движение для нескольких объектов одновременно флеш либо автоматически объединяет их в один объект, либо неправильно их перемещает.

Двигать можно только объекты – если создать “движение” в кадре с графикой флеш автоматически объединяет ее в один объект под именем Tween##. Можно конечно делать и так, но я лично предпочитаю сначала создавать объект, а потом применять к нему движение.

Вот теперь точно все _~

Ссылки по теме

Источник: http://www.itshop.ru/Animatsiya-vo-Flash-Nachalo-Risuem-ptichku/l9i29137

Анимация движения в системе Flash

Анимация движения воFlash. Как создать анимацию по траектории во флеше

Тема: Анимация движения в системе Flash.

Тип урока: Урок-проект с элементами творческой работы.

Цель:

Образовательный аспект – развитие творческих способностей учащихся с помощью активного образного мышления, развитие умения работать с компьютером и информацией для расширения своих познаний.

Развивающий аспект – творческое применение своих знаний в области двухмерной компьютерной графики.

Цели урока: Познакомить учащихся с типами анимации. Сформировать умение создавать простейшую анимацию в системе Flash.

Формы организации учебно-познавательной деятельности учащихся:

– индивидуальная – каждый ученик создает индивидуальный проект фрагмента сказки «Колобок»;

– групповая – индивидуальные проекты учеников позволяют реализовать групповой проект сказки «Колобок». Работа на перспективу – показ сказки детям ДОУ и начальной школы в рамках развития социокультурного центра в школе.

План урока:

  1. Организация урока.
  2. Постановка проблемы урока.
  3. Получение сведений о классификации анимации во Flash (эвристическая беседа).
  4. Актуализация знаний по созданию рисованных объектов в системе.
  5. Демонстрация создания простой анимации.
  6. Практическая работа учащихся за компьютером.
  7. Подведение итогов урока.
  8. Домашнее задание.

ХОД УРОКА

1. Организация урока

Учитель проверяет готовность учеников к уроку.

2. Постановка проблемы урока

Рассмотрим некоторые объекты и выясним, каким из них вы отдаете предпочтения. Какие вам нравятся больше и почему?

Просмотр некоторых Web-страниц, слайдов презентаций с анимацией и без нее.

В ходе беседы выясняем, что красивее, симпатичнее сайты и слайды презентаций с анимацией.

Как создать анимацию – это и есть тема сегодняшнего урока (Приложение 1).

3. Получение сведений о классификации анимации во Flash (эвристическая беседа с демонстрацией. Приложение 1)

Основное назначение системы во Flash – «оживление» рисованных изображений.

Овладев основными приемами работы в системе, вы сможете:

– создать эффективную презентацию или обучающую программу; – сделать Web-сайт или внести «живую изюминку» в оформление вашего сайта, т.е. создание рекламных web роликов (баннеры); – создать мультфильм;

– запрограммировать свою первую игру.

Прежде чем начинать что то делать на практике, давайте рассмотрим  базовые понятия в анимации: кадр (frames), ключевой кадр,слой (layers), и временная шкала (timeline), символы (symbols) (Приложение 1).

Анимация – это изменение свойств объекта с течением времени (Анимация – процесс изменения размера, положения, цвета или формы объекта во времени).

Кадр. Все фильмы состоят из кадров (фреймов). Каждый кадр содержит одно статическое изображение. Иллюзия движения создается благодаря незначительным изменениям в рисунках от одного кадра к другому.  Кадр может быть как составленным вручную, так и сгенерированным Flash

Ключевой кадр – кадр доступный для обработки (отображается чёрным кружочком, если в нём есть изображение, и белым, если нет никакого рисунка).  Кадр, в котором создатель фильма выполняет смену анимированного изображения.

Слой – это блок фильма, состоящий из отдельных изображений, из анимации со своей шкалой времени.

Временная шкала – поле, на котором отображается информация о слоях, о том какие кадры являются ключевыми, а какие генерирует Flash.

Во Flash анимация, с точки зрения создания, можно выделить следующие подвиды: покадровая анимация, автоматическая (трансформационная) анимация и анимация на основе сценариев. У каждого типа анимации есть свои преимущества и недостатки, сферы применения.

Покадровая анимация полностью состоит из ключевых кадров, причем содержимое кадров вы создаете сами.

Это напоминает процесс создание мультфильмов, когда каждый кадр рисуется на отдельном листе и если у вас в мульте 5000 кадров, то соответственно вам придется нарисовать 5000 рисунков. (показ бумажного слайд шоу).

Во Flash это сделать, конечно намного проще, чем на бумаге, но все равно это тяжелый труд, к тому же размер файла при покадровой анимации получается большим. Во flash покадровая анимация используется в тех случаях, когда задачу нельзя решить другими способами.

В трансформационной анимации основной труд при её создании выполняет Flash, что позволяет получить несложную анимацию. Автоматическое анимирование (так называемая tweened-анимация), при использовании которой автор создает только первый и последний кадры мультипликации, а Flash автоматически генерирует все промежуточные кадры.

Анимация на основе сценариев. Сценарий представляет собой описание поведения объекта на собственном языке Flash, который называется ActionScript.

С точки зрения способа построения анимация подразделяется на анимацию движения и анимацию изменения формы.

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

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

Анимация формы

Сегодня мы познакомимся с принципами создания анимации формы.

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

Анимация движения

Создание анимации движения отличается от покадровой анимации тем что нам не нужно каждый кадр создавать вручную, достаточно создать первый кадр анимации и последний, программа заполнит все промежуточные кадры автоматически. Нужно иметь в виду что анимация движения применима только к символам и на одном слое должно быть не более одного анимированного символа.

Другими словами, прежде чем приступить к созданию собственного “мультика”, следует определиться с выбором механизма его реализации.

4. Актуализация знаний по созданию рисованных объектов в системе.

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

5. Демонстрация создания простой анимации.Алгоритм выполнения.

  1. При помощи панели инструментов на рабочем поле нарисуйте объект.
  2. Используя инструмент «свободная трансформация» , установите объект в нужное место.
  3. В  главном  меню первого кадра выберите команду Вставить – Шкала времени – Создать промежуточное отображение (или  в контексном меню Создать промежуточное отображение).
  4. На кадре, где предпочитаете закончить анимацию выберите в главном меню команду Вставить – Шкала времени – Клавиатура (или  в контексном меню Вставить клавиатуру).
  5. Измените размеры объекта конечного ключевого кадра, используя инструмент «свободная трансформация»  и переместите объект в нужное место.
  6. Просмотрите получившийся фрагмент, выбрав Управление – Проиграть (или нажмите клавишу Enter).

6. Практическая работа учащихся за компьютером

Создание мини-проекта по сказке «Колобок».

Источник: https://urok.1sept.ru/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8/531373/

Создание анимации движения

Анимация движения воFlash. Как создать анимацию по траектории во флеше

Онлайн учебник по созданию Flash анимации

Macromedia Flash

Анимацию движения (motion-tweened) также можно применять к экземплярам, группам или текстовым блокам, при этом Flash поддерживает расчет промежуточных кадров при перемещении, изменении размера, поворота и скоса объектов.

Дополнительно можно изменять цвет экземпляров объектов или текста, применяя градиентную смену цветов или изменяя их прозрачность.

Чтобы выполнить такие изменения для группы или текстового блока, их предварительно следует преобразовать в символы командой Insert > Convert to Symbol (Вставка > Преобразовать в символ). При этом преобразуемый объект становится экземпляром этого символа.

Создать анимацию движения можно двумя способами:

  • Создать начальный и конечный ключевые кадры и для начального кадра установить значение Motion (Движение) в раскрывающемся списке Tweening (Расчет) на панели Frame (Кадр).
  • Создать начальный ключевой кадр, затем выполнить команду Insert > Create Motion Tween (Вставка > Рассчитать движение) и переместить объект в новую позицию на сцене. При этом Flash автоматически создаст заключительный ключевой кадр.

Рис. 4.10. Результат расчета промежуточных кадров анимации

При каждом изменении положения ключевых кадров либо изменении их содержимого Flash автоматически рассчитывает промежуточные кадры.

Рассмотрим последовательность действий при создании анимации движения с помощью задания параметров на панели Frame (Кадр):

  1. Выделяем имя слоя, чтобы сделать его текущим, и выделяем один из ключевых кадров слоя, где должна начаться анимация.
  2. Создаем на рабочем столе экземпляр, группу или текстовый блок либо перетаскиваем экземпляр символа из окна библиотеки. Рисованный объект следует преобразовать в символ.
  3. Создаем завершающий ключевой кадр, определяющий длину последовательности кадров.
  4. Чтобы изменить экземпляр, группу или текстовый блок в последнем кадре, можно выполнить следующее: переместить их в новую позицию, изменить размер, угол поворота или скоса, изменить цвет экземпляра или текста.
  5. Выполняем команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр).

    В раскрывающемся списке Tweening (Расчет) выбираем значение Motion (Движение).

  6. При изменении размера объекта следует установить флажок Scale (Масштабировать).
  7. Значение Easing (Плавность) задаем в диапазоне от -100 до 100, определяя тем самым скорость изменений во времени.

    Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

  8. Вращение можно задать выбором значения из раскрывающегося списка Rotate (Поворот).

    По умолчанию вращения нет. Значение CW соответствует вращению по часовой стрелке, a CCW — против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту объекта, заданному на шаге 4.

  9. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.

  10. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.
  11. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Рис. 4.11. Выбор параметров анимации движения

Рассмотрим последовательность действий при создании анимации по команде Create Motion Tween (Рассчитать движение):

  1. Выделяем пустой ключевой кадр и изображаем на рабочем столе объект или перетаскиваем на него экземпляр символа из окна библиотеки.
  2. Выполняем команду Insert > Create Motion Tween (Вставка > Рассчитать движение). Изображенный на первом шаге объект будет автоматически преобразован в символ, которому присвоено имя tweenl. Последующим объектам будут присваиваться имена tween2, tween3 и т. д.
  3. Щелчком указываем кадр, где должна завершиться анимация, и выполняем команду Insert > Frame (Вставка > Кадр).
  4. Перемещаем объект, экземпляр или блок текста в желаемую позицию. Изменяем его размер и угол поворота, если это требуется. После всех изменений снимаем с объекта выделение.

    В конце последовательности кадров автоматически появляется ключевой кадр.

  5. Выделяем конечный ключевой кадр последовательности и выполняем команду Window > Panels > Frame (Окно > Панели > Кадр). На открывшейся панели Frame (Кадр) автоматически должно появиться значение Motion (Движение).

  6. Если был изменен размер, то следует установить флажок Scale (Масштабировать).
  7. Значение Easing (Плавность) задается в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце.

    Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

  1. Вращение задается выбором значения из раскрывающегося списка Rotate (Поворот).

    По умолчанию указывается значение Auto (Автоматически), определяемое поворотом объекта на шаге 4. Значение CW соответствует вращению по часовой стрелке, a CCW — против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту, заданному на шаге 4.

  2. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.
  3. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.
  4. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Источник: http://tepka.ru/mf/4.html

WikiMedForum.Ru
Добавить комментарий