Введение

Добавляем программный код

Сделаем ключевым кадр 13, снова выделим надпись и зайдем на панель Properties. В верхнем левом углу есть сombo box (он же - выпадающий список), где сейчас, скорее всего, установлен тип текста " Static text ". Давайте поставим: " Dynamic text ", что даст нам возможность программно изменять текст в данной, выделенной на рабочем поле, области. А в элементе редактирования Var (это внизу, справа), напишем слово hello. Таким образом, мы создали переменную hello, в которой сейчас находится символьная строка "Hello, World!". (Пока что мы не будем обсуждать, где создана эта переменная, какой у нее тип и какова область видимости. Но в свое время мы обязательно до этого доберемся). В программном коде для тринадцатого кадра, мы собираемся присвоить переменной hello другое значение, например, "Hello, Flash!".

Терпение, еще немного. Теперь давайте перейдем на панель Actions (можно нажать F9 ). Если вы работаете с Флэш МХ, то вам нужно установить режим " Expert Mode ", а если вы работаете с Флэш МХ 2004 - вы и так в этом режиме. На правой части панели имеется горизонтальная линейка меню, а нам нужна крайняя правая кнопка этого меню: " View Options ". Воспользовавшись ею, и установите этот, так нужный нам, " Expert Mode ". Теперь хорошо бы проверить, что написано в combo box, расположенном ниже названия панели. Во Флэш МХ там должно быть следующее: "Actions for Frame 13 of Name Layer Layer 1", а для случая Флэш МХ 2004 подобную информацию можно получить, изучив дерево на панели, расположенной внизу слева на панели Actions, а еще точнее - самый верхний элемент называющийся: " Current Selection ". Другими словами, нужно убедиться, что код, который мы напишем, будет относиться именно к тринадцатому кадру.

Под уже, упоминавшейся горизонтальной линейкой меню имеется окно текстового редактора, где давайте и напишем следующее:

hello = "Hello, Flash!";

Теперь взгляните на панель Timeline, в выделенном прямоугольнике тринадцатого кадра, наверху появилась маленькая буквочка "а", что означает, что к этому кадру имеется какой-то код. Чтобы иметь возможность полюбоваться на надпись "Hello Flash!" в течение одной секунды, вслед за тринадцатым кадром нужно ввести одиннадцать точно таких же кадров. Это делается так. Правой клавишей мышки кликнем на "зебровидной" полосе панели Timeline и на всплывающем меню выберем пункт " Insert Frame ". И так одиннадцать раз подряд. Конечно, можно и быстрее. Кликните по "зебре" левой мышкой и, не отпуская ее, протяните выделение до 24 кадра, а потом уже щелкайте по выделенному полю правой клавишей и выбирайте пункт " Insert Frame " (или нажимайте F5 ). Обратите внимание, мы вставляли не ключевые кадры, а обычные ( regular ) кадры, которые повторяют содержание предыдущего ключевого кадра.

Добавляем интерактивность

Теперь превратим нашу надпись в кнопку. Это мы сделаем в 25 кадре, который следует сделать ключевым. Но прежде давайте уменьшим зону, отведенную под написание текста, при помощи инструмента Text Tool. Далее выделим надпись (кстати, чтобы воспользоваться инструментом Selection Tool, можно просто нажать клавишу " V "; обратите внимание на всплывающие подсказки на панели Tools ). Зайдя на панель Properties, изменим свойство надписи " Dynamic Text " снова на " Static Text ". Если этого не сделать, наша кнопка будет вести себя несколько загадочно, а это нам ни к чему. Затем, кликнув правой кнопкой мышки по надписи, вызовем всплывающее меню. Выберем пункт Convert to Symbol, а затем в разделе Behavior выберем режим Button. Если предложенное нам название нас устраивает ( Symbol 1 ), а оно нас устраивает - нажимаем кнопку "OK". Вот теперь можно написать код, который будет выполняться при нажатии на нашу надпись-кнопку. Заходим на панель Actions. Так как надпись-кнопка была выделена, на заголовке панели будет написано " Actions - Button ". Напишем следующий код:

on (press) {
gotoAndPlay("last");
stop();
}

Упрощенно говоря, этот код означает, что если произошло событие " press ", то нужно перейти к кадру, называющемуся " last ", выполнить его и остановиться. Кадр " last " может находиться в любом месте флэш-ролика: до 25 кадра и после 25, его номер может быть любым и изменяться в процессе проектирования десятки раз из-за вставок и удаления других кадров, но если вы его имя не меняли, в процессе проигрывания флэш-ролика он будет найден и выполнен. В нашем простеньком примере он будет следующим за 25 кадром и последним в ролике, за что и получил название " last ".

Учитывая все только что сказанное, выделим на панели Timeline 26 кадр, сделаем его ключевым, перейдем на панель Properties и в окне редактирования Frame (это верхний левый угол панели) напишем " last ".

