Опубликован: 07.11.2006 | Доступ: свободный | Студентов: 3398 / 338 | Оценка: 3.94 / 3.71 | Длительность: 37:11:00
Лекция 2:

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

Реализация подходов на практике

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

Обозреватель изображений

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

  1. Откройте новый фильм с разрешением (550x400 пикселей) и затем в Property Inspector установите частоту кадров на значение 31.
  2. Импортируйте фотографии, находящиеся в файлах на компакт-диске, прилагаемом к книге (001.jpg - 009.jpg), и преобразуйте каждый из них в фильм с левым верхним углом в качестве точки закрепления, назвав их соответственно по порядку именами 001-009.


  3. Теперь нужно дать имена всем фильмам с изображениями. С помощью Property Inspector присвойте им имена инстансов с c1 по c9.
  4. Расположите рисунки так, чтобы они прилегали друг к другу в порядке 3x3, и, выделив все рисунки, преобразуйте выделенную область в фильм с именем holder, указав точку закрепления в левом верхнем углу.

    Итак, теперь у нас на рабочем месте есть инстанс holder в корневой временной диаграмме. Мы добавим движение, переместив фильм holder под маску так, чтобы нужный рисунок оказался на нужной позиции.

  5. Выделив фильм holder, используйте Property Inspector, чтобы задать ему имя инстанса holder и указать его значения X и Y, установив их на 0,0. После этого точка закрепления будет размещена в левом верхнем углу рабочего места. Наконец, назовите текущий слой 'pictures'.
  6. Нам нужно будет создать маску, поэтому добавьте новый слой над слоем pictures и пометьте его как маску.
  7. Нарисуйте прямоугольник 200x240 пикселей любого цвета и с помощью Property Inspector задайте значения X и Y, равные 180,89.
  8. Преобразуйте выделенный прямоугольник в фильм с именем maskSquare, убедившись, что точка закрепления находится в левом верхнем углу. Наконец, с помощью Property Inspector дайте фильму maskSquare имя инстанса - maska.

  9. Теперь нужно добавить некоторый код, чтобы сделать прямоугольник маской. Создайте новый слой с именем scripts и в новом слое откройте панель Actions, чтобы добавить следующий код:
    holder.setMask (maska);

    Посредством этого выражения фильм внутри скобок (maska) становится маской для фильма, который был вызван методом (holder). Если сейчас запустить фильм, то станет видно, что под маской будут находиться только те части holder (набора из девяти рисунков), которые просвечиваются, а остальные будут затемнены.

  10. Сейчас мы создадим кадр для прозрачной области посредством добавления двух новых слоев, содержащих прямоугольники, один значительно больше другого. Добавьте два новых слоя под имеющимися у вас слоями и назовите их background1 и backgruond2. Слои во временной диаграмме будут находиться в следующем порядке:

  11. Далее, на слое background1 нарисуйте светло-серый прямоугольник 202x202 пикселя и с помощью Property Inspector задайте его значения X и Y, равные 179,88. Теперь на слое background2 нарисуйте другой серый прямоугольник более темным цветом и размером 204x244, задав для него значения X и Y, равные 178,87. Это будет границей наших фильмов.

    Вы можете добавить любые другие нужные вам изображения на фоновые слои.

  12. Чтобы привести в движение фильм holder, мы будем использовать функцию slide, созданную ранее. Добавьте следующий код в слой scripts над только что вставленной вами строкой кода:
    speed = 4;
    MovieClip.prototype.slideTo = 
     function(x, y, speed, callbackObj, callbackFunc) {
      Var mc_control
      if (this.slideControl) {
        mc_control = this.slideControl;
      }
      else {
        mc_control = this.createEmptyMovieClip 
         ("slideControl" , this. depth++) ;
      }
      mc_control.targetX = x;
      mc_control.targetY = y;
      mc_control.speed = speed;
      mc_control.callBackObj = callBackObj;
      mc_control.callBackFunc = callBackFunc;
    
      mc_control. onEnterFrame = function() {
        this._parent._x += (this.targetX-this._parent._x) /this.speed;
        this._parent._y += (this.targetY-this._parent._y) /this.speed;
        if (Math.abs(this.targetX-this._parent._x)<0.2 
          && Math.abs(this.targetY-this._parent._y)<0.2) {
          this._parent._x = this.targetX;
          this._parent._y = this.targetY;
          this.callBackObj[this.callBackFunc](this._parent);
          this.removeMovieClip();
        }
      };
    };
    function slideDone(mc) {
      trace("movieClip "+mc+" has finished moving");
    }

    Для выполнения этого кода мы создадим несколько кнопок. Вместо того чтобы динамически создавать кнопки с использованием createEmptyMovieClip и createTextField (эти подходы мы рассмотрим позднее), мы создадим символ вручную и затем динамически применим его.

  13. Создайте новый фильм и назовите его butt. Выделите фильм в Library и щелкните на белом значке меню вверху панели заголовка Library. В меню выберите параметр Linkage:, чтобы открыть окно Linkage Properties.
  14. Отметьте поле Export for ActionScript, присвойте символу идентификатор butt и нажмите клавишу OK.

  15. Теперь вы будете находиться в корневом слое фильма butt. Разместите поле Dynamic Text внутри фильма и дайте ему имя инстанса tf с помощью Property Inspector. Размер текста нашего поля равен 9, шрифт - Arial, без встроенных шрифтов.
  16. Для автоматического добавления кнопок нам нужно добавить следующий код в слой scripts нашей корневой временной диаграммы (под уже имеющимся кодом).
    holder.setMask(maska);
    for (var i = 1; i<=9; i++) {
      var mc_control = _root.attachMovie("butt", "butt"+i, i);
      mc_control._x = 175+i*9;
      mc_control._y = 375;
      mc_control.mc = this.holder["c"+i] ;
      mc_control.tf.text = i;
    }

    Этот код циклически выполняется для каждого фильма с фотографией и добавляет кнопку. В нем используется итератор 'i' для установки текстового значения поля 'tf', поэтому в поле появятся числа от 1 до 9. В дополнение к этому, используется значение 'i' для установки конечного фильма для каждой кнопки (несмотря на то, что butt является фильмом, этот объект будет кнопкой, так как мы будем присваивать ему событие onPress ). Число 9 в конце четвертой строки кода контролирует расстояние между всеми фильмами-кнопками.

    Перед присвоением события onPress нам нужно решить, какое именно действие будет выполняться при нажатии кнопки, так же как и место, в которое должен переместиться holder для корректного отображения каждой фотографии под маской.

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

    (maska._x-300, maska._y-300);

    Теперь, если мы обратимся к координатам _x и _y любого из наших фильмов с изображениями, то получим координаты фильма внутри holder. Следовательно, можно сказать, что для того, чтобы каждый фильм был расположен строго под маской, нам необходимо перемещать holder на следующее место:

    (maska._x-mc._x, maska._y-mc._y);
  17. Итак, теперь мы можем построить функцию onPress для наших кнопок:
    for (var 1 = 1; i<=9; i++) {
      var mc_control = _root.attachMovie("butt" , "butt"+i, i);
      mc_control._x = 175+i*9;
      mc_control._y = 295;
      mc_control.mc = this.holder["c"+i] ;
      mc_control.tf.text = i;
      mc_control.onPress = function() {
        var x = this._parent.maska._x-this.mc._x;
        var у = this._parent.maska._y-this.mc._y;
        this._parent.holder.slideTo(x, y, this._parent.speed, this._parent, "slideDone") ;
      };
    }

