Ознакомление с Flash. Создание простого мультика
Ознакомление с инструментами меню Flash и рисование колобков, двигающихся в разные стороны, как простейшего мультика. Рисование образов, их выделение и обработка с помощью инструмента Convert to symbol. Создание символов, стебля и цветка мультика.
Рубрика | Программирование, компьютеры и кибернетика |
Вид | лабораторная работа |
Язык | русский |
Дата добавления | 26.02.2013 |
Размер файла | 2,5 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
ЛАБОРОТОРНАЯ РАБОТА
на тему: «Ознакомление с Flash. Создание простого мультика»
Содержание
Тема 1. Ознакомление с Flash. Создание простого мультика
Тема 2. Трансформация, исчезновение и появление объектов
Тема 3. Движение по направляющему пути
Тема 4. Движущиеся элементы
Тема 5. Раскадровка формы и морфинг
Тема 6. Создание анимационного спутника планеты
Тема 1. Ознакомление с Flash. Создание простого мультика
Цель занятия: познакомится с основными командами Меню, научиться создавать простые мульты.
Ход работы:
Задание.
Нарисуйте несколько колобков которые двигаются в разные стороны. Используйте для каждого колобка свой слой.
Пример.
Выполните следующую последовательность действий:
1. Выберите инструмент "овал" и нарисуйте с помощью него овал или круг в левой части сцены.
2. Далее выберите инструмент "выделение" и выделите весь овал вместе с кромкой. Для этого либо охватите вашу фигуру прямоугольной рамкой, держа кнопку мыши нажатой, либо два раза быстро щелкните на ней. У вас выделится весь овал.
3. Теперь войдите в меню Insert и выберите Convert to symbol (или нажмите F8). В появившемся диалоге выберите селектор Graphic и нажмите ОК:
Рис. 1 - Выбор типа символа при создании
4. Теперь выберите на шкале времени вверху 25-й кадр (просто щелкните по нему мышкой), и выберите меню Insert- -Keyframe (или нажмите F6). Этим вы создадите так называемый "ключевой кадр" на 25-м кадре вашей шкалы времени. У вас должно получиться нечто похожее:
Рис. 2 - Временная шкала
5. Выделите теперь ваш кружок (теперь вокруг него возникнет голубая рамка) и переместите его в правую часть рабочей области.
6. Вернитесь на шкале времени в 1-й кадр. (В доказательство Вы должны увидеть свою фигуру опять в левой части экрана). Из меню Insert (или из контекстного меню при нажатии правой клавиши мыши на первом кадре) выберите Create motion tween.
Выберите Control- -Play (или просто нажмите Enter) чтобы просмотреть результат.
Немного усложним анимацию. Находясь в последнем кадре, измените размеры объекта, а при желании и его наклон. И больше от вас ничего не требуется, все преобразования между кадрами Flash выполнит автоматически.
Меню View:
Goto (Идем к ) - переход по кадрам и сценам.
100% - реальный размер нашего фильма. Более быстро размер можно изменить в выпадающем меню масштаба изображения, как и в других программах.
Show Frame (Показать кадр) - показывает весь кадр на экране.
Show All (Показать все) - все, что есть то и покажет
Outlines (Контуры-границы) - включает режим отображения объектов в контурном виде (для быстрой прорисовки на медленных компьютерах) без заливки.
Fast (Быстро) - режим отображения объектов с заливкой, но без сглаживания (для тех же целей).
Antialias (Сглаживание) - нормальное отображение объектов со сглаживанием, не считая текста.
Antialias Text (Сглаживание текста) - загладит все, что есть на сцене.
Timeline (Шкала времени) - показать или убрать киноленту.
Work Area (Рабочая зона) - отображение рабочей зоны (удобно отключать при больших размеров фильма).
Rulers (Линейки) - включает линейки для удобства позиционирования объектов.
Grid (Сетка) - где линейка, там и сетка. Очень удобно при рисовании.
Snap (Магнит) - притягивание объектов друг к другу и к сетке. Об использовании данной команды читайте в следующих работах.
Show Shape Hints (Показывать магнитные отметки) - включает режим отображения магнитных отметок с помощью, которого например, можно проконтролировать соединение объектов между собой.
Меню Insert:
Практически одно из основных меню.
Convert to a Symbol (Преобразование в символ) - применяется при преобразовании выделенных объектов Stage в символы.
New Symbol (Новый символ) - создать новый символ.
Layer (Слой) - добавляет новый, пустой слой.
Motion Guide (Путеводитель) - тоже слой, но предназначен для задания произвольной траектории движения объектов.
Frame (Кадр) - создать новый, пустой кадр.
Delete Frame (Удалить кадр)
Keyframe (Ключевой кадр) - создает новый ключевой (определяющий) кадр с тем же содержимым, что и предыдущий Keyframe в этом слое.
Blank Keyframe (Пустой Keyframe) - иногда возникает необходимость вставки пустого, ключевого кадра.
Clear Keyframe (Очистить Keyframe) - превращает выделенный Keyframe в обычный.
Create Motion Tween (Создать преобразование перемещения) - вот та волшебная команда, которая заставит перемещать и трансформировать Ваши объекты.
Scene (Сцена) - вставить новую сцену в фильм.
Remove Scene (Удалить сцену) - но для этого необходимо иметь более одной сцены в проекте.
Меню Modify:
Служит для изменения объектов, свойств и т.д.
Instance (Экземпляр) - запускает окно Instance Properties для задания свойств выделенному объекту.
Frame (Кадр) - свойства кадра.
Layer (Слой) - свойства рабочего слоя.
Scene (Сцена) - возможность изменения имени сцены.
Movie (Фильм) - параметры фильма (размер, кадры и т.д.).
Далее идут команды работы с текстом.
Font (Шрифт) - работа с выделенным текстом.
Paragraph (Абзац) - свойства выделенного текстового блока.
Style (Стиль) - работа со стилем выделенного текста.
Kerning (Кернинг) - плотность выделенного текста.
Text Field (Текстовое поле) - параметры выделенных текстовых полей (открывает широкие возможности при написании интерактивных сцен).
После издевательства над текстом, можно заняться творчеством с другими объектами.
Transform (Преобразование) - трансформация объектов (повороты, изменение размеров и др.).
Arrange (Упорядочить) - позволяет изменять уровень наложенности объектов и блокировки.
Curves (Кривые) - работа с кривыми, позволяет добиться хороших результатов при правильном подходе.
Frames (Кадры) - синхронизация кадров, или их реверс.
Trace Bitmap (Трассировка растровой графики) - перевод обычной графики в растровую, для дальнейшей работы во Flash.
Align (Выравнивание) - удобная функция для установки объектов относительно друг друга.
Group (Группировка) - "склеивание" различных объектов в одну фигуру.
Ungroup (Разгруппировка)
Break Apart (Разбить) - разбивает текст на отдельные символы или преобразует растровое изображение.
Меню Control:
Служит для управления просмотром и проверки нашего фильма. Многие команды аналогичны командам управления любого плеера.
Play (Проиграть) - показывает фильм с текущего кадра.
Rewind (Обратная перемотка) - переход на первый кадр сцены.
Step Forward (Шаг вперед) - переход на следующий кадр.
Step Backward (Шаг назад) - переход на предыдущий кадр.
Test Movie (Тест фильма) - проверка фильма в тестовом режиме.
Test Scene (Тест сцены) - не путать с Test Movie, ведь наш фильм может состоять из отдельных эпизодов, и можем проверить их отдельно.
Далее идут установочные режимы просмотра, которые при необходимости можно включить, установив на них галочку.
Loop Playback (Зациклить) - бесконечное проигрывание фильма.
Play All Scenes (Проиграть все сцены) - если не установить функцию, то вы увидите только текущею сцену.
Enable Frame Action (Включить действия в кадрах) - позволяет реагировать на все установленные действия.
Enable Buttons (Включить кнопки) - разрешает работу кнопок при просмотре и редактировании.
Mute Sound (Выключить звук) - чтоб соседям не мешать. Отключает звуки в фильме, полезна при работе с фильмом, в котором предусмотрена звуковая реакция на действия.
Меню Libraries:
В данном меню содержится список часто используемых символов, т.е. наборы статичной графики, кнопки, клипы. Можно создать свои собственные наборы символов и использовать их в разных проектах.
Меню Window:
Кроме работы с различными окнами, как в других программах, позволяет вызывать инспекторов и для управления дополнительными возможностями.
New Window (Новое окно) - открытие сцены в новом окне.
Arrange All (Упорядочить все) - расставляет все окна по вертикали.
Cascade (Каскадом) - тоже, но одно над другим.
Toolbar (Панель инструментов) - устанавливает режимы отображения рабочей панели.
Inspectors (Инспекторы) - вывод на экран инспекторов объектов, кадров, сцен и т.д.
Controller (Управление) - вывод панели управления воспроизведения фильма.
Colors (Цвета) - выводит панель, для управления цветом и создания градиентных заливок.
Output (Вывод) - окно Output предназначено для контроля за выводом переменных генератора, помогает при проверки корректности работа интерактивных форм.
Generator Objects (Генератор объектов) - используется при работе с содержимым генератора.
Library (Библиотека) - хранилище объектов (символов) текущего проекта.
Тема 2. Трансформация, исчезновение и появление объектов
Цель занятия: научиться работать с командами свободной трансформации, исчезновения и появления объектов.
Ход работы:
Рассмотрим Shape tweening (трансформация фигуры). Мы научимся преобразовывать одну фигуру в другую. Попробуем превратить треугольник в квадрат, а его в свою очередь в круг.
- В первом кадре нарисуйте инструментом Line [L] треугольник.
- Создайте пустой ключевой кадр (например 20) Insert / Blank keyframe [F7].
- Нарисуйте в нем инструментом Rectangle [R] квадрат без заливки.
- Вновь, создайте пустой ключевой кадр (например 40) Insert / Blank keyframe [F7].
- Нарисуйте в нем инструментом Oval [O] круг, тоже без заливки.
- Создайте еще один пустой ключевой кадр (например 60) Insert / Blank keyframe [F7].
- И нарисуйте в нем последнею фигуру - треугольник.
- Дважды щелкнем левой кнопкой мышки на первом кадре Timeline. Откроется окно Frame Properties (параметры кадра).
- Выберем уже знакомую нам закладку Tweening.
- В выпадающем меню tweening, выбираем Shape (фигура). Кроме шкалы Easing (ускорение), появится пункт Blend type (тип преобразования) с двумя параметрами: Distributive - для плавных линий и Angular - для более жесткого преобразования.
- Выберем второе значение.
- Нажмем ОК.
На Timeline появится стрелка к следующему ключевому кадру, на этот раз на зеленоватом фоне, символизирующем анимацию Shape tweening.
- Повторите пункты с заданием параметров трансформации для каждого следующего ключевого кадра (кроме последнего). Экспериментируя с разными значениями Blend type и Easing.
В результате у Вас получится мультик, показывающий превращение одной фигуры, в другую.
Если применить морфинг к фигурам с разным цветом, то во время трансформации будет происходить изменение цвета.
Следует заметить, что подобным образом можно трансформировать только объекты рабочего уровня.
Маленькая хитрость: в том случае, если Вам необходимо преобразовать один объект наложенного уровня в другой, то их необходимо предварительно разбить и при необходимости разгруппировать.
Проиллюстрируйте пословицу - "Делать из мухи - слона".
До сих пор, при создании своих фильмов Вы работали с нарисованным объектом, трансформируя его или перемещая. Библиотека символов, позволяет использовать созданные образцы символов, в различных кадрах фильма не создавая их (символы) заново. Кроме того, есть прекрасная возможность переносить ранее созданные библиотеки или их составляющие в новые проекты.
Символы существуют трех видов:
графические - любые рисунки или импортированная статичная графика, рисование мультик flash колобок инструмент convert
клипы - анимированная графика (по сути дела - самостоятельные фильмы) и кнопки.
Создав символ его можно многократно использовать, как в разных кадрах (или в одном), так и в качестве элемента (например - анимированного) более сложного символа. Используя многочисленные экземпляры одного символа в фильме, Flash хранит информацию, только об его оригинале и параметрах преобразований его копий, что значительно сокращает объем рабочего файла.
Есть два способа создания символов. Первый, заключается в преобразовании нарисованного объекта в символ.
- Выделите объект инструментом Arrow.
- Преобразуйте объект в символ Insert / Convert to Symbol [F8].
- Появится окно, в котором необходимо указать имя символа и его тип: Graphic - графический символ, Button - кнопка, Movie clip - анимированный символ.
После преобразования, символ всегда доступен через библиотеку Window / Library [Ctrl+L].
Для вставки символа из библиотеки, просто перетащите его из окна библиотеки в рабочую область Stage.
Создание символов Insert / New Symbol [Ctrl+F8]. При создании нового символа, мы попадаем в режим редактирования символа. Его признаком служит "безразмерное" рабочее поле и имя символа над перечнем слоев, слева от имени находится имя сцены, в которой мы до этого работали. Для выхода из режима редактирования символа, щелкните на имени сцены. Для редактирования уже используемого в сцене символа - щелкните на нем правой кнопкой мыши и выберите Edit. Учтите что, изменив рисунок одного символа, вы измените рисунок всех его экземпляров.
Рассмотрим еще один метод в анимации - исчезновение и появление объектов.
- Создайте новый символ (см. выше).
- Установите его в первый кадр.
- Вставьте ключевой кадр (например 15) Insert / Keyframe [F6].
- Установите для первого кадра режим анимации - Motion.
- Перейдите в конечный кадр анимации (в нашем случае в 15-й).
- Дважды щелкните на символе левой кнопкой мыши.
- Откроется окно Instance Properties (свойства экземпляра).
- Выберем закладку цветовых эффектов - Color Effect.
Данная закладка содержит эффекты, управляющие яркостью, цветом и прозрачностью экземпляра символа.
- Выберем эффект прозрачности - Alpha, в выпадающем меню - Color Effect.
- Перемещая ползунок, установим нулевую прозрачность.
Если теперь посмотреть ваш фильм, то мы увидим постепенно исчезающий рисунок. Поэкспериментируйте с различными цветовыми эффектами, попробуйте применить их для движущихся символов.
Создайте фантастический фильм, точнее его эпизод - "Телепортация киборга".
Сценарий фильма таков:
На экране две кабины для телепортации (с мигающими лампочками и индикаторами).
В одну из них входит киборг и исчезает, одновременно появляясь в другой. Киборг выходит из второй кабины. Дополнительное уточнение: Все элементы фильма должны быть символами. Используйте разные слои и отдельные анимированные символы для других символов (например - лампочки и индикаторы для кабин).
Поворот символа в соответствии с траекторией движения
Зачастую необходимо, чтобы при анимации по заданной траектории, символ изменял угол вращения в соответствии с направлением движения. Добиться этого очень легко, достаточно в ключевом кадре задающим анимацию движения - Tweening Motion, установить галочку Orient to path direction (ориентация по направляющей). В этом случае, при движении символа по траектории заданной в направляющем слое - Guide Layer, будет.
Проверим это на практике.
- Создадим новый символ New / Symbol [Ctrl+F8], назовите его Car - гоночный автомобиль формула-1.
- Поместите машину в первый кадр.
- Вставьте ключевой кадр (например 45) Insert / Keyframe [F6].
- Задайте для первого кадра режим анимации Motion.
- Установите галочку Orient to path direction.
- Вставьте направляющий слой Insert / Motion Guide.
- Нарисуйте в нем незамкнутую траекторию движения.
- В первом кадре установите автомобиль на начало траектории, а в последнем кадре на ее конец.
При просмотре Вы увидите, что Ваш гонщик точно следует всем поворотам трассы.
И заканчивая тему анимации по заданной траектории, полезно будет помнить, что для корректного изменения угла вращения необходимо правильное задание положение направления символа в начале и конце траектории.
Тема 3. Движение по направляющему пути
Цель занятия: изучить функции, предназначенные для создания движения по направляющему пути.
Ход работы:
Фильм этого проекта называется: MovePach.fla
В фильме три слоя:
Guide: Ladybug (Направляющие: божья коровка);
Ladybug (Божья коровка);
Background (Фон).
Для создания такого пути нам понадобится специальный слой, называемый слоем направляющих (guide layer). Линии, нарисованные на таком слое, не видны в SWF-файле, и хотя направляющий путь может вести объект по петляющей дороге, у него достаточно хороших манер, чтобы не появляться на экране во время просмотра фильма.
Фильмы в Flash создаются на столе с использованием киноленты, слоев, кадров и ключевых кадров
Рисунок 1 демонстрирует стол с показом и без показа пути. Этот проект призван показать, реализуется перемещение объекта вдоль заданной траектории и как можно смещать центральную точку объекта таким образом, чтобы движение казалось относительно натуральным.
Создайте два слоя. Назовите нижний слой Background (Фон), а верхний - Ladybug (Божья коровка). Выделите верхний слой и нажмите кнопку Add Guide Layer (Добавить слой направляющих), которая находится справа от кнопки Insert Layer (Вставить слой). Над слоем Ladybug (Божья коровка) появится слой направляющих с именем Guide: Ladybug (Направляющие: божья коровка) (рис. 3.8). Выделите 30-й кадр в слое направляющих и, держа нажатой клавишу Shift, щелкните во всех кадрах столбца. Нажмите F5, чтобы добавить кадры вплоть до 30-го во все три слоя. Теперь стол готов к созданию движения по направляющему пути.
Слой Фона
Сплошной цвет #E6AB4C, заданный с помощью полей RGB на панели Mixer (Палитра), будет цветом фона. Используйте инструмент Rectangle (Прямоугольник), чтобы покрыть весь стол, и затем заблокируйте слой фона щелчком в столе со значком замка.
Рисунок 1. Работая с движением вдоль пути, можно сделать путь видимым и невидимым, щелкая в столбце видимости. Это позволяет проверить, как движение будет смотреться в реальном фильме
Рис.2. Слой направляющих привязан к тому слою, который был выделен при его созданием
Слой направляющих
Выделите служебный слой и, используя карандаш, перо или кисть, нарисуйте путь, вдоль которого будет передвигаться наш объект. Оставьте достаточно места в начале и в конце пути для самого объекта. Если вы нарисуете путь точно из конца в конец стола, то объект при движении будет «выползать» за каря стола. В левой части рисунка 1 показано примерное положение пути, при котором божья коровка не вылезает за края стола. Заблокируйте слой, когда закончите.
Слой Ladybug
Божья коровка - это еще один рисунок. Нарисуйте сами или импортируйте рисунок божьей коровки (или другого понравившегося насекомого), выделите его и выберите команду Modify - Convert to Symbol (Изменить - Преобразовать в символ) или нажмите F8. такт как другие слои заблокированы, вы не рискуете случайно нарисовать жука не на том слое. Проделайте следующие шаги, чтобы заставить объект следовать вдоль намеченного пути:
1. Поместите считывающую головку на 30-й кадр и вставьте ключевой кадр.
2. Перемотайте фильм обратно в начало и нажмите Ctrl+F (Cmd+F), перейти на панель Frame (Кадр). Выделите кадр 1 и на панели Frame (Кадр) выберите Motion (Движение) в списке Tweening (Раскадровка) и установите флажки Orient to path (Следовать по пути) и Snap (Привязка). Когда вы установите флажок Orient to path (Следовать по пути), объект повернется, чтобы следовать вдоль кривой пути. Флажок Snap (Привязка) делает объект «привязанным» к пути. Если объект еще не находится на столе, поместите его в начало пути.
3. Передвиньте считывающую головку на 30-й кадр. Если вы уже выполнили привязку к пути, осторожно выделите объект (но не линию пути!) и перетащите объект вдоль траектории к ее концу. Во время перетаскивания вы увидите круглый маркер, который указывает центральную точку объекта и следует точно по линии пути. Убедитесь, что центральная точка находится в самом конце направляющего пути.
Тема 4. Движущиеся элементы
Цель занятия: использовать анимации движения.
Ход работы:
1. Откроем готовый проект самолет.
2. Добавим новый слой. (Insert- Layer). Дадим название Фон. Расположим слой Фон самым нижним.
3. В качестве фона будем использовать растровое изображение. Для этого в меню File выбираем Open as Shared Library. В появившемся окне на локальном диске C:- Program files -Macromedia-Flash5-Tutorial-My Kite и открываем файл My Kite.
3.1. В появившейся библиотеке выбираем Bitmap, Background sky.
3.2. Перетащим изображение в наш ролик.
4. Меняем размер изображения:
4.1. Выберем Show all.
4.2. Вызовем панель Align (Ctrl+k). Выделяем To Stage.В опции - Match Size кликнем по Match Width и Match height, а также в опции Align -Align Left Edge и Align top Edge.
4.3. Затем снова выбираем Show all.
Преступим к созданию подвижной маски. Для этого необходимо выполнить следующие операции: 1)преобразовать этот фильм в эталон типа Movie Clip 2) Создать дубликат, присвоить тип - графический 3) отредактировать этот дубликат, заменив самолет залитым кругом и удалить фон 4) После чего смонтировать экземпляры из созданных эталонов новый фильм с подвижной маской.
5.Скопируем все кадры в новый эталон:
5.1. Выделяем все слои (с помощью клавиши Shift).
5.2. Щелкаем правой кнопкой мыши по выделенным слоям и выбираем Copy Frames.
6.Создадим новый эталон (Ctrl+F8). Дадим название - Самолет и выберем тип видеоклип.
6.1.На первом кадре клипа самолет, щелкнув правой кнопкой мыши, выбираем Paste Frames.
6.2.Дадим соответствующие названия нашим слоям (рис.1):
Рис. 1
7. Продублируем клип Самолет.
7.1. Открываем библиотеку, щелкаем правой кнопкой мыши по объекту эталона Самолет и выбираем Duplicate.
7.2. В появившемся окне Symbol Properties выбираем тип Graphic и даем название эталону Маска.
8.Теперь необходимо отредактировать эталон Маска. В библиотеке выбираем Маску и кликнем по ней двойным щелчком.
8.1. В редактирование Маски удаляем слой Фон. Щелкнув по кнопке Delete Layer.
8.2. На слое Самолет удаляем кадры (выделить кадры и нажать Shift+ F5).Затем первый кадр делаем ключевым (F6).
8.2.1. На панели инструментов выбираем овал и в опции Color щелкнем по No Color.
8.2.2. Рисуем окружность, удерживая Shift.
8.2.3. 40-й кадр делаем ключевым и перемещаем круг в конец траектории.
8.2.4. Выделяем всю дорожку и выбираем Create Motion Tween .
9. Перейдем в сцену 1 и вставим новую сцену для внесения новых изменений (Insert-Scene). Далее будем работать в появившейся Scene 2.
10.Откроем Библиотеку и перетащим самолет на сцену.
11.Добавим новый слой и перетащим маску.
12.Выровним Эталоны относительно центра сцены. В окне Align (для самолета) устанавливаем To Stage . Затем в опции Align выделяем горизонтальный и вертикальный центры.
Повторим это действие и для эталона Маска.
13. Слоям дадим соответствующие названия Самолет и маска.
14. Выделяем 40-е кадры на обоих слоях и делаем их ключевыми.
15. Откроем библиотеку и запустим редактирование Маска.
15.1.Выделим киноленту слоя самолет, и щелкнем правой кнопкой мыши, выберем Frame , установим бегунок до-100 в опции Easing.
16. Переходим на сцену 2.
16.1.Щелкнем правой кнопкой мыши по слою Маска и в выпадающем меню отметим MASK.
Готово. Запустите и проверьте, что получилось. (Ctrl+Alt+Enter).
Тема 5. Раскадровка формы и морфинг
Цель занятия: при работе использовать слои, раскадровку форм.
Ход работы:
Фильм этого проекта называется: Flower.fla
В фильме три слоя:
Flower (Цветок);
Stem (Стебель);
Background (Фон).
Основная масса примеров этой главы посвящена раскадровке движения; она применяется к экземплярам символов, использование которых позволяет сильно сократить количество загружаемой через Интернет информации, необходимой для просмотра фильма.
В этом основе преимущество раскадровки движения перед раскадровкой формы. Однако широкий диапазон изменений, возможных при раскадровке формы, делает ее очень привлекательной для реализации постепенных изменений и сложных трансформаций. Рисунки 1, 2 показывают различные стадии распускания цветка - трансформации из бутона в раскрытый цветок.
В начале создайте три указанных слоя. Затем щелкните на 20-м кадре верхнего слоя и перетащите указатель мыши вниз, выделив вес столбец. Нажмите F5, чтобы добавить по 20 кадров в каждый слой.
Используя данные из таблицы 1, создайте цветовую палитру фильма. После задания каждого цвета на панели Mixer (Палитра) не забывайте давать команду Add Swatch (Добавить образец в каталог) из меню, расположенного в правом верхнем углу панели.
Рисунок 1. Бутон перед началом раскадровки формы
Рисунок 2. 10-й кадр - середина раскадровки изменений формы
Рисунок 3. Распустившийся цветок на последнем кадре фильма
Таблица 1. Палитра цветов для проекта Flower.fla
Шестнадцатеричные значения для |
R |
G |
B |
|
Цвет1 |
FC |
E5 |
CD |
|
Цвет2 |
94 |
A8 |
6D |
|
Цвет3 |
CC |
D9 |
E6 |
|
Цвет4 |
A6 |
59 |
0C |
|
Цвет5 |
EE |
B3 |
80 |
|
Цвет6 |
B6 |
19 |
B1 |
|
Черный |
0 |
0 |
0 |
Слой фона
Выберите на панели Stroke (Контур) толщину линий контура равной 10. выберите бежевый цвет (цвет 1) для контура и коричневый (цвет 4) для заливки. Используя инструмент Rectangle (Прямоугольник), нарисуйте прямоугольник, закрывающий весь стол. Добавьте временный рабочей слой, выбрав рабочий слой, выбрав слой фона и щелкнув на кнопке Insert Layer (Вставить слой) внизу раздела слоев. В новом слое нарисуйте круг диаметром 338 (W=338, H=338). Оставьте значение 10 для толщины контура, возьмите сиреневый цвет (цвет 6) для контура и голубой (цвет 3) для заливки. Используя панель Align (Выравнивание), расположите круг в центре стола. Сначала выберите Edit - Select All (Правка - Выделить все) или нажмите Ctrl+A (Cmd+A), а затем дайте команду Edit - Cut (Правка - Вырезать) или нажмите Ctrl+X (Cmd+X). Перейдите на слой фона и выберите Edit - Paste in Place (Правка - Вставить на место) или восполь-зуйтесь горячими клавишами Shift+Ctrl+V (Shift+Cmd+V). Особенно важно то, что таким образом (вырезая и вставляя) легко рисовать поверх уже существующих изображений на слое фона. Как только вы вставите круг в слой фона, выделите рабочий слой и удалите его щелчком на кнопке с корзиной внизу раздела слоев. Заблокируйте слой фона.
Слой стебля
Нам необходимо иметь отдельный слой со стеблем цветка и листом, так как они не изменяются вместе с бутоном. Нарисуйте стебель и лист, используя зеленый цвет из палитры проекта, заблокируйте слой и перейдите к слою цветка. Используйте рис.1-3 как подсказку.
Слой цветка
Бутон и распустившийся цветок будет нарисованы в противоположных концах фильма, при раскадровке один будет переходить в другой. Выполните следующие шаги:
1. Переместите считывающую головку на 1-й кадр и нарисуйте бутон на вершине стебля, как было показано выше на рис.1.
2. Передвиньте головку на последний кадр, выделите его и клавишей F6 вставьте ключевой кадр.
3. один из способов обеспечить одинаковую форму для всех лепестков цветка - используя инструмент Pen (Перо), нарисовать один лепесток, а затем командами Copy (Копировать) размножить лепестки в нужном количестве (можно также воспользоваться перетаскиванием при нажатой клавише Alt (Option)). Потом с помощью панели Transform(Преобразование) поверните каждый лепесток в нужную позицию. Возьмите сиреневый цвет для лепестков и бежевый для серединки цветка. Цветок должен располагаться на кончике стебля, там же, где в 1-м кадре находится бутон.
4. Когда бутон и цветок будут закончены, щелкните на первом кадре, выделив его. Нажмите Ctrl+F (Cmd+F) для перехода на панель Frame (Кадр). Откройте список Tweening (Раскадровка) и выберите Shape (Форма). Появится стрелка раскадровки с зеленым фоном от первого до последнего кадра.
Тема 6. Создание анимационного спутника планеты
Цель занятия: научиться работать со слоями, использовать графику.
Ход работы:
Создание эталона
Разработку анимации движения спутника по орбите вокруг планеты начнем с создания эталона «спутника».
- Выберите команду меню Insert * New Symbol (Вставить * Новый эталон). На экране появится диалог Create New Symbol (Создание эталона) (Рис.), в котором обычно достаточно только задать тип эталона и присвоить ему имя.
Диалог Create New Symbol (Создание эталона)
- В поле ввода Name (Имя) введите: Спутник.
Группа переключателей Behavior (Тип) позволяет определить тип создаваемого эталона:
Movie Clip (Клип), Button (Кнопка), Graphic (Графический). По умолчанию в этой группе установлен переключатель Button (Кнопка).
- Установите щелчком мыши переключатель Movie Clip (Клип).
- Закройте диалог Symbol Properties (Свойства эталона) щелчком мыши на кнопке ОК. Программа переключится в режим редактирования эталона и откроет соответствующее окно (Рис.).
На этот режим указывает появившийся в центре сцены крестик +, обозначающий точку привязки эталона, а также имя эталона - Спутник, появившееся в верхней части окна фильма, справа от названия сцены - Scene 1 (Сцена 1).
- Нарисуйте овал, нажав на кнопку [Oj - Oval Tool (О) (Овал) в секции Tools (Инструменты) панели инструментов. Цвет овала - градиентный, радиальный, черно-белый. Убедитесь, что контур отсутствует.
- Установите указатель мыши, который примет форму крестика + , несколько выше и правее центра сцены, обозначенного также крестиком.
- Нажмите и удерживайте клавишу Shift.
- Не отпуская клавишу Shift, нажмите и удерживайте левую кнопку мыши.
Не отпуская левую кнопку мыши и клавишу Shift переместите указатель мыши вправо и вниз так, чтобы центр появившейся окружности находился приблизительно в точке привязки, обозначенной крестиком +.
Отпустите левую кнопку мыши.
Отпустите клавишу Shift. Будет создан объект в форме круга с градиентной круговой черно-белой заливкой без контура (Рис.).
Рис. Круг с градиентной заливкой создан
- Выберите команду меню Window * Design Panels * Info (Окно * Панели конструирования * Информация). На экране появится панель Info (Информация) (Рис.).
- Убедитесь, что созданный объект по-прежнему выделен - покрыт точечным узором. Если это не так, щелкните на нем мышью.
- На панели Info (Информация) дважды щелкните мышью в поле ввода W (Ширина), Н (Высота).
- Введите с клавиатуры 30.
- Если значения в полях ввода X и Y отличаются от -15.0, то откорректируйте их так, чтобы они были равны -15.0, и завершите ввод значений нажатием клавиши [[Enter].
Положение выделенного объекта изменится. Теперь его центр точно совмещен с точкой привязки.
Создание эталона Спутник завершено, и он автоматически помещен в библиотеку (Library), в которой хранятся эталоны всех объектов, используемых в фильме.
Выберите команду меню File * Save (Файл * Сохранить). На экране появится диалог Save As (Сохранить как).
Диалог Save As (Сохранить как).
Для сохранения текущего фильма и всех других фильмов, которые вы смонтируете в дальнейшем, создайте новую папку Flash.
- Откройте папку, в которой вы хотите создать папку Flash.
- В поле ввода File name (Имя файла) двойным щелчком мыши выделите находящееся там имя Untitled-1 .fla и введите: Sputnik - такое имя мы присвоим файлу фильма.
Создаем графические элементы фильма
- Нажмите кнопку - Oval Tool (О) (Овал) в секции Tools (Инструменты) панели инструментов, чтобы включить этот инструмент.
- Укажите отсутствие цвета контура, щелкнув мышью на изображении карандаша кнопки - Stroke Color (Цвет контура), а затем - нажав кнопку - No Color (Не задан) в секции Colors (Цвета) панели инструментов.
- Заливку выберите коричневый цвет.
- Переместите указатель мыши на сцену и, удерживая нажатой клавишу Shift , нарисуйте в центре кадра круг так, чтобы его диаметр был несколько меньше высоты кадра.
- Выберите команду меню Window * Design Panels * Info (Окно * Панели конструирования * Информация). На экране появится панель Info (Информация).
- В полях ввода W (Ширина) и Н (Высота) введите значения 275 и нажмите клавишу [[Enter]. Размер «планеты» изменится в соответствии с указанными значениями.
Наша следующая задача - нарисовать вокруг планеты эллиптическую орбиту, по которой будет двигаться спутник. Предварительно установим для эллипса синий цвет контура и отсутствие заливки.
- Нажав кнопку [Of - Oval Tool (О) (Овал) в секции Tools (Инструменты) панели инструментов, снова выберите этот инструмент.
- Выберите синий цвет в открывающейся палитре Ц - Stroke Color (Цвет контура) секции Colors (Цвета) панели инструментов.
- Укажите отсутствие заливки, щелкнув мышью на значке ^ кнопки [& О j - Fill Color (Цвет заливки) и вслед за ней нажав кнопку - No Color (He задан) в секции Colors (Цвета) панели инструментов.
- Переместите указатель мыши в пределы кадра и нарисуйте эллипс так, чтобы его оризонтальная ось приблизительно совпадала с горизонтальным диаметром круга, ширина была несколько меньше ширины кадра, а высота - меньше диаметра круга (Рис.).
Размещено на http://www.allbest.ru/
- Для выделения контура, дважды щелкните мышью в любом месте контура эллипса.
- Выберите команду меню Modify * Group (Модификация * Сгруппировать). С помощью инструмента Free Transform Tool (Q) (Произвольная трансформация) поверните контур примерно, как на рис.
Размещено на http://www.allbest.ru/
- Выберите команду меню Modify * Ungroup (Модификация * Разгруппировать), затем удалите ненужную часть контура.
Размещено на http://www.allbest.ru/
- Дважды щелкните мышью на имени слоя Layer 1. Это имя будет выделено темным цветом и появится мигающий текстовый курсор.
- Введите новое имя слоя - Планета - и нажмите клавишу [[Enter} или щелкните мышью где-нибудь на пустом месте в шкале времени. Введенное имя отобразится в названии слоя.
- Убедитесь, что включен инструмент [hj - Selection Tool (V) (Выделение). В противном случае нажмите его кнопку в секции Tools (Инструменты) панели инструментов.
- Дважды щелкните мышью на контуре эллипса, чтобы выделить его.
-Выберите команду меню Edit * Cut (Правка * Вырезать).
Создадим новый слой.
- Нажмите кнопку Insert Layer (Вставить слой) в нижнем левом углу окна шкалы времени (Timeline). В левой части этого окна появится и будет выделен новый слой, которому по умолчанию присвоено имя Layer 2 (Рис.).
- Выберите команду меню Edit * Paste in Place (Правка * Вставить в то же место). Изображение эллипса будет вставлено из буфера обмена на новый слой Layer 2 и выделено.
Переименуем слой Layer 2, присвоив ему более выразительное имя - Орбита.
Движение по заданной траектории.
Создадим новый слой Спутник.
- Откройте окно библиотеки (Library) командой меню Window * Library (Окно *Библиотека).
Установите указатель мыши на значке или имени эталона Спутник в окне библиотеки (Library).
-Нажмите и удерживайте левую кнопку мыши.
- Не отпуская левую кнопку мыши, переместите указатель мыши на сцену, в ту точку, где начало орбиты в ее нижней части касается планеты.
- Отпустите левую кнопку мыши. Положение объекта будет закреплено, и он будет выделен голубой квадратной рамкой (Рис.).
Теперь для первого ключевого кадра слоя Спутник следует определить тип и параметры анимации. Это выполняется с помощью панели Properties (Свойства).
- В открывающемся списке Tween (Расчетная анимация) выберите пункт Motion (Движение). На панели Properties (Свойства) отобразятся элементы управления анимацией движения (Рис.).
-Сбросьте флажок Scale (Масштаб), чтобы пока не включать анимацию размеров.
- Установите флажок Orient to path (Ориентировать по траектории), чтобы заставить спутник двигаться по траектории, определенной на специальном ведущем слое.
- Установите флажок Sync (Синхронизация). Это гарантирует синхронизацию объектов анимации и позволяет исправить ошибки, которые иногда возникают при анимации объектов, уже содержащих анимацию.
- Установите флажок Snap (Привязка), чтобы автоматически фиксировать объект на траектории, если его положение определено недостаточно точно.
- Установите указатель мыши у правого края окна шкалы времени (Timeline) в строке слоя Спутник под меткой 62 шкалы нумерации кадров.
- Щелкните мышью в этом месте. В указанной позиции появится темный прямоугольник.
- Не отпуская клавишу shift, щелкните мышью в строке слоя Орбита, Спутник и Планета под меткой 62 шкалы нумерации кадров. В этом месте появится темный прямоугольник. Выберите команду меню Insert * Timeline * Keyframe. Щелкните мышью в окне шкалы времени (Timeline) на слое Спутник, чтобы выделить его. При этом на сцене будет выделено изображение спутника.
He отпуская левую кнопку мыши, переместите указатель мыши в верхнюю крайнюю точку эллиптической орбиты, где эллипс касается планеты. Вместе с указателем мыши переместится изображение спутника Выберите команду меню Control * Play.
- Щелкните мышью на слое Орбита в окне шкалы времени (Timeline). Этот слой и все его кадры будут выделены. Одновременно будет выделен эллипс на сцене.
- Выберите команду меню Edit * Сору (Правка * Копировать). Выделенный объект будет скопирован в буфер обмена.
Создадим над слоем Спутник с анимацией новый ведущий слой.
- Щелкните мышью в окне шкалы времени (Timeline) на слое Спутник, чтобы выделить его.
- Нажмите кнопку Add Motion Guide (Добавить траекторию движения) в левой нижней части окна шкалы времени (Timeline). Над слоем Спутник будет вставлен новый ведущий слой, которому по умолчанию присвоено имя Guide: Спутник (Ведущий: Спутник) (Рис.).
Вставим изображение траектории из буфера обмена на ведущий слой Guide: Спутник.
- Щелкните мышью на слое Guide: Спутник в окне шкалы времени (Timeline), чтобы выделить его и снять выделение слоя Спутник.
- Выберите команду меню Edit * Paste in Place (Правка * Вставить в то же место). Изображение эллипса будет вставлено из буфера обмена на слой Guide: Спутник и выделено на сцене.
- Выключите отображение ведущего слоя Guide: Спутник, щелкнув мышью в его строке на пересечении со столбцом со значком глаза Щ. Выделенное изображение эллипса, находящееся на этом слое, будет скрыто. Останется видимым только эллипс на слое Орбита.
-Нажмите клавишу Enter, чтобы просмотреть созданную анимацию.
- Чтобы сделать проигрывание фильма циклически повторяющимся, то есть таким, каким оно обычно бывает при просмотре в проигрывателе или браузере, выберите команду меню Control * Loop Playback (Управление * Циклическое проигрывание).
Размещено на Allbest.ru
Подобные документы
Пользовательский интерфейс Flash и его типовые функции. Форматы статичной графики. Рисование. Работа с цветом, с текстом. Импорт графики. Работа с графическими фрагментами. Образцы и библиотеки. Проводник Flash. Публикация и экспорт статичной графики.
дипломная работа [156,4 K], добавлен 07.12.2008Создание видеоролика про хлор, используя Flash-технологии. Характеристика и принцип работы в MACROMEDIA FLASH 8. Сцены. Анимация движения объекта. Встроенные эффекты. Последовательность действий при создании Flash-фильма, его просмотр и тестирование.
курсовая работа [504,5 K], добавлен 10.04.2008Создание тестовой программы используя flash-технологии, Action-скрипт. Характеристика и принципы работы в программе Macromedia Flash 7 MX. Использование панели Actions-скрипт. Создание и оформление теста с помощью программы Macromedia Flash.
курсовая работа [614,0 K], добавлен 10.04.2008История появления мультимедийных технологий. Программные и аппаратные средства мультимедиа. Разработка flash-анимации с использованием графического редактора Adobe Flash Professional CS6. Обработка звуковых файлов, создание растровой и векторной графики.
курсовая работа [1,9 M], добавлен 05.01.2015Изучение назначения, свойств (размер, разметка слайда, шаблон оформления, эффект перехода) и технологии презентационной графики. Ознакомление с основными инструментами и режимами работы (рисование, тезисы, примечания) в программе Microsoft PowerPoint.
курсовая работа [1,6 M], добавлен 07.06.2010Программа Flash компании Macromedia. Создание обучающей системы по Macromedia Flash 7. Структура программы Flash. Базовые моменты, подлежащие описанию для включения их в обучающую систему, реализованную в виде web-узла. Реализация обучающей системы.
курсовая работа [23,3 K], добавлен 21.02.2009Элементы интерфейса графического редактора Macromedia Flash. Создание изображений, преобразование формы и заливки. Использование слоев и библиотечных образцов. Разработка анимации в среде Flash. Реализация мультипликации, ее звуковое сопровождение.
курсовая работа [1,3 M], добавлен 15.11.2013Основные понятия и определения мультимедийных технологий. Возможности программы для создания интерактивной векторной анимации, ориентированной на создание web-сайтов и презентаций Macromedia Flash. Этапы создания мультимедийных презентационных программ.
дипломная работа [73,2 K], добавлен 15.04.2013Изучение особенностей Flash-анимации, ее достоинства и недостатки. Существенные характеристики, видовые особенностей Flash-аниматора. Примеры использования Flash-технологий. Роль Flash-аниматора в сфере web-дизайна. Необходимый инструментарий web-мастера.
контрольная работа [54,8 K], добавлен 24.05.2015Corel Draw - профессиональный пакет для создания векторных иллюстраций с возможностями редактирования текста, макетирования и подготовки Интернет-публикаций. Технологические возможности графического редактора. Ознакомление с инструментами этой программы.
курсовая работа [1,9 M], добавлен 31.05.2009