Содержание:
Практическая работа
«Создаем поздравительную открытку» 2
Практическая работа «Снеговик» 9
Практическая работа «Анимация формы» 12
Практическая работа «Создание
пользовательского курсора» 17
Разработка ЦОР для интерактивной
доски с преобразованием статичной графики в объект для свободного перемещения. 22
Практическая работа «Создание презентации в среде Adobe Flash CS3» 29
СОЗДАЕМ
ПОЗДРАВИТЕЛЬНУЮ ОТКРЫТКУ
Работа в среде Flash CS3
Практическая работа №1
Тема «Рисуем в среде Flash CS3»
1.
Создайте новый фильм. File – New – Flash File.
2.
На панели Tools
(инструменты), выберите инструмент Rectange Tool и
изобразите
3.
Затем выберите инструмент Selection
Tool(v) и создайте из верхнего прямоугольника
трапецию.
4.
Подводя курсор к любой из
линий, при выбранном инструменте Selection Tool(v), мы увидим маленькую дугу, это значит, что
данную линию можно искривить. Что мы и делаем.
5.
Дорисовываем еще одну
линию у горловины вазы, используя инструмент Line Tool,
и искривляем ее.
6.
Закрашиваем созданную нами
вазу, используя инструмент Paint Bucket Tool.
Выбираем цвет, для заливки используя
панель Color. Если панель закрыта, мы
можем ее найти Window - Color или нажимаем комбинацию клавиш Shift+F9.
На панели Color выбираем Type: Radial и, щелкая на правом и левом
указателе, подбираем цвета градиентной заливки.
Затем закрашиваем вазу, щелкая ЛКМ по ее частям.
7.
Для удаления линий контура
воспользуемся инструментом Selection Tool(v). Выделяем линии инструментом и кнопкой Delete, их удаляем.
8.
Для дальнейшей работы
создадим еще один слой. Для этого воспользуемся кнопкой Insert Layer.
9.
Переименуем Layer 2,
назовем его «Цветы».
10. Перейдем в слой Цветы, выберем
инструмент Line Tool (линия), и нарисуем стебли и листья.
11. Лепесток у цветка рисуем, используя
инструменты Oval Tool и Selection Tool(v), для придания нужной формы. Для заливки используем инструмент Paint Bucket Tool и панель Color.
12. Для создания цветка выделяем лепесток
инструментом Selection Tool(v), выбираем инструмент Free Transform
Tool.
В середине лепестка появится круг, необходимо
переместить его в нижний угол лепестка.
13. Включаем панель Transform (Ctrl+T), на переключателе Rotate
задаем угол поворота 600, и копируем лепестки, используя кнопку на
панели Transform – Copy and apply transform. Рисуем инструментом Oval Tool
середину цветка.
14.
Чтобы мы могли перемещать
цветок как единое целое, сгруппируем его. Для этого выделим его инструментом Selection
Tool(v) и нажмем комбинацию клавиш Ctrl + G.
15. Переместим слой Цветы ниже слоя Ваза.
16. Выделим верхушку вазочки, щелкнем ПКМ и
выберем Cut (Вырезать).
17.
Создаем слой,
переименовываем его, даем имя «Горлышко». Размещаем на нем верхушку
вазочки, для чего щелкаем на пустом месте ПКМ и выбираем Paste in Place
(вставить на место).
Сохраним
нашу работу File – Save As, имя файла vaza.fla
Практическая
работа №2
Тема «Покадровая анимация. Создаем
анимированный текст»
Технология работы:
- Откроем файл vaza.fla. (File-Open)
- Создадим новый слой, дадим ему имя текст
и разместим выше всех слоев. Сделаем его активным.
- Создадим анимированный текст. Для этого
выбираем инструмент Selection Tool(v) и щелкаем ЛКМ в первом кадре шкалы
времени.
- Выбираем инструмент Text
Tool и задаем параметры его модификаторов (тип
шрифта, размер, цвет и пр.)
- Щелкаем ЛКМ для установки текстовой
метки. Набираем на клавиатуре заглавную букву С.
- Для формирования следующего кадра, в
котором будет появляться новая буква, необходимо выполнить следующие
действия: Кликните ЛКМ в следующем пустом кадре шкалы времени. И нажимаем
клавишу F6. В выделенном кадре шкалы времени появится
черная точка.
- Повторяем пункты 4 и 5, набираем
следующую букву.
- Для того чтобы стали видны все объекты,
расположенные на всех слоях, необходимо щелкнуть ЛКМ на 11 кадре, и
нажимаем F5.
- Для просмотра анимированного текста
нажимаем комбинацию клавиш Ctrl + Enter.
- Сохраните файл под именем pozdrav.fla
Практическая работа №3
Тема «Флэш - символы. Movie Clip»
- Создайте новый фильм.
File – New – Flash File.
- Сохраните фильм под именем Flowers.fla. File – Save As.
- Возьмите инструмент овал
или кисть, нарисуйте на столе лепесток, смотрящий вверх. Если у вас есть
границы у лепестка, выделите и удалите их.
- Затем, используя панель Color, залейте лепесток нужным цветом.
- Выделите лепесток и нажмите
клавишу F8. Выберите Graphic, и дайте
имя Лепесток. И укажите Registration, центр нижней грани.
- Откройте окно библиотеки Library и дважды щелкните на клипе лепестка. Откроется окно
редактирования символа.
- Выделите первый кадр и
выберите в списке Tween (Раскадровка) пункт Shape(форма).
- Выделите кадр 10 и
нажмите клавишу F6, сделав его ключевым.
- С помощью инструмента Free Transform(Свободное преобразование) в кадре 1 превратите
лепесток в зародыш, свернув и уменьшив его. Можно поменять цвет.
- Нажмите Enter
и проверьте течение трансформации.
Создание цветка
- Создайте новый клип, нажав клавишу CTRL+F8. В появившемся окне выберите Movie
Clip. Назовите его Цветок.
- Создайте 2 слоя: Лепестки и Сердцевина.
- В слое Сердцевина нарисуйте
желтый круг.
- Сделайте кадр 10 в обоих слоях простым,
нажав F5.
- Установите считывающую головку на кадр
10.
- В слое Лепестки поместите нужное
количество экземпляров лепестков:
a)
Откройте библиотеку
Library и перетащите лепесток ЛКМ на рабочий стол.
b)
Для создания цветка
выделяем лепесток инструментом Selection Tool(v), выбираем инструмент Free Transform
Tool.
c)
В середине лепестка появится
круг, необходимо переместить его в нижний угол лепестка.
d)
Включаем панель Transform (Ctrl+T), на переключателе Rotate
задаем угол поворота 500, и копируем лепестки, используя кнопку на
панели Transform – Copy and apply transform.
Проверяем, нажав клавишу Enter.
Открываем файл pozdrav.fla, в этом же окне Flash.
Создаем новый слой, даем ему имя
цврасп. Делаем этот слой активным, щелкнув в первом кадре этого слоя ЛКМ.
Заходим в библиотеку и
перемещаем созданный нами цветок на стебель. Затем еще один.
Придайте цветам разные оттенки.
Для этого на панели Properties выберите Color – Brightness – 50%.
Запустите фильм Ctrl+Enter.
Звук.
Создаем дополнительный слой Музыка. Помещаем в
библиотеку нужный музыкальный файл File – Import – Import to Library. Перемещаем ЛКМ звуковой файл из
библиотеки на рабочий стол. Настраиваем звучание. Панель Properties Syns: Start. Repeat - 1. Сохраняем, присвоив имя otkritka.fla
Используемая
литература:
- Вовк Е.Т. Информатика: уроки по Flash.
– М.: КУДИЦ-ОБРАЗ, 2005,-176с.
- Татарникова Л.А. Знакомьтесь – Flash!:
Учеб.пособие – Томск, 2005. – 60с
Тема « Покадровая
анимация»
Практическая работа
«Снеговик»
Технология
работы:
1.
Откроем окно Flash CS3.
2.
Переименуем слой Layer1, для этого делаем двойной щелчок по надписи
и вводим «Основание».
3.
Выбираем инструмент окружность (OvalTool)
на панели Properties (внизу экрана), выбираем цвет заливки и обводки, и
рисуем основание снеговика.
- Создаем 2 слой и переименовываем его, дав
имя «туловище». Рисуем второй снежный шар.
- Создаем 3 слой и переименовываем его,
дав имя «голова». Рисуем 3 шар.
- Используя инструменты рисования и подбора
цветов, рисуем рот, глаза, нос. Дорисовываем руки.
- Создаем 4 слой и переименовываем его, дав
имя «солнце». Нарисуем солнце.
- Затем щелкаем в каждом слое
на 15 кадре и нажимаем клавишу F6. Получаем ключевые кадры. Переходя по
слоям, сжимаем основание, туловище, опускаем вниз голову и руки.
- Чтобы сделать единым целым
голову, нос, глаза, группируем изображение. Для этого нажимаем инструмент SelectionTool (черная стрелка), обводим стрелкой вокруг
нужного объекта и нажимаем CTRL+G.
10.
Щелкаем на 30 кадре каждого слоя и
нажимаем клавишу F6.
11.
Еще сжимаем основание и
туловище, рисуем рот с опущенными уголками губ вниз. Чтобы изменить рот,
необходимо разгруппировать объект. Выделяем голову и выбираем меню Modify-Ungroup.
12.
Щелкаем на 45 кадре
каждого слоя и нажимаем клавишу F6.
13.
Изменяем снеговика.
Дорисовываем капли воды.
14.
Выделяем 60 кадры, во
всех слоях делаем эти кадры ключевыми, нажав F6.
15.
Изменяем снеговика.
Затем выделяем 90 кадры, во всех слоях, делаем эти кадры ключевыми, нажав F6.
16.
Запустите ролик на
просмотр CTRL+Enter.
Самостоятельно
задайте движение по кадрам солнца.
Практическая работа «Анимация формы»
Технология
работы:
1. Создайте новый файл
2. Создайте 3 ключевых кадра на расстоянии 20
кадров друг от друга, нажимая F6
3. Нарисуйте в каждом кадре по одной фигуре,
выбирая для них разную форму и цвет.
4. Выделите первый кадр и выберите на панели Properties
в раскрывающемся списке Tween (промежуточная анимация) режим Shape(форма).
5. Для кадров 40 и 60 повторите те же действия.
6. Нажмите клавишу Enter для просмотра
анимации
Анимация форм для
растровых изображений
Поместите на рабочий
стол изображения, дорисуйте овал, закрасьте его, используя радиальный
градиент.
По очереди, выделив изображения цыпленка и курицы,
выполните команду Modify – Bitmap – Trace Bitmap (Изменить- Трассировать растр)
Выделите белый фон и удалите его, используя клавишу Del.
Делаем объекты примерно одинаковыми по размеру.
Создаем ключевые кадры на кадре 30 и 60.
В первом кадре убираем цыпленка и курицу, в 30 кадре
яйцо и курицу, в 60 кадре цыпленка и яйцо.
Расположите все объекты в центре сцены.
Выделите 1 кадр и выберите в раскрывающемся списке Tween панели свойств Properties режим Shape
Нажмите на клавишу Enter и просмотрите анимацию. Яйцо трансформируется в цыпленка, цыпленок в
курицу.
Использована
графика источников: http://www.avel-m.ru/catalog/decoretto/vsegdaprasdnik/pasha,http://s55.radikal.ru/i147/0903/43/ba77e4b72562.jpg
Практическая работа «Создание пользовательского курсора»
1.
Открываем новый документ в среде Adobe Flash CS3, выбираем в появившемся окне Flash File (ActionScript 2.0).
Размещаем на сцену фотографию моря. File- Import-Import to Stage.
Обратите внимание! Наша фотография по
размеру больше сцены (550х400).
Чтобы изменить размер фотографии, выделяем её, на
панели
свойств внизу экрана настраиваем
высоту и ширину графики.
2.
Импортируем
в библиотеку графическое изображение daulfin.gif
File –
Import – Import to library.
2.1 Создаем новый символ-клип. Insert-New
Symbol (Ctrl +8).
Задаем имя : Name – delf, Type – Movie clip.
При этом мы автоматически входим во вновь созданный
клип. В библиотеке появился символ delf.
2.2 Выполняем команду File – Import to Stage. Выбираем файл daulfin.gif из папки с исходниками графики.
2.3 Шкала кадров примет вид
Вид библиотеки после
вставки графического объекта.
2.4
Возвращаемся на 1 сцену
2.5
Перемещаем
на сцену из библиотеки символ delf.
2.6
Преобразуем
перемещенный символ в кнопку – cursor. Для этого используем меню Modify- Convert to Symbol.
2.7 Обязательно!
Задаем
кнопке имя на панели свойств Instance Name – cursor
2.8
Прописываем код кадру
Mouse.hide();
startDrag("cursor",true);
Использованная
литература:
«Flash для продолжающих» – материалы мастер –
класса Ямкиной Елены Владимировны, Нуриевой Белы Олеговны.
http://it-n.ru/communities.aspx?cat_no=73740&lib_no=182080&tmpl=lib
Использована
графика источников: http://www.stihi.ru/pics/2009/08/29/2758.jpg,
http://mata2.free.fr/new/Animaux/dauphins/dauphin5.gif
Данная работа успешно прошла открытую
общественную профессиональную экспертизу на портале «Сеть творческих учителей» http://it-n.ru и перемещена в библиотеку
сообщества "Создание интерактивных учебных пособий во Flash".
http://it-n.ru/communities.aspx?cat_no=182662&d_no=183414&ext=Attachment.aspx?Id=74409
Материалу присвоен Уникальный Номер
(УН) - 183414.
Сообщество рекомендовало данный
материал для использования в учебно-воспитательном процессе.
Разработка ЦОР для
интерактивной доски с преобразованием статичной графики в объект для свободного
перемещения.
Данный тип
ЦОР реализует сенсорный принцип работы интерактивной доски. Свободно перемещать
можно как графические объекты, так и текст.
Интерактивные
задания могут быть как на установление соответствия, для упорядочивания, классификации;
для заполнения пропусков; конструкторов и т.д.
Создадим ЦОР
для учащихся по курсу «Информатика и ИКТ». По подобию данной работы возможно
создание ЦОР по любому предмету.
Создадим новый документ в среде Flash CS3. File-New.
Выбираем В появившемся окнеFlashFile (ActionScript2.0).
Устанавливаем размер сцены 550х600 на панели свойств.
Используем для создания таблицы
инструменты
Rectange Tool(R,O,R,O)
Pencil
Tool(Y)
Paint Bucket Tool (K)
При
использовании инструмента Pencil Tool(Y) при прочерчивании линий, необходимо держать нажатой клавишу Shift.
Для
создания надписей используем инструмент Text Tool(T)
Цвет,
начертание выбираем на панели Properties.
Заполняем
текстом таблицу и записываем задание.
Создаем второй слой. Даем ему имя «Элементы». На нем мы
разместим графику и кнопку «Выход».
Для
размещения графики используем меню File-Import-Import to Stage.
Создаем
подписи.
Объединяем
подпись и рисунок. Для этого выбираем инструмент Selection Tool (V) и обводим стрелочкой вокруг объекта и надписи.
Затем
группируем Modify-Group.
Выделяем
сгруппированный графический объект и преобразуем в символ-тип клип.(Convert to Symbol-Movie Clip-ok).
Дайте
символу содержательное имя, чтобы в дальнейшем было легче редактировать ЦОР.
Теперь
превращаем нашу графику в свободноперемещаемую. Выделяем графический объект и
нажимаем F9. Открывается закладка Actions-Frame, вписываем код свободного перемещения объекта.
on (press) { //Кнопка
мыши нажата
StartDrag (this); } //Начать
перемещение
on (release) { //Кнопка
мыши отпущена
StopDrag (); } //Закончить
перемещение
(Замечание: StartDrag и StopDrag находятся в разделе Movie Clip Control)
Повторяем эти действия для
каждого графического объекта.
Обратите внимание, что мы
работаем на слое «Элементы». Чтобы не ошибиться защитите 1 слой с таблицей,
нажав на знак замочка.
Теперь создадим кнопку,
нарисовав ее или использовать готовую графику. Размещаем ее на слое
«Элементы».Преобразуем графический объект в кнопку(Convert to Symbol-Button-ok). Выделяем
копку, нажимаем F9 и вписываем код выхода из полноэкранного режима.
on (release) {
fscommand("quit");
}
Чтобы наш клип при просмотре разворачивался на весь
экран, в первом кадре 1 слоя прописываем код:
fscommand("showmenu",
"false");
fscommand("fullscreen","true");
Для этого, предварительно снимаем защиту со слоя,
щелкаем ЛКМ на первый кадр и нажимаем F9.
Тестируем проект нажав на клавиши Ctrl+Enter.
Сохраняем ролик File-Save As.
Опубликовываем ролик в формате swf(Shift+F12). Протестируйте проект.
Использованная литература:
Лекционный материал мастер – класса «Разработка ЦОР
для ИД во Flash. Автор Степаненко Ольга Владимировна.
http://it-n.ru/communities.aspx?cat_no=139369&lib_no=139398&tmpl=lib
Использована графика ресурсов: http://all-hitech.msk.ru/inf/history/img/03_00.gif,
http://www.tatshkola-1.ru/uploads/posts/2009-07/1247943553_88.jpg,
http://files.school-collection.edu.ru/dlrstore/cd420ccc-342c-43d5-aa38-d8c4d24bbdde/9_144.swf,
http://files.school-collection.edu.ru/dlrstore/b75f0e49-84d5-48e7-8f21-e649782de1f7/9_147.swf,
http://novikovmaxim.narod.ru/statyi/comphist/hist_mem.img/perfo.jpg
http://www.belpokupki.ru/upload/iblock/16f/600px-magnetic_tape_hg.jpg
Адрес
материала в сети: http://it-n.ru/communities.aspx?cat_no=139399&d_no=203370&ext=Attachment.aspx?Id=86057
Практическая работа «Создание презентации в среде Adobe Flash CS3»
1.
Откройте новый документ
Adobe Flash 8.0 (или более поздней версии). File-New-Flash File (ActionScript2.0)
2.
Создаем 4 слоя : Фон, Кадры,Кнопки,Стопы.
3. На слой Фон размещаем подготовленный в среде Adobe Photoshop
графический объект. Обратите внимание, мы используем графику в формате PSD, это необходимо, чтобы не терять
качество изображения. Но вы также можете использовать графику форматов: gif, jpeg,png. Вы можете поместить
графику сразу на сцену File
– Import – Import to Stage или импортировать ее в библиотеку File – Import – Import to Librari.
4.
Переходим
на слой Кнопки и размещаем на нем 6 графических объектов из папки Исходники
- кнопка.psd . Вы можете предварительно поместить
её в библиотеку и методом перетаскивания, используя левую клавишу мыши,
разместить нужное количество объектов.
5.
Создайте
надпись «Православные храмы Санкт-Петербурга», используя инструмент Text Tool (T)
6.
Преобразуем фотографию купола в кнопки, при наведении
на которые курсора мыши будет появляться надпись.
Выделяем объект,
заходим в меню Modify- Convert to Symbol . В появившемся окне выбрать Name-kn1, Button, OK. (Следующие кнопки назовите
соответственно kn2, kn3,kn4,kn5,kn6)
7.
Заходим внутрь 1 кнопки,
сделав по ней двойной щелчок.
У неё 4 кадра Up,
Over, Down, Hit. Клавишей F6 создаем ключевые кадры во всех кадрах
кнопки.
Переходим в кадр Over (при наведении), вписываем текст около
изображения.
Самой кнопке на Главной сцене прописываем команду перехода на
нужный кадр при нажатии на кнопки,.
on (release) {
gotoAndPlay(7);
}
8.
Переходим
на слой Кадры, создадим 6 ключевых кадров, нажимая на кнопку F6.
9.
Переходим на 2 кадр и
вставляем фотографию храма и текст описания, и т.д.
10.
Размещаем на каждом кадре кнопку и задаем команду
перехода на первый кадр F9
on (release) {
gotoAndPlay(1);
}
11.
Чтобы не
происходило автоматического перелистывания кадров, переходим на слой стопы и
создаем 6 ключевых кадров.
Для каждого кадра прописываем команду
stop();
12.
Перейдем на слой Фон и
пропишем для 1 кадра слоя команду stop(); Если вы все сделали
правильно, кадры примут вид
13.
Размещаем
на слой Кнопки музыку, предварительно поместив ее в библиотеку, затем
методом перетаскивания размещаем на нужный кадр.
14.
Настраиваем
звучание на панели свойств(Properties)
Источники информации:
http://www.it-n.ru/communities.aspx?cat_no=73740&lib_no=182080&tmpl=lib
- «Flash для продолжающих» – материалы мастер – класса
Ямкиной Елены Владимировны, Нуриевой Белы Олеговны.
Используемые ресурсы: http://www.spas-na-krovi.ru/,
фото собора «Спас на крови»
http://ru.wikipedia.org/ Исаакиевский собор,
Преображенский собор, Чесменская церковь
http://www.spb-guide.ru/page_7963_2.htm
Казанский собор
Подворье Оптиной пустыни - фото Зайцевой Л.И.
Музыка - http://www.sharemania.ru
Благовест
Данная работа успешно прошла открытую
общественную профессиональную экспертизу на портале «Сеть творческих учителей» http://it-n.ru и перемещена в библиотеку
сообщества "Создание интерактивных учебных пособий во Flash".
http://it-n.ru/communities.aspx?cat_no=187573&d_no=189760&ext=Attachment.aspx?Id=78037
Материалу присвоен Уникальный Номер
(УН) - 189760.
Сообщество рекомендовало данный
материал для использования в учебно-воспитательном процессе.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.