reforef.ru 1

Macromedia Flash 5.

Обучающие задания (избранные).

По книге «Т. Панкратова. Flash 5. Учебный курс. СПб: Питер, 2002, 368 с.»

Все уроки находятся в папке

S:\tutorials\Компьютерная графика\Macromedia Flash\Учебные задания

II. Основные виды анимации.

(упражнения, отмеченные двойной чертой, обязательны для исполнения)

Справочная информация: Типы символов.


Есть три типа объектных символов, которые вы можете создать: Movie Clip (клип), Button (кнопка), Graphic (графика). Эти три типа отражают, вообще говоря, не содержимое символа (которое может быть одинаковым), а его поведение. Клип – это независимый фильм, вставленный в главный фильм. Он может содержать все те же элементы, что и главный фильм, в том числе анимацию, интерактивные элементы, звук и т.д. Независимость его состоит в том, что его кадры проигрываются независимо от кадров основного фильма. Можно создать фильм всего из одного кадра, но вставить в него несколько клипов, каждый со своим числом кадров. Каждый из клипов будет циклично проигрывать все свои кадры. Символы можно создавать двумя путями. Первый путь – выделить один или несколько объектов, а затем превратить их в один символ. Второй путь: создать новый пустой символ, а затем «наполнить» его, нарисовав или импортировав объекты в режиме редактирования символов.

Упражнение 9.9. Просмотр библиотеки.


  1. Откройте файл library.fla из папки Lesson09. Откройте библиотеку (клавиши Ctrl-L). В нижней части библиотеки находится перечень её элементов. Дважды щёлкните на значке папки. Она раскроется, и вы получите доступ к содержащимся в ней элементам. В верхней части библиотеки находится окно просмотра элементов. Если выделить в списке символ-клип, то в окне просмотра появятся две кнопки: правая для проигрывания клипа, левая для его прерывания. Такие же кнопки появляются при выделении импортированного звука, чтобы можно было его прослушать.

  2. Выделите клип movie1 и проиграйте его. Просмотрите остальные элементы библиотеки. Перетащите мышкой какой-либо символ из библиотеки в рабочую область экрана.


  3. Создадим в библиотеке новую папку. Щёлкните на кнопке New Folder внизу библиотеки. Имя новой папки выделится рамкой. Введите новое имя, например for motion. Выделите символы начиная с символа Земля по символ Солнце при нажатой клавише Shift и перетащите их на значок папки for motion. При работе с фильмом вы не ограничены только его «родной» библиотекой. В вашем распоряжении библиотеки всех открытых документов, а также общие библиотеки, хранящиеся в папке Flash5/Libraries.

Справочная информация: Просмотр и тестирование фильма.


Чтобы выполнить полноценное тестирование фильма, нажмите клавиши Ctrl+Enter или выполните команду Control>Test Movie. Эта команда публикует фильм с текущими установками публикации, помещает полученный SWF-файл в ту же папку, что и авторский фильм, а затем показывает его в отдельном окне в среде тестирования с помощью программы Flash Player. Эта же программа используется для просмотра публикаций в браузерах. Если требуется протестировать только текущую сцену, нажмите клавиши Ctrl-Alt-Enter или выполните команду Control>Test Scene. Кроме того, у вас есть возможность просмотреть и протестировать фильм непосредственно в браузере. Для этого нажмите клавишу F12 или выполните команду File>Publish Preview>Flash. Откроется браузер, установленный на вашем компьютере, а в нём уже будет загружен только что созданный SWF-файл.

Справочная информация: работа с кадрами.


Клавиатурная комбинация

Команда меню

Описание

F5


Insert > Frame

Вставка статического кадра.

Shift+F5 или Del

Insert > Remove Frame

Удаление обычного или ключевого кадра, а также последовательности кадров.

F6

Insert > KeyFrame

Вставка ключевого кадра или превращение статического кадра в ключевой. Также для вставки ключевого кадра копированием можно перетащить копируемый кадр или выделенную последовательность кадров при нажатой клавише Alt.

Shift+F6

Insert > Clear KeyFrame

Очистка ключевого кадра.

F7

Insert > Blank KeyFrame

Создание пустого ключевого кадра (на месте заполненного). Все статические кадры справа от него также опустеют вплоть до следующего ключевого кадра.




Modify > Frames > Convert to Key Frames

Превращение выделенных промежуточных кадров в ключевые.




Insert > Clear KeyFrame

Превращение ключевого кадра в статический.

Ctrl+Alt+C

Edit > Copy Frames

Копирование последовательности кадров в буфер обмена.

Ctrl+Alt+V

Edit > Paste Frames

Вставка кадров из буфера обмена. Если перед вставкой выделить ключевой кадр, то он будет заменён копией последовательности из буфера.


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

