Adobe flash cs5 создание анимации

Обновлено: 07.07.2024

Этот урок входит в систему уроков по информационным технологиям при изучении раздела “Компьютерная графика”.

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

Цели урока: усвоение умений самостоятельно в комплексе применять знания, умения и навыки, осуществлять их перенос в новые условия.

Обучающие цели. Закрепить практические умения и навыки работы с инструментами рисования и создания анимации в графическом редакторе Adobe Flash CS3 Professional . Изучить возможность автоматизации преобразования одного рисунка в другой – анимация формы с помощью программы Adobe Flash CS3 Professional.

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

Воспитывающие цели. Выработать у учащихся усидчивость, старательность в выполнении задания, требовательность к себе.

Тип урока: комбинированный (урок закрепления знаний, формирования умений и навыков, и изучения новых знаний).

Форма проведения урока. Комбинированная: практическая работа, объяснение нового с закреплением старого.

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

Методическое оснащение: карточки с алгоритмом действий.

Программное обеспечение: Windows XP, Adobe Flash CS3 Professional, PowerPoint.

Техническое оснащение: класс оборудованный ПК, проектор.

План урока

Детям на парты раздаются карточки-задания с алгоритмом действий для практической работы.

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

1. Организационный момент: проверка наличия отсутствующих на уроке, объявление темы урока.

Выслушать информацию об отсутствующих.

Объявить тему урока: Создание анимации формы - автоматизации преобразования одного рисунка в другой.

Ребята, сегодня мы продолжим работу по оживлению рисованных изображений.

С момента выхода первого мультфильма прошло более 60 лет, но популярность мультиков не только не угасает, а растет ускоренными темпами. Теперь мультики смотрят не только дети, но и взрослые. Зрителям нравятся веселье рисованные герои. Мультипликационные изображения нашли применения везде: на телевидении, в Интернете, в рекламе.

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

Мультипликация от лат. multiplicatio — умножение, увеличение, возрастание, размножение. Вы на прошлых уроках попробовали создавать мультик.

Давайте вспомним какие замечательные мультики вы создали на прошлых уроках.

Демонстрация работ, выполненных на прошлых уроках. Круговорот. (Работа, выполненная в среде Adobe Flash CS3 Professional, находится в папке Приложение 1).

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

Так почему же умножение? (Ответ. Потому что, надо создать много похожих изображений. Чтобы было проще, нужно копировать изображение, а значит умножать).

Какие функциональные клавиши вы использовали для создания и копирования кадров.

И так кадры мультика прорисованы.

А компьютер и программа Adobe Flash CS3 Professional помогает нам создать из этих изображений анимацию – быстрая смена кадров создает иллюзию плавного движения. Напомните, как мне просмотреть мультик в отдельном окне?

(Ответ. Ctrl+Enter – запуск мультика в отдельном окне).

Демонстрация работы Репетиция жонглера. Сколько кадров. (Работа, выполненная в среде Adobe Flash CS3 Professional, находится в папке Приложение 1).

Какие инструменты выделения и рисования использовались?

(Ответ. Инструменты рисования: Кисть, карандаш, ластик, цвет кисти, цвет карандаша, овал, линия. Инструменты выделения: черная и белая стрелочка).

Демонстрация работы. Покадровая анимация. Прорисовывается почти каждый кадр.

Снеговик. (Работа, выполненная в среде Adobe Flash CS3 Professional, находится в папке Приложение 1)

Сколько кадров у этого мультика. (Ответ: 80)

В этой анимации какие инструменты выделения и редактирования графических объектов использовались?

(Ответ. Перемещение, копирование, удаление выделенных изображений. Инструмент Трансформатор.)

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

Работа по рисованию по кадрового мультика достаточно трудоемкая – нужно прорисовать каждый кадр. 5 мин.

Проблема. Как же можно упростить работу?

Нам на помощь опять приходит компьютер и “умная” программа Adobe Flash CS3 Professional.

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

