ИЗУЧАЕМ MACROMEDIA FLASH 8 ИЗУЧАЕМ MACROMEDIA FLASH 8 -2- Содержание Урок № 1. Общие сведения о программе и примеры использования ................................................... - 4 Упражнение № 1. Контур, обводка, заливка…………………………………………………… -10Упражнение №2. Инструмент Rectangle ..................................................................................... - 14 Упражнение № 3. Инструмент Line ............................................................................................. - 14 Упражнение № 4. Инструмент Pencil .......................................................................................... - 16 Упражнение № 6. Инструмент Brush ........................................................................................... - 24 Упражнение № 7. Ластик............................................................................................................... - 26 Упражнение № 8. Инструмент Pen .............................................................................................. - 26 Упражнение № 9. Инструмент Dropper....................................................................................... - 29 Упражнение № 10. Инструмент Paint Bucket .............................................................................. - 29 Упражнение № 11. Сложение и вычитание фигур ...................................................................... - 33 Урок 2. Создание статических изображений......................................................................................... - 35 Упражнение № 1. Трансформация объектов ........................................................................................ - 35 Упражнение № 2. Модификация фигур .................................................................................................. - 38 Упражнение № 3. Привязка объекта к сетке и к другим объектам .................................................. - 40 Упражнение № 4. Группировка объектов .............................................................................................. - 42 Упражнение № 5. Выравнивание и распределение объектов .............................................................. - 43 Группа кнопок Align (Выравнивание) ........................................................................................... - 44 Группа кнопок Distribute (Распределение) .................................................................................... - 44 Группа кнопок Match Size (Выровнять размер) ............................................................................ - 46 Упражнение № 6. Перевод растрового изображения в векторное .................................................... - 46 Урок № 3. Работа с текстом в Macromedia Flash 8 ............................................................................... - 50 Упражнение № 1. Создание статического текста ............................................................................. - 50 1. Расширяемый горизонтальный текст ......................................................................................... - 51 2. Статический горизонтальный текст заданной ширины ........................................................... - 51 3. Статический вертикальный текст............................................................................................... - 52 4. Использование device-шрифтов (только для горизонтального текста) .................................. - 53 Упражнение №2. Форматирование текста ......................................................................................... - 53 4. Установка выравнивания, полей, абзацных отступов и межстрочного интервала ............... - 55 5. Настройка режима, при котором пользователю разрешено выделение текста (только для горизонтального текста) ........................................................................................................................... - 56 6. Редактирование текста ................................................................................................................ - 56 7. Связывание текста с URL............................................................................................................ - 57 8. Преобразование и разбиение текста .......................................................................................... - 57 Самостоятельная работа № 1 ............................................................................................................... - 59 Урок 4. Создание анимации .................................................................................................................... - 60 Упражнение № 1. Анимационные эффекты .......................................................................................... - 65 Упражнение № 2. Автоматическая анимация ...................................................................................... - 70 Упражнение № 3. Движение по заданной траектории ....................................................................... - 72 Самостоятельная работа № 2 ............................................................................................................... - 76 Урок № 5. Автоматическая анимация, анимированные символы....................................................... - 77 Упражнение № 1. Автоматическая анимация формоизменения ........................................................ - 77 Упражнение № 2. Использование хинтов в анимации формы ............................................................. - 79 Упражнение № 3. Использование символов в сложной анимации ...................................................... - 84 Упражнение № 4. Создание анимированного графического символа: ................................................ - 84 Упражнение № 5. Создание мувиклипов……………………………………………………………….- 90Упражнение № 6. Преобразование анимации на сцене в отдельный мувиклип ........................ - 95 Упражнение № 7. Дублирование символов .................................................................................... - 97 Самостоятельная работа №3. Работа в Macromedia Flash со слоями и сценами. Сложная анимация ................................................................................................................................................ - 101 Урок 6. Цветовые эффекты на базе автоматической анимации движения ...................................... - 102 Упражнение № 1. Изменение яркости, оттенка и прозрачности .................................................... - 102 Упражнение № 2. Текстовые эффекты на базе изменения прозрачности ..................................... - 105 - ИЗУЧАЕМ MACROMEDIA FLASH 8 -3- Упражнение № 3. Освещение от свечи ................................................................................................ - 109 Упражнение № 4. Слайд-шоу с эффектом изменения прозрачности .............................................. - 117 Упражнение № 5. Замена одного символа на другой .......................................................................... - 118 Урок № 7. Использование слоя маски ................................................................................................. - 124 Упражнение № 1.1. Неподвижная маска и анимированный фон ...................................................... - 126 Упражнение № 2. Анимированная маска, неподвижный фон .......................................................... - 135 Урок № 8. Интерактивность во Flash .................................................................................................... - 138 Упражнение № 1. Создание кнопок ...................................................................................................... - 138 Упражнение № 2. Понятие об Action Script ........................................................................................ - 141 Упражнение № 3. Интерактивный фотоальбом (для самостоятельной работы) ....................... - 141 Упражнение № 4. Автоматизированное написание скрипта ........................................................... - 146 Урок № 9. Работа со звуком во Flash ................................................................................................... - 154 Упражнение № 1. Некоторые базовые понятия................................................................................. - 154 Упражнение № 2. Где взять звуки? ...................................................................................................... - 154 Упражнение № 3. Добавление звука во Flash ...................................................................................... - 155 Упражнение № 4. Импорт звуков ......................................................................................................... - 155 Упражнение № 5. Различные виды синхронизации ............................................................................. - 156 Режим синхронизации Event ......................................................................................................... - 156 Режим синхронизации Start .......................................................................................................... - 158 Режим синхронизации Stop........................................................................................................... - 158 Режим синхронизации Stream ....................................................................................................... - 159 Зацикливание звука ....................................................................................................................... - 159 Добавление звука к кнопке ........................................................................................................... - 161 Упражнение № 6. Использование средств редактирования звука ................................................... - 165 Упражнение № 7. Сжатие звуков для экспорта ................................................................................ - 168 Упражнение № 8. Применение компрессии к выбранным звукам ..................................................... - 168 Упражнение № 9. Применение компрессии ко всем звукам ............................................................... - 169 Упражнение № 10. Общие рекомендации по экспорту звука ............................................................ - 170 Самостоятельная работа №4. Работа со звуком в Macromedia Flash. Создание интерактивных роликов .................................................................................................................................................... - 171 Урок 10. Моделирование эффекта освещения букв ........................................................................... - 172 Урок 11. Моделирование эффекта свечения букв со вспышкой ....................................................... - 183 Урок 12. Моделирование эффекта «Салют»........................................................................................ - 194 Урок 13. Свойства мувиклипов и кнопок и их программное изменение ......................................... - 202 Урок № 14. Экспорт ролика из Macromedia Flash и публикация проектов...................................... - 218 Публикация ролика ........................................................................................................................ - 218 Создание проекта ........................................................................................................................... - 218 Самостоятельная работа №5. Экспорт фильмов из Macromedia Flash. Итоговая работа ... - 219 - ИЗУЧАЕМ MACROMEDIA FLASH 8 -4- Общие сведения о программе и примеры использования Назначение программы Составляющие Flash-технологии Исторические сведения. Версии программы Составляющие пакета Интеграция с другими пакетами от MACROMEDIA Интерфейс программы Назначение программы Разработчики Macromedia Flash утверждают, что создали программный продукт «для всего». Что это означает? А то, что Flash можно использовать для создания иллюстраций, презентаций, Web-страниц и целых сайтов, обучающих программ, CD-дисков. Области применения Flash сегодня различны: CD, анимация, полиграфия, изобразительное искусство, дизайн в шоу-бизнесе и на телевидении и пр. Преимуществом Flash фильмов в том, что в них может быть получена яркая, красивая анимация, а файлы – небольшими по объёму. Составляющие Flash-технологии Flash-технология имеет свои особенности: Векторная графика. Создаваемые объекты во Flash – векторные. А векторные изображения имеют свои плюсы по сравнению с растровыми. Поддержка нескольких видов анимации. Об этом будет сказано чуть позже. Возможность создания интерактивных элементов интерфейса. Например, вы имеете возможность создавать кнопки и устанавливать действия по ним. Можно управлять роликов во время его демонстрации. Поддержка взаимодействия с импортируемыми графическими форматами (в том числе растровыми). Это означает, что вы можете не только создавать объекты средствами рисования в самой программе Macromedia Flash, но и использовать другие растровые изображения (например, фотографии), подготовленные ранее. Возможность включения синхронного звукового сопровождения. Ролики со звуком смотрятся гораздо интересней и эффектней. Можно использовать звуковое сопровождение как на протяжении всего ролика, так и озвучить только некоторые события. Обеспечение экспорта Flash-фильмов в формат HTML, а также в любой из графических форматов, используемых в Интернете. Было бы не интересно создавать ролики и просматривать их только в самой программе Flash. Можно импортировать ролики во многие популярные графические форматы. Возможность просмотра Flash-фильмов как в автономном режиме, так и посредством Web-браузера. Наличие инструментов визуальной разработки, избавляющих создателя Flash-фильмов от многих рутинных операций, а также от детального изучения технических аспектов реализации Flash-технологии. ИЗУЧАЕМ MACROMEDIA FLASH 8 -5- Исторические сведения. Версии программы Первоначально программа называлась Splash Animator и продавалась малоизвестной фирмой Future Animation для изготовления мультфильмов на PC - компьютере. Предназначалась для художников - аниматоров и пользовалась ограниченным успехом. В связи с бумом на WWW-приложения такой гигант, как фирма Macromedia, обратила на нее внимание, купив и переименовав во Flash. Разработчики Flash поменяли интерфейс программы для облегчения и автоматизации разработки проекта. Причем мультимедийный гигант не только сменил название и интерфейс, но и переориентировал пакет на рынок Web-анимации (при этом был предложен и свой, внутренний формат файлов векторной графики “*.swf” , и реализована поддержка для других популярных графических форматов, в том числе и для анимированного GIF), и обеспечил пакету хорошую рекламу Изначально Flash разработки были мало известны пока корпорация Macromedia не предложила переделать один из разделов сервера Walt Disney используя Flash. Это дало большую рекламу Flash технологии. Многие дизайнерские студии начали покупать пакеты программных продуктов для разработки Web-страничек при помощи Flash технологии. Одним из плюсов Flash для Web стала возможность отображения изображений при помощи векторной графики. Векторная графика занимает меньше места, чем ранее использовавшаяся растровая графика. Большое значение было предано совместному использованию векторной графики и анимации. Это намного расширило круг интересов пользователей и разработчиков. Итак, впервые программа появилась в 1996 году. Версии Flash 1 и 2 были созданы для быстрого создания анимации на основе векторной графики. Здесь использовались лишь грубые инструменты для рисования и редактирования. В третьей версии появились дополнительные инструменты, позволяющие создавать сайты с помощью средств Flash. Macromedia Flash 4 приобрела очень большую популярность благодаря внедрению языка сценариев Action Script. В Интернете появилось много сайтов на основе технологии Flash. В августе 2000 года компания Macromedia выпустила новую, пятую версию программы. Она имела более развитый язык сценариев, осуществляла поддержку математических функций, массивов и других объектов. Появились многочисленные библиотеки. Стала возможной интеграция с XML (язык разметки текста). В следующей версии программы разработчики отступили от стандартной нумерации, поскольку, как они утверждают, создали продукт, имеющий ряд больших изменений по сравнению с предыдущими версиями. Они создали Flash MX. Есть несколько версий, что означает аббревиатура MX: Multiextended (дословно — «много расширенный»), Mixed (смешанный). Особенность программы в том, что интерфейс (рабочая среда) пакета может быть настроен индивидуально для любой категории пользователей: designer — для дизайнеров, то есть для пользователей, работающих с Flash MX в первую очередь как с графическим редактором; developer — для разработчиков, то есть для пользователей, использующих Flash MX для создания Web-публикаций; general — для общего случая, то есть «усредненный» вариант. Значительно расширены возможности по работе с цветом: различные оттенки можно смешивать самым произвольным образом. Появились новые инструменты для работы с графикой. Существенно доработан Flash-плеер. Так или иначе, введя новое обозначение, создатели пакета ясно дают понять: приобретая Flash MX, вы получаете в свое распоряжение существенно обновленный инструмент. В настоящее время появились более новые версии программы: Flash MX Pro 2004 – в 2003 году. Последняя версия Flash 8 появилась в 2005 г. ИЗУЧАЕМ MACROMEDIA FLASH 8 -6- Составляющие пакета Устанавливая пакет Macromedia Flash, пользователь получает несколько компонентов, которые будут необходимы в работе: Собственно программа, позволяющая создавать ролики в формате SWF (Векторный формат Shockwave Flash). Flash Player (отдельная программа), позволяющая в основном лишь просматривать ролики в формате FLA, а также создавать Exe-файлы. То есть, даже если у вас нет в наличии программы Macromedia Flash, то можно просматривать (и только!) ролики в плеере. Movie Explorer — это специальная компонента Flash, которая обеспечивает возможность просмотра структуры фильма и быстрый выбор любого элемента фильма для модификации. Справочная система пользователя, включающая в себя: o интерактивную справочную систему в формате HTML; o интерактивный учебник, также реализованный, в виде HTML-страниц; o интерактивные уроки, представляющие собой 10-серийный Flash-фильм; o оперативную техническую поддержка через Web; o подборку полнофункциональных примеров Flash-фильмов, каждый из которых может служить не только иллюстрацией возможностей Flash, но и прототипом для создания нового фильма; o справочник в формате HTML, содержащий описание синтаксических конструкций и встроенных функций языка ActionScript. Интеграция с другими пакетами от MACROMEDIA Практически все программные средства от Macromedia «понимают» друг друга и предусматривают совместное использование при разработке различных приложений. Разработчики Flash MX утверждают, что отныне такая интеграция стала еще более эффективной. Из наиболее популярных вариантов совместного применения Flash с другими инструментами от Macromedia можно назвать следующие: включение различных Flash-объектов (кнопок, навигационных панелей) в HTMLдокумент с помощью визуального редактора Web-публикаций Dreamweaver; импорт в Flash-фильм графических изображений, созданных с помощью редактора FreeHand 10; и наоборот, объекты, созданные с помощью Flash (такие как символы, слои), могут быть экспортированы в FreeHand для модификации; импорт в Flash-фильм графических изображений в формате PNG, созданных с помощью редактора Fireworks; включение Flash-фильмов в мультимедийные обучающие программы, создаваемые с помощью пакета Authorware. Интерфейс программы Окно Macromedia Flash содержит следующие элементы (Рис. 1): 1. Рабочая область. Область, на которой располагаются объекты. 2. Строка меню и панель инструментов. Присутствует, как и в других программах, и содержит все команды, которые можно выполнить в программном средстве. 3. Панель инструментов рисования и редактирования изображений. 4. Линия времени. Она необходима для создания анимации и будет рассмотрена в последующих уроках более подробно. 5. Набор окон для задания различных параметров. Они также будут рассмотрены при изучении соответствующих разделов материала. ИЗУЧАЕМ MACROMEDIA FLASH 8 -7- Рис. 1. Интерфейс программы ИЗУЧАЕМ MACROMEDIA FLASH 8 -8- Урок 1. Рисование во Flash. Инструменты рисования и редактирования Теория Инструменты рисования Контур, обводка, заливка Инструмент прямоугольник (Rectangle) Инструмент линия (Line) Инструмент карандаш (Pencil) Инструмент заливка (Brush) Ластик Инструмент перо (Pen) Инструмент пипетка (Dropper) Инструмент ковш заливки (Paint Bucket) Инструменты для работы с текстом Инструменты редактирования Инструмент Лассо Редактирование линий, инструменты выделение и подвыделение (Selection и Subselection) Инструменты навигации Инструмент рука Практика Упражнение № 1. Контур, обводка, заливка Упражнение № 2. Инструмент Rectangle Упражнение № 3. Инструмент Line Упражнение № 4. Инструмент Pencil Упражнение № 5. Редактирование линий, инструменты выделение и подвыделение (Selection и Subselection) Упражнение № 6. Инструмент Brush Упражнение № 7.Инструмент Ластик Упражнение № 8. Инструмент Pen Упражнение № 9 Инструмент Dropper Упражнение № 10. Инструмент Paint Bucket Упражнение № 11.Сложение и вычетание фигур ИЗУЧАЕМ MACROMEDIA FLASH 8 -9- ТЕОРИЯ Инструменты рисования На панели инструментов присутствуют следующие инструменты рисования: Инструмент Овале Инструмент Прямоугольник, который представлен двумя режимами: Прямоугольник или Многоугольник. Инструмент Карандаш (Pencil), позволяющий рисовать произвольные линии. Инструмент Кисть (Brush), позволяющий выбирать различные формы и размеры кисти. Более подробно эти инструменты, а также их параметры будут рассмотрены в практическом разделе курса. Инструмент многоугольники. Линия (Line), позволяющий рисовать простые линии и произвольные Инструмент Ластик (Erasel), позволяющий стирать области объектов. Инструмент Заливка (Paint Bucket), позволяющий выбирать цвет и способ заливки. Инструмент Бутылка чернил (Ink Bottle), позволяющий изменять цвет контура. Инструмент Пипетка (Eyedropper). Позволяет выбирать цвет на уже существующем объекте. Инструмент Карандаш, или Перо (Pen). Позволяет создавать кривые и сглаженные кривые линии по принципу кривых Безье. Инструменты для работы с текстом Для работы с текстом есть единственный инструмент - . Инструменты редактирования Инструмент Лассо (Lasso). Позволяет выделять произвольные области объектов. Инструмент Выделение (Selection). Позволяет выделять, видоизменять и перетаскивать объекты. Инструмент Произвольная трансформация (Free Transform). Позволяет изменять размеры объектов, поворачивать их, делать скос объектов. Инструмент Подвыделение (Selectiontion). Позволяет работать с узлами объектов. Инструменты навигации Для навигации по документу существует 2 инструмента – Рука, позволяющий двигать полотно документа, если выбран большой масштаб, и инструмент Масштаб. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 10 - ПРАКТИКА Упражнение № 1. Контур, обводка, заливка Прежде чем вы начнете работать с инструментами рисования, следует ввести понятия контура, обводки и заливки. Рассмотрим их на простом примере. 1. Выберите инструмент редактирования Oval (Овал) на панели инструментов (рис. 2) и нарисуйте овал. Фигура автоматически будет залита цветом. (Если при рисовании овала удерживать клавишу Shift, то рисуемая фигура будет иметь форму окружности.) Рис. 2. Рисунок состоит из контура, обводки контура и заливки Рисунок состоит из контура, обводки контура и заливки (рис. 2). 2. Для того чтобы выделить контур фигуры, щелкните мышью по кнопке, показанной на рис. 3 красной стрелкой. В результате линия обводки и заливка пропадут, останется только контур — (рис. 4). Рис. 3. Кнопка удаления заливки и обводки ИЗУЧАЕМ MACROMEDIA FLASH 8 - 11 - Рис. 4. Удалив заливку и обводку, получаем контурную линию Повторное нажатие кнопки, показанной на рис. 3, возвращает удаленные элементы. Цвет обводки контура и заливки легко поменять. 3. Цвет заливки меняется с помощью кнопки выбора цвета заливки Fill color (рис. 5). После того как вы выберете в палитре (рис. 5) новый цвет, нарисованная фигура не изменится, но при рисовании нового эллипса, контур будет заливаться только что выбранным цветом. Для изменения цвета линии обводки Для изменения цвета заливки Рис. 5. Инструменты выбора цвета для заливки и линии обводки 1. Не всегда удобно использовать готовые заливки. Иногда хочется создать свои. Для этого во Flash есть специальное окно для создания новых заливок. Оно находится в правой части экрана и называется Цветовой микшер. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 12 - Рис. 5а. Окно цветового микшера 4. Для того чтобы изменить цвет заливки в текущей фигуре, необходимо выбрать новый цвет и воспользоваться инструментом Paint Bucket (Ковш заливки) — он выделен на рис. 6. Рис. 6. Цвет заливки в нарисованной фигуре можно изменить с помощью инструмента Paint Bucket 5. Цвет обводки тоже можно поменять. Для этого необходимо выбрать инструмент Stroke color (Изменение цвета обводки) — на рис. 7 на него указывает красная стрелка. После этого откроется палитра, в которой можно выбрать необходимый цвет, затем нужно выбрать инструмент Ink Bottle Tool (он выделен на рис. 7) и щелкнуть им по линии обводки. В результате она зальется выбранным цветом. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 13 - Рис. 7. Изменение цвета линии обводки 6. На рис. 6 нарисованный нами овал показан в большем масштабе. Изменение масштаба, кстати, задается так же, как и в Photoshop, — путем использования комбинации клавиш Ctrl и «+» или Ctrl и «-». 7. Толщину и стиль линий обводки также можно менять. Для этого необходимо по команде Window >Properties> Properties. . В ней можно настроить стиль линии обводки, ее толщину и цвет (рис. 8). При помощи инструмента выделения кликнуть на обводку Рис. 8. Из меню панели можно изменить параметры линии обводки 8. Измени тип и толщину линии. Пример изменения (рис. 9). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 14 - Рис. 9. Пример изменения типа и толщины линии обводки Итак, мы рассмотрели основные понятия — контур, заливка и линия обводки — на примере рисования овала. Теперь поговорим непосредственно об инструментах рисования. Упражнение №2. Инструмент Rectangle Инструмент Rectangle (Прямоугольник) расположен рядом с инструментом Oval (рис. 11). Помимо традиционного прямоугольника можно рисовать прямоугольники со скругленными краями. Для того чтобы задать такой режим, выберите иконку, на которую на рис. 11 указывает красная стрелка. В результате появится панель Rectangle Settings, где вы определяете радиус скругления, после чего при рисовании прямоугольника углы будут скругляться. Редактирование заливки и обводки контура прямоугольника производится так же, как и в случае с овалом. Рис. 11. Работа с инструментом Rectangle Упражнение № 3. Инструмент Line ИЗУЧАЕМ MACROMEDIA FLASH 8 - 15 - 1. Инструмент Line (Линия) позволяет проводить прямые линии (рис. 12). При удерживании клавиши Shift можно проводить вертикальные, горизонтальные линии или линии под углом 45°. Рис. 12. Работа с инструментом Line 2. В ряде случаев, если вам, например, необходимо нарисовать равнобедренный треугольник, полезно воспользоваться сеткой. Сделать видимыми линии сетки можно по команде View > Grid > Show Grid (рис. 13). Рис. 13. При рисовании правильных геометрических фигур можно воспользоваться сеткой ИЗУЧАЕМ MACROMEDIA FLASH 8 - 16 - Упражнение № 4. Инструмент Pencil Рис. 14. Результат работы с инструментом Pencil при различных настройках (верхний ряд треугольников — режим Straighten, нижний — Ink) Инструмент Pencil (Карандаш) расположен под инструментом Oval. На рис. 14 показан результат работы с карандашом при разных вариантах его настройки, которых всего предлагается три. При варианте настройки Straighten инструмент превращает дрожащие линии контура, проведенного от руки, в прямые, при варианте настройки Smooth — сглаживает линии, а в режиме Ink — практически не меняет исходный контур. Упражнение №5. Редактирование линий, инструменты выделение и подвыделение (Selection и Subselection) Для того чтобы рассказать о том, как функционирует инструмент Selection , следует более подробно рассмотреть структуру контурной линии. 1. Проведем линию с помощью инструмента Pencil, как показано на рис. 15. Она состоит из контура и обводки линии. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 17 - Рис. 15. С помощью инструмента Selection можно выделить опорные точки и сегменты контурной линии Рис. 16. Пример перемещения угловой точки ИЗУЧАЕМ MACROMEDIA FLASH 8 - 18 - Рис. 17. Пример изменения кривизны контура ИЗУЧАЕМ MACROMEDIA FLASH 8 - 19 - Рис. 18. Линия обводки следует за линией контура 2. До сих пор, говоря о контуре, мы не упоминали о его структуре. Для того чтобы пояснить структуру контурной линии, воспользуемся инструментом Subselection (Частичное выделение), активизированном на рис. 15, и щелкнем им по контуру линии. В результате мы увидим, что контурная линия состоит из сегментов и опорных точек (рис. 15). При использовании инструмента Pencil сегменты и опорные точки создаются автоматически. Когда мы редактируем линию контура, автоматически меняется линия обводки. Покажем, как можно редактировать линию контура с помощью инструмента selection (Стрелка) — он выделен на рис. 16. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 20 - Опорные точки бывают угловые и гладкие. Когда мы подводим инструмент Selection к линии, его вид меняется. При приближении его к угловой точке рядом с изображением стрелочки появится угол — в этом режиме можно перемещать угловые точки (рис. 16), а при приближении к сегменту или к гладкой точке — изображение дуги — в этом режиме можно менять кривизну контура (рис. 17). При изменении контурной линии линия обводки следует за линией контура (рис. 18). 3. Далее рассмотрим возможности модификации выделенных фигур. Для выделения объектов применяются инструменты selection и Lasso (Лассо). Нарисуйте эллипс и с помощью инструмента selection выделите его заливку одним щелчком мыши (цвет выделенной заливки будет осветлен белыми точками) и переместите ее в режиме dragand-drop, как показано на рис. 19. Если вы используете двойной щелчок, то будет выделяться также прилегающая к заливке линия обводки. Двойной щелчок позволяет также выделять пересекающиеся линии. Рис. 19. Пример перемещения выделенного объекта инструментом Selection ИЗУЧАЕМ MACROMEDIA FLASH 8 - 21 - Рис. 20. Исходное изображение 4. Рассмотрим другие виды модификации выделенного изображения. Нарисуйте с помощью инструмента Pencil некий контур, например листок (рис. 20). Выберите инструмент selection и выделите нарисованный листок в прямоугольную рамку. Теперь вы можете обрабатывать выделенный объект доступными модификаторами. На панели Options выберите кнопку Smooth и щелкните на ней несколько раз — контур листка приобретет более плавные очертания (рис. 21а). ИЗУЧАЕМ MACROMEDIA FLASH 8 Рис. 21. Использование модификаторов с панели Options: а) Smooth позволяет сгладить контуры изображения; б) Strighten дает возможность спрямить контуры изображения Изменения контура после нескольких щелчков по кнопке Strighten показаны на рис. 21б. 5. Используя инструмент Lasso, можно выделить область произвольной формы (рис. 22). - 22 - ИЗУЧАЕМ MACROMEDIA FLASH 8 Рис. 22. Пример выделения с помощью инструмента Lasso - 23 - ИЗУЧАЕМ MACROMEDIA FLASH 8 - 24 - Упражнение № 6. Инструмент Brush Рис. 23. Пример работы с инструментом Brush 1. Инструмент Brush (Кисть) создает векторный контур и его заливку выбранным цветом, но, в отличие рассмотренных ранее инструментов, не образует линию обводки (рис. 23). Для того чтобы понять, какой контур создает инструмент Brush, посмотрите на рис. 24, где использован инструмент Subselect. Рис. 24. Пример контурной линии, созданной инструментом Brush ИЗУЧАЕМ MACROMEDIA FLASH 8 - 25 - Рис. 25. Варианты настройки инструмента Brush 2. На панели Options предусмотрены три варианта настройки инструмента Brush: режимы (верхняя кнопка), размеры кисти (средняя кнопка) и форма кисти (нижняя кнопка) (рис. 25). Режимы определяют характер взаимодействия проводимой линии с уже нарисованным объектом (рис. 26). Как видно из рисунка при проведении однотипных горизонтальных линий в разных режимах, закрашивание происходит по-разному: • Paint Normal — закрашиваются пространство кадра линия обводки и заливка закрашиваемого объекта; • Paint Fills — закрашивается пространство кадра и заливка закрашиваемого объекта. Линия обводки не закрашивается; • Paint Behind — закрашивается только свободное пространство кадра; • Paint Selection — закрашивается только выделенная область; • Paint Inside — закрашивается только заливка, с которой было начато закрашивание. Рис. 26. Разные режимы взаимодействия мазков кисти с нарисованным ранее объектом ИЗУЧАЕМ MACROMEDIA FLASH 8 - 26 - 3. Нарисуй свой рисунок и закрась его. Пример на рис. 27. Рис. 27 Рисунок Упражнение № 7. Ластик Ластик позволяет стирать линии и заливку и имеет ряд различных настроек. В панели Options можно настроить размер и форму ластика, а также выбрать режим стирания (рис. 29): • Erase Normal — стирается линия обводки и заливка объекта; • Erase Fills — стирается заливка объекта (линия обводки не стирается); • Erase Lines — стираются только линии; • Erase Selected Fills — стирается только выделенная область. • Erase Inside — стирается только заливка, причем при проведении ластиком линии стирание производится только внутри контура, в котором была начата линия. Модификатор Faucet (Кран) позволяет удалять полностью заливку или линию. Рис. 29. Разные режимы действия ластика Упражнение № 8. Инструмент Pen До сих пор мы рассматривали инструменты, которые автоматически создавали контуры. Инструмент Pen (Перо) позволяет непосредственно работать с контурами. С его помощью можно создавать прямые и изогнутые сегменты, регулировать длину прямых и наклон изогнутых сегментов. 1. Линейная опорная точка Выберите инструмент Pen, щелкните мышью (вы поставили первую опорную точку), переместите курсор, щелкните мышью (это вторая опорная точка). В результате получится ломаная, ИЗУЧАЕМ MACROMEDIA FLASH 8 - 27 - как на рис. 30. Опорные точки, показанные на рис. 30, называются линейными, так как сходящиеся в них сегменты — линейные. Линейная точка не имеет направляющих. Рис. 30. Пример построения ломаной линии с помощью инструмента Pen 2. Гладкая опорная точка Рис. 31. Пример построения гладкой кривой с помощью инструмента Pen 2.1. Для того чтобы поставить гладкую опорную точку, выберите инструмент Pen, нажмите левую кнопку мыши и, не отпуская ее, слегка переместите мышь, в результате появятся гладкая опорная точка и выходящая из нее направляющая линия (рис. 31). Поворачивая и удлиняя направляющую линию, можно менять кривизну очередного сегмента. 2.2. Для создания незамкнутого контура необходимо выполнить двойной щелчок мышью по последней точке. Отпустив клавишу мыши, переместите курсор и поставьте следующую опорную точку; повторяя эту процедуру, можно получить гладкую линию, как на рис. 31. 2.3. Чтобы замкнуть контур, приблизьте курсор к начальной опорной точке или к линии контура. После того как курсор примет вид пера с кружочком, щелкните мышью — и контур замкнется. 2.4. Если в точке соединяются два независимых сегмента, то она является угловой. Например, если соединить прямолинейный и криволинейный сегменты, то на их пересечении появится угловая точка (рис. 32). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 28 - Рис. 32. На пересечении прямолинейного и криволинейного сегментов образуется угловая точка Узловые точки можно преобразовывать, перемещать и удалять. 2.5. Для преобразования угловой точки в гладкую выберите инструмент Subselection. Щелкните мышью по угловой точке и, удерживая клавишу Alt, перетащите точку — она станет гладкой, и появится направляющая линия, позволяющая менять кривизну сегментов, соединяющихся в данной гладкой точке (рис. 33). Рис. 33. Пример преобразования угловой точки в гладкую По умолчанию выделенные гладкие точки кривой отображаются как полые точки, а выделенные угловые точки — как полые квадраты. Использование инструментов Pen и Subselection для работы с опорными точками Вид преобразования Преобразовать гладкую точку в угловую Добавить узловую точку Действие Щелкните инструментом Pen на этой точке Щелкните инструментом Pen на сегменте ИЗУЧАЕМ MACROMEDIA FLASH 8 - 29 - Удалить угловую точку Удалить гладкую точку Щелкните инструментом Pen на точке Дважды щелкните инструментом Pen на точке Выберите точку инструментом Subselection и нажмите Удалить узловую точку клавишу Delete 2.6. Аналогично можно создавать точки на линиях, проведенных другими инструментами рисования Flash: Pencil, Brush, Line, Oval, Rectangle, и регулировать эти линии. В частности, на рис. 34 показан контур, полученный с помощью инструмента Oval путем превращения одной гладкой точки в угловую (с помощью инструмента Pen) и перетаскивания угловой точки посредством инструмента Subselection. Рис. 34. Контур, полученный с помощью инструмента Oval путем превращения одной гладких точек в угловую и перетаскивания ее Упражнение № 9. Инструмент Dropper Инструмент Dropper (Пипетка) служит для копирования цвета и стиля карандашных линий, режима кисти и заливок. Когда вы подводите пипетку к линии, вид курсора меняется — под пипеткой появляется мини-пиктограмма карандаша. При щелчке пипеткой по линии копируются все параметры линии (цвет, толщина, стиль) и пипетка заменяется на инструмент Ink Bottle, который позволяет применить все эти настройки для другой линии. Аналогично, когда курсор находится над заливкой, под пипеткой появляется изображение ковша, а когда курсор находится над мазком кисти — под пипеткой появляется изображение кисти. Данные пиктограммы показывают, какие атрибуты вы копируете инструментом Dropper. Упражнение № 10. Инструмент Paint Bucket Мы уже упоминали инструмент Paint Bucket (Ковш заливки) — он выделен на рис. 35, теперь рассмотрим его возможности подробнее. Этот инструмент применяется для заливки замкнутых (и не полностью замкнутых) областей цветом, градиентной и растровой заливкой. 1. Если вы работали с заливкой растровых изображений в программе Photoshop, то, вероятно, вам знакома ситуация, когда заливка «выливается» за край не очень аккуратно прорисованных контуров в тех местах, где есть «дырки». Во Flash возможны несколько режимов настройки инструмента заливки, позволяющие избежать вышеописанного дефекта. Возможны четыре варианта настройки этого инструмента: • Don’t Close Gaps — не закрывать промежутки; • Close Small Gaps — закрывать маленькие промежутки; • Close Medium Gaps — закрывать средние промежутки; • Close Large Gaps — закрывать большие промежутки. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 30 - Выберите инструмент Pencil и нарисуйте незамкнутый контур (рис. 35). Выберите режим Close Large Gaps и залейте контур. Как видно из рис. 35, заливка остается внутри контура, даже несмотря на то, что изначальный контур был незамкнутым. Рис. 35. Пример замыкания контура в режиме Close Large Gaps 2. А теперь рассмотрим градиентную заливку и операции с ней. Выберите Window-Color Mixer (Shift+F9), справой стороны откроется панель инструментов Color, выберите вариант заполнения — Linear (Линейный градиент). Затем нарисуйте прямоугольник, заполните его линейной заливкой с линейным градиентом, а внутри большого прямоугольника нарисуйте прямоугольник поменьше (рис. 36). 3. Как видно на этом рисунке, в малом прямоугольнике переход от желтого к синему реализуется на меньшем градиенте. Если же применить функцию Lock Fill и выполнить заливку обоих прямоугольников, то получится картинка, как на рис. 37. То есть градиент во внутреннем и внешнем прямоугольнике будет одинаковым. Lock Fill Рис. 36. Градиентная заливка в режиме, когда параметр Lock Fill не активизирован ИЗУЧАЕМ MACROMEDIA FLASH 8 - 31 - Lock Fill Рис. 37. Градиентная заливка в режиме, когда параметр Lock Fill активизирован 4. Инструмент Paint Bucket (ковш заливка) позволяет также заливать замкнутый контур и растровым изображением. Продемонстрируем, как выполняется данная процедура на простом примере. Нарисуйте при помощи инструмента Rectangle (прямоугольник) изображение монитора, в экран которого будет вставляться растровое изображение (рис. 39). Рис. 39. Векторное изображение монитора, в которое будет помещаться растровое изображение фотографии 5. Далее перейдите в панель Color и поменяйте способ заливки на растровый — Bitmap, кликните на клавишу Import, выберите любое изображение (рис. 40). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 32 - Рис. 40. Панель Color, вкладка Bipart 6. Для того чтобы редактировать растровую заливку, необходимо в панели Options щелкнуть на кнопке Gradient Transform (она нажата на рис. 42), а после этого — на растровой заливке, в результате появится рамка с маркерами (рис. 42). Gradient Transform Рис. 42. Рамка модификации растровой заливки ИЗУЧАЕМ MACROMEDIA FLASH 8 - 33 - Пользуясь центральным маркером, растровое изображение можно перетащить так, чтобы на нарисованном мониторе отображалась нужная часть фотографии (рис. 43). Рис. 43. Перемещая центральный маркер, можно кадрировать растровое изображение Упражнение № 11. Сложение и вычитание фигур Когда две фигуры накладываются одна на другую, Flash либо объединяет, либо сегментирует их. 1. Нарисуйте две одноцветные фигуры — круг и прямоугольник (рис. 46), выделите прямоугольник (щелкнув по нему инструментом selection), а затем наложите прямоугольник на круг и уберите с него выделение (щелкнув повторно по нему инструментом selection). Рис. 46. Исходные фигуры В результате произойдет объединение двух фигур в одну. Щелкнув по контуру полученной фигуры инструментом selection, можно убедиться, что внутренний контур исчез (рис. 47). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 34 - Рис. 47. Пример объединения двух одноцветных фигур 2. Теперь проделайте ту же процедуру с фигурами разного цвета. В этом случае внутренняя граница не исчезнет (рис. 48). Рис. 48. При наложении фигур разного цвета внутренний контур не исчезает 3. Теперь если выделить прямоугольник и переместить его с помощью инструмента selection, то из круга будет вырезана часть, как показано на рис. 49. Рис. 49. Часть круга вырезана прямоугольником Иногда для получения сложного контура полезно использовать объединение и вычитание контуров фигур. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 35 - Урок 2. Создание статических изображений Упражнение № 1. Трансформация объектов Упражнение № 2. Модификация фигур Упражнение № 3.Привязка объекта к сетке и к другим объектам Упражнение № 4. Группировка объектов Упражнение № 5. Выравнивание и распределение объектов Упражнение № 6. Перевод растрового изображения в векторное Большинство пользователей думают, что программа Flash предназначена исключительно для создания анимации — динамических изображений, что вполне логично. Однако не следует забывать, что Flash имеет мощные инструменты и для создания статических изображений. Flash позволяет рисовать статические изображения (этим мы занимались на прошлом уроке), составлять их из готовых элементов, модифицируя различным образом, переводить соответствующие растровые изображения в векторные. При этом статические изображения вовсе не обязательно рассматривать как заготовку для мультфильма. Flash — это универсальная программа, которая предоставляет большой набор инструментов для создания различных изображений. Знакомиться с ними мы продолжим и на данном уроке. Упражнение № 1. Трансформация объектов Любой выделенный элемент можно модифицировать: изменить его масштаб, осуществить поворот, зеркальное отображение относительно горизонтальной и вертикальной оси, а также сдвиг. 1. Рассмотрим все это на примере. Предположим, что вы нарисовали человечка и вас не устраивают размеры отдельных элементов на его лице (рис. 1). Вовсе не обязательно перерисовывать все заново. Можно модифицировать отдельные элементы изображения. Во-первых, любой элемент можно повернуть. Для этого выделяем глаз с помощью инструмента Selection и выполняем команду Modify > Free Transform, в результате вокруг выделенного объекта появляются маркеры (рис. 1). Ту же самую операцию можно осуществить, воспользовавшись кнопкой Free Transform( она отжата на рисунке 1). Четыре угловых маркера позволяют осуществлять поворот, а остальные четыре — сдвиг. Рис. 1. Любой элемент изображения можно модифицировать ИЗУЧАЕМ MACROMEDIA FLASH 8 - 36 - Взявшись за верхний правый маркер, можно осуществить поворот выделенного изображения, а за верхний средний маркер — сдвиг (рис. 2). 2. Если вам необходимо повернуть объект на определенный угол, можно воспользоваться командой Modify > Transform > Scale and Rotate, которая позволяет точно указать в градусах, на какой угол необходимо повернуть объект (рис. 3). Рис. 2. Пример выполнения сдвига Рис. 3. Пример выполнения поворота выделенного элемента 3. Теперь рассмотрим действие команды Scale. Для примера изменим размер носа человечка. Выделим этот элемент и выполним команду Modify > Transform > Scale. Вместо этого можно воспользоваться кнопкой Scale, находящейся в панели Options (она нажата на рис. 4). Рис. 4. Перемещая маркеры, можно масштабировать выделенный элемент ИЗУЧАЕМ MACROMEDIA FLASH 8 - 37 - Выделенный объект будет обрамлен прямоугольными маркерами. Угловые маркеры позволяют менять масштаб по обеим осям (вертикальной и горизонтальной) одновременно, левый и правый маркеры позволяют менять масштаб только по горизонтальной оси, а верхний и нижний — по вертикальной (рис. 4). 4. Доступна также функция вертикального переворота (Flip Vertical), позволяющая зеркально отобразить выделенный элемент относительно горизонтальной оси. Например, выделим нашему герою рот с помощью инструмента Selection и выполним команду Modify > Transform > Flip Vertical, в результате явно пессимистичное выражение лица станет оптимистичным (рис. 5). Рис. 5. Зеркальное отображение линии рта с помощью Flip Vertical меняет настроение 5. Теперь к тому же объекту применим преобразование Flip Horizontal, которое соответственно выполняет горизонтальный поворот (зеркальное отображение относительно вертикальной оси). В результате человечек будет выглядеть как на рис. 6. Рис. 6. Зеркальное отображение линии рта с помощью Flip Horizontal ИЗУЧАЕМ MACROMEDIA FLASH 8 - 38 - Упражнение № 2. Модификация фигур Не все фигуры легко нарисовать от руки, а, например, фигуру с градиентным смягчением краев вручную нарисовать практически невозможно. Впрочем, Flash позволяют создавать подобные эффекты одним щелчком мыши. 1. Продолжим знакомство с функциями, доступными в ниспадающем меню пункта Modify, и поговорим о функциях панели Shape. Форму фигур можно изменять, преобразовывая линии в заполненные области, расширяя форму заполненного объекта или смягчая грани заполненной фигуры, изменяя кривые линии фигуры. Рассмотрим все эти возможности на простых примерах. Для того чтобы смягчить грани объекта, выберем заполненную форму, например прямоугольник с заливкой синего цвета, и выполним команду смягчения краев заполнения: Modify > Shape > Soften Fill Edges. Прямоугольник примет вид как на рис. 7. В зависимости от параметров настройки (Distance — ширина в пикселах смягченной грани, Number of Steps — параметр, определяющий количество кривых, используемых для смягчения грани, Expand/Inset — параметры, определяющие режим увеличения/уменьшения фигуры при смягчении граней) можно добиться различных эффектов. Рис. 7. Пример использования команды смягчения граней объекта Рис. 8. Эллипс с линией обводки большой толщины Рассмотрим, как преобразовать линии в закрашиваемые области. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 39 - 2. Нарисуем эллипс (для наглядности выберем большую толщину линии обводки и радиальную градиентную заливку) — рис. 8. Выделим линию обводки и выполним команду преобразования линий в области: Modify > Shape > Convert Lines to Fills. Линия обводки стала областью и может быть заполнена градиентной заливкой (рис. 9). Рис. 9. Линия обводки стала областью и может быть заполнена градиентной заливкой 3. Для того чтобы продемонстрировать возможности функции расширения фигуры, покажем, как быстро нарисовать треугольник со скругленными вершинами. Нарисуем треугольник, как показано на рис. 10, и выполним команду: Modify > Shape > Expand Fill. В диалоговом окне Expand Fill укажите в пикселах значение расстояния расширения (Distance) — 44 пиксела и включите переключатель Expand (определяет режим увеличения фигуры). Рис. 10. Панель Expand Fill В результате получим треугольник со скругленными углами (рис. 11). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 40 - Рис. 11. Треугольник со скругленными углами, полученный с помощью команды Expand Fill Упражнение № 3. Привязка объекта к сетке и к другим объектам 1. Для того чтобы автоматически выровнять элементы относительно друг друга, можно использовать функцию привязки (snapping). Выберите команду View > Grid и активизируйте функцию Show Grid. Выберите команду View > Snaping и активизируйте функцию Snap to Grid. Далее нарисуйте круг (рис. 12), выделите его заливку, подведите инструмент Selection к центру круга, щелкните левой кнопкой мыши и перетаскивайте окружность по экрану. Программа будет показывать центр круга в виде маленького кружочка, который будет «прилипать» к пересечениям сетки по мере его перемещения по экрану. Рис. 12. Привязка центра круга к сетке Причем даже если вы будете помещать одну окружность на другую, индикатор будет показывать места привязки сквозь фигуру (рис. 13). Рис. 13. Индикатор показывает место привязки и сквозь фигуру (другой круг) Таким образом можно легко нарисовать несколько концентрических кругов. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 41 - 2. Теперь рассмотрим, как привязывать окружность не к сетке, а к объектам. В качестве примера нарисуем фигуру, полученную привязкой центров окружностей к вершинам прямоугольника (рис. 14). Рис. 14. Фигура, полученная привязкой центров окружностей к вершинам прямоугольника Выберите инструмент Selection, щелкните по кнопке Snap в панели Options — эта кнопка с изображением магнита показана нажатой на рис. 14. Эту же команду можно вызвать через меню, выполнив команду View > Snaping > Snap to Objects. Перетаскивайте окружность, держа ее за центр, к вершине прямоугольника — маленький кружочек (указатель центра) будет увеличиваться, показывая тем самым, что окружность можно привязать к вершине прямоугольника. После того как вы привязали круг к одной из вершин (рис. 15), выполните команду Edit > Copy, Edit > Paste и повторите процедуру, пока не получится фигура как на рис. 14. Рис. 15. Привязка центра круга к вершине прямоугольника 3. Рссмотрим еще один пример, иллюстрирующий возможности функции привязки к объектам. Необходимо создать фигуру путем копирования и вращения эллипса вокруг центра с поворотом на 15° (рис. 16). Нарисуйте эллипс, выделите его с помощью инструмента Selection и нажмите на кнопку Snap. Теперь по мере вращения объекта маркер поворота будет указывать (маленький кружок будет меняться на большой), что вы достигли угла поворота, кратного 15°. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 42 - Рис. 16. Пример построения фигуры из эллипсов путем их поворота на 15° Упражнение № 4. Группировка объектов Во всех фигурах, которые мы рисовали, каждый элемент являлся отдельным объектом. Например, в окружности мы могли отдельно выбирать и перемещать заливку или линию. Для того чтобы получить единый объект, составляющие его элементы (объекты) необходимо сгруппировать. Выделите объекты, которые вы хотите группировать, и выполните команду Modify > Group. Группирование позволяет предохранить объект от случайных изменений. Рис. 21. Сгруппированный объект можно трансформировать, но нельзя редактировать его линии ИЗУЧАЕМ MACROMEDIA FLASH 8 - 43 - Сгруппированный объект можно масштабировать и трансформировать (рис. 21), но если вы попробуете отредактировать линии объекта с помощью элементов Selection или Subselect, то эти команды окажутся недоступными. Однако если выполнить команду Modify > Ungroup, то редактирование вновь станет доступным. Аналогично можно сгруппировать несколько объектов и трансформировать сгруппированный объект как одно целое (рис. 22). Рис. 22. Можно сгруппировать несколько объектов Упражнение № 5. Выравнивание и распределение объектов Различные операции по выравниванию и распределению графических объектов в кадре сконцентрированы в панели Align, доступ к которой осуществляется щелчком по соответствующей кнопке (расположена на верхней панели, нажата на рис. 23). Align Рис. 23. Панель Align ИЗУЧАЕМ MACROMEDIA FLASH 8 - 44 - Кнопки панели Align позволяют выравнивать объекты друг относительно друга, распределять их в пространстве кадра и менять их размеры, подгоняя габариты объектов. Рассмотрим различные группы кнопок. Группа кнопок Align (Выравнивание) Кнопки этой группы служат для выравнивания объектов относительно друг друга. Продемонстрируем их работу на примере объектов, показанных на рис. 23. Выделите выравниваемые объекты и щелкните на кнопке выравнивания по левому краю (первая в верхнем ряду) — все выделенные объекты сместятся, как показано на рис. 24: левые стороны их габаритных контейнеров выровняются по самому левому из группы. Рис. 24. Выравнивание по левому краю Рис. 25. Выравнивание по правому краю Аналогично выравниванию по левому краю выполняется выравнивание по правому краю (рис. 25). Доступно также выравнивание по вертикальной оси по верху, по горизонтальной оси и по низу. Группа кнопок Distribute (Распределение) В данной группе имеется шесть кнопок для распределения элементов по вертикали и по горизонтали. Не будем рассматривать назначение каждой из них, надеемся, читатели разберутся ИЗУЧАЕМ MACROMEDIA FLASH 8 - 45 - самостоятельно. Лучше рассмотрим пример. Предположим, необходимо распределить с равными промежутками по вертикали ряд кнопок (рис. 26). Выделите их и щелкните по кнопке распределения по верхнему краю Distribute top edge (она выделена на рис. 27). Рис. 26. Исходное неравномерное положение кнопок В результате элементы распределятся, как показано на рис. 27. Рис. 27. Кнопки выровнены по вертикали с распределением по верхнему краю ИЗУЧАЕМ MACROMEDIA FLASH 8 - 46 - Аналогично, возможно распределение по нижнему краю, по горизонтальной оси, по левому краю, по вертикальной оси и по правому краю. Группа кнопок Match Size (Выровнять размер) Данные кнопки позволяют привести несколько элементов к одному размеру. Рис. 28. Исходные объекты разного размера На рис. 28 показаны четыре элемента, которые нужно привести к одинаковым размерам по вертикали и горизонтали. Добиться этого можно, щелкнув по кнопке Match width and height (нажата на рис. 29). Рис. 29. С помощью кнопки Match width and height все объекты можно привести к одинаковым размерам по вертикали и по горизонтали. С остальными параметрами вы легко разберетесь самостоятельно. Упражнение № 6. Перевод растрового изображения в векторное 1. Для перевода растрового изображения в векторное необходимо импортировать растровое изображение по команде File > Import > Import to Stage…, затем выделить импортированное изображение и выполнить команду Modify > Bitmap > Trace Bitmap — в результате появится одноименная панель (рис. 30). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 47 - Рис. 30. Панель Trace Bitmap В панели Trace Bitmap задайте порог цвета (Color Threshold), который может изменяться в пределах от 1 до 500. Этот параметр ограничивает количество цветов в результирующем векторном изображении. Чем меньше параметр Color Threshold, тем более полноцветным и подробным будет трассированное изображение. Затем необходимо задать параметр минимальная область (Minimum Area), который может изменяться в пределах от 1 до 1000 и определяет размер минимальной области, обводимой контуром. Параметр Curve Fit задает точность, с которой контур огибает область, ограниченную цветом. Чем выше точность, тем больше соответствие с исходным растровым изображением, но тем больше «весит» результирующий файл. Самый точный режим огибания — пиксельный (Pixels), самый грубый — Very Smooth (очень гладко). Параметр Corner Threshold (порог углов) определяет, насколько подробно описываются углы. Этот параметр влияет на количество опорных точек в результирующем векторном рисунке. При указанных на рис. 30 параметрах на панели Trace Bitmap получится векторное изображение, близкое к растровому (рис. 30). 2. Теперь попробуйте оптимизировать изображение, выполнив команду Modify > Shape > Optimize, что приведет к появлению панели Optimize Curves (рис. 31). Данная панель позволяет менять количество линий и опорных точек, на базе которых строится изображение. Варьируя параметры панели Optimize Curves, можно добиться оптимального соотношения «объем файла/качество изображения» (рис. 32). Рис. 31. Панель Optimize Curves ИЗУЧАЕМ MACROMEDIA FLASH 8 - 48 - Рис. 32. Векторное изображение после оптимизации количества кривых трассировки Используя инструмент Subselect, можно просмотреть кривые трассировки (рис. 33). Рис. 33. Инструмент Subselect дает возможность увидеть результат трассировки Качество изображения снижается по мере уменьшения количества кривых трассировки и увеличения их гладкости, однако, подбирая параметры перевода растрового изображения в векторное, можно создавать лаконичные векторные изображения, которые могут быть даже интереснее и выразительнее исходных растровых. Вот несколько интересных результатов, иллюстрирующих, как можно создавать композиции путем перевода растровых изображений в векторные (рис. 34, 35 и 36). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 49 - Рис. 34. Изображение, полученное с помощью программы Flash Рис. 35. При переводе растрового изображения в векторное оставлены четыре цвета, которые после трассировки изменены. Детали дорисованы вручную Рис. 36. При переводе в векторное изображение оставлены шесть цветов ИЗУЧАЕМ MACROMEDIA FLASH 8 - 50 - Работа с текстом в Macromedia Flash MX Professional 2004 Упражнение № 1. Создание статического текста 1. Расширяемый горизонтальный текст 2. Статический горизонтальный текст заданной ширины 3. Статический вертикальный текст 4. Использование device-шрифтов (только для горизонтального текста) Упражнение № 2. Форматирование текста 1. Установка выравнивания, полей, абзацных отступов и межстрочного интервала 2. Настройка режима, при котором пользователю разрешено выделение текста (только для горизонтального текста) 3. Редактирование текста 4. Связывание текста с URL 5. Преобразование и разбиение текста Добавлять текст в Macromedia Flash MX 2004 и Macromedia Flash MX Professional 20041 можно несколькими способами. Вы можете создать текстовые блоки, содержащие статический текст (static text) — текст, содержание и внешний вид которого вы определяете, когда создаете документ. Вы также можете создать динамический текст (dynamic text) — текст, динамически изменяющийся во время воспроизведения ролика, например такой текст может отображать счет в игре или биржевые сводки. Можно также создать текст для поля ввода Input Text Fields. Поле ввода позволяет пользователям вводить текст в интерактивные формы. С помощью подобного поля пользователь может передать информацию на сервер. Поля текстового ввода позволяют вводить текст в формы, отчеты и т.д. В данном уроке речь пойдет только о статических текстах, о динамическом тексте и тексте для полей ввода мы поговорим в других уроках. Статический текст можно ориентировать не только горизонтально (слева направо), но и вертикально (как слева направо, так и справа налево). Flash MX позволяет применять все основные элементы форматирования (менять шрифт, размер текста, стиль, цвет, трэкинг, кернинг, сдвиг базовой линии, выравнивание, поля, отступы и т.д.). Текст можно изменять так же, как обычный объект, — поворачивать, масштабировать, применять к нему деформацию сдвига, делать зеркальное отображение текста и т.д., и при этом у вас останется возможность редактировать его как текст. Горизонтальным текстовым блокам можно давать ссылки на заданный URL. Текст можно перевести в графическое представление и затем применять к буквам (как к графическим объектам) все виды графических преобразований. Итак, рассмотрим эти возможности по порядку. Упражнение № 1. Создание статического текста Для создания текста выберите инструмент Text (кнопка с буквой А — она показана нажатой на рис. 1) и выполните команду Window => Properties > Properties. В результате появится одноименная панель. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 51 - Рис. 1. Инструмент Text и панель Properties В левой части панели Properties находится выпадающее меню (на рис. 1 оно выделено светлым эллипсом), в котором можно выбрать тип текстового поля: Static Text (Статический текст), Dynamic Text (Динамический текст) или Input Text (Поле ввода). Выберите вариант Static text. Программа Flash позволяет создавать разные виды статических текстовых полей, рассмотрим их последовательно. 1. Расширяемый горизонтальный текст Для создания расширяемого горизонтального текста выберите инструмент Тext, щелкните на рабочем поле (появится текстовый блок, в правом верхнем углу которого имеется круглый маркер), по мере ввода текста блок расширяется (рис. 2). Рис. 2. Горизонтальный текст, расширяемый по мере ввода 2. Статический горизонтальный текст заданной ширины Для создания статического горизонтального текста заданной ширины выберите инструмент Тext, щелкните мышью и, удерживая нажатой левую кнопку, перетащите курсор для задания нужной ширины текстового блока. В правом верхнем углу текстового блока располагается квадратный маркер. Текстовый блок имеет фиксированную длину. Текст выравнивается под эту длину путем автоматического переноса (рис. 3). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 52 - Рис. 3. Статический горизонтальный текст заданной ширины Если вы хотите поменять ширину текстового блока, потяните за маркер — перенос слов в тексте и высота текстового блока поменяются автоматически (рис. 4). Рис. 4. При изменении ширины текстового блока происходит автоматический перенос слов 3. Статический вертикальный текст Для того чтобы располагать текст вертикально, щелкните по иконке с буквами Abcd (рис. 5). В результате появится панель, где можно выбрать варианты Vertical, Left to Right (при этом текст будет заполняться, как показано на рис. 5) либо Vertical, Right to left (в этом случае текст будет заполняться вертикально справа налево). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 53 - Рис. 5. Пример вертикального текстового блока 4. Использование device-шрифтов (только для горизонтального текста) По умолчанию шрифты встраиваются в результирующий файл Flash-ролика. Когда вы создаете статический текст, то можете указать, чтобы Flash Player применял device-шрифты для отображения определенных текстовых блоков. Использование device-шрифтов позволяет уменьшить размер результирующего файла вашего документа, поскольку документ не содержит лишней информации о данном шрифте. Применение device-шрифтов позволяет также увеличить четкость текста при размерах меньше 10 пунктов. Для того чтобы определить, что текст должен отображаться с использованием device-шрифтов, необходимо выделить текстовый блок, в панели Properties выбрать режим Static Text и поставить флажок Use Device Fonts (на рис. 8 он выделен светлым эллипсом). Рис. 8. Использование device-шрифтов Упражнение №2. Форматирование текста 1. При выборе шрифта из выпадающего меню (рис. 9) в панели справа отображается его начертание. Рядом с панелью выбора шрифта располагаются кнопки, которые позволяют задать размер шрифта, сделать текст полужирным или курсивным и выбрать цвет заливки текста. Интерфейс данных кнопок реализован так же, как и в программе Word, и не требует пояснений. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 54 - Рис. 9. Выбор шрифта 2. Для того чтобы изменить межсимвольный интервал, щелкните по стрелке вниз рядом с полем Character Spacing (рис. 10) и передвиньте движок или просто введите нужное значение в поле ввода. Рис. 10. Пример изменения межсимвольного интервала 3. Чтобы разместить текст выше или ниже базовой линии, щелкните по стрелке вниз рядом с полем Character Position (рис. 10) и выберите требуемое размещение из меню: вариант Normal — размещение текста по базовой линии, Superscript — текст находится выше базовой линии (для горизонтального текста) или правее ее (для вертикального текста), Subscript — текст располагается под базовой линией (для горизонтального текста) или левее ее (для вертикального текста). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 55 - Рис. 11. Смещение текста от базовой линии в верхний и нижний регистры Текст сверху напечатан в режиме Subscript, а нижний в режиме Superscript 4. Установка выравнивания, полей, абзацных отступов и межстрочного интервала Иконки выравнивания текста по левому краю, по центру и по правому краю выглядят так же, как и в программе Word, а потому их назначение вам будет понятно. Для того чтобы настроить параметры Indent (Отступ), Line Spacing (Межстрочное расстояние), Left Margin (Левое поле) и Right Margin (Правое поле), щелкните по кнопке Format Options и установите нужные значения в соответствующих полях (рис. 12). Рис. 12. Панель настройки отступа, межстрочного расстояния, левого и правого полей ИЗУЧАЕМ MACROMEDIA FLASH 8 - 56 - 5. Настройка режима, при котором пользователю разрешено выделение текста (только для горизонтального текста) Для того чтобы разрешить пользователю выделять текст в результирующем документе, выделите горизонтальный текст, выберите режим Static Text, установите флажок Use Device Fonts (Использовать device-шрифты) и щелкните по кнопке Selectable (на рис. 13 она выделена светлым эллипсом). Выполнив команду Control => Test Scene, можно убедиться, что текст в результирующем документе действительно можно выделять. Рис. 13. Кнопка Selectable (выделена светлым эллипсом) 6. Редактирование текста При редактировании текста во Flash можно пользоваться теми же приемами, что и при работе в большинстве текстовых редакторов. Можно использовать команды Cut, Copy и Paste как для перемещения текста внутри программы Flash, так и для обмена текстом с другими приложениями. Чтобы выделить текстовый блок, выберите инструмент Selection и щелкните по текстовому блоку. Для одновременного выделения нескольких блоков, щелкайте по ним при нажатой клавише Shift (рис. 14). Рис. 14. Выделения текстовых блоков ИЗУЧАЕМ MACROMEDIA FLASH 8 - 57 - 7. Связывание текста с URL Сразу отметим, что связывание текста с URL возможно только для горизонтального текста. Напечатайте текст, например «связывание текста с URL», как на рис. 15. Выделите напечатанный текст и в поле ссылки наберите URL-ссылку в нашем примере http://www.hownetworks.boom.ru, а затем выполните команду Control => Тest Scene и щелкните мышью по надписи — загрузится соответствующая Web-страничка. Рис. 15. Связывание текста с URL 8. Преобразование и разбиение текста Текстовые блоки можно преобразовывать точно так же, как и другие объекты, — масштабировать, поворачивать, искажать и зеркально отображать. При масштабировании текстового блока как объекта увеличение или уменьшение размера шрифта не отражается в панели Properties. Как видно на рис. 16, мы увеличили размер букв в надписи, однако в панели Properties размер шрифта в пунктах указан прежний — 53 пункта. Рис. 16. Трансформирование текстового блока 9. Текст можно разбивать на отдельные текстовые блоки, а также преобразовывать в графику (то есть превращать в линии и области заливки). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 58 - Чтобы разбить текст, щелкните инструментом Selection на текстовом блоке и выполните команду Modify => Break Apart. В результате все символы будут помещены в отдельные текстовые блоки (рис. 17). Рис. 17. Текст, разбитый на отдельные текстовые блоки Вы можете выделить инструментом Selection каждый символ и переместить его. Однако символы можно по-прежнему редактировать как элементы текста. Например, вы можете выделить инструментом Selection все символы и изменить гарнитуру или размер шрифта (рис. 18). Рис. 18. Пример изменения шрифта для всех текстовых блоков Но если повторно выполнить команду Modify => Break Apart, то буквы превратятся в линии и заливки. После такого преобразования символы можно будет редактировать только как графические объекты. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 59 - САМОСТОЯТЕЛЬНАЯ РАБОТА № 1 Задания 1. Нарисуйте следующие изображения по образцу. Оценивается соответствие образцу и эффективность использования инструментов рисования. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 60 - Урок 4. Создание анимации Теория Типы анимации во Flash Ранее анимация с использованием растровых изображений, которые сменяли друг друга. Это неэффективно. Получаются фильмы больших размеров. Представьте, что в памяти должны храниться все изображения, из которых строится анимация. Иногда такие фильмы воспроизводятся медленно. Как уже было сказано, технология Flash поддерживает векторную графику, которая имеет свои преимущества. Вспомним их: Во-первых, векторные изображения имеют, как правило, небольшой объём. Во-вторых, а векторными изображениями легко работать: изменять размеры, форму и т.д., и всё это никак не сказывается на их качестве. Эти два преимущества очень важны, потому что продукты Flash, как известно, ориентированы на размещение в Интернет, где постоянно нужно помнить о соотношении между размером и качеством графики. Таким образом, Macromedia Flash позволяет создавать красивую анимацию, без потери качества, небольшого размера. Поддерживается два вида анимации: 1. Покадровая анимация (frame-by-frame animation). Это анимация, созданная по традиционному варианту. Вручную создаётся серия изображений, которые сменяют друг друга, и за счёт этого создаётся эффект движения. Такая анимация используется часто, но имеет несколько недостатков. Кроме кропотливости работы, получаемые файлы зачастую имеют большой объём. 2. Анимация трансформации объектов (tweening animation). Суть такой анимации в следующем: создаются лишь начальный и конечный кадры. Кроме того, указывается, какое действие должен совершить объект, чтобы из начального положения попасть в конечное. Возможны варианты: a. Движение объекта (motion tweening). То есть объект перемещается из одной точки в другую. При этом он может менять размеры, поворачиваться и т.д. Возможно движение объекта по заданной траектории. b. Трансформация формы (shape tweening). То есть форма объекта плавно переходит из одной стадии в другую. Плюс использования анимации второго типа в том, что в памяти хранятся лишь ключевые состояния объекта, а также информация о том, как должна происходить анимация. Конечно, при воспроизведении ролика Flash просчитывает промежуточные кадры и показывает их. А вот разработчику уже не надо заботиться об этом. Поэтому использование второго типа анимации очень удобно. Линия времени. Кадры. Управление анимацией Для управления анимацией служит линия времени. Рассмотрим подробней её элементы. 1. Кадры. Для удобства они пронумерованы. 2. Считывающая головка. 3. Слои. 4. Сцены. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 61 - Рисунок 2. Линия времени и её элементы Типы кадров: Пустой кадр (фрейм). В нём нет графики. Ключевой кадр (фрейм) – кадр, на котором происходит смена анимированного изображения. Пустой ключевой кадр (фрейм). Особенность работы с кадрами: при добавлении нового кадра в нём отображается содержание ключевого кадра. Только в ключевых кадрах можно выполнять редактирование изображения. Остальные – только просматривать. С кадрами можно производить следующие действия: копирование, перемещение, разворачивание порядка следования, редактирование, удаление т.д. Обозначение на линии времени: Ключевой кадр обозначаются чёрной точкой. В покадровой анимации – все кадры ключевые. В анимации трансформации ключевые кадры – в основных точках. Рисунок 3. Ключевые кадры Промежуточные кадры с анимацией движения – стрелкой на синем фоне. Рисунок 4. Кадры с анимацией движения Промежуточные кадры с анимацией трансформации стрелкой на зелёном фоне. Рисунок 5. Кадры с анимацией трансформации Кадры без анимации – серые. Пустой ключевой кадр – белая точка. Проблема анимации – пунктирная линия. Назначенная процедура кадра – буква «а». ИЗУЧАЕМ MACROMEDIA FLASH 8 - 62 - Режимы отображения на линии времени: ИЗУЧАЕМ MACROMEDIA FLASH 8 - 63 - Слои, типы слоёв. Эффекты слоёв Flash поддерживает возможность работать сразу с несколькими слоями в одном ролике. На каждом слое можно поместить свою анимацию. Слой подобен прозрачной плёнке, на которой помещено изображение. Таким образом, слои накладываются друг на друга. Верхние слои могут частично скрывать то, что лежит на нижних слоях, а мы видим готовое анимированное изображение. Во Flash слои увидеть на линии времени (Рисунок ). Каждый слой имеет своё название и параметры. Кроме того, на линии времени видно, что для каждого слоя существует своя анимация. Могут быть слои и без анимации (на рисунке это слои Frame, Pot, Background). Как правило, это слои с фоном, т.е. элементом изображения, который неподвижен на протяжении всего фильма или части его. Рисунок 5. Список слоёв на линии времени Рекомендуется располагать отдельные элементы ролика на разных слоях. Это во многом упрощает создание изображения или анимации. Например, на одном слое можно нарисовать небо и землю, которые будут неподвижны (фон), на другом слое – проплывающие по небу облака, на третьем – самолёт и парашютистов, и т.п. Таким образом, на каждом слое анимацию можно создать по своему закону. Облака могут просто двигаться справа налево или наоборот (обычная анимация движения). Самолёт и парашютисты могут лететь по сложной траектории (тоже анимация движения, ну уже по заданной траектории). Можно добавить другие элементы в ролик (солнце, птиц и т.д.) и в конечном итоге получить сложный фильм. Подобно тому, как это реализовано в Adobe PhotoShop, со слоями можно производить следующие действия: переименовывать, перемещать, скрывать, связывать. На линии времени первый слой в списке считается верхним. Во Flash MX кроме этого можно вставить папку слоёв. Типы слоёв: Обычный слой. На нём может располагаться графика, анимация, звук, видео. Направляющий слои (guide layer). Назначение – помощь при рисовании и перемещении объектов. При просмотре ролика не отображаются. Такие слои рекомендуется располагать под всеми остальными слоями. Также используются в качестве расположении на них траектории для анимации движения. Траектория может быть нарисована инструментом Карандаш. Лучше, когда траектория незамкнута, имеет контур и не имеет заливки. Рисунок 6. Слой-траектория (вверху) и связанный с ним обычный слой (внизу) Слой–маска. К нему привязываются основные слои и называются маскированными. Заливки на слое-маске – это прозрачные области для основного слоя. Отображение: сверху – маска, под ним – маскированный слой. Имеет смысл создавать анимацию на маске, чтобы добиться интересных эффектов. Здесь можно применять все приёмы анимации. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 64 - Рисунок 7. Слой-маска (вверху) и связанный с ним обычный слой (внизу) Действия со слоями Для удобства работы над списком слоёв есть возможность воспользоваться тремя режимами (Рисунок). Включить или отключить режим для конкретного слоя можно, щёлкнув на обозначение под соответствующим значком в этом слое. Режимы: Видимость слоя (1). Если слой не виден, то объекты, расположенные на нём, не отображаются. Слой бывает удобно скрыть на время, чтобы на него не отвлекаться (например, поработать с другими слоями). Блокировка слоя (2). На таком слое нельзя создавать и редактировать объекты. Если слой заблокирован, то он помечается замочком. Контур слоя (3). На контурном слое заливка объектов не видна. Виден только контур. Включение такого режима позволяет видеть объекты, заслоненные объектами данного слоя. Рисунок8. Режимы работы со слоями Сцены Обычно при создании больших роликов применяют разные сцены, когда происходит «смена декораций» (объекты полностью или почти полностью меняются). Сцены подобны разным частям или небольшим сериям фильма. На каждой сцене может быть свой список слоёв. Сцены воспроизводятся одна за другой без перерыва. При завершении анимации на одной сцене автоматически начинается анимация следующей. Сцены рекомендуется создавать в ролике в тех случаях, когда происходит кардинальная «смена декораций», а также для удобства работы, если фильм длинный. Если же в ролике много постоянных элементов, то лучше работать на одной сцене. В любом случае разработчик фильма сам решает, как ему будет удобно работать и сколько сцен использовать. Сцены можно переименовывать. Рисунок9. Выбор сцены в ролике на линии времени ИЗУЧАЕМ MACROMEDIA FLASH 8 - 65 - Практика Упражнение № 1. Анимационные эффекты Упражнение № 2. Автоматическая анимация Упражнение № 3. Движение по заданной траектории Упражнение № 1. Анимационные эффекты Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timelineэффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам: • текст; • графические объекты, включая формы, сгруппированные объекты и графические символы; • растровые изображения; • кнопки. Когда вы добавляете анимационные эффекты к объекту, Flash автоматически создает соответствующий слой и все трансформации движения и формы, необходимые для данного эффекта, реализуются в этом слое. Новый слой автоматически получает то же имя, что и эффект. 1. В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово (рис. 1), выделим его с помощью инструмента Selection и выполним команду Insert => Timeline Effects => Effects => Explode. Рис. 1. Выделенный текстовый объект В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта. Рис. 2. Панель Explode ИЗУЧАЕМ MACROMEDIA FLASH 8 - 66 - Наличие окна предпросмотра позволяет анализировать разные вариации эффектов, не покидая панели Explode. После того как вы выберете необходимые параметры, нажмите кнопку ОК. 2. Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to Stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur. Рис. 3. Растровое изображение, импортированное на сцену 3. Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) — в результате появится панель Blur. Рис. 4. Кнопка Edit находится внизу на панели Properties ИЗУЧАЕМ MACROMEDIA FLASH 8 - 67 - В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5). Рис. 5. Панель Blur позволяет поменять настройки эффекта 4. Покадровая анимация Рассмотрим простейший пример — листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси. Рис. 6. Первый ключевой кадр анимации Нарисуем кленовый листочек, например такой, как показано на рис. 6, — соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр — это кадр, в котором происходит помещение содержимого или его изменение. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 68 - Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe. В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Selection) и повернем, используя команду Modify => Transform => Free Transform (рис. 7). Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8). Рис. 8. Последний кадр анимации ИЗУЧАЕМ MACROMEDIA FLASH 8 - 69 - Обратите внимание на панель Properties (рис. 8) — в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже. 5. Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie. Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie. Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт. Рис. 9. Просмотр фильма в режиме Bandwidth Profiler Для того чтобы оценить, много это или мало, рассмотрим, как аналогичный фильм можно сделать с помощью автоматической анимации, или анимации трансформации движения. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 70 - Упражнение № 2. Автоматическая анимация Рис. 10. Объект автоматически превращается в графический символ 1. Рассмотрим, как можно сделать ту же анимацию и получить более компактный результирующий файл. Выделим на экране нарисованный листок инструментом Selection и выполним команду Insert => Timeline => Create Motion Tween, в результате листочек будет помещен в рамочку, а в панели Properties появится сообщение, что выделенный объект имеет свойства Grafic (рис. 10). Это означает, что анимируемый объект автоматически преобразован в графический символ. Теперь его уже невозможно произвольно редактировать инструментом Selection как объект типа Shape. Использование символов является важным понятием во Flash. Однажды создав символ, его можно использовать несколько раз в фильме, не увеличивая размер результирующего файла. Символы делятся на графические (graphic), символы-кнопки (button) и символы-мувиклипы (movie clip). В данном уроке рассмотрим графический символ, а к другим типам символов вернемся позднее. Каждый новый символ сразу становится частью библиотеки текущего документа (рис. 11). Рис. 11. Каждый новый символ становится частью библиотеки ИЗУЧАЕМ MACROMEDIA FLASH 8 - 71 - Если выполнить команду Window => Library, то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween. Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween Выполнив команду Control => Test Movie, получим информацию, представленную на рис. 13. Рис. 13. Просмотр фильма в режиме Bandwidth Profiler ИЗУЧАЕМ MACROMEDIA FLASH 8 - 72 - Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше — всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт. Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. 2. Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties. Положительные значения параметра Ease приводят к замедлению движения, а отрицательные — к ускорению. Выберем максимальное ускорение объекта. Рис. 14. Выберем максимальное ускорение объекта Ease = –100 Для этого выставим значение параметра Ease равным –100 (рис. 14). Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа. Из представленных примеров очевидно, что автоматическая анимация движения эффективна, когда трансформация объекта при его движении задается простыми функциями (поворот, масштабирование и т.п.). Если же необходимо анимировать сложные движения (например, движение руки героя мультфильма), то здесь анимация трансформации движения не применима. Каждый кадр приходится рисовать вручную, то есть применять покадровую анимацию, состоящую из набора ключевых кадров. Таким образом, покадровая анимация — это наиболее универсальный, но вместе с тем и самый трудоемкий вид анимации, кроме того, он создает наиболее «тяжелые» файлы. Всегда, когда можно заменить покадровую анимацию автоматической, — это предпочтительно. Рассмотрим ряд примеров, которые позволяют использовать автоматическую анимацию движения при имитации полета. Упражнение № 3. Движение по заданной траектории 1. Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide. В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer 1. Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка (рис. 15). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 73 - Рис. 15. Пример задания траектории движения Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим: Tween< Motion, флажок Snap и Sync(задает режим привязки к траектории движения) — рис. 16. Рис. 16. Параметр Snap задает режим привязки к траектории движения После того как вы поставите флажок Snap, центр листа совместится с траекторией движения. 2. Пользуясь инструментом Selection, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения (рис. 17). Рис. 17. Объект как бы прилипает к траектории движения своим центром Перейдите на 35 кадр слоя Guide Layer 1. Нажмите правую клавишу на мышки и выберите команду Incert Keyframe. Перейдите на 35 кадр слоя Layer 1. Нажмите правую клавишу на мышки и выберите команду Incert Keyframe. Перейдите в первый кадр и нажмите Insert<Timeline<Create Motion Tween. Аналогично привяжите листок к конечной точке траектории движения. 3. При движении листа вдоль траектории нам не важно, как он будет повернут в направлении движения. Но если мы аналогичным образом задаем траекторию полета птицы, то на некоторых участках кривой окажется, что птица летит хвостом. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 74 - Очевидно, что если мы хотим анимировать полет самолета или птицы, то нам нужно, чтобы они все время двигались носом вперед. Во Flash такой характер движения задать очень просто (рис. 18). Рис. 18. Если поставить флажок Orient to Path, птица будет лететь головой вперед Необходимо поставить флажок Orient to Path, и движение птицы изменится на вполне привычное Рис. 19. Добавление одноцветного фона 4. Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона. Если мы хотим добавить фоновый рисунок, нам понадобится для этого отдельный слой. В принципе, программа Flash предлагает возможность создания системы слоев, сходной с теми, что ИЗУЧАЕМ MACROMEDIA FLASH 8 - 75 - используются в классической анимации, при которой фон и различные подвижные объекты рисуются каждый на своем слое прозрачной пленки. 5. Расположив фоновое изображение и каждый анимируемый объект на своем слое, добиться контроля над ними гораздо проще. Итак, для того чтобы добавить фоновый рисунок, создадим для него новый слой. Для этого щелкнем правой кнопкой мыши по слою, который на рис. 19 обозначен как layer 1, и в выпадающем меню выберем строку Insert layer. В добавленном слое нарисуем солнце. Чтобы не запутаться в номерах слоев, дадим слою название «фон». Для этого необходимо щелкнуть на текущем названии и ввести необходимое имя (рис. 20). Рис. 20. На новом слое создадим неподвижный фоновый объект Как видно из рис. 20, птица находится за солнцем, что противоречит здравому смыслу. Для того чтобы поменять местами слои, достаточно в режиме drag-and-drop перетащить слой с именем «фон» вниз. Подредактируем объекты фильма (для того чтобы птица кружила на фоне солнца, изменим траекторию ее полета и поменяем соотношения размеров солнца и птицы) Рис. 21. Для анимации облака создадим отдельный слой 6. Теперь добавим к нашей анимации подвижные объекты, например облако. Для облака создадим новый слой и на нем зададим анимацию трансформации движения. Для того чтобы облако влетало в сцену, расположим его, как показано на рис. 21. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 76 - САМОСТОЯТЕЛЬНАЯ РАБОТА № 2 Задания Создайте ролик, в котором будет показано, как из яйца рождается цыплёнок. Оценивается сложность создания промежуточных изображений, инструментов рисования, оригинальность оформления. эффективное использование ИЗУЧАЕМ MACROMEDIA FLASH 8 - 77 - Урок № 5. Автоматическая анимация, анимированные символы Упражнение № 1. Автоматическая анимация формоизменения Упражнение № 2. Использование хинтов в анимации формы Упражнение № 3. Использование символов в сложной анимации Упражнение № 4. Создание анимированного графического символа: Упражнение № 5. Создание мувиклипов Преобразование анимации на сцене в отдельный мувиклип Дублирование символов Упражнение № 1. Автоматическая анимация формоизменения На прошлом уроке мы ознакомили вас с автоматической анимацией движения (Motion Tween), а теперь продолжим разговор об автоматической анимации и рассмотрим автоматическую анимацию формоизменения (Shape Tween). Следует отметить, что термин Shape Tween в различных изданиях переводят по-разному, в частности встречается название «анимация заполнения кадров с изменением формы». Впрочем, точно перевести это сочетание весьма сложно, поскольку tween — это сокращение от between (между). Таким образом, имеется в виду, что данный вид анимации строится на базе начального и конечного кадра, а всё, что находится между этими кадрами, интерполируется по тем или иным алгоритмам. Анимация формоизменения позволяет создать эффект перетекания одной фигуры в другую с одновременным изменением расположения, размера и цвета фигур. Нужно отметить, что анимацию формоизменения можно применить только к фигурам, но нельзя применять ни к группам, ни к экземплярам, ни к растровым изображениям. Для того чтобы применить к этим объектам анимацию формоизменения, их необходимо вначале разбить (break apart) на составляющие. Чтобы разобраться в принципах создания автоматической анимации формоизменения, рассмотрим простой пример, в котором яблоко будет превращаться в грушу. 1. Нарисуйте замкнутый контур с заливкой в форме яблока, как показано на рис. 1. Рис. 1. Контур с радиальной заливкой 2. Затем щелкните на имени слоя нарисованного объекта (в данном случае имя слоя по умолчанию принято Layer 1) — слой станет выделенным (рис. 2), а внизу в панели Properties появится окошко Tween, в котором нужно выбрать пункт Shape. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 78 - Рис. 2. В меню Tween следует выбрать пункт Shape 3. Теперь добавим конечный кадр — пусть формоизменение будет происходить за 30 кадров. Вставьте ключевой фрейм в 30-й кадр и поместите там замкнутый контур в форме груши (рис. 3). Обратите внимание, что в нашем примере начальный и последний кадр отличаются не только формой контура, но и цветом заливки. Рис. 3. Поместим результирующую форму в 30-й кадр После того как мы определили конечный кадр трансформации, на панели Timeline промежуток от первого до 30-го кадра окрасился в светло-зеленый цвет, а внутри этого промежутка протянулась стрелка, что свидетельствует о создании анимации формоизменения. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 79 - Рис. 4. В окошке Ease задается режим ускорения/замедления анимации 4. Аналогично тому, как это реализовано в автоматической анимации движения, в автоматической анимации формоизменения возможно задание анимации с замедлением или ускорением. Продемонстрируем эту возможность на нашем примере. Выделите слой и нажмите на треугольник рядом с окошком Ease (рис. 4), в результате чего появится ползунок, который позволяет установить режим ускорения/замедления. Чтобы движение ускорилось, необходимо ввести отрицательное число от –1 до –100, а для замедления процесса превращения введите положительное число от 1 до 100. Зададим параметр Easing, например равный +100. 5. Обратите внимание на возможность выбора характера анимации, которое задается в выпадающем меню Blend (рис. 5). В данном меню можно выбрать два варианта — Distributive, при котором промежуточные фигуры будут более гладкими, и Angular, при котором фигуры будут угловатыми. Рис. 5. Выпадающее меню Blend Упражнение № 2. Использование хинтов в анимации формы В предыдущем параграфе мы изучали процесс анимации формоизменения, при котором яблоко превращается в грушу. Логичным был бы процесс морфинга, при котором веточка переходит в веточку, а плод в плод, программа же генерирует промежуточные кадры преобразования, «ничего не зная» о строении яблок и груш. Поэтому, если мы хотим сохранить некоторую логику морфинга, необходимо указать программе, какие области должны наследоваться. С этой целью в программе Flash используются так называемые хинты(shape hints) — контрольные маркеры, с помощью которых можно управлять процессом формоизменения. Хинтами отмечаются точки, которые должны переходить сами в себя в начальной и конечной фигурах. Хинты помечаются буквами (от «a» до «z»). Рассмотрим, как можно усовершенствовать нашу анимацию с помощью хинтов. 1. Выделим первый ключевой кадр и выполним команду Modify => Shape => Add Shape Hint, в результате выполнения которой на фигуре появится начальный хинт в виде красного кружка с буквой «а». Передвинем хинт в верхнюю точку веточки (рис. 6). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 80 - Рис. 6. Процесс установки хинта Рис. 7. В последнем кадре установите точку, в которую должен переходить хинт Перейдите на последний ключевой кадр, и вы обнаружите, что внутри контура результирующей фигуры появится конечный хинт в виде зеленого кружка с буквой «a». Передвиньте хинт в точку, которая должна соответствовать первой отмеченной точке (рис. 7). После того как вы выставите на кривую хинт в последнем кадре, в первом кадре хинт поменяет свой цвет (с красного на желтый) — это означает, что установлено соответствие между хинтами. Повторите этот процесс, добавляя новые хинты (рис. 8). Для получения наилучших результатов следует размещать хинты против часовой стрелки, начиная с левого верхнего угла фигуры. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 81 - Рис. 8. Положение хинтов в результирующей фигуре В нашем примере нам хватило всего трех хинтов, однако программа позволяет одновременно использовать до 26 хинтов. При анимации фигур сложной формы можно разбить процесс на несколько этапов и на каждом использовать по 26 хинтов. 2. Сделать хинты видимыми или невидимыми можно по команде View => Show Shape Hints. Чтобы удалить хинт, перетащите его за сцену, а чтобы удалить все хинты, выберите команду Modify => Transform => Remove All Hints. Данные команды удобнее выполнить правым щелчком мыши (рис. 9). Рис. 9. Правый щелчок мыши в области хинта дает доступ к меню ИЗУЧАЕМ MACROMEDIA FLASH 8 - 82 - 3. До сих пор мы говорили о том, как упорядочить процесс морфинга, однако следует отметить, что с помощью функции Shape Tween можно добиться очень интересных эффектов неупорядоченной трансформации, которые трудно получить другими способами. В частности, стандартный эффект «взрыв», который предлагает программа Flash 8, смотрится довольно примитивно по сравнению с тем, что можно сделать посредством функции Shape Tween. На рис. 10 приведен пример, где в первом кадре была помещена растровая картина, которая затем была переведена в векторный вид командой Trace Bitmap (Modify<Bitmap< Trace Bitmap). Рис. 10. Растровое изображение, переведенное в векторный вид с помощью команды Trace Bitmap Затем ко всей совокупности контуров с заливками была применена автоматическая анимация формоизменения. В 40-м кадре была помещена та же картина, но в несколько большем масштабе. Рис. 11. Каждый контур с заливкой определенного цвета пермещается по своей траектории Как видно из рис. 11, в процессе морфинга каждый контур с заливкой определенного цвета перемещается по своей траектории. В результате исходная картинка как бы распадается на отдельные «мазки», которые впоследствии вновь объединяются в картинку большего размера. Далее с 41-го по 70-й кадр мы применили анимацию движения Motion Tween ( 70-й кадр отличается от 41го увеличением масштаба). Этот пример наглядно показывает, что функции Shape Tween и Motion Tween (которые приводят к одинаковым результатам масштабирования при переходе из первого кадра в последний) создают совершенно разные эффекты перехода: в первом случае каждый контур заливки перемещается по своей траектории, а во втором картинка остается целостной и лишь подвергается непрерывному масштабированию. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 83 - 4. В начале урока мы говорили о том, что автоматическую анимацию нельзя применить непосредственно к растровым изображениям. Однако если перевести растровое изображение в контур с растровой заливкой, то становится возможной анимация формоизменения контура. Для примера импортируем на сцену растровый рисунок, применим команду Modify => Break Apart, после чего установим в поле Tween тип анимации Shape и вставим в конечном кадре анимации ключевой кадр. В последнем кадре применим режим трансформации Envelope, доступный по команде Modify => Transform => Envelope (рис. 12). Рис. 12. К контуру с растровой заливкой можно применить функцию трансформации Envelope Как видно из фильма, растровое изображение не претерпевает никаких изменений, а происходит формоизменение только векторного контура, благодаря чему зрителю видна та или иная часть растровой заливки, ограниченная изменяющимся контуром. Поэтому некорректно говорить о том, что анимация формоизменения применена к растровому изображению, как и о том, что возможна анимация формоизменения применительно к тексту. 5. Анимацию формоизменения можно применить к тексту только после того, как мы переведем текст в контуры с заливками. Пример такой анимации показан на рис. 13 и 14. В первом кадре напечатано слово Star, после чего дважды применена функция Break apart, что привело к переводу текста в контуры с заливками, далее применена анимация формоизменения, а в конечном кадре аналогичная процедура перевода текста в графику проведена со словом «Звезда». Рис. 13. Первый кадр автоматической анимации формоизменения ИЗУЧАЕМ MACROMEDIA FLASH 8 - 84 - Рис. 14. Финальный кадр автоматической анимации формоизменения В принципе, подобного рода трансформации (когда количество символов в начальном и конечном кадре разное) выглядят не очень эффектно. Если же в начальном и конечном кадре одинаковое количество символов и идет переход из символа в символ, а при трансформации символа в символ используются хинты, можно добиться более выразительных эффектов. Упражнение № 3. Использование символов в сложной анимации Возможность автоматической прорисовки промежуточных кадров позволяет резко сократить объем работы для большого класса задач, но этим возможности Flash по автоматизации разработки анимации не ограничиваются. Существует целый ряд задач, при решении которых Flash позволяет значительно ускорить процесс создания анимации — речь идет об использовании анимированных символов. На практике часто бывает нужно создать анимацию, в которой используется несколько элементов, обладающих однотипным движением (например, растущие листья, вращающиеся колеса и т.п.). И здесь нецелесообразно будет многократно анимировать каждый элемент — логичнее записать движение в некотором анимированном символе, а затем применить копии этого символа там, где это необходимо. Для реализации указанной схемы могут быть использованы анимированные графические символы и так называемые мувиклипы . Рассмотрим создание каждого из этих символов. Упражнение № 4. Создание анимированного графического символа: 1. Прежде всего выполним команду Insert => New Symbol, в результате чего появится панель (рис. 15). Выберем тип символа Graphic — по умолчанию его имя будет Symbol 1. Если вас это не устраивает, можно присвоить символу другое имя. Рис. 15. Панель создания нового символа Нажав кнопку ОК, перейдем в режим редактирования символа. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 85 - 2. Создадим символ с анимацией формоизменения — пусть это будет процесс превращения окружности в прямоугольник. В первом кадре поместим окружность (рис. 16), а в последнем — прямоугольник (рис. 17). Рис. 16. Начальный кадр анимации формоизменения В режиме редактирования символа его имя отображается наверху, а крестик в центре отмечает центральную точку символа. Рис.17. Анимация формоизменения, заложенная в символ Symbol 1 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 86 - Таким образом, мы создали графический анимированный символ, содержащий анимацию формоизменения, которая реализуется на протяжении 10 кадров. 3. После завершения редактирования символа вернемся в режим редактирования основного фильма. Это можно сделать, нажав на кнопку c именем сцены (в нашем случае Scene 1), либо используя кнопку Back, расположенную рядом с именем сцены, либо выполнив команду Edit => Edit Document. 4. Перейдя на сцену Scene 1, выполним команду Window => Library — на экране появится панель библиотеки (рис. 18). Рис.18. Панель библиотеки содержит созданный символ графического типа 5. Щелкнув по имени символа, получим его изображение в окне библиотеки. С помощью клавиши «Проигрывание» можно просмотреть анимацию символа (рис. 19). Рис.19. В окне библиотеки можно просмотреть анимацию символа 6. Перетащим символ из окна библиотеки на рабочее поле сцены (рис. 20). При переносе символа из библиотеки на сцену мы создаем экземпляр символа на сцене (в некоторых изданиях это ИЗУЧАЕМ MACROMEDIA FLASH 8 - 87 - называется трансформой, но мы будем пользоваться словом «экземпляр», поскольку оно ближе английскому «instance»). Экземпляр — это копия символа, расположенная на сцене или внедренная в другой символ. Над экземпляром могут производиться различные преобразования, так что он может сильно отличаться от изначального символа цветом, размером и функцией. Редактирование символа приводит к автоматическому обновлению всех экземпляров, но применение различных эффектов к экземплярам никак не влияет на символ. Программа Flash может размещать экземпляры только в ключевых кадрах, причем всегда в текущем слое. Если ключевой кадр не выбран, то экземпляр попадает в первый ключевой кадр слева от текущего кадра. Рис. 20. Процесс создания экземпляра символа Мы поместили на сцене анимированный графический символ, но до тех пор, пока у нас имеется только один кадр в основной сцене, мы не можем просмотреть анимацию, заложенную в данном символе (в этом, кстати, и состоит основное отличие графического анимированного символа от мувиклипа, о котором мы расскажем ниже). 7. Создадим анимацию движения из 50 кадров (рис. 21), в течение которых наш символ должен переместиться вправо по сцене на некоторое расстояние. Рис. 21. Анимация движения, примененная к экземпляру графического анимированного символа ИЗУЧАЕМ MACROMEDIA FLASH 8 - 88 - 8. Если взяться мышью за указатель кадра (см. рис. 21) и протащить по монтажной линейке, то мы увидим, что за каждые 10 кадров отрабатывается анимация, заложенная в анимированный графический символ, а в 50-м кадре круг полностью превратился в квадрат. Если бы мы взяли в основной сцене не 50, а 55 кадров (число, не кратное количеству кадров в графическом символе), то в 55-м кадре мы бы получили другую фигуру — круг, на 50% трансформированный в квадрат. Таким образом, графические символы однозначно привязаны к монтажной линейке основного фильма. Если мы хотим добавить новый экземпляр символа и применить к нему ту же анимацию движения, нам придется создать для нового экземпляра символа новый слой (это тоже отличает графический анимированный символ от мувиклипа). Продемонстрируем все вышесказанное на примере. Рис. 22. Для создания аналогичной анимации второго экземпляра графического символа необходим отдельный слой 9. Добавим еще один слой, скопируем в первый кадр нового слоя созданный нами символ, трансформируем его (растянем по вертикали — рис. 22), используя команду Modify => Transform => Free transform, и создадим анимацию движения, аналогичную той, что мы создали в первом слое. В результате получим фильм, где на основе одного символа созданы разные экземпляры, причем модификация одного из символов никак не повлияла на породивший его символ. 10. Теперь рассмотрим, как повлияет на наш фильм редактирование самого символа. Для этого дважды щелкнем по экземпляру символа в виде окружности в первом кадре, в результате чего появится сцена с 10 кадрами, соответствующими анимации нашего графического анимированного символа (рис. 23). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 89 - Рис.23. Режим, в котором возможно редактирование 11. Зальем контур окружности в первом кадре заливкой другого цвета, но не градиентной, а одноцветной (рис. 24). В данном случае редактирование будет относиться уже не к экземпляру, а к самому символу. Как только вы зальете окружность другим цветом, эллипс автоматически зальется соответствующим цветом, то есть редактирование символа приводит к изменениям во всех экземплярах. Рис. 24. Изменения в символе влияют на все экземпляры ИЗУЧАЕМ MACROMEDIA FLASH 8 - 90 - Упражнение № 5. Создание мувиклипов Символы-мувиклипы — это анимированные символы, имеющие монтажную линейку, которая (в отличие от графических анимированных символов) существует независимо от линейки основного фильма. Поясним это отличие: если для проигрывания в основном документе графического анимированного символа, состоящего из 10 кадров, нужно выделить ровно столько же кадров на монтажной линейке основного документа, то для мувиклипа в 10 кадров достаточно одного кадра на монтажной линейке основного документа. Кроме того, мувиклип может содержать собственные интерактивные элементы, звуки и экземпляры других мувиклипов. 1. Рассмотрим принципы работы с мувиклипами на примере создания фильма, в котором фигурирует дерево с распускающимися листочками. Создадим мувиклип «листок» по аналогии с созданием графического символа, но при этом в панели (см. рис. 15) вместо пункта Graphic выберем пункт Movie Clip и дадим этому мувиклипу название «листок». В появившемся окне нарисуем листок, например как на рис. 25. Рис. 25. Первый кадр мувиклипа «листок» Чтобы смоделировать рост этого листка, создадим в мувиклипе «листок» анимацию Motion Tween на 20 кадров с увеличением масштаба. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 91 - Рис. 26. Мувиклип, имитирующий рост листа 2. Затем перейдем к основному документу Scene 1, нарисуем ветку, вызовем библиотеку и будем добавлять экземпляры путем перетаскивания символа на сцену. Используя функцию свободного трансформирования получаемых экземпляров символа на сцене, будем добавлять листья на ветку нужного размера (рис. 27). Рис. 27. Добавление экземпляров символа на сцену 3. В этом фильме черенки листочков в процессе роста листьев как бы отъезжают от мест крепления черенка. Для того чтобы избежать этого эффекта, вернемся к редактированию символа. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 92 - Кнопка «Калька» Рис. 28. Использования режима калькирования Нам необходимо, чтобы в первом и последнем кадре анимации точка прикрепления черенка листа к ветке оставалась на месте. С этой целью включим режим контурного калькирования (рис. 28) и совместим на кальке первый и последний кадр таким образом, чтобы точка крепления листка оставалась на месте. После этого фильм будет лишен указанного выше недостатка. Рис. 29. Создание мувиклипа «ветка» ИЗУЧАЕМ MACROMEDIA FLASH 8 - 93 - 4. Поскольку нашей задачей является построение анимированного дерева, которое, в свою очередь, состоит из веток, превратим созданную нами ветку в мувиклип, выполнив команду Modify => Convert to symbol (рис. 29). Теперь можно из совокупности клипов «ветка» построить дерево (рис. 30). Как видно из рис. 30, клип «ветка» многократно применяется с различными трансформациями (поворот, зеркальное отображение и масштабирование). Рис. 30. На базе мувиклипов «ветка» строится дерево 5. В результате мы получим фильм, в котором изображено дерево с растущими листочками, все ветки которого отличаются друг от друга только стандартными изменениями, полученными на базе функции Free transform. Если же мы захотим поменять в какой-то ветке количество листьев, то нам необходимо будет перевести ее из экземпляра символа в редактируемый объект. Для этого выделим нужный экземпляр символа «ветка» и выполним команду Modify => Break Apart (рис. 31). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 94 - Рис. 31. Для изменения количества листьев в символе «ветка» его необходимо использовать команду Break Apart Теперь можно убрать один из листочков (рис. 32). Рис. 32. В сцене осталось толко два экземпляра символа «ветка» 6. Чтобы придать нашему фильму некоторую законченность, добавим два новых слоя — задний план «небо» и передний план «вид из окна» (рис. 33). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 95 - Рис.33. Добавление переднего и заднего плана на дополнительных слоях Обратите внимание, что весь фильм состоит только из одного кадра основной сцены. Вся анимация заложена в анимированных символах-мувиклипах. Упражнение № 6. Преобразование анимации на сцене в отдельный мувиклип 1. Если на сцене создана анимационная последовательность, которую необходимо повторно использовать в клипе или манипулировать ею как отдельным экземпляром, можно выделить ее и сохранить как отдельный символ-мувиклип. Создадим новый Flash-фильм, в котором создадим эффект падающих листьев на фоне фотографии осеннего леса. Воспользуемся фильмом, созданным на прошлом уроке (рис. 34). Рис. 34. Фильм на базе анимации Motion Tween ИЗУЧАЕМ MACROMEDIA FLASH 8 - 96 - 2. Выделим все кадры этого фильма, щелкнув правой кнопкой мыши по любой ячейке кадра на монтажной линейке, и в ниспадающем меню выберем пункт Select all frames, в результате чего все ячейки окрасятся в черный цвет. После этого правым щелчком мыши вновь вызовем меню и выберем пункт Copy Frames. Далее откроем новый документ и вставим в нем новый символмувиклип посредством команды Insert => New Symbol (в пункте Behavior следует выбрать Мovie clip). На монтажной линейке мувиклипа щелкнем на кадре 1 и выполним команду Edit => Paste Frames. Рис. 35. Созданный мувиклип Symbol 1 3. В библиотеке нового документа (в нашем примере его имя Untilted 2) появится мувиклип по имени symbol 1 (рис. 35). Вернемся к сцене основного документа Scene 1 и импортируем на сцену фотографию осеннего леса командой File => Import => Import to Stage (рис. 36). Рис. 36. Импортируем фотографию на сцену основного фильма Создадим несколько экземпляров листьев и в режиме Free transform изменим их размер (рис. 37). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 97 - Рис. 37. Создадим несколько экземпляров символа-мувиклипа Поскольку мы использовали экземпляры только одного мувиклипа (хотя и модифицировали каждый из них), полученный фильм выглядит неестественно, так как все листья движутся синхронно. Поэтому желательно создать несколько символов-мувиклипов, а чтобы не создавать их с нуля, удобно воспользоваться функцией дублирования символов. Упражнение № 7. Дублирование символов 1. Чтобы дублировать символ, вызовем панель библиотеки по команде Window => Library и правым щелчком мыши активизируем контекстное меню (рис. 38), в котором выберем пункт Duplicate. Рис. 38. Процесс дублирования символа ИЗУЧАЕМ MACROMEDIA FLASH 8 - 98 - В появившейся панели (рис. 39) введем имя нового символа (по умолчанию это будет Symbol 1 copy). Рис. 39. Панель дублирования символа 2. Итак, у нас появилась копия имеющегося символа, которую мы будем использовать как заготовку для создания нового символа. Изменим в этой заготовке некоторые параметры, например замедлим скорость падения листа, для чего достаточно перетащить последний кадр вправо на монтажной линейке. А потом применим зеркальное отображение листа в последнем кадре — новый символ с именем Symbol 1 copy готов (рис. 40). Рис. 40. Новый символ по имени Symbol 1 copy ИЗУЧАЕМ MACROMEDIA FLASH 8 - 99 - 3. А теперь из библиотеки добавляем на сцену экземпляры нового символа Symbol 1 copy (рис. 41). После того как мы добавили на сцену экземпляры второго символа, поведение листьев уже не кажется столь однообразным. Рис. 41. Добавление на сцену экземпляров символа Symbol 1 copy 4. Дублировать символ можно и с помощью использования его экземпляра. Продемонстрируем это на том же примере. Выделим экземпляр символа Symbol 1 на сцене и выполним команду Modify => Symbol => Duplicate Symbol (рис. 42). Рис. 42. Дублирование символа на основе экземпляра ИЗУЧАЕМ MACROMEDIA FLASH 8 - 100 - Рис. 43. Панель Duplicate Symbol После этого появится еще один символ — Symbol1 copy 2 (рис. 43). Дважды щелкнем по имени нового символа в окне библиотеки, что вызовет окно редактирования нового символа. Поменяем положение листа в последнем кадре, перейдем к основной сцене и добавим несколько экземпляров нового символа. В результате мы получим окончательную версию фильма. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 101 - Контрольная работа №3. Работа в Macromedia Flash со слоями и сценами. Сложная анимация Задания 1. Создайте анимацию шагающего человека. Должен быть создан символ типа клип. Поместите этот символ на основную сцену. Анимация может быть любой. 2. Создайте анимированный баннер. В нём обязательно должно присутствовать название вашей школы. Возможно наличие других элементов (например, эмблема школы). Для этих элементов могут использоваться разные типы анимации. Главное условие в задании – использование разных слоёв. Оценивается оригинальность и умение работать со слоями в Macromedia Flash. 3. Создайте ролик, в котором будет изображён зимний пейзаж. Кружатся и падают на землю снежинки (движение по траектории). Создание фона оценивается. 4. Создайте ролик, на котором будет показано, как бабочка перелетает с одного цветка на другой (движение по траектории). Создание фона и цветов оценивается. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 102 - Урок 6. Цветовые эффекты на базе автоматической анимации движения Упражнение № 1. Изменение яркости, оттенка и прозрачности Упражнение № 2. Текстовые эффекты на базе изменения прозрачности Упражнение № 3. Освещение от свечи Упражнение № 4. Слайд-шоу с эффектом изменения прозрачности Упражнение № 5. Замена одного символа на другой В предыдущих уроках мы рассмотрели примеры автоматической анимации движения — Motion Tween, в которых моделировалась анимация перемещения и изменения формы. Следует отметить, что слово «Motion» (движение) в названии данной функции отражает только часть ее возможностей, поскольку Motion Tween позволяет не только задавать анимацию движения и деформации, но и, например, осуществлять покадровое изменение цвета, яркости, прозрачности и других эффектов, о которых мы и расскажем в данном уроке. Упражнение № 1. Изменение яркости, оттенка и прозрачности Рис. 1. Анимация Motion Tween позволяет создать эффект изменения яркости 1. Нарисуем прямоугольник на некотором фоне (отличном от белого) и определим анимацию Motion Tween, при которой прямоугольник будет переходить сам в себя на протяжении 20 кадров (рис. 1). Далее щелкнем на экземпляре символа в последнем кадре, в результате чего в панели Properties появится меню выбора цвета Color, в котором выберем настраиваемый параметр Brightness (яркость) (рис. 2). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 103 - Рис. 2. Меню Color имеет четыре настраиваемых параметра Увеличим параметр Brightness до 100%, в результате чего получим фильм. Соответственно если принять яркость в последнем кадре на уровне – 100%, то получим переход цвета от исходного к черному. 2. Следующий параметр, находящийся в том же меню (рис. 2), — это Tint (оттенок). Он позволяет определить цвет, в который будет окрашиваться экземпляр символа. Панель, показанная на рис. 3, позволяет выбрать цвет из палитры, определить численные значения цветовых составляющих RGB, а также оттенок цвета — от прозрачного (1%) до насыщенного (100%). Следующий фильм показывает пример использования параметра Tint. Рис. 3. Панель выбора оттенка 3. Наиболее часто используемым является параметр, Alpha, который определяет прозрачность экземпляров, вернее непрозрачность, поскольку полная прозрачность задается при Alpha = 0. Если в примере (рис. 1) мы поставим в последнем кадре значение Alpha равным нулю, то получим следующий результат. Обратите внимание: на белом фоне разница между примером, в котором увеличивается яркость, и примером, в котором до максимума растет прозрачность, будет не заметна. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 104 - 4. Для определения сложных цветовых эффектов для растровых изображений наиболее удобен режим Advanced. Рассмотрим пример, в котором будет меняться цветовая схема растровой картинки, показанной на рис. 4. Рис. 4. Исходное растровое изображение Рис. 5. Создание негатива цветного растрового изображения При выборе пункта Advanced в меню Color появляется кнопка Settings, при нажатии на которую вызывается панель Advanced Effect (рис. 5). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 105 - Данная панель позволяет регулировать по отдельности значения каждой из цветовых составляющих RGB и прозрачности Alpha. Вычисление цвета в каждом из каналов R, G, B производится по формуле: Red = (x1 * R) + y1, Green = (x2 *G) + y2, Blue = (x3 * B) + y3, где х1, x2, x3 изменяется от –1 до +1 (задается в процентах от –100 до +100%), y1, y2, y3 — параметры, которые могут изменять свое значение от –255 до + 255. При этом если значение цветовой составляющей становится отрицательным, то оно приравнивается к нулю. На рис. 5 параметры х1, x2, x3 определены равными –1 (или 100%), а y1, y2, y3 — 255. Таким образом, задан эффект создания негатива цветного изображения. Упражнение № 2. Текстовые эффекты на базе изменения прозрачности Рассмотренные возможности изменения цвета и прозрачности экземпляров позволяют создавать различные текстовые эффекты. В качестве примера рассмотрим, как создать эффект растворения букв. Режим Bold Рис. 6. Исходный текст 1. Введем исходный текст — в нашем примере слово «Привет». Для того чтобы эффект был нагляднее, выберем режим Bold (рис. 6). 2. Далее разобьем текст по команде Modify => Break Apart и применим команду Modify => Time Line => Distribute to Layers, после чего каждая буква слова будет помещена в отдельный слой, при этом каждый слой будет назван соответствующей буквой (рис. 7). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 106 - Рис. 7. Каждая буква автоматически попадает на отдельный одноименный слой 3. Перейдем в слой с первой буквой и создадим анимацию Motion Tween на 10 кадров. В последнем кадре увеличим масштаб буквы до 300% — для этого вызовем панель Transform по команде Window => Transform (рис. 8) и введем нужное значение масштаба в процентах. Рис. 8. Панель Transform позволяет задать численное значение масштабирования 4. Далее выделим экземпляр символа в 10-м кадре и в панели Properties увеличим прозрачность экземпляра символа (рис. 9). При установке параметра Alpha на уровне 0% буква станет прозрачной. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 107 - Рис. 9. Так выглядит экземпляр символа при значении Alpha = 37% 5. Далее переместим первый фрейм в слое «р» в 10-й кадр (для этого необходимо щелкнуть по нему мышью и потом в режиме drag&drop перетащить в нужное место) и повторим ту же процедуру, что и с буквой «П» (рис. 10). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 108 - Рис. 10. Анимация масштабирования с увеличением прозрачности для буквы «р» 6. Аналогично поступим со всеми буквами. Рис. 11. Определим аналогичную анимацию для каждой буквы 7. Теперь вернемся к слою Layer 1 и в первом кадре поместим слово «Привет» так, чтобы оно совпало с буквами на других слоях. Далее в 60-м кадре слоя Layer 1 введем ключевой кадр, после чего все кадры автоматически заполнятся тем же текстом (рис. 11). Текстовый эффект готов. 8. Если анимация покажется вам слишком медленной, можно поменять скорость смены кадров. Для этого нужно дважды щелкнуть мышью на текущем значении скорости смены кадров — 12 fps (рис. 11), после чего появится панель Document Properties (рис. 12), на которой следует задать более высокую скорость смены кадров. В результате получаем окончательный вариант. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 109 - Рис. 12. Панель Document Properties 9. Можно также предложить эффект, при котором прозрачные буквы из разных частей сцены собираются в слово и при этом становятся непрозрачными. Данный пример иллюстрируется следующим фильмом. Далее рассмотрим более сложный пример, в котором моделируется освещение от горящей свечи. Упражнение № 3. Освещение от свечи 1. Импортируем фотографию с изображением горящей свечи (рис. 13) и назовем слой, в который мы поместили данное растровое изображение, Нands. Рис. 13. Исходное статичное изображение 2. Добавим сверху еще один слой и назовем его Flame (пламя). Скопируем в первый кадр этого слоя изображение из слоя Нands. Для этого необходимо нажать клавишу Alt и переместить кадр — в первом кадре слоя Flame появится то же изображение (рис. 14). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 110 - Рис. 14. В первый кадр слоя Flame копируем ту же картинку 3. Затем переведем растровое изображение в слое Flame в векторное. Для этого выделим изображение, выполним команду Modify => Bitmap =>Trace Bitmap и выберем параметры трассировки, как показано на рис. 15. Рис. 15. Параметры трассировки выбираются в панели Trace Bitmap 4. После того как растровое изображение будет переведено в векторное, при помощи ластика уберем все лишнее и оставим только векторный рисунок пламени (рис. 16). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 111 - Рис. 16. Векторный рисунок пламени свечи 5. Для того чтобы передать эффект колебания пламени свечи, определим анимацию, при которой пламя будет деформироваться. Чтобы ориентироваться по фоновой картинке, добавим растровое изображение фоном на все кадры. Для этого в слое Нands в 40-м кадре вставим ключевой фрейм — в результате растровая картинка скопируется на все кадры со 2-го по 40-й. Далее определим в слое Flame анимацию Motion Tween на 15 кадров и в последнем кадре увеличим пламя и поднимем его вверх, как показано на рис. 17. Для того чтобы не оторвать основание пламени от фитиля, удобно выставить режим контурной кальки (соответствующая кнопка нажата на рис. 17) и отследить, чтобы нижний край пламени оставался на месте. Рис. 17. Режим контурной кальки позволяет скорректировать деформацию пламени ИЗУЧАЕМ MACROMEDIA FLASH 8 - 112 - 6. Затем в 40-м кадре добавим еще один ключевой кадр и вновь деформируем пламя (рис. 18). Рис. 18. Деформация пламени на статичном фоне В результате получим фильм. Недостатком данной анимации является то, что пламя меняется, а ореол вокруг него — нет. Поэтому добавим анимацию ореола. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 113 - Рис. 19. Процесс создания ореола 7. Нарисуем эллипс вокруг пламени (рис. 19). Выберем радиальную заливку и вызовем меню Color Mixer по команде Window => Color Mixer (рис. 20). Щелкнем мышью по левому маркеру и выберем для него желтый цвет и непрозрачный режим (Alpha = 100%). Затем щелкнем по правому маркеру и выберем для него белый цвет и полную прозрачность (Alpha = 0%). Зальем контур и создадим, таким образом, фигуру с градиентом цвета и прозрачности. Рис. 20. Панель Color Mixer 8. Далее уберем линию обводки эллипса, в результате чего он примет вид, как показано на рис. 21. Как видно из рисунка, у ореола получились жесткие края, что недопустимо. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 114 - Рис. 21. У ореола получились жесткие края 9. Для того чтобы убрать этот дефект, необходимо откорректировать градиентную заливку. Для этого выберем инструмент Gradient Transform и щелкнем мышью по радиальной заливке, в результате появится эллипс с четырьмя маркерами (один внутри и три на линии). Из трех маркеров, лежащих на линии, средний служит для изменения диаметра, правый — для изменения окружности в эллипс, а левый позволяет поворачивать эллипс. Необходимо взяться мышью за средний маркер (из трех лежащих на кривой) и уменьшить радиус эллипса, в результате жесткие края исчезнут. С помощью других маркеров придадим светящемуся ореолу нужное положение на плоскости (рис. 22). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 115 - Рис. 22. Изменение параметров радиальной заливки 10. Далее применим анимацию Motion Tween к ореолу. Он должен увеличиваться в момент увеличения пламени, одновременно с увеличением размера пламени должна меняться яркость свечения ореола. На рис. 23 показано, что яркость ореола увеличена до + 66%. В результате получим фильм. Рис 23. Яркость ореола увеличивается в момент максимального увеличения пламени 11. Теперь неестественно выглядит то, что освещенность рук не меняется при изменении яркости горения свечи. Исправим и этот недостаток. Изменим статичный фон на анимированный (рис. 24). Удалим в слое Нands все кадры, кроме первого. Для этого следует нажать клавишу Shift, щелкнуть мышью по второму кадру, а затем по последнему — в результате эти кадры станут выделенными и ИЗУЧАЕМ MACROMEDIA FLASH 8 - 116 - окрасятся в черный цвет. Далее необходимо щелкнуть правой кнопкой мыши по черному полю и выбрать в появившемся меню пункт Remove Frames. Рис. 24. Заменим статичный фон на анимированный (с изменением яркости) 12. Применим к первому кадру слоя Нands анимацию Motion Tween и установим яркость кадра в первом и последнем кадрах — –24%, а в 15-м — +16%. Конечно, в данном ролике (зацикленном по кругу) горящая свеча выглядит не очень естественно в силу строгой периодичности деформации пламени. Однако следует понимать, что в данном примере мы лишь рассмотрели принцип, а если добавить различные колебания пламени, то можно добиться большей правдоподобности. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 117 - Упражнение № 4. Слайд-шоу с эффектом изменения прозрачности Эффект изменения прозрачности объектов используется достаточно часто. В частности, таким образом можно создать эффект смены кадров в слайд-шоу. Данный эффект достигается путем покадрового увеличения прозрачности одного изображения с параллельным увеличением непрозрачности другого. В качестве примера приведен фрагмент слайдшоу из рисунков автора. Принцип построения данного слайд-шоу показан на рис. 25. 1. Каждое изображение появляется с нулевой непрозрачностью, которая возрастает до 100% за пять кадров, далее в течение десяти кадров демонстрируется изображение, а затем на протяжении пяти кадров прозрачность вновь падает до нуля. В то время как одно изображение растворяется за пять кадров, следующее проступает за то же количество кадров. Рис. 25. Пример слайд-шоу с плавной сменой кадров 2. Придумай свою по аналогии. Рисунки найди в Интернете. Управляя прозрачностью объектов, можно также отобразить внутреннее строение устройств. В качестве примера можно привести баннер, в котором показана проступающая под корпусом телефона микросхема. Эффект построен на изменении прозрачности: параллельно идет увеличение прозрачности корпуса, уменьшение прозрачности внутренней микросхемы и постепенный ее поворот (рис. 26), в итоге в поле зрения попадает расположенный на микросхеме процессор (рис. 27), на котором обозначен логотип компании. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 118 - Рис. 26. Прозрачность корпуса растет, прозрачность микросхемы падает Рис. 27. Корпус телефона растворяется, и становится видна установленная в нем плата Упражнение № 5. Замена одного символа на другой В прошлом уроке мы рассказали о том, как создавать и дублировать анимированные графические символы и мувиклипы, но о замене одного экземпляра символа другим речь не шла. Рассмотрим эту возможность применительно к символам, в которых используется анимация движения и изменения цвета. Программа Flash позволяет назначить экземпляру символа свойства другого символа. Для ИЗУЧАЕМ MACROMEDIA FLASH 8 - 119 - того чтобы понять, как это происходит, рассмотрим следующий пример. Создадим фильм, в котором будут задействованы два символа. Для этого построим символ-мувиклип elips-rot, в котором будет перемещаться (слева направо) и вращаться эллипс, как показано на рис. 28. Рис. 28. Мувиклип elips-rot (поворачивающийся эллипс) А также создадим еще один мувиклип — rect-blend, в котором будет перемещаться (сверху вниз) и менять цвет прямоугольник (рис. 29). Рис. 29. Мувиклип rect-blend (прямоугольник, изменяющий цвет) ИЗУЧАЕМ MACROMEDIA FLASH 8 - 120 - В результате в библиотеке появятся два мувиклипа и два графических символа, на базе которых они построены (рис. 30). Поместим экземпляры обоих клипов на сцену, в результате чего получим фильм. Рис. 30. В библиотеке содержатся два мувиклипа и два графических символа Теперь заменим свойства экземпляра мувиклипа elips-rot на свойства мувиклипа rect-blend. Обратите внимание, речь идет об изменении свойств именно экземпляра, а не самого мувиклипа! Для этого выделим экземпляр на сцене (рис. 31) и вызовем панель Properties по команде Window => Properties (если она скрыта в текущий момент). Рис. 31. Кнопка Swap дает доступ к панели Swap Symbol ИЗУЧАЕМ MACROMEDIA FLASH 8 - 121 - В панели Properties нажмем на кнопку Swap, в результате появится панель Swap Symbol (рис. 32), которая позволяет назначить экземпляру символа elips-rot свойства другого символа. Рис. 32. Панель Swap Symbol Выберем в панели символ rect-blend и нажмем кнопку ОК. Обратите внимание, что при этом сам символ elips-rot не изменился. Если заглянете в библиотеку (рис. 33), то убедитесь, что это попрежнему эллипс, который вращается и перемещается вправо. А вот его экземпляр на сцене приобрел свойства мувиклипа rect-blend. Рис. 33. Экземпляр на сцене изменился, а символ в библиотеке — нет Теперь рассмотрим вариант изменения свойств самого мувиклипа elips-rot. Дважды щелкните на экземпляре символа elips-rot, после чего произойдет переход в режим редактирования символа (рис. 34). После нажатия кнопки Swap появится панель Swap Symbol. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 122 - Рис. 34. Изменить свойства мувиклипа можно путем смены графического символа, на котором он базируется В данной панели можно изменить свойства мувиклипа путем смены графического символа, на котором он базируется. Заменим выделенный на рис. 34 символ Tween 1 (эллипс) на Tween 2 (прямоугольник) — в результате изменится сам мувиклип-символ, в чем можно убедиться, вызвав окно библиотеки (рис. 35). Рис. 35. Мувиклип elips-rot изменился Он примет форму прямоугольника, но будет по-прежнему выполнять движение с поворотом. Автоматически изменится и экземпляр символа, созданный на его основе (рис. 36). На сцене опятьтаки два прямоугольника, но анимация их различна. ИЗУЧАЕМ MACROMEDIA FLASH 8 Рис. 36. Форма экземпляров символов одинакова, а движение — разное - 123 - ИЗУЧАЕМ MACROMEDIA FLASH 8 - 124 - Урок № 7. Использование слоя маски Упражнение № 1. Неподвижная маска и анимированный фон Упражнение № 2. Анимированная маска, неподвижный фон Использование слоя маски (mask layer) позволяет закрывать часть слоя (или слоев), который находится под слоем маски. Объекты, помещенные в слое маски, позволяют видеть сквозь них непрозрачные объекты слоев, расположенных под слоем маски. Слои под слоем маски называются маскированными. Маска может быть анимированной, при этом следует отметить, что для перемещения слоя-маски нельзя применять траектории. Упражнение № 1. Неподвижная маска и анимированный фон 1. Продемонстрируем работу маски на следующем примере. Создадим слой (назовем его bgrnd), содержание которого будет видно через область маски. Для этого импортируем на сцену растровое изображение, как показано на рис. 1. Рис. 1. Растровое изображение, которое будет видно сквозь маску 2. Для создания нового слоя (слой маски) необходимо щелкнуть правой кнопкой мыши по имени слоя b-grnd и из появившегося меню выбрать пункт Insert Layer. Назовем вновь добавленный слой mask. В качестве маски напечатаем текст: «Пример маски». ИЗУЧАЕМ MACROMEDIA FLASH 8 - 125 - Рис. 2. Текст, который будет использован в качестве маски 3. Щелкнем правой кнопкой мыши по названию слоя mask и в выпадающем меню выберем пункт Mask — в результате появится изображение, как показано на рис. 3. Рис. 3. Пример использования слоя маски Как видно из рис. 3, рядом с названием слоя mask появилась специальная иконка, указывающая на то, что это слой маски. Изменилась также иконка у слоя b-grnd — она показывает, что данный слой находится под действием маски. Важно отметить, что в слое-маске Flash игнорирует растры, градиенты, прозрачные области, цвета и стили линии. Любая заполненная область в слое-маске будет полностью прозрачна, а любая незаполненная область — непрозрачна. На основе слоев маски можно создавать множество интересных эффектов, используя неподвижную маску и анимированный фон или, наоборот, анимированный фон и неподвижную маску. Рассмотрим примеры иллюстрирующие оба этих случая. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 126 - Упражнение № 1.1. Неподвижная маска и анимированный фон Создадим пример, в котором будет создаваться эффект подсветки текста за счет использования текстовой маски и подвижного фона с градиентной заливкой. 1. Вначале создаем текст, к которому будет применен эффект подсветки (рис. 4). Рис 4. Исходный текст 2. Затем добавим темный фон (чтобы усилить эффект подсветки), для чего выберем инструмент Selection, щелкнем по пункту Background в панели Properties и выберем темно-синий фон (рис. 5). Рис 5. Добавим темный фон, чтобы подчеркнуть эффект подсветки 3. Назовем слой с текстом именем text и создадим еще один слой, дав ему имя gradient. В слое gradient создадим прямоугольник, закрывающий надпись, как показано на рис. 6. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 127 - Рис. 6. Высота прямоугольника должна быть больше высоты букв надписи 4. Далее вызовем панель Color Mixer (по команде Window => Color Mixer) и настроим режим с градиентной заливкой в форме вертикальной белой полосы (рис. 7). Рис. 7. Панель Color Mixer После заливки прямоугольник примет вид, как на рис. 8. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 128 - Рис. 8. Прямоугольник с градиентной заливкой 4. Теперь зададим анимацию движения в первом кадре слоя gradient (Create Motion Tween) и вставим ключевой фрейм в 60 кадре — между первым и 60 кадром будет задана анимация Motion Tween (рис. 9). Рис. 9. Определим анимацию Motion Tween для прямоугольника с градиентной заливкой ИЗУЧАЕМ MACROMEDIA FLASH 8 - 129 - 5. Поменяем слои text и gradient местами и вставим ключевой фрейм в слое text в 60 кадре, в результате последовательность кадров с первого до 60-го заполнится текстом (рис. 10). Рис. 10. Скопируем содержание первого кадра слоя text на всю последовательность кадров 5. Теперь передвинем прямоугольник в 60 кадре вправо так, чтобы белая вертикальная линия оказалась за текстом (рис. 11). Рис. 11. Передвинем прямоугольник так, чтобы белая линия оказалась за текстом ИЗУЧАЕМ MACROMEDIA FLASH 8 - 130 - 6. Щелкнем по названию слоя text, в результате чего появится выпадающее меню (см. рис. 11). Выберем в этом меню пункт Mask. 7. Достаточно интересного эффекта можно добиться, перемещая за текстом прямоугольник, залитый растром. Возьмем в качестве растра изображение с солнечными бликами, например такое, как показано на рис. 12. Рис 12. Изображение, используемое для растровой заливки Импортируем его в библиотеку и затем зальем прямоугольник из предыдущего примера растровой заливкой (рис. 13), при этом фильм примет следующий вид. Рис. 13. Использование перемещающегося фона с растровой заливкой ИЗУЧАЕМ MACROMEDIA FLASH 8 - 131 - 8. В рассмотренном примере вместо непрерывного движения фона наблюдается его скачкообразное изменение в момент повторения ролика с начала. В ряде случаев это нежелательно — скажем, если мы хотим изобразить снегопад, то падение снежинок должно быть бесконечным и непрерывным при зацикливании фона. Рассмотрим пример с использованием маски и фона в виде снегопада, в котором показывается, как можно создать эффект непрерывного движения снежинок в зацикленном режиме. Когда мы видим снегопад, то как бы наблюдаем несколько слоев падающих снежинок, причем те, которые ближе к нам, кажутся нам крупнее и движутся быстрее. Для того чтобы светлые снежинки приобрели контрастность, необходим некий темный фон, например фотография ночного города (рис. 14). Рис. 14. Фоновое изображение «Ночной пейзаж» 9. Для того чтобы создать падающие снежинки, нарисуем прямоугольник с большей высотой, чем у сцены, — (рис. 15) и будем медленно двигать его сверху вниз. Такого же эффекта можно добиться, если перемещать за неподвижной рамкой длинный лист бумаги с нарисованными снежинками. Рис.15. Полотно со снежинками, перемещаясь сверху вниз, должно имитировать снегопад ИЗУЧАЕМ MACROMEDIA FLASH 8 - 132 - 10. При проигрывании ролика в зацикленном режиме полотно со снежинками будет перемещаться от первого кадра (в котором оно занимает положение, как на рис. 15) до последнего ( в котором оно займет положение, как на рис. 16) вновь и вновь, благодаря чему будет создан эффект непрерывного снегопада. Рис. 16. Положение прямоугольника со снежинками в последнем кадре. Если выбрать произвольное расположение снежинок на прямоугольном полотне (см. рис. 15), то бесшовного изображения при зацикленном проигрывании ролика не получится — при переходе от последнего кадра к первому вместо непрерывного движения снежинок будет наблюдаться смена одного узора снежинок на другой. 11. Как же добиться непрерывности движения снежинок? Пусть перемещение фона со снежинками происходит за сто кадров. Чтобы не было видно склейки, расположим снежинки в прямоугольнике особым образом. Разделим прямоугольник на три части (рис. 17) и добьемся того, чтобы узор в верхней части полотна, соответствующей размеру сцены (400х500 пикселов), в точности совпадал с узором в его нижней части такого же размера. Тогда в первом и сотом кадрах изображение будет полностью совпадать. Если запустить такой ролик, то в момент перехода от последнего кадра к первому все снежинки замрут на время, равное длительности одного кадра, а потом опять полетят вниз. Чтобы убрать этот недостаток, достаточно удалить сотый кадр, после чего движение снежинок будет зациклено бесшовно. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 133 - Рис. 17. Снежинки расположены не случайным образом Итак, с одним слоем мы разобрались. Далее создадим еще один слой, в котором нарисуем полотно со снежинками, которое будет не только больше по высоте, чем сцена, но и шире ее, чтобы имитировать движение снежинок на заднем плане сверху вниз и слева направо. Снежинки на заднем плане сделаем мельче, а само полотно меньше по высоте (чем первое полотно со снежинками), чтобы скорость падения снежинок на заднем плане была меньше (рис. 18). Рис. 18. Эффект снегопада создается за счет движения с разной скоростью двух полотен со снежинками ИЗУЧАЕМ MACROMEDIA FLASH 8 - 134 - Рис. 19. К текстовой маске можно добавить контурный рисунок 12. Теперь создадим в слое по имени text текст, дважды применим к тексту команду Break Apart (это переведет текст в заливку), добавим к тексту контурный рисунок (рис. 19) и переведем слой в режим Mask. При этом слой snow1, который находится под слоем text, автоматически станет маскированным, а остальные останутся немаскированными (рис. 20). Рис. 20. Слой snow1 стал маскированным ИЗУЧАЕМ MACROMEDIA FLASH 8 - 135 - 13. Для того чтобы сделать два оставшихся слоя маскированными, достаточно в режиме drag&drop слегка приподнять их вверх. Можно также обратиться к меню Layer Properties, щелкнув по слою правой кнопкой мыши, и в одноименной панели поставить флажок в пункте Masked (рис. 21). Рис 21. Пример изменения свойств слоя с обычного на маскированный Упражнение № 2. Анимированная маска, неподвижный фон (самостоятельно, рисунки найди в Интернете) До этого мы рассматривали фильмы, в которых была неподвижная маска и подвижный фон, теперь рассмотрим вариант с неподвижным фоном и анимированной маской. 1. Создадим слой circle (рис. 22), в котором будем создавать анимированную маску. Маска будет представлять собой круг, который будет расти от минимального до максимального радиуса за пять кадров (это будет стадия открывания слайда), затем в течение 10 кадров будет показываться круг максимального диаметра (стадия показа), после чего опять в течение пяти кадров диаметр круга будет уменьшаться от максимума до минимума (стадия закрывания слайда). Весь цикл занимает 20 кадров (см. рис. 22). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 136 - Рис 22. Круг, меняющийся в размере, будет работать подобно диафрагме, открывая и закрывая зрителю кадры Поскольку в нашем примере три рисунка, скопируем полученную последовательность дважды: на отрезок кадров 21-40 (чтобы маскировать второй рисунок) и на отрезок 41-60 (маскировать третий рисунок). Для этого, удерживая клавишу Shift, щелкнем по первому кадру, затем по 20-му (последовательность кадров с первого по 20-й окрасится в черный цвет), затем, отпустив Shift, щелкнем правой кнопкой мыши по черному полю и выберем из ниспадающего меню пункт Copy Frames. Далее перейдем в 21-кадр, вновь вызовем меню правым щелчком мыши и выберем в нем пункт Paste Frames. Повторим эту процедуру для кадров 41-60. Затем добавим второй слой pictures и поместим в нем картинки, после чего переведем слой circle в режим маски (рис. 23), что приведет к желаемому результату. Рис. 23. Пример использования анимированной маски ИЗУЧАЕМ MACROMEDIA FLASH 8 Контрольная работа № 4. Покадровая анимация. Создай покадровую анимацию полета птицы. Используй рисунки из приложения. - 137 - ИЗУЧАЕМ MACROMEDIA FLASH 8 - 138 - Урок № 8. Интерактивность во Flash Упражнение № 1. Создание кнопок Упражнение № 2. Понятие об Action Script Упражнение № 3. Интерактивный фотоальбом Упражнение № 4. Автоматизированное написание скрипта До сих пор мы рассматривали Flash-фильмы, которые воспроизводились без вмешательства зрителя от начала и до конца. Однако Flash позволяет также создавать интерактивные приложения, в которых пользователь может управлять демонстрацией контента. В данном уроке мы начнем знакомство с элементами языка описания сценариев Action Script и рассмотрим, как с его помощью можно создать интерактивные приложения. В качестве примера создадим фотоальбом с элементами интерактивного интерфейса. Но прежде чем приступить к описанию Action Script, следует рассказать еще об одном виде символов, который мы до сих пор оставляли без внимания, — это символы-кнопки. Для построения интерактивного интерфейса они просто необходимы. Упражнение № 1. Создание кнопок Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров: • Up-состояние — это кадр, соответствующий ситуации, когда кнопка не нажата и указатель мыши расположен не над кнопкой; • Over-состояние — кадр, иллюстрирующий вид кнопки, когда указатель мыши расположен над кнопкой, но кнопка не нажата; • Down-состояние — данный кадр показывает вид кнопки при ее нажатии; • Hit-состояние — определяет область, в которой кнопка реагирует на щелчок мыши; эту область в клипе не видно. 1. Чтобы создать кнопку, выполните команду Insert => New Symbol (можно набрать сочетание клавиш Control+F8). В появившемся диалоговом окне Create New Symbol введите имя символакнопки (например, but1) и выберите тип символа Button («Кнопка»). 2. Flash переключится в режим редактирования символа, предоставив кадры Up, Over, Down и Hit. Первый кадр, Up, становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки (рис. 1). Рис. 1. UP-кадр кнопки ИЗУЧАЕМ MACROMEDIA FLASH 8 - 139 - 3. Выделим второй кадр, помеченный как Over и соответствующий состоянию, когда курсор занесен над кнопкой. Вставим в этом кадре ключевой фрейм (по команде Insert => Keyframe ), в результате чего появится ключевой кадр, полностью повторяющий содержание Up-кадра. Изменим цвет кнопки, как показано на рис. 2. Рис 2. Over-кадр кнопки 4. Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис. 3). Рис. 3. Down-кадр кнопки 5. В Hit-кадре пока не будем ничего рисовать, а вернемся к этому кадру чуть позже. Перейдем к основной сцене, вызовем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перетаскивания его на сцену (рис. 4.) ИЗУЧАЕМ MACROMEDIA FLASH 8 - 140 - Рис. 4. Создадим экземпляр кнопки, перетащив его из библиотеки 6. В результате получим следующий фильм. Как видно из данного фильма, надавливание кнопки происходит не только тогда, когда мы нажимаем мышью на центральную (рабочую) зону кнопки, но и при нажатии на рамку вокруг нее. Связано это с тем, что если Hit-кадр не нарисован, то рабочая область кнопки будет соответствовать Up-кадру. 7. Для того чтобы нажатие кнопки происходило только в рабочей зоне, необходимо в Hit-кадре определить эту зону, то есть нарисовать кнопку без рамки (см. рис. 5) Рис. 5. Hit-кадр кнопки После того как мы добавим необходимый Hit-кадр получим следующий фильм, в котором при нажатии на рамку продавливания кнопки не происходит. 8. Чтобы сделать кнопку интерактивной, необходимо связать факт нажатия кнопки с выполнением определенных команд, то есть описать определенный сценарий. Для задания ИЗУЧАЕМ MACROMEDIA FLASH 8 - 141 - сценариев во Flash существует специальный язык Action Script. В данном уроке мы затронем лишь незначительную часть возможностей этого языка, а в дальнейшем будем возвращаться к структуре и синтаксису Action Script по мере усложнения примеров создания интерактивных фильмов на Flash. Упражнение № 2. Понятие об Action Script Action Script представляет собой язык написания сценария — набора инструкций, которые управляют элементами Flash-фильма. Сценарии Action Script могут быть встроены в фильм или храниться во внешнем текстовом файле с расширением AS. При встраивании сценария в фильм его можно внедрять в разные части фильма. Точнее, сценарии Action Script могут содержать ключевые кадры, экземпляры кнопок и экземпляры мувиклипов. Соответственно сценарии называются сценариями кадра (Frame Action), сценарием кнопки (Button Action) и сценарием клипа (MovieClip Action). Сценарии Action Script выполняются по наступлении определенных событий, инициированных пользователем или системой. Механизм, который указывает программе Flash, какой оператор следует выполнить при наступлении того или иного события, называется обработчиком событий. Action Script имеет собственный синтаксис, во многом схожий с синтаксисом JavaScript. Flash MX 2004 поддерживает Action Script всех предыдущих версий Flash. Одним из основных понятий Action Script являются Actions — команды, которые выдают инструкции во время исполнения SWF-файла. Например, gotoAndStop() отсылает воспроизводящую головку (Рlayhead) на определенный кадр или метку. От слова Actions и происходит название языка — Action Script (дословно — сценарий действий). С большинством понятий этого языка мы ознакомимся на конкретных примерах. Упражнение № 3. Интерактивный фотоальбом (для самостоятельной работы) Продемонстрируем использование кнопок для управления фотоальбомом — создадим набор фотографий и добавим две кнопки, которые будут листать фото вперед и назад. 1. Создадим один слой кнопка, другой фотографии. Поместим на основной монтажной линейке слоя фотографии первое фото и добавим кнопку из стандартного набора на слой кнопка. Для доступа к нужной папке следует выполнить команду Windows => Common Libraries => Buttons (рис. 6). Рис. 6. Добавим кнопку из стандартной библиотеки В результате выполнения данной команды появится панель, содержащая большой набор заранее нарисованных кнопок различных типов. Выберем, например, classic buttons => Key Buttons (кнопки, похожие на клавиатурные клавиши), откроем соответствующую папку, выберем кнопку key-left (рис. 7) и создадим экземпляр данной кнопки (путем перетаскивания ее на сцену). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 142 - Рис. 7. Элементы папки Key Buttons Обратите внимание, что, когда вы устанавливаете вторую кнопку (key-right) на сцене и перемещаете ее, чтобы установить на одном уровне с первой кнопкой, программа дает подсказку (пунктирную линию), которая позволяет точно позиционировать кнопку (рис. 8). Рис. 8. Автоматическое выравнивание кнопок на одном уровне 2. Для того чтобы добавить сценарий, необходимо вызвать редактор Action Script по команде Window =>Actions или нажав клавишу F9. Если вы собираетесь часто писать скрипты, то эту клавиатурную команду стоит запомнить. В результате появится редактор Action Script (рис. 9). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 143 - Рис. 9. Панели редактора Action Script Если вы поэкспериментируете, выделяя различные элементы на сцене, одновременно отслеживая сообщения в панелях редактора Action Script, то обнаружите, что программа подсказывает, на какой элемент можно «вешать» код. Если выделить на сцене кадр, то в верхнем левом углу панели редактора появляется надпись Actions — Frame, если щелкнуть по кнопке, то появится надпись Actions — Button, то есть программа подсказывает, что вводимый код будет относиться к сценарию кнопки. А если выделить фотографию, то в поле, предназначенном для ввода скрипта, появится сообщение: Current selection cannot have actions applied to it (к данному выделенному объекту нельзя применить сценария). Мы будем присваивать сценарий кнопке. В последних версиях ActionScript имеется возможность писать централизованный код, то есть код, который размещен в одном месте, и такая возможность позволяет лучше разбираться в больших программах. Однако в простых примерах (которые мы и рассматриваем) присваивание сценария кнопке вполне допустимо. 3. Итак, для кнопки со стрелкой влево нам нужно формализовать следующий сценарий: «Если кнопка отпускается на некотором кадре, то с этого кадра необходимо перейти на предыдущий кадр». В соответствии с синтаксисом языка Action Script (рис. 10) это будет выглядеть следующим образом: on (release) { prevFrame(); } В первой строчке записан обработчик событий кнопки on( ), имеющий формат: on (event) { текст сценария } ИЗУЧАЕМ MACROMEDIA FLASH 8 - 144 - Здесь event — это название события, в рассмотренном случае release (отпускание кнопки); может также отслеживаться такое событие, как press (нажатие кнопки), и другие события, которые мы рассмотрим позже. Функция prevFrame — это функция безусловного перехода, которая перемещает воспроизводящую головку в предыдущий кадр. Она находится внутри обработчика событий, то есть может исполняться только в случае наступления описанного события. Рис. 10. Сценарий кнопки «Назад» 4. Аналогично на вторую кнопку (кнопка направленная вправо) повесим код, обеспечивающий переход к следующему кадру: on (release) { nextFrame(); } 5. Теперь добавим несколько ключевых кадров так, что в них скопируются созданные в первом кадре кнопки, и поместим во вновь созданные кадры нужные фотографии. Если запустить на исполнение созданный фильм, то кадры будут непрерывно проигрываться один за другим, а следовательно, прежде всего нам нужно дать команду «Стоп» на первом кадре. Для этого первому кадру добавим соответствующую команду (рис. 11). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 145 - Рис. 11. Сценарий, присвоенный первому кадру Обратите внимание: команда присваивается уже не кнопке, а кадру. Тот факт, что кадру присвоен сценарий, отмечается на основной монтажной линейке — в обозначении кадра над жирной точкой появляется строчная буква «a». 6. Если у нас в фотоальбоме всего несколько кадров, то двух кнопок — «Вперед» и «Назад» — вполне достаточно, но если набор фотографий большой, то желательно иметь еще и кнопки, отсылающие в начало и конец фильма. В следующем примере мы добавим соответствующие кнопки: «В первый кадр» и «В последний кадр». Выбрать кнопки подходящей мнемоники можно из стандартной библиотеки кнопок из папки Windows => Common libraries => classic buttons => Сircle Вuttons (рис. 12). 7. На предлагаемом примере мы ознакомимся с еще одной командой gotoAndStop( ), которая позволяет перейти к нужному кадру с последующей остановкой. Рис. 12. Кнопки из папки Circle Buttons На кнопку перехода к первому кадру (третья слева на рис. 13) повесим код, как показано на рис. 13. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 146 - Рис. 13. Сценарий для кнопки «В первый кадр» В случае с фотоальбомом из пяти кадров в последнюю кнопку добавим сценарий перехода «В последний кадр»: on (release) { gotoAndStop(5); } Упражнение № 4. Автоматизированное написание скрипта До сих пор мы набирали все команды вручную, однако панели редактора ActionScript предоставляют целый ряд сервисов для автоматизированного написания скрипта. Рассмотрим эти возможности. Рис. 14. Средства автоматизированного написания скрипта ИЗУЧАЕМ MACROMEDIA FLASH 8 - 147 - Панель редактора Action Script позволяет выбирать, перетаскивать, перераспределять и удалять команды. 1. Покажем, как можно написать тот же скрипт для кнопки «Вперед» в автоматизированном режиме. Выбрав папку Global Funnction => Movie Clip Control (верхнее левое окно на рис. 14) можно получить доступ к обработчику событий on, а далее нужно либо дважды щелкнуть по соответствующему пункту, либо перетащить выражение на поле написания скрипта в режиме Drag and Drop. Рис. 15. Подсказка для завершения выражения 2. В результате на рабочем поле появится необходимое выражение и подсказка вида (рис. 15): вы выбираете из меню нужную команду и выражение завершается автоматически. Как видно из меню, можно выбрать не только условие, связанное с экранными кнопками, — можно, также, выбрать из меню рис. 15 пункт keyPress “<Left>”, или keyPress “<Right>”, что соответствует нажатию клавиатурных клавиш (стрелка влево, стрелка вправо ), то есть имеется возможность создать фотоальбом, который будет «перелистываться» с помощью клавиш клавиатуры. Рис. 16. Обращения к кнопке клавиатуры 3. Задействуем команду keyPress “<Right>” (рис. 16), затем перейдем в папку Timeline Control, выберем команду nextFrame и перетащим ее на рабочее поле (рис. 17). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 148 - Рис. 17. Команду nextFrame можно найти в папке Timeline Control 4. Для кнопки, переводящей фильм в начало фотоальбома, в качестве события можно выбрать из меню нажатие клавиши Home, а далее (рис. 18) перетащить на поле команду gotoAndStop, в результате чего появится еще одна подсказка по возможному синтаксису данной команды. 5. Стрелочки в подсказке позволяют просмотреть разные варианты синтаксиса. Программа предоставляет два варианта (рис. 18 и 19), то есть предлагает задать сцену и кадр или только кадр. В нашем случае достаточно указать только кадр (Frame). Если название сцены опущено, то по умолчанию осуществляется переход к кадру текущей сцены. Рис. 18. Подсказка по возможному синтаксису команды ИЗУЧАЕМ MACROMEDIA FLASH 8 - 149 - Рис. 19. Стрелочка-треугольник позволяет просматривать варианты синтаксиса После того как мы назначим всем кнопкам соответствующие кнопки клавиатуры, получим следующий фильм, где листание фотографий будет происходить с клавиатуры, а нажатие мышью на экранные кнопки не будет вызывать никаких последствий. 6. Можно ли обеспечить сценарий, при котором разные события будут приводить к одним и тем же действиям? Оказывается, можно — для этого в обработчике событий on необходимо перечислить список наименований событий. Если вы поставите запятую в списке событий после первого события, то программа сама предложит вам меню (рис. 20). Рис. 20. При введении запятой в списке событий автоматически появляется меню дополнительных команд 7. Добавим к первому событию (нажатие клавиатурной кнопки) второе событие (отпускание экранной кнопки): on (keyPress "<Left>", release) { prevFrame(); } Повторим процедуру для остальных кнопок и в результате получим фотоальбом, в котором листание фотографий будет происходить как с помощью мыши, так и с помощью клавиатуры. 8. В рассмотренном примере мы использовали переход по номеру кадра, но этот способ не всегда удобен: если в процессе редактирования фильма нумерация кадров изменится, то логика может нарушиться. Более удобно использовать переход по метке кадра. Рассмотрим пример, в ИЗУЧАЕМ MACROMEDIA FLASH 8 - 150 - котором потребуется не только перелистывание альбома, но и переход к разным разделам, то есть более сложная навигация. Пусть альбом будет состоять из рисунков, компьютерной графики и фотографий. Первому кадру раздела «рисунки» дадим метку Pictures, аналогично первым кадрам других разделов присвоим метки graphics и photo. Создадим слой для размещения меток и назовем его Lables. Для того чтобы поставить метку кадру, в панели Properties необходимо выбрать тип метки Name и записать ее имя. В нашем случае Pictures (рис. 21). Аналогично разместим метки в кадрах 5 и 10 (рис. 22). Рис. 21. Пример присвоения кадру метки 9. Теперь добавим новый слой и назовем его Actions. В первом ключевом кадре слоя Actions вызовем панель Actions Frame (путем нажатия кнопки F9) и наберем команду stop ( ) (см. рис. 22) Рис. 22. Сценарий первого кадра ИЗУЧАЕМ MACROMEDIA FLASH 8 - 151 - 10. Добавим еще один слой под именем Subjects (тематика), в котором дадим заглавия соответствующим кадрам: «Рисунки» (рис. 23), «Графика» и «Фото». Методом копирования. Рис. 23. Заглавие для кадров раздела «Рисунки» 11. Теперь добавим сбоку кнопки меню с аналогичными именами, которые расположим на новом слое под названием Мenu. Напечатаем с левого края первый пункт меню «Рисунки» и переведем его в кнопочный символ. С помощью инструмента Selection выделим текстовый блок «Рисунки» и выполним команду Modify => Convert to Symbol (эту команду можно выполнить и с помощью клавиши F8), в панели Convert to Symbol зададим тип символа Button и определим его имя как pictureButton (рис. 24). Рис. 24. Назначим кнопке перехода к разделу рисунков имя рictureButton 12. Создадим четыре кадра для кнопки «Рисунки»: первый будет представлять просто исходный текст (рис. 25), второй — тот же текст только синего цвета, третий кадр мы пропустим (в этом случае Down-кадр будет такой же, как и Over-кадр), а в Hit-кадре нарисуем прямоугольную область, которая определит область нажатия кнопки (рис. 26). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 152 - Рис. 25. Up-кадр кнопки pictureButton Рис. 26. Hit-кадр кнопки pictureButton 13. Теперь нам нужно повесить сценарий на вновь созданную кнопку. Для этого выделим кнопку в сцене Scene 1 и, нажав F9, вызовем панель Actions, а затем внесем код, показанный на рис. 27. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 153 - Рис. 27. Сценарий перехода на кадр с меткой 14. Аналогично создадим остальные кнопки. Далее добавим еще один слой, назовем его Images и внесем в него необходимые изображения — и всё: наш альбом готов. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 154 - Урок № 8. Работа со звуком во Flash Упражнение № 1. Некоторые базовые понятия Упражнение № 2. Где взять звуки? Упражнение № 3. Добавление звука во Flash Упражнение № 4. Импорт звуков Упражнение № 5. Различные виды синхронизации Режим синхронизации Event Режим синхронизации Start Режим синхронизации Stop Режим синхронизации Stream Зацикливание звука Добавление звука к кнопке Упражнение № 6. Использование средств редактирования звука Упражнение № 7. Сжатие звуков для экспорта Упражнение № 8. Применение компрессии к выбранным звукам Упражнение № 9. Применение компрессии ко всем звукам Упражнение № 10. Общие рекомендации по экспорту звука Использование звука позволяет существенно усовершенствовать Flash-проекты. Звук дополняет визуальный ряд, воздействуя на другой канал чувственного восприятия зрителя, и тем самым делает анимацию более убедительной. По звуку, произведенному падающей болванкой, будет ясно, железная она или деревянная, даже если она не залита текстурой. Можно сказать, что звук придает проекту новое измерение. В данном уроке мы рассмотрим, какой же инструментарий предлагает Flash MX 2004 для работы со звуком. Упражнение № 1. Некоторые базовые понятия Прежде чем изложить принципы работы со звуком во Flash, следует напомнить читателю некоторые базовые понятия и термины. Процесс преобразования аналогового звука в цифровой определяется двумя параметрами: частотой дискретизации и разрядностью. Устройство преобразования аналогового сигнала в цифровой измеряет амплитуду аналогового сигнала через малые промежутки времени и выдает результаты измерений в виде чисел. Результат дискретизации не является точным аналогом непрерывного электрического сигнала. Соответствие тем полнее, чем чаще происходят измерения и чем они точнее. Частота, с которой производятся измерения, называется частотой дискретизации (Sampling Rate). Чем меньше частота дискретизации, тем больше запись будет отличаться от исходной. Например, для музыки на CD требуется частота дискретизации 44,1 кГц, для музыкальных клипов на радио FM достаточно 22,05 кГц, а для речи допускается всего 5 кГц. На точность измерений амплитуды указывает число бит, использующихся для представления результата измерений (Sample Size). Например, каждый отсчет 8-битного звука может принимать 256 значений, 16-битного — 65 536 и т.д. Музыка на компакт-диске требует 16 бит, а музыкальные клипы на радио диапазона FM — 8 бит. Звуковой файл может содержать несколько каналов: один канал — моно, два канала — стерео и т.п. В соответствии с вышеизложенным размер звукового файла будет определяться произведением сомножителей: частота дискретизации (Гц), разрядность (бит), продолжительность (с), количество каналов. Чем меньший объем занимает файл, тем быстрее удается передать его из Web потребителю. Упражнение № 2. Где взять звуки? 1. Достаточно большая коллекция звуков находится по адресу: http://www.flashkit.com/soundfx/, где размещены тысячи звуковых файлов, которые можно бесплатно скачивать и использовать в своих проектах. Звуки разделены по категориям (окружающая среда, мультипликация, коммуникации, существа, природа, люди, интерфейсы и т.п.). Можно прочитать описание каждого звука и прослушать его в онлайне (рис. 1). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 155 - Для каждого звука указаны длина (length), частота дискретизации (Sample Rate), разрядность и размер. Рис. 1. Пример описания звукового файла на flashkit.com 2. Если же вам нужно озвучить героя или прочитать некоторый текст, то придется записать речь самому. Наиболее простой способ — это вызвать программу для записи звука, входящую в стандартную поставку Windows XP, по команде Accessories => Entertainment => Sound Recorder (рис. 2) и записать нужный звуковой файл. Интерфейс программы полностью повторяет клавиши обычного магнитофона. Рис. 2. Программа Sound Recorder Упражнение № 3. Добавление звука во Flash Flash MX предлагает множество инструментов для встраивания звуков в анимацию. Можно использовать звуки, раздающиеся непрерывно, независимо от монтажной линейки, или синхронизировать мультипликацию со звуковой дорожкой. Можно добавить звуки к кнопкам, чтобы усилить их интерактивность, можно заставить звуки постепенно появляться или исчезать для получения различных эффектов. При передаче озвученной Flash-анимации из Web критичным является размер файла. При создании Flash-фильма программа предоставляет пользователю набор опций сжатия звука для управления качеством и размером звуковых файлов в экспортируемом Flash-клипе. Рассмотрим все эти возможности более подробно. Упражнение № 4. Импорт звуков Рассмотрим простой пример. Скачаем с Flashkit.com короткий звуковой файл в формате Waw и импортируем его в библиотеку, используя команду File => Import => Import to Library. Соответственно в окне Library появится звуковой файл. Активизировав его щелчком мыши (рис. 3), можно просмотреть его графическое отображение и проиграть, нажав на кнопку «Воспроизведение». ИЗУЧАЕМ MACROMEDIA FLASH 8 - 156 - Рис. 3. Графическое отображение звука Далее создайте экземпляр звука, перетащив его из библиотеки на сцену, в результате чего звук будет добавлен в текущий кадр (рис. 4). Рис. 4. Создание экземпляра звука В этом, самом простом, случае Flash-фильм состоит из аудиофайла без анимации. Прежде чем перейти к рассмотрению совместного использования анимации и звука, следует рассказать о том, какие варианты синхронизации звука и анимации предлагает программа Flash. Упражнение № 5. Различные виды синхронизации Режим синхронизации Event Данный тип синхронизации используется по умолчанию. Экземпляр звука, использующий данную синхронизацию, называют событийным. Он начинает воспроизводиться, когда проигрывается ключевой кадр, в котором он расположен, и исполняется полностью, независимо от длины линейки, даже если мувиклип останавливается. То есть если экземпляр пятисекундного звука поместить в кадрах, которые проигрываются за секунду, то он все равно прозвучит до конца. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 157 - Повторное использование событийного звука не приводит к существенному увеличению объема результирующего файла. При загрузке фильма из сети событийный звук может быть воспроизведен только после полной загрузки. В нашем примере шарик падает и сплющивается. В момент, когда начинается деформация шарика (в 20-м кадре), включается событийный звук. На рис. 5 начало графического отображения звука видно в кадрах 20-23. Рис. 5. Озвучивание падения мяча Несмотря на то что на 23-м кадре фильм заканчивается, звук удара проигрывается до конца. Следует отметить, что событийные звуки могут накладываться сами на себя (микшироваться). Поясним это на примере (рис. 6). На монтажной линейке имеются два слоя. Слой Тext содержит 25 кадров со статичным поздравительным текстом, а слой Sound — звуковой файл с поздравительной речью на 4,9 с. Установлен режим синхронизации Event, количество повторов Repeat = 1. Частота кадров составляет 10 кадров/с. При воспроизведении этого фильма будет происходить следующее: стартует выполнение звукового файла (который будет воспроизводиться 4,9 с), но через 2,5 с все 25 кадров фильма закончатся, и он запустится снова, поэтому речь будет накладываться сама на себя. Рис. 6. Пример с наложением речи ИЗУЧАЕМ MACROMEDIA FLASH 8 - 158 - Режим синхронизации Start Данный вид синхронизации исключает возможность наложения звуков. Если в примере, рассмотренном на рис. 6, мы поменяем режим синхронизации с Event на Start (рис. 7), то получим фильм, в котром не будет наложения. Рис. 7. Пример, в котором отсутствует наложение речи Режим синхронизации Stop Режим Stop останавливает воспроизведение экземпляров того же звука. На рис. 8 показан пример, в котором в слое sound-2 используется звук типа Stop. Как только воспроизводящая головка входит в кадр, содержащий звук типа Stop (в нашем примере 15-й кадр), воспроизводящиеся в этот момент экземпляры того же звука останавливаются. Рис. 8. Пример использования режима синхронизации Stop ИЗУЧАЕМ MACROMEDIA FLASH 8 - 159 - Режим синхронизации Stream Режим синхронизации Stream используется для синхронизации потокового звука и анимации для воспроизведения в Web. Flash подстраивает мультипликацию под темп потокового звука. Потоковый звук имеет приоритет перед визуальным рядом: если Flash не может прорисовывать кадры мультипликации достаточно быстро, он пропускает их, а целостность звучания сохраняется. В отличие от звуков события, потоковый звук прекращается, если останавливается анимация. Также потоковый звук никогда не может играть дольше, чем воспроизводится количество кадров, которое он занимает. Пример потокового звука — голос персонажа мультипликации, воспроизводимый в течение большого количества кадров. Зацикливание звука Для того чтобы снабдить клип фоновой музыкой, не сильно увеличив при этом вес файла, применяют зацикливание воспроизведения звука. В качестве исходных звуков в данном случае используются так называемые звуковые петли (Sound Loops). Найти звуковые петли можно на том же Flashkit.com в разделе Loops Home (рис. 9). Рис. 9. Loop-фрагменты на Flashkit.com Рассмотрим пример, в котором нужно обеспечить звучание фоновой музыки в течение 8,2 мин, имея Loop-фрагмент на 8,2 с. Задача решается просто: устанавливаем количество повторов 60, и фоновая музыка обеспечена (рис. 10). Рис. 10. Пример использования фоновой музыки ИЗУЧАЕМ MACROMEDIA FLASH 8 - 160 - Обратите внимание: несмотря на то что звуковой файл повторяется многократно, вес SWFфайла остается постоянным при однократном и многократном зацикливании. Теперь посмотрим, что будет, если мы поместим тот же Loop-фрагмент в режиме синхронизации Stream и зададим разное количество повторов Repeat. При однократном повторе (при частоте 12 кадров/с) понадобится создать на монтажной линейке как минимум 97 кадров (рис. 11). Рис. 11. Режим синхронизации Stream, количество повторов — один Если же мы хотим повторить петлю дважды (рис. 12), нам потребуется вдвое больше кадров, соответственно вес файла увеличится вдвое. Таким образом, повтор потоковых звуков не рекомендуется. Рис. 12. Фильм занимает в два раза больше кадров ИЗУЧАЕМ MACROMEDIA FLASH 8 - 161 - Рис. 13. Добавление фоновой музыки Теперь рассмотрим пример, в котором используем тот же Loop-фрагмент для звукового сопровождения анимации (рис. 13). Для помещения звукового файла создадим слой sound. Обратите внимание: если мы добавим Loop-фрагмент, который превышает 34 кадра (длина анимационного ролика), и поставим режим синхронизации Event и режим повторов Loop, то мелодия будет накладываться сама на себя. Если же мы поставим параметры Start/Loop (как показано на рис. 13), то получим следующий озвученный фильм. Добавление звука к кнопке Интерфейс становится более выразительным, когда нажатие на кнопки сопровождается не только визуальными, но и звуковыми эффектами. Кстати, на Flashkit.com есть целый раздел, посвященный звукам для элементов интерфейса. Рассмотрим, как можно добавить звуковые эффекты к кнопкам. 1. Для начала обратимся к папкам с готовыми кнопками по команде Window => Common Libraries => Buttons (рис. 14). В результате появится панель, рис. 15. Выберем, например, овальную кнопку и переместим ее на рабочий стол сцены. Затем откроем библиотеку проекта по команде Window => Library, выделим кнопку и, щелкнув по ней правой кнопкой, выберем режим редактирования — Edit (рис. 16). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 162 - Рис. 14. Доступ к библиотеке кнопок Рис. 15. Выбор кнопки из папки Oval buttons ИЗУЧАЕМ MACROMEDIA FLASH 8 - 163 - Рис. 16. Переход в режим редактирования кнопки В результате появится монтажная линейка кнопки (рис. 17). Создадим на этой монтажной линейке новый слой для звука и назовем его Sоund. Рис. 17. Добавление нового слоя Sound Если нужно озвучить процесс нажатия кнопки, следует создать ключевой кадр во фрейме с меткой Down. Импортируем в библиотеку необходимый звук, а затем добавим его в ключевой кадр Down (рис. 18). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 164 - Рис. 18. Добавление звука кнопке В панели Properties (рис. 19) выберем режим синхронизации Event (количество повторов 1). Рис. 19. Режим синхронизации для звука кнопки ИЗУЧАЕМ MACROMEDIA FLASH 8 - 165 - Упражнение № 6. Использование средств редактирования звука Программа Flash позволяет редактировать импортированный звук: задавать точки начала и конца воспроизведения, управлять его громкостью, задавать эффекты и т.д. Доступ к редактору осуществляется из панели Properties. Для редактирования звукового файла выберите кадр, содержащий звук, и щелкните на кнопке Edit в правой стороне панели Properties. В результате появится панель редактирования шаблона Edit Envelope (рис. 20). Рис. 20. Окно редактирования шаблона Edit Envelope Как видно на рис. 20, часть речевого файла, в котором содержится начальная пауза (период с момента включения записи до первого произнесенного слова), расположена вне зоны воспроизведения. Достигается это путем перемещения указателей начала и конца звучания (рис. 21). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 166 - Рис. 21. Указатели начала и конца звучания Для того чтобы исключить ненужные участки, достаточно переместить указатели начала и конца звучания (Time In Control и Time Out Control) так, чтобы в зону воспроизведения попала только речь диктора. Редактор позволяет также изменить уровень громкости для левого и правого каналов путем перемещения управляющих маркеров (Envelope handles) (рис. 22), которые позволяют установить вид огибающей, определяющей характер изменения громкости. В нашем примере (см. рис. 22) мы установили маркеры таким образом, чтобы имитировать перетекание звука из одного канала в другой. То есть в правом канале звук начинает воспроизводиться с максимальной громкостью и спадает до минимума, а в левом — наоборот. В результате получается эффект перетекания звука из одного канала в другой. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 167 - Рис. 22. Эффект перетекания звука из одного канала в другой Можно создать и более сложные профили огибающей (рис. 23). Дополнительные маркеры (общим количеством до восьми) создаются простым щелчком на огибающей линии уровня звука. Чтобы удалить маркер, его следует перетащить за пределы окна. Рис. 23. Добавляя маркеры, можно задавать сложный профиль огибающей Эффект, который мы создали в примере (см. рис. 22) вручную, путем перетаскивания маркеров, можно задать проще. Для этого следует обратиться к окошку Effect, которое расположено в верхней части панели Edit Envelope (рис. 24). Если выбрать в этом окошке режим Fade Right to Left (рис. 24), то огибающие примут тот же вид, что и на рис. 22. Рис. 24. Эффект Fade Right to Left Если выбрать обратный эффект (Fade Left to Right), то получим расположение огибающих, показанное на рис. 25. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 168 - Рис. 25. Эффект Fade Left to Right С другими эффектами читатели легко разберутся сами. Упражнение № 7. Сжатие звуков для экспорта Звук, несомненно, украшает Flash-проект, однако вес файла при добавлении звука увеличивается и соответственно скорость доставки фильма из Web падает. Flash позволяет настроить опции сжатия для отдельных звуков, то есть для различных типов звуков (музыка, короткие звуки, речь) подобрать разные алгоритмы сжатия. Также можно настроить опции компрессии для всех событийных и потоковых звуков одновременно. Упражнение № 8. Применение компрессии к выбранным звукам Flash позволяет применить опции компрессии к выбранным звукам для экспорта. Для установки экспортных свойств для отдельного звука щелкните правой кнопкой мыши на звуковом файле в окне библиотеки и выберите пункт Рroperties в контекстном меню. в результате появится панель Sound Properties (рис. 26). Рис. 26. Панель Sound Properties ИЗУЧАЕМ MACROMEDIA FLASH 8 - 169 - Рис. 27. Опции сжатия Выберите одну из опций сжатия (рис. 27): Default, ADPCM, MP3, Raw или Speech. Опция сжатия Default использует при экспорте Flash-клипа стандартные параметры сжатия звука, заданные в диалоговом окне Publish Settings. При выборе сжатия Default все дополнительные экспортные настройки становятся недоступны. Опция сжатия ADPCM позволяет использовать алгоритм сжатия ADPCM (Adaptive Differential Pulse Code Modulation), производящий сжатие с фиксированной скоростью, при котором все данные сжимаются на одну и ту же величину. Использование ADPCM-компрессии целесообразно при экспорте коротких звуков типа щелчков кнопки. Опция сжатия MP3 позволяет экспортировать звуки с MP3-компрессией. MP3 (MPEG-1 Audio Layer-3) — эффективный алгоритм, уменьшающий количество избыточной информации, которая используется для описания цифрового звука, и учитывающий особенности восприятия звука. Известно, например, что человеку свойственна неравномерная чувствительность к восприятию звука на разных частотах. Целесообразно использовать формат MP3 при экспорте длинных звуковых фонограмм, таких как музыкальные композиции. При экспорте импортированного MP3-файла можно оставить те настройки, с которыми он был импортирован. Опция Raw экспортирует звуки без компрессии. Опцию Speech целесообразно выбрать для экспорта речи. В данном случае будет использован алгоритм компрессии, специально адаптированный для сжатия речи. Упражнение № 9. Применение компрессии ко всем звукам На этапе экспорта проекта в Swf-файл, производимого по команде File => Export => Export Movie, после того, как вы определите имя сохраняемого файла, появится панель вида, как на рис. 28. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 170 - Рис. 28. Панель Export Flash Player Для задания частоты и степени сжатия звука для всех потоковых звуков и звуков событий в клипе нажмите на кнопку Set напротив Audio Stream для редактирования потоковых звуков (см. рис. 28) или Audio Event для редактирования событийных звуков и выберите опции компрессии, частоты и качества в диалоговом окне Sound Settings (рис. 29). Рис. 29. Панель Sound Settings Упражнение № 10. Общие рекомендации по экспорту звука Не зацикливайте потоковые звуки. Корректируйте точки начала и окончания звуков, чтобы не сохранять тишину. Используйте один и тот же звук, применяя к нему различные эффекты, чтобы добиться иллюзии воспроизведения различных звуков. Используйте индивидуальный режим сжатия для разных звуковых файлов. Используйте Loop-фрагменты (Петли) для коротких звуков при создании фоновой музыки. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 171 - Контрольная работа №4. Работа со звуком в Macromedia Flash. Создание интерактивных роликов Задание 1. Создайте ролик со звуком (сюжет свой) из одной сцены. Подберите самостоятельно звуковые фрагменты в наиболее оптимальном формате. Создайте звуковое сопровождение ролика таким образом, чтобы: a. использовался как минимум один звуковой фрагмент в качестве фона, т.е. на протяжении всего Flash-фильма. b. использовался как минимум один звуковой фрагмент для озвучивания части Flashфильма. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 172 - Урок 10. Моделирование эффекта освещения букв Для создания баннеров весьма интересным эффектом является освещение букв. Рассмотрим, как можно смоделировать подобный эффект. Рис. 1. Исходный текст 1. Вначале печатаем необходимый текст (рис. 1). 2. Затем преобразуем текст в начертание Bold и меняем цвет текста на белый — соответствующие инструменты доступны в панели Properties (рис. 2). Далее, выбрав инструмент Selection, щелкнем по фону текста и в появившейся панели Properties (см. рис. 2) выберем цветом фона (Background) черный. Для дальнейшего расположения текста на сцене отобразим на экране сетку, используя команду View => Grid => Show Grid. Рис. 2. Изменение цвета текста и фона ИЗУЧАЕМ MACROMEDIA FLASH 8 - 173 - Расположим надпись так, чтобы слева было семь клеток, и с помощью параметра корректировки межбуквенного расстояния (рис. 3) растянем надпись таким образом, чтобы она была в центре экрана. Рис. 3. Изменение межбуквенных интервалов 3. Теперь нам необходимо распределить буквы текста по отдельным слоям. Для этого выделяем текст с инструментом Subselection Tool, выполняем команды Modify => Break Apart и Modify => Time Line => Distribute to Layers. В результате создается необходимое количество слоев, которые названы соответствующими буквами и в которых появляются эти же буквы. 4. Затем нам необходимо перевести отдельные буквы из текстовых символов в графику, то есть в формы, состоящие из контуров и заливок. Это достигается путем повторного использования команды Modify => Break Apart. 5. Далее мы преобразуем каждую букву в графические символы или мувиклипы, используя команду Modify => Convert to Symbol, и дадим им следующие имена: «свет-с», «свет-в» и т.д. При этом можно создавать как графические символы (тип Graphic), так и мувиклипы (Movie clip). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 174 - Рис. 4. Перевод формы в мувиклип 6. Создав мувиклип «свет-с», переходим к его редактированию. По команде Windows => Library вызываем библиотеку (рис. 5) и, щелкнув дважды по мувиклипу «свет-с» в окошке библиотеки, перейдем к локальной монтажной линейке этого мувиклипа. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 175 - Рис. 5. Перейти к монтажной линейки мувиклипа можно вызвав окно библиотеки Сделаем сетку помельче посредством команды View => Grid => Edit Grid. При помощи копирования перенесем букву «с» и с помощью инструмента Line (выберем для него белый цвет) начертим контуры будущего шлейфа (рис. 6). Рис. 6. Контуры шлейфа рисуем с помощью инструмента Line 7. Далее заливаем внутренне пространство белым цветом, в результате чего получаем сплошную фигуру рис. 7. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 176 - Рис. 7. Заготовка для шлейфа 8. Затем выделяем контуры с помощью инструмента Selection (рис. 8) и удаляем их, оставляя только заливку. Рис. 8. Контуры необходимо удалить 9. Если вы ошиблись и линия шлейфа не совпадает с линией, касательной к окружности, то точку сопряжения можно подвинуть инструментом Subselection Tool (рис. 9). После того как точка выделена, ее точное позиционирование можно осуществлять с помощью стрелок клавиатуры. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 177 - Рис. 9. Точку сопряжения шлейфа и буквы можно подредактировать с помощью инструмента Subselection Tool 10. Затем выбираем градиентную шаровую заливку (внизу палитры на рис. 10) и заливаем фигуру. Рис. 10. Применяем градиентную шаровую заливку ИЗУЧАЕМ MACROMEDIA FLASH 8 - 178 - 11. По команде Window => Color Mixer вызываем панель Color Mixer, в которой задаем цвет заливки и градиент прозрачности. Для этого в указанной панели для левого маркера задаем бледно-желтый цвет и параметр непрозрачности Alpha=100, а для второго маркера — тот же цвет или еще более близкий к белому, а параметр Alpha=0 (рис. 11). Рис. 11. Настройка параметров градиента прозрачности. Применив настроенную заливку, мы получим изображение, представленное на рис. 12. Рис. 12. Шлейф с градиентом цвета и прозрачности ИЗУЧАЕМ MACROMEDIA FLASH 8 - 179 - 12. Выбираем инструмент Gradient Transform (выделен на панели Tools, рис. 13), после чего появляются четыре маркера (три на эллипсе и один в центре эллипса), с помощью которых мы изменим параметры шаровой градиентной заливки. Обратите внимание: если маркеры не видны, то следует уменьшить масштаб изображения, и тогда маркеры появятся в кадре. Управляя данными маркерами, перемещаем центр эллипса в центр буквы и добиваемся так называемого растворения хвоста шлейфа (см. рис. 13). Аналогичные шлейфы нужно создать для других букв, при этом шлейф каждый следующий буквы во фразе сначала укорачивается, а со второго слова, наоборот, увеличивется. Рис. 13. Изменение параметров градиентной заливки 13. После того как все мувиклипы с шлейфами будут готовы, создадим анимацию для шлейфа каждой буквы на общей монтажной линейке. Анимация будет состоять из двух участков: на первом этапе будет происходить проступание шлейфа (от полной прозрачности до непрозрачности), а на втором этапе обратный процесс — растворение шлейфа. При этом на втором этапе параллельно с увеличением прозрачности мы будем деформировать шлейф так, что он будет сокращаться в продольном направлении и соответственно растворение шлейфа будет увеличиваться. 14. Анимация в кадрах с 1-го по 5-й (рис. 14) состоит только в изменении непрозрачности (в 1-м она равна 0%, в пятом — 100%). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 180 - Рис. 14. Tween-анимация 15. В кадрах с 10-го по 15-й задается эффект расширения шлейфа одновременно с увеличением его прозрачности. На рис. 15 в режиме калькирования видно, как расширяется раствор шлейфа. Рис. 15. Покадровое деформирование шлейфа 16. Затем повторяем процедуру для других букв. В момент когда шлейф от буквы «С» стал полностью непрозрачным, стартует анимация для буквы «в» и т.д., что создает эффект прохождения световой волны (рис. 16). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 181 - Рис. 16. Шлейфы от разных букв накладываются друг на друга В результате получится следующий Flash-ролик, куда мы добавим строчку с текстом (рис. 17). После чего ролик примет вид. Рис. 17. Добавление текста ИЗУЧАЕМ MACROMEDIA FLASH 8 - 182 - Теперь нам необходимо открывать буквы последовательно, что можно сделать с помощью анимированной маски (рис. 18). Вводим слой «маска», в котором перемещаем прямоугольник синхронно с появлением шлейфа. Рис. 18. Схема использования анимированной маски Вот и все — ролик готов. Можно, конечно, подобрать для него другой фон. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 183 - Урок 11. Моделирование эффекта свечения букв со вспышкой В прошлом уроке было рассмотрено моделирование эффекта свечения букв. Теперь мы усовершенствуем этот эффект, добавив вспышку. Рассмотрим, как создать данный эффект. Выполните все шаги, описанные в прошлом уроке над текстом «RAY OF LIGHT», но для буквы «I» вместо эффекта свечения шлейфа сделайте эффект вспышки. Вспышка состоит из пяти деталей — создайте их и сохраните каждую как графический символ. Чтобы создать первую деталь, выполните следующие действия: 1. Нарисуйте окружность с помощью инструмента Oval Tool. 2. Откройте меню Color Mixer командой Window => Color Mixer (Shift+F9). 3. В раскрывающемся списке выберите необходимый тип градиентной заливки, в нашем случае — Radial (Радиальный). 4. Для изменения цвета щелкните на одной из меток, расположенных под цветовой линейкой, чтобы сделать ее активной, и выберите для нее цвет. 5. Добавьте еще несколько меток, щелкнув на цветовой линейке, и подберите для них цвет: • первая — белая со значением Alpha = 100%; • вторая — серо-розовая, близкая к белому, также со значением Alpha = 100%; • третья (последняя) — белая со значением Alpha = 0%. 6. Залейте созданной градиентной заливкой окружность. 7. Удалите окружность, чтобы осталась только заливка. 8. Путем добавления меток и изменения их подберите цвета градиента (рис. 1). 9. Сохраните градиент как графический символ с именем Gr-Base Flare. Рис. 1 Чтобы создать вторую деталь, выполните следующие действия: 1. Нарисуйте две окружности без заливки — одна внутри другой (рис. 2). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 184 - Рис. 2 2. Используя инструмент Paint Bucket, залейте пространство между окружностями коричневорозовым цветом со значением Alpha = 80% (рис. 3). Рис. 3 3. Удалите окружности, чтобы осталась только заливка (рис. 4). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 185 - Рис. 4 4. Сохраните изображение как графический символ с именем Gr-Ring 1. А теперь создадим третью деталь: 1. Нарисуйте окружность с помощью инструмента Oval Tool. 2. Откройте меню Color Mixer командой Window => Color Mixer (Shift+F9). 3. Для создания градиентной заливки, как и в случае первой детали, нужны три метки: • первая — белого цвета со значением Alpha = 0%; • вторая — белого цвета со значением Alpha = 0%; • третья — коричнево-розового цвета со значением Alpha = 30%. 4. В результате должна получиться такая фигура, как на рис. 5. 5. Сохраните изображение как графический символ с именем Gr-Ring 2. Рис. 5 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 186 - Четвертая деталь делается так же, как и вторая, только с другими размерами и значением Alpha не 80, а 20%. Полученное изображение сохраните как графический символ с именем Gr-Ring 3. Чтобы создать пятую деталь, выполните следующее: 1. С помощью инструмента Rectangle Tool нарисуйте узкий, длинный прямоугольник (рис. 6). Рис. 6 2. Залейте полученный прямоугольник белым цветом. 3. Удалите контуры прямоугольника. 4. Нарисуйте еще один такой же прямоугольник, но расположите его горизонтально. 5. Залейте прямоугольник белым цветом. 6. Удалите контуры прямоугольника. 7. Соедините две полученные заливки, чтобы получился крест (рис. 7). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 187 - Рис. 7 8. Залейте крест радиальной градиентной заливкой серого цвета (рис. 8). Рис. 8 9. Сохраните изображение как графический символ с именем Gr-Lens Cross. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 188 - Получив все детали, можно приступить к моделированию эффекта: 1. Создайте семь слоев командой Insert => Layer. Дайте имена слоям, щелкнув дважды на имени слоя в панели Timeline: • первый — Actions/Labels; • второй — Ring 3; • третий — Ring 2; • четвертый — Ring 1; • пятому — Base Flare; • шестой — Cross; • седьмой — Cross 2. 2. Щелкните на первом кадре слоя Action/Labels, чтобы выделить его. 3. Откройте окно Actions – Frame командой Window => Actions (F9). 4. В иерархическом списке групп действий и операторов откройте группу Actions (Действия), а затем группу Movie Control (Управление фильмом). Щелкните дважды на действии Stop (Остановка фильма), которое появится в поле сценария справа (рис. 9). Рис. 9 5. Затем щелкните, например, на 40-м кадре, в иерархическом списке групп действий и операторов откройте группу Actions, а затем группу Movie Control. Щелкните дважды на действии Goto и выберете пункт Go to and Stop — в поле сценария должен появиться текст: «gotoAndStop (1);» (рис. 10). Помните, что слой Actions/Labels и все действия выполняемые над ним необходимы для того, чтобы эффект не повторялся несколько раз. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 189 - Рис. 10 6. Щелкните на втором кадре слоя Ring 3, нажмите клавишу F7, тем самым добавив пустой кадр, щелкните на нем и перетащите из библиотеки символов графический символ Gr-Ring 3 (рис. 11). Рис. 11 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 190 - 7. Задайте начало анимации, выбрав в списке Tween инспектора свойств команду Motion. 8. Выбрав инструмент Selection, щелкните по изображению и в инспекторе свойств установите для него значение Alpha = 0%. 9. Щелкните на седьмом кадре слоя и нажмите клавишу F6 — это приведет к созданию ключевого кадра (от 2-го кадра до 7-го на синем фоне должна пройти стрелка), установите для изображения значение Alpha = 100% и переместите его вправо. 10. Щелкните на 31-м кадре, вставьте ключевой кадр (F6), выберите инструмент Free Transform (Свободная трансформация), щелкните на изображении и, удерживая клавишу Shift, уменьшите изображение, а потом установите значение Alpha = 0%. 11. Теперь щелкните на 2-м кадре слоя Ring 2 и добавьте пустой кадр. Щелкните на новом кадре и перетащите из библиотеки символов графический символ Gr-Ring 2. Поставьте символ так, чтобы его центр совпадал с центром предыдущего изображения (рис. 12). Рис. 12 12. Задайте начало анимации, выбрав в списке Tween инспектора свойств команду Motion. 13. Инструментом Selection, щелкните по изображению и в инспекторе свойств установите для него значение Alpha = 0%. 14. Щелкните на 7-м кадре слоя, вставьте ключевой кадр, установите для изображения значение Alpha = 100%. Переместите изображение немного влево и увеличьте его (рис. 13). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 191 - Рис. 13 15. Щелкните на 34-м кадре, вставьте ключевой кадр (F6), переместите изображение еще немного влево и установите значение Alpha = 0%. 16. Теперь щелкните на втором кадре слоя Ring 1, добавьте пустой кадр, щелкните на нем и перетащите из библиотеки символов графический символ Gr-Ring 1. Поставьте символ так, чтобы его центр совпадал с центром предыдущего изображения (рис. 14). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 192 - Рис. 14 17. Задайте начало анимации, выбрав в списке Tween инспектора свойств команду Motion. 18. Инструментом Selection щелкните по изображению и в инспекторе свойств установите для него значение Alpha = 0%. 19. Щелкните на 7-м кадре слоя, вставьте ключевой кадр, установите для изображения значение Alpha = 100%, переместите изображение немного вправо и увеличьте его (рис. 15). Рис. 15 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 193 - 20. Щелкните на 36-м кадре, вставьте ключевой кадр (F6), уменьшите изображение до размеров исходного и установите значение Alpha = 0%. 21. Щелкните на 2-м кадре слоя Base Flare, добавьте пустой кадр, щелкните на нем и перетащите из библиотеки символов графический символ Gr-Base Flare. Поставьте символ так, чтобы его центр совпадал с центром предыдущего изображения. 22. Задайте начало анимации, выбрав в списке Tween инспектора свойств команду Motion. 23. Инструментом Selection щелкните по изображению и в инспекторе свойств установите для него значение Alpha = 0%. 24. Щелкните на 7-м кадре слоя, вставьте ключевой кадр, установите для изображения значение Alpha = 100% и увеличьте его. 25. Щелкните на 39-м кадре, вставьте ключевой кадр (F6), уменьшите изображение до размеров исходного и установите значение Alpha = 0%. 26. Теперь щелкните на 4-м кадре слоя Cross, добавьте пустой кадр, щелкните на нем и перетащите из библиотеки символов графический символ Gr-Lens Cross. Поставьте символ так, чтобы его центр совпадал с центром предыдущего изображения. 27. Задайте начало анимации, выбрав в списке Tween инспектора свойств команду Motion. 28. Инструментом Selection щелкните по изображению и в инспекторе свойств установите для него значение Alpha = 0%. 29. Щелкните на 14-м кадре слоя, вставьте ключевой кадр, установите для изображения значение Alpha = 100% и поверните его на 90o вправо. 30. Щелкните на 33-м кадре, вставьте ключевой кадр (F6), поверните его на 90о вправо и установите значение Alpha = 0%. 31. Щелкните на 5-м кадре слоя Cross 2, добавьте пустой кадр, щелкните на нем и перетащите из библиотеки символов графический символ Gr-Lens Cross. Поставьте символ так, чтобы его центр совпадал с центром предыдущего изображения, уменьшите его и поверните на 45o. 32. Задайте начало анимации, выбрав в списке Tween инспектора свойств команду Motion. 33. Инструментом Selection щелкните по изображению и в инспекторе свойств установите для него значение Alpha = 0%. 34. Щелкните на 15-м кадре слоя, вставьте ключевой кадр, установите для изображения значение Alpha = 100% и поверните его на 90o вправо. 35. Щелкните на 25-м кадре, вставьте ключевой кадр (F6), поверните его на 90о вправо и установите значение Alpha = 0%. Рис. 16 На последнем этапе в заранее подготовленный светящийся текст вставьте эффект в тот момент, когда должна светиться буква «I» — это и есть конечный результат. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 194 - Урок 12. Моделирование эффекта «Салют» Салют — это всегда праздник, и в программе Flash мы тоже можем сделать виртуальный салют. Рассмотрим все этапы данного процесса. 1. Вначале смоделируем визуальный эффект разлетающихся частиц салюта. Создадим графический символ с именем trajec (рис. 1), используя команду Insert => New symbol, и с помощью инструмента Brush самого маленького размера нарисуем траектории движения (см. рис. 1). Рис. 1 2. Салют будет смотреться наиболее выигрышно на черном фоне, поэтому выберем инструмент Selection, щелкнем по фону и в окне Properties в разделе Background установим цвет фона черным (рис. 2). Рис. 2 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 195 - 3. Создадим еще один графический символ с именем Firecolor-1 и, используя инструмент Oval, нарисуем окружность, а потом зальем ее радиальной градиентной заливкой, использующей три метки (рис. 3 и 4): • первая (самая левая) — красного цвета со значением Alpha = 0%; • вторая (средняя) — красного цвета со значением Alpha = 100%; • третья — оранжевого цвета со значением Alpha = 100%. Рис. 3 Рис. 4 4. На основной сцене создадим слой с именем trajec, перетащим экземпляр одноименного символа в первый кадр этого слоя из библиотеки и создадим автоматическую анимацию движения motion tween, в которой траектории движения частиц салюта будут перемещаться сверху вниз. На рис. 5 это перемещение показано в режиме калькирования. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 196 - Рис. 5 5. Теперь добавим еще один слой, щелкнув правой кнопкой мыши по имени первого слоя и вызвав соответствующее меню, и назовем его firecolor-1. В первый кадр этого слоя перетащим из библиотеки экземпляр символа firecolor-1 и создадим автоматическую анимацию движения на 20 кадрах, в которой символ firecolor-1 будет увеличиваться от минимального радиуса в первом кадре до максимального в последнем. На рис. 6 данный процесс показан в режиме калькирования, параллельно идут два процесса — перемещение траекторий частиц салюта сверху вниз и увеличение радиуса символа firecolor-1. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 197 - Рис. 6 6. Теперь придадим слою с именем trajec свойство маскирующего слоя. Для этого необходимо щелкнуть правой кнопкой мыши по имени слоя trajec и в выпадающем меню выбрать свойство Mask. В результате увеличение круга firecolor-1 будет видно сквозь линии брызг салюта, что и даст нужный эффект. 7. Мы смоделировали этап разлета брызг салюта, а теперь усложним нашу задачу и добавим стадию вспышки. Откроем новый Flash-файл. Для того чтобы было удобнее моделировать несколько залпов, этот эффект будем создавать в виде отдельного мувиклипа. Вставим новый символ командой Insert => New Symbol (Ctrl+F8), в открывшемся меню выберем Movie Clip и дадим ему имя fireworks. В библиотеке символов щелкнем дважды на символе fireworks, чтобы открыть его редактирование. Вставим второй слой и назовем слои так же, как в примере trajec и firecolor. В слое firecolor создадим три кадра, моделирующие вспышку: черный кадр, белый и опять черный. В 1-м кадре слоя firecolor ИЗУЧАЕМ MACROMEDIA FLASH 8 - 198 - Рис. 7 добавим черный фон (рис. 7), а во 2-м кадре этого слоя вставим ключевой кадр и нарисуем белый прямоугольник размером, превышающим размер сцены. Преобразуем белый прямоугольник в графический символ (рис. 8). Рис. 8 8. Чтобы вспышка не была слишком яркой, зададим параметр непрозрачности для этого символа (alpha) около 80% (рис. 9). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 199 - Рис. 9 9. В 3-м кадре слоя firecolor вставим пустой кадр (F7), который тоже будет черным, поскольку у нас настроен черный фон. Далее добавим кадры, имитирующие брызги салюта из предыдущего примера, и получим соответствующий эффект. 10. Теперь вернемся на основную сцену (в нашем случае scene 1), создадим второй слой (оставим слоям имена, присваиваемые по умолчанию, — Layer 1 и Layer 2). Перетащим из библиотеки в первый кадр слоя Layer 1экземпляр мувиклипа fireworks и в 23-м кадре (мувиклип fireworks у нас состоит из 23 кадров) вставим ключевой кадр (рис. 10). Затем вставим ключевой кадр в 20-м кадре второго слоя и аналогично добавим экземпляр символа fireworks в другой части экрана, в результате чего получим ролик следующего вида. Рис. 10 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 200 - 11. Теперь добавим графический символ firecolor-2 другого цвета и создадим на его базе мувиклип fireworks-2 (рис. 11). Рис. 11 12. Добавим на сцене Scene 1 еще один слой, поместим в него экземпляр мувиклипа, имитирующего залп другого цвета, и тогда получим салют следующего вида. 13. А поскольку бесшумный салют не воспринимается, то добавим звук. Подходящий звуковой эффект проще всего найти в библиотеке звуков на сайте www.flashkit.com в разделе soundfx в папке Cartoon. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 201 - Рис. 12 14. Итак, загрузим звуковой эффект по имени KABLOOM-sitch_Mass488 в формате Wav и добавим его на отдельном слое (в нашем примере layer 8) в те моменты, когда производятся выстрелы (рис. 13), в результате чего у нас получится салют со звуком. Рис. 13 15. Для того чтобы разнообразить картину салюта, можно добавить залпы с несколько другими траекториями частиц салюта, а также разнообразить цвета. Используя рассмотренный принцип, вы сможете сделать эффекты по своему вкусу. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 202 - Урок 13. Свойства мувиклипов и кнопок и их программное изменение В предыдущих уроках мы почти не говорили о написании скрипта. Но начиная с данного урока мы будем постепенно знакомиться с возможностями ActionScript на простых примерах. В данном уроке мы расскажем о встроенных свойствах мувиклипов и кнопок и о том, как писать код, позволяющий программно изменять эти свойства. Все дальнейшие объяснения и примеры будут относиться к последней версии Macromedia Flash Professional 8, поскольку обсуждаемые в статье примеры кода могут быть использованы и в более ранних версиях программы, в то время как панели редактора будут несколько отличаться. Для проигрывания роликов-иллюстраций потребуется проигрыватель FlashPlayer 8.0 1. Для написания сценариев используется редактор ActionScript, вызвать который можно по команде Window => Actions. При выполнении данной команды появляется панель Actions (рис. 1). Рис. 1 Панель Actions состоит из трех окон. Правое окно, в котором пишется скрипт, называется Script pane, а левое верхнее окно под названием Actions toolbox содержит перечень элементов языка ActionScript. Все элементы разбиты на категории при помощи папок. Любой элемент из папок может быть перемещен в режиме drag&drop в панель Script pane. Поместить в панель Script pane команду, не набирая ее в ручную, можно также посредством кнопки «+» (рис. 2). Левое нижнее окно называется Script Navigator и в нем имеется схематичное отображение элементов структуры документа, содержащих сценарии. Для дальнейшего ознакомления с панелями рассмотрим конкретный пример. 2. Создадим новый символ по команде Insert => New Symbol и нарисуем некий объект (рис. 3), который сохраним как мувиклип. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 203 - Рис. 2 Рис. 3 3. Поместим экземпляр мувиклипа на сцену Scene 1 (рис. 4). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 204 - Рис. 4 4. Далее напишем сценарий, который будет масштабировать экземпляр нашего мувиклипа по оси х. Управлять масштабированием по оси х будем с помощью двух кнопок со стрелкой вправо (Button Next) и стрелкой влево (Вutton Рrevious), которые добавим на сцену (рис. 5). (Напомним что доступ к папке со стандартными кнопками осуществляется по команде Windows => Common Libraries => Buttons.) Рис. 5 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 205 - 5. Теперь поместим на кнопку со стрелкой вправо сценарий, который будет растягивать мувиклип по оси х, а на кнопку со стрелкой влево — сценарий, который будет сжимать мувиклип по оси х. Чтобы обратиться к экземпляру мувиклипа, необходимо дать ему имя, например «face». Для этого выделим экземпляр мувиклипа и в панели Properties вместо полупрозрачной надписи «Instance Name» напишем имя «faсе» (рис. 6). Рис. 6 6. Вызовем на экран панель Actions по команде F9. Для назначения сценария мувиклипу или кнопке необходимо выделить этот объект. Выделим кнопку со стрелкой вправо — при этом в окне Script navigator появится обозначение Current selection circle button next. Затем напишем скрипт, который обеспечит изменение масштаба экземпляра мувиклипа по оси х при щелчке по этой кнопке. 7. Откроем папку Global Functions (рис. 7), а в ней откроем папку Movie Clip Control ИЗУЧАЕМ MACROMEDIA FLASH 8 - 206 - Рис. 7 8. Перенесем обработчик событий кнопки on( ) на панель Script pane, для чего нужно дважды щелкнуть по нему мышью или перетащить в режиме drag&drop на панель Script pane (рис. 7). Если вам нужна справка об обработчике on( ), нажмите на нем правой кнопкой мыши в окне Actions toolbox и вызовите справку (рис. 8). Аналогично можно получить справку о синтаксисе всех операторов ActionScript. Рис. 8 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 207 - Обработчик событий кнопки в общем виде имеет вид: on (event) { Текст сценария; } 9. При этом event — название события, наступление которого повлечет за собой выполнение сценария. Нам нужно, чтобы в результате наступления события «отпускание кнопки» (событие release) масштаб экземпляра мувиклипа face увеличивался на заданную величину. Для этого воспользуемся встроенными свойствами мувиклипов. В частности, следует использовать встроенное свойство клипа _xscale, которое задает или возвращает значение ширины объекта в процентах от исходного размера. При обращении к свойству объекта будем использовать оператор точки, который в общем виде можно записать следующим образом: ObjectName.MethodName Здесь ObjectName — имя объекта, для которого вызывается метод, а MethodName — название вызываемого метода. 10. Свойство мувиклипа _xscale находится в папке, которая имеет следующую вложенность: ActionScript 2.0 Classes => Movie => MovieClip => Properties (рис. 9). Рис. 9 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 208 - Предположим, мы хотим, чтобы при каждом щелчке по кнопке масштаб экземпляра мувиклипа по оси х увеличивался на 20%. В данном случае выражение должно иметь такой вид: face._xscale += 20 С этой целью мы обращаемся к свойству_xscale (масштаб по оси х) экземпляра мувиклипа по имени face и определяем, что оно должно увеличиваться на 20 единиц (процентов) (рис. 10). Смысл оператора «+=» понятен из сравнения равнозначных выражений (запись x += y аналогична записи x = x + y). Рис. 10 11. Аналогично разместим на вторую кнопку скрипт, который будет уменьшать масштаб по оси х. Для этого скопируем скрипт на первой кнопке и вставим его на второй кнопке, а затем поменяем в выражении знак «+» на «-». При щелчке по верхней кнопке лицо будет растягиваться, а при щелчке по нижней — сжиматься (рис. 11 и 12). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 209 - Рис. 11 Рис. 12 Теперь добавим еще две кнопки, которые позволят перемещать наш экземпляр мувиклипа вверх и вниз. Поместим на сцену две кнопки и повернем их так, как показано на рис. 13. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 210 - Рис. 13 12. На верхнюю кнопку поместим сценарий для перемещения мувиклипа вверх: on (release) { face._y -= 20; } В данном случае (рис. 14) мы обращаемся к свойству мувиклипа _y, которое задает (или возвращает) y-координату объекта относительно текущего начала координат в пикселах. Рис. 14 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 211 - Обратите внимание: для того чтобы перемещать экземпляр мувиклипа вверх, мы использовали оператор «-=», а не «+=», поскольку начало координат находится в левом верхнем углу сцены, то есть значение y возрастает не снизу вверх, а сверху вниз. 13. Аналогичный сценарий (только с перемещением вниз) поместим на вторую кнопку — в итоге получим ролик. 14. Затем усложним задачу — составим лицо из нескольких отдельных мувиклипов: нос (nose) (рис. 15), рот (mouth) (рис. 16), волосы (hair) (рис. 17) и глаза (eyes) (рис. 18), а потом составим из них мувиклип по имени face (рис. 19). Рис. 15 Рис. 16 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 212 - Рис. 17 Рис. 18 Рис. 19 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 213 - 15. При создании мувиклипа face определим имена всех составляющих его экземпляров мувиклипов в панели Properties (рис. 20), используем имена nose1, mouth1, hair1, eyes1. Рис. 20 16. Cоздадим экземпляр мувиклипа face на сцене (Scene 1) и в панели Properties определим его имя как face1. Теперь поместим на сцене кнопки для управления отдельными частями экземпляра мувиклипа face1. В частности, напишем сценарий, по которому при отпускании кнопки экземпляр мувиклипа mouth1, входящий в экземпляр мувиклипа face1, будет масштабироваться по оси х (рис. 21): on (release) { face1.mouth1._xscale += 20; } Оператор «•» (точка) позволяет обратиться к свойству экземпляра мувиклипа mouth1, вложенному в экземпляр мувиклипа face1. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 214 - Рис. 21 17. Аналогично поместим на вторую кнопку код, который будет позволять уменьшать масштаб экземпляра мувиклипа mouth1 по оси х (рис. 22), в результате чего получится ролик. Рис. 22 18. Теперь добавим две кнопки, которые будут поворачивать экземпляр мувиклипа mouth1 (рис. 23). Для этого обратимся к свойству мувиклипа _rotation, которое задает или возвращает значение угла поворота объекта в градусах. Положительные значения соответствуют повороту по часовой стрелке, отрицательные — против часовой. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 215 - Рис. 23 На верхнюю кнопку поместим следующий код: on (release) { face1.mouth1._rotation += 5; } При щелчках по верхней кнопке рот будет поворачиваться по часовой стрелке, а на нижнюю кнопку соответственно поместим код, который будет обеспечивать вращение против часовой стрелки. 19. Рассмотрим еще одно свойство мувиклипа _alpha, с помощью которого можно управлять прозрачностью (допустимые значения лежат в диапазоне от 0 до 100). Рис. 24 ИЗУЧАЕМ MACROMEDIA FLASH 8 - 216 - 20. Добавим две кнопки, которые будут управлять прозрачностью экземпляра мувиклипа eyes1 (рис. 24). На верхнюю кнопку добавим код: on (release) { face1.eyes1._alpha -= 20; } На нижнюю: on (release) { face1.eyes1._alpha -= 20; } 21. До сих пор мы говорили о мувиклипах, однако кнопки обладают теми же встроенными свойствами, поэтому обращаться к свойствам кнопок можно точно так же. Для примера создадим на сцене экземпляр кнопки, перетащив ее на экран из библиотеки, и дадим экземпляру имя but1. Увеличим размеры экземпляра кнопки (рис. 25), затем выделим экземпляр на сцене и напишем для него скипт следующего содержания: on (release) { but1._xscale -= 50; } Таким образом, мы получим ролик, в котором при нажатии на кнопку она будет менять свой внешний вид — масштаб по оси х будет уменьшаться. Рис. 25 22. Обращаясь к встроенным свойствам кнопок, можно создавать интересные эффекты. Например, повесив на кнопку код: ИЗУЧАЕМ MACROMEDIA FLASH 8 - 217 - on (release) { but1._x -= 100; } мы создадим ролик, где при щелчке по кнопке она будет отскакивать влево. В данном случае кнопка будет отскакивать влево при каждом щелчке до тех пор, пока вообще не исчезнет за левой кромкой экрана. А для того, чтобы кнопка все время находилась на экране, слегка изменим код. Добавим условие, по которому в тот момент, когда кнопка только начнет заезжать за левую кромку экрана, следующий щелчок по ней будет возвращать ее к правой кромке. Для реализации подобного сценария нам понадобится условный оператор If, определяющий последовательность действий в зависимости от истинности заданного условия. Формат оператора имеет следующий вид: if(condition) { statement(s); } Если условие (condition) истинно, Flash исполняет выражение, которое должно выполняться по условию (оно следует в скобках {}), а если условие не выполняется (ложно), то Flash пропускает выражение в фигурных скобках. В нашем примере нужно проверять условие «координата экземпляра символа кнопки по имени but1 меньше 10 пикселов» (if(but1._x < 10). Если это условие справедливо, то координату по оси х нужно увеличить на 500 пикселов. Таким образом, нам необходимо добавить следующий код: on (release) { but1._x -= 100; if(but1._x < 10){ but1._x += 500; } } ИЗУЧАЕМ MACROMEDIA FLASH 8 - 218 - Урок № 14. Экспорт ролика из Macromedia Flash и публикация проектов Упражнение 1. Публикация проекта В Macromedia Flash анимированные ролики возможно публиковать в форматы: Flash (swf), html, gif, mov и другие. Публикация ролика 1. Откройте любой созданный вами ролик. 2. Для установки параметров публикации выберите пункт в меню: Файл – Настройки публикации. 3. Обратите внимание на то, какие форматы уже выбраны. Проследите за тем, чтобы были выбраны форматы swf и html. 4. Для каждого из форматов можно выбрать свои параметры на соответствующей вкладке. 5. Нажмите на кнопку: Публиковать. Новые файлы созданы. Примечание: файлы созданы в той же папке, где находится сам ролик. 6. Найдите созданные файлы и просмотрите их. Узнайте размеры файлов. Упражнение 2. Просмотр ролика во Flash-плеере и создание проекта Для исполнения роликов в формате swf обязательно необходимо наличие Flash-плеера. Он устанавливается вместе с установкой Macromedia Flash. Поэтому если установки этой программы нет, то ролик просмотреть невозможно. Выход из этой ситуации есть: можно создать проект, т.е. файл с расширением exe, который будет включать в себя исполняемый модуль. Таким образом можно будет просматривать ролик без наличия специальных программ. Flash-плеер находится в той же папке, где и сама программа: Program Files\Macromedia\Flash 8\Players\ SAFlashPlayer Создание проекта 1. Откройте ролик в формате swf во Flash-плеере (не в программе Macromedia Flash!) 2. Выберите пункт меню Файл – Проект (File - Proector). 3. Укажите название и путь для будущего ролика. Ролик готов! Теперь можно его запускать без наличия Flash-плеера. При возможности проверьте, запускается ли ролик на компьютере, на котором не установлены ни Macromedia Flash, ни Flash Player. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 219 - Контрольная работа №5. Экспорт фильмов из Macromedia Flash. Итоговая работа Задания I. Для задания используйте любой ролик, созданный ранее. Преобразуйте ролик в следующие форматы: swf, html, gif, QuickTime. Создайте проект (ролик в формате exe). Заполните следующую таблицу: Формат Размер ролика Качество Программа, необходимая для запуска ролика Fla (исходный формат) Swf Html Gif QuickTime Exe Пояснения: В столбце «Размер ролика» укажите физический размер файла (в байтах, килобайтах и т.п.). В столбце «Качество» самостоятельно оцените качество полученного изображения (отличное, хорошее, удовлетворительное, плохое). Поясните, в чём именно произошли изменения в качестве (может быть, искажены цвета или какие-то элементы изображения, не воспроизводится анимация и т.д.) В последнем столбце укажите, какое программное обеспечение на вашем компьютере требуется для запуска ролика. Возможно, на Вашем компьютере ролик в каких-то форматах не будет воспроизводиться. Это означает, что необходимого программного обеспечения у Вас нет (так и укажите это). Сделайте вывод (на основе таблицы) о том, какой формат(ы) наиболее приемлем для размещения Flash-фильмов в Интернет. II. Создать Flash-фильм на любую предложенную тем: a) Учеба в школе. b) Моё любимое занятие. c) Мой любимый предмет в школе. d) Моя семья. e) Мой любимый фильм. f) Моя любимая компьютерная игра. g) Презентация обо мне. h) Реализация во Flash любого известного рассказа (сказки) (тема в этом случае может совпадать с названием выбранного произведения). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 220 - УРОКИ ДЛЯ САММОСТОЯТЕЛЬНОГО ИЗУЧЕНИЯ Урок № 1. Вот такой симпатичный эффект будем делать. 1.Создаём новый документ, oткрываем Document Properties (CTRL+J). Размер ставим 420х320 и frame rate ставим 24 fps. 2.Назовем наш единственный слой image frame. 3.Рисуем прямоугольник при помощи rectangle tool(цвет заливки любой по вкусу и цвет контура выключаем). Размещаем етот прямоугольник в центре сцены при помощи Align panel. Смотри рисунок. 4. Рисуем еще один прямоугольник, другого цвета, рядом с уже нарисованным. 5.Выделяем наш новый прямоугольник и в Properties panel ставим размер 400х300 pix. 6. Размещаем етот прямоугольник в центре сцены при помощи Align panel. 7. Дальше кликаем в любом месте, за сценой, чтобы снять выделение с фигуры,затем выделяем снова и удаляем. У нас осталась рамка шириной 20pix. 8. Блокируем етот слой и создаем новый. Назовем новый слой image 1. Опускаем етот слой в панели слоев вниз. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 221 - 9. Идем File > Import > Import to Library выбераем 2 любые картинки на свой вкус. 10.Первую картинку переносим на сцену.(Картинки должны быть размером 420х320.) Размещаем картинку в центре сцены при помощи Align panel. Блокируем слой. 11. Создаем новый, слой между двумя существующими и назовем it image 2. 12. Повторяем пункт 10. только с картинкой номер 2. Теперь у нас есть две картинки на двух слоях и рамка.Осталось зделать маску. Создание маски. 13.Создадим новый слой между слоями image 2 и image frame и назовем mask. 14.Рисуем прямоугольник 400х300. Выравниваем по вертикали.Смотри рисунок. 15. Теперь, надо выровнять его по горизонтали так что-бы правый край прямоугольника совпадал с левым краем картинки. Если бы Вы поместили прямоугольник правильно, то его координата X должна бы быть-390. 16.Конвертируем прямоугольник в movie clip(F8). И в Properties panel даем instance name imageMask. 17.Блокируем слой . Правый щелчек мыши на слое и выбираем Mask. 18.Создаем новый, слой сверху всех остальных и назовем actions. Блокируем слой. Нажимаем на первом кадре етого слоя и идем Window > Actions. 19. Пишем вот етот код. CODE speed = 14; imageMask.onEnterFrame = function() { if ((this._width + this._x) < _xmouse) { if (this._width + this._x >= _xmouse - 0.8) { this._x = _xmouse - this._width; ИЗУЧАЕМ MACROMEDIA FLASH 8 - 222 - } else { this._x += (_xmouse - (this._width + this._x)) / speed; } } else if ((this._width+this._x) > _xmouse) { if ((this._width + this._x) <= _xmouse + 0.8) { this._x = _xmouse - this._width; } else { this._x -= ((this._width + this._x) - _xmouse) / speed; } } else { this._x = _xmouse - this._width; } }; Объяснение к коду. CODE speed = 14; это скорость,чем меньше номер тем в когда быстрее движение маски. CODE if ((this._width + this._x) < _xmouse) { то, что должно быть выполнено случае, маска с левой стороны мыши. CODE if (this._width + this._x >= _xmouse - 0.8) { this._x = _xmouse - this._width; } else { Если рассрояние правого края маски по отношению к мыши меньше или равно 0,8 ,то положение правого края маски должно соответствовать положению мыши. CODE this._x += (_xmouse - (this._width + this._x)) / speed; } В любом другом случае(тоесть когда расстояние больше 0,8) _x положение маски будет увеличиватья постоянно. CODE else if ((this._width+this._x) > _xmouse) { if ((this._width + this._x) <= _xmouse + 0.8) { this._x = _xmouse - this._width; } else { this._x -= ((this._width + this._x) - _xmouse) / speed; } } else { ИЗУЧАЕМ MACROMEDIA FLASH 8 - 223 - this._x = _xmouse - this._width; } }; Механизм Ну вот и все. тотже, только маска движется в лево. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 224 - Урок № 2. Здесь я расскажу вам, как сделать симпатичную замену картинок, похожую на стирание ластиком. Для полного понимания материала, необходимо знание АС2. Платформа - Flash и плейер 8 или младше. В этом уроке я покажу вам способ маскировки с использованием каналов битмапдаты. Метод получения траектории перемещения маски аналогичен способу, использованному в моем уроке Программное контурное рисование и здесь рассмотрен не будет. Скрипт генератора траектории вы сможете изучить в приложенном исходнике. Итак начнем. Создайте новый проект и, любым образом, загрузите картинки. У меня они импортированы в библиотеку и каждой присвоен линкнейм, в виде порядкового номера ("0", "1", "2", и т.д.). Вы можете, также, загрузить их извне в массив битмапдат, например, использовав класс MovieClipLoader(). Скопируйте в библиотеку клип "cursor" из программы-генератора и дайте ему линкейдж - "cursor". Имейте ввиду: эти клипы, в обоих приложениях, должны быть одинаковы. Теперь осталось только очистить сцену, вызвать панель "Actions-Frame" ([F9]) и ввести следующий код: CODE /*********************** * @ autor: MOHCTEP * * @ date : 06.10.2007 * ************************/ //*********** Предстартовая инициализация *************** import flash.display.*; import flash.geom.*; //Патчим необходимые классы var total_img:Number = 6; //Общее кол-во картинок в слайдшоу var current_img:Number = 0; //Указатель на текущее изображение var xarr:Array = []; var yarr:Array = []; //Массивы с координатами квантов траектории. Сюда вставим значения, полученные из генератора var arr_length:Number; //размер координатного массива var index:Number = 0; // счетчик ячеек массива var id:Number; //таймер var current_bd:BitmapData; // Битмап с текущей (заменяемой) картинкой var temp_bd:BitmapData; //Битмап со следующей (замещающей) картинкой var mask_bd:BitmapData; //Битмап маски var play_speed:Number = 20; //Скорость анимации **** меняем **** var show_delay:Number = 3000; // Задержка между анимациями для просмотра картинок **** меняем **** var con:MovieClip = this.createEmptyMovieClip('container', this.getNextHighestDepth()); //Клип-контейнер var mask:MovieClip = con.createEmptyMovieClip('mask', 3); ИЗУЧАЕМ MACROMEDIA FLASH 8 - 225 - //Клип-контейнер маски var cursor:MovieClip = mask.attachMovie('cursor', 'curs', mask.getNextHighestDepth()); //Клип-маска. Его анимируем /*******************************************************************/ /*Стартовая процедура. Загружаем оба битмапа и один из них показываем. Создаем битмап -маску, а клип-маску прячем. Ставим контейнер с картинкой на место. Запомним размер координатного массива и запускаем слайдшоу.*/ function init() { reDraw(); mask_bd = new BitmapData(current_bd.width, current_bd.height, true, 0); mask._visible = false; con._x = 20; con._y = 35; arr_length = xarr.length; start_show(); } /*Процедура перезапуска анимации. Вызывается, как вначале, так и по окончании анимации, после перемены картинок в битмапах. Сбросим таймер и счетчик ячеек. Запуск таймера анимации.*/ function start_show() { clearInterval(id); index = 0; id = setInterval(_show, play_speed); } /*Анимация.Вызывается по таймеру. Прикаждом вызове происходит следующее: Маску переставляем по координатам, взятых из координатных массивов, по текущему индексу. Контейнер маски копируем в битмап маски. Поскольку битмап мы не обновляем, то в нем остается и снимок прежнего положения маски. В текущий битмап копируем битмап с новой картинкой, а в качестве альфа канала используем битмап-маску. Прибавляем счетчик. Сравниваем значение счетчика с длиной массива, коль они сравнялись - считаем анимацию законченной. В таком случае убьем таймер Дорисуем картинку. Это необходимо, если анимация закончилась с "дырками". И, заодно, подготовимся к следующему "витку" слайдшоу. Выдержим паузу, для просмотра картинки и вновь запустим анимацию следующего изображения.*/ function _show() { cursor._x = xarr[index]; cursor._y = yarr[index]; mask_bd.draw(mask); current_bd.copyPixels(temp_bd, temp_bd.rectangle, new Point(0, 0), mask_bd, new Point(0, 0), true); index++; if (index>=arr_length) { clearInterval(id); reDraw(); id = setInterval(start_play, show_delay); } } //Эта процедура здесь не используется. Но, она необходима для экстренной остановки анимации. function stop_show() { clearInterval(id); ИЗУЧАЕМ MACROMEDIA FLASH 8 - 226 - arr_length && (index<arr_length) ? reDraw() : null; } /*Здесь обновляем все битмапы. В видимом битмапе обновляем текущую картинку. указатель картинок инкременируем и гоним по кольцу. В невидимый битмап - грузим следующую картинку Очищаем битмап-маску Показываем текущий битмап*/ function reDraw() { current_bd = BitmapData.loadBitmap(current_img.toString()); current_img++; current_img %= total_img; temp_bd = BitmapData.loadBitmap(current_img.toString()); mask_bd.fillRect(mask_bd.rectangle, 0); con.attachBitmap(current_bd, 0); } /*************************************************************/ //ЗАПУСК!!! init(); Запустите файл генератора траектории. Нажмите кнопку и, перетаскивая шейп, "сотрите" картинку. Еще раз нажмите кнопку и перенесите снимки массивов из окна "Output" в наш код. Можно тестировать фильм. Попробуйте поменять очертания курсоров , а также подобрать скорость анимации и время задержки. Обратите внимание: картинки должны быть одинаковыми по "габаритам". ИЗУЧАЕМ MACROMEDIA FLASH 8 - 227 - Урок № 3 Если мы будем вращать растровый обьект (как в уроке), то предварительно нужно будет сделать 2 картинки.. 1-я просто картинка, а 2-я отражённая слева направо. С помощью [Ctrl]+[R] заносим обе эти картинки в библиотеку. Для удобства я поместил каждую картинку в отдельный муви-клип. Второе, что нужно сделать - трассировать изообращение, которое будет вращатся, это нужно будт для создания маски. Берем создаём еще 1 муви-клип и ложем туда изоображение. Дальше выбераем: и и выставляем такие жмём настройки: [OK] ИЗУЧАЕМ MACROMEDIA FLASH 8 - 228 - Вот что вышло: Выделяем её и выбираем в палитре чёрный цвет (или любой другой) потом дублируем этот муви-клип и отражаем его слева на право. Это будут маски.. Теперь создаём еще один муви-клип. Вставляем в первый кадр муви-клип с первой картинкой, выделяем этот кадр и в окошке properties из выпадающего списка Tween выбираем Motion. Дальше нажимаем на 30-й кадр и жмём [F6] После этого нажимаем [F7] , и в этот кадр вставляем вторую картинку, которая отраженная. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 229 - потом на 60-м и 90-м кадрах нажимаем [F6], на 91-м [F7] и вставляем туда первую картинку. на 120-м кадре жмём [F6].. Теперь для большей реалистичности нужно поподстраивать Ease (ослабление), оно при использовании Motion Tween или Shape Tween Может задавать постепенное замедление(положительное значение Ease) или ускорение(отрицательное значение Ease). Выделите первый кадр и установите значение -90 (подобрал опытным путём для большей реалистичности... Итак 1-й и 60-й кадры ставим по -90, а 31-й и 91-й кадры ставим по 90. Затем нужно чтобы изоображение "крутилось" картинку в некоторых кадрах сузить. Сделать это можно так: выбираем 30-й кадр, и в окошке Info изменяем значение width на 1. Так же делаем и с кадром 60. 31-й и 91-й кадр тоже нужно изменить, но для большей реалистичности нужно поставить шырину гдето 10 так как если сделать тоже по 1 пикселю, изоображение будет "застывать" на короткое время в тонком положении, и это совсем не будет похоже на вращение. После того как мы это сделали, нужно добавить маски.. Создаём новый слой и повторяем всё заново, только уже в этом слое и с трассированым изоображением (какое мы покрасили в сплошной цвет). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 230 - Когда вы всё закончили нужно создать эффект тени (затемнение отдаляющейся от нас части. Для этого рисуем прямоугольник размерами чуть больше нашей картинки, без линий, и заполненный гардиентом. Гардиент: слева полностью прозрачный белый, а справа чёрный с непрозрачностью 5%. Жмём на 30-й кадр и [F6], на 31-й, на 60-й, 90-й, 91-й, 120-й, на каждом нужно нажать [F6]. Теперь нужно расставить Ease точно так как на двух предыдущих слоях, т. е. на 1-м кадре -90, 31-м 90, и т.д. После этого на 31-м, 60-м и 91-м кадрах нужно перевернуть этот прямоугольник на 180 градусов, установить ихнюю шырину так, чтоб была чуть больше шырины картинки в этом кадре, и установить непрозрачность чёрного цвета в гардиенте гдето 80-100. То же самое нужно сделать на 30-м и 90-м кадре, только не поворачивая на 180 градусов. С тенью закончили.. Теперь, если у вас картинка "блестящая" тогда нужно добавить блик при повороте.. Создаём новый слой, над слоем с тенью, нажимаем на 25-м кадре [F6], и рисуем там почти такой же прямоугольник, только с обеих сторон гардиента должен быть 100% прозрачный белый цвет, а посередине 50% прозрачный белый цвет. Чтобы удобней было смотреть фон можно сделать времено тёмным. Размещаем этот прямоугольник чуть левее картинки: Устанавливаем этот кадр на Shape Tween и переходим к кадру 85. Там нажимаем [F6]. на 80-м, 25-м тоже [F6]. А на 26-м, 86-м [F7]. Теперь берем и в 25-м кадре отодвигаем прямоугольник вправо от картинки, в 85-м делаем так же. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 231 - Теперь нужно сделать, чтобы небыло ничего видно, кроме нашей картинки. Нужно нажать правой кнопкой мышки на самый верхний слой и выбрать Mask. И на слое с тенью правой кнопкой мышки и выбрать Properties... ИЗУЧАЕМ MACROMEDIA FLASH 8 Появится Вот Вот и всё.. окошко, так - 232 - в котором должно нужно всё выбрать выглядеть в переключателе в конечном Masked. итоге: ИЗУЧАЕМ MACROMEDIA FLASH 8 - 233 - Урок № 4. Мой это Итак, самый первый урок на не перевод просто демиарте, игралась так с что не пинайте мувиклипами и сильно =) придумалось. начнём. 1. Создаём новый файл размером 600х600 2. Рисуем при помощи пера первый лепесток где-то 30х70 3. Не снимая выделения жмём F8. Конвертируем наш лепесток в мувиклип. Имя можно любое написать, а точку регистрации выбираем снизу по центру. 4. Так, один лепесток у нас есть. Теперь нам нужно его размножить. Возвращаемся в режим редактирования сцены, жмём Ctrl+F8, создаём мувиклип с точкой регистрации по центру. Назовём его.... допустим venchik. 5. Перетягиваем из библиотеки наш лепесток и располагаем, как на картинке ИЗУЧАЕМ MACROMEDIA FLASH 8 обратите внимание - 234 - на точки регистрации обоих клипов. 6. Дадим имя нашему лепестку - должны же мы как-то к нему обращаться? Поэтому выделим наш лепесток и в палитре Properties найдём поле instance_name, куда и впишем имя l_mc (первая буква L). 7. Добавим ещё один слой, назовём его action* и поставим на нём замочек (так, на всякий случай). 8. В первом кадре нового слоя (он изначально ключевой, если нет - нажмите F6) пропишите такой код: CODE var grad=30; for (var i = 1; i<=11; i++) { l_mc.duplicateMovieClip("t"+i,i); eval("t"+i)._rotation+=grad*i; } 9. Готово. Теперь нужно заставить эту "красоту" врашаться. Выходим в режим редактирования сцены и снова жмём Ctrl+F8, создаём мувиклип с точкой регистрации в центре и именем cvetok. ИЗУЧАЕМ MACROMEDIA FLASH 8 - 235 - 10. В режиме редактрования смвола cvetok помещаем в центр две копии символа venchik. Первый оставляем как есть, а второй уменьшаем размерах и тонируем (палитра Properties, выпадающее меню Color) . Большему даём имя big_mc, меньшему small_mc. 11. Заблокируем слой, который у нас есть, чтобы случайно не внест в него изменения. И создадим новый. Назовёь action* заблокируем. 12. В первом ключевом кадре слоя action* венчики в вставляем код: CODE big_mc._rotation++; small_mc._rotation--; эти две строчки должны заставить вращаться противоположные стороны. 13. Добавляем новый слой (если нужна сердцевинка цветка; если нет - ход можно пропустить) 14. Рисуем в первом ключевом кадре кружочек (изи звёздочку - решайте сами). ИЗУЧАЕМ MACROMEDIA FLASH 8 - 236 - а теперь в каждом слое во втором кадре жмём F5 (должно получится как на рисунке). 15. Всё. Цветок готов. Мы его пока не видим, но он есть. Если не терпится посмотреть вытащите на основную сцену символ cvetok нажмите Ctrl+Enter для просмотра результата. 16. Осталось всего ничего - разбросать цветы в случайном порядке на главной сцене и заставить их быть разного размера. Для этого в главной сцене (там не должно быть ничего, только один пустой слой. если есть то-то лишнее уберите) в певом ключевом кадре ишем такую весчь: CODE for (var z=0; z<8;z++) { _root.attachMovie("cvetok", "c"+z, z,{_x:600*Math.random(), _y:500*Math.random()}); var size=80*Math.random()+20; eval("c"+z)._yscale=size; eval("c"+z)._xscale=size; } ИЗУЧАЕМ MACROMEDIA FLASH 8 17. В каре - 237 - номер два жмём F6 и добавляем stop(); 18. НО! Это не заработает до тех пор, пока мы не выполним кое-какие действия. Найдите в библиотеке мувиклип cvetok и щёлкните по нему правой мышой. В контекстном меню выберите выберите Lunkage... и поставьте галку напротив пункта Export For Action Script и в поле Identifier впишите cvetok. Давим ОК. Всё! Тестируем! ИЗУЧАЕМ MACROMEDIA FLASH 8 - 238 - Урок № 5. Rain Откройте over fla файл, чтобы лучше Text понять мое объяснение. Как вы вероятно заметили на главной сцене у нас всего один кадр, но это не означает, что наша анимация осталась статичной (с помощью Action Script мы можем управлять временем внутри мувиклипа, что мы здесь и сделаем) У нас 4 слоя на главной сцене. Нижний – background (голубой прямоугольник с размерами аналогичными размерам сцены), над ним слой с простым текстом (без каких либо эффектов) Осталось еще два слоя (игнорируем слои WebArticles) каждый с определенным эффектом: первый с дождем, второй с отражением текста в воде: 1. эффект дождя рассмотрим позже 2. а сейчас поговорим об отражении текста. Двойной щелчок по мувиклипу с отражением, чтобы перейти на сцену данного эффекта (Примечание переводчика: речь идет о мувиклипе под названием sfs) На нижнем слое данной сцены находится текст. Цвет текста-отражения оставлен тот же, что и у оригинала с главной сцены, изменен только параметр Alfa. Отражение немного сжато по высоте. Еще одна копия текста (еще более уменьшеная по высоте) находится на верхнее слое. Данный текст анимирован, он двигается то вправо, то влево. Этот текст замаскирован (прим. переводчика: переходим к сцене мувика sfs). Маской является графический символ, который двигается и оставляет видимым только те части текста, которые перекрывает собой. В результате мы получаем водный эффект. Перейдем к части эффекта, с помощью которого анимируется дождь. Здесь будет вестись речь о происходящем на слое rain. Давайте посмотрим как можно сделать анимацию одной капли. Создайте новый Movie Clip и внутри него сделайте следующее: создайте маленький Movie Clip с маленькой полоской внутри – как на картинке выше ИЗУЧАЕМ MACROMEDIA FLASH 8 - 239 - В шестом кадре передвиньте эту полоску вниз и немного вбок – так же как бы падала капля дождя при ветре – см. рисунок выше. В седьмом кадре другого слоя нарисуйте белый овал в том месте куда упала капля. В 13 кадре измените для заливки овала Alfa = 0% и увеличьте размер овала – овал исчез. Вернитесь к 7 кадру и в панели свойств в меню Tween выберите Shape Теперь у нас есть Movie Clip с анимацией падающей капли и изображением водной поверхности В слое rain создайте новый Movie Clip, внутри которого сделайте следующее: на первом слое размещаем несколько мувиков с изображением капли и круга воды, делаем ключевой кадр (F6) в следующем кадре и добавляем еще несколько мувиков с анимацией капли и воды. Повторите данное действие, например, до 13 кадра. напишите в 13 кадре скрипт "stop()" Таким образом вы создали эффект падающих в случайном порядке капель. Если вы немного преобразуете мувиклип с каплей дождя, добавляя его в ключевые кадры, то эффект будет смотреться лучше.