Анимация элементов
Flash предлагает несколько различных путей анимации элементов, использующих методы покадровой (frame-by-frame) или автоматической (tweening) анимации. Во втором методе определяется, как элемент выглядит в первом ключевом кадре, затем определяется, как тот же самый элемент выглядит в следующем keyframe. Flash автоматически создает анимацию между этими двумя ключевыми кадрами. Для этого Учебника, Вы создадите два различных типа tweening-эффектов: движение бумажного змея (motion tweening эффект - анимация движения) и движение веревки (shape tweenin эффект - анимация формы).
Как узнать, какого именно из бумажных змеев анимировать, если клип имеет девять возможных комбинаций змеев (три модели змея, умноженные на три цвета змея)? Или потребуется сделать это со всеми девятью? К счастью, нет. Вместо этого, будем использовать специальный указатель места змея (placeholder), который поможет с установками анимации. Позже в этом Учебнике Вы создадите функцию, которая будет определять змея, выбранного заказчиком. На основании информации, полученной функцией, внешний клип с выбранным змеем появится в анимации, заменив собой placeholder.
В ходе подготовки анимации необходимо изменить точку отсчета у бумажного змея.
Изменение точки отсчета
По умолчанию, точка отсчета символа в SWF-файле находится в верхнем левом углу.
Предполагается, что змей будет вращаться во время полета. Необходимо переместить точку отсчета указателя места змея, таким образом, чтобы, когда указатель места будет заменен на изображение змея, он будет вращаться вокруг своего центра, а не вокруг верхнего левого угла.
Команда Edit Center позволяет переместить центр элемента в другое место, по сравнению с исходным символом.
| 1 | В слое labels линейки, найдите кадр с меткой "kite flight loop" (№ 168) и щелкните на нем, чтобы перейти на это место. | |
| 2 | Выделите змея, находящегося на сцене. | |
| 3 | Если панель Instance (Экземпляр) не открыта, нажмите на кнопку Instance Panel, в нижнем правом углу окна сцены.  | |
Обратите внимание, при выделении змея на сцене, в панели Instance появляется имя символа - placeholderKite и имя экземпляра - demoKite. В последствии, после того, как добавите ActionScript к Вашему клипу, выбранный заказчиком змей заменит собой экземпляр demoKite во время воспроизведения клипа.  | ||
| 4 | Выберите Modify > Transform > Edit Center. | |
| Появится изображение точки отсчета (маленькое перекрестие). | ||
| 5 | Перетащите точку отсчета примерно в центр змея.  | |
 |
