Продолжение уроков Flash
элективный курс по информатике и икт (10 класс) по теме

Урок №6

Тема: Набор текста

Цель: Научить школьников вводу, редактированию и видоизменениям текста.

План урока: 

1. Организационный момент
2. Объяснение нового материала
3. Работа за компьютером.

          Ход урока:

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

2. Объяснение новой темы следует начать с повторения того, как происходит работа в текстовом редакторе Word. Чтобы написать текст во Flash, нужно выбрать на панели инструментов инструмент Text и щелкнуть на рабочем поле. Можно набирать текст с заданной шириной ввода, а можно произвольно набирать текст, при этом рамка, ограничивающая текст будет растягиваться по мере набора текста. Эта рамка будет отличаться от рамки фиксированной ширины тем, что в верхнем правом углу  этой рамки будет круглый маркер, а не квадратный. Можно фиксированный блок изменить на произвольный, если дважды щёлкнуть на квадратном маркере.

Для форматирования текста применяется панель Character (Символы).

Если надо применить одинаковое форматирование для нескольких текстовых блоков, можно, используя инструмент Arrow и клавишу Shift, выделить нужные блоки и применить к ним необходимое форматирование.

Flash допускает преобразование текста в фигуры, позволяя изменять форму текстовых символов или заполнять из градиентной заливкой. Следует помнить, что преобразованный в фигуру текст уже нельзя редактировать его, как текст. Для преобразования текста нужно его выделить, выбрать в меню Modify/Break Apart (Расчленить).

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

   1. Чтобы превратить текстовый блок в текстовое поле, нужно нажать кнопку Text, а   затем щёлкнуть внутри текстового блока.

   2. выполнить команду Window/Panels/Text Options

   3. Выбрать пункт Input Text.

3. Работа за компьютером. Выберите инструмент Text на панели инструментов и наберите какой-нибудь текст. Обратите внимание детей, что рамка растягивается по мере набора текста. Маркер в правом верхнем углу имеет круглую форму. Теперь попросите детей создать новый блок, но предварительно растянуть рамку, а затем ввести текст. Обратите внимание учащихся на то, что форма маркера – квадратная, а текст в блоке переносится автоматически по ширине блока. Если потянуть за указатель круглой формы, он превращается в квадратик, то есть блок становиться фиксированным, а дважды щёлкнув на квадратном маркере, мы получаем текст произвольной ширины.

Теперь нужно попробовать изменения форматирования. Выделить отдельные символы в тексте и изменить их написание, цвет, выравнивание с помощью панели Character.

А теперь нужно преобразовать текст в фигуру (как это сделать уже написано: Modify/Break Apart), затем снять выделение с текста, перетащить какую-нибудь букву и изменить её форму, а затем изменить её заливку на градиентную.

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

Урок № 7

Тема: Кнопки

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

План урока:

1. Организационный момент.
2. Опрос по предыдущему уроку.
3. Объяснение новой темы.
4. Работа за компьютером.

Ход урока:

1. Организационный момент. Перекличка. Выявление непонятных моментов и объяснение их.
2. Опрос. С помощью каких инструментов вводится текст? Какая разница между фиксированным и произвольным блоком? Как можно их изменить? Как преобразовать текст в фигуру? Возможен ли обратный переход в текст? Как можно отформатировать текст? Как превратить текст в текстовое поле?
3. Кнопки. Кнопки – это особый тип символа с временной диаграммой. Эта диаграмма отражает 4 кадра кнопки. Первые три отображают три возможные состояния кнопки, четвёртый – определяет область срабатывания кнопки. Чтобы сделать кнопку интерактивной, её нужно разместить на Столе и назначить ей действия, то есть в каждом отдельном кадре кнопки отредактировать её трансформу так, чтобы в разных состояниях она выглядела по-разному.

Каждый кадр во временной диаграмме символа кнопки имеет определённую функцию:

1. Первый кадр – состояние Up; обычное состояние кнопки, когда указатель на неё не наведён;
2. Второй кадр – состояние Over; состояние кнопки при наведении на неё указателя;
3. Третий кадр – состояние Down; состояние нажатой кнопки;
4. Четвёртый кадр – состояние Hit; определяет область, чувствительную к действию указателя. Эта область при воспроизведении невидима.

