8 класс

Урок 1. Основные понятия. Редактор для создания анимации

Цель урока: изучить основные понятия анимации, её  виды и интерфейс редактора для создания анимации.


 

Анимация – имитация движения или изменения формы статиче­ских объектов.

Кадры – изображения последовательных фаз движения объектов или их частей. Ключевым называют кадр, в котором задаются изме­нения в анимации.

Компьютерная анимация – вид анимации, создаваемой при помощи компьютера.

Виды компьютерной анимации:

  • покадровая анимация – анимация, полностью составленная из клю­чевых кадров;
  • автоматическая анимация (движения и формы) – заключается в ри­совании ключевых кадров, соответствующих основным фазам дви­жения, и последующем автоматическом дополнении промежуточных кадров.

Macromedia Flash MX – программа для создания векторной графики и компьютерной анимации.

Интерфейс программы Macromedia Flash MX

Задания по теме урока

Если необходимо, скачайте и установите редактор анимации  Macromedia Flash (скачать)

Файл, с описанием заданий можно скачать по ссылке (скачать).

Дополнительные задания

Это изображение имеет пустой атрибут alt; его имя файла - hw-e1653285769766.png

Домашнее задание

§ 6 учебного пособия, ответить на вопросы

свернуть

Урок 2. Создание изображений и редактирование объектов

Цель урока: изучить создание и редактирование изображений с использованием инструментов редактора анимации.


Инструмент Овал (Oval Tool). Пример использования

В панели инструментов Tools (Инструменты) выберите инструмент Овал (Oval Tool) , кликнув по нему левой клавишей мыши.

Там же в панели инструментов Tools (Инструменты) задайте цвет контура: нажмите левой клавишей мыши на модификаторе цвета штриха , и в появившейся палитре выберите любой цвет. Если Вам нужен больший спектр цветов, нажмите на кнопку Палитра  и в новом меню полного спектра цветов выберите цвет или задайте его цифровое представление.

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

Для выбора заливки внутренней части овала в панели инструментов Tools (Инструменты) нажмите левой клавишей мыши на модификаторе цвета заливки , и в появившейся палитре выберите любой цвет.

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

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

После того, как будут заданы параметры контура и внутренней части овала, в рабочей области (белый лист) с помощью левой клавиши мыши нарисуйте несколько овалов, для этого:

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

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

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

Инструмент Прямоугольник (Rectangle). Примеры использования

Создайте новый файл (как это сделать описано ранее)

  • В панели инструментов выберите инстумент Rectangle (Прямоугольник) .
  • В панели инструментов, в разделе Colors (Цвета) задайте цвет контура 
  • В панели панели Properties (Свойства) задайте:
    • толщину контура,
    • стиль контура,
    • цвет заливки.

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

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

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

  • цвет,
  • градиент.

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

  • Кликните на модификаторе Round Rectangle radius (Радиус Закругления)  в разделе Options панели Tools.
  • В появившемся окне задайте радиус.
  • Нажмите OK.

Или при рисовании удерживайте клавиши со стрелками.

Нарисуйте прямоугольник со скругленными углами.

Еще один вариант.

Загляните в панель Properties. Давайте еще поэкспериментируем с углами нашего квадрата/прямоугольника. Воспользуемся списком Join  . Ниже примеры каждого пункта. Предварительно выделите ваш прямоугольник левой клавишей мыши.


С помощью инструмента Arrow (Стрелка) можно изменить форму фигур (Вытягивание контурных линий):

  • Выберите инструмент  Arrow (Стрелка).
  • Подводя курсор к границе фигуры, найдите состояние инструмента Arrow (Стрелка), в котором рядом со стрелкой появляется дуга. Нажмите на левую клавишу мыши и, не отпуская ее, потяните мышь в любом направлении.
  • Отпустите левую клавишу мыши.

 Примечание

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

Если вам необходимо сгруппировать объекты зайдите в меню Modify -> Group.

Примеры

Обратите внимание, что возле инструмента квадрат  маленький треугольник, обращенный вниз. Если нажать левую кнопку мыши на инструменте квадрат, немного удержать ее, то вы сможете нарисовать многоугольник (PolyStar).


Задания по теме урока

Если необходимо, скачайте и установите редактор анимации  Macromedia Flash (скачать)

Файл, с описанием заданий (скачать), а также файлы, используемые в заданиях, можно скачать по ссылкам (скачать).

Дополнительные задания

Это изображение имеет пустой атрибут alt; его имя файла - hw-e1653285769766.png

Домашнее задание

§ 7 учебного пособия, ответить на вопросы

свернуть

Урок 3. Слои. Библиотека объектов. Импорт и использование изображений

Цель урока: изучить  использование слоёв, библиотеки объектов и  импорт изображений.


Слои

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

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