Создание анимации движения для змея.
После того, как заказчик выбрал змея, он нажимает кнопку Fly It! и ему выводится счет и демонстрируется полет змея. Чтобы получить эффект летящего в небе змея, добавьте анимацию движения в Ваш клип.
Для этого движения, Вы зададите свойства змея, такие как позиция, размер и поворот для экземпляра в одной точке линейки, затем измените эти свойства в ключевом кадре, который вставите в линейку. Flash автоматически создаст содержание всех кадров между ключевыми.
Добавление ключевого кадра в конец анимации
При добавлении ключевых кадров, имейте в виду, что для изменения анимации Вы можете вставлять их где хотите. Кроме первого и последнего ключевого кадра, нет необходимости вставить ключевые кадры именно в те места, которые определены в этом Учебнике.
| 1 | На линейке, удостоверьтесь, что находитесь в кадре № 168 слоя kite. |
| Обратите внимание на ключевой кадр, указывающий начало Вашей анимации. Также обратите внимание на направляющую линию на Сцене, задающую путь змея. На линейке этот путь находится в слое Guide:kite, который является направляющим (guide) слоем, облегчающем размещение объектов на Сцене. | |
Направляющая призвана только помогать перемещать объект по заданному пути и при воспроизведении клипа ее не видно. Направляющие слои на линейке обозначаются специальным значком.   |
|
| 2 | Используйте меню масштабирования в нижнем левом углу окна сцены для ее увеличения до 800%.  |
| Теперь обратите внимание на то, что направляющая пути не сплошная замкнутая линия, она имеет небольшой разрыв для окончания анимации. | |
| 3 | В слое kite на линейке, перейдите на кадр № 229 и выберите Insert > Keyframe. |
| Проверьте показание номера кадра внизу линейки, чтобы убедиться в том, что Вы находитесь в нужном кадре. | |
| Ключевой кадр окончания анимации появиться в кадре № 228. | |
| 4 | На увеличенной, как было указано ранее, сцене, в кадре № 229 слоя kite, перетащите изображение змея немного направо, таким образом, чтобы точка отсчета оказалась на другой стороне пути. |
Вы определили положение элемента в конце анимации.  |
|
| Примечание: Если точка отсчета уже была расположена на правой стороне пути, анимация не будет работать. Сделайте последовательную отмену до момента определения точки отсчета и переместите ее левее того места, где она была установлена Вами. | |
| 5 | Восстановите масштаб сцены до 100%. |
|
Задание анимации движения
Теперь, когда Вы определили начало и конец анимации, используете панель Frame (кадр) для задания ее типа.
| 1 | В слое kite на линейке, нажмите на любой кадр между № 168 с началом анимации и № 228, ее окончанием, для выделения этого кадра. |
| 2 | Выберите Window > Panels > Frame и на открывшейся панели выберите Motion (движение) из списка Tweening. |
| 3 | Удостоверьтесь, что включена опция Snap . |
Включение опции Snap гарантирует, что змей будет присоединен к направляющей своей точкой отсчета.  |
|
| Если сплошная линия появилась между ключевыми кадрами на линейке и кадры имеют светло синий фон, значит анимация движения сделана корректно. | |
Если между ключевыми кадрами появляется штриховая линия, это указатель того, что анимация движения выполнена не правильно, обычная причина этого, случайное удаление начального или конечного ключевого кадра.  |
|
|
Теперь добавьте промежуточные ключевые кадры, которые укажут места, где анимация будет изменена.
| 1 | В слое kite линейки, перейдите на кадр № 175 и нажмите F6, чтобы вставить ключевой кадр. |
Змей на сцене передвинут вдоль заданного пути в позицию, определенную кадром № 175.  |
|
| 2 | В слое kite, аналогично вышеописанному, вставьте ключевые кадры в кадры №№ 184, 198, 207 и 214. |
|
Анимация будет более реалистична, если змей будет изменять свой размер и вращаться по ходу движения по заданному пути. Для достижения этого эффекта, сделайте увеличение и уменьшение размеров змея, в добавленных Вами ключевых кадрах и его поворот на некоторый угол.
| 1 | В слое kite перейдите на кадр № 175. |
|
| 2 | На панели инструментов выберите инструмент Arrow (Стрелка) и модификатор Scale (Масштаб). На Сцене, нажмите и перетащите один из угловых маркеров установки размера, расположенных вокруг изображения змея, чтобы немного увеличить его размер.  |
| 3 | Включите модификатор Rotate (Вращение). На Сцене, поместите курсор поверх одного из угловых маркеров поворота.  |
Курсор изменит свой вид на четыре стрелки, замкнутые в круг.  |
|
| 4 | Нажмите и потащите маркер для поворота змея примерно на 30° по часовой стрелке. |
| 5 | Перейдите на кадр № 184. На Сцене, используйте модификатор вращения для поворота змея приблизительно на 60° против часовой стрелки. Используйте модификатор масштаба для уменьшения размера изображения. |
| Во время воспроизведения анимации, змей будет удаляться. | |
| 6 | Перейдите на кадр № 198. На Сцене, используйте модификатор масштаба, чтобы сделать размер змея меньше.  |
| 7 | В ключевых кадрах №№ 207 и 214, используйте модификатор масштаба для увеличения изображения. |
| 8 | Для просмотра анимации змея в полете, протащите playhead от кадра № 168 до кадра № 228. |
|
Примечание: Не забывайте периодически записывать Вашу работу.
Зацикливание анимации
По достижению кадра № 229 анимация останавливается. Чтобы змей летал непрерывно, анимацию необходимо зациклить.
| 1 | В слое actions линейки, вставьте ключевой кадр в кадр № 228, и двойным щелчком откройте панель Frame Actions. |
| 2 | Нажмите на значок Actions для открытия этой категории, затем в списке команд дважды щелкните на команде goto.  |
| 3 | В списке Type (тип), выберите Frame Label. |
| 4 | В списке Frame, выберите kite flight loop. |
| Линейка содержит метку "kite flight loop", расположенную в кадре № 168. Вы задаете переход воспроизведения от кадра № 228, в который вставили ключевой кадр, обратно к кадру № 168 на начало анимации. | |
| 5 | Удостоверьтесь, что включена опция Go to and Play и закройте панель Frame Actions. |
|
Для оживления полета змея, Вы использовали анимацию движения (motion tweening). Чтобы оживить веревку, за которую привязан змей, используем анимации формы (shape tweening). Для этого Вы нарисуете форму, в данном случае веревку, в одной точке линейки и измените ее в других точках. Для создания анимации, Flash автоматически сделает изменения формы во всех кадрах между начальным и конечным ключевыми кадрами.
| 1 | В слое string на линейке, вставьте ключевой кадр (F6) в кадр № 168, место начала анимации полета. |
| 2 | На панели инструментов выберите инструмент Pencil (карандаш). Нажмите на палитру цветов для ее открытия и выберите бледный оттенок желтого. |
| 3 | В модификаторе Pencil Mode (режим), выберите Smooth (сглаженный). |
| 4 | Для открытия панели Stroke, выберите Window > Panels > Stroke. В меню Stroke Size переместите ползунок на 2 или введите число 2 в текстовом поле. |
| 5 | На Сцене, проведите плавную линию от бобины, приблизительно до "яблочка мишени" в центре змея.  |
| 6 | При необходимости, воспользуйтесь инструментом Arrow (Стрелка) для выделения и сглаживания линии при помощи модификатора Smooth (сглаживание).  |
| 7 | В слое string линейки, вставьте ключевой кадр в кадр № 230. |
| В дополнение к ключевому кадру в кадре 230, конечный ключевой кадр появится в кадре 229. . | |
| 8 | В кадре № 231, выберите Insert > Blank Keyframe, таким образом, начиная с этого кадра, веревка показана не будет. |
|
Создание анимации формы для веревки
Перед началом создания анимации формы, блокируйте на линейке слои kite, sky и Guide:kite, чтобы случайно не сдвинуть какие-нибудь объекты на сцене.
| 1 | В слое string, нажмите для выделения на любой кадр между кадрами №№ 168 и 229. |
| 2 | Если панель Frame (Кадр) не открыта, выберите Window > Panels > Frame и на панели в списке Tweening, выберите Shape (Форма). |
| Как и в предыдущем случае с анимацией движения, появившаяся сплошная линия между ключевыми кадрами, сообщает, что все сделано правильно. Кадры под ней приобретут светло зеленый цвет - признак анимации формы. | |
| 3 | Перейдите на кадр № 168. Медленно протащите playhead направо вдоль линейки до тех пор, пока веревка не отделится от змея. Добавьте другой ключевой кадр в этой точке линейки. |
|
| 4 | Выберите инструмент Arrow (Стрелка) в инструментальной панели. Если веревка выделена, щелкните где-нибудь на Сцене для снятия выделения, затем перетащите верхний конец веревки в такую позицию, чтобы он снова касалась яблочка мишени. |
| 5 | Используйте инструмент Arrow (Стрелка), с выбранным модификатором Smooth (Сглаживание), чтобы поддерживать требуемый изгиб веревки, подцепляя ее указателем мыши за середину и перемещая в нужном направлении. |
Сделайте анимацию так, чтобы веревка, во время движения змея, не смотрелась оторванной от него.  |
|
| 6 | По мере медленного перемещения playhead направо, вставляйте ключевой кадр в слой string каждый раз, когда образуется промежуток между змеем и веревкой, затем повторяйте шаги 4 и 5, и так до тех пор, пока не достигнете конца анимации в кадре № 229. |
| 7 | Для просмотра получившегося результата, перейдите на кадр № 168 и выберите Control > Play. По окончанию просмотра анимации, выберите Control > Stop. |
|
Что Вы должны знать
Хотя учебник разработан для начинающих пользователей Flash, Вам необходимо знать основы Flash, описанные в семи уроках, которые можете найти во Flash Help. Эти интерактивные уроки, созданные во Flash, предлагают введение в следующие предметы:
 |