Демонстрация. 2 мин.

3. Подготовка учащихся к усвоению новых знаний, умений и навыков и изучение нового материала.

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

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

Но для этого нужно применить новые возможности программы, которые вы еще не знаете.

У каждого есть карточка с алгоритмом действий для создания анимации формы.

В первом кадре вверху рабочего листа нарисовать объект – кружок желтого цвета. Контур убрать! Это будет первый ключевой кадр анимации.

Создать последний кадр анимации. Для этого:
Перейти на панель Time Line
Щелкнуть мышкой на 40 кадре и нажать F7 (новый пустой ключевой кадр)
Нарисуем в 40-м кадре прямоугольник красного цвета. Контур убрать!

Щелкнуть мышкой на первый кадр. На панели Properties выбрать в списке Tween (тип анимации) Shape (форма). Для проверки: “промежуточные кадры” временной шкалы должны окрасится в салатовый цвет и прорисоваться стрелка, соединяющая начало и конец анимации.

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

Вернуться на 40-й кадр, щелкнув на нем мышкой.
Перейти на панель Properties и выбрать в списке Tween (тип анимации) Shape (форма).
Щелкнуть на кадр 95 и нажать клавишу F6.
Ctrl+Enter - просмотр мультика
Далее создадим анимацию превращающую пять шариков в буковки для этого еще раз выполним алгоритм действий (1-4 пункты) для кадров от 95 до 150.

Пример см. Приложение 2. 9 мин.

Небольшая разминка, прежде чем мы начнем работу на компьютере. Все встали, размяли кисти рук, шею, плечи, сели и выполнили гимнастику для глаз. (1-2 минуты).

4. Применение новых знаний и обобщенных знаний, умений и навыков в новых условиях.

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

Практическая работа будет состоять из двух частей.

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

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

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

Оказание необходимой помощи. 20 мин.

5. Первичная проверка, закрепление и самопроверка.

6. Подведение итогов занятия.

Выставление оценок. Комментарии.

Спасибо за работу! Похвалить удачные работы. 6 мин.

Карточки-задания с алгоритмом действий для практической работы.

Щелкнуть мышкой на первый кадр. На панели Properties выбрать в списке Tween (тип анимации) Shape (форма). Для проверки: “промежуточные кадры” временной шкалы должны окрасится в салатовый цвет и прорисоваться стрелка, соединяющая начало и конец анимации.
Enter или Ctrl+Enter - просмотр мультика
Продолжим. Теперь первый кадр это будет кадр 40. Здесь уже нарисован красный прямоугольник.
Щелкнем мышкой на 80-м кадре и нажмем клавишу F7 (создать новый пустой ключевой кадр). Нарисуем пять кружков и зальем радужной заливкой. Контуры убрать!
Вернуться на 40-й кадр, щелкнув на нем мышкой.
Перейти на панель Properties и выбрать в списке Tween (тип анимации) Shape (форма).
Щелкнуть на кадр 95 и нажать клавишу F6.
Ctrl+Enter - просмотр мультика
Далее создадим анимацию превращающую пять шариков в буковки (Flash) для этого:

На кадре 95 уже нарисованы пять радужных шариков.
Щелкнуть на 150-й кадр и нажать клавишу F7
Примерно на месте каждого шарика инструментом кисточка нарисовать буквы FLASF
Вернуться на 95 Перейти на панель Properties и выбрать в списке TweenShape.

Функциональные клавиши для создания мультика

F5 – создать дублирующий кадр
F6 – создать ключевой кадр, который копирует рисунок предыдущего, ключевого кадра
F7 – создать пустой ключевой кадр
F8 – занести объект в динамическую библиотеку
Shift + F5 – удалить любой выделенный кадр или последовательность кадров (Remove Frames)
Ctrl+Enter – запуск мультика в отдельном окне

2. Установите ширину и высоту кадра равными 550 x 600, выберите цвет фона фильма.