Упражнение 10.3-4. Покадровая анимация.


  1. Откройте файл dino.fla из папки Lesson10. В нём имеется один ключевой кадр с динозавром. Нажмите клавишу F6. На временной линейке появится второй кадр и станет текущим. Пока он в точности такой же, как первый кадр. Инструментом Arrow выделите шею динозавра (это группа). Командой Modify > Edit Center перетащите точку регистрации в основание шеи (эта точка помечена крестиком). Чтобы режим привязки к объектам не мешал сделать это, отключите его. Немного поверните шею почасовой стрелке.

  2. Снова нажмите клавишу F6. В новом кадре снов выделите шею и поверните ещё немного. Точка регистрации уде находится на нужном месте, большее её трогать не придётся.

  3. Создайте четвёртый кадр, ещё раз повернув шею. Если в линии спины при повороте образовался разрыв, подтяните конец линии, чтобы «заделать» его.

  4. Включите режим одновременного просмотра или редактирования нескольких кадров, щёлкнув на кнопке Onion Skin (Калька) или Edit Multiple Frames (Редактировать несколько кадров). Подправьте углы вращения разных кадров. Чтобы движение было равномерным, сделайте углы вращения равномерными.

  5. Просмотрите анимацию. Теперь, сохранив файл в вашем каталоге под именем dino1.fla, вновь откроем файл dino.fla, однако теперь поступим более рационально. Создайте новый слой с именем Tail. Выделите левую группу с нижней частью динозавра и вырежьте её клавишами Ctrl+X.

  6. Перейдите на слой Tail и вставьте группу там. Для того чтобы она оказалась на том же самом месте сцены, сделайте это клавишами Ctrl+Shift+V или командой Edit > Paste in Place.
  7. Теперь вернитесь на первый слой и создайте ещё три кадра, как в прошлом упражнении, каждый раз поворачивая шею динозавра. На слое Tail статические кадры создаются сами, выравниваясь по последнему ключевому кадру фильма.


  8. Сохраните фильм под именем dino2.fla и сравните его размер с прошлым фильмом.

  9. Теперь немного продлим фильм, но динозавр пусть в новых кадрах постоит без движения. В слое Layer1 щёлкните правой кнопкой мыши на 10-м кадре и выберите в контекстном меню команду Insert Frame. Для этого слоя до 10-го кадра появляются серые статические кадры. Чтобы вместе с шеей была видна и нижняя часть динозавра, надо продлить статические кадры для слоя Tail. Нажмите кнопку мыши на прямоугольничке в последнем статическом кадре этого слоя и перетащите го вправо до 10-го кадра. Нажмите клавишу Enter и просмотрите анимацию.

Упражнение 10.5. Равномерное движение и осветление фона.


  1. Откройте файл motion.fla из папки Lesson10.

  2. Выделите слой bus и перетащите на него из библиотеки символ bus с изображением автобуса. Поместите его в рабочей области слева от сцены.

  3. Щёлкните правой кнопкой мыши на 25-м кадре этого слоя и выберите команду Insert KeyFrame. Перетащите автобус за правый край сцены, чтобы он выходил из кадра при движении.

  4. Снова выделите первый кадр, клавишами Ctrl+F откройте панель кадров и выберите в раскрывающемся списке Tweening (Промежуточная анимация) режим Motion (Движение). Чтобы движение было равномерным, параметр Easing (Ускорение) должен быть равен нулю. Автобус готов, теперь займёмся фоном.

  5. Выделите слой forest и импортируйте на него изображение forest.jpg из той же папки. Выделите изображение и превратите его в графический символ клавишей F8.

  6. Щёлкните на 25-м кадре этого слоя и нажмите клавишу F6 для создания ключевого кадра. Немного увеличьте изображение, чтобы оно стало больше сцены. При публикации всё, что выходит за края сцены, будет обрезано. С помощью панели Effects увеличьте его яркость, выбрав режим Brightness и передвинув ползунок вверх.
  7. Снова выделите первый кадр и в панели кадров выберите режим Motion. Проверьте, чтобы был установлен флажок Scale.


  8. Щёлкните на сцене и нажмите клавишу Enter для просмотра анимации.

Упражнение 10.8. Движение по траектории.


  1. Откройте файл ball.fla из папки Lesson10.

  2. Выделите слой с мячиком и выполните команду Insert>Motion Guide (Вставить>Направляющие движения). Над выделенным слоем появится слой с именем Guide:мячик. Это слой направляющих.

  3. Выделите слой направляющих и любым инструментом нарисуйте траектории движения подпрыгивающего мяча. Проложите её примерно через точки, через которые должен проходить центр мяча в ключевых кадрах. Удобнее всего соединить эти точки прямыми, а затем искривить их инструментом Arrow.

  4. Для каждого ключевого кадра анимации точно совместите конец сегмента траектории с центром мяча. При этом должен быть включен режим привязки к объектам. При точном попадании опорной точки кривой в центр мяча здесь будет появляться маркер привязки в виде кружочка.

  5. Заблокируйте слой с направляющими, чтобы не сдвинуть их с места.

  6. Чтобы спрятать траекторию, выключите показ слоя направляющих. Просмотрите анимацию.

