Неоднозначная, конечно же, почта поступила после первого выпуска. Неоднозначная в плане того, что каждый смотрит на Flash со своей точки зрения, то есть был выбран очень многофункциональный продукт. Конечно, многим, кто меня знает лично, было бы интересно узнать и то, как я освоил Cinema 4D и сделал в нем клип для одного из , как я программировал AI для компьютерных игр, вследствие чего стал консультанмузыкальных проектовтом по этому вопросу, и так множество сфер, в которых мне интересно и удобно работать. Честно сказать, я бы очень хотел, чтобы интернет был супермедийным, а в действительности он таким и будет, причем наиболее явно это проявляется в последнем Flex'е от Adobe. Так что давайте пока просто разбираться "суть-да-дело", а потом будут и клипы, и AI.

Итак, самое трудное, то есть начало-введение, было сделано в прошлом номере. А после того, как поезд стал на рельсы, двигаться уже легко, нужно только выбрать маршрут. Напомню, что мы сейчас идем в направлении программирования во Flash на ActionScript 2 с последующим переходом на Adobe Flex2 и Action Script 3. Для тех, кто уже освоил эти технологии, но ему интересен сам раздел как уже существующий, предлагаю подумать над некоторыми вопросами и при желании высказать свои мысли.

Итак, предтеча вопроса. Как только появился Flex 2, я устроился на курсы в одну из наших белорусских фирм. Все прошло хорошо, при этом преподавателем оказался программист-креативщик, который в присущей именно такому типажу:) манере любил задавать множество каверзных вопросов. Одна фраза, которую он произнес, заставила меня несколько задуматься. А именно, речь шла о том, с чем сталкиваются любые люди, которые хотят открыть флэш-анимацию, сайты и т.п. Как вы знаете, там указывается загрузка в процентах, но не обозначен размер самого закачиваемого файла. Преподаватель на курсах тогда сказал, что это ошибка, хотя лично я вижу "в не указании" правильно рассчитанный психологический момент. А что вы думаете по этому поводу? Это тема для обсуждения...

Ну а теперь переходим к истокам, рассматриваем интерфейс и пишем программу "Hello, world!". Для удобства дальнейшего понимания вопроса отмечу еще один важный момент: все создаваемое во флэше, особенно программируемое, рассчитано для воспроизведения только в одной программной оболочке - Flash Player.

Графический интерфейс Adobe/Macromedia Flash 8

Когда вы установите программу (в процессе инсталляции предусмотрена установка и самого Flash Player), то при первом запуске перед вами появится окно выбора между проектами. В принципе, ключевым вариантом будет New Flash Document, хотя можно создать и отдельные ActionScript-файлы, и даже JavaScript. О последнем стоит сказать отдельно, поскольку в этом варианте вы можете руководить оболочкой Flash'а как бы извне, то есть создавать дополнительные инструменты и так далее. Это используется достаточно редко, хотя на специализированных ресурсах вы можете найти огромное количество новых инструментов, позволяющих рисовать спирали, торы, делать новые варианты закраски (заливки), кроме стандартно предусмотренных типов градиента и так далее. Если эта тема вам потом покажется интересной, то множество примеров и листингов есть в интернете. Мы остановимся только на варианте New Flash Document. Итак, файл проекта открыт.

Что мы видим из интерфейсного:

• Главное меню.
• Временная диаграмма с возможностью создавать множество слоев (Layers, они же и треки).
• Рабочая область в центре. Причем белым квадратом там обозначен сам рабочий стол (белый цвет), а все, что вокруг, закрашено серым, то есть, в этой области можно проектировать любые элементы для рабочего стола и потом переносить их на него. Сами размеры рабочего стола - это реальные графические размеры вашей будущей анимации или программы.
• Справа находится панель инструментов, в число которых входит множество стандартных.
• Под рабочим столом находятся окна-закладки Action (там, где мы вводим программный код), Properties (если мы создаем некий графический объект с помощью инструментов, а не программно, то тут указываются все основные его свойства. Честно сказать, для больших проектов лучше не возлагать на эти установки большие надежды, а прописывать все программным образом, поскольку я не раз наблюдал картину, когда текстовые цвета и шрифты просто сбиваются). Также, если вы вызовите Flash Help (F1), то первоначально окно помощи появится в этой связке окон.
• Слева располагается множество служебной информации, т.е. дополнительные окна. В них вы можете найти и библиотеку собственных компонент (Library), также есть и специальная библиотека от разработчиков (Common Libraries), в которую входят всевозможные скролл-бары, мемо-окна, чек-боксы, радио-баттоны и т.п. То есть, для пользователей других современных объектно-ориентированных средств разработки это та же VCL, то есть Visual Component Library. Хотя не совсем та, поскольку именно во Flash есть возможность как угодно рисовать/создавать свои собственные компоненты. Для флэш-программистов и дизайнеров производство таковых очень просто, и на самом деле очень редко можно увидеть что-нибудь из стандартной библиотеки компонент во множестве профессиональных работ. Это как... в общем:), не солидно, особенно для такой среды.

Миф: Flash - это пакет для двумерной, то есть 2D-анимации.

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

Программа "Hello, world!"

Потом вы увидите, что сама панель-окно Actions автоматически переключается в зависимости от того, какой слой/объект у вас является рабочим или выделенным на данный момент. Но в варианте с первой загрузкой флэш-документа перед нами чистый рабочий стол и один слой, который по умолчанию всегда обозначен как Layer 1. Мы ничего не будем сейчас рисовать или делать графического. Достаточно нажать указателем мыши на Layer 1 во временной панели, он выделится темно-синим цветом, а в окне Actions напишем следующую строку:

trace ("Hello, world!")

Нажимаем Ctrl+Enter (запуск приложения на исполнение), и в результате загрузится пустое окно, а поверх него окно Output, в котором будет написано "Hello, world!". Одна программа - одна строчка.

Что такое команда trace? С ее помощью вы можете отобразить/проверить в окне Output любую переменную, ее характеристику и т.п. Данная функция является служебной и очень удобна при отладке приложений, хотя в момент полной компиляции, как вы понимаете, все строки trace следует убрать.

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

Если комментарий умещается в одну строку, то перед ним ставится "//", а если в несколько, то выделение этого блока обозначается открытием "/*" и закрытием "*/".

То есть, например, наша программа:

trace ("Hello, world!") // Выводим в окне Output надпись...

Когда вы это введете, то заметите, что комментарии отмечаются серым цветом, в то время как команда trace - синим (им выделяются все документированные команды, функции и т.п.), а надпись "Hello, world!" - зеленым (так обозначается символьное наполнение строчных переменных).

Теперь перейдем на другой уровень.

Возьмите строку trace ("Hello, world!"), скопируйте ее, поместите в блокнот (текстовый редактор) и сохраните файл под именем HW.as. При этом сам файл проекта сохраните в ту же директорию, что и созданный ранее текстовый файл. В файле проекта стираем нашу единственную строку, а вместо нее пишем:

#include "HW.as"

При запуске файла на исполнение картина практически не поменяется, то есть окно Output выведет вам тот же "Hello, world!". При этом вам даже не нужно было особо и применять расширение as для текстового файла, оно может быть любым, но при этом, как вы уже поняли, любой программный код можно разделять между различными файлами, а потом собирать все воедино. Особенно это удобно, если вы хотите создавать абстрактные недокументированные классы, писать собственные специализированные функции и т.п. Расширение "as" в данном случае удобно, поскольку эти файлы можете открыть в том же флэше, где есть идентификация ошибок. То есть, так лучше все оптимизировать.

Единственное, что здесь необходимо отметить отдельно, команда #unclude (т.е. "включить что-то в рамках чего-то") исполняется только в процессе компиляции кода при подготовке окончательного файла. И если вы потом будете вносить изменения, то обновлять нужно все. Данная команда очень близка к очень многим решениям импорта, включая и сценарии, связанные с компонентами, хотя она является самой простой и очевидной в понимании.

Примечание: обратите внимание на то, что все наши действия мы выполняли в рамках только одного кадра, на временной диаграмме он стал выделенным за счет присутствия закрашенного черного кружка и буквы "а", последняя указывает, что здесь есть программный код в окне Action.

Кнопка, и чуть-чуть о муви-клипах...

От дел служебных перейдем к делам практическим. Стоит задача нарисовать кнопку и указать, что по ее нажатию выводится надпись "Hello, world!". Делается все очень просто. Пока мы не будем рисовать что-то программно, а возьмем инструмент "прямоугольник" (Rectangle Tool) из панели инструментов. Рисуем его. Закрашиваем в нужный цвет (можете поэкспериментировать с градиентными заливками). Потом поверх него делаем некую надпись с помощью Text Tool, например, "OK". Обводим и выделяем все с помощью Selection Tool и нажимаем F8. Перед вами откроется окно, в котором предлагаются варианты инициализации объекта, где предлагается выбирать среди трех вариантов: MovieClip (анимационный клип), Button (кнопка), Graphic (статический графический объект). Выбираем "кнопку", при этом вносим ее имя, а также делаем активным флажок Export for ActionScript, вводим имя для идентификации.

Таким образом, мы создали новый объект-кнопку и сделали его доступным для программирования. Он сразу же отобразится в панели Library. Единственное, что необходимо, это обозначить имя этого конкретного объекта, которое будет нужным для его дальнейшего использования в ActionScript. Это делается в панели Properties (Instance Name). Допустим, "BtnOK", тогда код в нулевом фрейме на Layer 1 в ActionScript будет выглядеть следующим образом:

BtnOK.onPress = function () {
#include "HW.as" // или же trace ("Hello, world!")
}

Работать будет несколько коряво, оно и понятно, но уже над этим вам стоит подумать и поэкспериментировать. При этом, если вы сделаете двойной клик на самой сделанной кнопке, то перед вами откроется ее временная диаграмма, где уже автоматически прописаны реакции на события указателя мыши Up, Over, Down, Hit. По существу, это поведение данного графического объекта, которое может быть абсолютно любым, и вы его можете задавать самостоятельно (изменять объекты: их месторасположение, форму, цвет, параметры градиентной заливки, а также вносить новые элементы).

Таким образом, вы сами самостоятельно можете создать анимированную кнопку любой степени сложности.

Примечание: в программных кодах, а также во множестве специализированной литературы вы можете встретить написание кода не только на onPress (при нажатии), но и на onRelease (при отжатии). В данном примере может использоваться как и то, так и другое, только вы должны понимать, что речь идет о разных событиях.

Еще одно примечание: если вы сделали самостоятельно анимированную кнопку, то можете выделить ее, нажать F8 и обозначить как MovieClip. А какие будут изменения при запуске проекта, увидите сами:).

В завершение

В принципе, Flash очень сильно располагает к свободному стилю программирования, во Flex вы такого уже и не встретите - там все ближе к Java, хотя и от флэша осталось много, по моему мнению, хорошего:). Хотя да, как сама структура Flash, так и язык ActionScript являются достаточно упрощенными. Но об этом вы узнаете в следующих выпусках "Территории Flash/Flex".

Кристофер,
christopher@tut.by