Таким образом, мы уже начали выполнять третий пункт нашей программы. Однако не будем слишком увлекаться: мы ведь оставили несколько недоделанной нашу надпись-кнопку. Возвращаемся в 25 кадр, выделяем надпись, кликнем на ней правой клавишей мышки, в всплывающем меню выберем пункт " Edit ". Вот теперь мы находимся в таком окне редактирования нашей надписи, в котором мы можем изменять ее "кнопочные" свойства.

Не помешает несколько осмотреться: куда это нас закинуло. В общем-то, все знакомо, но панель Timeline совсем другая. Имеется только четыре кадра. Первый - естественно, ключевой, иначе нельзя, а вот что-то меняя в следующих трех кадрах, нужно не забывать делать их ключевыми. И еще одно небольшое отличие появилось. Прямо над рабочим полем, рядом с надписью " Scene 1 ", теперь имеется надпись " Symbol 1 ". Чтобы вернуться на прежнее рабочее поле, т.е. в сцену 1, необходимо кликнуть на надписи " Scene 1 ", но это мы сделаем потом, а пока что продолжим редактировать нашу надпись-кнопку.

Давайте снова посмотрим на Timeline. Пожалуй, начнем пояснения с 4 кадра, который называется Hit. В нем можно обрисовать зону, достигнув которую, курсор мышки приобретает вид руки с вытянутым указательным пальцем, а сама кнопка приобретает такой вид, какой имеется в кадре Over. Естественно, все это будет при проигрывании готового ролика. Если, находясь в этой зоне, мы нажмем правую клавишу мышки - кнопка приобретет вид, который нарисован в кадре Down. Первый кадр называется Up - в нем мы видим кнопку такой, какой она будет, если мышка вне зоны, обозначенной в кадре Hit.

Теперь будем действовать. Кадр Up оставим без изменений. Выберем кадр Over, сделаем его ключевым, выделим надпись, а затем, выбрав на панели Tools инструмент " Free Transform Tool ", растянем надпись немножко по вертикали. В кадре Down, пользуясь этим же инструментом, поверните надпись на 90 градусов. Не забудьте сделать этот кадр и следующий кадр Hit, ключевыми. В кадре Hit давайте сделаем следующее. На панели Tools выберем инструмент Oval Tool и нарисуем такой круг или овал, который бы закрывал надпись; пусть он будет закрашенный. Все, кнопка готова. Теперь нужно вернуться от редактирования кнопки к редактированию основной сцены. Для этого под линейкой времени надо отыскать серую полосу, на которой расположены имена клипов, редактируемых вами сейчас.

Например, надпись

Scene 1    Clip 1    Clip 5

означает, что вы редактируете Clip 5, который является частью Clip 1, который, в свою очередь, лежит на Scene 1. Так вот, вам надо щелкнуть мышью на надписи 2 и вы тут же вернетесь к ее редактированию.

Заканчиваем анимацию

Ну что ж, еще немного, и можно будет смотреть кино. Хотя нет: мы снова кое-что забыли. Видите ли, кнопку-то мы сделали, но воспользоваться ею мы не сможем, ибо как только мы попадем на 25 кадр и мельком увидим кнопку, как тут же перейдем на 26 кадр и нажать на нашу, созданную таким кропотливым трудом кнопочку, мы не успеем. Значит нам нужно в 25 кадре "остановиться, оглянуться".

Чтобы все происходило так, как нам надо, следует выделить на панели Actions 25 кадр и, убедившись, что на титульном поле панели написано: " Actions - Frame ", написать в текстовом редакторе следующий код:

stop();

Возвращаемся на 26 кадр. Давайте нарисуем на правом краю рабочего поля, напротив надписи "Hello, World!", чудище с широко открытой зубастой пастью. Для рисования следует взять Tools \ Pencil Tool, а в разделе Options (этот раздел находится в самом низу панели Tools) выбрать Ink, т.е. выбрать такой режим рисования линии, когда не происходит ни сглаживания нарисованной линии (опция Smooth ), ни ее выпрямления (опция Straighten ); при опции Ink, как нарисовали - так и будет. Хорошо бы это чудище закрасить. Возьмите для этого инструмент Paint Bucket Tool. Обратите внимание на раздел панели Tools, который называется Color, а в нем, в свою очередь есть опция Fill Color, там вы подберете подходящий цвет заливки. Еще ниже имеются опции, где, нажав на левую пиктограммку, желательно выбрать модификатор Close Large Gaps. Вот теперь можно кликнуть по чудищу курсором, дабы оно залилось все выбранным вами цветом.

