Инфоурок / Информатика / Другие методич. материалы / Внеклассная работа по Flash-технологяим
Обращаем Ваше внимание: Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии (2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации).

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Я люблю природу», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

ПРИЁМ ЗАЯВОК ТОЛЬКО ДО 15 ДЕКАБРЯ!

Конкурс "Я люблю природу"

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




Московские документы для аттестации!

124 курса профессиональной переподготовки от 4 795 руб.
274 курса повышения квалификации от 1 225 руб.

Для выбора курса воспользуйтесь поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВА).

ДИПЛОМ от Столичного учебного центра: KURSY.ORG


библиотека
материалов

Елисеева Людмила Сергеевна, учитель информатики МОБУ СОШ № 1 г. Давлеканово, январь 2015


Мастер-класс по теме:
«Информационные технологии во внеклассной работе:
кружок по
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-технологии

  1. Анимация формыhello_html_198ce24b.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

  5. Ctrl+Enter.

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

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

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

  9. Ctrl+Enter.

Задание 2. «Светофор»http://www.eorhelp.ru/sites/default/files/ckeditor/16014/images/2-1.jpg

Для того, чтобы кадры изменялись не так быстро, мы будем создавать 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.hello_html_2aca2b44.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  15. Ctrl + Enter.

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

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


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

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

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

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

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

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

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

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

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

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

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

  9. Ctrl + Enter.hello_html_m1d52d718.png















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

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

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

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

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

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

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

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

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

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

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

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

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

  9. Ctrl + Enter.

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

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

  12. Ctrl + Enter.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

















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

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



Литература

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

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

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

13


Самые низкие цены на курсы переподготовки

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

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 13 декабря. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru


Краткое описание документа:

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

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

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

 

 

Общая информация

Номер материала: 334001
Курсы профессиональной переподготовки
133 курса

Выдаем дипломы установленного образца

Заочное обучение - на сайте «Инфоурок»
(в дипломе форма обучения не указывается)

Начало обучения: 13 декабря
(набор групп каждую неделю)

Лицензия на образовательную деятельность
(№5201 выдана ООО «Инфоурок» 20.05.2016)


Скидка 50%

от 13 800  6 900 руб. / 300 часов

от 17 800  8 900 руб. / 600 часов

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

Похожие материалы

Получите наградные документы сразу с 38 конкурсов за один орг.взнос: Подробнее ->>