Введение

Пишем "Hello, World!"

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

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

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

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

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

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

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

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

Произведем следующие действия. Слева на вертикальной панели Tools кликните на инструменте Text Tool (кнопка с буквой А ). В дальнейшем подобные последовательности будем записывать так: " Tools \ Text Tool ". Теперь кликните в любом месте рабочего поля и введите для пробы несколько символов. Допустим, сейчас на рабочем поле вы видите нечто маленькое и невразумительное. Возможно, что маловат масштаб, в котором показывается рабочее поле, или установлен очень маленький шрифт. Сначала давайте увеличим масштаб, в котором показывается рабочее поле. Для этого нам понадобится панель Edit Bar. Вот наши действия для Флэш МХ 2004, если панель Edit Bar еще не подключена: Главное меню \ Window \ Toolbars \ Edit Bar. Панель должна появиться сразу же под закладкой с именем вашего ролика. Во Флэш МХ эта панель постоянно находится над рабочим полем. Справа на этой панели расположено окошко выпадающего списка (сombo box), в котором устанавливается масштаб рабочего поля. Давайте выставим там значение 100%.

Если стало не намного лучше, придется увеличить шрифт. Для этого нужно взглянуть на панель Главное меню \ Window \ Properties, далее будем писать короче: " Properties ", ведь мы уже знаем, где можно разыскать все панели. Полное название панели Properties Inspector. Вполне возможно, что она у вас уже имеется где-то в главном окне, и возможно уже развернутая, если нет, то разверните ее, кликнув на любом месте свернутой панели, а еще точнее, по зоне серого цвета.

Это просто замечательная панель, на ней мы можем увидеть и изменить массу характеристик того, что выделено на рабочем поле. В данный момент выделенным является введенный нами текст. В центре панели имеется комбо-бокс (выпадающий список), где мы видим, какой шрифт был применен, а чуть правее находится окошко (элемент редактирования), где можно выставить размер шрифта. Также можно воспользоваться для этого ползунком, который появится, если нажать на кнопочку, расположенную справа от окошка. Поставьте шрифт побольше, например, 20, и наконец-то, давайте напишем: "Hello, World!". Написали? Теперь нажмите Ctrl + Enter, так запускается Test Movie ( Главное меню \ Control \ Test Movie ). Сейчас в окне предварительного просмотра вы видите желанную фразу - это перед вами первый и единственный кадр флэш-ролика, который мы, таким образом, создали. Закроем окно просмотра, кликнув на нижнем крестике, вверху справа (но не на том, что закрывает среду Флэш, а пониже). Мы снова окажемся в главном окне Флэш. Взгляните на панель Timeline. На ее правой части имеется длинный ряд цифр - это нумерация кадров и сейчас, как видим, выделен первый кадр. Оказывается, то, что мы сейчас видим на рабочем поле - это содержание выделенного первого кадра. Правда, больше-то кадров и нет.

Хотя фраза "Hello, World!" и написана, но что-то полного удовлетворения нет... ах да, конечно, мы ведь не написали ни строчки программного кода, а ритуал требует именно этого.

Сценарий ролика

Давайте теперь используем для этой же цели язык программирования ActionScript. Но прежде всего, наверное, следует обнародовать программу наших действий, которая поможет воплотить в жизнь предложенный сценарий ролика.

• Создадим еще одиннадцать ключевых кадров, в которых мы заставим нашу надпись увеличиться, а затем уменьшиться - это будет демонстрация примитивной анимации и снова, извините, без кодирования. Почему именно двенадцать кадров мы отвели на эту анимацию? Это было сделано для того, чтобы при скорости двенадцать кадров в секунду, а именно такая скорость установлена по умолчанию, вся анимация заняла ровно секунду - нам кажется, что это как раз то время, за которое можно успеть что-то разглядеть. При желании эта скорость может быть изменена. Делается это, например, вот так: нужно дважды кликнуть на панели Timeline, посередине ее, в нижней части, там, где в окошечке есть надпись, подобная следующей: "12,0 fps", а затем в появившемся окне Document Properties выбрать элемент редактирования называющийся " Frame rate ", в котором и можно изменить скорость. Кстати, в этом окне есть еще немало весьма важных установок, определяющих наш флэш-ролик.
• Затем надпись "Hello, World!" в тринадцатом кадре мы программно заменим другой - "Hello, Flash!", а через секунду она снова превратится в надпись "Hello, World!" - это произойдет в 25 кадре. Далее превратим ее в кнопку, которая при нажатии на нее будет перемещать нас в 26 кадр (а вообще-то, таким образом можно было бы перейти в любой кадр, не обязательно следующий).
• В 26 кадре нарисуем крокодила, с широко открытой пастью. Две строчки программного кода заставят его, при каждом клике мышки, ползти к давно надоевшей нам надписи и съесть ее.
• А потом самое время будет посмотреть структуру нашего флэш-ролика при помощи панели Movie Explorer. Нужно сказать, что рассматривание такой структуры - весьма поучительное зрелище.

