- Преподавателю
- Информатика
- Практические задания по FLAFH-технологии
Практические задания по FLAFH-технологии
Раздел | Информатика |
Класс | - |
Тип | Рабочие программы |
Автор | Жукова Е.Г. |
Дата | 14.12.2014 |
Формат | docx |
Изображения | Есть |
Практические занятия
Практическое задание №1. Анимация движения облаков и движения яхты.
-
Откроем новый фильм и скопируем в его библиотеку графический символ рисунка яхты.
Рис. 4.1. Слой-фон
-
Переименуем существующий слой в Фон и нарисуем в нем фоновое изображение. Оно представляет собой два прямоугольника, заполненные градиентной заливкой (рис. 4.1).
-
Создадим слой 2 и дадим ему название облако 1. Нарисуем в нем объект облако.
-
Сгруппируем объект. Переместим объект в исходную точку движения. Облако расположено на рабочем столе за пределами кадра (рис. 4.2). С первой секунды фильма оно начнет появляться в кадре, пересечет его справа налево и покинет кадр.
Рис. 4.2. Слой 2 - Облако 1.
-
Создадим третий слой. Назовем его Облако 2. Чтобы не рисовать второе облако скопируем в этот слой объект из слоя Облако 1. Переместим объект в начальную точку движения. Поскольку двух одинаковых облаков на небе не бывает, изменим форму облака, применяя операции трансформации и искажения (рис. 4.3).
Рис. 4.3. Слой 3 - Облако 2
-
Создадим последний слой под названием Яхта (рис. 4.4). Поместим в него символ Яхта из библиотеки. Для этого выберем этот символ из списка символов и переместим его в первый кадр фильма. Таким образом, все слои созданы, объекты размешены каждый на своем слое. Осталось задать их движение.
Рис. 4.4. Слой 4 - Яхта
-
Выберем слой Яхта. Перейдем в 120-й кадр, создадим ключевой кадр и переместим графический символ в конечную точку движения. Щелкнем правой кнопкой мыши на ячейке первого кадра и выберем из контекстного меню команду Create Motion Tween. Будет создана автоматическая анимация движения символа Яхта.
Облака должны двигаться в одном направлении, но с разной скоростью. Те из них, что находятся на заднем плане, ближе к линии горизонта, должны двигаться медленнее, а большое облако на переднем плане быстрее. Последовательно выберем слои, в которых находятся облака, и создадим автоматическую анимацию их движения.
-
Фон должен отображаться в каждом кадре и оставаться неподвижным. Чтобы сделать это, выберем слой Фон. Щелкнем правой кнопкой мыши на ячейке первого кадра и выберем команду Сору Frame. Щелкнем правой кнопкой на ячейке 120-го кадра. Выберем команду Paste Frame. В 120-м кадре будет создан ключевой кадр, содержащий копию первого кадра, а промежуток между ключевыми кадрами заполнится статическими кадрами с изображением фона.
-
Просмотрим фильм. (Ctrl+Enter).
Практическое задание №2.
Серый текст на черном фоне освящается белой точкой (лучом), которая непрерывно перемещается из начала в конец текста и обратно. В пределах освящения текста серой точкой, текст белого цвета отбрасывает тень черного цвета на сером фоне.
Рис. 4.11. Временная диаграмма анимации маски
1. Для данной анимации понадобиться 3 слоя. Поэтому добавьте еще 3 слоя (ПКМ/Insert Layer).
3. На самом верхнем слое нарисуйте окружность, конвертируйте ее в Ролик. Создайте движение этого объекта от начало текста до конца.
4. На втором слое, создайте серый фон. На этом же слое напишите какой-нибудь текст белого цвета. Старайтесь, чтобы текст был на весь кадр.
5. Чтобы создать тень текста, необходимо скопировать текст и нижний текст сделать чуть светлее верхнего. Наложить тексты друг на друга с небольшим сдвигом.
6. Выделите все фреймы, находящиеся на втором слое и скопируйте их на третий слой (нижний). Поменяйте фон на черный, а текст на серый.
7. Самый верхний слой сделайте маской. Тогда второй слой автоматически станет под маской (рис 4.11.)
Рис. 4.12. Общий вид анимации
Для того чтобы более эффектно работать со слоями пользуйтесь Видимостью слоя (Глазом) и Возможностью редактирования (Замком).
Практическое задание №3. Перетаскивание объектов
В этом примере мы научимся перемещать объекты с помощью мышки.
-
Нарисуйте объект, который надо будет перемещать. С помощью F8 конвертируйте его в кнопку (Button). Нажмите правой кнопкой мыши на объекте, зайдите в "Actions" и вставьте следующий скрипт:
on (press) {
startDrag (_parent.obect);
}
on (release) {
stopDrag ();
}
Скрипт работает следующим образом: при нажатии на кнопку (on (press)), срабатывает функция startDrag - возможность открепить объект от листа для ролика (Movie Clip - obejct), а при отпускании кнопки (on (release)) срабатывает функция закрепления объекта в текущей позиции (stopDrag).
-
С помощью F8 конвертируйте кнопку в Movie Clip, и в панели Prorerties в пункте Instance Name назовите его "obect" (рис. 8.2.)
Рис. 8.2.
-
Все готово. Теперь можно смело перемещать объект, удерживая левой клавишей мыши.
Практическое задание №4. Условный оператор.
Кнопка Play определяет, все ли объекты находятся ниже линии. Если да, то true, иначе - false.
Рисунок 2
-
Возможность перетаскивать объект реализована в практическом задании №3.
-
Ниже приведен пример проверки кнопки, согласно условию задачи
on(release) {
if (obj1._y > 240 && obj2._y >240 && obj3._y>240)
t=true; else t=false;
}
Где obj1, obj2, obj3 - названия символа 1,2,3. Чтобы назвать символ, необходимо в Properties в пункте Instance Name.
Переменная t присваевается к Тексту через Properties в Var - раздел описания переменных.
Практическое задание №5. Создание программы тестирования
-
Расположите на первом ключевом кадре статическое поле (с вопросом), несколько переключателей (с вариантами ответов), динамическое поле (для вывода результата) и кнопку в соответствии с рисунком 8.7.
Рис. 8.7. Объекты первого ключевого кадра
Чтобы добавить компоненты Radio Button на кадр, необходимо открыть панель Components.
Необходимо дать собственное имя каждому переключателю (например, для первого варианта ответа a1, для второго - а2, для третьего - а3. Имя компонента настраивается в панели Properties в свойстве Component.
-
Также необходимо для всех компонентов Radio Button в пункте Change Handler присвоить имя функции-обработчика, например myfun (рис. 8.8)
-
Задайте подписи каждого Label - значение надписи варианта ответа
Рис. 8.8. Настройки компонента Radio Button1
Для осуществления обратной связи необходимо проверять состояние каждого переключателя. Для этой цели используется метод GetState, который возвращает истинное значение, если переключатель отмечен, и ложное значение в противном случае.
-
Результатом работы будет сообщение «Верно» или «Неверно», выведенное при помощи динамического поля. Свяжите динамическое поле с переменной res.
Для этого выделите поле и настройте его тип - Dinamic text и укажите в пункте Var переменную res (рис. 8.9).
Рис. 8.9. Настройки динамического поля
-
Создайте функцию-обработчик myfun. Эта функция будет выводить сообщение в зависимости от выбора пользователя.
function myfun(component){
if (a2.getState() == 1) {
res = "Верно";
} else {
res = "Неверно";
}
р=0
}
-
Доработайте функцию так, чтобы у пользователя была только одна попытка ответить. Для этого придется после ответа сделать переключатели неактивными. Перед последней фигурной скобкой вставить следующий код:
radio1.setEnabled(false);
radio2.setEnabled(false);
radio3.setEnabled(false);
-
На первом кадре перед функцией необходимо обязательно поставить команду: stop(); для того, чтобы ролик не крутился бесконечно и можно было работать с тестом.
Скрипт к первому кадру будет выглядеть в соответствии с рис. 8.10.
Рис. 8.10.
-
Для перехода на следующий кадр необходимо запрограммировать кнопку, при нажатии на которую будет открываться следующий кадр. В кнопке должен приписан следующий код:
on (release) {
if(a2.selected){
p=p+1;
}
Play ( );
}
где a2 - компонент правильного варианта ответа.
-
Аналогично создаем столько ключевых кадров, сколько требуется вопросов в тестировании. Только необходимо учесть, чтобы поле rec автоматически очищалось при переходе на следующий кадр, т.е. вопрос. Тогда скрипт для второго фрейма будет иметь вид:
res='';
function myfun(component) {
if (a5.getState()==1) {
res="Верно";
} else {
res="Неверно";
}
a4.setEnabled(false);
a5.setEnabled(false);
a6.setEnabled(false);
}
где res=''; - очистка переменной rec; а5 - компонент правильного варианта ответа во втором вопросе; а4, а5, а6 - варианты ответов.
-
На последнем кадре ставим два динамических текстовых поля, которым даем имена: prav - для вывода количества правильных ответов и oc - для вывода полученной оценки (рис. 8.11).
Рис. 8.11. Временная диаграмма программы тестирования из 5-ти вопросов.
Вид объектов последнего кадра - результат тестирования.
-
В панели Actions вводим следующий код на последний ключевой фрейм:
stop();
prav=p;
if (prav<3){
oc="2";
}else if (prav==3){
oc="3";
}else if (prav==4) {
oc="4";
}else {
oc="5";
}
-
При необходимости на последнем кадре можно вставить кнопку, позволяющую сдать тест заново, а на отдельном слое установить кнопку Выход для возможности выхода из теста в любой момент.
Кнопка «Выхода» или закрытие проекта
Action кнопки для закрытия проекта:
on(release){
fscommand("quit", "true");
}