Чтобы создать кнопку, нужно создать символ и дать ему имя, при этом в окне Symbol Properties  следует выбрать поведение объекта Button. Затем надо выделить кнопку и войти в режим её редактирования Edit (который выбирается  нажатием правой кнопки мыши). В этом режиме для каждого кадра нужно создать инстанс кнопки и внести небольшие изменения в окраску или размер кнопки. Для перехода из одного кадра в другой используют меню Insert /Keyframe. Для того, чтобы включить или выключить кнопки, нужно выбрать команду Control/Enable Simple Button (Включить простые кнопки). Нужно помнить о том, что в рабочей среде Flash изменения не видны.

4. Работа за компьютером.

Создание кнопки:

1. Нарисовать в рабочем поле кнопку, войти в меню Insert и выбрать Convert to Symbol, назвать кнопку именем и выбрать поведение Button. Теперь необходимо внести изменения в кнопку для четырёх кадров.
2. Выделить кнопку и нажать правую клавишу мыши. На появившемся таймелайне, выбрать положение Down, выбрать команду Insert/Keyframe или F6, тем самым, копируя содержание кадра. Такую же работу необходимо провести для оставшихся кадров.
3. Чтобы при щелчке на кнопке начиналось воспроизведение 15 кадра сцены, нужно щёлкнуть на изображении кнопки правой клавишей мыши и выбрать в контекстном меню команду Properties. В окне Instance   Properties перейти на вкладку Actions( процедуры ), нажать кнопку со значком «+», в раскрывшемся окне выбрать команду Go To (перейти ) и установить переключатель Frame Number (номер кадра), ввести в поле значение 15. Щёлкните на изображении кнопки в рабочем поле и посмотрите, что  получилось.

Урок №8.

Тема: Создание кнопок.

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

План урока: 

1. Организационный момент.
2. Опрос по пройденной теме.
3. Работа на компьютере по созданию кнопок.

Ход урока:

1. Перекличка. Выяснение непонятных моментов в предыдущей теме.
2. Опрос. Что такое кнопка во Flash? Что такое таймелайн кнопки? Как изменить вид кнопки в разных состояниях? Как сделать переход к какому-либо кадру?
3. Работа на компьютере. Учащиеся выполняют работу по созданию кнопки, используя навыки прошлого урока. Подсказать учащимся, что для редактирования нужно взять инстанс кнопки, выделить его и нажав правую кнопку мыши, выбрать Edit и изменить кнопку для других состояний. Если возникнет необходимость помочь разобраться в переходе к разным состояниям. Для этого сначала выделяют область под надписью состояния, а потом нажимают F6. При работе над переходом к 15 кадру, нужно рассказать, как вставить 20 кадров: клавишей F5. После выполнения работы ребята просматривают свои работы, изменения кнопки и сцены, получают оценки и по окончании урока выходят из класса.

Урок №9.

Тема: Кадрированная анимация

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

План урока: 

1. Организационный момент.
2. Объяснение новой темы
3. Работа на компьютере

1. Перекличка. Выяснение непонятных моментов в предыдущей теме.

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

         Ключевым называется кадр, в котором создатель фильма выполняет смену анимированного изображения. Ключевые кадры – это начальный и  конечный кадры. Причём, это не обязательно первый и последний кадры всей анимированной последовательности. В ключевых кадрах определены главные изменения анимации. Ключевые кадры создаются только в тех местах, где, например, нужно ввести новые элементы. Во временной диаграмме ключевой кадр с содержанием обозначен жирным кружком, а пустой ключевой кадр – вертикальной линией перед кадром. Чтобы создать ключевой кадр  нужно выделить кадр во временной диаграмме и выбрать команду Insert/Keyframe или щёлкнуть правой кнопкой мыши на кадре временной диаграммы и выбрать команду Insert Keyframe.

Само кадрирование выполняется с помощью команды Create Motion Tween из команды Insert.

3.Работа на компьютере. Нарисуйте птичку или бабочку, а в правом углу вверху поставьте крестик.

1. Выделить символ
2. Выбрать команду Insert/Create Motion Tween

1. Выделить на таймелайне 15 кадр и перетащить изображение птицы к крестику
2. Выберите команду Control (Управление)/Rewind (Перемотать), затем – Control/Play.

Мы получили кадрирование движения. Теперь получим кадрирование изменения размера и поворота.

