Управление видеоклипами посредством языка ActionScript
Свойства объекта MovieClip 1. Любой экземпляр видеоклипа во Flash является объектом. Это значит, что у него имеется набор свойств, методов и событий, на которые можно назначить реакцию. Ниже перечислены основные свойства экземпляров видеоклипов.
  • _x, _y — координаты объекта. Расстояние между центральной точкой видеоклипа и левой (верхней) границей рабочего поля, на котором он находится.*
  • _xmouse, _ymouse — расстояние в пикселах между центральной точкой видеоклипа и текущей позицией курсора мыши по горизонтали и по вертикали соответственно.
  • _rotation — определяет величину поворота видеоклипа в градусах.*
  • _xscale, _yscale — ширина (высота) экземпляра видеоклипа, выраженная в процентах от ширины (высоты) исходного символа.*
  • _width, _height — ширина (высота) видеоклипа в пикселах, которая зависит не от размера рабочего поля, а от размера прямоугольной области, которую занимают элементы.*
  • _alpha — степень прозрачности видеоклипа. Значение измеряется в процентах (0 - полностью прозрачен, 100 - абсолютно непрозрачен).*
  • _visible — свойство логического типа, определяет видимость экземпляра видеоклипа (true - виден на экране, false - скрыт).*
  • Color() — цветовые характеристики видеоклипа. Выступает как отдельный объект ActionScript, подробно рассматривается ниже.*
  • _name — имя экземпляра видеоклипа.*
  • _target — возвращает корректную строку, которую можно использовать для ссылки на экземпляр видеоклипа.
  • _droptarget — возвращает имя и абсолютный путь последнего видеоклипа, над которым был отпущен перетаскиваемый видеоклип.
  • _currentframe — номер текущего кадра.
  • _totalframes — общее количество кадров.
  • _framesloaded — количество кадров, которые загружены из сети.

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

Всеми вышеперечисленными свойствами обладает также сам flash-фильм (главная временная шкала). Кроме того, flash-фильм обладает рядом дополнительных свойств:

  • _url — возвращает полный путь к файлу, в котором выполняется действие. Это свойство можно использовать для предотвращения просмотра фильма, если он не находится на определенном сервере.
  • _quality — задает режим визуального воспроизведения фильма. Значение задается строкой: "LOW" - низкое, без устранения контурных неровностей и сглаживания графики, "MEDIUM" - среднее, "HIGH" - высокое, "BEST" - наилучшее. *
  • _focusrect — свойство логического типа, определяет, виден ли желтый прямоугольник вокруг кнопки, когда ей передается фокус посредством нажатия клавиши <TAB>.
Методы объекта MovieClip 2. Ниже перечислены наиболее используемые методы MovieClip
  • startDrag — позволяет пользователю перемещать экземпляр видеоклипа по рабочему полю. Первый параметр указывает, будет ли курсор мыши заблокирован в центре экземпляра. Можно также ограничить область перетаскивания, указав ее координаты. Пример: myMC.startDrag(false, 200, 0, 200, 200).
  • stopDrag — прекращает любое действие startDrag, которое выполняется в данный момент. Пример: myMC.stopDrag().
  • play, stop, gotoAndPlay, gotoAndStop, nextFrame, prevFrame — эти функции, рассмотренные нами ранее, могут рассматриваться как свойства объекта MovieClip и применяться к конкретному экземпляру видеоклипа. Пример: _root.myMC.stop().
  • duplicateMovieClip — создает копию экземпляра видеоклипа, присваивая ей заданное имя. Новый экземпляр размещается на той же временной шкале, что и родительский (создавший его) непосредственно поверх него на указанной глубине (экземпляры с большим значением глубины помещаются над экземплярами с более низкими значениями). Пример: myMC.duplicateMovieClip("myMC_1", 1).
  • createEmptyMovieClip — создает пустой экземпляр видеоклипа. Новый экземпляр размещается непосредственно поверх родительского на указанной глубине (уровне в стеке). Пример: myMC.createEmptyMovieClip("myMC_2", 1).
  • removeMovieClip — удаляет экземпляр видеоклипа, созданный с помощью дублирования. Экземпляр, который был вручную помещен на временную шкалу из библиотеки, удалить нельзя. Пример: myMC_2.removeMovieClip().
  • attachMovie — помещает экземпляр символа из библиотеки на данную временную шкалу. Для каждого присоединяемого экземпляра нужно указать уникальное имя и значение глубины. Кроме того, на этапе разработки необходимо воспользоваться диалоговым окном Linkage Properties, чтобы присвоить символу в библиотеке уникальный идентификатор (используется в качестве первого параметра при вызове метода). Присоединенный экземпляр впоследствии можно удалить методом removeMovieClip. Пример: _root.attachMovie("eye", "eye_1", 1).
  • getDepths — возвращает текущее значение глубины присоединенного или дублированного объекта. Пример: eye_1.getDepths.
  • swapDepths — меняет местами значения глубины двух дублированных или присоединенных экземпляров видеоклипов. Метод удобен для размещения одного экземпляра видеоклипа поверх другого. Пример: eye_1.swapDepths(eye_2).
  • loadMovie — загружает flash-фильм или файл формата .jpg в основной фильм. Является одним из наиболее мощных методов во Flash, так как позволяет разбивать фильмы Flash на несколько меньших компонентов и загружать их при необходимости. Пример: myMC.loadMovie("menu.swf").
  • unloadMovie — позволяет удалять загруженные swf-элементы, когда они становятся ненужными. Пример: myMC.loadMovie().
  • loadVariables — загружает внешние текстовые данные в основной фильм. Данные в текстовом файле должны быть представлены в виде пар "имя переменной/значение". Пример: myMC.loadVariables("info.txt").
  • getBylesLoaded, getBytesTotal — возвращается объем информации (в байтах), который уже загрузился в проигрыватель и полный объем информации соответственно. Пример: x = myMC.getBylesLoaded(); у = myMC.getBytesTotal().
  • hitTest — позволяет определить, находятся ли заданные координаты X и Y в пределах занимаемой экземпляром видеоклипа области. Третий параметр этого метода может принимать значения true (если проверяется попадание нужной точки внутрь рисунка) и false (если нужно проверить только оказывается ли точка с заданными координатами в пределах прямоугольника, ограничивающего экземпляр видеоклипа). Пример: b = myMC.hitTest(100, 100, true). В качестве параметра может быть передан также другой экземпляр видеоклипа и тогда метод проверяет, не "столкнулись" ли два экземпляра (точнее, прямоугольники, их ограничивающие). Пример: b = eye_1.hitTest(eye_2). В обоих случаях метод возвращает логическое значение.
