Представление сайта

Движение

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

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

Некоторым читателям эти принципы уже могут быть знакомы, однако мы также будем изучать новые возможности Flash MX, позволяющие обеспечивать движение наиболее простыми и эффективными методами, нежели это было прежде. Чтобы продемонстрировать гибкость Flash, рассмотрим несколько различных типов движения, которое вы, возможно, захотели бы добавить в свои проекты, а также способы его применения. Иногда мы будем использовать ActionScript для получения следующих типов движения:

• уменьшение: уменьшение скорости движения;
• свинг: добавление ускорения и колебания движению;
• покадровое движение: достижение движения с использованием кадров.

Сначала рассмотрим, как можно использовать эти типы движения для перемещения объектов со следом от движения по осям X и Y. Также обратим внимание на то, как применить это движение к другим параметрам, таким как размер объекта.

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

Наконец, остановимся на учебном примере, содержащем несколько картинок, появляющихся в области просмотра при щелчке на кнопке. Подходы, описанные в упражнении, включают в себя создание маски с помощью ActionScript, а также динамическое применение кнопки.

Итак, шутки в сторону! Начнем с рассмотрения покадрового движения.

Уменьшение скорости движения

Первым типом движения, о котором мы бы хотели рассказать, является уменьшение скорости движения: объект сначала движется довольно быстро и постепенно замедляется, пока, наконец, не останавливается, достигнув цели. Этот тип движения, вероятно, наиболее прост в реализации - нужно выяснить, как далеко находится объект от цели и затем переместить объект к цели, разделив дистанцию на части. Итак, если объект находится на расстоянии 100 пикселей от конечной точки, мы можем переместить его на половину этого расстояния, после чего он будет в 50 пикселях от цели, далее - в 25, затем в 12,5 и так далее. Движение при этом будет плавным; ведь мы привыкли наблюдать постепенное замедление объектов, а не прерывистые движения.

На рисунке ниже данное движение показано в действии, причем каждая линия представляет собой кадр перемещения объекта на 200 пикселей.

С каждым кадром расстояние объекта до цели сокращается наполовину. В кадре 1 объект перемещается на 100 пикселей, в кадре 2 - на 50 пикселей, в кадре 3 - на 25 пикселей, затем на 12,5 пикселей, затем на 6,25, затем на 3,125 и так далее.

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

Создание клипа с уменьшением скорости движения

1. Откройте новый файл Flash со значением разрешения по умолчанию (550x400). В Property Inspector установите цвет фона на белый и частоту смены кадров на значение 31 кадр в секунду. (Мы будем использовать эти настройки всегда при создании файла Flash в этой части книги.)
2. Нарисуйте черный круг, преобразуйте его в символ клипа (F8) и затем присвойте клипу имя.
3. Откройте Property Inspector и присвойте инстансу* клипа имя 'ball_mc'.

   Мы используем суффикс ' _mc ' в имени согласно установленным Macromedia преобразованиям имен. Использование этого правила имеет два преимущества: во-первых, это помогает отличать разные типы объектов в коде, а во-вторых, таким образом обеспечивается появление подсказки в коде нужного типа при вводе кода в среде разработки.

   Мы проделали основные действия. Теперь углубимся в процесс работы.
4. Так как в большинстве случаев лучше содержать действия в отдельном слое от остального содержимого, добавьте новый слой под текущим слоем. Лучше всегда давать имена всем используемым слоям. Наши слои мы назвали просто circle и script.
   

   
   
5. Выберите первый кадр первого слоя и откройте панель Actions. Щелкните на маленьком белом значке параметров в правом углу панели и убедитесь, что отмечен параметр Expert Mode. Лучшим способом быстрого ознакомления с кодом является его ввод, это может быть неприятно, но полезно.
6. Итак, перейдем к коду. Нам нужно применить событие к нашему фильму, которое в каждом кадре проверяет, где находится указатель мыши, и затем перемещается за этим указателем. Во Flash 5 это проще всего было бы сделать выделением фильма и прикреплением к нему события onClipEvent (enterFrame).

   Благодаря новой объектной модели, во Flash MX этого можно больше не делать. Мы можем динамически прикреплять события clipEvents к фильмам, что позволит всему или почти всему коду находиться в одном месте, а также позволит манипулировать этими событиями во время выполнения, например, включать и выключать их или изменять какую-либо функциональность.

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

   Введите следующий код в кадр 1 слоя script:

   ball_mc.onEnterFrame = function() {
     this._x += (this._parent._xmouse-this._x) /4 ;
     this._y += (this._parent._ymouse-this._y) /4;
   };

   Этот код сначала создает функцию, которая присваивается управляющему элементу onEnterFrame фильма 'ball_mc'. Код этой функции сначала выясняет, насколько далеко находится объект от указателя мыши, и затем добавляет четверть этого расстояния до позиции фильма. Если вам нужно было бы написать этот код, так сказать, своими словами, то получилось бы следующее: "вычислить разницу между позициями указателя по осям X и Y, затем увеличить позицию X на четверть этого значения".
7. Сохраните ваш фильм в файле ball motion_01.fla и протестируйте его.

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

Добавление переменной скорости движения

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

1. Используя те же предварительные действия, что и в предыдущих примерах, с помощью панели Actions добавьте следующий код в кадр 1 вашего слоя script:

   var speed = 4;
   
   ball_mc.onEnterFrame = function() {
     this._x += (this._parent._xmouse-this._x)/speed;
     this._y += (this._parent._ymouse-this._y)/speed;
   };

   Обратите внимание на то, что внутри функции onEnterFrame слово 'this' ссылается на фильм, которые вы назвали ball_mc, поэтому даже при обращении к переменной скорости из функции нужно вводить this._parent.speed, чтобы оказаться на том уровне, на котором находится фильм. Уровень _root level является уровнем, на котором определена переменная speed.
2. Сохраните ваш фильм как ball motion_02_speed var.fla и запустите его. Движение происходит таким же образом, однако теперь легче внести изменение в код.