1. Нарисуйте какую-нибудь объёмную фигуру (кубик или колесо).
2. Выделите на таймелайне 15 кадр и сделайте его ключевым – Insert/Keyframe
3. Вызовите панель Transform из окна Window, введите значение масштаба «200» и значение угла поворота «180».
4. Выделите любой кадр в интервале между 1-м и 15-м кадром и выберите команду Insert/Create Motion Tween.
5. Щёлкните правой клавишей мыши на 24 кадре таймелайна и выберите в контекстном меню команду Insert Keyframe.
6. В окне Transform введите значение масштаба «100»
7. Выделите любой кадр в промежутке от 15 до 24 кадра и выберите команду Insert/Create Motion Tween.
8. Выделите 1 кадр и выберите команду Control/Play.

Мы научились изменять размер и поворот фигуры, а теперь мы заставим символ перемещаться по заданной траектории. Для этого надо вспомнить, как работать со слоями. В одном слое мы нарисуем предметы, которые не будут изменяться: например, гнездо пчелы или птицы и в другой стороне цветок, а в следующем слое нарисуем пчелу или птицу. Назовём этот слой Пчела (или Птица).

1. Выделить слой Пчела и выбрать команду Insert/Motion Guide, мы получили новый слой Guide пчела (полёт пчелы).
2. Выделите 1-й кадр в слое Guide пчела и выберите команду Insert/Keyframe.
3. С помощью инструмента Pencil нарисуйте кривую линию, проходящую от цветка к гнезду.
4. На временной диаграмме слоя Пчела выделить 1 кадр.
5. Выбрать инструмент Arrow в наборе инструментов, а затем нажмите кнопку модификатора Snap.
6. Перетащите изображение пчелы так, чтобы его центральная точка оказалась на одном из концов нарисованной кривой.
7. Выберите команду Insert/Create Motion Tween.
8. Выделите 20-й кадр в слое Пчела,  сделайте его ключевым, перетащите изображение пчелы на противоположный конец кривой.
9. Откройте контекстное меню на 1-м кадре Frame Properties и на вкладке Tweening выберите пункт Orient to Path Direction (ориентировать по направлению движения).
10. Воспроизведите анимацию, нажав клавишу Enter.  

Здесь необходимо знать, что ориентировать объект по направлению движения можно в самом начале, создавая фигурку пчелы, выбрав в панели Frame Tweening вкладку Orient to Path.

Теперь выполним кадрирование цветовых переходов.

1. Создайте разноцветный символ
2. Сделайте 20-й кадр ключевым и выберите команду Modify/Instance
3. В открывшемся меню во вкладке Effect выберите пункт Tint (Оттенок)
4. Выберите цвет в списке Tint Color (Цвет)  
5. С помощью ползунка Tint Amount (оттенок) установите значение от10 до 50%
6. Выделите любой кадр в промежутке от 1 до 19 кадра и выберите команду Insert/Create Motion Tween
7. Воспроизведите анимацию.

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

1. Нарисуйте звезду инструментом Pencil
2. Сделайте 20 кадр ключевым
3. Инструментом Arrow снимите выделение и измените её форму
4. Нажмите правую клавишу на первом ключевом кадре
5. Выберите Panel/Frame
6. В раскрывающемся списке Tweening выберите пункт Shape (форма)
7. Воспроизведите анимацию.

Урок окончен^[1]

Урок №10

Тема: Кадрированная анимация(практика)

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

План урока:

1. Организационный момент
2. Опрос по предыдущей теме
3. Кадрирование движения, изменения размера и поворота, движения по заданной траектории и изменения формы.

Ход урока:

1. Перекличка. Выяснение непонятных моментов.
2. Опрос:

1. Что такое ключевой кадр и как сделать кадр ключевым?
2. Как выполняется кадрирование движения?
3. Как выполнить кадрирование размера и поворота объекта?
4. Как заставить объект двигаться по заданной траектории?
5. Как выполнить кадрирование цветовых переходов?
6. Как посмотреть на изменение формы?

     3. Работа на компьютере с кадрированием анимации. Выполнив  работу, учащиеся сохраняют созданные файлы, показывают преподавателю работу, выслушивают замечания, со звонком выходят из класса.^[2]

Уроки №11 - №14

Тема: Анимация в слоях

Цель урока: Закрепить навыки работы с кадрированием анимации и работой в слоях

План урока:

1. Организационный момент
2. Работа за компьютером

Ход урока:

1. Перекличка. Выяснение непонятных моментов. Объяснение, что учащиеся должны теперь создать объекты в трёх слоях сразу, заставить их двигаться, изменять форму и цвет, сделав работу всех объектов согласованной.
2. Работа за компьютером. Учащиеся начинают работу и к концу третьего урока сдают полученные ролики.

Урок №15

Тема: Гиперссылки

Цель урока: Объяснить учащимся, что такое гипертекст и гиперссылка

План урока:

1. Организационный момент
2. Объяснение новой темы
3. Работа за компьютером.

1. Перекличка. Выяснение непонятных моментов по прошлым урокам.
2. Гипертекст. Этот вид организации данных появился в 1969 году и связан с именем Тэда Нельсона. Информация, подготовленная в виде гипертекста – это электронная информация и работать с ней можно только на компьютере.

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

Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши.

Гипертекст – это документ, содержащий ссылки на другие документы.

Техника чтения обычного документа состоит в том, что, закончив чтение на одной странице, вы приступаете к следующей. Технология же гипертекста позволяет вам свободно переходить со страницы на страницу, следуя заинтересовавшим вас ссылкам. Ссылки выделяют в тексте другим цветом. Гиперссылки может использоваться в обычных текстах, но чаще их используют при создании WEB-страниц. Объём гиперссылок в Интернете  растёт с каждым днём. Раньше все гипертекстовые документы создавались вручную, а теперь существует достаточно много специальных средств для создания структуры гиперссылок.

Гипертекст с помощью гиперссылок связывает между собой множество документов. Сплетаются данные и самого пользователя, и информационных источников, находящихся на компьютерах в разных частях света. Таким образом, один объект соединяется множеством связей с другими объектами. Каждый такой объект может представлять собой как обычный текст, так и гипертекст, но в таком случае он также, в свою очередь, будет соединён множеством связей с другими объектами. Возникает ассоциация с паутиной, которая, соединяя информацию, разбросанную по всему миру, «опутывает» весь земной шар. Паутина по-английски – Web. Так в 1991 году появилась всемирная паутина – World Wide Web, коротко WWW. WWW связывает миллионы гипертекстовых документов, которые, в данном случае называются по-другому – Web-документами или Web-страницами, так как содержат не только текстовые, но и графические, анимационные, музыкальные.

Мы с вами создаём свои странички, похожие  на Web и здесь вам могут потребоваться гиперссылки. В обычном текстовом документе вставить гиперссылку можно, войдя в меню Вставка/Гиперссылка. Затем, нужно указать, какой документ должен отзываться на щелчок мыши. Здесь важно не ошибиться, указывая  адрес, по которому расположена гиперссылка.

Урок №16

Тема: Использование панели Action

Цель: Познакомить учащихся с возможностями панели Action

План урока:

1. Организационный момент
2. Объяснение новой темы
3. Работа за компьютером.

1. Перекличка. Выяснение непонятых моментов. Опрос по пройденной теме:

1. Что такое гипертекст?
2. Что такое гиперссылка?
3. Как вставить гиперссылку?

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

     Процедуры для кнопок, фрагментов фильма или кадров настраиваются   в панели Action (процедуры).

Чтобы вызвать панель процедур -  выбрать Window/Action. Выделяя кадр, кнопку или трансформу, вызовите панель Actions, причём для выделенного кадра название панели измениться на Object Actions, а для выделенной кнопки или фрагмента фильма на Frame Actions.

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

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

1. Выделите кнопку и выберите командуWindow/Action
2. Щёлкните на списке Basic Actions, чтобы отобразить основные процедуры
3. Назначьте процедуру, выполнив один из нескольких вариантов:

1. Дважды щёлкните на процедуре в списке Basic Action;
2. Перетащите процедуру из списка Basic Action слева в список Action справа;
3. Щёлкните на кнопке Add и выберите процедуру во всплывающем меню.

 Назначенные процедуры удобно располагать в одном слое. Для проверки работы процедуры надо войти в меню Control/Test Move

( в режиме редактирования большинство процедур не работает)

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

3. Работа за компьютером.

Откроем файл с созданной нами кнопкой. Она у нас играет до 15 кадра. Эту акцию нужно отменить. Для этого откроем панель Action, нажмём маленький треугольничек внизу панели,  и в окне справа удалим акцию. На таймелайне кнопки выделим 20 кадр и сделаем его ключевым, вставим в этот кадр какой-нибудь текст, например,           « ПРИВЕТ!». Выделим кнопку и назначим ей процедуру Release, для этого откроем панель Action и на ней Parameters, в открывшемся окне выберем Release. Теперь назначим процедуру 20-му кадру. Для этого выделим 20-й кадр, нажмём правую клавишу мыши, выберем Action, в  панели нажмём «+», в пункте Basic Action выберем «go to»  и укажем 20 кадр. Теперь при щелчке на нашей кнопке будет появляться текст.