Слой можно заблокировать, т. е. запретить редактирование расположенных на нём объектов. Это полезно делать, чтобы нечаянно не поместить на “чужой” слой вновь создаваемые объекты, а также чтобы не исказить и не переместить уже существующие. Чтобы заблокировать слой, достаточно щелкнуть мышью по точке, расположенной в столбце под изображением замка.

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

Для удаления слоя необходимо выделить в списке его имя и щелкнуть на кнопке с изображением корзины под списком слоёв.

Библиотека объектов

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

Возможны три типа символов:

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

Копию символа, помещенную в рабочую область, называют экземпляром. Фактически экземпляр представляет собой лишь ссылку на библиотечный образец. Если в библиотечном образце вырезать отверстие, то все его экземпляры унаследуют это изменение.

Импорт объектов

В документ Flash можно импортировать изображения, аудио- и видеофрагменты из файлов других графических и мультимедийных форматов –  JPEG, GIF, PNS, PSD. MP3, FVI, WAV. Размер импортных изображений может не соответствовать размерам монтажного стола, для этого надо либо изменить размеры монтажного стола, либо размер изображения.

Существую следующие варианты импорта изображения:

  • непосредственно в рабочую область
  • библиотеку

Задания по теме урока

Если необходимо, скачайте и установите редактор анимации  Macromedia Flash (скачать)

Файл, с описанием заданий (скачать), а также файлы, используемые в заданиях, можно скачать по ссылкам (скачать).

Дополнительные задания

Это изображение имеет пустой атрибут alt; его имя файла - hw-e1653285769766.png

Домашнее задание

§ 8 учебного пособия, ответить на вопросы

свернуть

Урок 4. Покадровая анимация

Цель урока: изучить временную шкалу и покадровую анимацию в редакторе Flash. 


Смотрим первую часть образовательного видео до 6 мин. 10 сек

При работе с анимацией используется шкала времени. На ней отображается информация о слоях и кадрах. Ячейки на шкале времени соответствуют кадрам.

Красный маркер указывает на текущий кадр.

Пустые кадры не окрашены.

Ключевые кадры обозначаются кружками: пустые(незаполненные) ключевые кадры обозначаются белыми кружками, заполненные – черными кружками. Неизменяющиеся кадры, которые копируют ключевые, обозначаются серым цветом.

Сиреневый или зелёный цвет кадров говорит о том, что кадры сгенерированы автоматически.

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

Созданная анимация сначала сохраняется в файле с расширением FLA. Этот документ можно просматривать и редактировать в редакторе FLASH. Чтобы просматривать анимацию во  FLASH и веб-браузере, документ надо преобразовать в SWF-файл. Этот процесс называется публикацией фильма. Для публикации анимации надо выполнить команду Файл – Опубликовать.

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

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

  • F6 – вставка копии ключевого кадра;
  • F7 – вставка пустого ключевого кадра;
  • F5 – вставка простого кадра;
  • Shift + F6 – очистка ключевого кадра;
  • Shift + F5 – удаление кадра.

Задания по теме урока

Если необходимо, скачайте и установите редактор анимации  Macromedia Flash (скачать)

Файл, с описанием заданий (скачать), а также файлы, используемые в заданиях, можно скачать по ссылкам (скачать).

Дополнительные задания

Это изображение имеет пустой атрибут alt; его имя файла - hw-e1653285769766.png

Домашнее задание

§ 9 учебного пособия, ответить на вопросы

свернуть

Урок 5. Анимация движения

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


Смотрим вторую часть образовательного видео с 6 мин. 5 сек.

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

Алгоритм создания анимации движения.

  1. Создать графическое изображение (или импортировать изображение) 
  2. Объект, участвующий в движении превратить в символ (Выделить объект и нажать F8).
  3. Перейдите на конечный кадр и превратить его в ключевой (Нажать F6). (1 секунда равна 12 кадрам).
  4. На последнем кадре измените положение (размер) объекта.
  5. Выделить промежуточный кадр (примерно середина) и сгенерировать анимацию движения. (Вставка→ Шкала времени→ Создать промежуточное отображение, или Панель Свойства: Tween (Твин) – Движение (Motion Tween) произведем автозаполнение промежуточных кадров. Сиреневая подсветка и стрелка от первого кадра к последнему говорит о том, что промежуточные кадры сгенерированы).
  6. Протестируйте анимацию (Ctrl + Enter).
  7. Сохраните анимацию.