Упражнение 10.9. Вращение по окружности.


  1. Нарисуйте маленький шарик – кружок размером 20 пикселей с радиальной градиентной заливкой – и превратите его в символ клавишей F8.

  2. Щёлкните на кнопке Edit Symbol и выберите в списке имя созданного символа.

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

  4. Вернитесь в обычный режим редактирования, щёлкнув на кнопке Edit Scene и выбрав имя Scene1 в списке.
  5. Создайте ключевой кадр на отметке 20, вернитесь на первый кадр и выберите на панели кадров анимацию движения. В раскрывающемся списке Rotate (Вращение) выберите движение по часовой стрелке, а в поле times (раз) введите значение 1. Нажмите клавишу Enter для просмотра.

Упражнение 10.11. Анимация форм для растровых изображений.


  1. Откройте файл shape.fla из папки lesson10 и перетащите из библиотеки в первый кадр изображения обеих машин.

  2. По очереди выделив изображения, выполните для каждого команду Modify>Trace Bitmap.

  3. Выделите белый фон обеих машин и удалите его клавишей Del.

  4. Обведите рамкой первую машину и увеличьте её, так чтобы машины стали близкими по размеру.

  5. Создайте ключевой кадр на отметке 20. На первом кадре удалите вторую машину, а на 20-м кадре – первую. Расположите машины в центре сцены. Воспользуйтесь направляющими, чтобы «поставить» их на одном и том же месте.

  6. Выделите первый кадр и выберите на панели Frame в раскрывающемся списке Tweening режим Shape.

  7. Просмотрите анимацию. (VA: рекомендую слегка переделать анимацию, установив белый фон клипа и введя первые десять и последние десять кадров клипа статические кадры исходных фотографий автомобилей – это существенно улучшит восприятие анимации).

Упражнение 10.12. Использование меток подсказки.


  1. Откройте файл hints.fla из папки Lesson10. Здесь находится уже готовая анимация форм, в которой белый медведь превращается в зайца. Ваша задача – расставить метки подсказки.

  2. Выделите первый кадр с медведем и выполните команду Modify>Transform>Add Shape Hint (Изменить>Трансформация>Добавить подсказку формы). Внутри контура появится красная метка с буквой. Поставьте её на какую-либо точку, например, на нос медведя.

  3. Перейдите на последний кадр. Там есть красная метка, парная первой метке. Надо поставить её на точку, на которую при перетекании должна «переехать» первая помеченная точка. Поставьте её на нос зайца. При этом цвет этой точки изменится на зелёный, а цвет парной метки – на жёлтый. Таким же образом расставьте ещё несколько точек и посмотрите, как при этом будет выглядеть анимация.
  4. Воспользуемся режимом кальки. Щёлкните на кнопке Onion Skin. Установите головку воспроизведения на последний кадр, а левый маркер кальки перетащите на первый кадр. Перемещайте метки по контуру зайца, при этом будет пересчитываться вся анимация, и вы сразу же увидите изменения. Добейтесь того, чтобы линии перетекания на образовывали «воронок».