Делаем простую анимацию, связанную с текстом

Итак, приступим к выполнению намеченной программы. Чтобы создать второй кадр, на панели Timeline выделим второй кадр, кликнув мышкой, на "зебровидной" линейке, пониже длинного ряда цифр. Сделаем этот кадр ключевым ( Keyframe ), т.е. таким, содержание которого не зависит от предыдущих кадров (это упрощение). Для этого пройдемся по такому пути: Главное меню \ Insert \ Keyframe, кстати, можно пользоваться всплывающим меню, для этого кликните правой кнопкой мышки на этом втором кадре. Можно также просто выделить нужный кадр и нажать F6. На рабочем поле ничего не изменилось, но, тем не менее - это второй кадр, просто, все что было в первом кадре, показывается и во втором, а далее мы уже можем начать менять, дополнять или вообще все сотрем.

Идем дальше. Выделим надпись "Hello, World!". Спрашивается, а как это сделать? А вот так: в верхнем левом углу панели Tools имеется инструмент Selection Tool, вот им и воспользуйтесь. Теперь давайте зайдем на панель Properties и увеличим размер шрифта на 10 единиц. Как это сделать, чтобы текст не обрезался границами текстового поля? Нужно сначала выбрать на панели Tools инструмент Text Tool и, кликнув на надписи, увеличить длину зоны, в которой будет располагаться увеличенная надпись, причем с запасом, не стесняясь, т.к. вплоть по шестой кадр мы с каждым кадром будем увеличивать шрифт на 10 единиц. Затем снова нужно выбрать инструмент Selection Tool, выделить им надпись и вот только теперь увеличить размер шрифта. Эту однообразную операцию проделайте вплоть до кадра шестого, в котором размер шрифта надписи достигнет 70 единиц, в седьмом кадре пусть тоже будет 70 единиц, а начиная с восьмого - уменьшайте шрифт тоже на 10 единиц в каждом кадре и тогда в двенадцатом кадре размер шрифта снова будет равен 20 единицам. Запустите Test Movie ; вы сможете убедиться, что у нас получилась настоящая анимация. (Кстати, просмотреть последовательность кадров - без выполнения программного кода, который мы пока и не писали - можно непосредственно в том же окошке где происходит редактирование клипа. Для этого нужно нажать просто Enter, а не Ctrl+Enter. Но в дальнейшем мы не будем пользоваться этим приемом - нам-то, как правило, нужно будет смотреть именно на то, как работает программный код.)

Итак, результат мы получили. Конечно, можно было добиться того же, применив программирование, но зато какая наглядная демонстрация качеств панели Timeline при минимальных усилиях! (Надо сказать, что количество действий можно было радикально сократить, применив некоторые специфические анимационные приемы. Но эти приемы мы не будем обсуждать в нашей книге, ибо они все равно гораздо подробнее описаны в любой книге по Флэш для дизайнеров). Как бы то ни было, мы можем констатировать, что пункт первый программы действий нами выполнен.

Ключевые и обычные кадры

Прежде чем мы пойдем дальше, мы должны сделать акцент на одной очень важной вещи. А именно, следует хорошо представлять себе, как сделать обычный кадр, а как - ключевой, и чем они друг от друга отличаются. Чтобы не испортить начатую анимацию, можно поэкспериментировать с кадрами в отдельном документе. Итак, если вы выделите любой пустой кадр и нажмете F5 (или выберете Insert Frame из контекстного меню или меню Insert ), то линейка времени от ближайшего заполненного кадра и до выделенного закрасится серым. Это означает, что анимация продлена до выбранного места. При этом и рисунок, и код, и анимационные эффекты соответствуют тем, что выбраны в ближайшем ключевом кадре слева. Если вы начнете редактировать что-то в тот момент, когда вы находитесь в обычном кадре - помните, вы просто редактируете ключевой кадр, из которого этот обычный сделан. Поскольку мы с вами не занимаемся анимационными эффектами, обычные (не ключевые ) кадры мы будем применять только в случае, когда надо "потянуть время" - то есть когда в данном клипе ничего не происходит.

Если же вы хотите создать ключевой кадр - жмите F6 (или выбирайте соответствующий пункт меню из контекстного меню или меню Insert ). Все нарисованные объекты из предыдущего кадра будут скопированы в новый, но, если вы станете в новом кадре их изменять, то в предыдущем кадре ничего не изменится. Что же касается кода (который мы вот-вот начнем писать), то код во Флэше обязательно привязывается к кадрам (по крайней мере, в редакторе). Так вот, код из предыдущего кадра во вновь созданный ключевой, разумеется, не копируется.

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

А теперь вернемся к нашей анимации и продолжим выполнять намеченную программу действий.