Программирование и мультипликация
(основные понятия)
Автор: учитель информатики МОУ гимназии №10 г. Шахты
г. Шахты 2010
Урок «Корова»
Разборная корова (инструкции)
Что надо делать, чтобы оживить отсканированную корову
Предварительные действия – захват коровы:
1. Запустить программу Flash
2. Открыть библиотеку
F 11 или Window / Library
3. Создать персонаж "korova"
в левом нижнем углу библиотеки нажать на значок "+" . Тип персонажа выбрать Graphics и дать этому персонажу имя "korova"
4. Получить рисунок коровы из файла
File / Import (проследите, чтобы тип выбираемых файлов соответствовал задаче - проще всего выбрать "all files") Далее найти выбрать нужный файл. Если будет задан вопрос (по-английски) "Брать ли все картинки из последовательности?" отвечать отрицательно.
5. Сохранить проект
File / Save as. Назвать его своей фамилией английскими буквами с расширением. fla
6. Расчленить картинку (подготовить к редактированию)
Modify / Break Apart. Теперь мы можем работать на ней ластиком и выделять отдельные части.
7. Стереть всё, что не является коровой по прямоугольному контуру.
С помощью чёрной стрелочки выделять прямоугольные фрагменты (начинать выделение обязательно за пределами изображения), и удалять их, нажимая на клавишу " BackSpace " (стереть букву)
8. Стереть фон вокруг коровы
Выбрать петельку, а потом клюнуть в изображение волшебной палочки (левое). Краешки подчистить ластиком
Дальнейшие пункты повторять столько раз, сколько деталей в нашей корове до тех пор, пока вся корова не превратится в набор деталей:
9. Выделить часть коровы, например, ухо.
С помощью петельки без волшебной палочки. (Волшебную палочку можно отключить так же, как подключали – щелчком в изображение волшебной палочки)
10. Перетащить выделанную часть в стороночку.
Прежде, чем нажимать на кнопку мыши, надо нажать и удерживать клавишу Alt (мак)/ Control+Alt ( PC )
11. Очистить выделенную часть её от всего лишнего.
Ластик, петелька и волшебная палочка
12. Выделить всю выбранную часть
Чёрная стрелка или петелька
13. Сделать персонажем
Insert / Convert to Symbo l - F 8 тип персонажа выбрать Graphics и дать этому персонажу имя, например " ear. left " – левое ухо
14. Стереть на корове ту часть, которую уже превратили в персонаж.
Иногда для этого нужно бывает заделать дырочку. Это можно сделать, перетаскивая на нужное место части той же коровы, взятые в других местах (Реал транс хаер! не забудьте нажимать Alt )
Корова разобрана!
15. Соединить элементы
Перетащить стрелочкой на свои места каждый элемент
16. Каждому элементу задать положение
( Modify / arrange / далее Bring to Front или Send to Back )
17. Каждому элементу задать центр преобразования
Инструмент – Свободное преобразование, щёлкаем по очереди в каждый элемент и перетаскиваем его центр в нужное место
18. создать 5 дублей этого персонажа
В библиотеке нажать на созданный символ правой кнопкой и в контекстном меню выбрать: (Duplicate Symbol …
Назовём их korova1, korova2 и так далее.
Теперь каждый из этих персонажей можно модифицировать, создавая варианты поведения нашей коровы. А исходный персонаж "korova" мы трогать не будем – он запасной!
Пробное оживление Коровы
Корова, например, жуёт
Корова оживёт на экране!
Автоматическая анимация коровы
Как разложить детали Коровы по разным слоям
1. Войдём в персонаж Корова2
2. Повторим следующие действия столько раз, сколько деталей содержит корова
a. Отметить одну деталь коровы (клюнуть стрелочкой в деталь)
b. Вырезать эту деталь. Меню Edit / Cut или control X
c. Создать новый слой. Меню Insert / Layer на линейке времени возникнет новый слой с именем Layer…(1, 2, 3 и так далее)
d. Щёлкнуть в первом кадре созданного слоя
e. Выполнить из меню Edit / Paste in Place или control shift V
f. Переименовать слой – двойной щелчок в имя слоя (Layer…), затем написать новое имя, например, Левое Ухо
g. Задать режим автоматической анимации. Щёлкнуть в первый кадр нового слоя и выполнить Insert / Create Motion Tween
5. Далее в каждом слое
h. Создать новый ключевой кадр на расстоянии примерно 12 кадров от первого (F6)
i. Создать новый ключевой кадр посерединке между первым и вторым (F6)
j. Пошевелить детали коровы во этом среднем ключевом кадре
4.Сохранить результат (control S)
5. Нажать Сontrol Enter – посмотреть, что получается
Урок «Мухослон»
или как сделать из мухи слона?
1. Запустите программу Flash.
2. Выберите инструмент Brush (Кисть).
3. В палитре заливки выберите серый цвет #333333.
4. Нарисуйте муху.
5. Щелкните в 10-ом кадре на киноленте и вставьте ключевой кадр (fn+F6).
6. Щелкните в 20-ом кадре на киноленте и вставьте еще один ключевой кадр.
7. Щелкните в 40-ом кадре и вставьте пустой ключевой кадр (F7).
8. Нарисуйте слона.
9. Вставьте ключевые кадры (fn+F6) в 50-ом и 60-ом кадрах.
10. Щелкните в 1-ом кадре на киноленте.
11. В панели Properties (Свойства) щелкните на кнопке ниспадающего меню Tween и выберите Shape.
12. Выберите инструмент Arrow (Стрелка).
13. Перетащите муху вправо за сцену (если ваша муха смотрит в другую сторону, то перетащить надо, соответственно, влево).
14. Щелкните в 20-ом кадре на киноленте.
15. В панели Properties (Свойства) также выберите Shape в ниспадающем меню Tween.
16. Тоже самое сделайте в 50-ом кадре.
17. Щелкните в 60-ом кадре и перетащите слона влево за сцену (если ваш слон смотрит в другую сторону, то перетащить надо, соответственно, вправо).
18. Сохраните файл под именем Мухослон ВашеИмя.
19. Протестируйте ролик (Command+Enter).
Урок «Яхта»
1. Запустите программу Flash.
2. Выполните View - Grid - Show Grid (Command+э) - отображение маркерной сетки.
3. Выполните View - Grid - Snap to Grid (Command+Shift+э) - привязка перемещений к точкам маркерной сетки.
4. Выберите инструмент Прямоугольник.
5. Убедитесь, что поле Fill Color (Цвет Заливки) выделено, затем щёлкните на кнопке No color (Нет цвета - квадратик с красной диагональной полосой).
6. Нарисуйте фигуру, как показана на рисунке.
7. Выберите Стрелку и перетащите верхний левый угол фигуры как показано на рисунке.
8. Такимже образом перетащите верхний правый угол.
9. Потяните верхнюю линию фигуры немного вниз, чтобы слегка изогнуть ее.
10. Таким же образом подтяните левую линию немного внутрь.
11. Выполните View - Grid - Snap to Grid (Command+Shift+э), чтобы снять привязку к маркерной сетке.
12. Выберите инструмент Линия, нарисуйте мачту и добавьте линию на носу лодки.
13. Также нарисуйте флаг и парус.
14. Нарисуйте второй парус.
15. С помощью инструмента Стрелка изогните стороны паруса.
16. Подтяните концы паруса к мачтам.
17. Выполните View - Grid - Show Grid (Command+э), чтобы убрать маркерную сетку.
18. В поле Fill Color выберите серый радиальный градиент.
19. Выполните Window - Color Mixer и щелкните на черном маркере цветового перехода.
20. В палитре ColorProxy выберите новый (желательно темный) оттенок.
21. Выберите инструмент Paint Bucket (Ведерко с Краской).
22. Щелкните в правом верхнем углу одного паруса, чтобы закрасить его.
23. Также раскрасьте другой парус.
24. Еще раз щелкните на правом маркере перехода цвета и выберите в палитре ColorProxy коричневый цвет.
25. Раскрасьте корпус яхты.
26. Поменяйте цвет градиента и раскрасьте флажок.
27. Щелкните на кадре, чтобы выделить все, что находится на сцене.
28. Выполните Insert - Create Motion Tween. Вокруг яхты появится синяя рамка.
29. Перетащите яхту в правую часть сцены.
30. Щелкните в 15-ом кадре и нажмите клавишу fn+F6 (Windows - просто F6).
31. Перетащите яхту в левый край сцены.
32. Щелкните в 16-ом кадре и выполните Insert - Insert Keyframe (fn+F6).
33. Выполните Modify - Transform - Flip Horizontal.
34. Щелкните в 30-ом кадре и также вставьте Ключевой Кадр (Insert - Keyframe или fn+F6).
35. Сохраните файл под именем yacht Ваше Имя и выполните Control - Test Movie (Com-mand+Enter).
36. Используя навыки этого урока, придумайте и нарисуйте свой собственный корабль, лодку или яхту (по выбору).
37. Задайте движение своему кораблю или лодке немного медленнее. Для этого сделайте ключевые кадры в 30-ом, 31-ом и 60-ом кадрах.
37. Сохраните новый файл под именем boat Ваше Имя и пошлите преподавателю SWF ролик, получившийся при тестировании этого фильма.
Урок «Создание интерактивного приложения к уроку английского языка»
Данный урок поможет Вам:
1.импортировать изображения и звуковые файлы в библиотеку;
2.использовать звуковые файлы из библиотеки во flas-разработке, не помещая звук на временную шкалу;
3.присваивать звуковые файлы кнопкам внутри клипа;
4.останавливать воспроизводимый файл, любой клавишей клавиатуры;
5.перемещать клипы по рабочему пространству;
6.проверять правильность расположения клипов с помощью кнопки и текстового поля, а так же по изменению прозрачности клипа;
5.разрабатывать интерактивные приложения к урокам.
1 этап: Подготовим изображения
Загрузите редактор Flash. Введите имя Фон для слоя временной шкалы. Для этого дважды щелкните на надписи слоя Layer 1. На временной шкале выделите пустой ключевой кадр в слое Фон. С помощью команд Файл/Импортировать на место импортируйте изображение фона командами Рабочий стол/Мастер-класс/Изображения/Фон. psd. Заблокируйте (отработанный) слой фон. Создайте новый слой, двойным щелчком по названию слоя дайте ему имя Кот. Импортируйте изображение кота, пользуясь командами п.3. Новое изображение преобразуем в символ: вызовем контекстное меню, щелкнув правой кнопкой мыши, в нем необходимо выбрать команду Конвертировать в символ (Convert to Symbol…), в появившемся окне выберем тип Клип (movie clip), затем щелкните по клипу дважды левой кнопкой мыши и один раз правой, конвертируйте изображение в символ, теперь выбирая тип Кнопка (Button), OK. Таким образом, мы получили кнопку внутри клипа. Введем имя Кот для клипа на панели свойства (Properties) в поле <Instance name> (один щелчок на основной сцене по клипу) . Заблокируем (отработанный) слой. Аналогичные операции проделайте для изображений Собака, Мышь. Создайте новый слой с именем База. С помощью инструмента прямоугольник создайте прямоугольную область по размеру прямоугольника с надписью “a cat” на фоне. Выделите полученный прямоугольник с помощью инструмента выделения и конвертируйте его в клип. На панели свойства зададим прозрачность 0% (Alpha). Поместите из библиотеки на слой База еще 3 аналогичных клипа на надписи “a dog”, “a frog”, “a mouse”. На панели свойств поочередно выделяя клипы прямоугольников присвоим им имена:a cat – base3, a mouse-base2, a dog – base1.
2 этап: Создадим новый класс звуков.
Импортируем в библиотеку звуковые файлы Cat. wav, Dog. wav, Mouse. wav при помощи команд: Файл/ Импортировать в библиотеку из папки Мастер-класс/Звуки. Свяжите звуковые файлы с командами Action Script. Для этого: Откройте библиотеку Window/Library, Выделите звуковой файл Кот. Щелкните по нему правой кнопкой мыши, в появившемся меню, выберете Linkage; В появившемся окне установите флажок Export for Action Script.
Аналогичные операции повторите для всех звуковых файлов проекта. Создадим класс звуков. Для этого создаем новый слой, даем ему имя Класс звуков. Откроем панель Действия (Action Script). Запишем код, состоящих из трех строк. var Звуки:Sound = new Sound (); //Создаем новый класс звуков;
Звуки. attachSound (); //Звук воспроизводится;
Звуки. start(0,1); //Звук воспроизводиться с 0-й секунды, повторяется 1 раз;
Запишем команду для остановки звука при нажатии любой клавиши клавиатуры.onKeyDown = function() {Звуки. stop();}
// При нажатии на любую клавишу клавиатуры воспроизведение звуков из класса Звуки останавливается.
Key. addListener(this); // «слушать» нажатие клавиш для выполнения команды остановить звук.
Заблокируем слой.3 этап: Присвоим звук кнопкам.
Разблокируйте слой Кот, дважды щелкните по нему для перехода к кнопке. Выделите кнопку (кота) инструментом выделение, откройте панель Действия. Запишите следующие команды для данной кнопки:on (press) { //при нажатии на кнопку…
var Звуки:Sound = new Sound ();
Звуки. attachSound("Cat") //показывает какой звук следует воспроизводить;
Звуки. start(0,1);
this. startDrag (true);} //этот объект начнет движение;
on (release) //после того как кнопка будет нажата…
{this. stopDrag (); //этот объект остановит движение;
if (this._droptarget=="/base3") //если положение этого объекта совпадает с положение объекта с именем base1;
{ this._alpha=100; } //то прозрачность объекта равна 100%;
else {this._alpha=50;} }
//иначе прозрачность объекта будет равна 50%;
Аналогичные операции проделайте для всех клипов проекта.4 этап: Оценивание.
Новый слой Текст. С помощью инструмента Текст поместите на рабочий лист текстовое поле. На панели свойств установите тип текста Динамический. Дайте имя «Текст» текстовому полю на панели свойств. Новый слой Кнопка. Импортируйте на слой Кнопку из папки Мастер-класс/Изображения на Рабочем столе. Конвертируйте изображение в кнопку. Откройте панель Действия и запишите код для кнопки:on (press) {if ((кот._droptarget=="/base3") and (собака._droptarget=="/base1") and (мышь._droptarget=="/base2")) {текст. text="отлично";} else {текст. text="неверно";}
}
5 этап: Публикация.
Протестируем ролик с помощью команд Control/Test scene. Если ролик работает правильно, выполните настройки публикации. Для этого используйте команды File/Publish Settings в появившемся окне поставьте флажок против команд Flash (.swf), Windows projector (.exe) при этом укажите место хранения файлов Рабочий стол/Мастер-класс/Готово. Нажмите на кнопку OK и Publish. Ролик опубликован.