Интерактивная Web-анимация во Flash

Интерактивная Web-анимация во FLASH

Кетрин Ульрих

ADOBE
FLASH
PROFESSIONAL

Katherine Ulrich

Москва, 2010

Кетрин Ульрих

интЕрактивная
webанимация
во FLASH

УДК
004.4'273
ББК
32.973.26-018.2
Э45

Ульрих К.

Интерактивная Web-анимация во Flash  / Ульрих Кетрин ; Пер. с англ. Слинкина А. –
М. : ДМК Пресс, 2010. – 568 с.: ил.

ISBN 978-5-94074-541-9

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

 Данное руководство посвящено работе с новейшей версией Adobe Flash CS3
Professional, в которорой добавились новые графические инструменты, специализированные средства импорта графики, созданной в Adobe Photoshop и Adobe Illustrator, инструменты для импорта и воспроизведения видео, новые компоненты для разработки
пользовательского интерфейса и привязки к данным, а также язык ActionScript 3.0 для
программирования сложных интерактивных сценариев.

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

Данное издание рассчитано на широкую аудиторию читателей, занимающихся
разработкой и оформлением сайтов, профессиональных Web-дизайнеров, программистов, бизнесменов, занятых в сфере Internet-рекламы, а также может быть полезно начинающих пользователям.

Э45

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

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

ISBN 0-321-50291-4 (англ.)

ISBN 978-5-94074-541-9 (рус.)

Authorized translation from the English language edition, entitled ADOBE FLASH
PROFESSIONAL FOR WINDOWS AND MACINTOSH: VISUAL QUICKSTART GUIDE, by
KATHERINE ULRICH, published by Pearson Education, Inc, publishing as Peachpit Press,
Copyright ©.

All rights reserved. No part of this book may be reproduced or transmitted in any form or
by any means, electronic or mechanical, including photocopying, recording or by any information
storage retrieval system, without permission from Pearson Education, Inc. RUSSIAN language
edition published by DMK PUBLISHERS, Copyright ©.

© Peachpit Press

© Перевод на русский язык, оформление
ДМК Пресс, 2010

Содержание

Благодарности ........................................................................................................... 10
Введение ..................................................................................................................... 11

Глава 1. Среда разработки Flash......................................................................... 19

Работа с документами Flash...................................................................................... 20
Работа с шаблонами .................................................................................................. 25
О среде разработки Flash .......................................................................................... 28
О свойствах документа.............................................................................................. 32
Привязка..................................................................................................................... 41
Просмотр в разных масштабах................................................................................. 45
Панели ........................................................................................................................ 47
Объединение и стыковка панелей ............................................................................ 51
Об инспекторе свойств .............................................................................................. 58

Глава 2. Создание простых графических элементов.......................... 61

Обзор инструментов .................................................................................................. 62
Сплошные цвета и градиенты ................................................................................... 64
Образцы ...................................................................................................................... 69
Создание наборов цветов.......................................................................................... 70
Задание атрибутов заливки ...................................................................................... 72
Задание атрибутов обводки ...................................................................................... 74
Создание геометрических форм .............................................................................. 78
Создание произвольных форм ................................................................................. 84
Добавление обводок и заливок ................................................................................ 94

Глава 3. Работа с текстом ........................................................................................ 99

Инструмент «Текст» ................................................................................................. 100
Задание атрибутов текста ....................................................................................... 102
Задание атрибутов абзаца ...................................................................................... 109

Глава 4. Модификация простых графических элементов............ 113

Задание параметров выбора................................................................................... 114
Выбор объектов ....................................................................................................... 116
Работа с буфером обмена....................................................................................... 122
Изменение размера графических элементов ........................................................ 124
Позиционирование графических элементов ......................................................... 128

Содержание
6

Отражение, поворот и перекос ............................................................................... 130
Искажение графических элементов....................................................................... 134
Модификация заливок и обводок .......................................................................... 137
Модификация форм: инструменты естественного рисования ............................ 144
Модификация форм: кривые Безье ....................................................................... 147
Модификация путей примитивных форм.............................................................. 155
Конвертирование форм из одного вида в другой ................................................. 160

Глава 5. Однослойная составная графика ............................................... 163

Работа с группами ................................................................................................... 166
Редактирование групп ............................................................................................. 169
Управление порядком в стопке ............................................................................... 171
Объединение объектоврисунков и примитивов ................................................... 173

Глава 6. Многослойная графика ...................................................................... 175

Знакомство с функциями временной шкалы для работы со слоями.................. 176
Создание и удаление слоев и папок ....................................................................... 177
Управление слоями и папками ............................................................................... 180
Задание свойств слоев на панели временной шкалы........................................... 182
Организация слоев с помощью папок.................................................................... 184
Работа с графикой в нескольких слоях ................................................................. 187
Межслойные операции вырезания и вставки ....................................................... 189
Распределение элементов по слоям ...................................................................... 192
Работа с направляющими слоями .......................................................................... 193
Работа со слоямимасками ..................................................................................... 195

Глава 7. Работа с символами.............................................................................. 199

Знакомство с библиотечной панелью .................................................................... 200
Иерархия библиотек ................................................................................................ 204
Преобразование графических элементов в символы........................................... 206
Создание символов с нуля ...................................................................................... 210
Использование экземпляров символа ................................................................... 213
Модификация экземпляров символа .................................................................... 214
Замена одного экземпляра символа другим ......................................................... 218
Редактирование главных символов ....................................................................... 220
Дублирование главного символа............................................................................ 221
Удаление главных символов ................................................................................... 222
Преобразование экземпляров символа в графические элементы ...................... 223

Глава 8. Покадровая анимация .........................................................................225

Использование временной шкалы ......................................................................... 226
Создание опорных кадров....................................................................................... 230
Создание промежуточных кадров .......................................................................... 234
Выбор кадров ........................................................................................................... 236
Манипулирование кадрами в одном слое.............................................................. 239
Удаление кадров ...................................................................................................... 243
Создание простой покадровой анимации .............................................................. 246
Предварительный просмотр действия ................................................................... 248
Сглаживание анимации за счет добавления опорных кадров.............................. 250
Использование восковок......................................................................................... 252

Содержание

Редактирование нескольких кадров....................................................................... 254
Задание частоты кадров ......................................................................................... 256
Анимация с переменной скоростью ....................................................................... 257

Глава 9. Анимация посредством интерполяции движения...........259

Создание прыгающего мяча с помощью интерполяции движения ..................... 260
Добавление опорных кадров в интерполированную
последовательность ................................................................................................ 264
Эффекты анимации цвета ...................................................................................... 265
Анимация графики с изменяющимся размером................................................... 266
Вращение графических элементов ........................................................................ 268
Перемещение графических элементов по прямой ............................................... 271
Перемещение графических элементов вдоль пути .............................................. 273
Ориентация графических элементов относительно пути движения ................... 277
Изменение скорости анимации .............................................................................. 279
Копирование интерполированного движения ....................................................... 285

Глава 10. Анимация посредством интерполяции форм..................... 291

Создание прыгающего мяча с помощью интерполяции форм ............................ 292
Трансформация простых линий и заливок ............................................................ 295
Интерполяция нескольких форм ............................................................................ 297
Трансформация простой формы в сложную......................................................... 299
Создание форм, которые движутся при изменении ............................................. 304

Глава 11. Более сложные задачи анимации.............................................. 307

Сцены ........................................................................................................................ 308
Манипулирование кадрами в нескольких слоях ................................................... 311
Анимация с помощью нескольких интерполяций движения ............................... 314
Анимация с помощью интерполяции нескольких форм ...................................... 319
Изменение порядка кадров ..................................................................................... 321
Комбинирование интерполяции с покадровой анимацией................................... 323
Сохранение анимаций в виде графических символов.......................................... 325
Использование анимированных графических символов ..................................... 329
Сохранение анимации в виде символаклипа ....................................................... 332
Использование символовклипов .......................................................................... 336
Использование анимированных масок .................................................................. 339
Использование фильтров ....................................................................................... 345

Глава 12. Добавление интерактивности с помощью кнопок......... 353

Создание простейшего символакнопки................................................................ 355
Создание символовкнопок с изменяющейся формой ........................................ 359
Создание анимированных символовкнопок......................................................... 362
Использование компонентовкнопок ..................................................................... 365
Модификация компонентовкнопок....................................................................... 368
Создание кнопокклипов ......................................................................................... 374

Глава 13. Основы интерактивности................................................................... 379

Знакомство с панелью действий ............................................................................ 380
Настройка панели действий .................................................................................... 382
Организация действий в кадре ............................................................................... 385

Содержание
8

Добавление действий в кадр .................................................................................. 386
Программирование кнопок с помощью сценария кадра ...................................... 390
Тестирование действий ........................................................................................... 401
Усовершенствование сценариев для работы с кнопками..................................... 404
Выбор событий ........................................................................................................ 408
Компонентыкнопки ................................................................................................ 412
Использование одного обработчика для нескольких событий ............................ 415
Программирование клипов как кнопок .................................................................. 417
Ссылки на другие Webстраницы ........................................................................... 425
Преобразование анимации на временной шкале в код ........................................ 429
Использование кнопок для управления графическими объектами .................... 432

Глава 14. Использование графики, созданной
в других программах ............................................................................ 441

Импорт растровых изображений ............................................................................ 442
Импорт файлов, созданных в программе Photoshop ........................................... 444
Импорт файлов, созданных в программе Adobe Illustrator .................................. 450
Импорт файлов, созданных в программе Fireworks ............................................. 457
Импорт из программы FreeHand ............................................................................. 459

Глава 15. Добавление звукового сопровождения................................. 461

Импорт звука............................................................................................................ 462
Добавление звука в кадры ...................................................................................... 464
Добавление звука к кнопкам .................................................................................. 468
Использование звуков, синхронизированных с событиями ................................ 470
Использование звуков, синхронизированных с началом ..................................... 474
Использование потокового аудио .......................................................................... 475
Прекращение звучания............................................................................................ 478
Повтор звучания ...................................................................................................... 480
Редактирование звука ............................................................................................. 482

Глава 16. Добавление видео .................................................................................. 487

Импорт видео для прогрессивной или потоковой загрузки ................................. 489
Импорт внедряемого видео .................................................................................... 494
Задание параметров кодирования ......................................................................... 498
Работа с внедренным видео ................................................................................... 506
Работа с компонентом FLVPlayback ........................................................................ 508

Глава 17. Доставка ролика аудитории............................................................ 515

Подготовка ролика для оптимального воспроизведения ..................................... 516
Публикация .............................................................................................................. 520
Настройки Flashплеера........................................................................................... 524
Публикация HTMLдокумента для просмотра файлов в Flashплеере ................ 534
Использование альтернативных графических форматов .................................... 544
Определение версии ................................................................................................ 548
Печать из Flash ......................................................................................................... 550

Предметный указатель ..............................................................................................................553

Посвящается Перри Уиттлу, чья поддержка –
моральная и техническая – помогает мне не
уклоняться от цели. Он всегда преуменьшает
мои неудачи и беззастенчиво восхваляет мои
достижения.

Благодарности

Особая благодарность редактору этой книги
Вэнди Шарп (Wendy Sharp) за ценные советы,
слова поддержки и настойчивость на протяжении всего времени работы. Огромное спасибо
Андреасу Хейму (Andreas Heim), начальнику
технического отдела компании Smashing Ideas,
за то, что он написал главу 13 и придумал интерактивные задания, которые позволят приступить к работе с языком ActionScript даже тем,
кто совсем ничего не знает о технологии Flash.
Спасибо Марку Р. Ронкману (Mark R. Ronkman) за то, что он прочел рукопись, обращая
внимание на точность формулировок и технические ошибки, а также за те советы и рекомендации, которыми он постоянно делился со
мной. Аплодисменты литературному редактору Жаклин Кэн Аарон (Jacqueline Kan Aaron), от
нее не укрылись никакие мои орфографические, грамматические, логические или стилистические ошибки. Слава и почет заведующему
производством Конни Юнг-Миллс (Connie
Jeung-Mills) и наборщику Оуэну Вулфсону
(Owen Wollfson) за то, что эти страницы получились ясными и красивыми. Благодарю также
Эмили Глоссбреннер (Emily Glossbrenner) за
составление указателя в очень сжатые сроки и
Майкла Дж. Ульриха (Michael J. Ulrich) за помощь в тестировании импорта графических
изображений из программы Adobe Illustrator. И
еще спасибо Бекки Морган (Beckie Morgan),
вклад которой был весьма заметен на заключительных этапах работы.

Нельзя обойти вниманием тех, кто помогал в
работе над предыдущими изданиями, их труды
не пропали даром: Брэд Бехтель (Brad Bechtel),
Лайза Бразиэль (Lisa Brazieal), Эрика Бэрбек
(Erika Burback), Джереми Кларк (Jeremy Clark),
Клифф Колби (Cliff Colby), Пэт Кристенсон
(Pat Christenson), Питер Алан Дэйви (Peter Alan
Davy), Джейн Дековен (Jane DeKoven), Джонатан Дюран (Jonathan Duran), Люп Эдгар (Lupe
Edgar), Виктор Гавенда (Victor Gavenda), Сьюки
Гир (Suki Gear), Бекки Морган (Beckie Morgan),
Эрика Нортон (Erika Norton), Кристи Пэйн
(Christie Payne), Джэнис Пирс (Janice Pearce),
Нэнси Рейнхардт (Nancy Reinhardt), Шэрон
Силден (Sharon Selden), Кэти Симпсон (Kathy
Simpson), Джеймс Тэлбот (James Talbot), Тиффани Тэйлор (Tiffany Taylor), Бентли Вулф
(Bentley Wolfe) и Лайза Янг (Lisa Young).

И, наконец, сердечная благодарность Марджори Бир (Marjorie Baer) за дружескую поддержку и за то, что она втянула меня в этот проект.

Введение

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

В конечном итоге способность Flash эффективно доставлять графику через Интернет с учетом
ограничений по скорости соединения привлекла внимание тех разработчиков Web-контента,
которые стремились создавать сложные интерактивные управляемые данными сайты и разбирались в программировании сценариев. Язык
ActionScript удовлетворил их потребности. По
мере того как высокоскоростной Интернет распространялся все шире, разработчики стали
включать более длительные и сложные анимации. Flash научили отображать видео. С каждой
новой версией возможности продукта расширялись. Версия Adobe Flash CS3 Professional ориентирована не только на дизайнеров, желающих
создавать красивую и не слишком ресурсоемкую
графику и анимацию, но и на разработчиков, заинтересованных в надежных мультимедийных
Интернет-приложениях.

iiiii

Введение
12

О технологии Flash

Технология Flash впервые появилась на свет в
виде очень удачной небольшой программы
FutureSplash Animator для создания и анимирования векторной графики. В 1997 году компания Macromedia приобрела эту программу,
изменила название на Flash и позиционировала ее на рынке как инструмент создания графического контента для Web. В 2005 году компания Adobe купила Macromedia и приняла от
нее эстафету.

Ранние версии Flash были прекрасными образчиками приложений для конструирования Webсайтов, предоставляя все необходимое для создания визуально привлекательных, а не чисто текстовых сайтов: средства создания графических
элементов, их анимирования, разработки интерактивного интерфейса и подготовки HTMLразметки, с помощью которой эти элементы

отображались в браузере. В версии Flash CS3 все
это осталось, но добавились еще более изощренные графические инструменты, специализированные средства импорта графики, созданной в
Adobe Photoshop и Adobe Illustrator, инструменты для импорта и воспроизведения видео, новые
компоненты для разработки пользовательского
интерфейса и привязки к данным, а также язык
ActionScript 3.0 для программирования сложных
интерактивных сценариев. Flash превратилась в
набор инструментов для создания так называемых обогащенных Интернет-приложений (Rich
Internet Application — RIA). В качестве такого
приложения может выступать что угодно: онлайновый магазин, корпоративный образовательный модуль, сайт для просмотра видеоклипов, броская витрина для продвижения последней модели автомобиля, снабженная к тому же
настраиваемым интерфейсом для виртуального
тест-драйва.

Векторная и растровая графика

Данные, лежащие в основе векторной и растровой графики, похожи в том смысле, что те и
другие — это инструкции, следуя которым компьютер создает изображение на экране. Однако, растровые изображения занимают больше места и обладают меньшей гибкостью; векторная же графика компактнее и допускает масштабирование. В растровой графике изображение
представлено в виде совокупности точек, тогда как в векторной оно математически описывается как последовательность прямых линий и дуг (рис. i.1). Возьмем, к примеру, черный горизонтальный отрезок длиной 1 дюйм на белом фоне. В растровом его представлении инструкции формулируются примерно так: поставить белую точку, поставить белую точку, поставить черную точку, поставить черную точку, поставить черную точку и повторять, пока
черных точек не наберется на дюйм. Затем снова идут белые точки, пока ими не будет заполнен весь экран. В векторном же представлении будет лишь формула прямой линии плюс координаты ее начала на экране.

Рис. i.1. Для рисования растрового изображения компьютер
должен получить инструкции для нанесения каждой
составляющей его точки. Векторное изображение
математически описывается прямыми и кривыми линиями.
Растровый отрезок прямой (слева) выглядит гораздо грубее
векторного (справа). Невозможно увеличить представленную
растром линию без потери качества. А векторную — сколько
угодно, при этом никакой зубчатости не появится.

Что делает Flash особым
инструментом Webдизайна?

С самого начала Flash бросила вызов судьбе,
предложив возможность доставлять через Web
векторные изображения. А в чем же преимущества векторной графики? В том, что уменьшается размер файлов, а, значит, сокращается время загрузки. К тому же векторные изображения
масштабируемы, а это означает, что пропорции
сайта сохранятся, если пользователь изменит
размеры окна браузера.

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

К числу прочих особенностей Flash следует отнести возможность создавать оригинальные
изображения с помощью кривых Безье и естественных инструментов рисования; средства
для импорта изображений, звука и видео, а также механизмы создания анимаций и интерактивности. Со временем инструменты Flash для
поддержки интерактивности стали более надежными. Версия Flash CS3 включает полноценный объектно-ориентированный язык сценариев в двух вариантах ActionScript 2.0 и 3.0.
Оба совместимы со спецификацией ECMA-262,
лежащей в основе языка JavaScript, поэтому их
легко освоит любой, кто знаком с этим языком.

Что делает Flash особым инструментом Webдизайна?

Как во Flash организуется анимация

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

Формат Flashфайлов

Flash предоставляет как среду для создания
контента, так и систему воспроизведения, позволяющую визуализировать этот контент на
локальном компьютере или в Web-браузере.
Графика, анимация и описание интерактивного интерфейса хранятся в файлах с расширением .fla, которые часто называют FLA-файлами. Чтобы подготовить контент к просмотру
через Web FLA-файлы преобразуются в формат Flash-плеера. Файлы для плеера имеют
расширение .swf (произносится «свиф»).

Как доставляется Flashконтент

Система публикации Flash создает HTML-код,
необходимый для отображения Flash-контента в
браузере. Можно выбрать и иные способы доставки Flash-контента, например, в виде анимированных GIF-файлов или видеоклипа для программы QuickTime. В процессе публикации Flash
создает и эти альтернативные формы.

Введение
14

Что нового появилось
в версии Flash CS3

Компания Adobe немало потрудилась, чтобы
интегрировать продукты из линеек Adobe и
Macromedia. В результате всех изменений и
улучшений новый пользовательский интерфейс Flash стал больше похож на другие программы Adobe. Поскольку Flash входит в состав
комплекта Adobe Creative Suite, то он легко позволяет загружать файлы, созданные, например, с помощью Photoshop или Illustrator. Кроме того, в эту версию Flash включены новые
графические инструменты, средства для повторного использования анимаций и последняя версия языка ActionScript (3.0). Рассмотрим все это подробнее.

Улучшенный интерфейс

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

Значки панелей. Чтобы освободить место на
рабочем столе, можно свернуть пристыкованную панель (или группу панелей) в значок
(рис. i.2). Одиночный щелчок восстанавливает полноразмерную панель. Можно задать настройки так, чтобы панель автоматически возвращалась в свернутое состояние при щелчке
вне нее либо оставалась открытой, пока не будет нажата специальная кнопка.

Рис. i.2. В версии Flash CS3 можно свернуть
пристыкованные панели (или группы панелей) в
значок (верхний рисунок). При щелчке по панели
восстанавливается ее исходный размер (нижний
рисунок). Настройки позволяют указать, должна ли
панель возвращаться в свернутое состояние при
щелчке вне нее или это нужно делать явно путем
щелчка по кнопке с двумя стрелочками.

О программе Adobe Flash Player

Когда Flash только появилась, необходимость использовать специальный плеер для просмотра
Flash-контента в браузере считалась недостатком. Дизайнеры опасались, что пользователи не
захотят тратить время на загрузку еще одной надстройки над своим браузером. Но с тех пор
Flash стала стандартом де факто для доставки обогащенного Интернет-контента — в особенности интерактивной векторной графики и анимации, и программа Flash Player получила широкое распространение. В Adobe считают, что примерно на 96 процентах машин, имеющих доступ к Интернету, уже установлен Flash Player версии 6 или выше, при этом более чем в 80%
браузеров в США, Канаде, Великобритании, Германии, Франции и Японии стоит даже версия 9.

Щелкнуть для
сворачивания
панели в значок