Промежуточные кадры вставляются с помощью клавиши F5, удаляются с помощью клавиш Shift + F5.

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

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

  1. Создать графическое изображение (или импортировать изображение) 
  2. Объект, участвующий в движении превратить в символ (Выделить объект и нажать F8).
  3. Перейдите на конечный кадр и превратить его в ключевой ( Нажать F6). (1 секунда равна 12 кадрам).
  4. На последнем кадре измените положение (размер) объекта.
  5. Выделить промежуточный кадр(примерно середина) и сгенерировать анимацию движения. (Вставка→ Шкала времени→ Создать промежуточное отображение, или Панель Свойства: Tween(Твин) – Движение (Motion Tween) произведем автозаполнение промежуточных кадров. Сиреневая подсветка и стрелка от первого кадра к последнему говорит о том, что промежуточные кадры сгенерированы).
  6. Выделите слой с анимируемым объектом и нажмите кнопку Добавить  направляющую движения (С помощью Инструмента карандаш нарисуйте траекторию движения, по которой будет перемещаться анимируемый объект).
  7.  Совместите точку трансформации объекта(кружок в центре) с началом траектории ( в первом кадре) и концом (в конечном кадре).
  8. Протестируйте анимацию (Нажать Enter).
  9. Сохраните анимацию.
  10. Опубликуйте анимацию (Ctrl+ Enter).

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


Задания по теме урока

Если необходимо, скачайте и установите редактор анимации  Macromedia Flash (скачать)

Файл, с описанием заданий (скачать), а также файлы, используемые в заданиях, можно скачать по ссылкам (скачать).

Дополнительные задания

Это изображение имеет пустой атрибут alt; его имя файла - hw-e1653285769766.png

Домашнее задание

§ 10 учебного пособияответить на вопросы

свернуть

Урок 6. Анимация формы

Цель урока: изучить создание анимации формы.


 

Анимация формы – плавное изменение объекта анимации. При создании  анимации формы объектом является обычное векторное изображение. 

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

Анимация формы позволяет:

  • плавно трансформировать одну фигуру в другую;
  • плавно изменять цвет фигуры;
  • перемещать фигуру;
  • комбинировать перечисленные возможности.

Алгоритм создания анимации формы.

  1. Нарисовать объект в 1-ом кадре.
  2. Выделить на шкале времени последний кадр анимации.
  3. Нажать F7.
  4. В последнем кадре анимации изменить форму объекта или нарисовать новый объект.
  5. Выделить любой промежуточный кадр.
  6. На панели Свойства Твин выбрать: Форма (Shape) 
  7. Протестируйте анимацию (Ctrl+ Enter)

Задания по теме урока

Если необходимо, скачайте и установите редактор анимации  Macromedia Flash (скачать)

Файл, с описанием заданий (скачать), а также файлы, используемые в заданиях, можно скачать по ссылкам (скачать).

Дополнительные задания

Это изображение имеет пустой атрибут alt; его имя файла - hw-e1653285769766.png

Домашнее задание

§ 11 учебного пособияответить на вопросы

свернуть

Урок 7. Основные алгоритмические конструкции

 

 

Цель урока: повторить основные алгоритмические конструкции.


 

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

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

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

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

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

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

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

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

Для  ввода  данных  предназначена команда  read(). В  скобках  через  запятую перечисляются имена переменных, значения которых необходимо ввести.

Для  вывода  данных  используют команду  write().  Она  позволяет  выводить  текстовые  сообщения  и  числовые значения.  При использовании команды writeln (); после  вывода  сообщения  или  числа происходит перевод курсора на следующую строку.

Оператор  присваивания  предназначен для того, чтобы:

  •   задавать значения переменным;
  •   вычислять  значение  выражения

(результат  будет  записан  как  значение переменной).

Формат  записи  оператора  присваивания:

< имя переменной > := < выражение >;
Арифметические операции

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

Тип арифметического выражения определяется по следующему правилу: если все операнды целые и в выражении отсутствует операция деления ( / ), то выражение имеет тип integer, в противном случае выражение имеет тип real.

Для операций div и mod выполняются эти же правила, но операнды могут быть только целыми. Правила вычисления операций div и mod – следующие:

div y – результат целочисленного деления x на y.
mod y – остаток от целочисленного деления x на y.

Форматный вывод 

Пример 1. Задана длина стороны квадрата a. Написать программу нахождения площади квадрата и длины его диагонали.

Var a, S, d: real;
Begin
	Write('введите a=');
	Readln(a);
	S:=sqr(a);
	d:=a*sqrt(2);
	Writeln('S=',s);
	Writeln('d=',d);
End.

 

Пример 2. Даны x, y. Написать программу для вычисления значения выражения

Var x,y,a: real;
Begin
	Write('введите x=');
	Read(x);
	Write('введите y=');
	Read(y);
	a:=2*x*(x-y)/(7+y*y);
	Writeln('a=',a);
End.

Задания по теме урока

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

Задание 2. Даны три действительных числа. Составьте программу нахождения среднего арифметического этих чисел. Результат указать с точностью три знака после запятой.

Задание 3. Даны два катета прямоугольного треугольника. Найдите длину гипотенузы.

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

Это изображение имеет пустой атрибут alt; его имя файла - hw-e1653285769766.png

Домашнее задание

§ 13 учебного пособияответить на вопросы

свернуть