Книги, научные публикации Pages:     | 1 | 2 | 3 | 4 | 5 |   ...   | 8 | -- [ Страница 1 ] --

F L A S 100 советов и рекомендаций профессионала O'REILLY С&ППТЕР Шам Бхангал F L A S H H A C K S Sham Bhangal O'REILLT Beijing Х Cambridge Х

Farnham Х Kbln Х Paris Х Sebastopol > Taipei Х Tokyo F L A S H.

ТРЮКИ Шам Бхангал Москва Х Санкт-Петербург Х Нижний Новгород Х Воронеж Новосибирск Х Ростов-на-Дону Х Екатеринбург Х Самара Киев Х Харьков Х Минск 2005 ББК 32.973-044 УДК 004.92 Б94 Бхангал Ш. Б94 Flash. Трюки. 100 советов и рекомендаций профессионала Ч СПб.: Питер, 2005. Ч 460 с : ил. ISBN 5-469-00763-4 Сборник предложенных экспертами советов и трюков, предназначенных для оптимизации ваших Flash-приложений, создания интересных эффектов, программ на ActionScript, звуковых и видеоэффектов, и т. п. Трюки ранжированы по степени сложности. В книге описаны технологии Flash MX, Flash MX 2004 и Flash MX Professional 2004. Для широкого круга программистов: от любителей до профессионалов.

ББК 2.973-044 УДК 04. Права на издание получены по соглашению с O'Reilly. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги.

ISBN 0596006454 (англ.) ISBN 5-469-00763- й 2004 O'Reilly Media, Inc. й Перевод на русский язык, ЗАО Издательский дом Питер, 2005 й Издание на русском языке, оформление, ЗАО Издательский дом Питер, Краткое содержание Предисловие Благодарности Введение От издательства Глава Глава Глава Глава Глава Глава Глава 1. Визуальные эффекты 2. Цветовые эффекты 3. Рисование и маски 4. Анимация 5. Трехмерная графика и физика 6. Текст 7. Работа со звуком 13 16 19 26 27 62 87 134 168 203 Краткое содержание Глава 8. Элементы пользовательского интерфейса 289 306 338 386 429 Глава 9. Быстродействие и оптимизация Глава 10. ActionScript Глава 1 1. Интеграция с браузером Глава 12. Безопасность Алфавитный указатель Содержание Предисловие Благодарности Участники проекта Прочее 13 16 Введение О чем эта книга? Для кого написана книга Как пользоваться книгой Структура книги Примеры кода ActionScript 1.0 и ActionScript 2.0 От издательства 19 20 21 22 23 24 Глава 1. Визуальные эффекты Трюк № 1. Имитация переходов на уровне пикселов Трюк № 2. Текстовые эффекты на уровне пикселов Трюк № 3. Имитация зернистости старой пленки Трюк № 4. Создание SWF на базе анимированного формата GIF Трюк № 5. Анимация PSD-файлов Photoshop в Flash 28 35. 39 45 8 Трюк № 6. Генератор деревьев Трюк № 7. Имитация движения дерева Содержание 55 Глава 2. Цветовые эффекты Трюк № 8. Применение цветовых эффектов к видео Трюк № 9. Растворение видео на черном и белом фоне Трюк № 10. Пользовательский класс цветового преобразования Трюк № 11. Создание и упорядочение пользовательских каталогов цветов Трюк № 12. Использование естественных цветовых схем Трюк № 13. Имитация эффекта сепии 63 68 72 76 79 Глава 3. Рисование и маски Трюк № 14. Быстрое построение кругов с заливкой Трюк № 15. Синтетическая графика Трюк № 16. Мозаичное заполнение плоскости Трюк № 17. Узорные заливки Трюк № 18. Имитация мозаик Эшера Трюк № 19. Исправление неточности свойства _alpha Трюк № 21. Интерференционные картины и волновые эффекты Трюк № 23. Добавление векторного контура к растровому изображению Трюк № 24. Исправление ошибки сдвига Трюк № 25. Эффект листания страниц 88 93 96 99 103 Трюк № 20. Использование сложных фигур в качестве масок.112 Трюк № 22. Сглаживание краев на растровых изображениях.119 122 125 Содержание Глава 4. Анимация Трюк № 26. Плавное сценарное движение Трюк № 27. Синхронизация анимации по времени Трюк № 28. Быстрая и компактная анимация символов Трюк № 30. Принцип Deja New Трюк № 31. Как попасть в Матрицу Трюк № 32. Анимация персонажа, сгенерированного компьютером Трюк № 33. Эффекты частиц Трюк № 34. Морфинг сложных фигур 135 138 141 149 151 154 161 Трюк №29. Альтернативные средства построения анимации. Глава 5. Трехмерная графика и физика Трюк № 35. Имитация трехмерной графики Трюк № 36. Панорамные изображения Трюк № 37. Оптимизированный трехмерный плоттер Трюк № 38. Гравитация и трение Трюк № 39. Имитация броска Трюк № 41. Поворот к заданной точке 169 174 181 186 190 Трюк № 40. Обнаружение множественных столкновений.... Глава 6. Текст Трюк №42. Сохранение разборчивости текста Трюк №43. Автоматическое завершение текста Трюк №45. Перенос сложного форматирования в Flash Трюк №46. Использование HTML и CSS в Flash 205 207 218 Трюк №44. Динамическое построение списка вводимых слов 10 Трюк № 47. Всплывающие подсказки Трюк № 48. Текстовые эффекты Трюк № 49. Эффект пишущей машинки Содержание 231 237 Трюк № 50. Текстовые эффекты, контролируемые по времени 243 Трюк № 51. Текстовые эффекты с применением морфинга.. Глава 7. Работа со звуком Трюк № 52. Создание синтезатора речи Трюк № 53. Говорящий аватар Трюк № 54. Синхронизация событийных звуков Трюк № 55. Преобразование монофонического звука в стереофонический Трюк № 56. Звуковые эффекты в реальном времени Трюк № 57. Быстрое создание звукового сопровождения для пользовательского интерфейса Трюк № 58. Оптимизация звука 253 259 263 265 268 270 Трюк № 59. Служебная информация для синхронизации.... 283 Трюк № 60. Пользовательский класс звуковых преобразований Глава 8. Элементы пользовательского интерфейса Трюк № 61. Интерактивное тестирование Трюк № 62. Правая и средняя кнопки мыши Трюк № 63. Кнопочные клипы Трюк № 64. Полосы прокрутки 291 296 298 Глава 9. Быстродействие и оптимизация Трюк № 65. Борьба с разрастанием файлов Flash Трюк № 66. Тестирование загрузки канала связи для сложных сайтов Трюк № 67. Маскировка последствий снижения качества Трюк № 68. Оптимизация графики, 308 310... 313 Содержание Трюк № 69. Хронометраж Трюк № 71. Смета быстродействия Трюк № 72. Использование растровой графики вместо векторной Трюк № 73. Оптимизация загрузки и использования компонентов 320 327 332 Трюк № 70. Динамическая настройка скорости анимации... Глава 10. ActionScript Трюк № 74. Внешние редакторы сценариев Трюк № 75. О пользе жесткой типизации Трюк № 76. Кодовые подсказки Трюк № 77. Клонирование объекта Трюк № 78. Тайм-аут по бездействию пользователя Трюк № 79. Быстрый поиск в ActionScript... Трюк № 80. Блокировка слоя actions Трюк № 81. Отладка и трассировка Трюк № 83. Черный ход ASnativeQ Трюк № 84. Нетривиальное применение операторов 342 347 350 352 357 360 363 365 372 Трюк № 82. Недокументированные возможности ActionScript. Трюк № 85. Импортирование ASC-файлов как формата XML. Глава 11. Интеграция с браузером Трюк № 86. Решение проблем совместимости Трюк № 88. Тестирование с разными версиями Flash Трюк № 89. Настройка конфигурации по умолчанию Трюк № 90. Выравнивание SWF по центру без изменения масштаба Трюк № 92. Динамическое масштабирование контента 388 396 399 402 Трюк № 87. Универсальный анализатор поддержки Flash.... Трюк № 91. Выравнивание по центру с применением CSS... 12 Трюк № 93. Создание ссылок HTML в Flash Трюк № 94. Интеграция Flash с кнопкой возврата Трюк № 95. Передача фокуса клавиатуры SWF Трюк № 96. Клавиши ускоренного вызова Содержание 414 416 422 Глава 12. Безопасность Трюк № 97. Восстановление контента по SWF Трюк № 98. Защита и шифрование файлов Flash Трюк № 99. Привязка к сайту Трюк № 100. Просмотр откомпилированного кода ActionScript 435 441 444 Алфавитный указатель Предисловие Лет семь назад я начал работать с Macromedia Flash - с версией 2.0, если уж быть точным. Заказчиком моего первого Flash-проекта была фирма Levi's, всемирно известный производитель одежды. Она пожелала создать ставший притчей во языцех классный веб-сайт. Корпорации, как и живые существа, не хотят умирать;

фирма Levi's тоже желала обрести новые жизненные силы за счет привлечения нового поколения покупателей (то есть подростков). Но, по мнению Levi's, молодежи не нравятся сайты производителей одежды;

для них такой сайт - это всего лишь скучный каталог товаров с кнопкой Buy. Решение? Превратить новый сайт Levi's в интерактивный комикс, в котором истории отдельных персонажей приводят посетителя к товарам Levi's. Остается наполнить комикс действием, романтикой, драматизмом и интригами... молодежь это любит. На первом совещании по проекту арт-директор представил концепцию анимированного веб-сайта, а мы, специалисты по HTML и веб-дизайнеры, содрогнулись от одной мысли о попытках ее реализации. Предполагалось, что на сайте постарайтесь не упасть со стула! - будут озвучиваться голоса персонажей! (Вспомните: это был 1997 год;

анимация и звуковое сопровождение на веб-сайтах считались делом почти неслыханным.) В своем первом техническом описании мы предложили использовать анимированную графику в формате GIF, звуковые файлы WAV и JavaScript rollovers. Естественно, сайт получился бы не таким эффектным, как описывал арт-директор, но мы уже привыкли быть козлами отпущения для заказчиков. Именно нам пришлось бы сообщить заказчику неприятные новости: браузеры не подходят для просмотра мультфильмов. Описание сайта, данное арт-директором, было сугубо концептуальным;

оно должно было вдохновить нас на дальнейшую работу, а не восприниматься буквально. Но арт-директор своими глазами видел анимацию в Веб. Он спросил, как были сделаны мультфильмы на веб-сайте Диснея. Мы рассказали о Macromedia Flash. Но для него название программы и технические подробности были делом второстепенным. Анимацию для сайта Levi's нужно было сделать любой ценой. Итак, мы построили сайт Levi's на базе Flash ( Вскоре после завершения работы над сайтом Levi's в отрасли веб-дизайна началось массовое сумасшествие по поводу сайтов Gabocorp и EYE4U, двух веб-агентств с анимированными Flash-интерфейсами. По сегодняшним меркам эти два сайта выглядят до смешного простыми и наивными (убедитесь сами - в апреле 2004 года исходный сайт EYE4U все еще был доступен по адресу Предисловие Сайты Gabocorp и EYE4U были реализованы практически без программирования, отличались излишне крикливым дизайном;

в них использовались движущиеся фигуры, а по экрану летали разноцветные шарики. Что же сделало их столь популярными? Как и сайт Levi's, они раскрыли большие потенциальные возможности системы. Технология Flash как дополнение к браузеру стала одним из самых многообещающих продуктов последнего десятилетия. С первых дней своего существования она вдохнула жизнь в несколько однообразный браузер. Flash позволяет людям с творческим складом мышления исследовать потенциал Всемирной паутины как анимационной и игровой платформы, ОС-подобной среды для работы с удаленными приложениями, галереи электронного искусства, видеочата, многопользовательской среды совместной работы, технологии проведения удаленных конференций, проигрывателя для музыки в формате МРЗ - да в общем-то всего, что может прийти в голову. Определив себе место в этой нише, компания Macromedia несколько лет назад выбрала своим рекламным лозунгом фразу Чем может стать Веб. Вполне естественно, технология Flash отличается исключительной гибкостью и становится настоящим раем для творчески мыслящих энтузиастов. Вероятно, именно хакерская сущность Flash стала одним из ключевых факторов успеха. В данном случае речь идет о классическом понимании хакерства как творческого исследования, использующего любые доступные (причем, порой неэтичные) средства для получения желаемого результата. Технология Flash прошла путь от простой анимационной развлекалки до всеобъемлющего лусовершенствования Интернета, каковым она стала сегодня, в основном благодаря тому, что ее создатели принимали во внимание. всевозможные хакерские трюки, придуманные сообществом разработчиков. Я помню, как люди использовали Flash 3 для создания игр типа Whack-a-Mole1, Leo's Great Day ( и даже топорных прототипов Pacman и шахмат. Обратите внимание: все это без единой строки программного кода. В Flash 3 еще не было сценарного языка! В ответ на растущую потребность в интерактивности фирма Macromedia включила в Flash 4 очень простую версию ActionScript. Тогда еще никто не знал, что этот язык будет питать целое направление компьютерной графики, которая в течение нескольких лет будет влиять на дизайн печатных изданий, телевизионных передач и фильмов. Через несколько месяцев после выхода Flash 4 такие сайты, как Mono-craft ( PrayStation ( Levitated Design & Code ( и Presstube ( прославились своими творческими изысканиями в области аудиовизуального представления информации в реальном времени (а проще говоря - хакерскими трюками!) Мы используем Flash для решения задач, которые трудно или невозможно решить другими средствами. На базе одного лишь HTML трудно создать анимационную графику, но благодаря Flash анимация в Веб получила широкое распространение. В традиционных приложениях для настольных систем трудно Весьма интеллектуальное развлечение Ч игрок лупит молотком кротов, неожиданно выскакивающих из пор. Ч Примеч. перев.

Предисловие организовать выразительный, нестандартный пользовательский интерфейс, но фирменные приложения на базе Flash сегодня работают на тысячах веб-сайтов. На момент написания предисловия я завершаю работу над веб-сайтом, который позволяет наблюдать за тем, как другие подключенные пользователи взаимодействуют с интерфейсом сайта ( Тем временем Маркое Уэскемп (Marcos Wescamp) работает над версией 2 своего приложения ( которое позволяет любому желающему управлять реальной машиной дистанционно через веб-интерфейс на базе Flash. Трудно представить, чтобы подобные приложения были написаны с применением чего-то еще, кроме Flash. Итак, Flash - настоящий рай для профессионала. Эта технология позволяет экспериментировать и предоставляет свободу для выражения идей. При этом для достижения желаемой цели иногда приходится прибегать к хитроумным трюкам. В течение долгого времени трюки и фокусы Flash распространялись в сетевом сообществе разработчиков. Многие из них (как старые, так и новые) включены в эту книгу, причем качество и стиль изложения соответствуют стандартам O'Reilly. Я считаю, что эта книга не только принесет практическую пользу, но и станет испытанием для читателя. Практическая польза: применяйте все, что вы найдете на ее страницах, в тех проектах, над которыми работаете. Здесь можно найти массу замечательных сведений, которые пригодятся почти в любом реальном проекте. Вам пригодится богатый практический опыт Шама Бхангала и четкость объяснений, которую, как я искренне считаю, может обеспечить только Брюс Эпстейн (редактор книги). Испытание: помните, что главные инструменты в вашем арсенале - это изобретательность и эксперименты. Прежде чем были написаны первые книги по Flash, прежде чем были выработаны стандартные трюки и методики, было видение конечной цели и умное, упорное, терпеливое стремление во чтобы то ни стало добиться ее. Колин Мук Апрель 2004 г.

Благодарности Шам Бхангал сделал первые шаги к веб-дизайну в 1991 году, когда занялся проектированием экранов для выдачи информации в компьютерных системах с особыми требованиями к обеспечению безопасности (вроде тех, что используются на диспетчерских пультах атомных электростанций). Вскоре он открыл для себя более традиционные средства разработки интерфейсов, анимации и мультимедиа, такие как 3D Studio Max, Photoshop и Flash. Он пишет книги о них с начала нового столетия.

Участники проекта Ниже перечислены люди, которые делились идеями, участвовали в написании книги или вдохновляли ее автора. Х Энтони Ant Идеи (a.k.a. arseiam) (Anthony Eden) работал на многих серьезных заказчиков, в том числе Microsoft, Disney и Adobe. В свободное время увлекается созданием причудливых и странных эффектов на ActionScript. С примерами его работ можно ознакомиться на сайте www.arseiam.com. Х Зе Фернандо (Zeh Fernando) работал с Macromedia Flash, начиная с версии 2. В настоящее время он трудится в бразильской дизайн-студии Grafikonstruct ( занимается созданием веб-сайтов на базе Flash и придумывает новые способы заниматься тем же самым в свободное время. Эдвин XemonerdX Хейджмен (Edwin Heijmen) - профессиональный Flash-разработчик из Нидерландов;

также является модератором на нескольких форумах, посвященных ActionScript. Увлекается объединением математики с программированием, с результатами можно ознакомиться на сайте Кроме ActionScript, также программирует на PHP, ColdFusion, Python и всех малопонятных языках, которые попадаются под руку. Другие увлечения - его замечательная подруга, андеграундный металкор, программы с открытым кодом, русская литература и друзья. Адам Филипс (Adam Phillips), обладатель призов за анимацию в сериях Flashроликов biteycastle.com, hitchHiker и Brackenwood. Победитель в номинации Flash Forward Cartoon на NYC 2003, финалист SF 2004. После более 10 лет работы в области традиционной 2О-анимации для Walt Disney Company Адам продолжает создавать свои собственные короткие фильмы. Тринадцать из них можно найти на сайте Х Х Прочее Х Грант Скиннер (Grant Skinner) ( Flash-разработчик международного уровня, успешно соединяет в своих работах программный код, проектирование интерфейса, эргономичность, маркетинг и бизнес-логику. Работает с лучшими агентствами и прогрессивными корпоративными клиентами над концептуализацией, архитектурой и реализацией Flash-приложений. Грант является обладателем множествам призов Flash, его работа была представлена на выставке SIGGRAPH Web Expo в номинации Лучшая вебграфика 2003 года. Регулярно участвует во многих конференциях и является автором ряда публикаций. Stickman попросил меня сохранить в тайне его настоящее имя, чтобы не создавать себе лишних проблем, но я могу по секрету сообщить, что он занимается веб-дизайном большого сайта в Великобритании, а также является независимым писателем. С его виртуальной личностью можно пообщаться на сайте Х Прочее Работ над книгой продолжалась довольно долго. Благодарю всех, кто был рядом со мной все это время. Разумеется, прежде всего я благодарю фирму Macromedia за создание Flash и участников проекта, поделившихся своими идеями. Спасибо Колину Муку (Colin Moock) ( за его великолепные книги, техническую помощь и за введение к книге. Спасибо группе рецензентов за замечания и исправления. В их числе: Марк Гарретт (Mark Garrett), Дэвид Хамфрис (David Humphreys), Шафик Казун (Chafic Kazoun), Марк Майхер (Mark Majcher), Сэм Нефф (Sam Neff), Дэррон Шалл (Darron Schall), Джесси Уорден (Jesse Warden) и Эдуардо Зублер (Edoardo Zubler). Спасибо всем сотрудникам O'Reilly, в том числе Тиму О'Рейли (Tim O'Reilly) за первоначальные комментарии и Раэлу Дорнфесту (Rael Dornfest) за идею разделения материала на трюки. Я благодарен Брайану Сойеру (Brian Sawyer) и Клэр Клутье (Claire Cloutier) за помощь в работе, Робу Романо (Rob Romano) за обработку многочисленных иллюстраций и Норме Эмори (Norma Emory) за подробную корректуру. Отдельное спасибо Брюсу Эпстейну (Bruce Epstein) за железную выдержку, за сверхъестественное искусство редактуры и за то, что у него находилось время для дружеской беседы. Я также благодарен своему агенту Кэрол Макклендон (Carole McClendon) из Waterside Production. Спасибо всем разработчикам сообщества Flash, которые помогли мне советом по работе со сторонним инструментарием: Игорю Когану (Igor Kogan), Дэйву Хейдену (Dave Hayden), Дэмьену Мортену (Damian Morten) (Flasm) и Алексу Блуму (Alex Blum) (Flash Plugin Switcher). Благодарю Алессандро Капоццо (Alessandro Capozzo) за разрешение воспроизвести некоторые изображения, созданные в Processing. Я также благодарен многочисленным разработчикам, проектировщикам и мечтателям, чья работа прямо или косвенно вдохновляла меня при работе над разными частями книги. Среди них стоит упомянуть Джоша Дэвиса (Josh Davis) Благодарности ( Брэндена Холла (Branden Hall) ( Эрика Нацке (Erik Natzke) ( Джеймса Патерсона (James Paterson) ( Эмита Питару (Amit Pitaru) ( и Хардино (Hardino) ( Напоследок хочу поблагодарить Брайана Молко и компанию ( за первые четыре строки Pure Morning. Я продолжал улыбаться весь день, пока писал эти строки. Ты настоящий гений.

Введение Предок Macromedia Flash изначально создавался как базовый компонент планшетного компьютера - бесклавиатурной машины, в которой для ввода использовался стилус (перо). Такая система была гораздо компактнее традиционных клавиатурных машин и идеально подходила для портативных устройств. В ней был задействован механизм векторной графики, гораздо лучше подходивший для перьевого ввода, чем традиционная растровая графика. Идея не прижилась, но вскоре открылась новая область для ее применения - Веб. Программа вывода векторной графики превратилась в программу FutureSplash, изданную в 1995 году как специализированный инструмент векторной веб-графики. Права на FutureSplash вскоре были приобретены компанией Macromedia. В 1996 году была издана первая версия программы с новым именем Flash. В конце 2003 года компания Macromedia издала Flash MX 2004 (а также Flash MX Professional 2004) с соответствующим модулем браузера Flash Player 7 и элементом ActiveX. За последние годы технология Fash обрела ряд новых важных возможностей, включая мультимедийные средства (звуки, графика, видео) и полноценный язык сценариев (ActionScript) для создания нелинейных анимаций и обработки на стороне клиента, а также взаимодействия с удаленными данными и серверными сценариями. Сейчас Flash представляет собой стандартную мультимедийную платформу в Веб. Flash Player (модуль браузера для воспроизведения файлов Flash в формате swf) установлен практически на любом компьютере, a Flash теперь позволяет создавать приложения для настольных систем. Веб-дизайн постепенно отходит от традиционной технологии HTML и отдает предпочтение интерактивности и мультимедийным возможностям Flash. В свою очередь, Macromedia продолжает расширять платформу Flash такими продуктами, как Macromedia Central (интерактивная среда для поиска и воспроизведения Flash-приложений), Flash Communication Server MX (видео- и аудиосервер реального времени) и Flash Remoting (усовершенствованное удаленное подключение к веб-службам и серверным приложениям).

0 чем эта книга?

В этой книге вы найдете новые идеи веб-дизайна сайтов, использующих Flash и ActionScript. Авторские разработки на базе Flash имеют сугубо творческий характер как в области дизайна, так и в области программирования и постоянно расширяют наши Введение представления о том, какие задачи могут решаться с помощью этой технологии. Хотя мультимедийное сценарное программирование стало более структурированным и формализованным, в тех случаях, когда стандартные пути заводят в тупик, по-прежнему остается множество возможностей для поиска нетрадиционных, обходных путей. Когда я впервые открыл Flash-приложение и начал читать официальную документацию, мне пришлось довольно долго разбираться в том, как же на самом деле следует использовать Flash. Судя по сообщениям, которые я получал с тех пор, это весьма распространенная проблема. Итак, Flash - та область, в которой эксперименты, трюки на грани возможного и всевозможные хитроумные фокусы являются частью нормального рабочего процесса, поскольку вашей целью обычно является создание чего-то нового и необычного. Чтение документации Macromedia Flash позволит дойти лишь до определенного момента, после чего вам придется искать новые трюки и фокусы для преодоления ограничений Flash. Таким образом, эта книга должна не только научить вас нескольким интересным трюкам, но и представить ряд неочевидных приемов и идей, благодаря которым ваш Flash-дизайн станет более оригинальным, а приложения - более эффективными. Конечно, это также означает, что многие из представленных приемов не будут использоваться в первоначальном виде, а послужат отправной точкой для дальнейших исследований и разработок. Не бойтесь экспериментировать - на этом принципе живет все сообщество Flash. В книге немало позаимствовано из богатых традиций сообщества Flash, в ней также представлено множество оригинальных идей для вашего обучения, развлечения и вдохновения.

Для кого написана книга Давайте признаем очевидный факт. Издательство O'Reilly лучше известно своими справочниками, нежели трюковой серией. Как мне кажется, эта книга в корне отличается от них, потому что служит иной цели, хотя круг ее предполагаемых читателей частично пересекается с аудиторией, пользующейся справочниками. Серьезные, традиционные книги по программированию содержат хорошо структурированный код и соблюдают все классические каноны, эта же книга полна исследовательского духа и причуд. Справочники рассчитаны на опытных программистов, эта книга написана для юных сердцем искателей приключений. Новичку в области Flash она покажется такой же манящей, как аромат теплого яблочного пирога. Тем, кто уже успел поработать с Flash, а возможно - начал находить это занятие немного скучным, она напомнит, почему он когда-то влюбился во Flash. Наконец, программист-ветеран найдет в книге много полезных рекомендаций из области программирования и оптимизации, а также советов по разработке приложений. Откровенно говоря, тем, кто вообще не работал с Flash, многие советы могут показаться сложными, но другие будут вполне Понятны. Каждый найдет здесь что-нибудь полезное для себя. В начальных главах я поясняю, как выполняются Как пользоваться книгой некоторые элементарные операции - такие, как создание нового слоя (команда Insert Х Timeline Х Layer) и присоединение программного кода к фрейму (выделите фрейм на панели Timeline и откройте панель Actions клавишей F9 или командой Window Х Development Panels Х Actions). Большинство наших сценариев будет размещаться на специальном слое actions (трюк 80), но некоторые сценарии должны храниться во внешних файлах.as (трюк 10). Поскольку книга в целом предназначена для читателей, обладающих опытом работы с Flash, новичкам стоит выбрать один из многочисленных учебников, опубликованных - страшно сказать! - другими издательствами. Если у вас еще нет инструментария Flash, загрузите пробную версию с сайта Macromedia ( www.macromedia.com/cfusion/tdrc/index.cfm?product=flash) и разберите учебные примеры, дающие представление об основных принципах работы с продуктом. Впрочем, многие трюки, приведенные в книге, будут понятны даже тем, кто ни разу в жизни не сталкивался с Flash. Конечно, я надеюсь, что книга вдохновит непосвященных, а посвященные смогут взглянуть на Flash с новой точки зрения. Если вы принадлежите к кругу серьезных разработчиков или классических программистов, осваивающих Flash, будьте внимательны. В книге не говорится ни о лучших методах организации работы, ни об объектно-ориентированном программировании, ни о разработке RIA (Rich Internet Application). Далее если вы заранее предубеждены против Flash, многочисленные трюки из области анимации и компьютерной графики могут навсегда перевести вас в стан поклонников Flash;

вам будет стыдно смотреть в глаза бывшим коллегам. В книге представлен лишь небольшой уголок вселенной Flash - собственно, это мой личный уголок (хотя и созданный с помощью друзей и помощников). Если пошарить в нем, вы найдете не только симпатичные звуковые и визуальные эффекты, но и множество примеров ActionScript. Попутно вы многому научитесь (возможно, даже тому, о чем раньше не подозревали). Вселенная Flash необъятна и разнообразна, и эта книга не пытается дать всю необходимую информацию всем сразу. Но практически каждый разработчик, будь то опытный Flash-мастер, новичок в сценарных языках или ветеран-программист, найдет здесь массу информации к размышлению. Если вы когда-нибудь были ребенком, если вы когда-нибудь влюблялись - книга напомнит вам эти волнующие моменты. По-моему, это просто замечательно. Так что читайте все книги по Flash и ActionScript, которые окажутся у вас под рукой, но обязательно оставьте место на полке или столе и для этой книги.

Как пользоваться книгой Прочитав книгу от корки до корки, вы обнаружите массу интересной технической информации в самых неожиданных местах. Если судить о трюках только по их названиям, вы рискуете многое упустить. Тем, кто любит выбрать интересный раздел по оглавлению и взяться прямо за него, определенно стоит пролистать остальные разделы и увидеть, что вы могли упустить. Обязательно читайте вводные разделы глав, будь вы новичок или эксперт в этой теме;

почти в каждой строке вы наверняка найдете что-нибудь полезное и интересное.

Введение В первых четырех главах рассматриваются основные концепции, определяющие впечатления от сайта, - графика, анимация и эффекты. Главы 5, 6, 7 и 8 посвящены выразительным средствам и содержанию - обращайтесь к ним за творческими идеями и информацией, относящимся к трехмерным эффектам, тексту, звуку и элементам пользовательского интерфейса. В главах 9, 10, 11 и 12 рассматриваются специальные темы: интеграция с браузером, оптимизация и безопасность (а также ActionScript в умеренных дозах). В них можно найти ответы на вопросы Как выровнять Flash Stage по центру в браузере? или Дизайн моего сайта украли! Можно ли сделать так, чтобы это не повторилось? Структура книги Flash - универсальный инструмент творческой разработки, состоящий из целого ряда аспектов, которые обычно приходится комбинировать для получения желаемого эффекта или результата, поэтому названия глав и краткие обзоры стоит воспринимать в широком смысле. Например, анимация в той или иной степени виде присутствует во многих главах, а большинство трюков содержит код ActionScript, позволяющий сделать много интересного. Тем не менее, 100 трюков пришлось организовать в более или менее разумную структуру. Так в книге появились главы, посвященные графике, звуку, оптимизации и другим темам. Х Глава 1. Визуальные эффекты. В этой главе показано, как сделать графическое оформление сайта более интересным за счет добавления впечатляющих эффектов и переходов. Х Глава 2. Цветовые эффекты. Грамотный дизайнер использует не только анимацию, но и цвет. Его часто недооценивают, но, как будет видно из этой главы, при помощи цвета можно изменить общий настрой или реализовать такие эффекты, как растворение и вытеснение. Х Глава 3. Рисование и маски. Объединение средств графической анимации Flash с ActionScript существенно расширяет творческие горизонты. В этой главе представлены графические эффекты, создаваемые как на стадии построения, так и на стадии использования сайта. Также объясняется принцип работы масок, часто используемых во многих операциях с графикой. Х Глава 4. Анимация. Трюки этой главы демонстрируют пути ускоренного создания анимационных последовательностей, а также способы оптимизации анимации, созданной под контролем ActionScript. Х Глава 5. Трехмерная графика и физика. В этой главе представлен ряд трюков, позволяющих обойти ограничения Flash по быстродействию и включить в ваш репертуар имитацию физических процессов и трехмерных эффектов. Х Глава 6. Текст. Глава посвящена способам хранения, отображения и обработки текста, а также применения к нему анимационных эффектов. Х Глава 7. Работа со звуком. Без звукового сопровождения даже тщательно проработанный контент выглядит уныло и обыденно. В этой главе показано, как создать и изменить звуковые эффекты и музыку.

Примеры кода Х Глава 8. Элементы пользовательского интерфейса. Трюки, относящиеся к составляющим пользовательского интерфейса (кнопкам, полосам прокрутки, вводу с помощью мыши и т. д.). Х Глава 9. Быстродействие и оптимизация. Глава повествует о том, как уменьшить размер файлов и обеспечить быструю работу приложения. Х Глава 10. ActionScript. Хотя практически каждый трюк в книге содержит некоторую долю кода ActionScript, в этой главе показано, как извлечь из ActionScript максимум пользы (включая применение недокументированных возможностей). Х Глава 11. Интеграция с браузером. Глава показывает, как обеспечить максимальную совместимость с браузером, чтобы как можно больше людей могли получить доступ к вашему контенту. Х Глава 12. Безопасность. Данная глава объясняет, как защитить контент и дизайн, несмотря на общую незащищенность формата SWF.

Примеры кода Примеры текстов программ вы сможете найти на сайте O'Reilly ( www.oreilly.com). Для этого найдите ссылку на книгу (например, по названию Flash Hacks или по оригинальному ISBN 0-596-00645-4) и следуйте гиперссылкам на соответствующей книге веб-странице сервера.

Что делать, если пример не работает?

Чаще всего примеры не работают из-за того, что файл Flash не был настроен в соответствии с инструкциями (если, конечно, вы не ошиблись при вводе кода). Перечитайте близлежащий текст и тщательно повторите все предписанные действия. Не забудьте разместить код там, где он должен находиться (обычно это первый фрейм слоя actions или внешний файл.as). Также обязательно укажите версию компилятора ActionScript 2.0 в окне File Х Publish Settings Х Flash Х ActionScript Version. Любой фрагмент кода, работающий с анимационными клипами, кнопками или текстовыми полями через ActionScript, нормально функционирует только в случае правильного задания имени экземпляра данного объекта. Чтобы задать имя экземпляра для анимационного клипа, кнопки или текстового поля, выделите его на сцене и введите имя экземпляра в левой части панели свойств (Window Х Properties), на месте заполнителя < Instance Name>. Еще один частый источник проблем - отсутствие идентификатора компоновки символа, необходимого для обращения к библиотечным символам из ActionScript. Чтобы задать идентификатор компоновки для символа, установите флажки Export for ActionScript и Export in First Frame в диалоговом окне Symbol Properties или Linkage Properties;

чтобы вызвать эти окна, выберите символ в библиотеке (Window Х Library) и выберите команду Properties или Linkage в контекстном меню панели Library. Затем введите идентификатор в поле Identifier (это поле становится активным лишь после установки флажка Export for ActionScript).

.

Введение Внимательно прочитайте инструкцию и убедитесь в том, что вы не перепутали имя экземпляра анимационного клипа с идентификатором компоновки. Если пример так и не заработал, загрузите примеры с веб-сайта книги, найдите хороший учебник по Flash или обратитесь за помощью к опытному специалисту по Flash.

ActionScript 1.0 и ActionScript 2. Многие трюки, представленные в книге, написаны на языке ActionScript 2.0, для которого необходима среда Flash MX 2004 или Flash MX Professional 2004. Читатель может выбрать любую из этих сред (их сравнение приведено по адресу /www.macromedia.com/software/flash/productinfo/features/comparison), поскольку в книге не используются специфические возможности, присущие только профессиональному изданию продукта. Чтобы примеры успешно компилировались, не забудьте выбрать версию ActionScript 2.0 в окне File Х Publish Settings Х Flash. Все примеры были протестированы в Flash Player 7. Там, где это особо оговорено, определения классов ActionScript 2.0 должны размещаться во внешних.as-файлах. Например, класс Transfoun из трюка 10 должен размещаться во внешнем текстовом файле с именем Transform.as (точный регистр символов в имени и расширение.as обязательны). Чтобы создать и отредактировать файл в Flash MX Professional 2004, выполните команду File Х New Х ActionScript File. В Flash MX 2003 для этого потребуется внешний редактор (трюк 74). Нам не удастся привести на страницах книги полный курс объектно-ориентированного программирования (ООП) и ActionScript 2.0, хотя некоторые пояснения будут встречаться в тексте. Большинство примеров экспортируется в формат Flash Player 6 из Flash MX 2004 (в стандартном или профессиональном издании), для чего в окне File Х Publish Settings Х Flash следует выбрать формат Flash Player 6. Тем не менее, при экспортировании в формат Flash Player 6 перестанут работать новые методы Flash MX 2004 и Flash Player 7. Например, все вызовы метода MovieClip.getNextHighestDepth() в примерах придется заменить вызовом метода для конкретной глубины, иначе в Flash Player 6 этот пример работать не будет. Предыдущая версия среды разработки Flash, Flash MX, не поддерживала Action Script 2.0. Тем не менее, многие трюки и примеры программ будут нормально работать в Flash MX. Если вы работаете с Flash MX и хотите опробовать какой-нибудь трюк с использованием ActionScript 2.0, в большинстве случаев перевод примеров на ActionScript 1.0 сводится к простому удалению типов данных ActionScript 2.0, как показано далее. Для примера возьмем фрагмент кода ActionScript 2.0 с использованием типов данных (выделены жирным шрифтом):

/ ActionScript 2 0 с т п м д н ы /. иаи анх / Н о х д м с е а F a h M 2004 / ебоиа рд ls X / Пример н с р е д я к м и я и ActionScript 2 0 / атон л оплци.

ActionScript 1.0 и ActionScript 2. function myFunction(x:Number):Number { var у:Number = 2 * x: return y;

} var myString:String = "hello";

var myClip:MovieClip = this.createEmptyMoveClipC'myClip".0);

var double:Number = myFunction(2);

trace(double);

А вот как выглядит эквивалентная версия ActionScript 1.0 без типов данных: // A t o S r p 1 0 ( е типов) c i n c i t. бз // П и е р б т е в с е е F a h M ( выше) рмр аоат рд ls X и fnto mFnto() { ucin yucinx v r у = 2 * х;

a r t r у;

eun } var myString = "hello": var myClip = this.createEmptyMoveClipC'nyClip".0): var double = myFunction(2): trace(double);

В книге часто используется код временной диаграммы, поддерживаемый как в ActionScript 1.0, так и в ActionScript 2.0 (хотя его применение не всегда является оптимальным). Такое решение объясняется тем, что многие примеры плохо преобразуются к схеме с пользовательскими классами ActionScript 2.0. Кроме того, это упрощает анализ и реализацию примеров как в Flash MX, так и в Flash MX 2004. Некоторые объектно-ориентированные примеры на базе классов, написанные на ActionScript 2.0, не компилируются в ActionScript 1.0 и требуют Flash MX 2004 (в стандартном или профессиональном издании). Если вы продолжаете использовать ActionScript 1.0 в Flash MX 2004, подумайте, не пора ли расширить свой кругозор. Дополнительная информация и перечень ресурсов, посвященных различиям между Flash Player 6 и Flash Player 7, приводится в главах 10 и 12.

Регистр символов Многие разработчики до сих пор путаются в правилах регистра символов в Flash MX 2004. Прежде всего следует понять, что речь идет о двух разных вещах: регистре символов на стадии компиляции и регистре символов на стадии выполнения. Компилятор ActionScript 1.0 игнорирует регистр символов, тогда как компилятор ActionScript 2.0 его учитывает. Тем не менее, учет регистра символов на стадии выполнения определяется версией формата SWF, в который экспортируются данные, и не зависит ни от версии ActionScript, использованной на стадии компиляции, ни от версии модуля Flash Player, в которой файл воспроизводится. Сводка правил учета регистра приведена в табл. В.1, позаимствованной из отличной книги Колина Мука Essential ActionScript 2.0 (с разрешения автора).

Введение Таблица В.1. Учет регистра символов в зависимости от языка, формата файла и версии Flash Player Ролик откомпилирован в ActionScript 1.0 или 2.0 и... Файл.swf формата Flash Player 6 Файл.swf формата Flash Player...воспроизводится в Flash Player 6 Без учета регистра...воспроизводится в Flash Player 7 Без учета регистра С учетом регистра Не поддерживается В идентификаторах (то есть именах переменных и свойств), именах функций, метках кадров и экспортных идентификаторах символических имен в файлах.swf формата Flash Player 7 регистр символов не учитывается. С другой стороны, в зарезервированных словах вроде if регистр символов учитывается даже в Flash Player 6. Flash Player 6 не может воспроизводить файлы.swf формата Flash Player 7.

От издательства Ваши замечания, предложения, вопросы отправляйте по адресу электронной почты comp@piter.com (издательство Питер, компьютерная редакция). Мы будем рады узнать ваше мнение! На веб-сайте издательства вы найдете подробную информацию о наших книгах.

Г ЛДВД Визуальные эффекты Трюки № 1- Предполагается, что читатель уже знаком с основными концепциями применения Flash для создания визуальных эффектов и анимации на временной диаграмме. Но даже если ваш опыт работы с Flash еще недостаточен, описанные в настоящей главе приемы все равно покажутся вам интересными. После того как вы освоите азы Flash (по учебнику или по электронной документации), попробуйте вернуться к тем трюкам, которые вас особенно заинтересовали. Сначала я хотел открыть книгу советами по оптимизации, безопасности и другим темам того же плана. Но затем я решил отложить эти темы до более позднего времени в надежде, что трюки этой главы заинтересуют читателя и расширят его кругозор, не нарушая принципов хакерской этики: Сначала показывать самое интересное. Итак, в настоящей главе собраны трюки, показывающие, как реализовать эффекты, которых вы либо вообще не видели, либо видели, но не знали, как их воспроизвести. Они, как и весь остальной материал книги, научат вас чему-то новому, а в конечном счете и вдохновят - причем не так, как нас вдохновляют бессмертные произведения искусства, а, скорее, стимулируют к дальнейшей работе. Надеюсь, что вам захочется опробовать их в деле и создать что-нибудь похожее самостоятельно. Трюки этой главы были объединены из-за того, что все они имеют отношение к визуальным эффектам. В дальнейших главах будут описаны визуальные эффекты, основанные на переходах и колоризации, трехмерности, применении масок и использовании API графического вывода. В данной главе рассматриваются пиксельные эффекты, преобразования анимированных изображений GIF и файлов Photoshop в файлы Flash.fla и.swf (исходные форматы документирования и распространения, используемые Flash). Глава завершается двумя трюками, в которых мы сгенерируем дерево и заставим его качаться на ветру. Хотя маски интенсивнее всего используются в главе 3, из-за своей исключительно важной роли в Flash (см. трюк 1) они также неоднократно встречаются в других главах. По этой причине я привожу краткое введение для читателей, не знакомых с масками. Анимации Flash создаются посредством наложения одного или нескольких слоев (аналогичных слоям Photoshop и других графических программ). На панели Глава 1. Визуальные эффекты Timeline расположена главная временная диаграмма, предназначенная для упорядочения слоев и отображения их содержимого с течением времени. Маски традиционно использовались для создания визуальных эффектов (например, имитации луча прожектора), при которых один слой просматривается сквозь дыру в слое маски. Таким образом, маскирующий слой определяет видимую область нижележащего (маскируемого) слоя;

остальные области считаются замаскированными, то есть невидимыми. Чтобы создать маскирующий слой в инструментальной среде, вставьте новый слой на временную диаграмму (команда Insert Х Timeline Х Layer) перед маскируемым слоем. Затем в диалоговом окне Layer Properties (Modify Х Timeline Х Layer Properties) задайте свойству Type маскирующего слоя значение Mask. Далее на маскирующем слое создайте фигуру, определяющую границы маски. В Flash области с пикселами на маскирующем слое считаются прозрачными, то есть сквозь них просматривается маскируемый слой. Области без пикселов блокируют (закрывают) маскируемый слой. Например, чтобы имитировать эффект прожектора, при котором маскируемый слой виден сквозь круглое отверстие, можно при помощи инструментов рисования (Window Х Tools) создать черный круг и использовать его в качестве маски. В Flash MX появилась возможность создания сценарных масок, то есть использования одиного анимационного клипа для маскировки содержимого другого клипа. Сценарная маска, как подсказывает само ее название, назначается динамически на стадии выполнения вызовом метода ActionScript MovieClip.setMaskO. Назначение маски на стадии выполнения почти не отличается от создания маскирующего слоя на стадии разработки, но обеспечивает гораздо большую гибкость. Маску, используемую для данного клипа, можно сменить на стадии выполнения;

также существует возможность создания новых масок. Хотя маскирующий слой может анимироваться на стадии разработки, анимация маски на стадии выполнения средствами ActionScript позволяет создавать гораздо более сложные эффекты. Надеюсь, это краткое введение поможет наиболее эффективно использовать маски в различных трюках книги, в которых задействованы как маски стадии разработки, так и маски стадии выполнения (то есть сценарные). За дополнительной информацией о масках обращайтесь к справочной системе (раздел How Do I Х Basic Flash Х Work with Layers Х Add a Mask Layer) или проведите поиск в электронной документации по ключевому слову Mask. Но довольно теории! Переходим к самому интересному.

Имитация переходов на уровне № 1 пикселов ТРЮК Имитация эффектов растворения и вытеснения на уровне пикселов (по аналогии с Macromedia Director). Flash не обладает встроенной поддержкой переходов на уровне пикселов. Этот трюк может использоваться в сочетании с другими видеотрюками (см. трюк 8), чтобы сделать статическую растровую картинку более интересной (см. трюк 3).

Имитация переходов на уровне пикселов В Flash используется векторный механизм графического вывода, не предоставляющий доступ к отдельным пикселам экрана. В основу трюка заложено то обстоятельство, что пикселы весьма малы, а все маленькие объекты похожи друг на друга. На рис. 1.1 изображен пример перехода на уровне пикселов.

Рис. 1. 1. Имитация перехода на уровне пикселов (шаги 1-4) Переход постепенно скрывает (маскирует) пикселы первого изображения, чтобы на каждом шаге исчезало всего несколько пикселов. В ходе маскировки проявляется второе изображение, находящееся под ним;

так возникает эффект перехода от первого изображения ко второму. На рис. 1.2 изображены маски, использованные для создания эффекта. Для черных пикселов маска демонстрирует первое (верхнее) изображение, а для белых пикселов - второе (нижнее). Как будет показано далее, ценой небольших изменений можно создавать гораздо более сложные переходы. 1. Создайте фиктивный пиксел. В нашем примере будет использоваться маленький квадрат А х 4. 2. Создайте большое количество фиктивных пикселов. В Flash эта задача легко решается при помощи метода MovieClip.attachMovie(). 3. Создайте сценарий, который убирает каждую точку по прошествии определенного времени. Используя все точки большой маски, мы создаем переход между двумя изображениями (или видеоклипами) наподобие показанного на рис. 1.1.

Глава 1. Визуальные эффекты Рис. 1.2. Маски для имитации перехода на уровне пикселов (шаги 1-4) Основная проблема в том, что для реализации эффекта используются тысячи фиктивных пикселов. Следовательно, мы не можем себе позволить такие решения, как выполнение сценариев onEnterFrame() для каждого кадра на всей протяженности эффекта - они слишком интенсивно расходуют ресурсы процессора. Вместо этого будет использована функция setlnterval(). Такой подход существенно снижает объем необходимых вычислений, поскольку код выполняется всего один раз для каждого фиктивного пиксела на протяжении эффекта.

Создание пикселов Создать маску из пикселов ненамного сложнее, чем обычный прямоугольник. 1. Создайте новый документ Flash (File Х New Х Flash Document). 2. Выполните команду Modify Х Document, задайте размеры сцены более чем 200 х 200 пикселов, выберите белый цвет фона (подойдет любой светлый оттенок, на котором будет хорошо виден черный прямоугольник из шага 3). 3. Нарисуйте черный прямоугольник без контура (контур все равно останется незаметным, но замедлит обработку эффекта). 4. На панели свойств (Window Х Properties) задайте высоту и ширину прямоугольника равными 4. Задайте координаты X и Y равными 0. Итоговый вид панели показан на рис. 1.3 рядом с точкой регистрации. 5. Преобразуйте прямоугольник в символ анимационного клипа. Для этого выделите его (при помощи инструмента Selection) и нажмите клавишу F8 (Modi Имитация переходов на уровне пикселов fy Х Convert to Symbol). На экране появляется диалоговое окно Symbol Properties. Присвойте символу клипа имя dot и проследите за тем, чтобы параметры экспортирования были заданы в соответствии с рис. 1.4 (если параметры компоновки Linkage не отображаются в окне, щелкните на кнопке Advanced). Sae hp + II 0. L.

Н;

4, " 0.0 I Рис. 1.3. Маска 4 x 4 с точкой регистрации ПРИМЕЧАНИЕ Эксперт ActionScript может предложить построение маски средствами Drawing API, но у Flash уйдет слишком много времени на динамическую прорисовку всех прямоугольников, необходимых для этого эффекта.

Рис. 1.4. Диалоговое окно свойств символа Далее экземпляр анимационного клипа можно удалить со сцены, так как мы будем использовать метод MovieClip.attachMovie() для динамического присоединения библиотечного символа к главной временной диаграмме на стадии выполнения. Если вы предпочитаете обойтись без создания клипа с его последующим Глава 1. Визуальные эффекты удалением, воспользуйтесь командой Insert Х New Symbol (клавиши Ctrl+F8 (Windows) или 3S+F8 (Mac)) и создайте символ анимационного клипа прямо в библиотеке. В эффекте используется большая маска, состоящая из квадратов 4 x 4. Маска применяется к первому изображению;

эффект основан на маскировании дополнительных прямоугольников с течением времени, в результате чего второе изображение (находящееся под первым) проступает сквозь новые отверстия.

Создание множества пикселов Добавьте на главную временную диаграмму новый слой и присвойте ему имя actions (см. трюк 80). На слое actions главной временной диаграммы выделите кадр 1 и свяжите с ним следующий фрагмент кода при помощи панели Actions (F9): function drawGrid (theWidth:Number. theHeight:Number):Void { var initDot:Object = new ObjectO;

var k:Number = 0;

for (var i:Number = 0: i < theWidth;

i += 4) { for (var j:Number = 0: j < theHeight: j += 4) { var dotName:String = "dot" + i + "_" + j : initDot._x = i ;

initDot._y = j : this.attachMovieC'dot". dotName. k. initDot);

drawGrid(200. 200): Приведенный фрагмент создает квадрат 200 х 200 пикселов, состоящий из точек - анимационных клипов 4 x 4 (изменяя параметры drawGridQ, можно создать квадрат других размеров). Каждый экземпляр размещается в позиции (i, j) на глубине k с именем dotz_j. Первому экземпляру (находящемся в левом верхнем углу квадрата) соответствует имя dotO_0, а последнему (в правом нижнем углу) - имя dot199_199. Чтобы просмотреть созданные анимационные клипы, выполните код в отладочном режиме (Control Х Debug Movie), но учтите: для отображения всех клипов отладчику может потребоватьея некоторое время. Даже если вам покажется, что Flash висит, подождите несколько секунд. ПРИМЕЧАНИЕ Эффект создает большое количество анимационных клипов: (200/4) 2 = 2500. Если на экране одновременно находится от 3000 до 4000 клипов (даже не перемещаемых), работа Flash заметно тормозится, поэтому превышать порог в 2500 пикселов не рекомендуется. Если маскируемая область больше той, которая используется в нашем примере (квадрат со стороной 200 пикселов), то вместо добавления новых прямоугольников лучше увеличить их размеры.

Управление пикселами Возникает следующий вопрос: как заставить точки исчезать по нашему желанию? Для этого лучше всего воспользоваться вызовом setlnterval {объект, ме Имитация переходов на уровне пикселов mod, период), который обеспечивает вызов функции объект.метод{) каждые период миллисекунд. Включите следующую строку после команды initDot._y=j;

в предыдущем сценарии: initDot.timer = 1000 + Math.ceil(Math.random()*800);

Свойство timer, создаваемое в этой строке, содержит целое число в интервале от 1000 до 1800 для каждого внутреннего клипа. Начальная граница 1000 определяет паузу перед началом эффекта, а число 800 определяет его продолжительность. Оба значения задаются в миллисекундах - стандартных единицах измерения времени в ActionScript. Трюк основан на эффекте маски, однако Flash позволяет создать только одну маску для каждого анимационного клипа. Чтобы обойти это ограничение, проще всего создать все клипы-лточки внутри другого клипа, выполняющего функции маски. Имя маскируемого клипа передается в параметре функции drawGrid() (изменения выделены жирным шрифтом): function drawGrid (theWidth:Number, theHeight:Number, imagedip:MoveiClip):Void { var initDot = new ObjectO;

var k:Number = 0: // Создание клипа для хранения всех "точек" this.createEmptyMovieClipC'mask", 1);

// Назначение созданного клипа в качестве маски imagedip.setMask(mask): for (var i:Number = 0: i < theWidth: i += 4) { for (var j:Number = 0: j < theHeight;

j += 4) { var dotName:String = "dot" + i + "_" + j ;

initDot._x = i ;

initDot._y = j ;

initDot.timer = 1000 + Math.ceil(Math.random()*800): mask.attachMovie("dot", dotName, k, initDot);

} drawGrid(200. 200, imagel_mc);

Итак, все точечные клипы находятся внутри другого анимационного клипа с именем mask. Последний назначается маской для клипа, имя которого передается в параметре функции drawGrid(). В данном примере используется клип с именем image1_mc;

мы создадим его позднее, в разделе Использование эффекта. Но сначала нужно позаботиться об уничтожении клипов-лточек.

Создание таймеров Для каждого точечного клипа уже установлено свойство timer. Теперь давайте напишем код, обеспечивающий исчезновение точек. Отредактируйте символ клипа dot и добавьте новый слой с именем actions (традиционно первый слой временной диаграммы называется scripts или actions и используется исключительно для хранения сценариев).

Глава 1. Визуальные эффекты Добавьте к первому кадру слоя actions следующий фрагмент:

removeMe = function О { clearlnterval(countDown): thi s.removeMovi eCli p();

}: var countDown = s e t l n t e r v a l ( t h i s. "removeMe", timer);

п В последней строке функция setlntervalQ создает для каждой точки таймер countdown. При завершении отсчета таймер вызывает функцию removeMe(). Эта функция отменяет интервал отсчета и удаляет текущий клип. Тем самым создается эффект перехода лисчезающих пикселов.

ПРИМЕЧАНИЕ Если при вызове setlnterval() в первом параметре передается ссылка на функцию (как при вызове setlnterval(removeMe,timer)), значение ключевого слова this в функции removeMe() не определено. По этой причине мы используем альтернативную форму setlnterval(this,"removeMe",timer), у которой в первых двух параметрах передаются объект и имя метода (в этом случае ключевое слово this представляет объект, переданный в первом аргументе). При вызове removeMe() ключевое слово this находится в области видимости, поэтому мы можем использовать вызов this.removeMovieClip() для уничтожения клипа.

Использование эффекта Разместите два изображения/видеоклипа, связываемых переходом, на двух разных слоях;

первое изображение (или видеоклип) должно находиться на верхнем слое, как показано на рис. 1.5. На панели свойств присвойте ему имя экземпляра image 1_mc. Второе изображение может называться как угодно, поскольку оно нигде не упоминается в программном коде. 5 Х1 0 1 5 3. 2s :

;

S.

Рис. 1.5. Создание перехода между двумя слоями Текстовые эффекты на уровне пикселов Чтобы ознакомиться с примером эффекта в действии, загрузите файл pixelMask.fla с сайта книги.

Усовершенствования Изменяя интервалы между исчезновением точек, можно имитировать разные эффекты переходов. Например, изменяя интервал на основании позиции точки, вы сможете реализовать многие стандартные переходы:

// В т с е и с е а н п а о ыенне в арв iiDttmr= 10 + (ahrno(*iiDt_)1) nto.ie 00 Mt.adm)(nto.x*0;

// В т с е и п д а о а и ыенне о игнл iiDttmr= 10 + (ahrno(*iiDt_ + iiDt_)5;

nto.ie 00 Mt.adm)(nto.x nto.y*) Итоги Многие Flash-разработчики недооценивают возможности масок. На первый взгляд, маскам трудно найти реальное применение, но если вникнуть поглубже, вы измените свое мнение. Вполне естественно, что маски широко применяются в самых замечательных эффектах, описанных в книге (см. трюк 21)!

Текстовые эффекты на уровне №2 пикселов ТРЮК Создание текстовых эффектов и переходов на уровне пикселов. Основной недостаток имитации пиксельных эффектов в Flash состоит в том, что потенциальное ухудшение быстродействия ограничивает количество используемых фиктивных пикселов. Существует два способа сохранить их количество на достаточно низком уровне: ограничиваться небольшими изображениями (как при имитации переходов на уровне пикселов - см. трюк 1) или же применять эффекты к изображениям с многочисленными фоновыми пикселами, которые могут игнорироваться при обработке эффекта. Теперь это кажется очевидным, но когда-то мне понадобилась целая вечность, чтобы понять, что текст подходит под описание лизображения с многочисленными фоновыми пикселами. После непродолжительных поисков в Веб напрашивается предположение, что этот факт действительно неочевиден - похоже, больше никто не использует этот трюк. В настоящем разделе мы сделаем так, чтобы текст формировался из пикселов, разбросанных по экрану. Конечно, применение других вычислений с учетом позиций пикселов маски позволяет реализовать и другие эффекты. Трюк делится на две части: Х Х преобразование текстового блока в квадраты 1 x 1 (лфиктивные пикселы из предыдущего примера);

анимация фиктивных пикселов.

36 Делается это так: 1. Создайте текстовое поле и введите в нем текст.

Глава 1. Визуальные эффекты 2. Нажмите клавиши Ctrl+B (Windows) или

Й Н:: IS. Х Ч Х Х Х Рис. 1.6. Задание позиции регистрационной точки для выделенного текста Трюк работает лишь в том случае, если текст был преобразован в примитивную фигуру командой Modify Х Break Apart (вскоре вы поймете, почему это необходимо). Вообще говоря, эта операция нежелательна, поскольку она увеличивает размер файла. При большом объеме текста прирост получается довольно значительным. Одно из возможных решений проблемы - включение каждой буквы шрифта в виде отдельного клипа, содержащего примитивную фигуру, и формирование предложений на стадии выполнения. На первый взгляд кажется, что файл SWF перегружается множеством лишних байтов, но стоит вспомнить, что практически то же самое происходит при сохранении в SWF контуров шрифтов, а эта операция должна выполняться всегда, когда буквы шрифта должны использоваться в качестве графических элементов. Нам также понадобится второй анимационный клип с идентификатором компоновки dot. Клип dot представляет собой прямоугольник 1 х 1, у которого обе координаты, X и Y, равны 0, как показано на рис. 1.7 (для задания свойств следует использовать панель Properties, так как точка получается слишком маленькой). Программный код дублирует эффект проявления с размывкой, но на этот раз текст действительно размыт (обычно размывка имитируется при помощи альфа-канала), как показано на рис. 1.8, поскольку разбиение текста на пикселы является одной из составляющих эффекта.

Текстовые эффекты на уровне пикселов Hi! 10 :Y:;

O.Q Рис. 1.7. Маска 1 х Рис. 1.8. Текстовый эффект уровня пикселов (шаги 1-4) function moverО { this._x -= (this._x - t h i s. x ) / 4;

this._y -= (this._y - t h i s. y ) / 4: function lastMoverO { this._x -= (this._x - t h i s. x ) / 4;

this._y -= (this._y - t h i s. y ) / 4;

i f ( ( t h i s. _ x - t h i s. x ) < 0.1) { dotHolder.removeMovi eCli p();

t e x t C l i p. _ v i s i b l e = true;

// Размещаем текст на сцене и скрываем его textClip = this.attachMovie("text". "textClip". 0);

textClip._x = 200;

textClip._y = 100;

textClip._visible = false;

// Инициализация переменных, включая height и width var dots = 1;

var distance = 10000;

var stopDot = true;

var height = textClip._y + textClip.Jieight;

var width = textClip._x + textClip._width;

// Создание клипа для каждого пиксела в тексте Глава 1. Визуальные эффекты var dotHolder = this.createEmptyMovieClip("holder". 1);

for (var j = textClip._y;

j < height;

j++) { for (var i = textClip._x;

i < width;

i++) { i f ( t e x t C l i p. h i t T e s t ( i. j. true)) { var c l i p = dotHolder.attachMovie("dot". "dot" + dots, dots);

i f (stopDot) { c l i p. _ x = distance;

clip.onEnterFrame = lastMover;

stopDot = false: } else { c l i p. _ x = Math.randomO * distance - distance/2;

clip.onEnterFrame = mover;

} // Сохранение позиции, в которую должен перейти клип ( c l i p. x. c l i p. у ), // и удаление точки с экрана clip.x = i ;

clip.у = j : clip._y = j : dots++;

Функциями mover() и lastMoverQ мы займемся чуть позже. Остальной код помещает текст на сцену и скрывает его, после чего инициализирует несколько переменных, в том числе и определяющих ширину и высоту текста. Цикл for использует метод MovieClip.hitTest() для поиска всех непустых пикселов в тексте и создает для каждого найденного пиксела соответствующий клип dot. С каждым клипом связывается обработчик onEnterFrameO, обеспечивающий анимацию эффекта (вместо этого также молено было воспользоваться вызовом setlnterval() - см. трюк 1). В цикле стоит обратить внимание на два неочевидных момента. Во-первых, использование метода hitTest() и является той причиной, по которой было произведено исходное разбиение текста. Метод hitTest() всегда возвращает false для динамических текстовых полей (в этом случае все пикселы интерпретируются как пустые). Во-вторых, посмотрите, как мы проверяем, все ли пикселы находятся в своих конечных позициях. Большинство пикселов случайным образом разбросаны по экрану и находятся под управлением обработчика mover(). Однако первый пиксел смещается на наибольшее расстояние, а также получает более сложный обработчик lastMover(). Данное событие останавливает эффект при достижении пикселом своей итоговой позиции, так как к этому моменту все остальные пикселы уже должны находиться на своих местах (они перемещаются на меньшее расстояние).

ПРИМЕЧАНИЕ Проверка выглядит несколько неестественно, но она требует гораздо меньших ресурсов, чем правильное выполнение аналогичной проверки для каждого пиксела.

Имитация зернистости старой пленки Итоги Текстовые эффекты на базе Flash часто встречаются во Всемирной паутине, но я не знаю ни одного сайта, на котором бы применялись текстовые эффекты уровня пикселов. Самая замечательная особенность трюка с фиктивными пикселами состоит в том, что функция перемещения пикселов позволяет реализовать множество других эффектов: снег, водопад, летящие звезды (см. трюк 33) и т. д.

ТРЮК Имитация зернистости старой пленки Создание эффекта зернистой старой пленки с использованием Photoshop и Flash.

№ Векторный механизм графического вывода Flash обладает массой достоинств, но иногда требуется получить менее четкое изображение и уменьшить резкость границ. Одним из простейших способов получения более стильной.анимации или приглушения излишне резких границ является эффект зернистости, характерный для старых кинопленок. Для получения более драматических или специализированных эффектов его можно объединить с эффектом колоризации (трюк 8) или сепийной цветовой гаммы (трюк 13). Самый очевидный способ реализации эффекта зернистости основан на добавлении в изображение случайных векторных линий и точек. Однако в этом случае воспроизводится только внешний эффект, но не атмосфера старого фильма;

в конечном счете изображение все равно остается резким и четким. В этом трюке для уменьшения четкости клипа будет использоваться растровое изображение. Трюк делится на две фазы: создание растра зернистости в Photoshop и его последующее импортирование и использование в Flash (разумеется, вместо Photoshop также можно использовать Fireworks - общие принципы остаются теми же).

Создание растра зернистости Грязь, царапины и выпавшие частицы покрытия делают фотографическое изображение более реальным. При попадании на пленку или негатив пыль, грязь, волокна и т. д. отображаются в виде темных пятен или линий. Царапины выглядят как белые линии. Чтобы приступить к настройке изображения в Photoshop, выполните следующие действия: 1. Запустите Photoshop. 2. Нажмите клавишу D, чтобы восстановить цвета изображения и фона по умолчанию. 3. Нажмите клавишу X, чтобы поменять местами цвета изображения и фона. Вы получаете растр с черным цветом фона и белым цветом изображения. 4. Создайте новый файл Photoshop с именем grain.psd командой File Х New. Выберите размеры изображения такими, чтобы длина превышала ширину.

Глава 1. Визуальные эффекты Я создал для демонстрационных целей файл 800 х 4.00 пикселов, но вы можете обойтись гораздо меньшим файлом (обычно 400 х 200). 5. Установите флажок Background Color в группе Contents диалогового окна New Document, как показано на рис. 1.9. В результате получается прямоугольный черный холст.

1 :,,,.У :;

,.,JJ:'..'.. &. ;

: Х I pixels I pixels 1 pixels/inch | ;

й Background C lor;

Х ;

: :. : ;

o ;

Х:j О Transparent ::

:

...

.

;

\ Х' Рис. 1.9. Установка флажка Background Color в Photoshop 6. Добавьте новый слой при помощи кнопки Create a New Layer в нижней части вкладки Layers. Вывод будет осуществляться только на новом слое, поэтому следите за тем, чтобы на вкладке Layers всегда оставался выделенным только слой Layer 1 (рис. 1.10).

Nr a om l yjjsjOpacity: M O, OH j Ьa Fл:iiwH]>Jj [C-eate в new layer [ Рис. 1.10. Установка флажка Background Color в Photoshop Пора переходить к прорисовке эффектов. В старых фильмах встречаются три разновидности шумов: Х волосяные линии, обусловленные темными включениями в пленке;

Имитация зернистости старой пленки Х точки и пятна, возникающие из-за попадания частиц грязи или других веществ на пленку. Светлые пятна появляются из-за царапин или отпадения частиц покрытия пленки;

Х царапины, появляющиеся из-за физического повреждения пленки, стирающего часть изображения.

Используя инструментарий Photoshop (вернее всего, инструменты Pencil и Brush), добавьте три типа эффектов на слой Layer 1. На рис. 1.11 слева находятся маленькие точки, в середине - большие пятна, и справа - царапины. Сверху и снизу расположены волосяные линии.

Рис. 1.11. Имитация дефектов пленки в Photoshop Размойте пикселы изображения при помощи инструмента Photoshop Eraser со средней прозрачностью. На настоящей пленке глубокие царапины и другие эффекты кажутся белыми, но многие дефекты проявляются на поверхности лишь частично. Именно это обстоятельство имитируется на рис. 1.12.

Рис. 1.12. Имитация неглубоких царапин Глава 1. Визуальные эффекты До настоящего момента использовался только белый цвет, однако многие дефекты старых пленок кажутся черными. Их тоже необходимо имитировать: 1. Выделите часть белых пикселов при помощи инструмента Photoshop Selection. 2. Инвертируйте выделение командой Image Х Adjustment Х Invert. Выделенные пикселы вроде бы исчезают, потому что мы создаем черные пикселы на черном фоне, но на самом деле они остаются на месте - просто мы их не видим. 3. Удалите фоновый слой (щелкните на нем на вкладке Layers и перетащите на значок с мусорным баком в нижней части вкладки). В итоге у вас должно получиться что-нибудь вроде изображения, показанного на рис. 1.13 (клетчатым узором в Photoshop изображается нулевой альфа-канал, то есть отсутствие пикселов).

f Рис. 1.13. Имитация выпадения фрагментов поверхности Сохраните изображение в виде файла PNG. Не используйте никакие оптимизации для Веб! Многие дизайнеры оптимизируют графику, подготовленную к загрузке в пакет веб-дизайна (Flash). В действительности делать этого не нужно;

оптимизацию лучше всегда откладывать до момента создания SWF во Flash, поскольку в таком случае вы получаете большую свободу действий. Например, если клиент решит, что ему нужна версия сайта для каналов с высокой пропускной способностью, вам останется лишь изменить параметры экспортирования растрового изображения в Flash. Если же растровое изображение будет оптимизировано перед импортированием в Flash, придется заново запускать Photoshop и экспортировать графику с новыми параметрами. После этого все экземпляры старого растра на временной диаграмме Flash нужно будет заменить экземплярами нового растра. Таким образом, импортируя растры с полным качеством и поручая их оптимизацию Flash, вы сэкономите немало времени. Для тех, кто предпочитает работать в программе Fireworks, ее интеграция с Flash (то есть запуск и редактирование) также способствует повышению эффективности.

Имитация зернистости старой пленки Использование растра в Flash После того как растровое изображение будет экспортировано из Photoshop в формате PNG, необходимо обеспечить его правильное использование: 1. Импортируйте файл PNG в Flash командой File Х Import Х Import to Library. 2. Выделите растр в библиотеке. 3. Щелкните правой кнопкой мыши (Windows) или щелкните с нажатой клавишей 3И (Мае) на панели библиотеки. Выберите в контекстном меню команду Properties. 4. Измените свойства изображения в соответствии с рис. 1.14: выберите низкий коэффициент сжатия JPEG и запретите сглаживание (без сглаживания Flash быстрее выполняет операции с растровыми изображениями).

Х :'.ХХХХ"ХХ :

g r a h OK Cancel Update Сфосип-ients and SettjngsAgham 1S;

39;

2O Compression;

;

Photo (JPEG) Teat Рис. 1.14. Свойства растрового изображения в библиотеке Flash ПРИМЕЧАНИЕ Обратите внимание: созданное нами изображение содержит как сжатие JPEG, так и альфа-канал! Создать автономный файл в формате JPEG с ассоциированным альфа-каналом не удастся, но Flash не возражает против таких файлов. Данная особенность чрезвычайно полезна для наложения векторов Flash на растровые изображения.

Перетащите растровое изображение на сцену, нажмите клавишу F8 (команда Modify Х Convert to Symbol) и преобразуйте растр в символ анимационного клипа с именем grain. Далее остается лишь наложить подвижную версию нашего клипа на видео, растровое изображение или векторную анимацию. На рис. 1.15 она наложена на статическое изображение;

рисунок выглядит так, словно перед вами кадр из старого фильма.

Глава 1. Визуальные эффекты, v;

wTn > г - '.\ - T- - Ч - i: * п* Ч _J. Х'.Х-Х' ^. Х.Х J : :

v *" Х i ^Х, u л Х Х Х ! : Mliu., <%.

.

1iiiii-i.... т. Рис. 1.15. Имитация старой пленки (шаги 1-3) Те части клипа grain, которые не появляются на изображении, спрятаны при помощи маски. Окончательный эффект показан на рис 1.16 (или исполь уйте файл grain.fla с веб-сайта книги) иыюльзуиге Рис. 1.16. Использование маски для придания окончательного вида эффекту Итоги Область применения представленной методики не ограничивается созданием атмосферы в видеоклипах. Эффект старой кинопленки также позволяет Х маскировать недостатки видеоматериала (например, артефакты, обусловленные слишком высоким коэффициентом сжатия);

Создание SWF на базе анимированного формата GIF придавать динамику статическим изображениям и создавать иллюзию того, что они являются частью видеоклипа;

скрывать нестыковки в материале. Например, при объединении видео со статической графикой (скажем, основной видеосекции и векторных начальных/ конечных титров) переход можно замаскировать, придав эффект зернистости всему произведению.

Создание S F набазе анимированного W формата GF I Быстрое преобразование анимированных GIF-файлов для использования в эффектах Flash. Мне показалось, что читателю было бы интересно узнать, как улучшить визуальное восприятие GIF-файла, загрузив его в Flash. Я отправился на страницу O'Reilly ( где меня встретила зверушка, изображенная на рис. 1.17 (утверждают, что это долгопят). Имя файла oreilly_header1.gif вполне типично для срезов, создаваемых для таблиц на базе HTML, - стало понятно, что с этим GIF-файлом можно работать. Я еще раз посмотрел на эту зверушку, благо она была довольно симпатичной, и подмигнул ей. Она подмигнула в ответ. После начального замешательства и обязательного повторения эксперимента я понял, что имею дело с анимированным GIF-файлом.

O'REILLY Рис. 1.17. Долгопят Ч талисман издательства O'Reilly на сайте oreilly.com Тогда я задумался... На примере Flash-версии файла с этой зверушкой было быудобно продемонстрировать различия между Flash и традиционным дизайном HTML. Данный трюк показывает, как применение Flash позволяет уменьшить размер файла по сравнению с анимированным GIF. А после успешной реализации двухмерной Flash-версии мигающего долгопята можно использовать ее для создания трехмерного мигающего долгопята (см. трюк 35).

Исходный анимированный GF I Копия нашего анимированного знакомого легко создается командой Save в веббраузере. Например, в Internet Explorer для Windows следует щелкнуть на GIFфайле правой кнопкой мыши и выбрать команду Сохранить рисунок как (Save Picture As) в контекстном меню. Изображение сохраняется на локальном диске. Другое преимущество анимаций Flash перед анимированными GIF-файлами заключается в том, что их труднее украсть, чем этот рисунок с сайта O'Reilly, - для Глава 1. Визуальные эффекты этого SWF маскируется (см. трюк 98) в кэше браузера, где пользователи обычно ищут загруженные SWF. Если открыть GIF-файл O'Reilly в графическом редакторе (например, Fireworks или Photoshop/ImageReady), вы увидите, что анимация подмигивания воспроизводится каждые 12 секунд (первому кадру назначена 12-секундная задержка), а ее общая продолжительность равна 12 секундам. Первое, на что следует обратить внимание, - на то что абсолютное большинство пикселов изображения не изменяются между кадрами;

меняются только глаза. Следовательно, преобразование ролика в Flash и анимация одних глаз позволит заметно сократить размер файла. Также следует помнить, что анимация не интерактивна. В данном случае отсутствие интерактивности вполне уместно (выходки зверька не должны отвлекать читателя), но для интереса мы добавим интерактивность и убедимся в том, что SWF все равно получается меньше исходного GIF-файла.

Создание ресурсов для анимации Проще всего импортировать все секции анимированного GIF-файла в виде серии изображений в формате PNG, потому что при этом сохраняется качество оригинала (особенно при использовании PNG-24), и к ним можно легко добавить альфа-канал. Хотя формат GIF поддерживает прозрачность, в действительности вся поддержка сводится к одной маске, определяющей, отображать или не отображать пиксел. Формат PNG-24 поддерживает полноценный альфа-канал, в котором уровень прозрачности задается в процентах. На рис. 1.18 показаны изображения PNG (в Photoshop), готовые к экспортированию в Flash. В процессе преобразования применяется ряд интересных трюков: Х Х Изображение обрезается таким образом, чтобы анимируемая часть (то есть глаза) была отделена от всего остального. Хотя исходная анимация состоит из шести кадров, три из них повторяются (последовательность закрытия глаз представляет собой последовательность их открытия, переставленную в обратном направлении). В результате существенно уменьшается количество уникальных кадров, которые придется создавать в Flash, что также приводит к сокращению размера файла. В формате PNG-24 можно экспортировать полноценные альфа-данные, что позволит организовать размывку краев изображения. Например, если мы захотим разместить зверушку на фоне джунглей, чтобы она чувствовала себя как дома, контурные пикселы можно будет слить с фоном и избавиться от неровностей и ореолов, часто встречающихся при использовании стандартных изображений GIF.

Х Чтобы добавить прозрачность к импортированному изображению, выполните следующие действия: 1. Скопируйте слой Background на вкладке Layers. 2. Удалите исходный слой Background. В изображении остается один слой с именем Background Layer Copy.

Создание SWF на базе анимированного формата GIF 3. Применение инструмента Eraser к этому слою создает альфа-канал (после удаления слоя Background при стирании пикселов не остается фона, который просматривался бы сквозь стертые участки, поэтому Photoshop заменяет их альфа-данными).

Рис. 1.18. Анимированный GIF-файл, преобразованный в серию PNG-файлов После импортирования изображений PNG в Flash (команда File Х Import) зверушка воссоздается обычным способом, начиная с нижнего слоя: сначала глазные яблоки, потом зрачки, веки и тело, как показано на рис. 1.19.

Рис. 1.19. Глазные яблоки, зрачки, веки и тело Глава 1. Визуальные эффекты Обратите внимание: глазные яблоки в этой версии сделаны векторными. Последовательность мигания реализована как анимационный клип из трех растров с постепенным закрытием глаз, после чего те же три растра воспроизводятся в обратной последовательности. Зрачки представляют собой две точки с именами leftEyejnc и rightEyejnc. Под управлением следующего сценария они будут внимательно следовать за указателем мыши, как показано на рис. 1.20. Как обычно, приведенный код связывается с первым кадром слоя actions главной временной диаграммы.

Рис. 1.20. Отслеживание указателя мыши followMouse = function О { this.startX = this._x;

this.startY = this._y;

this.onEnterFrame = animateEye;

animateEye = function () { var distX = (_xmouse - t h i s. j O / 50;

var distY = (_ymouse - this._y) / 50;

i f (Math.abs(distX) < 5) { this._x = this.startX+distX;

} i f (Math.abs(distY) < 5) { this._y = t h i s, startY+distY;

leftEyejnc.onEnterFrame = followMouse;

rightEyejnc.onEnterFrame = followMouse;

Функция followMouseO назначается обработчиком события onEnterFrame для обоих зрачков. При вызове она просто сохраняет начальную позицию зрачка и назначает обработчиком onEnterFrame функцию animateEyeO для последующих кадров. Конечно, вы можете наделить свою зверушку гораздо большим спектром эмоций, чем предусмотрено в анимированном GIF-файле (рис. 1.21), но это будет уже не трюк, а проявление истинной сущности Flash.

Итоги Хотя анимация получилась довольно стандартной, сама скорость ее создания на базе существующего анимированного GIF-файла показывает, как легко созда Анимация PSD-файлов Photoshop в Flash ются более универсальные анимации Flash. Размещение растровых изображений с альфа-каналами друг над другом позволяет создавать многослойные анимации непосредственно на базе анимированных GIF-файлов. Этот трюк также демонстрирует удобный способ экспортирования многослойных файлов Photoshop формата PSD в Flash;

просто экспортируйте каждый слой в виде отдельного изображения в формате PNG-24, включающем данные прозрачности. Далее импортированная графика PNG воссоздается в нужном порядке на слоях Flash. Конечно, между исходной последовательностью и результатом имеется важное различие - полученные слои можно анимировать!

Рис. 1.21. Грустный долгопят и его собутыльник Анимация P Dф й о Photoshop S - алв №5 в Flash ТРЮК Импортирование PSD-файлов Photoshop в Flash для последующей анимации. В этом трюке будет показано, как воссоздать файл Photoshop на слоях Flash. Процесс рассматривается во всех подробностях, потому что они весьма поучительны (и к тому же бесплатны!), хотя модуль Photoshop PSD2FLA ( www.medialab.com/psd2fla) от сторонней фирмы Media Lab существенно упрощает этот процесс. Вероятно, читатели, работающие с Director, помнят Media Lab как разработчика PhotoCaster, популярной и почитаемой надстройки для импортирования PSD-файлов в Director. Если в системе установлен QuickTime версии 4.0 и выше, PSD-файл можно импортировать прямо в Flash. Скорее всего, Flash сообщит, что файл импортировать не удается, но предложит импортировать его через QuickTime. Щелкните на кнопке Yes, и изображение будет успешно импортировано.

ПРИМЕЧАНИЕ В процессе импортирования Flash описывает файлы.psd как графику Photoshop версий 2.5, 3, однако при импортировании через QuickTime Flash обрабатывает файлы гораздо более поздних версий Photoshop.

Но при импортировании файлов через QuickTime возникает проблема: импортированные файлы сплющиваются и в них теряется разбиение на слои, как показано на рис. 1.22. Если учесть, что единственной разумной причиной для Глава 1. Визуальные эффекты импортирования PSD (вместо веб-форматов вроде JPEG) является использование внутренней информации слоев, становится очевидно, что способ импортирования через QuickTime отнюдь не идеален.

Рис. 1.22. Многослойное изображение Photoshop Данный трюк научит вас импортировать PSD-файлы таким образом, чтобы их можно было эффективно воссоздать в Flash для создания анимаций с сохранением значительной части исходных данных слоев. Работа начинается с Photoshop: обрежьте/масштабируйте PSD-файл так, чтобы полученное изображение подходило для использования в Web (то есть его размеры не превышали 500 х 500 пикселов). Результат значительно улучшается при пошаговом масштабировании графики. Например, изображение 1000 х 1000 сначала уменьшается до 900 х 900, затем до 800 х 800 и т. д. вплоть до 500 х 500;

итоговое изображение получается более качественным и оставляет больше свободы выбора для последующего сжатия. Существует и другая причина для уменьшения изображения: технология Flash плохо приспособлена для тех операций с растрами, которые мы собираемся выполнять - она лучше подходит для векторной графики. Чтобы обойти это ограничение, необходимо позаботиться о том, чтобы Flash не приходилось изменять слишком много информации на экране за один кадр. Уменьшение размеров растра до разумных пределов поможет решить эту задачу. Следующий шаг - уменьшение количества слоев до минимума за счет объединения (консолидации) как можно большего их числа. Чтобы получить нормальное быстродействие в Flash, необходимо оставить не более пяти-шести слоев. Также рассмотрите возможность удаления всех текстовых и других слоев, которые можно воссоздать средствами Flash.

Анимация PSD-файлов Photoshop в Flash В своем примере я решил убрать весь текст, кроме названия (наверху слева). Удаляемый текст заменяется более четким векторным текстом при последующей обработке изображения в Flash. Название было сохранено в исходном виде, поскольку к нему были применены эффекты Photoshop, которые трудно воспроизвести средствами векторной графики. На рис. 1.23 изображена упрощенная версия графики после удаления текста.

Рис. 1.23. Графика Photoshop после исключения слоев, которые могут быть построены средствами Flash На следующем шаге каждый слой экспортируется в отдельный файл PNG. Выполните для каждого слоя в документе Photoshop следующие действия: 1) скройте все слои, кроме экспортируемого;

2) выполните команду File Х Save As и сохраните изображение в формате PNG;

3) после экспортирования всех слоев перезагрузите все файлы PNG, окруженные значительными пустыми участками (как, например, изображение листа на рис. 1.24), и обрежьте их, удалив лишние пикселы с нулевым альфа-каналом, как показано на рис. 1.25. Вернитесь к исходному файлу PSD и оставьте окно Photoshop открытым (или сделайте экранную копию изображения, если в системе не хватает памяти для одновременного открытия Flash и Photoshop). Позднее мы еще вернемся к нему. В Flash задайте размеры сцены по размерам PSD. Импортируйте все PNG-файлы в библиотеку командой File Х Import Х Import to Library (Flash MX 2004) или File Х Import to Library (Flash MX). Чтобы организовать эффективную анимацию растровых изображений, лучше всего преобразовать (а точнее, линкапсулировать) каждый растр в анимационный клип - после этого с растрами можно будет использовать методы и анимационные переходы, поддерживаемые для анимационных клипов.

Х ' 'ХХХ- V Х Глава 1. Визуальные эффекты....

<Ч Ч Х: :li :. Х ';

г >ХХ U4I !>< Рис. 1.24. Слой, являющийся кандидатом на усечение вит Яе-ч ДИИИИвЯииВВ Рис. 1.25. Усеченное изображение заметно уменьшилось в размерах 1. Последовательно перетащите каждое растровое изображение из библиотеки на сцену.

Анимация PSD-файлов Photoshop в Flash 2. Выделите растр. 3. Нажмите клавишу F8 и создайте на базе растра символ анимационного клипа. Для предотвращения путаницы рекомендуется присвоить клипам те же имена, что и у растров, но снабдить их суффиксом _тс. Когда все будет готово, вы получите набор растров с прозрачными фонами и сможете разместить их на сцене Flash по аналогии с тем, как они размещались в оригинале PSD. На рис. 1.26 представлена библиотека Flash с набором импортированных растров.

' b as tp m i И background Щ сопсербопТШе Щ Breenleaf Щ overAfcha 1 1 spine Foider Bitmap Bitmap Bitmap Bitmap Bitmap Movie dip Movie dip Movie Qip Movie dip Movie Clip mbcG ud cak r n o m c n e trJl c o c pi Tt ai e mgenef c reLa m. v r Ah e oe pa l m. sn e pe i 'ХХ Х >, :

Рис. 1.26. Импортирование растровых изображений в библиотеку Flash Вручную разместите клипы на временной диаграмме (или на другом клипе в зависимости от того, как будет организован вывод) в тех же порядке и позиции, в которых они следовали в исходном PSD-файле. Если потребуется, имитируйте эффекты слоев Photoshop (такие как Darken, Multiply и т. д.) при помощи цветовых эффектов Flash. Естественно, при желании можно внести изменения, чтобы веб-версия Flash (рис. 1.27) отличалась от печатной версии Photoshop. Процесс композиции завершается оптимизацией растровых изображений;

для этого щелкните на каждом растре в библиотеке правой кнопкой мыши (Windows) или с нажатой клавишей зИ (Мае) и задайте для него параметры экспортирования. Обычно наилучший компромисс между размерами и качеством достигается при следующих параметрах: Х фото (JPEG);

Х без сглаживания;

Х качество в интервале от 30 до 50%.

Глава 1. Визуальные эффекты * is'-;

ХХ:':а. ч : \<ц, ХХ х v - > :

Рис. 1.27. Воссоздание композиции Photoshop в Flash При выборе качества следует помнить, что растры образуют многослойную композицию, поэтому большая часть шума, обусловленного высоким коэффициентом сжатия, будет скрыта слоями и полупрозрачным наложением. Чтобы определить минимальный порог снижения качества, следует оценить общее восприятие композиции. Возможно, для некоторых нижних слоев окажутся приемлемыми коэффициенты сжатия 20% и менее.

ПРИМЕЧАНИЕ Flash позволяет экспортировать растровое изображение с альфа-каналом одновременно с применением сжатия JPEG!

Итак, у нас имеется отправная точка для построения анимации. Теперь с каждым элементом композиции можно выполнить следующие действия: Х анимацию с использованием кадрирования (задайте на панели свойств параметру Tween значение Motion);

Х присвоение имени экземпляра и динамическую анимацию средствами Action Script. Далее в композицию добавляются отсутствующий текст и векторные элементы, удаленные из оригинала (или в Flash-версии создаются новые векторные элементы). Как упоминалось ранее, анимация растровых изображений может привести к заметному торможению работы Flash. Впрочем, практический опыт показывает, Генератор деревьев что для получения нормального результата нужно либо ограничиться анимацией одного слоя в любой момент времени, либо свести до разумных пределов количество изменений между двумя кадрами.

Итоги Если создаваемая анимация не дает особой нагрузки на процессор и не занимает много места на экране, попробуйте использовать механизм преобразования PSD-PNG-Flash, описанный в данном разделе (если исходные условия не выполняются, вероятно, стоит подумать о переходе на Director). У описанного пути также есть свои преимущества, если вы собираетесь имитировать сайт по визуализациям Photoshop или печатным материалам. В этом случае также стоит подумать об использовании Photo Webber ( от создателей PSD2FLA. Практический опыт применения данной методики также показывает, что размер итогового файла SWF может быть на удивление небольшим по сравнению с размером исходного файла PSD. Обычно размер анимированной SWF-версии более или менее соответствует размеру статического JPEG-файла с качеством от среднего до высокого.

ТРЮК № Генератор деревьев Создание случайного генератора деревьев.

Данный трюк посвящен рисованию деревьев естественного вида с применением стандартных средств (рекурсия/многократное применение алгоритма с масштабированием). В следующем трюке будет показано, как создать движение с использованием внутренней иерархии анимационных клипов. Теперь перевожу на простой человеческий язык: мы собираемся нарисовать дерево и заставить его качаться на ветру (см. трюк 7). Для этого мы смоделируем природные явления на программном уровне. Когда я впервые посетил Flash Forward ( Джош Дэвис (Josh Davis) говорил о мотивации своей работы. Если свести его 45-минутную речь к одной фразе, он сказал: Взгляните на природу, на то, что находится у вас прямо перед глазами, - а затем подумайте, что с этим можно сделать во Flash. Всемирная паутина полна подобных экспериментов. Ни одна книга трюков не будет полной без одного-двух примеров такого рода.

Рекурсивное построение дерева Чтобы получить следующую информацию о деревьях, я обратился к своей подруге Карен. У нас существует четкое разделение труда: она занимается садом, а я Ч компьютерами. И вот что мне удалось узнать, не выходя за порог дома. Деревья растут по очень простому принципу, который обычно неукоснительно соблюдается. Ветка растет Глава 1. Визуальные эффекты прямой до определенной длины, после чего сама разветвляется. Как правило, толщина родительской ветки связана с толщиной веток, растущих из нее, отношением, сохраняющим значение площади поперечного среза (общая толщина ствола примерно равно толщине всех ветвей, растущих из него, или пропорциональна ей). А это означает, что отросток растет и делится точно по тем же правилам, что и основная ветвь: их относительные размеры остаются одинаковыми. Мы знаем о сохранении подобия между деревом и веткой, потому что, если посадить в землю ветку (а точнее, если ее посадит Карен - мои ветки почему-то всегда погибают), из нее вырастет дерево. Учитывая все сказанное, я разработал случайный генератор деревьев. Два примера сгенерированных деревьев изображены на рис. 1.28.

Рис. 1.28. По-моему, дерево получилось вполне правдоподобным Генератор деревьев Оба дерева (а также множество других) были сгенерированы одной функцией. Далее приведен код файла treeGen.fla, который можно загрузить с веб-сайта книги. function counter О { i f (branchCounter == undefined) { branchCounter = 0 ;

} return (branchCounter++);

function growO { // Вырастить ветвь... this.lineStyle(trunkThickness, 0x0. 100);

this.moveTo(0, 0);

this ineTo(0. trunkLength);

// Если это не ствол, изменить угол и размер ветви i f (this._name != "trunk") { this._rotation = (Math.random()*angle) - angle/2;

this._xscale *='branchSize: this._yscale *= branchSize;

}. // С е е и о а ь р с к.. гнррвт оти. v r s e = Math.ceil(Math.random()*branch);

a ed f r ( a i = 0 i < s e ;

i++) { o vr ;

ed if (counterO < 3000) { v r s g e t = t i. r a e m t M v e l p " e m n " + i i) a emn hscetEpyoiCi(sget. s g e t o E t r r m = grow;

emn.nneFae sget+ =tukegh } emn.y rnLnt;

} d l t (this.onEnterFrame);

eee // О р д л т п з ц ю с в л и н з а и ь о р б т и о пееиь оии тоа анчт баочкм // с б т я o E t r r m ф н ц ю growO оыи nneFae уки t i. r a e m t M v e l p " r n " 0);

hscetEpyoiCi(tuk. t u k _ = 200;

rn.x t u k _ = 400: rn.y trunk.onEnterFrame = grow;

// Параметры дерева var angle = 100;

var branch = 5;

var trunkThickness = 8;

var trunkLength = -100;

var branchSize =0.7;

Базовая форма дерева определяется параметрами, значения которых задаются в завершающих строках листинга: Х angle - максимальный угол ветви по отношению к родителю;

Х branch - максимальное количество ростков (дочерних ветвей) для любой ветви;

58 Х trunkThickness - толщина ствола дерева;

Х trunkLength - длина ствола дерева;

Глава 1. Визуальные эффекты Х branchSize - отношение размеров дочерней и родительской ветвей (ветви уменьшаются по мере удаления от ствола). Сначала мы создаем ствол и задаем его позицию, после чего назначаем функцию grow() обработчиком события onEnterFrame. Как подсказывает само название, функция grow() выращивает пустое дерево в нашем клипе, для чего она выполняет две операции. Сначала функция создает исходную ветвь, рисуя вертикальную линию высотой trunkLength и толщиной trunkThickness. Если в настоящее время рисуется ствол, он оставляется в первоначальном виде (фаза 1). Если же рисуется ветвь, она поворачивается на угол +/- angle (фаза 2) и масштабируется с коэффициентом branchSize (фаза 3);

все эти фазы показаны на рис. 1.29.

trunkThickness angle Масштабирование с коэффициентом branchSize trunkLength Рис. 1.29. Фазы построения ветви Затем функция создает от 1 до branch новых ростков. Весь фокус в том, что ростки получают тот же обработчик onEnterFrame, что и текущий, а именно grow(), поэтому в следующем кадре они отращивают собственные ростки и т. д. Здесь используется фрагмент кода, который создает новый анимационный клип для каждого ростка и назначает ему обработчик события onEnterFrame. Дерево могло бы создавать новые ростки до бесконечности, но процесс необходимо как-то ограничить, иначе Flash будет работать все медленнее и в итоге просто зависнет. Чтобы предотвратить эту ситуацию, функция counterQ ограничивает общее количество ветвей пороговым значением 3000: var seed = Math.cei1(Math.randomC)*branch);

for (var i = 0;

i < seed: i++) { i f (counterO < 3000) { var segment = this.createEmptyMovieClip("segment" + i. i ) ;

segment.onEnterFrame = grow: segment.+y = trunkLength: } } В завершение grow() удаляет себя, поскольку она должна выполняться только один раз для каждой ветви.

Имитация движения дерева Итак, мы используем функцию, которая вызывает сама себя (а точнее, создает копии ветвей, с которыми связана та же функция) для построения рекурсивного дерева. В итоге иерархия построенного дерева, состоящего из ветвей и субветвей, отражается на временных диаграммах клипов. В этом нетрудно убедиться при помощи отладчика (возможно, максимальное количество ветвей стоит выбрать меньшим 3000 - в противном случае ждать придется довольно долго!). Результат своей строгой простотой напоминает восточные гравюры. Тем не менее, в нем не задействована анимация, а генераторы статических деревьев на Java встречаются на каждом углу. По этой причине в следующем трюке мы слегка оживим свое дерево.

ТРЮК № Имитация движения дерева Применение кинематики на базе анимационных клипов.

В предыдущем трюке было показано, как сгенерировать случайное дерево. Настало время немного оживить статическую картинку. При движении дерева под ветром используется та же иерархия, которая была использована при его построении. Лично мне понадобилось некоторое время, чтобы осознать этот факт, но зато потом все становится совершенно очевидно: Х Х при перемещении ствола перемещается все дерево;

при перемещении ветви перемещаются все ее дочерние ветви.

Но чтобы сообразить, на какую величину должна перемещаться каждая часть дерева, придется немного подумать. Сначала я решил, что ствол движется гораздо меньше ветвей кроны, но это не так. Чтобы убедиться в этом, воткните в землю ветку (обрезанную в точке ветвления) во время ветра. Вы увидите, что по величине смещения она практически не отличается от ствола дерева. Ветка обладает большей гибкостью, но площадь ее поверхности (если у нее нет листьев) меньше, чем у ствола, поэтому давление ветра тоже пропорционально уменьшается. Ветвь кроны дерева перемещается сильнее, чем ствол, просто потому, что все ветви в нижележащей иерархии тоже движутся и величина их перемещений суммируется при перемещении всего дерева. Вот так! Каждый день узнаешь что-то новое. Сделанный вывод позволяет легко реализовать эффект ветра - просто нужно обработать каждую ветвь по тем же правилам, что и ствол с другими ветвями. Вместо удаления каждого обработчика onEnterFrame, как это было сделано в исходном коде построения дерева (см. трюк 6), мы изменим соответствующую строку grow(): delete (this.onEnterFrame);

и заменим ее назначением функции sway() после выращивания ветви: this.onEnterFrame = sway;

Глава 1. Визуальные эффекты Чтобы имитировать эффект ветра, достаточно создать функцию sway(), которая в каждом из кадров будет прибавлять к текущей ветви дополнительное смещение: function sway О { this._rotation += wind;

} Величина смещения должна изменяться;

один из способов добиться желаемого эффекта выглядит так: function sway О { wind += windEffect: i f (wind > windStrength) { wind = -wind;

} this._rotation += wind: } Разумеется, мы должны задать начальные параметры ветра. Для нашего примера я подобрал следующий набор параметров (новые значения выделены жирным шрифтом): // Параметры дерева var angle = 100: var branch = 5: Д var trunkThickness = 8;

var trunkLength = -100;

var branchSize = 0.7;

// Параметры ветра var windEffect = 0.05;

var windStrength = 1;

var wind = 0;

Также можно создать бегунки для ручной регулировки параметров в интерактивном режиме (см. трюк 61). На рис. 1.30 показано дерево, склонившееся на ветру. Загрузите файл treeO2.fla с сайта книги, чтобы увидеть анимированную графическую версию во всей красе.

Итоги Хотя в представленном решении задействована пара неочевидных моментов, под трюком здесь следует понимать скорее общий подход. Копирование живой природы или других объектов, оказавшихся под рукой, Ч испытанный путь поиска новых идей и решений для Flash-дизайна. Flash является средой графического программирования;

именно это обстоятельство делает возможным такие эксперименты, как в нашем решении. Вы можете написать программу и немедленно получить графическую обратную связь. Если Имитация движения дерева потребуется создать несколько деревьев, поэкспериментируйте и посмотрите, приведет ли применение общего набора параметров ветра к более реалистичному эффекту. Мне кажется, что небольшие различия между деревьями обеспечивают больший реализм, особенно если в направлении ветра уже находятся другие деревья.

ив в ХХ : Х k 1 I Рис. 1.30. Дерево на ветру И все же моя личная муза - не природа, а видеоигры. Подозреваю, что все проблемы, с которыми сталкиваются дизайнеры, уже давно встречались разработчикам видеоигр и были успешно решены ими... но это, как говорится, совсем другая история.

ГЛАВА Цветовые эффекты Трюки № 8- Как правило, Flash-дизайнеры при создании анимации уделяют основное внимание движению и масштабированию, однако цвет также может быть объектом анимации для создания различных эффектов и переходов. Для дизайнера анимация цвета интересна прежде всего тем, что она позволяет с минимальными усилиями (и практически без увеличения файла) изменить внешний вид и атмосферу. Изменением цветовой схемы анимаций Flash реализуется широкий спектр эффектов - например, смена дня и ночи. Приданием изображению сепийных оттенков создается эффект ретро, а цветовая гамма лэлектрик может использоваться для имитации более современного стиля техно. Изменения цвета могут применяться ко всему, что инкапсулируется в анимационных клипах, включая растровые изображения, видеоклипы и векторную графику. В сущности, все, что отображается на сцене Flash, может стать объектом цветовой анимации, управляемой посредством кадрирования (то есть на временной диаграмме во время разработки) или ActionScript (на стадии выполнения). Это обстоятельство упрощает применение цветовых эффектов на стадии выполнения и позволяет сделать контент более привлекательным при минимальном увеличении объема передаваемых данных. Вы узнаете, как при помощи цветовых эффектов сделать растровое изображение более оригинальным, привести его к цветовой гамме сайта и даже реализовать некоторые возможности видео для статических растровых изображений. Также мы рассмотрим, как применение цветовых переходов к видео субъективно удлиняет короткий повторяющийся клип и делает его более интересным. Учитывая, что пересылка видеоданных обычно сильнее всего загружает каналы связи, вы также можете оптимизировать процесс загрузки видео за счет добавления сложных переходов на стадии выполнения (вместо их применения в исходном видеоматериале). Файлы SWF принадлежат к числу немногочисленных графических веб-ресурсов, у которых цвет обходится бесплатно - прибавление множества цветов к Flash-сайту не создает дополнительной нагрузки на канал связи. Впрочем, существует и оборотная сторона: при такой свободе выбора вам придется действовать более внимательно. По этой причине мы рассмотрим несколько новых способов управления цветом и быстрого создания палитр.

Применение цветовых эффектов к видео Наконец, любой обзор работы с цветом в Flash будет неполным без упоминания ActionScript. Сценарии существенно расширяют возможности цветовой анимации. Мы рассмотрим способы создания нестандартных цветовых эффектов на объектно-ориентированном коде ActionScript 2.O.

Применение цветовых эффектов №8 к видео ТРЮК Имитация видеоперехода с использованием цветовых эффектов Flash. В этом трюке класс Color используется для изменения видеоклипа и создания уникального цветового перехода. Методика не является очевидной, а видеопереходы обычно реализуются другими средствами, но суть трюков как раз и заключается в том, чтобы исследовать все неочевидное.

Как помочь плохому танцору Всегда можно с уверенностью сказать, когда снимающийся в видеоклипе танцор не умеет нормально двигаться. В таких случаях постановщик клипа часто перемещает камеру или добавляет множество видеопереходов и эффектов, синхронизированных с музыкой. В результате движение на экране обретает нужный ритм, даже если вся группа стоит на месте и кдвает головами в стиле 70-х годов. Аналогичная проблема возникает с клипами Flash: пересылка видеоданных интенсивно загружает канал связи, а для достижения максимального коэффициента сжатия приходится создавать последовательности с относительно малыми различиями между кадрами. Большинство кодеков, в том числе и кодек Sorenson, используемый во Flash, выполняет как пространственное, так и временное сжатие. Пространственное сжатие основано на поиске повторяющихся областей внутри кадра (например, однородные черные фоны сжимаются очень хорошо). Временное сжатие основано на анализе смежных кадров и сохранении дельты (информации об изменениях) между кадрами. По этой причине в видеоклипах лучше оставить как можно меньше масштабного движения, чтобы разностные кадры, связанные дельтами, занимали как можно меньший объем. (Можно провести другую, более привычную аналогию: разностные кадры напоминают ключевые кадры в анимации на временной диаграмме Flash. Как видите, принцип кадрирования действует не только в анимации, но и в видео.) Ключевые кадры видео используются для сохранения качества изображения и решения проблем в тех ситуациях, когда из-за слишком больших различий между кадрами кодирование дельт становится неэффективным. Получается, что мы не можем включить в видео слишком много движения без значительного увеличения объема загружаемых видеоданных. Решение проблемы, как и в истории с музыкальным клипом, заключается в добавлении внешнего движения или эффектов. Мы применяем эффекты на программном уровне на стадии выполнения (на стороне клиента), чтобы они не влияли на сжатие видео (то есть не увеличивали объем загружаемых данных) из-за появления больших различий между кадрами.

64 ПРИМЕЧАНИЕ Глава 2. Цветовые эффекты Чтобы уменьшить объем анимации, не утомляя зрителя, следует на программном уровне внести изменения, отсутствующие в исходном видеоматериале.

Например, применение видеоэффектов на стадии выполнения помогает скрыть тот факт, что видео прокручивается в циклическом режиме, - еще один популярный способ экономии ресурсов канала. Также можно передать видеоэффекты под контроль пользователя и добавить изменения за счет введения интерактивности вместо линейного воспроизведения видео.

Кодирование цветов Возможно, вам доводилось применять цветовые эффекты к видеоклипам при помощи диалогового окна Advanced Effect (рис. 2.1). А если не доводилось, рассмотрим несложный пример цветовой анимации: 1. нарисуйте черный круг на сцене в первом кадре и преобразуйте его в символ анимационного клипа (F8). 2. вставьте в кадре 10 ключевой кадр (выделите кадр 10 на главной временной диаграмме и выполните команду Insert Х Timeline Х Keyframe). 3. щелкните на ключевом кадре 1 и примените к экземпляру анимацию движения (задайте на панели свойств параметру Tween значение Motion). 4. щелкните на ключевом кадре 10. Активизируйте инструмент Selection и щелкните на сцене, чтобы снять выделение с кадра. Наконец, щелкните на экземпляре клипа на сцене, чтобы выделить его. 5. выберите в списке Color на панели свойств строку Advanced. 6. щелкните на кнопке Settings на панели свойств;

на экране появляется диалоговое окно Advanced Effect. Задайте параметру rb значение 200, как показано на рис. 2.1. Закройте диалоговое окно кнопкой ОК. Если медленно перемещать индикатор текущей позиции по первым 10 кадрам временной диаграммы, вы увидите, как цвет клипа медленно переходит от черного к красному то есть, фактически, происходит цветовой переход (если при кадрировании была допущена ошибка, клип останется черным до кадра 9, а затем внезапно станет красным на кадре 10). Все это, конечно, хорошо. Но как применить цветовой переход к видео на стадии выполнения? Класс Color позволяет применять аналогичные преобразования к любым анимационным клипам, в том числе и к содержащим видеоклипы. Метод Color.setTransform() получает один аргумент - объект преобразования со свойствами га, да, ba, aa, rb, gb, bb и ab. Объект преобразования (transObject) представляет собой экземпляр класса Object со свойствами, используемыми для выполнения цветовых преобразований. Восемь свойств объекта просто соответствуют значениям восьми полей диалогового окна Advanced Effect на рис. 2.1. Чтобы понять смысл свойств, поэкспериментируйте с изменением параметров в окне Advanced Effects.

Применение цветовых эффектов к видео Мо-леОр ::::-.::.::':.,.

ХЛ: 3~ 5 ),: 69.0 [yv 123.0 Advanced Effect C_iлy: И ancec vj у О М;

;

| 37. Га !;

Х Rei - ;

1004, vj xR} + Хrb ^SiiЧgb gaЧ^ufeer,-{ :ooл. v с>+ о Ьа I Х Bee- ( :>'';

У B)t Рис.

2. 1. Настройка цветовой трансформации в диалоговом окне Advanced Effect Ручное применение цветовых эффектов к растровому фотографическому изображению, внедренному в анимационный клип, поможет вам понять, что можно сделать с цветом и экземпляром видео. Для достижения наилучшего результата попробуйте поэкспериментировать с одним или несколькими статическими изображениями, скопированными из видеоклипа.

Цветовые видеопереходы В следующем трюке реализуется один характерный тип преобразований - мгновенные эффекты (например, когда нормальный цветной клип резко превращается в фотографический негатив, остается им в течение нескольких кадров, а затем возвращается к исходному состоянию). Эффект выглядит весьма впечатляюще, особенно если синхронизировать его со звуком (см. трюк 59). Методика может быть расширена для создания другой категории эффектов: наплывов и других постепенных преобразований (см. трюк 9). Начнем с мгновенных эффектов. На рис. 2.2 показано исходное изображение, а на рис. 2.3 и 2.4 - два возможных эффекта.

Рис.

2.2. Исходное изображение (нейтральное преобразование) Исходное изображение на рис. 2.2 использует нейтральное преобразование с параметрами {га:100. гЬ:О. да:100. gb:O. ba:100. bb:O. aa:100. ab:O} Глава 2. Цветовые эффекты Рис. 2.3. Инвертированное изображение Рис. 2.4. Контрастное изображение На рис. 2.3 представлено инвертированное изображение с преобразованием (га:-100. rb:255. да:-100. gb:255. Ьа:-100. bb:255. аа:100, ab:0} Однако негатив не исчерпывает всех возможных вариантов. Сценарные преобразования позволяют преодолеть ограничения, накладываемые диалоговым окном Advanced Effect. На рис. 2.4 изображено контрастное преобразование {га:500. rb:-500. ga:500. gb:-500. ba:500. bb:-500. аа : 100. ab:0} Также можно создавать и другие эффекты - например, эффект осветления, при котором изображение кажется передержанным. Осветление производится преобразованием вида {га:100. rb:150. да:100. gb:150. Ьа:100. bb:150. аа:100. ab:0} Следующее преобразование усиливает красные оттенки: {га:500. rb:-500. да:100. gb:0. ba:100. bb:0. aa:100. ab:0} Наконец, снижение яркости производится преобразованием {га:100. rb:-150. ga:100. gb:-150. Ьа: 100. bb:-150. аа:100. ab:0} Чтобы лучше понять суть упомянутых эффектов, запустите файл colortransforms.fla из архива примеров. Следующий фрагмент применяет мгновенную инверсию к содержимому анимационного клипа: function negativeF1ick(targetClip. duration) { Применение цветовых эффектов к видео thi s.neutralizer = function О { negColor.setTransform(neutral);

// Обновление экрана updateAfterEventO: // Сброс интервала clearlnterval(neglnterval);

}: // Определение преобразования, инвертирующего текущие цвета var negTrans = {га:-100. rb:255. да:-100. gb:255. Ьа:-100. bb:255. aa:100. ab:0}: //Определение нейтрального преобразования для отмены эффекта var neutral {ra:100. rb:0. да:100, gb:0. Ьа:100. bb:O. aa:100. ab:0}: // Выбор клипа и применение преобразования var negColor = new Color(targetCTip);

negColor.setTransform(negTrans);

// Назначение функции обратного вызова для отмены эффекта // по истечении заданного интервала var neglnterval = setlnterval(this.neutralizes duration);

} Следующая строка на одну секунду применяет эффект инверсии к клипу bitmapClip;

предполагается, что мы ранее создали этот клип, содержащий растровое изображение (проследите за тем, чтобы клипу было присвоено имя экземпляра bitmapClip на панели свойств): negativeFl ickCbitmapCl ip. 1000): Чтобы применить эффект к видео, следует вызвать negativeFlick() с именем соответствующего клипа. В следующем примере эффект применяется к клипу myVideojmc на две секунды (2000 мс). Как и в предыдущем случае, имя экземпляра для клипа (который, как предполагается, содержит видеоинформацию) назначается на панели свойств: negativeFl1ck(myVideo_mc. 2000): Как правило, сценарий с определением функции negativeFlick() и ее вызовом присоединяется к отдельному слою actions. Для вызова negativeFlickQ с временной диаграммы видеоклипа myVideojnc можно воспользоваться вызовом negativeFlickCthis. 2000): Функция negativeFlick() создает экземпляр Color и использует его для применения преобразования к целевому клипу. В последней строке negativeFlick() также задается интервал вызова neutralize^). Функция neutralize^) отменяет выполненное преобразование посредством применения нейтрального преобразования. Далее программа сбрасывает интервал таймера - если этого не сделать, вызовы будут периодически повторяться. Обратите внимание: функция setlntervalQ не связана напрямую с частотой смены кадров, поэтому функция обратного вызова (в данном случае neutralize^)) обычно выполняется перед другими событиями уровня кадров (такими, как onEnterFrame). При создании графических эффектов с применением setlnterval() вся выгода от использования внекадровых событий теряется, если нам придется Глава 2. Цветовые эффекты ждать следующего кадра, чтобы увидеть созданный анимационный эффект. По этой причине вызов updateAfterEvent() решает проблему, обновляя экран в конце функции обратного вызова. В этом трюке были представлены ключевые моменты применения цветовых преобразований к видеоклипам: Х Х Х использование объекта цветового преобразования для изменения цветовой гаммы видеоклипа;

использование интервалов и функций обратного вызова для внесения временных изменений;

использование нейтрального цветового преобразования для восстановления исходных цветов.

Представленная методика применима не только к видео, но и к любым анимационным клипам и даже к главной временной диаграмме. Более того, сброс цветовой схемы с применением нейтрального преобразования тоже не обязателен. Например, вы можете периодически примерять случайные цветовые преобразования, для этого функция обратного вызова должна сгенерировать случайные значения свойств объекта преобразования (вместо применения нейтрального преобразования).

Растворение видео на черном №9 и белом фоне ТРЮК Создание видеопереходов растворения на черном и белом фоне. Переходы могут применяться как к статическим изображениям, так и к видеоклипам. Например, для достижения мгновенного эффекта к видеоклипу можно применить цветовое преобразование (см. трюк 8). Настоящий раздел посвящен эффектам, протяженным во времени, - мы рассмотрим их на примере последовательного применения цветовых преобразований для реализации растворения.

Протяженные эффекты Для реализации протяженных переходов нам понадобится структура данных, позволяющая вносить поэтапные изменения в параметры цветового преобразования за несколько кадров. На практике часто встречаются эффекты растворения видео на черном и белом фоне. Итоговые объекты преобразований для таких эффектов выглядят так: transToBlack={ra:100. rb:-255. да:100. gb:-255. Ьа:100. bb:-255. aa:100. ab:0}: transToWhite={ra:100. rb:255. да:100. gb:255. ba:100. bb:255. aa:100. ab:0}: Обратите внимание: смещения у этих преобразований совпадают, отличается только знак (+255 или -255). В результате мы либо прибавляем к каждому пикселу значение RGB с компонентами (255, 255, 255) (растворение на белом фоне), Растворение видео на черном и белом фоне либо вычитаем его (растворение на черном фоне). Поскольку каждый из трех цветовых каналов принимает значения из интервала от 0 до 255 (от 0 х 00 до 0 х FF в шестнадцатеричной записи), пиксел принимает значение 255 (белый) или 0 (черный) независимо от его исходного цвета. Следующий фрагмент кода позволяет растянуть изменение цвета на заданное количество кадров, чтобы растворение происходило постепенно: function transCtargetClip. frames, targetTrans) { var transCol = new Color(targetClip);

// Получение текущего преобразования, примененного к клипу var getTrans = transCol.getTransformO;

var diffTrans = new ObjectO;

// Вычисление разности для каждого из 8 свойств // и ее сохранение в цветовом объекте diffTrans for (var i in targetTrans) { d i f f T r a n s [ i ] = (targetTrans[i]-getTrans[i])/frames: Х } targetClip.onEnterFrame=function() { var getTrans = transCol.getTransformO;

for (var i in diffTrans) { getTrans[i] += d i f f T r a n s [ i ] ;

} transCol.setTransform(getTrans);

frames--;

i f (frames == 0) { // Явно задать итоговое преобразование н случай, е л а си // целевые ч с а н к а н ч с у кадров, з т м ил е рты ил ае // выполнить зачистку. transCol.setTransform(targetTrans);

delete this.onEnterFrame;

delete transCol;

Для анимации цветового перехода необходимо знать три параметра: целевой клип (в который встроен видеоматериал), продолжительность перехода в кадрах и тип перехода (растворение на черном или белом фоне, а точнее - соответствующий объект цветового преобразования). Вся необходимая информация передается в аргументах функции trans(): targetClip, frames и targetTrans. Например, следующий вызов определяет эффект растворения на белом фоне для видео в клипе myVideojnc на протяжении 24 кадров: transToWhite = {га:100. rb:255. да:100. gb:255, Ьа:100. bb:255. aa:100. ab:0};

transdnyVideojnc. 24. transToWhite): Функция trans() решает три задачи. Сначала она получает текущий объект цветового преобразования, примененный к целевому клипу, при помощи функции Color.getTransformO и сохраняет его в переменной getTrans. Затем она создает объект diffTrans, свойства которого определяют величину приращения getTrans на каждом кадре для получения итогового Глава 2. Цветовые эффекты преобразования targetTrans за заданное количество кадров. Если в среде разработки не применялись другие преобразования, переменная getTrans всегда равна {га:100. rb:0. да:100. gb:0. Ьа:100. ЬЬ:0. аа:100. ab:0} Почему? При отсутствии преобразований getTrans определяет объект нейтрального преобразования - тот самый, параметры которого отображаются на панели Advanced Effects (рис. 2.1) при отсутствии определенных преобразований. Переменная targetTrans содержит целевое преобразование, заданное при вызове функции transQ. Для эффекта растворения на белом фоне она выглядит так: {га:100. rb:255. да:100. gb:255. Ьа:100. bb:255. aa:100. ab:0} Вычитание targetTrans из getTrans и деление результата на количество кадров дает приращение, применяемое к клипу на каждой итерации. Мы сохраняем его в объекте diffTrans: diffTrans[i] = (targetTrans[i]-getTrans[i])/frames;

В нашем примере с 24-кадровым переходом будет получен следующий объект diffTrans: {га:0. гЬ:10.625. да:0. дЬ:10.625. Ьа:0. bb:10.625, aa:0. ab:0} Напоследок функция trans() должна настроить обработчик onEnterFrame, чтобы обеспечить анимацию цветового перехода от getTrans до targetTrans с течением времени. Для этого мы определяем функцию и присваиваем ее свойству on Enter Frame, как показано в предыдущем фрагменте. Честно говоря, определять продолжительность перехода в кадрах не очень логично. При воспроизведении видеоматериалов обычно используются временные единицы измерения, поэтому многошаговое цветовое преобразование лучше применять по отношению к интервалам заданной продолжительности (определенным функцией setlnterval). Таким образом, методика покадрового изменения больше подходит для применения цветовых переходов к анимационным клипам, не содержащим видеоинформации. Однако методика повременного изменения уже была продемонстрирована ранее (см. трюк 8), поэтому давайте внимательнее присмотримся к покадровой методике. Обработчик onEnterFrame, определенный внутри trans(), на каждом кадре прибавляет приращение diffTrans к текущему объекту преобразования вплоть до завершения эффекта: for (var i in diffTrans) { getTrans[i] += diffTrans[i];

}transCol.setTransform(getTrans);

Нельзя исключать того, что в конце перехода преобразование не достигнет конечного состояния из-за ошибок округления, поэтому для надежности нужно задать его явно. После этого остается лишь выполнить необходимую зачистку (деинициализацию).

Растворение видео на черном и белом фоне frames--;

if (frames == 0) { } / Я н здт иооо пебаоаи н с у а, ел / в о ааь тгве рорзвне а л ч й си / ц л в ечса н кан чсу к д о, зтм / е е ы ил е рты ил а р в ае / вплиь зчск. / ыонт аиту transCol.setTransform(targetTrans);

delete this.onEnterFrame;

delete transCol;

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

Итоги Два последних трюка интересны прежде всего тем, что они могут применяться к любому анимационному клипу, а не только к клипам, содержащим видеоматериалы. Например, применение их к _root позволяет применять преобразования ко всему SWF-файлу во время выполнения (хотя в некоторых ситуациях такой вариант непрактичен из-за чрезмерной загрузки процессора). Помимо создания впечатляющих эффектов, цветовые переходы также находят практическое применение: инвертирование цвета всего содержимого сцены на 100 мс может стать сигналом о неправильной реакции пользователя (при включении так называемых специальных возможностей система Windows при выдаче сообщения об ошибке ненадолго изменяет цвет экрана, потому что пользователи с дефектами слуха могут не расслышать звуковой сигнал). Добавление видеоподобных цветовых переходов к статической графике (скажем, к растровым изображениям) обладает другим большим преимуществом: вы можете лобмануть пользователя и заставить его думать, что он смотрит видео, - особенно если действовать хитро и разбавить последовательность реальными видеофрагментами. Эта методика способна творить настоящие чудеса, особенно для маскировки предварительной загрузки видео! Вероятно, самые наблюдательные читатели заметили, что во всех представленных примерах данные альфа-канала оставались неизменными. Чтобы отрегулировать альфа-канал, просто задайте объект преобразования, у которого свойства га, да, Ьа или аа не равны 100. Изменение альфа-канала позволяет реализовать такие профессиональные эффекты, как перекрестное растворение, то есть плавный переход от одного видеоклипа к другому (а еще лучше - переход видеоклипа в векторную графику Flash). Альфа-переходы интенсивно расходуют ресурсы процессора, но, к счастью, Flash Player 7 обладает гораздо более производительным механизмом воспроизведения видео, поэтому и эта проблема перестала быть такой серьезной. Аналогичные принципы справедливы для звуковых преобразований. Объект звукового преобразования, представленный классом Sound, позволяет создавать сценарные эффекты изменения громкости и баланса (трюк 60).

72 ТРЮК Глава 2. Цветовые эффекты Пользовательский класс цветового №10 преобразования Создание пользовательского класса для выполнения цветовых преобразований. Как было показано в двух последних трюках, существует целый ряд стандартных цветовых преобразований (см. трюк 8), которые часто применяются к целевым клипам. Более того, вы уже знаете, что это требует определенных вспомогательных действий, включая настройку таймеров и функций обратного вызова (см. трюк 9). Специфика задачи наводит на мысль о том, что она хорошо подходит для оформления в виде пользовательского класса. Класс позаботится обо всех служебных операциях и позволит выполнить цветовое преобразование простым вызовом нескольких методов. В этом трюке пользовательский класс цветового преобразования будет реализован на ActionScript 2.0 средствами объектноориентированного программирования (ООП) вместо процедурного кода временной диаграммы, использовавшегося в предыдущих трюках.

Объектно-ориентированное преобразование ActionScript 2.0 работает только в Flash MX 2004 или Flash MX Professional 2004. Кроме того, необходимо выбрать ActionScript 2.0 на вкладке Flash диалогового окна File Х Publish Settings. Более того, разработанный нами класс Transform должен храниться во внешнем текстовом файле Transform.as (и регистр символов имени, и расширение.as являются обязательными). В Flash MX Professional 2004 для создания и редактирования таких файлов можно использовать команду File Х New Х ActionScript File. B Flash MX 2004 вам потребуется внешний текстовый редактор (см. трюк 74). Файл.as должен находиться в одной папке с файлом.fla, использующим класс Transform. Хотя я не смогу привести полный курс ООП и ActionScript 2.0, для использования класса цветового преобразования не обязательно разбираться в тонкостях ООП. Некоторые ключевые аспекты кода рассматриваются после листинга. Далее приводится объектно-ориентированная версия, реализованная в виде пользовательского класса Transform;

этот класс должен храниться во внешнем файле Transform.as. // Этот код ActionScript 2.0 должен храниться во внешнем файле Transform.as>

private s t a t i c var NEUTRAL_TRANS:Object = {ra:100. rb:O. ga:100. gb:O. ba:100. bb:O. aa:100. ab:O};

Пользовательский класс цветового преобразования private static var BLACK_TRANS:Object = {га:100. rb:-255. ga:100. gb:-255. ba:100. bb:-255. aa:100. ab:0};

private static var WHITEJRANS: Object = {га: 100. rb:255. ga:100. gb:255. ba:100. bb:255. aa:100. ab:0}: private static var RATE:Number = 50;

private var interval:Number;

private var startTime:Number;

private var colorObj:Color;

// Конструктор получает целевой клип, к которому // применяется преобразование. public function Transform(targetClip:MovieClip) { colorObj = new Color(targetClip);

} // Инвертирование цветовых значений public function invert(duration:Number):Void { applyTransform(NEG_TRANS, duration);

} / Восстановление стандартных цветовых значений, / / заданных в среде разработки, / public function reset(duration:Number):Void { applyTransform(NEUTRAL_TRANS. duration);

} // Реализация эффекта растворения н черном фоне а / в течение заданного интервала в миллисекундах / public function fadeToBlack(duration:Number):Void { applyTransform(BLACK_TRANS. duration): } / Реализация эффекта растворения н б л м фоне / а ео / в течение заданного интервала в миллисекундах / public function fadeToWhiteCduration:Number):Void { applyTransform(WHITE_TRANS. duration);

// Функция инициирует эффект растворения и задает его продолжительность, private function applyTransform(transObject:Object, duration:Number):Void { var getTrans:Object = colorObj.getTransform( );

var diffTrans:Object = new Object( );

startTime = getTimer( );

for (var i in transObject) { diffTrans[i] = (transObject[i] - getTrans[i]) / (duration / RATE);

} // Используется форма setlntervaK). которая вызывает метод объекта. // поэтому свойства экземпляра доступны (обращение через объект this) / Первый параметр - объект (this), д я которого вызывается метод. / л // заданный в о ы параметром ( д н о случае "transition") трм в анм // и передаваемый в строковом виде. // Третий параметр - интервал в миллисекундах. // Четвертый, пятый и шестой параметры передаются transitionO.

Глава 2. Цветовые эффекты interval = set Interval(this, "transition". RATE. transObject. diffTrans. duration);

// Метод применяет каждый шаг цветового преобразования. private function transition(transObject:Object. diffTrans:Object. duration:Number):Void { var getTrans:Object = colorObj.getTransforrrK );

for (var i in diffTrans) { getTrans[i] += di ffTransCi 3: } col orObj.setTransform(getTrans);

i f (getTimer( ) - startTime > duration) { // Завершение последнего шага перехода colorObj.setTransform(transObject): // Сброс интервала (остановка эффекта) clearlnterval(interval): } / П и у и е ь о о н в е и э р н м ж ук д а и / р н д т л н е болне каа ед арм u d t A t r v n ( );

Pages:     | 1 | 2 | 3 | 4 | 5 |   ...   | 8 |    Книги, научные публикации