Упражнение 10.16. Сложное вращение.


  1. Откройте файл complex.fla из папки Lesson10. Изначально сцена пуста. Откройте библиотеку фильма.

  2. Начнём с создания символа с анимацией вращения Луны вокруг Земли. Щёлкните на кнопке New Symbol внизу библиотеки. В диалоговом окне выберите тип символа Movie Clip. Дважды щёлкните на имени нового символа и введите новое имя: Земля-Луна.

  3. Сейчас вы в режиме редактирования нового символа, но в окне ничего нет, кроме крестика. Это точка регистрации нового символа. Начнём со слоя, на котором будут неподвижные объекты: Земля и орбита Луны. Переименуйте слой Layer1, дав ему имя Земля.

  4. Перетащите из библиотеки символ орбита Луны и поместите орбиту так, чтобы точка регистрации была точно в её центе (VA: воспользуйтесь для этого плавающей панелью Align, вызываемой через Ctrl+K, со включенной кнопкой To Stage).

  5. Перетащите из библиотеки символ Земля и совместите центр Земли с той же точкой. Заблокируйте этот слой, чтобы больше его не трогать.

  6. Для Луны создайте новый слой с именем Луна и перетащите на него одноименный символ. Центр Луны совместите с орбитой и расположите её слева от Земли.

  7. Начнём создание анимации. Щёлкните на 20-м кадре слоя Земля и нажмите клавишу F5 для создания обычного кадра. Этим задаётся общая продолжительность нашей анимации, так что теперь орбита и Земля будут видны всё время.

  8. Щёлкните на 20-м кадре слоя Луна и нажмите клавишу F6 для создания ключевого кадра. Перетащите Луну на последнем кадре едва заметно вверх (VA: это требуется для обеспечения плавности анимации при переходе с последнего на первый кадр). Снова выделите 1-й кадр и выберите на панели кадров (Frame) режим Motion в раскрывающемся списке Tweening.
  9. Щёлкните на 10-м кадре при нажатой клавише Ctrl или просто перетащите туда головку воспроизведения. Перетащите Луну на противоположную сторону орбиты. 10-й кадр становится ключевым, а анимация разбивается на две.


  10. Теперь направим Луну по траектории орбиты. Выполните команду Insert>Motion Guide. Перетащите из библиотеки орбиту Луны, превратите её в обычный контур командой Modify>Break Apart и точно совместите со старой орбитой. Заблокируйте слой с направляющей.

  11. Для 1-го и 10-го кадров установите флажок Snap (Привязка) на панели кадров, чтобы Луна «прыгнула» точно на орбиту. Нажмите клавишу Enter. Если Луна вращается по кругу, всё в порядке. Если она вращается то в одну, то в другую сторону по верхней половине орбиты, спустите её пониже в 10-м кадре, если по нижней – поднимите повыше в том же кадре. После проверки вернитесь на сцену, щёлкнув на кнопке Edit Scene и выбрав в списке имя сцены Scene1.

  12. Теперь приступим к созданию основной анимации. Переименуйте слой Layer 1 в Солнце. Перетащите из библиотеки Солнце и поместите его в центре сцены. На этот же слой перетащите из библиотеки орбиту Земли.

  13. Создайте новый слой с именем Земля и перетащите на него созданный вами символ Земля-Луна из библиотеки. Дальше всё так же, как при создании предыдущей анимации (шаги 7-11). Только сделайте продолжительность вращения в три раза больше, то есть создайте конечный ключевой кадр на отметке 60, а промежуточный – на 30. При просмотре анимации с помощью клавиши Enter вы не увидите вращение Луны вокруг Земли. Нажмите Ctrl+Enter и просмотрите анимацию в среде тестирования.

Упражнение 10.19. Создание слоя-маски.


  1. Откройте файл mask.fla. Здесь уже находится готовая анимация с символом-клипом. Просмотрите фильм в среде тестирования. Ваша задача – нарисовать и анимировать окуляр перископа, чтобы зритель видел не весь пейзаж, а только то, что внутри окуляра.

  2. Выделите слой перископ, который пока пуст, и перетащите на него окуляр – символ scope. Если вид окуляра вас не удовлетворяет, нарисуйте его самостоятельно.
  3. На первом кадре расположите окуляр внизу, ниже сцены. Создайте анимацию из серии движений, переместив окуляр сначала вверх, потом влево, вправо и снова вниз. Вам надо добиться, чтобы окуляр закрывал собой корабль после того, как «найдёт» его. Методом проб, перемещая ключевые кадры анимации, настройте движение окуляра.


  4. Теперь можно сделать из слоя с перископом маску. Щёлкните на нём правой кнопкой мыши и выберите в контекстном меню команду Mask.

  5. Осталось изменить цвет фильма, чтобы закрытая часть изображения была не белого, а тёмного цвета. Выполните команду Modify>Movie и выберите в качестве фонового цвета хаки. Просмотрите готовый фильм.

Упражнение 10.20. Знакомство с устройством кнопки.


  1. Откройте общую библиотеку кнопок, выполнив команду Window>Common Libraries>Button. Выберите любую приглянувшуюся вам кнопку и перетащите её на сцену.

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

 Up (Отпущена) – указатель мыши находится не на кнопке;

 Over (Над) – указатель наведён на кнопку;

 Down (Нажата) – указатель на кнопке, левая кнопка мыши нажата;

 Hit (Щелчок) – задаёт размер области, которая будет реагировать на щелчок.

  1. Пощёлкайте на этих кадрах, и вы увидите, как будет выглядеть кнопка в вышеописанных ситуациях. Кадры на временной линейке кнопки, как и для прочих символов, могут быть ключевыми или статическими. Обозначения ключевых и статических кадров для кнопок такие же, как и для графических символов и клипов. Кнопка может содержать в качестве ключевых кадров графические символы (клипы), что позволяет сделать кнопку анимированной.