Рисование |
|
Символы |
|
Слои |
|
Текст |
|
Кнопки |
|
Звук |
|
Анимация |
Для просмотра Уроков, выберите Help > Lessons, затем выберите урок из списка. Для лучшего понимания материала Учебника, убедитесь, что разобрались с теми понятиями, которые рассмотрены в уроках.
Импорт содержания
В дополнение к созданию текста и графики во Flash, можно импортировать ряд типов медиа в ваш клип. Для Вашего клипа потребуется звук, который будет воспроизводиться при нажатии на кнопку "Fly It!". Чтобы соединить звук с кнопкой, сначала необходимо импортировать звуковой MP3-файл. Используя этот сжатый звуковой формат, вы гарантируете, что звук не увеличит размер вашего клипа значительно.
| 1 | Выберите File > Import. | |
| 2 | Если Вы используете Windows, то в окне диалога Import, в директории с установленным Flash, найдите и откройте Tutorial/My_kite, и дважды щелкните на wizz.mp3. | |
| Если Вы используете Macintosh, в директории с установленным Flash, найдите и откройте Tutorial/My_kite, и дважды щелкните на wizz.mp3f, Затем нажмите Import. | ||
Звуковой файл появиться в окне библиотеки. Для прослушивания, выберите его в списке и нажмите на кнопку Play (воспроизведение) в окне библиотеки.  | ||
|
Использование команд для вывода результата
Теперь Вы готовы добавить в Ваш клип команды, определяющие выбранного заказчиком змея и показывающие его в клипе с выводом соответствующего счета. Воспользуйтесь панелью Frame Actions для создания функции - блока многократно используемого кода, выполняющего определенную задачу. В нашем случае задача состоит в том, чтобы, в зависимости от выбора сделанного заказчикам, загрузить определенный SWF-файл с изображение змея во Flash Player.
Примечание: Файлы с изображениями всех моделей и цветов змеев находятся в Вашей директории My_kite.
В дополнение к функции, которую предстоит создать, воспользуемся командой Include для связи с другой функцией во внешнем текстовом файле.
Примечание: В задачи этого Учебника не входит обучение синтаксису ActionScript. См. ActionScript Help для получения дополнительной информации о создании ActionScript.
Создание функции.
Назовем создаваемую функция refreshKite.
Параметр, названый currentKite, будет сообщать функции refreshKite какой тип и цвет змея был выбран заказчиком.
| 1 | В слое actions линейки, дважды щелкните на ключевом кадре в кадре № 1. | |
Откроется панель Frame Actions. В случае необходимости, измените размеры панели, чтобы видеть оба окна. В правом окне уже содержится команды ActionScript, к которым необходимо будет добавить новые команды.  | ||
| 2 | В левом списке команд нажмите на значок Actions для его раскрытия и дважды щелкните на команде function.  | |
Можно просто перетащить команду function вниз имеющегося в правом окне текста с кодом.  | ||
| 3 | В строке Name (имя) введите refreshKite.  | |
| 4 | В строке Parameters (параметры), введите currentKite. | |
Функция будет использовать параметр currentKite (текущий выбор змея) для идентификации змея, предназначенного к показу.  | ||
| 5 | В категории Actions, дважды щелкните на loadMovie. | |
| Эта команда заменяет мувиклип на сцене, на SWF, определенный ее параметрами. | ||
| 6 | В строке URL введите currentKite+".swf" | |
| 7 | Включите опцию Expression (выражение), расположенную справа от этого поля ввода. | |
Включая опцию Expression, вы сообщаете Flash'у, что currentKite + ".swf" на литеральная строка, а выражение. Функция использует это выражение для определения имени внешнего файла.  | ||
| 8 | В списке Location выберите Target, а в правом поле введите demoKite. | |
| Как Вы должны помнить из предыдущих шагов, имя экземпляра placeholderKite есть demoKite. | ||
| 9 | Удостоверьтесь, что в списке Variables указано Don't Send. | |
| 10 | В левом списке команд дважды щелкните на set variable, для определения новой переменной. | |
| Переменная является неким контейнером, хранящим информацию. Например, такую, как тип выбранного змея. В Вашем клипе она будет использоваться для хранения именно этой информации | ||
| 11 | В поле Variable введите chosenKite - имя новой переменной. Убедитесь, что опция Expression, справа от поля ввода, отключена. | |
| 12 | В поле Value введите currentKite. Включите опцию Expression, справа от поля ввода.  | |
|
Включение внешней функции
Вы узнали, что функция состоит из команд, выполняющих задачи, на основании информации, получаемых от параметров. Теперь Вы включите в Ваш ActionScript внешнюю функцию, которая покажет счет, соответствующий выбранному змею. Внешняя функция, названная kiteFunction.txt, находится в текстовом файле в директории Tutorial/My_kite. Для связи с внешним файлом воспользуйтесь командой Include.
Преимущество такой связи с внешним файлом, по сравнению с созданием функции внутри, заключается в том, что его можно редактировать без внесения изменений в клип.
Внешняя функция демонстрирует, насколько кратким, но мощным может быть ActionScript:
function generateInvoice (Style, Color, Price, currentKite) {
_root.invoice.invoiceColor = Color;
_root.invoice.invoicePrice = Price;
flyingKite = currentKite;
Однако, обратите внимание, что эта функция не прокомментирована. Хорошая идея снабдить Ваш ActionScript комментариями, примечаниями о цели скрипта и его действиях, облегчающими его понимание. Ниже приведен текст той же функции с такими пояснениями. Комментарии в ActionScript помещаются после двойного слэша (//), все находящееся после него до конца строки, игнорируется интерпретатором Flash.
function generateInvoice (Style, Color, Price, currentKite) { //Sets the invoiceStyle variable of the invoice movie clip to the //value of the Style parameter
Теперь добавьте команду include, которая свяжет, созданную Вами внутреннюю функцию, с внешней функцией.
| 1 | В категории Actions панели Frame Actions, перетащите значок include в конец текста в правом окне. |
| 2 | В поле Path введите KiteFunction.txt.  |
| 3 | Закройте панель Frame Actions. |
|
Использование Сцены и Линейки
Теперь, когда вы создали, импортировали и изменили содержание, используйте Сцену и Линейку для монтажа клипа. Можно создавать элементы содержания прямо на Сцене, в этом случае они не появляются в библиотеке, если не будут преобразованы в символ. Можете использовать Сцену для размещения импортируемых элементов по отдельным кадрам. Порядок размещения таких кадров на Линейке и определяет, когда те или иные элементы появляются в клипе при прохождении playhead через эти кадры.
Изменение ширины и высоты кнопки
На Сцене отсутствует одна из кнопок выбора змея, необходимо ее добавить, изменить ее размер и выровнять с остальными.
Эта кнопка в библиотеке имеет больший размер чем кнопки выбора на Сцене. Используйте панель Info для изменения ее размера.
| 1 | Если панель Info не открыта, выберите Window > Panels > Info или нажмите кнопку Info Panel в правом нижнем углу окна Сцены.  | |
| 2 | На линейке нажмите первый кадр слоя Pick a Kite Button. | |
| 3 | Перетащите на сцену кнопку "rokkaku kite BUTTON" из библиотеки и поместите ее между двумя другими кнопками выбора змеев. Когда сделаете это, кнопки должны выглядеть следующим образом:  | |
| 4 | В панели Info измените ширину (W) на 54.2 и высоту (H) на 50.0, нажмите Enter (Windows) или Return (Macintosh). | |
|
Выравнивание объектов на Сцене
Используйте панель Align для выравнивания объектов между собой и, в частности, Ваших трех кнопок выбора змеев.
| 1 | На Сцене выделите эти кнопки выбора, поочередно нажимая на каждую и одновременно удерживая клавишу Shift. | |
| Playhead должен все еще находиться в первом кадре линейки. | ||
| 2 | Если панель Align не открыта, выберите Window > Panels > Align. | |
| 3 | В панели Align нажмите кнопку Vertical Align Top, третью кнопку справа в верхнем ряду, чтобы выровнять кнопки по их точкам отсчета. | |
| 4 | Нажмите кнопку Horizontal Distribute Left, третью кнопку справа в среднем ряду, это равномерно распределит кнопки по горизонтали. | |
В зависимости от того, куда Вы поместили кнопку Rokkaku Kite, может потребоваться дальнейшее выравнивание. Выравнивайте их, используя другие кнопки выравнивания на панели Align, пока не достигнете желаемого результата.  | ||
|
Создание управляющей команды для экземпляра кнопки
Flash позволяет создавать интерактивность, путем добавления команд к клипу. Панель Actions (команды) как раз и предназначена для написания управляющих скриптов на языке ActionScript. Она используется для просмотра, написания, редактирования или ввода команд.
Теперь, используя панель Actions, Вы создадите навигационную команду, которая будет переводить воспроизведение клипа на соответствующий кадр линейки, когда пользователь нажмет кнопку Rokkaku Kite.
| 1 | На сцене просто выделите кнопку Rokkaku Kite (удерживая Shift нажмите на другие кнопки выбора змеев для отключения их выделения). |
| У Вас осталась выделенной средняя кнопка. Панель Instance может помочь Вам идентифицировать выбранный объект по имени. | |
| Playhead должен находиться в первом кадре линейки. | |
| 2 | Выберите Window > Actions или нажмите на кнопку Actions в нижнем правом углу окна сцены.  |
| Появится панель Object Actions. | |
|
| 3 | Нажмите на треугольник в правом верхнем углу панели для открытия контекстного меню. Удостоверьтесь, что включена опция Normal Mode (нормальный режим), а не Expert Mode (экспертный режим). |
Экспертный режим предназначен для пользователей, хорошо владеющих языком ActionScript. В Нормальном режиме, поля для ввода параметров помогут Вам в создании команд.  |
|
| В случае необходимости, нажмите треугольник в нижем правом углу панели Object Actions для открытия секции окна с полями ввода параметров. Перемещением вертикальной линейки можно регулировать размеры окна со списком команд и окна скриптов. | |
| 4 | Нажмите на значок Actions (команды), чтобы развернуть эту категорию, затем найдите в списке и дважды щелкните на команде goto. |
| 5 | В нижней части окна откройте список Type (тип) и выберите Frame Label (метка кадра). |
| 6 | В списке Frame (кадр) выберите rokkaku. |
| Этим Вы определили, что нажатие кнопки Rokkaku Kite, будет переводить воспроизведение клипа с первого кадра на кадр с меткой rokkaku. | |
| 7 | Выключите опцию Go to and Play внизу панели Object Actions.  |
|
Определение нужного воздушного змея
В дополнение к команде Go To, добавьте команды, которые покажут нужного воздушного змея, когда пользователь нажмет кнопку Rokkaku Kite.
| 1 | В списке команд дважды щелкните на setProperty. |
| 2 | В списке Property (свойства), выберите _visible (Visibility) |
| 3 | В поле Target (цель) введите demoKite и убедитесь, что отключена опция Expression (выражение), находящаяся рядом с этим полем ввода. |
| 4 | В поле Value (значение) введите True и включите опцию Expression, находящуюся рядом с этим полем ввода. |
| 5 | В списке команд дважды щелкните на loadMovie. |
| 6 | В поле URL введите r.swf, это имя внешнего файла с изображением нужного бумажного змея. |
| 7 | В списке Location (расположение), выберите Target. |
| 8 | В поле Location введите demoKite. |
| 9 | Удостоверьтесь, что в списке Variables установлено Don't Send и отключены обе опции Expression, после этого закройте панель Actions. |
|
Блокировка объектов
Теперь, когда Вы разместили и изменили кнопки, блокируете их, чтобы гарантировать от случайного смещения и редактирования.
| 1 | В слое Pick a Kite Button на линейке, нажмите черную точку в колонке Lock (блокировка).  |
| Вместо точки появится значок замка. Для разблокирования слоя, нажмите на этот значок. | |
|
Краткий обзор
Представьте, что однажды был создан вебсайт магазина бумажных змеев. Покупатели приходили бы на этот сайт, чтобы посмотреть на статические изображения различных змеев и выбрать то, что им понравится. Честно говоря, большинство заказчиков ушло бы неудовлетворенным, такой сайт не привлек бы их внимание.
Теперь представьте, что Вы можете добавить Flash на этот сайт. В этом учебнике Вы будете автором веб-страницы для магазина бумажных змеев "Orbit Kites" - интерактивного сайта, который позволяет пользователям просматривать и конструировать своих собственных змеев. После выбора змея, заказчик нажимает на кнопку и видит его стоимость и анимацию этого змея в полете.
По окончанию учебной программы, Вы сможете пользоваться теми возможностями и преимуществами, которые предоставляет Flash и будете знать больше о создании Flash-клипов. Вы изучите следующие темы:
|
Изменение свойств Flash-клипа |
|
Импорт, создание и модификация содержания, показываемого в Вашем клипе |
|
Озвучивание кнопок |
|
Использование Сцены (Stage) и Монтажной линейки (Timeline) для монтажа клипа |
|
Создание анимации движений (motion-tweening) и форм (shape-tweening) |
|
Использование команд для повышения интерактивности и облегчения работы |
|
Тестирование клипа для проверки эффективности загрузки |
|
Экспорт клипа для использования в сети |
В зависимости от опыта, Вам потребуется примерно час для завершения учебной программы.
Организация библиотеки
Вообще, является хорошей практикой, размещать все элементы библиотеки по соответствующим папкам. Этот Учебник требует многих элементов содержания, так что их рациональная организация в библиотеке достаточно важна. В этом разделе Вы переместите Ваш текстовый элемент в папку Text и создадите новую папку для звуковых файлов, а затем переместите все звуки в эту папку.
| 1 | В библиотечном меню Options, выберите Collapse All Folders (закрыть все папки), чтобы видеть какие элементы находятся вне папок.  | |
| 2 | выберите символ "box TEXT" и перетащите его в папку "Text". | |
| 3 | Двойным щелчком закройте папку "Text". | |
|
Создание новой папки для звука.
| 1 | В библиотечном меню Options, выберите New Folder и введите ее название "Sound". |
| 2 | Если необходимо, измените размер окна библиотеки чтобы видеть одновременно звуковые файлы и новую папку "Sound". |
| 3 | Выделите все звуковые файлы, для чего Control-click (Windows) или Command-click (Macintosh) на chirp.mp3, squeak.mp3, switch2.mp3 и wizz.mp3. Перетащите выделенные файлы внутрь папки "Sound". |
|
Озвучивание кнопки
Создавая кнопку, Flash автоматически включает в нее ключевые кадры (keyframes), соответствующие ее различным состояниям, связанным с указателем мыши. Кадр Over, например, представляет вид кнопки, когда указатель находится над ней. Другие ключевые кадры кнопки - Up, Down и Hit. Для большей информации о ключевых кадрах кнопки, см. урок Buttons (Help > Lessons > Buttons).
Теперь добавьте звук к кадру Down - звук будет воспроизводится при нажатии на кнопку. Так как добавление звука к символу кнопки происходит в библиотеке, он будет присутствовать в каждом экземпляре этой кнопки на сцене.
| 1 | В окне библиотеки дважды щелкните на папке Buttons для ее открытия. | |
| 2 | Выберите символ "fly it BUTTON", затем выберите опцию Edit из меню Options. Можно также дважды щелкнуть изображение символа в окне библиотеки. | |
| Flash переключится в режим редактирования символа. | ||
| 3 | Выберите Insert > Layer и введите имя Sound для нового слоя. | |
Для редактирования названия слоя, можно дважды щелкнуть на его имени.  | ||
| 4 | На слое Sound выделите кадр Down (№ 3) и вставьте в него пустой ключевой кадр - Insert > Keyframe. | |
| 5 | Для определения свойств звука, дважды щелкните на третьем кадре слоя Sound. | |
| В дополнение к панели Sound, могут появиться другие панели. | ||
| 6 | На панели Sound, выберите wizz.mp3 в списке звуков. Затем закройте панель. | |
| 7 | Выберите Edit > Edit Movie или нажмите Scene 1 в левом верхнем углу окна для возврата в режим редактирования клипа. | |
|
Примечание: Не забывайте почаще сохранять Вашу работу. Также помните, что Вы можете выбрать Control > Test Movie, чтобы услышать, как выбранный звук будет воспроизводиться в SWF.
Просмотр готового клипа
Чтобы понять то, что Вам предстоит создать, до начала работы над клипом, посмотрите уже готовую версию Учебника. Эта версия позволит исследовать линейку (Timeline), Movie Explorer, библиотеку (Library) и сцену (Stage) для лучшего понимания процесса.
| 1 | В директории с установленным Flash 5, откройте Tutorial > Finished. | |
| 2 | Выберите файл Kite.swf и перетащите его в открытое окно броузера. | |
Flash файл, предназначенный для редактирования (исходный файл), имеет расширение FLA. Клип, готовый для просмотра во Flash Player, имеет расширение SWF. | ||
| 3 | Нажмите на одну из кнопок "Select a Kite" для выбора типа воздушного змея. | |
| Обратите внимание на то, что при нажатии кнопки слышен звук. | ||
| 4 | Нажмите на одну из кнопок "Select a Color" для выбора окраски воздушного змея. | |
| Змей изменит свой цвет в соответствии с выбранным. | ||
| 5 | Нажмите на кнопку "Fly It!". | |
| Слушайте звук и наблюдайте анимацию. | ||
| Мувиклип меньшего размера воспроизводится внутри основного Flash-клипа. | ||
| Обратите внимание, что в зависимости от Вашего выбора, изменяется цена, название и цвет змея. | ||
| 6 | Для повтора нажмите кнопку "Back". | |
| 7 | Когда закончите просматривать SWF файл, можете закрыть окно или оставить его открытым, в качестве эталона. | |
|
Анализ файла Kite.fla
Для понимания того, как организован клип, полезно проанализировать готовый FLA-файл. Имеется ряд способов делать это. Выполните следующие шаги:
| 1 | Выберите File > Open в меню Flash. В директории с установленным Flash найдите и откройте Tutorial/Finished/Kite.fla. | |
| Готовый учебный клип откроется во Flash-редакторе. | ||
| 2 | Чтобы видеть всю поверхность сцены (Stage) и монтажной линейки (Timeline), выберите Window > Close All Panels. 1 | |
| 3 | Для изменения размеров линейки и сцены, переместите вверх или вниз полоску, разделяющую их. Воспользуйтесь вертикальным скроллингом на линейке для просмотра всех, находящихся на ней, слоев. | |
| 4 | Когда Вы изучали урок об анимации, то узнали, что ключевой кадр, это такой кадр, в котором определяется изменение в анимации. Теперь обратите внимание на слои и кадры, содержащие ключевые кадры. | |
Начальные и промежуточные ключевые кадры обозначаются в виде закрашенных кружков, конечные - маленьких прямоугольников 2.  | ||
| 5 | Для просмотра меток (labels), которыми автор обозначил сегменты клипа, внимательно изучите на линейке верхний слой "labels" (метки). | |
| В дополнение к использованию меток для создания и идентификации сегментов клипа, их можно использовать для перемещения по клипу, переводя воспроизведение на кадр, обозначенный меткой, когда пользователь нажимает на кнопку. В Учебнике эта тема будет освещена более подробно позже. | ||
| 6 | Просмотрите следующий слой, который называется "actions" (команды). | |
| На слое команд находятся кадры с ActionScript - специальным языком написания скриптов. | ||
| Каждая строчная буква a , которую Вы видите в некоторых кадрах, обозначает наличие в нем ActionScript. | ||
| 7 | Нажмите на playhead и медленно потащите его вдоль линейки. | |
| Наблюдайте, как изменения действий на сцене соответствуют изменениям на линейке. Однако обратите внимание на то, что при ручном перемещении playhead, клип воспроизводится последовательно по кадрам, а не так, как он будет показан пользователям. Команды ActionScript в клипе делают возможным переходы воспроизведения на специфические кадры, а не только последовательное перемещение вдоль линейки. | ||
|
Использование Movie Explorer
Movie Explorer помогает с организацией, размещением и средствами редактирования и наиболее полезен для работы над клипом, имеющим сложное наполнение. С иерархической древовидной структурой, Movie Explorer обеспечивает понимание в организации и течении клипа, и особенно полезен при одновременной работе над клипом нескольких человек.
| 1 | Если Movie Explorer еще не открыт, выберите Window > Movie Explorer или нажмите на кнопку "Movie Explorer", находящейся в нижнем правом углу окна со сценой.  |
| 2 | Для просмотры структуры клипа, в случае необходимости, увеличьте размер Movie Explorer (потащите окно за нижний правый угол). |
Кнопки фильтрации Movie Explorer отображают или скрывают информацию.  |
|
| 3 | Нажмите на треугольник в верхнем правом углу Movie Explorer и в открывшемся меню проверьте, включены ли опции Show Movie Elements (показ элементов клипа) и Show Symbol Definitions (показ описаний символа). |
| 4 | В верхней левой части окна удостоверьтесь, что включены только следующие кнопки фильтрации - Show Text (показ текста), Show Buttons, Movie Clips, and Graphics (показ кнопок, мувиклипов и графики) и Show ActionScripts (показ ActionScripts).  |
| 5 | Просмотрите список всего содержимого клипа и их связи между собой. |
Например, просматривая кнопку Rokkaku Kite, Вы увидите, что имеется связанный с ней ActionScript. Раскройте его ветку, чтобы просмотреть те команды, которое воспроизводятся, когда пользователь нажимает на кнопку Rokkaku Kite.  |
|
| 6 | Выключите кнопку фильтрации Show ActionScripts и включите Show Frames and Layers (показ кадров и слоев).  |
| 7 | Перейдите наверх списка. В слое labels (метки), дважды нажмите кадр №43 (rokkaku), чтобы переместить playhead на линейке на кадра с меткой rokkaku. |
| Также будут открыты панели, связанные с этим кадром. | |
| Для просмотра элемента, указанного в иерархическом дереве, дважды щелкните по соответствующему значку. При двойном нажиматии на значок кадра, playhead перемещается на этот кадр в линейке. При выборе другого типа элемента, появляется связанная с ним панель, позволяющая просматривать или изменять свойства этого элемента. | |
| 8 | Выключите кнопку фильтрации Show Frames and Layers. |
| 9 | С строке поиска (Find) напечатайте rokkaku kite BUTTON. |
| Movie Explorer покажет результаты поиска. | |
| 10 | Сделайте Right-click (Windows) или Control-click (Macintosh) на изображении кнопки Rokkaku Kite в списке и выберите Find in Library (найти в библиотеке) в появившемся контекстном меню.  |
| Find in Library откроет библиотеку, если она еще не открыта и выделит искомый символ в окне библиотеки. | |
| Библиотека содержит и организует элементы вашего клипа. | |
| 11 | Закройте Movie Explorer. |
| 12 | Закройте клип File > Close. |
| Если Вы сделали какие-то изменения в клипе, не записывайте их. | |
|
Открытие начального файла
Теперь Вы готовы создать свой учебный клип.
| 1 | Выберите File > Open. |
| 2 | В директории с установленным Flash, найдите и откройте Tutorial/My_kite/MyKite.fla. |
| Будет загружен частично завершенный клип Учебника. | |
| 3 | Выберите File > Save As и сохраните клип под новым именем в той же директории где и MyKite.fla. |
| Создание копии файла, позволит Вам и другим пользователям, повторить материал Учебника снова, используя исходный MyKite.fla. | |
| 4 | Если окно библиотеки на открыто, выберите Window > Library. |
|
От редактора:
Для этого на клавиатуре можно просто нажать клавишу TAB. Общая рекомендация, если хотите работать с пакетом профессионально, изучите "горячие" клавиши. Потратьте на это некоторое время, зато в последствии не придется шарашиться по опциям меню в поисках нужной, что очень облегчает и ускоряет работу.
По умолчанию так, но возможно настроить их вид, как в четвертой версии, это уже кому как удобно.
Публикация клипа
Примите поздравления! Вы почти завершили работу. В заключение, воспользуетесь командой Publish (публикация), чтобы создать файл с расширением SWF, который будет возможно использовать в сети.
Если Вы используете команду Publish с параметрами настройки по умолчанию, Flash создаст сетевую версию SWF-файла и запишет его вместе с HTML-файлом, содержащим специфические теги для показа SWF.
Как только Вы ввели все необходимые параметры Publish Settings (настройки публикации), можете неоднократно экспортировать клип во все выбранные форматы сразу, просто выбирая File > Publish. Flash сохраняет параметры настройки публикации, определенные Вами для данного клипа, поэтому каждый клип может иметь собственные параметры настройки.
Проверка эффективности загрузки клипа
Для гладкого воспроизведения клипа в Интернет, кадр должен быть загружен прежде чем воспроизведение дойдет до него. Если клип доходит до кадра, который еще не успел загрузиться, воспроизведение приостанавливается, пока нужные данные не будут подкачены из сети.
Вы можете использовать Bandwidth Profiler для проверки клипа и идентификации кадров, в которых возможно возникновение пауз. Bandwidth Profiler графически показывает, количество данных содержащихся в каждом кадре клипа и успевают ли они подгружаться при выбранном быстродействии модема.
| 1 | Выберите Control > Test Movie. |
| Flash сделает экспорт клипа в SWF-файл и откроет его в новом окне. | |
| 2 | В меню Debug (Отладка), выберите скорость модема для моделирования скорости загрузки. . |
| Вы также можете использовать опцию Customize (Настройка), для задания своей скорости загрузки. | |
| 3 | Выберите View > Bandwidth Profiler для просмотра диаграммы эффективности загрузки SWF. |
| Каждая затененная область представляет собой кадр клипа. Ее высота пропорциональна размеру кадра в байтах и килобайтах. Если область выходит за пределы красной линии, то в этом месте воспроизведение клипа может приостановиться, пока не загрузится весь кадр. | |
|
Примечание: Хотя Bandwidth Profiler не показывает никаких серьезных проблем с загрузкой учебного клипа, Вы можете оптимизировать клип для более быстрой загрузки. Подробности см. Оптимизация клипа.
| 4 | Когда закончите рассматривать Bandwidth Profiler, выберите View > Bandwidth Profiler для его отключения. Закройте окно теста для возврата в среду редактирования. |
|
|
Сохраните клип и выберите File > Publish. |
Просмотр установок публикации
Использование окна диалога Publish Settings, позволяет просто изменять настройки публикации выходного SWF-файла.
| 1 | Для просмотра настроек публикации, выберите File > Publish Settings. |
По умолчанию Flash сконфигурирован для создания поддерживающего HTML-файла, который отображает Flash-клип или альтернативное изображение.  |
|
| Когда Вы выбираете формат, требующий дополнительных параметров настройки, появляется новая вкладка. | |
|
По умолчанию, Flash дает SWF-файлу то же самое имя, как и у FLA-файла. Так как Вы создаете сайт для магазина Orbit kites, укажите для SWF новое имя - OrbitKites.swf.
| 1 | На вкладке Formats (Форматы) окна диалога Publish Settings, отключите опцию Use Default Names.  |
| 2 | В строке Flash (.swf) выделите имеющийся там текст и введите OrbitKites.swf, затем нажмите OK. |
| В следующий раз, когда Вы воспользуетесь командой Publish, Flash создаст файл с именем OrbitKites.swf. | |
|
Следующие шаги
Завершая Учебник, Вы теперь знаете, как делать следующее:
|
Изменять свойства Flash-клипа |
|
Импортировать, создавать и изменять содержание |
|
Озвучивать кнопку |
|
Использовать Сцену и Линейку для монтажа клипа |
|
Создавать анимацию движений и форм |
|
Использовать команды для создания интерактивного клипа |
|
Тестировать клип на эффективность загрузки |
|
Экспортировать клип для использования в сети |
Для продолжения изучения пакета, ознакомьтесь с темами раздела Using Flash и Flash Help.
Создание содержания
В дополнение к импортированию, Flash предлагает ряд инструментальных средств, для создания высококачественной графики и текста. В этом Учебнике текст содержит информацию о каждом выбранном воздушном змее. Вы создадите символ, который будет сообщать заказчикам эту информацию.
Примечание: В течение работы с Учебником, не исключено, что Вам потребуется отменить сделанные Вами изменения. Flash может отменить несколько из недавних изменений. Их количество зависит от числа уровней отмены, заданного в свойствах (Preferences) Flash. Чтобы сделать отмену, выберите Edit > Undo или нажмите Control+Z (Windows) или Command+Z (Macintosh). Наоборот, можно восстановить то, что Вы отменили, выбирая Edit > Redo или нажимая Control+Y (Windows) или Command+Y (Macintosh).
| 1 | Выберите Insert > New Symbol. | |
| 2 | В окне диалога Symbol Properties (свойства символа) укажите имя box TEXT.  | |
| 3 | В опции Behavior (поведение), включите Graphic и нажмите OK. | |
| Flash переключится в режим редактирования символа. Обратите внимание, что имя редактируемого символа, появляется в верхнем левом углу окна. Фон окна останется тем же самым оттенком серого, который был установлен Вами в окне Movie Properties. | ||
| 4 | На инструментальной панели выберите инструмент Text. | |
| 5 | Если панель Character не открыта, выберите Window > Panels > Character. | |
| 6 | В списке Font (шрифт), панели Character, выберите _sans. | |
| В клипе этот шрифт будет заменяться на шрифт группы sans serif (Arial, Helvetica или подобный), установленный по умолчанию на компьютере пользователя. | ||
| 7 | В строке Font Height (высота шрифта) введите число 12 или используя ползунок, установите нужное значение. | |
| 8 | Нажмите кнопку Bold. | |
| 9 | Нажмите кнопку выбора цвета и в открывшейся панели выберите белый цвет, имеющий шестнадцатеричное значение # FFFFFF.  | |
| 10 | Щелкните инструментом Text где-нибудь в левой части окна и введите следующий текст: The box kite was invented by an Australian, Lawrence Hargrave, in 1893. He used the kite to carry weather instruments aloft. |
|
| Хотя Вами был выбран белый цвет, во время ввода он будет выглядеть серым на белом фоне. | ||
| 11 | Выбранным инструментом Text нажмите на маркер изменения размеров (маленький круг в верхнем правом углу текстового блока) и перетащите его налево до слова invented.  | |
| Текст будет разбит на несколько строк. Как только Вы начнете перемещать маркер, он изменит свой вид на квадрат, это является указателем того, что текстовый блок теперь имеет фиксированную ширину. | ||
|
Изменение точки отсчета текстового блока
Каждый текстовый блок, как и другие элементы во Flash, имеет точку отсчета, которую можно использовать для его позиционирования. Проверьте точку отсчета Вашего текстового блока, чтобы удостовериться, что она соответствует точкам отсчета других текстовых блоков в клипе. Это гарантирует, что все текстовые блоки будут выравниваются корректно.
| 1 | На инструментальной панели выберите инструмент Стрелка (Arrow). |
| Выделите текстовый блок на сцене. | |
| 2 | Откройте панель Info, выбрав Window > Panels > Info или нажмите на кнопку Show Info, расположенную в нижней правой части окна сцены.  |
| 3 | Панель Info содержит маленькую сетку с черным квадратиком, отображающим точку отсчета. Если черный квадратик находится не в левом углу сетки, нажмите на верхний левый квадратик для перемещения точки отсчета в эту позицию.  |
| 4 | Введите 0 для X и Y координат и нажмите Enter (Windows) или Return (Macintosh), затем закройте Info панель. |
| 5 | Нажмите надпись "Scene 1" в левом верхнем углу окна для возврата в режим редактирования клипа.  |
| Во Flash можно создавать различные сцены, используя команду Insert > Scene. В этом Учебнике используется только одна сцена. | |
|
В любой момент, во время редактирования, Вы можете проверять, как клип будет выглядеть и вести себя в виде SWF-файла.
| 1 | Сохраните Ваш клип и выберите Control > Test Movie. |
| Flash экспортирует SWF копию Вашего клипа. | |
| 2 | В SWF-файле нажмите кнопку Box Kite и обратите внимание на то, что, вместо того, чтобы выдать текст о Box Kite, как ожидается, Вы видите текст о Rokkaku Kite. Oops! Вы должны заменить rokkaku ТЕКСТ на правильный текст о Box Kite. |
| 3 | Закройте SWF-file и вернитесь во Flash-редактор. |
|
Во время редактирования иногда возникает необходимость заменить один элемент на другой. Flash упрощает этот процесс, позволяя заменить один экземпляр на другой, с сохранением атрибутов первоначального экземпляра.
| 1 | На слое labels линейки, щелкните на кадр с меткой "Box Red" (№ 21) для перемещения playhead в раздел клипа, содержащий информацию о box kite. |
Выбранный номер кадра будет показан в статус-строке внизу линейки.  |
|
| 2 | Инструментом Стрелка выделите на сцене экземпляр текста, содержащего: "The rokkaku is a Japanese fighting kite ..." |
| Это текст, который необходимо заменить на текст о box kite, который был создан Вами раньше. | |
| 3 | Если панель Instance невидима, выберите Window > Panels > Instance. |
| Откроется панель Instance. | |
| 4 | На панели Instance, нажмите кнопку Swap Symbol (замена символа).  |
| 5 | В окне диалога Swap Symbol, дважды щелкните на символ box TEXT в списке символов. |
При необходимости пролистайте список, чтобы найти нужный символ.  |
|
| На сцене новый символ заменит собой предыдущий. Новый символ наследует все атрибуты старого. | |
|
Установка свойств Flash-клипа
Конфигурация свойств клипа - первый шаг в его создании. Используйте окно диалога Movie Properties (свойства клипа) для задания общих установок, таких, как частота кадров в секунду (frames per second - fps), размер сцены и цвет заднего фона.
Изменение свойств клипа, заданных по умолчанию
| 1 | Выберите Modify > Movie. | |
| 2 | В окне диалога Movie Properties удостоверьтесь, что в строке Frame Rate стоит число 12. | |
| Клип будет воспроизводится с частотой 12 кадров в секунду, как наиболее оптимальной для воспроизведения анимации в сети. | ||
| 3 | Нажмите на Background Color (цвет заднего фона) и в открывшемся окне выберите темно серый цвет. | |
При выборе цвета, его шестнадцатеричное значение высвечивается в поле, расположенном в верхней части окна. Нам понадобится серый цвет, со значением #333333.  | ||
| 4 | После задания свойств, нажмите OK. | |
|
Для дополнительной информации о свойствах клипа, см. Создание нового клипа и установка его свойств.