3. Нарисуйте циферблат часов. Слой с циферблатом назовите “часы”.

a. Нарисуйте окружность

b. Определим центр окружности: выведите на экран линейки Просмотр – Линейки (Ctrl+Alt+Shift+R)

c. Выделите окружность инструментом Свободное преобразование, появится центр окружности.

d. С помощью направляющих линий пересечем центр. Стоя на линейки, нажмите левую клавишу мыши и, не отпуская, перетащите на окружность, у вас появиться зеленого цвета линия – это направляющая.

e. Используя инструмент Текст оформите циферблат.

f. Выделите все объекты и объедините: Изменить – Группировать (Ctrl+G)

4. Добавьте слой 2, назовите его минутная стрелка. На нем нарисуйте стрелку, чтобы ее конец находился в центре часов.

6. Перенесем центр минутной стрелки в центр циферблата: выделите ее с помощью инструмента Свободное преобразование и переместите центр

7. Вот теперь можете выполнить последовательность действий движения.

a. Выделите первый ключевой кадр и на панели Свойств (Properties): Кадр (Frame) выберите в списке Анимация пункт Движение (Motion), чтобы создать анимацию движения.

b. В раскрывающемся списке Поворот (Rotate) выберите пункт По часовой стрелке (CW) и укажите в поле рядом число 1, чтобы анимация включала один полный оборот объекта.

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

d. Так же выделите 60 кадр на слои Часы и нажмите F6 или из контекстного меню выберите пункт Вставить ключевой кадр

8. Добавьте слой 3. Назовите его “Часовая стрелка”. Нарисуйте ее и поверните на 30 0 , используя панель Преобразование (Transform):

a. Нарисовали стрелку, преобразуйте ее в символ и перенесите центр.

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

c. Минутная стрелка у нас совершает один полный оборот, а в это время часовая лишь только на 30 0 (до 1 час.). Выделяем на шкале времени позицию 60 и создаем ключевой кадр (F6), стоя на нем на панели Преобразование (Transform) установите поворот на 30 0 .

9. Протестируйте проект, нажмите клавиши CTRL+ENTER.
10. Далее часовую стрелку переместите на 60 0 . Выделите кадр 120, нажмите F6 и на панели Преобразование (Transform) установите поворот на 60 0 .
11. Выделите 60 кадр слоя Минутная стрелка и на панели Свойства задайте поворот по часовой стрелки, выделите кадр 120, нажмите F6
12. Выделите кадр 120 на слои часы и вставьте ключевой кадр (F6)
13. Протестируйте проект, нажмите клавиши CTRL+ENTER.
14. Повторяйте пп. 10-13 для достижения полного оборота часовой стрелки (повертите на 90 0 , 120 0 , 150 0 и т.д.)
15. Сохраните файл.
16. Опубликуйте в формате .swf и .jpg. (Приложение1, Приложение2)

Рисование, Дизайн и Разработка игр

Главная » Анимация движения в Adobe Flash по направляющей (guide)

Анимация движения в Adobe Flash по направляющей (guide)

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

Создания нового документа ActionScript 3.0

Должно получиться два таких слоя:

Размещаем объект для создания анимации движения

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

В итоге мы должны получить два таких слоя:

Запускаем анимацию движения объекта

Выберите пятидесятый кадр на слое, где расположен объект, и также как в первом кадре немного поверните его.

Чтобы посмотреть, что получилось, нажмите ctrl+enter.

Основная информация о программе

ВНИМАНИЕ! Разработка программы Adobe Flash CS5 прекращена и в настоящее время ей на смену пришла программа Adobe Animate.

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

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

Стоит отметить, что в данной программе анимации можно делать с помощью всего лишь одного клика мышкой. Благодаря объектно-ориентированному подходу к созданию анимации, который реализован в программе Adobe Flash CS5 Professional, вы сможете быстро и удобно сделать из картинки анимированный флеш-ролик.

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

Читайте также: