Flash MX для профессиональных программистов

Flash MX для профессиональных программистов

2-е издание, исправленное

Капустин М.А.
Копылова А.Г.
Капустин П.А.

Национальный Открытый Университет “ИНТУИТ”
2016

2

УДК 004.422.8‘275(075.8)
ББК 16
К20
Flash MX для профессиональных программистов / Капустин М.А., Капустин П.А., Копылова А.Г. M.: Национальный Открытый Университет “ИНТУИТ”, 2016 (Основы информационных технологий)
ISBN 5-94774-402-3

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

(c) ООО “ИНТУИТ.РУ”, 2006-2016
(c) Капустин М.А., Копылова А.Г., Капустин П.А., 2006-2016

3

Введение

Среда разработки Flash MX: векторный редактор, управление анимацией,
редактирование кода. Использование линейки времени. Обычные и ключевые кадры.
Работа с панелью Movie Explorer. Редактирование кода, доступ к справочной
информации. Компиляция флэш-ролика, различные способы его запуска. Символы
различных типов, создание символов и их экземпляров. Создание кнопок и работа с
ними. Типы текстовых полей. Встраивание шрифтов внутрь ролика. Работа с htmlполями.

Что такое технология Flash

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

Как вы, без сомнения, догадываетесь, одним из самых употребительных слов в этой
книге будет слово Flash. Так вот, чтобы не перегружать текст латиницей и сделать
Flash MX для вас столь же родным, каким он стал для авторов книги, мы будем, как
правило, писать слово Flash по-русски: Флэш или Флэш МХ (последний случай - это
когда мы хотим подчеркнуть, о какой версии Флэш идет речь). А название Flash MX латиницей - будем употреблять в основном в тех случаях, когда нам покажется
уместным более официальный тон.

Для кого предназначен этот курс

Наш курс лекций ориентирован на программистов. Сейчас Флэш стал достаточно
мощной технологией, чтобы делать на ней крупные проекты. Крупные для Флэш - это,
конечно, не проекты масштаба предприятия, а проекты, в которых занят десяток
дизайнеров, делающих однотипные вещи. Этих дизайнеров нужно “пасти”.
Позаботиться о повторном использовании компонентов и об их расширении. Для этого
такие общие компоненты надо написать и наладить коллективную работу с ними. Для
подобной деятельности нужен опытный программист. Если так случилось, что этот
программист - вы, то вам понадобится познакомиться с технологией Флэш. Вам нужно
будет хотя бы в общих чертах представлять ее рисовательно-анимационные
возможности. И максимально подробно - возможности программирования и
организации коллективной работы. Для улучшения уровня подготовки дизайнера эта
книга тоже может пригодиться - но только как дополнительное чтение. Посему в
дальнейшем вас, читатель, я буду считать профессиональным программистом. А
поскольку в наши дни довольно трудно найти профессионального программиста,

4

который не знал бы либо С++, либо Java, то мы будем считать, что вы один из этих
языков знаете. (Зубры ассемблера и Fortran, простите нас!)

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

В этой книге наиболее подробно описана версия Flash MX. В процессе подготовки
книги к печати появилась версия Flash MX 2004. Она очень сильно расширена в
первую очередь в сторону поддержки крупных проектов (крупных для Флэша). Тем не
менее, информация по версии МХ все еще актуальна. Во-первых, многие компании
работают с лицензионным программным обеспечением и еще не купили себе
последнюю версию. Во-вторых, переход на новую версию - это всегда дело достаточно
длительное. А начинать проект на инструментарии, который еще не изучен до конца, дело рискованное. Так что, если ваши дизайнеры еще не перешли на версию МХ 2004,
то и вам придется работать с тем, что есть. Многие советы по поводу Флэш МХ будут
актуальны и для Флэш 5; но что для него годится, а что нет - об этом специально
упоминать не будем. На сегодняшний день Флэш 5 уже бесспорно устарел.

Развитие “крупно-проектной” составляющей Флэш по версиям можно
охарактеризовать следующим образом. В версии 4 можно было кое-как сделать коечто. В версии 5 кое-что уже можно было сделать, как следует. В версии МХ кое-как
уже можно было сделать все, что необходимо. Похоже, что в версии MX 2004
практически все уже можно сделать, как следует. Впрочем, совершенства, как
известно, нет в этом мире. А мы уж постараемся, чтобы после прочтения этой книги вы
смогли максимально снизить дозу “кое-как” в ваших проектах на Флэш МХ.

Кому еще наш курс может быть интересен

5

В предыдущем параграфе мы попытались рассказать о том, какая непосредственная
польза от курса может быть получена. Однако польза - это даже в нашем материальном
и меркантильном мире не единственный мотив познания. В конце концов, в
программисты идут в первую очередь потому, что программировать интересно. Так
вот, мы надеемся, что этот курс будет интересен программистам, которые любят
изучать разнообразные языки. Несмотря на несомненное родство с Java и С++,
ActionScript 1.0 (язык, встроенный в среду Флэш МХ) - весьма интересный и
необычный язык. Чего стоит одно только прототипное наследование, на котором
построена объектная модель языка. За счет отсутствия строгого контроля типов язык
становится весьма гибким, несмотря на достаточно скромный набор языковых средств.
И позволяет эмулировать даже такие сложные вещи, как множественное наследование
(которого многим не хватает в Java). Да, конечно, есть язык, который чрезвычайно на
ActionScript похож - это JavaScript. Оба они сделаны на основе стандарта ECMA-262.
Но многие ли программисты (из которых практически каждый написал сотню-другую
строк на JavaScript) пользовались этим языком “на полную катушку”? Скорее всего,
большинство из них и не подозревали о множестве скрытых в нем возможностей. Как
не подозревали об этих возможностях и авторы данной книги до того, как
познакомились с системой Флэш МХ. Так что, если вы хотите познакомиться с еще
одним языком программирования (или поглубже вникнуть в него, если вы неплохо
знаете JavaScript), - эта книга может вас заинтересовать.

Кстати, даже если вы работаете с Flash MX 2004, ваши знания ActionScript 1.0 не
пропадут даром. Во-первых, вы можете скомандовать среде Флэш МХ 2004
использовать при компиляции ActionScript 1.0 вместо ActionScript 2.0 (правда, это
помешает вам использовать ряд встроенных компонентов). Кроме того, большая часть
сведений, касающихся ActionScript 1.0 для ActionScript 2.0 также актуальна, просто во
второй версии появились новые средства, которыми рекомендуется пользоваться
вместо старых. (Последняя фраза касается в первую очередь объектной модели). Тем
не менее, полной обратной совместимости между версиями языка нет; поэтому в МХ
2004 обратная совместимость реализована при помощи переключения используемой
при компиляции версии ActionScript.

Принципы построения курса

При написании курса мы старались помнить, что пишем отнюдь не справочник.
Поэтому простого перечисления фактов здесь не будет. С другой стороны, нам
хотелось ответить на те вопросы, которые рано или поздно возникают у программиста
при знакомстве с такой технологией как Флэш МХ. Однако отвечать на вопросы до
того, как их зададут - вещь малополезная. Поэтому в нашем курсе вы практически
всегда будете сначала узнавать нечто, провоцирующее вопросы, а уж затем доберетесь
до ответов. Разбор головоломок (с целью посмотреть, что же там внутри), как известно,
один из наиболее эффективных методов обучения. Если вам такой метод не по душе, и
вы хотите сразу добраться до ответов - читайте стандарт ECMA-262, на основе
которого сделан язык ActionScript, используемый во Flash MX. Три версии этого
стандарта вы можете найти, например, по такому адресу: ссылка:
http://www.mozilla.org/js/language/ (читать лучше последнюю, третью версию; и не

6

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

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

Зависимости между лекциями

Лекции с первой по пятую являются безусловно необходимыми для понимания
последующего материала. (Впрочем, если вы немного знакомы с тем, что собой
представляет Флэш МХ, первую лекцию можно не читать. Однако при этом вы
рискуете пропустить ряд важных тонкостей, например, встраивание шрифтов при
работе с текстовыми полями). Лекции 6 и 7 совершенно необходимы для понимания
главы 8, но не очень необходимы (хотя и весьма желательны, особенно глава 6) для
чтения дальнейшего материала. Все последующие главы, за исключением лекций 13 и
14, практически независимы друг от друга. А вот для понимания довольно большой
части четырнадцатой лекции надо будет изучить тринадцатую.

Теперь давайте обсудим, чем именно наш курс отличается от другой литературы по
Флэш МХ. Во-первых, мы старались уделять максимальное внимание глубине
изложения материала. Во-вторых, в курсе содержится и такая информация, которую
читатель вряд ли сможет найти где-либо еще. В первую очередь это касается
содержимого лекций 5, 7, 8, 10 и 13. Сейчас мы поясним, что конкретно в каждой из
этих лекций читатель сможет найти только в нашей книге.

В лекциях 5 и 7 подробно описаны различные необычные ситуации, связанные с
работой функций и с наследованием соответственно. В лекции 10 детально
рассматриваются математические аспекты работы градиентных заливок и кривых Безье
во Флэш МХ. В лекции 13 представлены разработанные авторами методики командной
работы (автоматического обновления библиотечных компонентов и др.) в проекте,

7

разделяющемся на “библиотечную” и “дизайнерскую” части.

Предметом особой гордости авторов является лекция 8, посвященная множественному
наследованию. Фактически, в ней описано полноценное расширение языка ActionScript
1.0, применяемого в системе Флэш МХ (расширение это реализовано, разумеется,
средствами самого ActionScript). Заинтересованные читатели могут попробовать
перенести это расширение на очень близкий к ActionScript 1.0 язык JavaScript.

Среда разработки Flash MX

Но начнем мы, несмотря на все наши заверения о пренебрежении к анимационной
части Флэш МХ, именно с нее. Очень краткое, на несколько страниц, введение в эти
аспекты среды Флэш МХ, является безусловно необходимым. Иначе вы не будете
знать, к чему же может быть применен ваш код, чем он сможет управлять.

Что представляет собой “рисовательная часть” Flash MX

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

Векторный редактор Флэш

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

Клипы и линейка времени

