Опубликован: 07.11.2006 | Уровень: специалист | Доступ: платный
Лекция 2:

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

Инициализация движения щелчком мыши

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

  1. Используя настройки кадра, примененные в предыдущих примерах, воспользуйтесь панелью Actions для добавления следующего кода в кадр 1 слоя script:
    var speed = 4;
    // set up target variables
    ball_mc.targetX = 0
    ball_mc.targetY = 0
    
    ball_mc.moveToMouse = function() {
      this._x += (targetX-this._x)/speed;
      this._y += (targetY-this._y)/speed;
    };
    
    triggerMotion = function() {
      // reset target variables on click
      targetX = _xmouse;
      targetY = _ymouse;
      // set the movieclip in motion
      this.onEnterFrame = this.moveToMouse;
    }
    ball_mc.onMouseDown = triggerMotion;

    Можно видеть, что этот ActionScript кардинальным образом отличается от предыдущего ActionScript. Если раньше мы присоединяли функцию непосредственно к управляющему элементу onEnterFrame, то на этот раз мы сначала определяем функцию moveToMouse, и при щелчке мышью выражение this.onEnterFrame указывает на эту функцию и вызывает ее в каждом кадре. Функция сама по себе работает так же, как и прежде, за исключением того, что перемещение происходит не на позицию указателя мыши, а на значения переменных targetX и targetY, являющихся переменными местоположения указателя мыши, значения которых определяются при каждом щелчке мышью пользователем.

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

  2. Сохраните ваш фильм в файле ball motion_03_click to move.fla и запустите его.

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

Добавление следа от движения объекта

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

Дубликат находится по умолчанию на той же позиции, что и исходный фильм. На самом деле, дубликат имеет все те же параметры, что и исходный фильм, такие как alpha, xscale, yscale и т.д., однако у него нет функций onEnterFrame или переменных, которые может содержать исходный фильм. Это одно из отличий от Flash 5, в котором если создавался дубликат фильма с присвоенным событием clipEvent, также создавался дубликат этого события, которое происходило и на дубликате фильма. Мы располагаем каждый дубликат на один уровень выше предыдущего, посредством добавления переменной глубины для '_root', значение которой увеличивается с каждым кадром.

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

  1. Используйте те же настройки, как и в предыдущих примерах, и добавьте следующий ActionScript в ваш фильм:
    var speed = 4;
    
    ball_mc.moveToMouse = function() {
      this._x += (this.targetX-this._x)/this._parent.speed;
      this._y += (this.targetY-this._y)/this._parent.speed;
      this.duplicateMovieClip("dupe"+this._parent.depth,
        this._parent.depth++);
    };
    ball_mc.onMouseDown = function() {
      this.targetX = this._parent._xmouse;
      this.targetY = this._parent._ymouse;
      this.onEnterFrame = this.moveToMouse;
    };
  2. Сохраните фильм в файле ball motion_04_click for trail.fla. Если теперь запустить фильм, вы сразу увидите, как работает это замедление, и заметите, что это очень похоже на то, что было изображено на диаграмме.

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

Игорь Хан
Игорь Хан

у меня аналогичная ситуация. Однако, если взять пример из приложения (ball_motion_04_click for trial.fla) то след остается. при этом заметил, что в моем проекте в поле "One item in library" виден кружок, в то время как в приложенном примере такого кружка нет.

Вопрос знатокам, что не так?

Александр Коргапольцев
Александр Коргапольцев

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

Тамара Ионова
Тамара Ионова
Россия, Нижний Новгород, НГПУ, 2009
Магомед Алисултанов
Магомед Алисултанов
Россия, Волгоград, лицей 2