Вызов функции slideTo происходит таким же образом, как и ранее, с использованием показанного ранее вычисления для указания координат X и Y конечной точки скольжения. Hам необязательно записывать значения X и Y в переменные, поэтому мы можем убрать из кода соответствующую его часть и выполнять вычисления внутри вызова функции.

for (var i = 1; i<=9; i++) {
  var mc_control = _root.attachMovie("butt", "butt"+i, i);
  mc_control._x = 175+i*9;
  mc_control._y = 295;
  mc_control.mc = this.holder["c"+i] ;
  mc_control.tf .text = i;
  mc_control.onPress = function() {
    this._parent.holder.slideTo(this._parent.maska._x-this.mc._x, this._parent.maska._y-this.mc._y,
     this._parent.speed, this._parent, "slideDone");
  };
}

Сохраните фильм в файле pictureMask.fla. При его запуске вы увидите, что при скольжении каждого рисунка на его позицию происходит регистрация происходящего в окне Output. Сейчас для нас это не имеет значения, однако позже мы разберемся, как использовать эту возможность для вызова какого-либо события, например, текстового эффекта. Это лишь однa из возможных применений этого окна. Однако этот вид управления также может быть использован для вывода некоторого пояснительного текста, так, чтобы рисунки являлись фоном интерфейса, или для запуска анимации. Необходимо заметить, что мы управляем движением, которое сами же и инициировали. Мы знаем, когда оно начинается, и можем быть оповещены о его завершении, а это означает, что оно может стать частью цепи событий.

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

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

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

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

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