Обработка событий MovieClip 3. Чтобы экземпляр видеоклипа реагировал на нужное событие, необходимо написать обработчик. Обработчик пишется в окне кода панели Actions, при этом нужный экземпляр должен быть выделен. Ниже приведен пример обработчика, который заставляет экземпляр видеоклипа перемещаться вслед за курсором мыши. Ключевое слово this обозначает тот экземпляр, к которому относится код обработчика.

onClipEvent(mouseMove) {
   this._x = _root._xmouse;
   this._y = _root._ymouse;
   updateAfterEvent();
}

Этот обработчик реагирует на событие перемещение курсора мыши. Другие возможные события объекта MovieClip перечисляются ниже.

  • load — происходит, когда экземпляр видеоклипа впервые появляется на рабочем поле или добавляется с помощью методов attachMovie, duplicateMovieClip, а также когда в указанный видеоклип загружается swf-файл.
  • unload — происходит, когда экземпляр видеоклипа исчезает с рабочего поля (после того как был воспроизведен его последний кадр на временной шкале) или когда из указанного видеоклипа выгружается swf-файл.
  • enterFrame — происходит при воспроизведении каждого кадра временной шкалы экземпляра видеоклипа.
  • mouseMove — происходит каждый раз, когда фиксируется движение курсора мыши в любой части рабочего поля. Это событие воспринимают все экземпляры видеоклипов, у которых написан соответствующий обработчик.
  • mouseDown / mouseUp — происходят каждый раз, когда в какой-либо области рабочего поля нажимается / отпускается левая кнопка мыши. Их воспринимают все экземпляры видеоклипов, у которых написан соответствующий обработчик.
  • press / release — происходят каждый раз, когда кнопка мыши нажимается / отпускается над экземпляром видеоклипа.
  • keyDown / keyUp — происходит, когда пользователь нажимает/отпускает клавишу на клавиатуре. Код нажатой клавиши можно получить с помощью метода getCode() объекта Key.
  • data — происходит, когда заканчивается действие методов loadMovie или loadVariables (т.е. полностью загружаются некоторые внешние данные).
Задание 4. Используя обработчик события enterFrame, заставьте экземпляр любого видеоклипа перемещаться влево (сам фильм должен состоять лишь из одного кадра).
Задание 5. Поместите на главную временную шкалу экземпляр любого видеоклипа, а затем добавьте из библиотеки готовых кнопок (Window-->Other Panels-->Common Libraries-->Buttons) три кнопки. Запрограммируйте их таким образом, чтобы при нажатии на первую из них экземпляр видеоклипа увеличивался на 10%, при нажатии на вторую — уменьшался на 10%, а при нажатии на третью — поворачивался на 15%.
Упражнение 6. В этом упражнении нужно создать элемент управления типа "ползунок" и использовать его для изменения свойств объекта.

1. Создайте новый документ. Создайте новый символ типа видеоклип и нарисуйте в нем, например, мордочку. Разместите экземпляр этого видеоклипа на рабочем поле главной временной шкалы и дайте ему какое-нибудь имя (например, face1). Поместите под ним надпись "исходный вариант". К первому кадру временной шкалы добавьте команду

   face1.duplicateMovieClip("face2", 1, {_x:350,_y:150});

Эта команда создает дубликат мордочки по имени face2. В качестве третьего параметра в фигурных скобках можно перечислить начальные значения некоторых свойств нового объекта. Мы указали координаты — чтобы исходный и новый объект не наслаивались друг на друга. Протестируйте. Если все правильно, при запуске фильма должны появиться две мордочки.

2. Нарисуем ползунок. Создайте новый символ видеоклипа. Основой ползунка будет линия длиной ровно 200 пикселей, на концах которой расположены небольшие окружности. Линия должна начинаться точно в центре видеоклипа в точке с координатами (0,0) — там, где крестик. Нарисуйте основу ползунка.

3. В том же видеоклипе создайте новый слой и нарисуйте небольшую плашку — собственно ползунок, который можно перетягивать. На основе этой плашки создайте еще один символ типа видеоклип. Двойным щелчком перейдите в режим редактирования этого символа и с помощью панели Align разместите плашку точно по центру. Вернитесь к ползунку и убедитесь, что плашка располагается посередине (ее горизонтальная координата должна быть 100). Дайте имя экземпляру плашки (например, position).

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

   on (press){
      this.startDrag(true, 0,0,200,0);
      _global.state="down";
   }
   on (release){
      this.stopDrag();
      _global.state="up";
   }

Здесь используется глобальная переменная state, которая будет определять, движется наш ползунок или отпущен. Четыре числовых параметра в методе startDrag не позволят "стащить" ползунок с линейки, ограничив диапазон перемещений.

5. Создайте два экземпляра элемента ползунка на рабочем поле главной временной шкалы. Один из них будет определять прозрачность второй мордочки, а другой — ее масштаб. Дайте им разные имена (например, scaleSlider и alphaSlider).

6. В первом кадре временной шкалы создадим обработчик события enterFrame. Это событие вызывается при воспроизведении каждого нового кадра. Несмотря на то, что в нашем фильме только один кадр, на самом деле он циклически повторяется, а значит, обработчик, который мы напишем, будет постоянно срабатывать со скоростью 12 раз в секунду. Мы возложим на этот обработчик обязанность проверять текущую позицию каждого ползунка и в зависимости от ее значения устанавливать параметры видеоклипа с мордочкой. Код обработчика будет следующим:

   _root.onEnterFrame = function(){
      face2._xscale = scaleSlider.position._x;
      face2._yscale = scaleSlider.position._x;
      face2._alpha = alphaSlider.position._x / 2;
   }

Здесь используется второй способ создания обработчика. Этот код может быть написан в любом месте программы, т.е. не обязательно должен быть связан с экземпляром видеоклипа. Указание на экземпляр, с которым соотносится описываемый обработчик, присутствует в самом начале кода (в данном случае это _root, т.е. речь идет о фильме целиком). К наименованию события добавляется приставка on, а само событие записывается после ключевого слова function.

7. Протестируйте пример. В данный момент при запуске программы дубликат мордочки полупрозрачный. Чтобы изначально он был темным, надо, чтобы ползунок alphaSlider по умолчанию находился в крайней правой позиции. Для этого добавьте к кадру 1 главной временной шкалы команду

   alphaSlider.position._x = 200.

Задание 7. Создайте небольшую детскую игру. В этой игре есть три маленькие фигуры (треугольник, квадрат, круг) и три большие. Ребенок должен перетащить маленькую фигуру на соответствующую ей большую. Если он сделает это правильно, появится надпись "Молодец, съешь конфетку". В противном случае фигура возвращается на место. При создании игры пользуйтесь приведенными ниже подсказками.

1. Начните создание игры с одной фигуры, например, круга. Создайте в библиотеке символ типа видеоклип, содержащий круг. Поместите на рабочее поле два экземпляра этого круга и уменьшите один из них. Большой круг назовите circleBig, маленький — circleSmall.

2. Напишите два обработчика событий для маленького круга. При нажатии на маленьком круге он должен начинать двигаться вслед за курсором мыши, а при отпускании мышки — останавливаться. Протестируйте программу. Должно работать.

