Как создать анимацию формы в adobe flash
Обращаем Ваше внимание, что в соответствии с Федеральным законом N 273-ФЗ «Об образовании в Российской Федерации» в организациях, осуществляющих образовательную деятельность, организовывается обучение и воспитание обучающихся с ОВЗ как совместно с другими обучающимися, так и в отдельных классах или группах.
Рабочие листы и материалы для учителей и воспитателей
Более 2 500 дидактических материалов для школьного и домашнего обучения
- Онлайн
формат - Диплом
гособразца - Помощь в трудоустройстве
311 лекций для учителей,
воспитателей и психологов
Получите свидетельство
о просмотре прямо сейчас!
Муниципальное бюджетное учреждение
дополнительного образования
«Кулебакский Центр детского технического творчества»
для учителей математики и информатики
Подготовила: М.В. Маслова,
педагог дополнительного образования
первой квалификационной категории
РАЙОННЫЙ СЕМИНАР
« Flash -анимация».
СОДЕРЖАНИЕ СЕМИНАРА
Цель: дать представление о способах создания анимации в программе Adobe Flash .
- дать представление о программе Adobe Flash ,
- дать представление Флэш- анимации,
- научить создавать анимацию в программе « Adobe Flash ».
Форма проведения семинара-практикума:
- лекция для учителей информатики и математики;
- лекция с элементами презентации,
- просмотр видеороликов по созданию анимации.
- презентация по теме семинара « « Flash -анимация».
Структура семинара:
Вступительная часть.
Объявление темы и цели семинара .
Теоретическо – демонстрационная часть.
Рассказ - презентация по теме « Flash - анимация » ;
Видеоролики по созданию анимации в программе « Adobe Flash ».
Практическая часть.
Создание анимации в программе « Adobe Flash ».
Рефлексия участников семинара . Подведение итогов.
План проведения:
2. Основные понятия « Flash -анимации ».
3. Интерфейс и знакомство с рабочей областью программы Adobe Flash .
5. Дать представление о преобразовании объектов; покадровой анимации и временной шкале; создание и использование слоёв; анимация движения; анимация формы; работа с текстом.
Ход семинара:
В незапамятные времена – почти 25000 тысяч лет тому назад – человек выцарапывал примитивные рисунки на стенах своей пещеры. Эти картинки представляют собой самые разные формы изобразительного искусства. Антропологи не знают как появилась древняя наскальная живопись, но современные художники, как и древние люди, когда-то, пытаются уловить, прежде всего, правильный момент. Эволюцию художественных приёмов и технологий расширила пределы наших представлений, а мы создали мультипликацию – безграничную форму искусства.
Мультипликация – жанр, не похожий на другие. Реклама, видеоигры, кино, телевидение и компьютеры – все они передают информацию и чувства, средствами мультипликации. Флэш – невероятно популярная форма анимации, взявшая всемирную паутину штурмом. Благодаря Флэш независимые художники получили возможность создать произведения, доступные миллионам людей по всему миру.
Кажется, Флэш можно встретить во Всемирной паутине повсюду.
Сегодня Флэш делает возможным движение объектов по экрану.
Анимация находит сегодня все большее распространение в различных областях человеческой деятельности. Интернет, обучающие программы, игры, презентации - вот далеко не полный перечень применений. Ну и, конечно, не следует забывать о самых обычных анимационных фильмах, которые традиционно занимают высокое положение в индустрии развлечений и весьма доходны.
Примеры флэш-анимации вы можете видеть на бесчисленном количестве сайтов. Под эту категорию попадают анимированные и озвученные заставки и флэш-открытки по любому поводу и к любому празднику и просто отдельные анимационные фильмы и даже целые сериалы, созданные профессиональными и самодеятельными художниками-аниматорами. Большинство работ такого рода требуют для своего создания от нескольких часов до нескольких дней, что вполне по силам большинству разработчиков.
Анимация представляет собой последовательность статических изображений, с помощью которых создаётся иллюзия движения. Многие люди думают, что рисование или создание таких изображений и есть анимация. На самом деле движение передаётся за счёт соответствующего расположения изображений.
Скорость воспроизведения современных фильмов, составляет 24 кадра в секунду. Следовательно, при просмотре фильма перед нашими глазами ежесекундно проскакивает 24 кадра, передающих одно изображение. Для Флэш-анимации нужно использовать частоту кадров 12 в секунду, для того что-бы не загружать компьютер и сеть, что-бы любой человек, с любого компьютера смог просмотреть анимацию.
На протяжении 2-х часового фильма, среднестатистический человек успевает моргнуть примерно 3500 тысячи раз. Это более 50 минут темноты! Наш мозг автоматически удерживает предыдущее изображение дольше, чем оно в действительности находилось на экране, поэтому мы ничего не пропускаем.
С технологией Flash связано несколько форматов файлов . Наиболее известны три из них.
1. Файлы с расширением .FLA (FLash Animation) — это исходные файлы Flash-роликов, их можно редактировать. Для размещения в Интернете их надо «опубликовать», превратив в SWF-файл.
2. Файлы с расширением .SWF (ShockWave Flash) готовы к размещению в Интернете. Их нельзя изменить в редакторе.
3. Файлы с расширением .FLV (FLash Video) представляют собой видеоролики, которые можно проигрывать на Web-страницах.
Технологии создания анимации:
В настоящее время существует различные технологии создания анимации:
Классическая анимация представляет собой поочередную смену рисунков, каждый из которых нарисован отдельно. Это очень трудоемкий процесс, так как аниматорам приходится отдельно создавать каждый кадр.
Стоп-кадровая анимация . Размещенные в пространстве объекты фиксируются кадром, после чего их положение изменяется и вновь фиксируется.
Спрайтовая анимация реализуется при помощи языка программирования.
Морфинг - преобразование одного объекта в другой за счет генерации заданного количества промежуточных кадров.
Цветовая анимация - при ней изменяется лишь цвет, а не положение объекта.
3D-анимация создается при помощи специальных программ (например, 3D MAX). Картинки получаются путем визуализации сцены, а каждая сцена представляет собой набор объектов, источников света, текстур.
Захват движения (Motion Capture) - первое направление анимации, которое дает возможность передавать естественные, реалистичные движения в реальном времени. Датчики прикрепляются на живого актера в тех местах, которые будут приведены в соответствие с контрольными точками компьютерной модели для ввода и оцифровки движения. Координаты актера и его ориентация в пространстве передаются графической станции, и анимационные модели оживают.
Метод захвата движения применяется для анимирования виртуальных моделей людей (или пришельцев, как в фильме Аватар) в современной киноиндустрии.
Программа Adobe Flash CS4 является мощным средством создания векторной анимации. При этом программа даёт возможность использовать не только стандартные методы временной шкалы, но и программные способы преобразования объектов во времени. Естественно Flash обладает всеми средствами работы с векторной графикой, так как она является основой анимации.
Гибкий интерфейс программы позволяет легко настроить под себя все панели, что существенно ускоряет работу над проектом. Стоит отметить, что основные понятия при работе с Flash - это символ.
Понятие символ, в этой программе - это графический элемент или анимация, структурный тип, из которого в основном и состоит анимация. В Adobe Flash версии CS4 символ стал обладать большими правами, чем раньше. Даже анимации движения привязывается теперь непосредственно к символу. Это существенно облегчает редактирование путей и скорости движения.
Рабочая область программы содержит командное меню вверху экрана, большое количество инструментов и панелей для редактирования и добавления анимаций.
Анимацию можно создавать во Flash, или импортировать элементы, созданные в других совместимых приложениях.
По умолчанию в программе Adobe Flash CS4 отображается строка меню временная шкала, рабочая область, панель инструментов, инспектор свойств и ещё несколько полезных панелей.
При работе с программой Adobe Flash CS4 вы можете открывать, закрывать, закреплять, отсоединять панели и перемещать их по экрану в произвольном порядке. Чтобы вернуться к рабочей области по умолчанию выберите Окно - Рабочее пространство - Основные элементы.
Сцена – это область окна документа, в которой вы можете рисовать кадры фильма или собирать их из импортированных объектов.
В одном фильме может быть несколько сцен, и просматриваются они по очереди: сначала все кадры первой сцены, потом все кадры второй сцены и т.д.
Временная шкала
С ее помощью определяется длительность фильма, время появления каждого кадра при проигрывании фильма, а также периоды «жизни» разных объектов.
В левой ее части находится панель слоев, позволяющая размещать объекты на разных слоях и независимо управлять режимами их просмотра и редактирования.
Временная шкала - основной инструмент при работе с анимацией во Flash. Она позволяет перемещать ключевые кадры и целые куски анимации.
- Маркер - указывает на текущий кадр, отображаемый в окне. При клике на какой-либо кадр, маркер автоматически перемещается на него.
- Слои - слева находится перечень слоев. Под ним существуют кнопки, позволяющие добавлять и удалять слои. Каждый слой можно сделать невидимым и запретить его для редактирования.
- Шкала кадров - поле, где вы можете добавлять и удалять простые и ключевые кадры. Если вызвать контекстное меню (нажать на правую клавишу мыши) на каком-либо кадре, вы увидите перечень действий, которые можно совершить. На шкале отображается информация о кадрах, которые являются ключевыми (такие кадры помечаются черными кружочками), содержат действия (буковка "а" над кружочком) или метку (красный флажок, после которого идет название метки). Цвет тоже говорит о типе кадров. Серый цвет - это кадры, которые в точности повторяют ключевой кадр. Синеватая или зеленоватая подсветка говорит о том, что кадры сгенерированы Flash (о различиях я расскажу ниже). И, наконец, белое или "пустое" полосатое пространство говорят о том, что на этих кадрах ничего нет.
Наша анимация состоит из последовательности кадров. Кадр может быть как составленным вручную, так и сгенерированным Flash. Это относится к кадрам одного слоя. Так как сцены Flash состоят обычно из нескольких слоев, то итоговые "многослойные" кадры, могут содержать, как сгенерированные, так и "самодельные" слои.
В компьютерной анимации существует понятие - ключевые кадры . Их название говорит само за себя. Это кадры, которые Flash не вправе изменять в процессе создания анимации. Вы задаете эти ключевые кадры, а промежуточные кадры между ними выстраивает Flash. Существует два типа промежуточных кадров - кадры, построенные на основе изменения геометрии или кадры, построенные на изменении символов. И, конечно же, кадры могут быть пустыми, т.е. ничего не содержать.
Символы . Символы - одно из ключевых понятий во Flash. Символом может быть, как простейшая геометрия или их объединение, так и целая анимация (movie). Это позволяет использовать символы, как мощный механизм создания абстракций во Flash.
Символы добавляют гибкости вашей сцене. В случае с автомобилем вы можете сделать колесо анимированным символом, так, чтобы ощущалось вращение. Можете сделать дверь кнопкой, чтобы при клике мышкой она открывалась. Смысл в том, что в любой момент вы можете изменить содержание и вид символа, что существенно сокращает затраты на модификацию Flash сцен.
Существует три вида символов: анимация , кнопка и изображение :
- изображение , представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением.
- Кнопка . Во Flash есть специально приспособленный под функции кнопки вид символа.
- Фрагмент ролика . Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (это встроенный язык Flash).
Для управления символами используется так называемая библиотека , описание которой, к сожалению, не входит в рамки данной статьи. Окно библиотеки находится по адресу Окно - Библиотека.
В Панели инструментов собраны инструменты, с помощью которых вы будете рисовать объекты, выбирать их, редактировать и перемещать в окне и т.д.
это «выделение» с помощью него можно выделять прямоугольные области графики и объекты
это так называемое «суб выделение» при помощи него можно координировать кривые, составляющие фигуру
«прямая» – позволяет нарисовать прямую линию
«лассо» – можно захватывать часть изображения
«текст»- текстовый ввод
«круг»- рисует окружность, либо овал
«квадрат» – рисует квадрат либо прямоугольник
«карандаш» – рисование от руки, карандашом
«кисть» – рисование кистью
«трансформация» – вращение, изменение размеров
«изменение заливки»- позволяет управлять заливкой: направление, радиус
«чернила»- придает дополнительную толщину
«заливка»- можно заливать цветами объекты
«пипетка» можно выбрать любой цвет из пределов рабочей области Flash MX
Приобретя определенную сноровку, выучив быстрые клавиши и освоившись с полюбившимися инструментами, вы сможете рисовать вашу графику значительно быстрее, чем в любом другом редакторе векторной графики.
Создание анимации – яркий пример интересного и «живого» атрибута. На разных Веб сайтах анимацию используют по-разному. На одних, используют анимированные баннеры, на других отдельные элементы в шаблонах. Обычно, «эффект движения картинок» используют для привлечения посетителя к определённым элементам, которые несут в себе некоторую полезную информацию. Но, в последнее время, дизайнеры стали применять анимацию и для украшения самого шаблона страницы.
Разработка дизайна, с использованием подвижных элементов, привлечет внимание каждого Вашего посетителя. Яркими примерами использования, можно отметить: подвижное меню, всплывающие подсказки, анимированные кнопки, скользящие формы и т. д.
Разработка логотипа, в некоторых случаях, тоже не обходиться без анимации. Она позволяет ярко выразить нужный элемент или просто предать динамичности.
В основе любой анимации лежит фиксация фаз движения объектов – определение в каждый момент времени их положения, формы, размеров и других свойств.
Давайте посмотрим на экран и увидим, что мы можем создавать, используя гив-анимацию. Далее просмотрим видео ролики по созданию: Преобразование формы, Покадровая анимация, Анимация движения, Анимация движения нескольких объектов, Анимация формы, Работа с текстом.
Классическая анимация — это старый способ создания анимации в Animate. Эти анимации похожи на новые анимации движения, однако иногда их сложнее создавать и они менее гибкие. Однако классическая анимация предоставляет некоторые возможности управления, недоступные для анимации движения. Большинство пользователей предпочтет работу с новой анимацией движения, но некоторые пользователи по-прежнему будут использовать классическую анимацию. Дополнительные сведения о различиях см. в разделе «Различия между анимацией движения и классической анимацией».
Приступая к работе:
Перед началом работы с классической анимацией движения следует учитывать следующее.
Классическая анимация — это старый способ создания анимации движения в Animate. Новый более простой способ заключается в использовании анимации движения. См. «Анимация движения».
С помощью классической анимации нельзя анимировать 3D-свойства.
Анимированное отбрасывание тени. Чтобы получить доступ к примеру, загрузите и распакуйте файл Samples.zip и перейдите в папку Graphics\AnimatedDropShadow.
Анимация и градиенты. Чтобы получить доступ к примеру, загрузите и распакуйте файл Samples.zip и перейдите в папку Graphics\AnimationAndGradients.
Как и для большинства операций в Animate, для анимации не требуется ActionScript. Однако, если необходимо, можно создать анимации с помощью ActionScript.
Изменения в классической анимации описаны в ключевом кадре. В анимации движения ключевые кадры задаются в основных моментах анимации, а Animate создает содержимое кадров между ключевыми кадрами. Промежуточные кадры анимации движения выделяются светло-синим цветом со стрелкой, нарисованной между кадрами. Поскольку в документах Animate фигуры сохраняются в каждом ключевом кадре, ключевые кадры следует создавать только в тех точках анимации, в которых что-то изменяется.
Ключевые кадры обозначаются на временной шкале следующим образом: сплошной круг представляет собой ключевой кадр с содержимым, пустой круг перед кадром представляет собой пустой ключевой кадр. Последующие кадры, добавленные в один слой, имеют то же содержимое, что и ключевой кадр.
В классической анимации можно редактировать только ключевые кадры. Tween-кадры можно просмотреть, но их невозможно редактировать напрямую. Чтобы отредактировать tween-кадры, измените один из определяющих ключевых кадров или добавьте новый ключевой кадр между начальным и завершающим кадром. Чтобы добавить элементы в текущий ключевой кадр, перетащите элементы из панели «Библиотека» в рабочую область.
Отображение и редактирование одновременно более одного кадра см. в разделе «Использование режима калькирования».
Эта функция предназначена для создания ключевых кадров для старой классической анимации. Дополнительные сведения по ключевым кадрам свойств для новой анимации движения см. в разделе «Создание анимации движения».
Создание ключевых кадров
Выберите кадр на временной шкале и выберите команду Вставка > Временная шкала > Ключевой кадр .
Щелкните кадр на временной шкале правой кнопкой мыши (Windows) или при нажатой клавише «Control» (Macintosh) и выберите команду «Вставить ключевой кадр».
Вставка кадров во временную шкалу
Чтобы вставить новый кадр, выберите команду Вставка > Временная шкала > Кадр .
Чтобы добавить ключевой кадр, выберите Вставка > Временная шкала > Ключевой кадр , щелкнув правой кнопкой мыши (Windows) или щелкнув, удерживая нажатой клавишу «Control» (Macintosh), кадр, в который помещается ключевой кадр. Выберите команду Вставить ключевой кадр .
Чтобы добавить пустой ключевой кадр, выберите Вставка > Временная шкала > Пустой ключевой кадр , щелкнув правой кнопкой мыши (Windows) или щелкнув, удерживая нажатой клавишу «Control» (Macintosh), кадр, в который помещается ключевой кадр. Выберите команду Вставить пустой ключевой кадр .
Удаление или изменение кадра или ключевого кадра
Чтобы удалить кадр, ключевой кадр или последовательность кадров, выберите их, щелкнув правой кнопкой мыши (Windows) или удерживая нажатой клавишу «Control» (Macintosh), и выберите команду «Удалить кадры». Соседние кадры остаются без изменений.
Чтобы переместить кадр или последовательность кадров вместе с содержимым, выберите их и перетащите в нужное положение.
Чтобы увеличить продолжительность ключевого кадра, перетащите его, удерживая нажатой клавишу «Alt» или «Option», к конечному кадру новой последовательности.
Чтобы скопировать и вставить кадр или последовательность кадров, выберите их и выберите команду Правка > Временная шкала > Копировать кадры . Выделите кадр или последовательность кадров, а затем выберите Правка > Временная шкала > Вставить кадры .Чтобы заменить на целевой временной шкале точное количество скопированных кадров, выберите параметр Вставить и перезаписать кадры .
Чтобы преобразовать ключевой кадр в простой кадр, выберите ключевой кадр и выберите команду Модификация > Временная шкала > Очистить ключевой кадр или щелкните ключевой кадр правой кнопкой мыши (Windows) или при нажатой клавише «Control» (Macintosh) и выберите команду Очистить ключевой кадр . Очищенный ключевой кадр и все кадры, вплоть до следующего ключевого кадра, будут замещены содержимым кадра, предшествующего очищенному кадру.
Чтобы скопировать ключевой кадр или последовательность кадров с помощью перетаскивания, выберите их и перетащите в новое место, удерживая нажатой клавишу «Alt» (Windows) или «Option» (Macintosh).
Чтобы изменить длину последовательности tween-кадров, перетащите влево или вправо начальный или конечный кадр.
Чтобы добавить элемент из библиотеки в текущий ключевой кадр, перетащите элемент из панели «Библиотека» в рабочую область.
Чтобы инвертировать последовательность анимации, выберите нужные кадры в одном или нескольких слоях и выберите команду Модификация > Временная шкала > Обратить кадры . В начале и в конце последовательности должны быть ключевые кадры.
Эта функция предназначена для создания старой классической анимации. Дополнительные сведения о создании новой анимации движения см. в разделе «Создание анимации движения».
Чтобы анимировать изменения свойств экземпляров, групп и типов, можно использовать классическую анимацию движения. Animate может создать промежуточную позицию, размер, поворот и наклон экземпляров, групп и шрифта. Кроме того, Animate может создать промежуточные цвета экземпляров и шрифта, создавая постепенные сдвиги цвета или заставляя экземпляр постепенно исчезать или появляться.
Прежде чем создавать промежуточные кадры цвета групп или шрифта, превратите их в символы. Прежде чем анимировать отдельные символы в блоке текста, поместите каждый символ в отдельный текстовый блок.
Если применить классическую анимацию, а затем изменить число кадров между двумя ключевыми кадрами, Animate снова автоматически создает промежуточные кадры. Или, если переместить группу или символ в другой ключевой кадр, Animate снова автоматически создает промежуточные кадры.
Сегодня мы познакомимся с принципами создания анимации формы.
В отличие от анимации движения, анимация формы, работает только с примитивами, то есть с формами, созданными с помощью инструментов рисования. Так же как и в анимации движения в одном слое не должно быть больше одной анимированной формы.
А теперь давайте попробуем создать анимацию формы.
Я видел подобное где то на англоязычном сайте, мне очень понравился этот пример, думаю он понравиться и вам. Итак, приступим!
1. При помощи инструмента Oval Tool (O) создадим овальную форму, предварительно запретив создание контура, кликнув по перечеркнутому квадратику в палитре Stroke color.
2. В контекстном меню 20 кадра выберем команду Insert Keyframe (Вставить ключевой кадр). С помощью инструмента Selection Tool (V) преобразуем нашу форму следующим образом:
3. Если вы работает во Flash CS3 то в контекстном меню любого кадра расположенного между 1 и 20 выберем команду Create Shape Tween (Создать анимацию формы). Если вы работаете во Flash 8 то выделите любой кадр между 1 и 20 и перейдите в панель Properties и из раскрывающегося списка Tween выберем Shape
Протестируем ролик (Ctrl+Enter).
4. Теперь давайте сделаем так, чтобы наша капелька разделилась на две.
5. Как я уже сказал на одном слое не должно быть более одной анимированной формы. Создадим новый слой, кликнув по значку Insert Layer
6. Выделим 21 кадр в обоих слоях и сделаем его ключевым, выбрав в контекстном меню команду Insert Keyframe. Затем выделим любую из двух частей нашей формы и в контекстном меню выберем команду Вырезать (Cut). Выделим 21 кадр второго слоя и в меню Edit выберем команду Paste in Place.
7. Каждая из частей формы оказалась в своем слое, теперь можно продолжить работу над анимацией. Сделайте 30 кадр обоих слоев ключевым и создайте анимацию формы для каждого слоя, как это делается, вы уже знаете, если забыли, посмотрите 3 шаг. Панель Timeline должна выглядеть как на рисунке.
8. Теперь выберем инструмент Selection Tool (V) и с его помощью изменим форму наших капелек в 30 кадре так, чтобы движение было правдоподобным. У вас должно получиться что то похожее.
9. Сделаем 40 кадр обоих слоев ключевым и создадим анимацию движения в обоих слоях. Подредактируем в 40 кадре наши капельки чуть-чуть чтобы возникло впечатление останавливающихся капелек.
10. Ну вот анимация почти готова, не мешало бы применить к ней фильтры, но как это сделать? Ведь применение фильтров доступно только к муви клипам. Нам ничего не мешает создать пустой муви клип и скопировать туда то, что у нас получилось.
Итак, создаем новый символ Ctrl+F8, радио переключатель ставим в положение Movie clip.
11. Скопируем все содержимое панели Timeline, выделив при помощи инструмента Selection Tool (V) и применив команду контекстного меню Copy Frames.
12. Откроем только что созданный нами муви клип, кликнув по нему дважды в библиотеке. Выделим первый кадр и применим команду контекстного меню Paste Frames. Теперь у нас есть мувиклип с анимацией, и мы свободно можем применять к нему фильтры.
13. Вернемся на главную сцену, кликнув по значку сцены.
14. Удалим все содержимое панели Timeline, выделив при помощи инструмента Selection Tool (V) и применив команду контекстного меню Remove Frames.
Второй слой можно удалить, перетащив в корзину.
15. Сделаем первый кадр ключевым и из библиотеки перетащим на сцену муви клип с анимацией. Перейдем на панель Properties и откроем вкладку Filters.
16. Выделим на сцене муви клип и применим к нему фильтры, делается это так, нужно нажать на плюсик и из списка выбрать нужный фильтр. Я применил фильтры Bevel, Gradient Bevel и Drop Shadow (с настройками фильтров поиграйтесь сами) и вот что у меня получилось:
© 2003 - 2021 Дикая Правда - все права защищены, перепечатка статей запрещена
Обращаем Ваше внимание, что в соответствии с Федеральным законом N 273-ФЗ «Об образовании в Российской Федерации» в организациях, осуществляющих образовательную деятельность, организовывается обучение и воспитание обучающихся с ОВЗ как совместно с другими обучающимися, так и в отдельных классах или группах.
Рабочие листы и материалы для учителей и воспитателей
Более 2 500 дидактических материалов для школьного и домашнего обучения
Столичный центр образовательных технологий г. Москва
Получите квалификацию учитель математики за 2 месяца
от 3 170 руб. 1900 руб.
Количество часов 300 ч. / 600 ч.
Успеть записаться со скидкой
Форма обучения дистанционная
- Онлайн
формат - Диплом
гособразца - Помощь в трудоустройстве
Видеолекции для
профессионалов
- Свидетельства для портфолио
- Вечный доступ за 120 рублей
- 311 видеолекции для каждого
Урок_12. Анимация формы
Дидактическая цель урока: предполагается, что к окончанию урока учащиеся
будут знать:
- алгоритм создания анимации формы;
будут уметь :
- создавать анимацию формы
Задачи личностного развития:
- содействовать формированию умению анализировать и сопоставлять информацию;
- способствовать развитию творческих способностей учащихся.
Тип урока : урок усвоения новых знаний.
Учебно-методическое обеспечение : учебное пособие; рабочая тетрадь; карточки «настроение», карточки задания
Вступительное слово : Здравствуйте, ребята! Прежде чем начать наш урок я предлагаю пройти небольшой тест на настроение. У меня вот такое настроение (смайлик на слайде 2). А сейчас вы покажите всем, какое у вас (на столе у учащихся карточки со смайликами).
1. Организационный момент(слайд_3)
Проверить готовность учащихся с помощью слова ТРУД. (Учитель говорит слово ТРУД, а учащиеся вслух его расшифровывают и проверяют готовность к уроку: Т – тетрадь, Р – ручка, У – учебник, Д – дневник).
2. Актуализация знаний и умений учащихся . (слайд_4)
Фронтальная беседа с учащимися по следующим вопросам.
1. Ребята, чем мы с вами занимаемся на протяжении уже нескольких уроков? (учимся создавать анимацию)
2. Как изменить названия слоя?
3. Как вставить ключевой кадр?
4. Как импортировать изображение в библиотеку?
5. Как открыть окно библиотеки?
6. Какая клавиша преобразовывает объект в библиотечный символ?
7. Какую анимацию мы создавали на прошлом уроке?
3. Изучение нового материала (метод проблемного изложения )
Проблема: как можно анимировать превращение одного объекта в другой (например, яблоко в грушу).
Итак, тема нашего урока – Анимация формы. Сформулируем цели и задачи нашего сегодняшнего урока.
(слайд_5)
Знать :
- алгоритм создания анимации формы
Уметь :
- создавать анимацию формы
- применять полученные знания при создании анимации формы в редакторе Flash
(слайд_6)
Анимация формы (Shape Tween) позволяет , как понятно из названия, анимировать изменение очертания изображения. Для ее создания не требуется, как при создании Motion Tween, преобразовывать рисунки в клипы.
· создать рисунок, который нужно анимировать;
· выделить кадр с рисунком щелчком левой кнопкой мыши по нему и на панели Properties (Свойства) в списке Tween выбрать тип Shape;
· в том месте, где анимация должна закончиться, создать ключевой кадр. В него автоматически скопируется рисунок из начального кадра. Здесь рисунок можно изменить или нарисовать новый.
(слайд_7)
Анимация формы неприемлема к библиотечным объектам типа символ и сгруппированным объектам.
(слайд_8)
Анимация формы позволяет ( ссылка на видеоролик )
o плавно трансформировать одну фигуру в другую;
o плавно изменять цвет фигуры;
o перемещать фигуру;
o комбинировать перечисленные возможности.
(слайд_9)
Показать учащимся создание анимации формы на примере.
Алгоритм создания анимации формы.
1) Нарисовать объект в 1 кадре.
2) Выделить на шкале времени последний кадр анимации.
3) Нажать Fn + F6.
4) В последнем кадре анимации изменить форму объекта или нарисовать новый объект.
5) Выделить любой промежуточный кадр.
6) На панели Свойства Твин (Закрутка) выбрать: Форма ( Shape ) (Фигур)
7) Ctrl + Enter – просмотреть анимацию
(слайд_10)
4. Формирование практических умений учащихся (репродуктивный метод, индивидуальная форма работы)
Предложить выполнить на компьютере задание 1 (РТ,с.50);
5. Физкультминутка ( ссылка на видеоролик)
6. Закрепление изученного.
Учащиеся выполняют на компьютере задание 2 (с.52, РТ), упражнение 1(с. 53, УП). (если останется время)
7. Подведение итогов и рефлексия
(слайд_11)
Фронтальный опрос. Результаты опроса должны прояснить, какие моменты вызывают затруднения у учащихся.
Вопросы для опроса.
1. Что понимают под анимацией формы?
2. Перечислите этапы создания анимации формы.
3. К каким объектам неприменима анимация формы?
4. С каким настроением вы уходите с урока?
Для этого выберите карточку с изображением вашего настроения. Продемонстрируйте его друг другу.
(слайд_12)
8. Домашнее задание.
1. Создайте анимацию формы «Сердце на ладони». Изображение для фона импортируйте .
Сохраните с именем задание_1.fla и выполните публикацию.
2. Откройте файл. Создайте анимацию формы «Мерцающая звезда».
Метод расчета промежуточных кадров (shapes-tweened) позволяет преобразовывать одну форму в другую, изменяя при этом ее размер, положение и цвет. При создании анимации формы следует учесть, что Flash не может выполнить такую анимацию для групп, символов, текстовых блоков и растровых изображений.
Анимация формы фигур позволяет создать эффект метаморфозы, когда одна форма превращается в другую. Для управления этими изменениями служат специальные идентификаторы формы (shape hints), которые позволяют создавать сложные изменения и превращения отдельных частей исходной фигуры в новые. Идентификаторы формы отмечают отдельные точки фигуры до и после изменения ее формы.
Каждая из них обозначается буквой латинского алфавита, что позволяет задать до 26 идентификаторов. Таким образом можно создать изменение выражения нарисованных лиц, превращения одних животных в других и т. п. Для фигур сложной формы желательно задать промежуточные состояния в виде дополнительных ключевых кадров, что позволит контролировать фазы превращения. Лучше все анимируе-мые фигуры размещать в отдельных слоях, хотя можно выполнять одновременную анимацию для слоя, содержащего сразу несколько фигур.
Рис. 4.15. Преобразование формы: автоматическое и с использованием идентификаторов
Для применения анимации формы (shapes-tweened) к группам, символам, текстовым блокам и растровым изображениям их предварительно следует преобразовать командой Modify > Break Apart (Изменить > Разбить на части). По этой команде разрывается связь между экземпляром и символом, превращая экземпляр в набор несвязанных линий и фигур, что позволяет изменять его, не оказывая воздействия на другие экземпляры. Изменения символа в дальнейшем также не будут влиять на данный экземпляр.
- Выделим слой и пустой ключевой кадр на нем, с которого начнется анимация.
- Создадим объект для первого кадра последовательности с помощью любого инструмента рисования.
- Выделим требуемый заключительный кадр последовательности и превратим его в ключевой.
- Создаем новый объект в этом кадре, к которому должен быть преобразован исходный объект.
- Выполним команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр).
- Из раскрывающегося списка Tweening (Расчет) выбирем значение Shape (Форма).
- Зададим значение Easing (Плавность) в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
- В раскрывающемся списке Blend (Переход) выбираем значение Distributive (Распределенный) — для гладких промежуточных форм или значение Angular (Острый) — для сохранения четких углов и прямых линий в промежуточ ных формах. Последнее значение применимо только к формам, имеющим острые углы и прямые линии, в противном случае автоматически будет задано значение Distributive (Распределенный).
Рис. 4.16. Задание параметров анимации формы
Чтобы контролировать сложные превращения формах, используют идентификаторы формы (shape hints). Они определяют точки, которые в исходной и завершающей формах должны соответствовать друг другу.
- Идентификаторы располагают на фигуре в определенной последовательности, например против часовой стрелки, начиная с левого верхнего угла объекта.
- Порядок идентификаторов должен сохраняться как в начальном положении фигуры, так и в конечном положении, чтобы не нарушалась их логическая последовательность (например, если на первом ключевом кадре abc, на следующем не должно быть acb).
- Для фигур сложной формы создаются дополнительные ключевые кадры, определяющие этапы состояния фигуры, с расчетом промежуточных кадров между ними.
Рис. 4.17. Изменение цвета идентификаторов при правильном размещении
- Выделяют первый ключевой кадр в последовательности и выполняют команду Modify > Transform > Add Shape Hint (Изменить > Трансформировать > Добавить идентификатор). На объекте появится первый идентификатор красного цвета с буквой внутри.
- Идентификатор перемещают в точку на контуре фигуры, которую хотят отметить.
- Выделяют конечный ключевой кадр последовательности, на котором идентификатор красного цвета устанавливают в точку на контуре фигуры, в которую должна перейти первоначальная, при этом идентификатор изменяет свой цвет на зеленый.
- Выполняют просмотр фильма, чтобы убедиться, что форма изменяется желаемым образом. В противном случае перемещают идентификатор для более точной настройки изменения формы.
- Повторяют процесс, добавляя новые идентификаторы (b, с и т. д.).
Если идентификаторы формы не отображаются на экране, то выполняют команду View > Show Shape Hints (Вид > Показать идентификаторы формы), которая доступна, если выделенный слой и ключевой кадр содержат идентификаторы формы.
Использование идентификаторов формы позволяет не только выполнять анимацию формы, но и создавать дополнительные эффекты, например вращение.
Лишний идентификатор формы, размещенный на фигуре, можно удалить, щелкнув по нему правой кнопкой мыши и выбрав из контекстного меню команду Remove Hint (Удалить идентификатор). Делать это следует на первом ключевом кадре последовательности. Для удаления всех идентификаторов формы достаточно выполнить команду Modify > Transform > Remove All Hints (Изменить > Трансформировать > Убрать все идентификаторы).
Как уже отмечалось, Flash при создании анимации формы не может выполнить ее расчет для групп, символов, текстовых блоков и растровых изображений. В этих случаях приходится пользоваться пошаговой (покадровой) анимацией, что существенно увеличивает размер конечного файла, но дает простор для воображения и позволяет с помощью последовательности изображений выполнять любые превращения.
Читайте также: