Внеклассная работа по Flash-технологяим

Мастер-класс по теме:
 «Информационные технологии во внеклассной работе:
кружок по Flash-технологиям»

Macromedia Flash вполне может служить стимулом изучения информатики в школе. Эта замечательная программа в состоянии направить энергию подростков, увлекающихся игровыми программами, в правильное русло.

Это ничего, что программа Macromedia Flash трудна для освоения. Главное, чтобы было интересно. А программа вызывает интерес.  Задачей преподавателя информатики является не только не упустить первоначальный интерес детей к этой потрясающей «игрушке», но и развить его до того уровня, когда компьютер становится инструментом творчества и познания жизни.

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

На настоящий момент программа Macromedia Flash – это интегрированная среда для создания интерактивной векторной анимации, ориентированной на создание web-сайтов и презентаций.

Изучением программы Macromedia Flash мы занимаемся на кружковых занятиях. Образовательная программа называется "Flash-технологии". Срок реализации программы: 2 года. Возраст обучающихся: с 11 – 14 лет.

На первых уроках занятий мы изучаем интерфейс программы, знакомимся с инструментами и учимся рисовать.

В дальнейшем мы переходим к изучению и созданию анимаций. Надо обратить внимание обучающихся, что во Flash предусмотрено три различных механизма анимирования объектов:

·        покадровая анимация, когда автор сам создает каждый кадр;

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

­   анимацию движения (motion animation) – анимацию, основанную на перемещении объекта;

­   анимацию формы (shape animation) – анимацию, основанную на трансформации (изменении формы) объекта;

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

Задания на Flash-технологии

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

Задание 1. «Изменение формы и цвета»

1.     Откройте новый документ Flash.

2.     На первом кадре в нижнем левом углу нарисуем синий квадрат (инструмент Прямоугольник + Shift).

3.     20-й кадр сделаем ключевым: щелчком правой кнопкой мыши вызовем контекстное меню и выберем команду Вставить ключевой кадр или используем клавишу F6.

4.     Выделим квадрат и перенесем его вверх.

5.     Зальем квадрат зеленым цветом и с помощью Выделения превратим его в треугольник.

6.     40-й кадр сделаем ключевым.

7.     Удалим треугольник и в правом нижнем углу нарисуем красный круг (инструмент овал + Shift).

8.     Щелкнем между ключевыми кадрами и на панели Свойства выберем: Пара – Shape.

9.     Нажмите сочетание клавиш Ctrl+Enter.

Задание 2. «Изменение формы текста»

1.     Откройте новый документ Flash.

2.     С помощью инструмента Текст напишем цифру «2».

3.     Для форматирования текста воспользуемся командами на панели Свойства.

4.     На 20-м ключевом кадре удалим «2» и вместо нее напишем «5».

5.     Превратим текст в графический объект, для этого выделим сначала «5» и выполним команду: Изменить – Разделить отдельно.

6.     Такую же команду выполним и для «2».

7.     Щелкнем между ключевыми кадрами и на панели Свойства выберем: Пара – Shape.

8.     Нажмите сочетание клавиш Ctrl+Enter.

Если текст состоит не из одной буквы, то команду Разделить отдельно нужно выполнить два раза.

Задание 3. «Применение узловых точек»

Узловые точки формы используются для сложной формы преобразования. Точки показывают какая точка в какую должна перейти. Узловые точки обозначаются кружками с буквами от a до z. Каждой точке на исходном изображении соответствует точка на измененном изображении.

1.     Откроем предыдущую работу.

2.     На 1-м кадре выполним команду: Изменить – Форма – Добавить подсказку формы.

3.     На 1-м и последнем кадрах переместить узловые точки. Красная и зеленая узловые точки показывают связь.

4.     Нажмите сочетание клавиш Ctrl+Enter.

Задание на самостоятельное выполнение.

Примените анимацию формы для преобразования слова «Большой» в слово «Маленький».

II.                 Создание покадровой анимации

Задание 1. «Стрелка»

1.     Откройте новый документ Flash.

2.     Выберем инструмент Линия, на панели Свойства зададим размер и установим цвет.

3.     На 1-м кадре проведем горизонтальную линию – стрелку.

4.     Каждый 5-й кадр до 20-го сделаем ключевым и с помощью инструмента Подвыделение будем поворачивать стрелку на 45⁰ (общий поворот 180⁰).

5.      Ctrl+Enter.

6.     Выделим все кадры, через контекстное меню выполним: Копировать кадры.

7.     На 25-й кадр: Вставить кадры.

8.     Выделим кадры с 25-го по последний: Обратить кадры.

9.     Ctrl+Enter.

Задание 2. «Светофор»

Для того, чтобы кадры изменялись не так быстро, мы будем создавать 1-й, 5-й, 10-й и 15-й кадры.
1. Откройте новый документ Flash.
2. Нарисуем в 1-м кадре вот такой светофор:
3. Щелкните курсором по 5-му кадру и нажмите клавишу F6. Мы скопировали содержимое 1 кадра в 5-й кадр.
4. Залейте в 5-м кадре верхнюю черную окружность красным цветом.
5. Щелкните курсором по 10-му кадру и нажмите клавишу F6.
6. Измените красный цвет на черный, а вторую окружность залейте желтым цветом.
7. Щелкните курсором по 15-му кадру и нажмите клавишу F6.
8. Измените желтый цвет на черный, а нижнюю окружность залейте зеленым цветом.
9. Щелкните курсором по 20 кадру и нажмите клавишу F6.
10. Нажмите сочетание клавиш Ctrl+Enter.

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

Задание 1. «Движение квадратика»

1.     Откройте новый документ Flash.

2.     На 1- кадре в левом нижнем углу нарисуем квадрат.

3.     Выделим рисунок и его сгруппируем: Изменить – Группировать.

4.     25-й кадр сделаем ключевым: F6.

5.     Передвинем квадрат в верхнюю часть.

6.     50-й кадр сделаем ключевым: F6.

7.     Передвинем квадрат в нижний правый угол.

8.     Между 1-м и 25-м ключевыми кадрами на панели Свойства выберем: Пара – Motion, Вращать – CW (по часовой стрелке).

9.     Между 25-м и 50-м ключевыми кадрами на панели Свойства выберем: Пара – Motion, Вращать – CCW (против часовой стрелки).

10.Нажмите сочетание клавиш Ctrl+Enter.

Задание 2. «Создание анимации движения по заданной траектории. Работа со слоями»

1.     Откройте новый документ Flash.

2.     Создадим 2 слоя:

1)     слой «Фон», где нарисуем тропинку с растущими вдоль нее деревьями и цветами, все рисунки сгруппируем;

2)     слой «Колобок», где создадим движение колобка.

3.     На слое «Колобок» на первом ключевом кадре нарисуем колобок.

4.     Выделим рисунок и его сгруппируем: Изменить – Группировать.

5.     60-й кадр сделаем ключевым: правая кнопка мыши – Вставить ключевой кадр или F6.

6.     Переместите колобок на конец тропинки.

7.     Щелкнем между ключевыми кадрами и на панели Свойства выберем: Пара – Motion.

8.     Для просмотра нажмите: Ctrl + Enter.

9.     Создадим слой траектории, для этого щелкнем на соответствующей пиктограмме.

10.На первом кадре слоя траектории Карандашом нарисуем траекторию движения колобка.

11.На панели Свойства установим флажок Привязать.

12.Выделим колобок и перетащим его на начало траектории.

13.На всех слоях 60-й кадр сделаем ключевым.

14.На 60-м кадре слоя траектория также установим флажок Привязать и перетащим колобок на конец траектории

15.Ctrl + Enter.

Задание на самостоятельное выполнение

Выполните движение квадрата по заданной траектории.

IV. Использование клипов и символов библиотеки

Библиотека – это набор символов и клипов, которые можно неоднократно использовать в фильме. Вызывается по команде: Окно – Библиотека.

Задание 1. «Создание символа – клипа»

1.     Откроем новый документ Flash.

2.     Выполним команду: Вставить – Новый символ.

3.     В диалоговом окне Создать новый символ назовем символ и установим переключатель Ролик.

4.     В окне символа Букашка нарисуем божью коровку и на 3-х ключевых кадрах создадим движение ножек.

5.     Вернемся к сцене 1 и выполним команду: Окно – Библиотека.

6.     На первый кадр сцены 1 с помощью мыши вытащим символ Букашка.

7.     60-й кадр сделаем ключевым и создадим анимацию движения.

8.     Создадим еще несколько слоев и на каждый слой вытащим Букашку, изменим размер и направление, создадим анимацию движения. 

9.     Ctrl + Enter.

Задание 2. «Преобразование в символ.
 Управление режимами просмотра кадров»

1.     Откроем новый документ Flash.

2.     Выполним команду: Вставить – Новый символ.

3.     Назовем символ Листок и установим переключатель Ролик.

4.     В окне символа нарисуем листок.

5.     Для роста этого листка создадим анимацию движения до 20-го кадра с увеличением масштаба. При этом в первом и последнем кадре точка прикрепления черенка листка к ветке должна оставаться на месте.
Воспользуемся кнопками Управления режима просмотра кадров на временной шкале:

1)     калька – режим просмотра содержания нескольких кадров;

2)     контур – отображаются линии;

3)     редактирование – все видимые кадры доступны для редактирования;

4)     всегда показывать маркеры.

6.     Вернемся к сцене и нарисуем ветку.

7.     Окно – Библиотека

8.     Из библиотеки символ Листок установим несколько раз на ветку, изменяя размер и положение: Изменить – Трансформация или инструмент Свободная трансформация.

9.     Ctrl + Enter.

10. Выделим ветку и преобразуем в символ: Вставить – Преобразовать в символ.

11.На сцене нарисуем ствол дерева и установим ветки.

12.Ctrl + Enter.

Задание 3. «Создание кнопок и применение сцен»

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

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

1 часть «Применение сцен»

1.     Для вызова Инспектора сцен выполним команду: Окно – Сцена. (Также можно: Изменить – Сцена).

2.     Добавим Сцену 2.

3.     Переименуем сцены: Сцену 1 назовем Привет, Сцену 2 – Пока.

4.     На сцене Привет выберем Фон и напишем текст «ПРИВЕТ!».

5.     Для перехода к сцене Пока щелкнем на названии в Инспекторе сцен.

6.     Напишем текст «ПОКА!».

7.     Вернемся к сцене Привет и на первом кадре выполним команду: Действия – Кадр: Actions – Movie Control – stop (дважды щелкнуть).

8.     То же самое выполним на сцене Пока.

2 часть «Создание и использование кнопок»

1.     Выберите инструмент Прямоугольник.

2.     Выберите градиентный цвет заливки.

3.     На сцене Привет на первом кадре нарисуем прямоугольник с размером с будущую кнопку.

4.     Выделим прямоугольник и выполним команду: Вставить – Преобразовать в символ.

5.     В окне Преобразования символа выберем Кнопка и дадим имя Кнопка1.

6.     Выполним: Окно – Библиотека, откроем символ Кнопка1.

В кнопке четыре кадра, которые соответствуют четырем ее состояниям:

Вверх – первоначальное (пассивное) состояние кнопки. Кнопка находится в этом состоянии, когда курсор мышки находится за её пределами.

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

Вниз – состояние кнопки, когда она нажата. В этом состоянии используются эффекты «вдавливания», более тёмной «подсветки и т.п.

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

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

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

8.     Ctrl + Enter, но перехода еще нет.

9.     Чтобы кнопка заработала, выполним Действия – Кнопка:

Задание на самостоятельное выполнение

Создайте кнопку2 и выполните переход назад со сцены Пока на сцену Привет.

Литература

1.     Журналы «Информатика и образование» за 2003 – 2004 гг.

2.     Журнал «Информатика в школе» №3 – 2006 г.

3.     Газета «Информатика» за 2004 г.