Теперь давайте условимся о терминологии. Мы будем называть флэш-роликом готовый
откомпилированный swf-файл (который можно запустить в броузере или внешнем
флэш-плеере).

Все, что нарисовано в готовом флэш-ролике - так или иначе нарисовано внутри клипов
(хотя клипы бывают и невидимыми). В каком-то смысле клип является минимальной
порцией “нарисованного материала”, с которой можно обращаться как с целым:
двигать, поворачивать, менять прозрачность и порядок наложения ( z-order ).

Вообще-то клипы могут быть довольно большими, в частности, содержать в себе
другие клипы, а те, в свою очередь - еще какие-то клипы и т.д.

Каждый клип содержит в себе так называемую ” линейку времени ” ( Timeline ). В

8

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

Каждый прямоугольничек символизирует собой отдельный кадр. После компиляции и
запуска линейка времени, разумеется, не видна, однако понятие ” линейки времени ”
остается полезным: мы можем говорить о том, какой по порядку кадр является
текущим в данном клипе. Как правило, линейки всех клипов (в том числе и вложенных
друг в друга) независимы, хотя изменение текущих кадров во всех клипах
осуществляется синхронно. Независимость же проявляется в том, что при изменении
кадра клип не обязательно переходит на следующий кадр; он может вернуться на
первый кадр, остановиться или вообще оказаться на любом кадре, который ему задали.
Такое управление осуществляется программно, и мы с ним в дальнейшем
познакомимся. Повторим еще раз этот важный момент: каждый из независимых клипов
переходит на тот кадр, который ему задали (если не задали ничего - переходит на
следующий), и кадры эти в разных клипах не связаны между собой. Об исключениях зависимых клипах (а точнее, об объектах типа Graphics , привязанных к родительским
клипам ) - мы поговорим позднее.

Символы и экземпляры (instances) клипов

Символы и экземпляры - это очень важная концепция, поэтому мы будем говорить о
ней минимум трижды с разным уровнем детализации. Пока ограничимся следующей
информацией: говоря о клипе, можно говорить о его символе (аналог класса) и об
экземпляре (аналог объекта класса). То есть каждому уникальному клипу соответствует
свой символ ; но можно сделать множество экземпляров клипа, порожденных одним и
тем же символом. Список всех символов клипа можно посмотреть в панели ” Library “,
которая выдвигается на поверхность по нажатию Ctrl+L.

Пишем “Hello, World!”

9

Сейчас мы приступим к самому скучному разделу книг по программным продуктам разделу пользовательского интерфейса среды разработки. Эта тема подробно
освещается во множестве ранее вышедших книг по Флэш и при необходимости можно
обратиться к любой из них. Мы же коснемся этой темы очень кратко, т.к. подавляющее
большинство программистов старается в этот раздел вообще не заглядывать, а
предпочитает быстренько со всем ознакомиться, используя “метод тыка”. Правда, из-за
этого можно оказаться в неведении о каких-то весьма полезных возможностях,
например, не знать о существовании такой замечательной вещи как Movie Explorer, о
котором мы в конце этого параграфа поговорим.

Итак, если вы чувствуете в себе силы одолеть скучный, но полезный кусок - читайте
сей параграф сей же час. В противном случае пропускайте его и вернитесь к нему
позже, когда захотите проверить, что, изучая интерфейс “методом тыка” не пропустили
ничего существенного.

Пользовательский интерфейс среды Флэш МХ

Интерфейс среды Flash MX состоит из набора панелей. Если вы зайдете в раздел
главного меню - Window, то увидите полный перечень панелей, каждую из которых вы
можете убирать и снова устанавливать.

Самая экзотическая панель - панель Timeline (” линейка времени “). Экзотическая потому что такой и в помине нет в других программах работающих с векторной или
растровой графикой, но не создающих анимацию. Скажем, в программе CorelDRAW,
(вероятно, вы этот пакет, как минимум, “видели издалека”), имеется “окно документа”,
во Флэш к “окну документа” следует отнести панель Timeline (” линейку времени “) и
рабочее поле, т.к. они неразрывно связаны друг с другом. Сейчас мы это
продемонстрируем, написав эту сладостную фразу “Hello, World!”, которая всегда
знаменует наше вступление в новую и загадочную область программирования.

Чтобы было не так скучно, давайте, играя с этой фразой, создадим простейший флэшролик, а по ходу его создания мы вас познакомим со средой Флэш МХ.

Вот краткий сценарий предлагаемого ролика. Сначала фраза “Hello, World!”
увеличивается в своих размерах, затем уменьшается и превращается в надпись “Hello,
Flash!”. Через секунду - это снова “Hello, World!”, но в тоже время, это еще и кнопка,
нажав на которую, можно перейти в другой кадр, где нашу многострадальную надпись
проглотит зубастое чудовище.

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

Произведем следующие действия. Слева на вертикальной панели Tools кликните на
инструменте Text Tool (кнопка с буквой А ). В дальнейшем подобные
последовательности будем записывать так: ” Tools \ Text Tool “. Теперь кликните в
любом месте рабочего поля и введите для пробы несколько символов. Допустим,

10