3. Создайте видеоклип, содержащий ободряющее сообщение про конфетку. Первый кадр видеоклипа должен быть пустым, а дальше может следовать несколько кадров анимации. К первому кадру добавьте команду stop(), а второму кадру присвойте любую метку (например, start). Поместите экземпляр данного видеоклипа на рабочее поле. Протестируйте. Если все правильно, новый видеоклип никак себя проявлять не должен.

4. А теперь внесите изменения в обработчик события, который реагирует на отпускание кнопки мыши. Программа должна проверять, был ли маленький кружок отпущен над большим. Если да, то необходимо запустить видеоклип с надписью, начиная со второго кадра (кадра с меткой start). В противном случае необходимо вернуть маленький кружок на начальную позицию (координаты начальной позиции кружка можно посмотреть на панели свойств). Дополнительная подсказка: условие проверки правильно записать так:

   if (this._droptarget == "/circleBig").

Объект Mouse 8. В возможности ActionScript включен объект Mouse, который имеет два простых метода:
  • show — делает видимым курсор мыши. По умолчанию курсор мыши появляется в момент воспроизведения фильма
  • hide — делает курсор мыши невидимым. Чтобы курсор стал виден вновь, нужно выполнить метод show.
Упражнение 9. С помощью объекта Mouse можно эмулировать смену курсора мыши. В приведенном ниже примере курсор меняется, когда мышь наводится на объект MovieClip. Выполните его.

1. Создайте новый документ. В библиотеке этого документа создайте символ видеоклипа и назовите его circle. Нарисуйте в первом кадре этого видеоклипа красный круг размера 25x25 пикселей с помощью инструмента Oval.

2. Создайте экземпляр этого символа на рабочем поле. Назовите его circleBIG и установите его размер равным 200x200 пикселей. Переместите его в центр рабочего поля и примените цветовой эффект Tint, чтобы экземпляр принял цвет, отличный от первоначального.

3. Теперь необходимо связать символ Circle из библиотеки документа с экспортируемым фильмов Flash. Щелкните правой кнопкой мыши на символе Circle и выберите из контекстного меню команду Linkage. Установите флажок опции Export for ActionScript и введите имя Circle в поле Identifier. Теперь можно динамически вставлять этот символ в фильм Flash с помощью ActionScript.

4. В первом кадре главной временной шкалы откройте панель Actions и введите следующий код

   circleBIG.onMouseMove = function(){
      if (this.hitTest(_root._xmouse, _root._ymouse, true)){
         if (!(circleSMALL instanceof MovieClip)){
            _root.attachMovie("Circle", "circleSMALL", 1);
         }
         circleSMALL._x = _root._xmouse;
         circleSMALL._y = _root._ymouse;
         Mouse.hide();
         updateAfterEvent();
      } else {
         if (circleSMALL instanceof MovieClip){
            circleSMALL.removeMovieClip();
         }
         Mouse.show();
      }
   }

5. Детально проанализируйте приведенный код. Протестируйте программу.

Объект Color 10. Объект Color языка ActionScript представляет возможности управления внешним видом объекта MovieClip. Основными методами этого объекта являются:
  • setRGB — изменяет значение цветовых составляющих для определенного объекта Color (и в указанном видеоклипе). Этот метод заменяет все цвета в указанном экземпляре на один сплошной RGB-цвет.
  • getRGB — возвращает значения, установленные при последнем выполнении метода setRGB. Используется, если нужно повторно применить определенное смешение цветовых составляющих к новому объекту Color.
Упражнение 10. Приведенное ниже упражнение поможет разобраться в особенностях создания и использования объекта Color. Выполните его.

1. Создайте новый документ, а в библиотеке документа - символ типа видеоклип. Нарисуйте в первом кадре паука. Создайте экземпляр видеоклипа на рабочем поле и назовите его spider_1.

2. Откройте библиотеку стандартных кнопок и подберите любую кнопку, при нажатии на которую будет меняться цвет паука. Перетащите экземпляр этой кнопки на рабочее поле. На панели Actions напишите для нее следующий код:

   on(release){
      spiderFill1 = new Color(_root.spider1);
      spiderFill1.setRGB(0xFF0000);
   }

Во второй строке здесь создается новый объект Color (под названием spiderFill1) и связывается с экземпляром нашего паука. Следующая команда изменяет цветовые составляющие этого объекта. В качестве параметра указывается шестнадцатеричное значение цвета в системе RGB (в данном случае красный цвет), которое обязательно должно начинаться с символов "0x".

Более тонко воздействовать на цвет можно с помощью метода setTransform, который в качестве параметра требует объект типа colorTransformObject. Метод позволяет воздействовать на каждую цветовую составляющую отдельно. Рассмотрение его выходит за рамки данного пособия.


главная | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13