Нарисовали? Теперь превратим чудище из набора графических примитивов в клип. А точнее, сделаем на основе этой графики символ типа Movie Сlip и его экземпляр. Выделите чудище целиком, кликните на нем правой кнопкой мыши, на всплывающем меню выберите пункт Convert to Symbol, а затем в разделе Behavior выберите режим Movie Clip и нажмите OK. На панели Properties в верхнем левом углу присвойте нашему клипу имя - в том элементе редактирования, где в угловых скобках написано: " Instance Name ". Хорошо бы его назвать kuzdra, помните знаменитую фразу: "Глокая куздра штеко будланула бокра и кудрячит бокренка"? Мы подозреваем, что нарисованное вами чудище чем-то похоже на эту куздру. Так и напишите kuzdra, без кавычек.

Нажмите F9, чтобы зайти на панель Action, и, убедившись, что вы действительно на панели " Action - movie clip ", напишите следующий код:

onClipEvent (mouseDown) {
this._x -= 15;
}

Все! Готово! Нажимайте Сtrl+Enter. Ваш ролик самостоятельно будет проигрываться 2 секунды, а затем вы сами сможете с ним поиграться. Нажмите на надпись "Hello World!", справа вы должны увидеть вашу куздру, которая на каждый клик правой клавишей мышки в любом месте экрана, в том числе и на кнопке, должна передвигаться на 15 пикселов влево. Так, кликая мышкой, можно довести куздру до самой надписи, пока надпись не скроется в ее пасти. Может получиться и так, что надпись не будет закрываться куздрой, а окажется поверх нее, тогда надо предпринять следующее: зайти на 26 кадр, выделить надпись, и выполнить команду Modify \ Arrange \ Send to Back (того же самого можно добиться, нажав Ctrl+Shift+Down ). В результате поменяется надпись переместится на задний план. Также для упорядочения наложения объектов можно было воспользоваться механизмом слоев. Новые слои удобно создавать при помощи самой левой из маленьких кнопочек снизу на панели Timeline (всплывающая подсказка скажет про нее: " Insert Layer "). Так что мы могли нарисовать куздру на слое 2, а, так как каждый новый слой автоматически помещается над предыдущим, то все что нарисовано на новом слое, закрывает то, что находится на нижних слоях. Точнее, перекрывать что-либо могут только расположенные в слоях рисунки, пустые же слои абсолютно прозрачны и не закрывают ничего.

Ну, вот, наконец-то мы выполнили 3 пункт нашей программы. Переходим к пункту четвертому.

Movie Explorer

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

Для этого воспользуемся панелью Movie Explorer, попасть на которую можно, нажав комбинацию клавиш Alt + F3. (ниже показан возможный вид этой панели - не для созданной нами анимации про куздру, а для другого простого клипа ).

И посмотрите только, какая красота открывается нашему взору! Здесь можно увидеть все, что есть "за душой" у каждого кадра. Конечно, если вы видите только одну надпись - Scene 1, наши восторги вас удивляют. В таком случае, нажимайте последовательно на кнопки расположенные вверху панели, правее надписи Show, и перед вами постепенно возникнет поистине живописная картина. Кадры, слои, объекты, текстовые поля, фрагменты кода - все содержимое вашего ролика представлено в виде аккуратной древовидной структуры, все интересующие элементы которой вы можете рассмотреть максимально подробно.

Без панели Movie Explorer не обойтись, если вам нужно разобраться в чужом ролике. В этом случае особенно удобно то, что структуру ролика, представленную в виде дерева, можно распечатать. Для этого кликните правой клавишей мышки на той части панели, где изображено дерево (кстати, она называется Display List ), и в самой нижней части всплывающего меню выберите пункт Print. Помимо этого пункта, в появившемся всплывающем меню имеется масса других столь же полезных, большую часть которых вам стоит изучить самостоятельно. Мы же, боясь утомить вас излишней опекой, коснемся только двух.

Если вы выделили на Display List какой-то участок дерева, то пункт первый - Go to Location - перекинет вас на рабочее поле соответствующего кадра. Если же вы выделили строку типа " Actions for Symbol 2 " и у вас была открыта панель Actions, то, выбрав пункт Go to Location, вы тут же сможете корректировать код соответствующий именно Symbol 2. Между прочим, все можно ускорить, если просто дважды кликнуть правой клавишей мышки по интересующему вас участку дерева - это действие соответствует выбору пункта Go to Location.

А вот еще один интересный пункт меню - Find in Library. Выделите строку дерева, где написано Symbol 1, а теперь выберите этот пункт. Вы оказались в библиотеке, где имеется всего два символа, но зато они сотворены вашими руками, более того, экземпляры ваших символов вы можете перетаскивать на рабочее поле прямо из библиотеки в любом количестве. Если вы захотите что-либо отредактировать в символе, то достаточно дважды кликнуть на нем - и вы окажетесь в окне редактирования. Все изменения, которые вы произведете в символе (образце), отразятся на всех экземплярах, в то время как изменения, произведенные в каком-либо экземпляре, никак не повлияют ни на символ, ни на остальные экземпляры.

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