WWW.LIB.KNIGI-X.RU
БЕСПЛАТНАЯ  ИНТЕРНЕТ  БИБЛИОТЕКА - Электронные матриалы
 


Pages:     | 1 |   ...   | 5 | 6 || 8 | 9 |   ...   | 13 |

«Программирование на ADOBE ACTIONSCRIPT 3.0 ® ® © Adobe Systems Incorporated, 2008. Все права защищены. Авторские права Программирование на Adobe® ...»

-- [ Страница 7 ] --

Маскированный экранный объект находится под всеми непрозрачными областями экранного объекта, выполняющего роль маски. Например, следующий код создает экземпляр Shape, содержащий квадрат размером 100х100 пикселов, и экземпляр Sprite, содержащий синий круг с радиусом 25 пикселов. При нажатии на круг он задается в качестве маски для квадрата так, что видна лишь та часть квадрата, которая закрыта сплошной частью круга. Иными словами, виден будет только красный круг.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 327 Программирование отображаемого содержимого // This code assumes it's being run within a display object container // such as a MovieClip or Sprite instance.

import flash.display.Shape;

// Draw a square and add it to the display list.

var square:Shape = new Shape();

square.graphics.lineStyle(1, 0x000000);

square.graphics.beginFill(0xff0000);

square.graphics.drawRect(0, 0, 100, 100);

square.graphics.endFill();

this.addChild(square);

// Draw a circle and add it to the display list.

var circle:Sprite = new Sprite();

circle.graphics.lineStyle(1, 0x000000);

circle.graphics.beginFill(0x0000ff);

circle.graphics.drawCircle(25, 25, 25);

circle.graphics.endFill();

this.addChild(circle);

function maskSquare(event:MouseEvent):void { square.mask = circle;

circle.removeEventListener(MouseEvent.CLICK, maskSquare);

} circle.addEventListener(MouseEvent.CLICK, maskSquare);

Экранный объект, выступающий в роли маски, можно перетаскивать и анимировать, а также динамически изменять его размер. Внутри одной маски могут использоваться отдельные фигуры. Маскирующий экранный объект не обязательно добавлять в список отображения. Однако если требуется, чтобы масштаб маскирующего объекта изменялся при изменении масштаба рабочей области, или если необходимо включить возможность взаимодействия пользователя с маской (например, управляемое пользователем перетаскивание и изменение размера), маскирующий объект необходимо добавить в список отображения. Фактический zиндекс (порядок расположения слоев) экранных объектов не играет никакой роли, если маскирующий объект добавлен в список отображения. Маскирующий объект будет появляться на экране только в виде маски. Если маскирующий объект является экземпляром MovieClip с несколькими кадрами, он воспроизводит все кадры на временной шкале. То же самое происходит и тогда, когда он не выступает в роли маски.

Удалить маску можно, присвоив свойству mask значение null:

// remove the mask from mySprite mySprite.mask = null;

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

О маскировании шрифтов устройства Экранный объект можно использовать в целях маскирования текста, набранного шрифтом устройства. Когда экранный объект используется для маскирования текста, набранного шрифтом устройства, прямоугольное ограничивающее поле маски используется в качестве маскирующей фигуры. Иными словами, если в среде разработчика создать непрямоугольную маску экранного объекта для текста со шрифтом устройства, то маска в SWF-файле приобретает форму прямоугольной ограничительной рамки маски, а не форму самой маски.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 328 Программирование отображаемого содержимого Маскирование альфа-канала Маскирование альфа-канала поддерживается, если и маска, и маскированные экранные объекты используют кэширование растровых изображений, как показано ниже.

// maskShape is a Shape instance which includes a gradient fill.

mySprite.cacheAsBitmap = true;

maskShape.cacheAsBitmap = true;

mySprite.mask = maskShape;

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

В следующем примере в рабочую область загружен внешний файл с изображением. Это изображение (точнее говоря, экземпляр Loader, в который оно загружено) становится маскированным экранным объектом. Овал с градиентом (центр, окрашенный сплошным черным цветом, который переходит к прозрачному по краям) нарисован поверх изображения; это маска альфа-канала. У обоих экранных объектов отключено кэширование растровых изображений. Овал задан в качестве маски для изображения, и это придает ему способность к перетаскиванию.

// This code assumes it's being run within a display object container // such as a MovieClip or Sprite instance.

import flash.display.GradientType;

import flash.display.Loader;

import flash.display.Sprite;

import flash.geom.Matrix;

import flash.net.URLRequest;

// Load an image and add it to the display list.

var loader:Loader = new Loader();

var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg");

loader.load(url);

this.addChild(loader);

–  –  –

// Set cacheAsBitmap = true for both display objects.

loader.cacheAsBitmap = true;

oval.cacheAsBitmap = true;

// Set the oval as the mask for the loader (and its child, the loaded image) loader.mask = oval;

// Make the oval draggable.

oval.startDrag(true);

Анимация объектов Анимация — это процесс приведения объектов в движение или изменение объектов с течением времени.

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

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

Чтобы создать анимацию на основе сценариев, необходимо создать код ActionScript, в котором определенное действие повторяется с течением времени и при каждом повторении происходит обновление экрана.

Например, представьте, что необходимо создать простую анимацию (например, запустить по экрану мяч).

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

С практической точки зрения имеет смысл синхронизировать частоту кадров в анимации на основе сценариев и SWF-файла (иными словами, заставить анимацию меняться с каждым новым кадром), поскольку это определяет частоту обновления экрана в AIR или проигрывателе Flash Player. У каждого экранного объекта существует событие enterFrame, которое отправляется в соответствии с частотой кадров SWF-файла (по одному событию на кадр). Большинство разработчиков, создающих анимацию на основе сценариев, используют событие enterFrame в качестве средства для создания повторяющихся действий. Можно написать код, который ожидает появления события enterFrame и передвигает анимированный мяч на определенное расстояние в каждом кадре. По мере обновления экрана (в каждом кадре) этот мяч будет отрисовываться на новой позиции, что вызывает эффект движения.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 330 Программирование отображаемого содержимого Примечание. Другим методом выполнения повторяющегося действия является использование класса Timer.

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

При этом необходимо выбрать маленький промежуток времени (долю секунды). Дополнительные сведения об использовании класса Timer см. в разделе «Управление временными интервалами» на странице 146.

В следующем примере в рабочей области создается круговой экземпляр Sprite под именем circle. Когда пользователь щелкает по кругу, начинает выполняться последовательность из анимации на основе сценария.

Благодаря этому яркость circle снижается (значение свойства alpha уменьшается) до тех пор, пока он не станет совсем прозрачным:

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

// draw a circle and add it to the display list var circle:Sprite = new Sprite();

circle.graphics.beginFill(0x990000);

circle.graphics.drawCircle(50, 50, 50);

circle.graphics.endFill();

addChild(circle);

// When this animation starts, this function is called every frame.

// The change made by this function (updated to the screen every // frame) is what causes the animation to occur.

function fadeCircle(event:Event):void { circle.alpha -=.05;

if (circle.alpha = 0) { circle.removeEventListener(Event.ENTER_FRAME, fadeCircle);

} } function startAnimation(event:MouseEvent):void { circle.addEventListener(Event.ENTER_FRAME, fadeCircle);

} circle.addEventListener(MouseEvent.CLICK, startAnimation);

Когда пользователь щелкает круг, функция fadeCircle() регистрируется в качестве прослушивателя события enterFrame. Это означает, что она вызывается один раз за кадр. Эта функция снижает яркость circle путем изменения его свойства alpha. Один раз за кадр свойство alpha круга уменьшается на 0,05 (5 %), а экран обновляется. В итоге, когда значение alpha доходит до 0 (circle полностью прозрачен), функция fadeCircle(), играющая роль прослушивателя событий, удаляется, и анимация завершается.

Тот же самый код можно использовать, например, для создания анимированного движения вместо ослабления яркости. Путем замены свойства alpha другим свойством в функции, которая является прослушивателем события enterFrame, это свойство будет анимировано вместо нее. Например, замена строки circle.alpha -=.05;

–  –  –

приведет к анимации свойства x, что приведет к перемещению круга вправо через рабочую область. Условие, завершающее анимацию, можно изменить так, чтобы она завершалась (то есть, чтобы отменить регистрацию прослушивателя enterFrame) при достижении нужной координаты по оси x.

Динамическая загрузка содержимого для показа

В приложение на языке ActionScript 3.0 можно загрузить любые внешние активы для показа:

• SWF-файл, разработанный в ActionScript 3.0, — этот файл может относиться к классу Sprite, MovieClip или любому классу, являющемуся расширением Sprite.

• Файл изображения — файлы в форматах JPG, PNG и GIF.

• Файл AVM1 SWF — это SWF-файл, созданный на языке ActionScript 1.0 или 2.0.

Загрузка этих активов производится с помощью класса Loader.

Загрузка экранных объектов Объекты Loader используются для загрузки SWF-файлов и файлов графики в приложение. Класс Loader — это подкласс класса DisplayObjectContainer. Объект Loader может содержать в своем списке отображения только один дочерний экранный объект, который представляет собой загружаемый SWF-файл или файл графики.

При добавлении объекта Loader в список отображения (как в следующем коде) в него после завершения загрузки добавляется также загруженный дочерний экранный объект:

var pictLdr:Loader = new Loader();

var pictURL:String = "banana.jpg" var pictURLReq:URLRequest = new URLRequest(pictURL);

pictLdr.load(pictURLReq);

this.addChild(pictLdr);

–  –  –

import flash.display.*;

import flash.net.URLRequest;

import flash.events.Event;

var container:Sprite = new Sprite();

addChild(container);

var pictLdr:Loader = new Loader();

var pictURL:String = "banana.jpg" var pictURLReq:URLRequest = new URLRequest(pictURL);

pictLdr.load(pictURLReq);

pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);

function imgLoaded(event:Event):void { container.addChild(pictLdr.content);

} ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 332 Программирование отображаемого содержимого Просмотр хода загрузки После начала загрузки файла создается объект LoaderInfo. Объект LoaderInfo предоставляет информацию о процессе загрузки, URL-адресах загружающего объекта и загружаемого содержимого, общем количестве байт для носителя, а также номинальной высоте и ширине содержимого. Объект LoaderInfo также отправляет события, позволяющие следить за ходом загрузки.

На следующей диаграмме показаны различные применения объекта LoaderInfo (как экземпляр основного класса SWF-файла, как объект Loader и как объект, загруженный объектом Loader):

–  –  –

Объект LoaderInfo можно вызвать как свойство одновременно объекта Loader и загруженного экранного объекта. Как только начнется загрузка, объект LoaderInfo можно вызвать с помощью свойства contentLoaderInfo объекта Loader. По завершении загрузки экранного объекта объект LoaderInfo можно также вызвать в качестве свойства загруженного экранного объекта с помощью свойства loaderInfo экранного объекта. Свойство loaderInfo загруженного экранного объекта относится к тому же объекту LoaderInfo, что и свойство contentLoaderInfo объекта Loader. Другими словами, объект LoaderInfo совместно используется загруженным объектом и загрузившим его объектом Loader.

Чтобы вызвать свойства загруженного содержимого, необходимо добавить прослушиватель событий в объект

LoaderInfo так, как это сделано в следующем коде:

import flash.display.Loader;

import flash.display.Sprite;

import flash.events.Event;

var ldr:Loader = new Loader();

var urlReq:URLRequest = new URLRequest("Circle.swf");

ldr.load(urlReq);

ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);

addChild(ldr);

function loaded(event:Event):void { var content:Sprite = event.target.content;

content.scaleX = 2;

}

–  –  –

Указание контекста загрузки При загрузке внешнего файла в Flash Player или AIR с помощью метода load() или loadBytes() класса Loader можно при желании указать параметр context. Этот параметр является объектом LoaderContext.

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

• checkPolicyFile: используйте это свойство только при загрузке файла изображения (а не SWF-файла).

Если этому свойству задано значение true, объект Loader проверяет наличие файла политики на исходном сервере (см. раздел «Элементы управления веб-сайта (файлы политики)» на странице 741). Это необходимо выполнить только для содержимого, взятого из доменов, которые отличаются от домена SWF-файла, содержащего объект Loader. Если сервер дает разрешение на доступ к домену Loader, ActionScript из SWFфайлов в домене Loader может вызывать данные в загруженном изображении. Иными словами, можно использовать команду BitmapData.draw() для доступа к данным в загруженном изображении.

Учтите, что SWF-файл из доменов, которые отличаются от домена объекта Loader, могут вызвать Security.allowDomain(), чтобы разрешить определенный домен.

• securityDomain: используйте это свойство только при загрузке SWF-файлов (но не изображений). Его следует указывать для SWF-файла из домена, который отличается от домена файла, содержащего объект Loader. Когда указывается этот параметр, Flash Player проверяет наличие файла политики. Если он существует, SWF-файлы из доменов, разрешенных файлом междоменной политики, могут применять загруженное содержимое SWF в разных сценариях. В качестве данного параметра можно указать flash.system.SecurityDomain.currentDomain.

• applicationDomain: используйте это свойство только при загрузке SWF-файлов, написанных на языке ActionScript 3.0 (а не изображений или SWF-файлов, написанных на ActionScript 1.0 или 2.0). При загрузке этого файла можно указать, чтобы файл был включен в тот же домен приложений, что и объект Loader, присвоив параметру applicationDomain значение flash.system.ApplicationDomain.currentDomain.

Разместив загруженный SWF-файл в том же домене приложений, можно вызывать его классы напрямую.

Это может оказаться полезным, если загружается SWF-файл, содержащий встроенные мультимедийные файлы, доступ к которым может осуществляться по связанным именам классов. Дополнительные сведения см. в разделе «Использование класса ApplicationDomain» на странице 685.

Вот пример проверки наличия файла политики при загрузке растрового изображения из другого домена:

var context:LoaderContext = new LoaderContext();

context.checkPolicyFile = true;

var urlReq:URLRequest = new URLRequest("http://www.[your_domain_here].com/photo11.jpg");

var ldr:Loader = new Loader();

ldr.load(urlReq, context);

Вот пример проверки наличия файла политики при загрузке SWF-файла из другого домена в целях размещения файла в той же изолированной программной среде, что и объект Loader.

Кроме того, этот код добавляет классы в загруженном SWF-файле в тот же домен приложения, что и у объекта Loader:

var context:LoaderContext = new LoaderContext();

context.securityDomain = SecurityDomain.currentDomain;

context.applicationDomain = ApplicationDomain.currentDomain;

var urlReq:URLRequest = new URLRequest("http://www.[your_domain_here].com/library.swf");

var ldr:Loader = new Loader();

ldr.load(urlReq, context);

–  –  –

Пример: SpriteArranger Образец приложения SpriteArranger создан на основе образца приложения Geometric Shapes, имеющего отдельное описание (см. раздел «Пример: GeometricShapes» на странице 134).

Образец приложения SpriteArranger иллюстрирует ряд понятий, используемых при операциях с экранными объектами:

• Расширение классов экранного объекта

• Добавление объектов в список отображения

• Расположение экранных объектов по слоям и работа с контейнерами экранного объекта

• Ответ на события экранного объекта

• Использование свойств и методов экранных объектов Чтобы загрузить файлы приложения для этого образца, перейдите на сайт www.adobe.com/go/learn_programmingAS3samples_flash. Файлы приложения SpriteArranger находятся в папке Examples/SpriteArranger. Приложение состоит из следующих файлов.

–  –  –

Определение классов SpriteArranger Приложение SpriteArranger дает пользователю возможность добавить ряд экранных объектов на экранный «холст».

Класс DrawingCanvas определяет область рисования и тип контейнера для экранного объекта, в который пользователь может добавить экранные фигуры. Эти экранные фигуры являются экземплярами одного из подклассов класса GeometricSprite.

Класс DrawingCanvas Класс DrawingCanvas является расширением класса Sprite, и это наследование определено в объявлении класса DrawingCanvas следующим образом:

public class DrawingCanvas extends Sprite Класс Sprite представляет собой подкласс классов DisplayObjectContainer и DisplayObject, а класс DrawingCanvas использует методы и свойства этих классов.

Метод конструктора DrawingCanvas() настраивает объект Rectangle (bounds), который является свойством, используемым позднее при отрисовке контура холста.

После этого он вызывает метод initCanvas() следующим образом:

this.bounds = new Rectangle(0, 0, w, h);

initCanvas(fillColor, lineColor);

Как показано в следующем примере, метод initCanvas() определяет различные свойства объекта

DrawingCanvas, которые были переданы в качестве аргументов функции конструктора:

this.lineColor = lineColor;

this.fillColor = fillColor;

this.width = 500;

this.height = 200;

Затем метод initCanvas() вызывает метод drawBounds(), который отрисовывает холст с помощью свойства graphics класса DrawingCanvas. Свойство graphics унаследовано из класса Shape.

–  –  –

В зависимости от взаимодействия пользователя с приложением вызываются следующие дополнительные методы класса DrawingCanvas:

• методы addShape() и describeChildren(), описанные в разделе «Добавление на холст экранных объектов» на странице 336;

• методы moveToBack(), moveDown(), moveToFront() и moveUp(), описанные в разделе «Изменение слоя для экранного объекта» на странице 339;

• метод onMouseUp(), описанный в разделе «Нажатие и перетаскивание экранных объектов» на странице 338.

Класс GeometricSprite и его подклассы Любой экранный объект, который может быть добавлен пользователем на холст, является экземпляром одного из следующих подклассов класса GeometricSprite:

• CircleSprite

• SquareSprite

• TriangleSprite

Класс GeometricSprite является расширением класса flash.display.Sprite:

public class GeometricSprite extends Sprite Класс GeometricSprite включает ряд свойств, являющихся общими для всех объектов GeometricSprite. Они задаются в функции конструктора на основе параметров, переданных этой функции.

Например:

this.size = size;

this.lineColor = lColor;

this.fillColor = fColor;

Свойство geometricShape класса GeometricSprite определяет интерфейс IGeometricShape, который в свою очередь определяет только математические, но не визуальные свойства фигуры. Классы, реализующие интерфейс IGeometricShape, определены в образце приложения GeometricShapes (см.

«Пример:

GeometricShapes» на странице 134).

Класс GeometricSprite определяет метод drawShape(), более подробные описания которого приведены в определениях переопределения для каждого подкласса GeometricSprite. Дополнительные сведения см. в разделе «Добавление на холст экранных объектов» ниже.

Класс GeometricSprite предоставляет также другие методы:

• методы onMouseDown() и onMouseUp(), описанные в разделе «Нажатие и перетаскивание экранных объектов» на странице 338;

• методы showSelected() и hideSelected(), описанные в разделе «Нажатие и перетаскивание экранных объектов» на странице 338.

–  –  –

public function addShape(shapeName:String, len:Number):void { var newShape:GeometricSprite;

switch (shapeName) {

case "Triangle":

newShape = new TriangleSprite(len);

break;

–  –  –

Каждый метод конструктора вызывает метод drawShape(), который использует свойство graphics данного класса (унаследованное из класса Sprite) для отрисовки соответствующей векторной графики.

Например, метод drawShape() класса CircleSprite включает следующий код:

this.graphics.clear();

this.graphics.lineStyle(1.0, this.lineColor, 1.0);

this.graphics.beginFill(this.fillColor, 1.0);

var radius:Number = this.size / 2;

this.graphics.drawCircle(radius, radius, radius);

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

Последняя строка метода addChild() добавляет новый экранный объект в список дочерних объектов экземпляра класса DrawingCanvas, который уже находится в списке отображения. Это приводит к тому, что в рабочей области появляется новый экранный объект.

Интерфейс приложения включает два текстовых поля (selectedSpriteTxt и outputTxt). Свойства текста этих текстовых полей обновляются благодаря информации об объектах GeometricSprite, которые добавлены на холст или выбраны пользователем.

Класс GeometricSprite обрабатывает это задание по предоставлению информации путем переопределения метода toString():

public override function toString():String { return this.shapeType + " of size " + this.size + " at " + this.x + ", " + this.y;

}

–  –  –

Метод describeChildren() класса DrawingCanvas обеспечивает циклическую обработку списка дочерних объектов холста. При этом свойство numChildren (унаследованное из класса DisplayObjectContainer) применяется, чтобы задать предел цикла for.

Он генерирует следующую строку со списком всех дочерних объектов:

var desc:String = "";

var child:DisplayObject;

for (var i:int=0; i this.numChildren; i++) { child = this.getChildAt(i);

desc += i + ": " + child + '\n';

}

Эта строка применяется для задания свойства text текстового поля outputTxt.

Нажатие и перетаскивание экранных объектов Когда пользователь щелкает по экземпляру GeometricSprite, приложение вызывает обработчик событий onMouseDown().

Как указано далее, этот обработчик событий настроен на прослушивание событий нажатия кнопки мыши в функции конструктора класса GeometricSprite:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

Метод onMouseDown() вызывает затем метод showSelected() объекта GeometricSprite.

Если этот метод вызывается для объекта впервые, он создает новый объект Shape с именем selectionIndicator и использует свойство graphics объекта Shape для отрисовки прямоугольника с красной подсветкой следующим образом:

this.selectionIndicator = new Shape();

this.selectionIndicator.graphics.lineStyle(1.0, 0xFF0000, 1.0);

this.selectionIndicator.graphics.drawRect(-1, -1, this.size + 1, this.size + 1);

this.addChild(this.selectionIndicator);

Если метод onMouseDown() вызван уже не в первый раз, он просто задает для фигуры selectionIndicator свойство visible (унаследованное из класса DisplayObject) следующим образом:

this.selectionIndicator.visible = true;

Метод hideSelected() скрывает фигуру selectionIndicator ранее выбранного объекта путем присвоения свойству visible значения false.

Метод обработчика событий onMouseDown() вызывает также метод startDrag() (унаследованный из класса

Sprite), который включает следующий код:

var boundsRect:Rectangle = this.parent.getRect(this.parent);

boundsRect.width -= this.size;

boundsRect.height -= this.size;

this.startDrag(false, boundsRect);

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

Когда пользователь отпускает кнопку мыши, отправляется событие mouseUp. Метод конструктора

DrawingCanvas устанавливает следующий обработчик событий:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 339 Программирование отображаемого содержимого Этот обработчик событий задается для объекта DrawingCanvas, а не для отдельных объектов GeometricSprite.

Это происходит потому, что при перетаскивании объекта GeometricSprite он может оказаться задвинутым за другой экранный объект (другой объект GeometricSprite), когда будет отпущена кнопка мыши. Экранный объект на переднем плане зарегистрирует событие отпускания кнопки мыши (mouse up) в отличие от экранного объекта, перетаскиваемого пользователем. Добавление прослушивателя к объекту DrawingCanvas гарантирует обработку события.

Метод onMouseUp() вызывает метод onMouseUp() объекта GeometricSprite, который в свою очередь вызывает метод stopDrag() объекта GeometricSprite.

Изменение слоя для экранного объекта Пользовательский интерфейс приложения включает кнопки Move Back («Переместить назад»), Move Down («Переместить вниз»), Move Up («Переместить вверх») и Move to Front («Переместить вперед»). Когда пользователь нажимает одну из этих кнопок, приложение вызывает соответствующий метод класса DrawingCanvas: moveToBack(), moveDown(), moveUp() или moveToFront().

Например, метод moveToBack() включает следующий код:

public function moveToBack(shape:GeometricSprite):void { var index:int = this.getChildIndex(shape);

if (index 0) { this.setChildIndex(shape, 0);

} } Этот метод использует метод setChildIndex() (унаследованный из класса DisplayObjectContainer) для размещения экранного объекта на позиции указателя 0 в списке дочерних объектов экземпляра DrawingCanvas (this).

Метод moveDown() действует похожим образом, за исключением того, что он уменьшает позицию указателя для экранного объекта на 1 в списке дочерних объектов экземпляра DrawingCanvas:

public function moveDown(shape:GeometricSprite):void { var index:int = this.getChildIndex(shape);

if (index 0) { this.setChildIndex(shape, index - 1);

} }

Методы moveUp() и moveToFront() аналогичны методам moveToBack() и moveDown().

Глава 14. Использование прикладного программного интерфейса (API) рисования Несмотря на важность импортированных изображений и макетов, набор функциональных возможностей, известный под названием API рисования и позволяющий создавать в ActionScript линии и фигуры, дает пользователю полную свободу и возможность начать работу с чистого листа, на котором можно дать волю фантазии.

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

Основы использования прикладного программногоинтерфейса (API) рисования

Введение в использование прикладного программного интерфейса (API) рисования API-интерфейс рисования — это функция, встроенная в ActionScript, которая позволяет создавать векторную графику (линии, кривые, фигуры, заливки и градиенты) и отображать ее на экране с помощью кода ActionScript. Эти функции обеспечивает класс flash.display.Graphics. С помощью кода ActionScript можно рисовать на любом экземпляре Shape, Sprite или MovieClip, используя свойство graphics, которое определено в каждом из этих классов. (Свойство graphics на самом деле является экземпляром класса Graphics.) Если вы еще не имеете опыта рисования с помощью кода, то можете использовать несколько методов класса Graphics, которые упрощают рисование обычных фигур, таких как круг, эллипс, прямоугольник или прямоугольник со скругленными краями. Их можно рисовать в виде контуров или фигур с заливкой. Когда потребуются расширенные функции, вы сможете воспользоваться и другими методами класса Graphics для рисования линий и квадратичных кривых Безье, которые можно использовать вместе с тригонометрическими функциями класса Math для создания любой необходимой формы.

В проигрыватель Flash Player 10 и Adobe AIR 1.5 добавляет дополнительный API-интерфейс для рисования, который позволяет программно рисовать целые фигуры с помощью единственной команды. Когда вы познакомитесь с классом Graphics и задачами, описанными в разделе «Основы использования APIинтерфейса рисования», переходите к разделу «Использование прикладного программного интерфейса (API) рисования для опытных пользователей» на странице 355, чтобы получить дополнительные сведения об этих дополнительных функциях.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 341 Использование прикладного программного интерфейса (API) рисования Общие задачи API рисования

В данной главе описываются следующие задачи, которые чаще всего выполняются с помощью APIинтерфейса рисования в ActionScript:

• определение стилей линий и заливок для рисования фигур;

• рисование прямых линий и кривых;

• использование методов для рисования фигур, таких как круг, эллипс и прямоугольник;

• рисование линий и заливок градиента;

• определение матрицы для создания градиента;

• использование тригонометрии вместе с API-интерфейсом рисования;

• применение API-интерфейса рисования для создания анимации.

Важные понятия и термины Ниже приводится список важных терминов, с которыми вы столкнетесь в этой главе.

• Точка привязки: одна из двух конечных точек квадратичной кривой Безье.

• Опорная точка: точка, определяющая направление и степень кривизны квадратичной кривой Безье.

Кривая линия никогда не достигает опорной точки, но рисуется так, что к ней направлены ее изгибы.

• Координатное пространство: диаграмма координат, содержащаяся в экранном объекте, на которой располагаются его дочерние элементы.

• Заливка: сплошная внутренняя часть фигуры, контур которой заполнен цветом, либо вся фигура, если у нее нет контура.

• Градиент: цвет, состоящий из постепенного перехода от одного цвета к другому или нескольких другим цветам (в отличие от сплошного цвета).

• Точка: единичный пункт в координатном пространстве. В двумерной координатной системе, используемой в ActionScript, точка определяется положением относительно осей X и Y (координатами точки).

• Квадратичная кривая Безье: тип кривой, определенный специальной математической формулой. Форма кривой этого типа вычисляется на основе позиции точек привязки (конечных точек кривой) и опорной точки, определяющий степень кривизны и направление изгиба.

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

• Обводка: контур фигуры, состоящей из линии и заливки цветом, или линии незаполненной фигуры.

• Перемещение: изменение координат точек при переходе из одного координатного пространства в другое.

• Ось X: горизонтальная ось в двумерной системе координат, используемой в ActionScript.

• Ось Y: вертикальная ось в двумерной системе координат, используемой в ActionScript.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 342 Использование прикладного программного интерфейса (API) рисования Работа с примерами из главы Прорабатывая главу, вы можете самостоятельно тестировать приведенные в ней примеры кодов. Так как эта глава посвящена рисованию визуального содержимого, тестирование кода означает его выполнение и просмотр результатов в созданном SWF-файле. Для тестирования кодов необходимо выполнить следующие действия.

1 Создайте пустой документ Flash.

2 Выберите ключевой кадр на временной шкале.

3 Откройте панель «Действия» и скопируйте код на панель «Сценарий».

4 Запустите программу, выбрав «Управление» «Тестировать ролик».

Результат выполнения кода можно посмотреть в созданном SWF-файле.

Понимание класса Graphics Каждый из объектов Shape, Sprite и MovieClip наделен свойством graphics, являющимся экземпляром класса Graphics. Класс Graphics включает свойства и методы, предназначенные для создания линий, заливок и фигур.

Если для создания содержимого требуется использовать в качестве холста только экранный объект, можно использовать экземпляр Shape. Экземпляр Shape лучше остальных экранных объектов подходит для рисования, поскольку он не имеет служебных данных, связанных с дополнительными функциональными возможностями в классах Sprite и MovieClip. Если требуется, чтобы экранный объект, на котором можно создавать графическое содержимое, также содержал и другие экранные объекты, можно использовать экземпляр Sprite. Дополнительные сведения о правильном выборе экранного объекта для выполнения определенных задач см. в разделе «Выбор подкласса DisplayObject» на странице 309.

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

В результате этого все рисунки ActionScript должны быть созданы с применением тех же операций:

• определения стилей линий и заливок;

• определения начального положения рисунков;

• создания линий, кривых и фигур (при желании перемещения точки рисунка);

• при необходимости завершения создания заливки.

Определение стилей линий и заливок Для создания свойства graphics экземпляра Shape, Sprite или MovieClip прежде всего необходимо определить стиль (цвет и размер линий, цвет заливки), который будет применяться при рисовании. Точно так же, как при использовании инструментов рисования в Adobe® Flash® CS4 Professional или другом приложении, предназначенном для рисования, когда для рисования используется ActionScript, можно рисовать с применением обводки или без нее, а также с применением цвета заливки или без него.

Внешний вид обводки ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 343 Использование прикладного программного интерфейса (API) рисования определяется с помощью метода lineStyle() или lineGradientStyle(). Для создания сплошной линии используется метод lineStyle(). При вызове этого метода самыми распространенными значениями, которые задаются, являются первые три параметра: толщина, цвет и альфа-канал линии. Например, код этой линии говорит фигуре с именем myShape создавать линии толщиной 2 пиксела, красного цвета (0x990000) и со степенью непрозрачности 75 %.

myShape.graphics.lineStyle(2, 0x990000,.75);

По умолчанию значением для параметра альфа-канала является 1,0 (100 %), поэтому можно пропустить этот параметр, если требуется создать полностью непрозрачную линию. Метод lineStyle() также может иметь два дополнительных параметра для хинтовки пикселов и режима масштабирования; дополнительные сведения об использовании этих параметров см. в описании метода Graphics.lineStyle() в справочнике по языку ActionScript 3.0 и компонентам.

Для создания линии градиента используется метод lineGradientStyle(). Описание этого метода см. в разделе «Создание линий и заливок градиента» на странице 346.

Если требуется создать фигуру с заливкой, прежде чем приступить к созданию рисунка, вызовите методы beginFill(), beginGradientFill(), beginBitmapFill() или beginShaderFill(). Самый основной из этих методов, метод beginFill(), имеет два параметра: цвет заливки и (необязательно) альфа-коэффициент цвета заливки.

Например, если требуется создать фигуру со сплошной зеленой заливкой, будет использоваться следующий код (предположим, что создается объект с именем myShape):

myShape.graphics.beginFill(0x00FF00);

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

Как только стиль линий и заливок выбран, далее необходимо указать начальную точку рисунка. Экземпляр Graphics имеет точку рисунка, схожую с отпечатком на листе бумаги кончика пера. Где бы ни находилась точка рисунка, с этого места будет начинаться следующее действие рисования. Объект Graphics изначально начинается с точки рисунка в точке 0, 0 пространства координат объекта, на котором она создается. Чтобы начать рисунок в другой точке, можно перед вызовом одного из методов рисования сначала вызвать метод moveTo(). Это действие аналогично отрыву пера от бумаги и его перемещению в новое положение.

С помощью точки рисунка рисование на месте происходит путем применения серий вызовов методов рисования: lineTo() (для прямых линий) и curveTo() (для кривых линий).

Во время рисования можно в любое время вызвать метод moveTo() для перемещения точки рисунка в новое положение без применения рисования.

Во время рисования, когда цвет заливки уже выбран, можно указать Adobe Flash Player или Adobe® AIR™ завершить заливку, вызвав метод endFill(). Если замкнутая фигура не создана (другими словами, когда при вызове метода endFill() точка рисунка не находится в начальной точке фигуры), то при вызове метода endFill() Flash Player или AIR автоматически замыкают фигуру путем проведения прямой линии из текущей точки рисунка к местоположению, указанному во время самого последнего вызова метода moveTo(). Если заливка уже начата, а метод endFill() не вызван, то вызов метода beginFill() (или одного из других методов заливки) закроет текущую заливку и начнет новую.

–  –  –

myShape.graphics.moveTo(100, 100);

myShape.graphics.lineTo(200, 200);

В следующем примере показано создание красных и зеленых треугольников высотой в 100 пикселов:

var triangleHeight:uint = 100;

var triangle:Shape = new Shape();

// red triangle, starting at point 0, 0 triangle.graphics.beginFill(0xFF0000);

triangle.graphics.moveTo(triangleHeight / 2, 0);

triangle.graphics.lineTo(triangleHeight, triangleHeight);

triangle.graphics.lineTo(0, triangleHeight);

triangle.graphics.lineTo(triangleHeight / 2, 0);

// green triangle, starting at point 200, 0 triangle.graphics.beginFill(0x00FF00);

triangle.graphics.moveTo(200 + triangleHeight / 2, 0);

triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);

triangle.graphics.lineTo(200, triangleHeight);

triangle.graphics.lineTo(200 + triangleHeight / 2, 0);

this.addChild(triangle);

Создание кривых С помощью метода curveTo() создается квадратичная кривая Безье. При этом создается дуга, соединяющая две точки (называемые узловыми точками) и одновременно сгибающаяся по направлению к третьей точке (называемой контрольной точкой). Объект Graphics использует текущую позицию рисования в качестве первой узловой точки. При вызове метода curveTo() задаются четыре параметра: координаты оси x и оси y контрольной точки и координаты оси x и оси y второй узловой точки. Например, с помощью следующего кода создается кривая, начинающаяся в точке 100, 100 и заканчивающаяся в точке 200, 200.

Поскольку контрольная точка находится в точке 175, 125, создается кривая, идущая вправо и затем вниз:

myShape.graphics.moveTo(100, 100);

myShape.graphics.curveTo(175, 125, 200, 200);

–  –  –

var size:uint = 100;

var roundObject:Shape = new Shape();

// red circular shape roundObject.graphics.beginFill(0xFF0000);

roundObject.graphics.moveTo(size / 2, 0);

roundObject.graphics.curveTo(size, 0, size, size / 2);

roundObject.graphics.curveTo(size, size, size / 2, size);

roundObject.graphics.curveTo(0, size, 0, size / 2);

roundObject.graphics.curveTo(0, 0, size / 2, 0);

// green circular shape roundObject.graphics.beginFill(0x00FF00);

roundObject.graphics.moveTo(200 + size / 2, 0);

roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2);

roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size);

roundObject.graphics.curveTo(200, size, 200, size / 2);

roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0);

this.addChild(roundObject);

Создание фигур с помощью встроенных методов Для удобства в ActionScript 3.0 есть методы для создания таких обычных фигур, как круги, овалы, прямоугольники и треугольники с закругленными углами. К таким методам относятся следующие методы класса Graphics: drawCircle(), drawEllipse(), drawRect(), drawRoundRect() и drawRoundRectComplex().

Эти методы можно использовать вместо методов lineTo() и curveTo(). Следует отметить однако, что перед вызовом этих методов нужно указывать стили линий и заливок.

В следующем примере показано создание красных, зеленых и синих квадратов высотой и шириной 100 пикселов.

Этот код использует метод drawRect() и дополнительно указывает, что цвет заливки имеет 50 % альфа-канала (0,5):

var squareSize:uint = 100;

var square:Shape = new Shape();

square.graphics.beginFill(0xFF0000, 0.5);

square.graphics.drawRect(0, 0, squareSize, squareSize);

square.graphics.beginFill(0x00FF00, 0.5);

square.graphics.drawRect(200, 0, squareSize, squareSize);

square.graphics.beginFill(0x0000FF, 0.5);

square.graphics.drawRect(400, 0, squareSize, squareSize);

square.graphics.endFill();

this.addChild(square);

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

Например, следующий объект Sprite имеет в своем списке дочерних экранных объектов круг, созданный с помощью свойства graphics, и объект TextField:

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 346 Использование прикладного программного интерфейса (API) рисования var mySprite:Sprite = new Sprite();

mySprite.graphics.beginFill(0xFFCC00);

mySprite.graphics.drawCircle(30, 30, 30);

var label:TextField = new TextField();

label.width = 200;

label.text = "They call me mellow yellow...";

label.x = 20;

label.y = 20;

mySprite.addChild(label);

this.addChild(mySprite);

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

Создание линий и заливок градиента С помощью графического объекта также можно создавать обводки и заливки с градиентами вместо сплошных цветов. Обводка градиента создается с помощью метода lineGradientStyle(), а заливка градиента — с помощью метода beginGradientFill().

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

• Первый параметр определяет тип создаваемого градиента. Допустимыми значениями являются следующие: GradientFill.LINEAR или GradientFill.RADIAL.

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

• Третий параметр определяет значения альфа-прозрачности соответствующих цветов предыдущего параметра.

• Четвертый параметр определяет коэффициенты или степень насыщенности каждого цвета внутри градиента. Диапазон допустимых значений — от 0 до 255. Эти значения не обозначают длину или ширину, скорее положение внутри градиента; 0 обозначает начало градиента, 255 — конец градиента. Массив коэффициентов должен возрастать последовательно и иметь то же число элементов, которое было задано во втором и третьем параметрах для массивов альфа-каналов и цветов.

Несмотря на факультативность пятого параметра, матрицы преобразования, он часто используется, поскольку обеспечивает простой и эффективный способ управления внешним видом градиента. Этот параметр допускает экземпляр Matrix. Самым простым способом создания объекта Matrix для градиента является использование метода createGradientBox() класса Matrix.

Определение объекта Matrix для использования с градиентом Методы beginGradientFill() и lineGradientStyle() класса flash.display.Graphics используются для определения градиентов с целью использования в фигурах. При определении градиента матрица предоставляется в качестве одного из параметров этих методов.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 347 Использование прикладного программного интерфейса (API) рисования Самым простым способом определения матрицы является использование метода createGradientBox() класса Matrix, который создает матрицу, используемую для определения градиента. С помощью параметров, передаваемых в метод createGradientBox(), задаются масштаб, поворот и положение градиента. Метод createGradientBox() принимает следующие параметры.

• Ширина градиента: ширина (в пикселах), на которую будет распространяться градиент

• Высота градиента: высота (в пикселах), на которую будет распространяться градиент

• Поворот градиента: поворот (в радианах), который будет применен к градиенту

• Перемещение по горизонтали: как далеко (в пикселах) по горизонтали будет перемещен градиент

• Перемещение по вертикали: как далеко (в пикселах) по вертикали будет перемещен градиент Например, рассмотрим градиент со следующими характеристиками.

• GradientType.LINEAR

• Два цвета (зеленый и синий) с массивом ratios[0, 255]

• SpreadMethod.PAD

• InterpolationMethod.LINEAR_RGB В следующих примерах показаны градиенты, в которых параметр rotation метода createGradientBox() отличается, но все остальные параметры остаются без изменений:

width = 100;

height = 100;

rotation = 0;

tx = 0;

ty = 0;

width = 100;

height = 100;

rotation = Math.PI/4; // 45° tx = 0;

ty = 0;

width = 100;

height = 100;

rotation = Math.PI/2; // 90° tx = 0;

ty = 0;

–  –  –

width = 50;

height = 100;

rotation = 0;

tx = 0;

ty = 0;

width = 50;

height = 100;

rotation = 0 tx = 50;

ty = 0;

width = 100;

height = 50;

rotation = Math.PI/2; // 90° tx = 0;

ty = 0;

width = 100;

height = 50;

rotation = Math.PI/2; // 90° tx = 0;

ty = 50;

Параметры width, height, tx и ty метода createGradientBox() также оказывают влияние на размер и положение заливки градиента radial, как это показано в следующем примере:

width = 50;

height = 100;

rotation = 0;

tx = 25;

ty = 0;

–  –  –

import flash.display.Shape;

import flash.display.GradientType;

import flash.geom.Matrix;

var type:String = GradientType.RADIAL;

var colors:Array = [0x00FF00, 0x000088];

var alphas:Array = [1, 1];

var ratios:Array = [0, 255];

var spreadMethod:String = SpreadMethod.PAD;

var interp:String = InterpolationMethod.LINEAR_RGB;

var focalPtRatio:Number = 0;

var matrix:Matrix = new Matrix();

var boxWidth:Number = 50;

var boxHeight:Number = 100;

var boxRotation:Number = Math.PI/2; // 90° var tx:Number = 25;

var ty:Number = 0;

matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

–  –  –

Обратите внимание, что ширина и высота заливки градиента определяются с помощью ширины и высоты матрицы градиента, а не ширины или высоты, созданных с помощью объекта Graphics. При рисовании с помощью объекта Graphics создается то, что получается в тех координатах в матрице градиента. Даже при использовании одного из методов фигур объекта Graphics, такого как drawRect(), градиент не растягивается до размера созданной фигуры; размер градиента необходимо задать в самой матрице градиента.

В следующем примере показано визуальное различие между размером матрицы градиента и размером самого рисунка:

var myShape:Shape = new Shape();

var gradientBoxMatrix:Matrix = new Matrix();

gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0);

myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix);

myShape.graphics.drawRect(0, 0, 50, 40);

myShape.graphics.drawRect(0, 50, 100, 40);

myShape.graphics.drawRect(0, 100, 150, 40);

myShape.graphics.endFill();

this.addChild(myShape);

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 350 Использование прикладного программного интерфейса (API) рисования С помощью этого кода создаются три градиента с одинаковым стилем заливки, заданным с равным распределением красного, зеленого и синего. Градиенты создаются с помощью метода drawRect() с шириной в пикселах 50, 100 и 150 соответственно. Матрица градиента, заданная в методе beginGradientFill(), создается шириной 100 пикселов. Это означает, что первый градиент охватит только половину спектра градиента, второй — весь спектр и третий — весь спектр, но будет иметь дополнительные 50 пикселов синего, уходящего вправо.

Метод lineGradientStyle() функционирует схоже с методом beginGradientFill(), за тем лишь исключением, что, помимо определения градиента, перед началом рисования необходимо указать толщину обводки с помощью метода lineStyle().

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

var myShape:Shape = new Shape();

var gradientBoxMatrix:Matrix = new Matrix();

gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0);

myShape.graphics.lineStyle(5, 0);

myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix);

myShape.graphics.drawRect(0, 0, 200, 40);

this.addChild(myShape);

Дополнительные сведения о классе Matrix см. в разделе «Использование объектов Matrix» на странице 370.

Использование класса Math с методами рисования С помощью объекта Graphics можно создавать круги и квадраты, а также и более сложные фигуры, в особенности когда методы рисования используются в сочетании со свойствами и методами класса Math. Класс Math содержит обычные математические константы, такие как Math.PI (приблизительно 3,14159265...), константа, используемая для обозначения соотношения длины окружности круга к его диаметру. Этот класс также содержит методы, используемые для выполнения тригонометрических функций, включая, помимо прочего, методы Math.sin(), Math.cos() и Math.tan(). Фигуры рисунка с помощью этих методов и констант создают более динамичные визуальные эффекты, особенно при повторении или рекурсии.

Для многих методов класса Math измерения круглых фигур подразумеваются в радианах, а не в градусах.

Преобразование между этими двумя единицами измерения является обычной практикой для класса Math:

var degrees = 121;

var radians = degrees * Math.PI / 180;

trace(radians) // 2.111848394913139

–  –  –

var sinWavePosition = 100;

var cosWavePosition = 200;

var sinWaveColor:uint = 0xFF0000;

var cosWaveColor:uint = 0x00FF00;

var waveMultiplier:Number = 10;

var waveStretcher:Number = 5;

var i:uint;

for(i = 1; i stage.stageWidth; i++) { var sinPosY:Number = Math.sin(i / waveStretcher) * waveMultiplier;

var cosPosY:Number = Math.cos(i / waveStretcher) * waveMultiplier;

graphics.beginFill(sinWaveColor);

graphics.drawRect(i, sinWavePosition + sinPosY, 2, 2);

graphics.beginFill(cosWaveColor);

graphics.drawRect(i, cosWavePosition + cosPosY, 2, 2);

} Анимирование с помощью прикладного программного интерфейса (API) рисования Одним из преимуществ создания содержимого с помощью API рисования является то, что позиционировать содержимое можно более одного раза. То, что создается, можно преобразовать, сохраняя и изменяя переменные, используемые для рисования. Можно перемещать анимацию, изменяя переменные и обновляя рисунок либо через несколько кадров, либо с помощью таймера.

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

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 352 Использование прикладного программного интерфейса (API) рисования stage.frameRate = 31;

var currentDegrees:Number = 0;

var radius:Number = 40;

var satelliteRadius:Number = 6;

var container:Sprite = new Sprite();

container.x = stage.stageWidth / 2;

container.y = stage.stageHeight / 2;

addChild(container);

var satellite:Shape = new Shape();

container.addChild(satellite);

addEventListener(Event.ENTER_FRAME, doEveryFrame);

function doEveryFrame(event:Event):void { currentDegrees += 4;

var radians:Number = getRadians(currentDegrees);

var posX:Number = Math.sin(radians) * radius;

var posY:Number = Math.cos(radians) * radius;

satellite.graphics.clear();

satellite.graphics.beginFill(0);

satellite.graphics.drawCircle(posX, posY, satelliteRadius);

} function getRadians(degrees:Number):Number { return degrees * Math.PI / 180;

} Для получения существенно разных результатов можно поэкспериментировать, изменяя в начале кода исходные переменные: currentDegrees, radius и satelliteRadius. Например, попробуйте уменьшить переменную radius и/или увеличить переменную totalSatellites. Это только один из примеров, демонстрирующий, как с помощью API рисования можно создавать изображение, чья сложность скрывает простоту его создания.

Пример: наглядный алгоритмический генератор Пример наглядного алгоритмического генератора динамически создает в рабочей области несколько «спутников», или кругов, передвигающихся по круговой орбите. К числу используемых функций относятся следующие.

• Использование API рисования для создания основной фигуры с динамическим внешним представлением

• Подключение пользователя к свойствам, используемым при рисовании

• Перемещение анимации путем очищения рабочей области каждого кадра и последующего обновления В примере из предыдущего подраздела показана анимация одиночного «спутника», выполненная с помощью события Event.ENTER_FRAME. Настоящий пример расширяет границы предыдущего, представляя панель управления с набором бегунков, которые незамедлительно обновляют изображение нескольких спутников. В данном примере представлена формализация кода во внешние классы и объединение процесса создания спутника в цикл с сохранением ссылки к каждому из спутников в массиве satellites.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 353 Использование прикладного программного интерфейса (API) рисования Получить файлы с образцами применения приведенных случаев можно по адресу www.adobe.com/go/learn_programmingAS3samples_flash_ru. Файлы с образцами применения можно найти в папке Samples/AlgorithmicVisualGenerator. В этой папке содержатся следующие файлы.

–  –  –

Установка прослушивателей Приложение сперва создает три прослушивателя. Первый прослушивает отправленное с панели управления событие о том, что необходимо обновление спутников. Второй прослушивает изменения размера рабочей области SWF-файла. Третий прослушивает каждый проходящий кадр SWF-файла с целью обновления с помощью функции doEveryFrame().

Создание спутников Как только прослушиватели установлены, вызывается функция build(). Эта функция сначала вызывает функцию clear(), которая очищает массив satellites и все предыдущие изображения рабочей области. Это необходимо для того, чтобы функцию build() можно было вызвать каждый раз, когда с панели управления посылается событие на выполнение этого действия, как, например, это происходит при изменении настроек цветов. В этом случае спутники должны быть удалены и созданы заново.

Эта функция затем создает спутники, настраивая требуемые для создания исходные свойства, такие как переменная position, которая начинается с произвольной позиции на орбите, и переменная color, которая в настоящем примере не изменяется, пока не будет создан спутник.

Как только спутник создан, в массиве satellites за ним закрепляется ссылка. При вызове функции doEveryFrame() обновляются все спутники в данном массиве.

Обновление положения спутника Функция doEveryFrame() является центровой для процесса анимации приложения. Она вызывается для каждого кадра со скоростью, равной частоте кадров SWF-файла. Поскольку переменные изображения меняются незначительно, это перемещает внешнее представление анимации.

Эта функция сначала очищает все предыдущие изображения и повторно создает фон. Затем она объединяет все контейнеры спутников и увеличивает для каждого спутника значение свойства position, помимо этого, обновляет свойства radius и orbitRadius, которые можно изменить с панели управления. И наконец, путем вызова метода draw() класса Satellite происходит обновление спутника до его исходного положения.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 354 Использование прикладного программного интерфейса (API) рисования Следует отметить, что счетчик i увеличивает значения только до переменной visibleSatellites. Это происходит по той причине, что когда пользователь с панели управления ограничивает число отображаемых спутников, оставшиеся в цикле спутники не должны повторно создаваться, а вместо этого должны быть скрыты. Это происходит в цикле, идущем сразу же после цикла, ответственного за рисование.

Когда работа функции doEveryFrame() завершена, происходит обновление числа visibleSatellites по всему экрану.

Ответная реакция на взаимодействие пользователя с системой Взаимодействие пользователя и системы осуществляется с помощью панели управления, управляемой классом ControlPanel. Этот класс устанавливает прослушиватель вместе с индивидуальным для каждого бегунка значением минимума, значением максимума и значением по умолчанию. По мере перемещения пользователем этих бегунков вызывается функция changeSetting(). Эта функция обновляет свойства панели управления. Если изменение требует повторного создания изображения, отправляется событие, которое впоследствии обрабатывается в основном файле приложения. Как только настройки панели управления изменены, функция doEveryFrame() создает каждый спутник с применением обновленных переменных.

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

• С помощью функции doEveryFrame() можно увеличить значение цвета спутника.

• С помощью функции doEveryFrame() можно уменьшить или увеличить радиус спутника.

• Не обязательно, чтобы радиус спутника имел форму окружности; например, для перемещения в соответствии с синусоидальной волной может использоваться класс Math.

• Спутники могут использовать функцию определения столкновений с другими спутниками.

API рисования можно использовать в качестве варианта для создания визуальных эффектов в среде разработок Flash, а также для создания во время работы основных фигур. Помимо этого, его можно использовать для создания многочисленных визуальных эффектов, которые невозможно создать вручную.

Благодаря прикладному программному интерфейсу (API) рисования и небольшому числу математических приемов, у пользователя ActionScript есть все, чтобы претворить в жизнь неожиданные и оригинальные идеи.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 355 Использование прикладного программного интерфейса (API) рисования Использование прикладного программного интерфейса (API) рисования для опытных пользователей Введение в использование дополнительных возможностей прикладного программного интерфейса (API) рисования В Flash Player 10 и Adobe AIR 1.5 добавлена поддержка расширенного набора функций для рисования. Новые функции рисования API-интерфейса расширяют методы рисования из предыдущих версий и позволяют создавать наборы данных для рисования фигур, изменять их во время выполнения и создавать трехмерные эффекты. Новые функции рисования API-интерфейса объединяют существующие методы в альтернативные команды. Для создания наборов данных для методов рисования эти команды используют векторные массивы и классы перечисления. Векторные массивы позволяют ускорить визуализацию более сложных фигур, и разработчики могут изменять значения массива с помощью кода для динамической визуализации фигур во время выполнения.

Функции рисования, введенные в проигрывателе Flash Player 10, описываются в следующих разделах:

«Создание контуров» на странице 356, «Определение правил поворотов» на странице 357, «Использование классов графических данных» на странице 359 и «Об использовании drawTriangles()» на странице 362.

Общие задачи расширенного API-интерфейса рисования В ActionScript с использованием расширенного API-интерфейса рисования обычно выполняются перечисленные ниже задачи:

• использование объектов Vector для хранения данных для методов рисования;

• определение контуров для программного рисования фигур;

• создание правил поворотов для определение способа заливки накладывающихся фигур;

• использование классов графических данных;

• использование треугольников и методов рисования для создания трехмерных эффектов.

Важные понятия и термины Ниже приводится список важных терминов, с которыми вы столкнетесь в этом разделе.

• Вектор: массив значений, принадлежащих к одному и тому же типу данных. Объект Vector может сохранять массив значений, которые используются методами рисования для построения линий и фигур с помощью одной команды. Дополнительные сведения об объектах Vector см. в разделе «Индексные массивы» на странице 169.

• Контур: контур состоит из одного или нескольких сегментов прямой или кривой. Начало и конец каждого сегмента отмечаются координатами, которые фиксируют данную кривую на определенном месте. Контур может быть замкнутым (например, круг) или открытым, с отдельными конечными точками (например, волнообразная линия).

• Поворот: направление контура, интерпретируемое визуализатором; оно может быть положительным (по часовой стрелке) или отрицательным (против часовой стрелки).

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 356 Использование прикладного программного интерфейса (API) рисования

• GraphicsStroke: класс для настройки стиля линий. Несмотря на то, что понятие «обводка» не является частью расширенных функций рисования API-интерфейса, данный класс вполне может использоваться для определения стиля линии и ее свойства заливки. Стиль линии можно настраивать динамически с помощью класса GraphicsStroke.

• Объект Fill: объекты, созданные с помощью новых классов отображения, таких как flash.display.GraphicsBitmapFill и flash.display.GraphicsGradientFill, которые передаются команде рисования Graphics.drawGraphicsData(). Объекты Fill и новые команды рисования представляют собой более объектно-ориентированный подход к дублированию Graphics.beginBitmapFill() и Graphics.beginGradientFill().

Создание контуров В разделе о рисовании линий и кривых (см. «Создание линий и кривых» на странице 342) были представлены команды для рисования одной линии (Graphics.lineTo()) или кривой (Graphics.curveTo()), а затем для перемещения линии в другую точку (Graphics.moveTo()) с целью построения фигуры. В проигрыватель Flash Player 10 и Adobe AIR 1.5 добавлена поддержка для новых API-интерфейсов рисования ActionScript, таких как Graphics.drawPath() и Graphics.drawTriangles(), которые используют существующие команды рисования в качестве параметров. Таким образом, последовательность команд Graphics.lineTo(), Graphics.curveTo() или Graphics.moveTo() выполняется в одном выражении.

Два нововведения в API-интерфейсах для рисования позволяют методам Graphics.drawPath() и

Graphics.drawTriangles() объединить существующие команды:

• Класс перечисления GraphicsPathCommand: класс GraphicsPathCommand связывает несколько команд рисования с константами. Последовательность этих значений используется в качестве параметров для метода Graphics.drawPath(). Затем с помощью одной команды можно визуализировать всю фигуру или сразу несколько фигур. Также можно динамически изменять значения, передаваемые этим методам, для изменения существующей фигуры.

• Векторные массивы: векторные массивы содержат последовательность значений определенного типа данных. Таким образом, можно сохранить последовательность констант класса GraphicsPathCommand в одном объекте Vector, а последовательность координат в другом объекте Vector. Метод Graphics.drawPath() или Graphics.drawTriangles() задает эти значения вместе для создания контура рисования или фигуры.

Теперь не нужно использовать отдельные команды для каждого сегмента фигуры. Например, метод Graphics.drawPath() объединяет в себе методы Graphics.moveTo(), Graphics.lineTo() и Graphics.curveTo(). Эти методы не вызываются по отдельности, а абстрагируются в виде числовых идентификаторов, определяемых классом GraphicsPathCommand. Операция moveTo() обозначается как 1, а операция lineTo() — как 2. Сохраните массив этих значений в объекте Vector.int для использования в параметре commands. Затем создайте другой массив с координатами в объекте Vector.Number для использования в параметре data. Каждое значение GraphicsPathCommand соответствует значениям координат, сохраненным в параметре data, где два последовательных числа определяют местоположение в целевом координатном пространстве.

Примечание. Значения в векторном массиве не являются объектами Point. Вектор — это последовательность чисел, где каждая группа из двух чисел представляет пару координат х и у.

Метод Graphics.drawPath() сопоставляет каждую команду с соответствующими значениями точек (набор из двух или четырех чисел), чтобы создать контур в объекте Graphics.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 357 Использование прикладного программного интерфейса (API) рисования package{ import flash.display.*;

public class DrawPathExample extends Sprite { public function DrawPathExample(){ var square_commands:Vector.int = new Vector.int(5,true);

square_commands[0] = 1;//moveTo square_commands[1] = 2;//lineTo square_commands[2] = 2;

square_commands[3] = 2;

square_commands[4] = 2;

var square_coord:Vector.Number = new Vector.Number(10,true);

square_coord[0] = 20; //x square_coord[1] = 10; //y square_coord[2] = 50;

square_coord[3] = 10;

square_coord[4] = 50;

square_coord[5] = 40;

square_coord[6] = 20;

square_coord[7] = 40;

square_coord[8] = 20;

square_coord[9] = 10;

graphics.beginFill(0x442266);//set the color graphics.drawPath(square_commands, square_coord);

} } } Определение правил поворотов В проигрывателе Flash Player 10 и среде Adobe AIR 1.5 также введено понятие «поворота» контура, то есть направления контура. Поворот контура может быть положительным (по часовой стрелке) или отрицательным (против часовой стрелки). Поворот определяет порядок, в котором визуализатор интерпретирует координаты, переданные вектором для параметра data.

A B C Положительный и отрицательный поворот A. Стрелки указывают направление рисования B. Положительный поворот (по часовой стрелке) C. Отрицательный поворот (против часовой стрелки)

–  –  –

drawPath(commands:Vector.int, data:Vector.Number, winding:String = "evenOdd"):void В данном контексте третий параметр является строкой или константой, которая указывает поворот или правило заливки для пересекающихся контуров. (Константы определяются в классе GraphicsPathWinding как GraphicsPathWinding.EVEN_ODD или GraphicsPathWinding.NON_ZERO.) Правило поворота играет важную роль при пересечении контуров.

Правило «четный-нечетный» является стандартным правилом поворота. Оно использовалось всеми предыдущими API-интерфейсами рисования. Правило «четный-нечетный» также является правилом по умолчанию для метода Graphics.drawPath(). Согласно правилу поворота «четный-нечетный», пересекающиеся контуры чередуют открытые и закрытые заливки. При пересечении двух квадратов с одинаковой заливкой область пересечения останется без заливки. Как правило, одна из примыкающих друг к другу областей заполнена заливкой, а другая — нет.

С другой стороны, правило «ненулевого значения» учитывает поворот (направление рисования) при определении того, должны ли заполняться заливкой области, ограниченные пересекающимися контурами.

Когда пересекаются контуры с противоположным поворотом, определенная область остается незаполненной, как при использовании правила «четный-нечетный». Если же контуры имеют одинаковый поворот, область пересечения заполняется заливкой.

A B Правила поворота для пересекающихся областей A. Правило поворота «четный-нечетный» B. Правило поворота «ненулевого значения»

Имена правил поворота Имена ссылаются на более конкретное правило, определяющее способ управления заливками. Контуры с положительным поворотом получают значение +1; а контуры с отрицательным поворотом — значение -1.

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

учитывается число пересечений линии и контура. Если пересечение имеет нечетный номер, область заполняется заливкой. Если номер четный, область остается без заливки. При использовании правила «ненулевого значения» учитываются значения, присвоенные контурам. Если объединенные значения не равны нулю, область заполняется заливкой. Если объединенное значение равно нулю, область остается без заливки.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 359 Использование прикладного программного интерфейса (API) рисования A B Счет и заливки по правилам поворота A. Правило поворота «четный-нечетный» B. Правило поворота «ненулевого значения»

Применение правил поворота Несмотря на сложность правил заливки, в некоторых ситуациях они необходимы. В качестве примера попробуем нарисовать звезду. Согласно стандартному правилу «четный-нечетный», для построения фигуры потребуется десять разных линий. Согласно правилу поворота «ненулевого значения» вместо десяти линий используется всего пять. Следующий код ActionScript рисует звезду с использованием пяти линий и правила поворота «ненулевого значения».

fill.graphics.beginFill(0x60A0FF);graphics.drawPath( Vector.int([1,2,2,2,2]), Vector.Number([66,10, 23,127, 122,50, 10,49, 109,127]), GraphicsPathWinding.NON_ZERO);

На следующем рисунке изображена полученная звезда.

A B C Звезда, нарисованная с использованием разных правил поворота A. «Четный-нечетный»: 10 линий B. «Четный-нечетный»: 5 линий C. «Ненулевое значение»: 5 линий А когда пересекаются изображения, которые анимируются или используются в качестве текстур для трехмерных объектов, важность правил поворота становится еще больше.

Использование классов графических данных В пакет flash.display проигрывателя Flash Player 10 и Adobe AIR 1.5 добавлена новая коллекция классов типа IGraphicsData (интерфейс, реализуемый каждым из классов). Классы, реализующие интерфейс IGraphicsData, выполняют роль контейнеров данных для методов API-интерфейса рисования.

Интерфейс IGraphicsData реализуют следующие классы:

• GraphicsBitmapFill

• GraphicsEndFill

• GraphicsGradientFill

• GraphicsPath ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 360 Использование прикладного программного интерфейса (API) рисования

• GraphicsShaderFill

• GraphicsSolidFill

• GraphicsStroke

• GraphicsTrianglePath Эти классы позволяют сохранять полные рисунки в векторном массиве типа IGraphicsData (Vector.IGraphicsData), который можно использовать как источник данных для других экземпляров фигур, или сохранять сведения о рисунках для последующего использования.

Обратите внимание, что для каждого стиля заливки предусмотрено несколько классов заливки, но только один класс обводки. В ActionScript есть только один класс обводки IGraphicsData, так как класс обводки использует для определения стиля классы заливки. Поэтому каждая обводка на самом деле представляет собой класс обводки и класс заливки. В противном случае API-интерфейс для этих классов графических данных использует методы, которые они представляют в классе flash.display.Graphics.

–  –  –

lineBitmapStyle() GraphicsStroke + GraphicsBitmapFill lineGradientStyle() GraphicsStroke + GraphicsGradientFill lineShaderStyle() GraphicsStroke + GraphicsShaderFill

–  –  –

Кроме того, класс GraphicsPath имеет собственные служебные методы GraphicsPath.moveTo(), GraphicsPath.lineTo(), GraphicsPath.curveTo(), GraphicsPath.wideLineTo() и GraphicsPath.wideMoveTo(), упрощающие определение этих команд для экземпляра GraphicsPath. Эти служебные методы упрощают непосредственное определение или обновление команд и значений данных.

Создав набор экземпляров IGraphicsData, можно приступать к визуализации графики с помощью метода Graphics.drawGraphicsData(). Метод Graphics.drawGraphicsData() последовательно пропускает векторный массив экземпляров IGraphicsData через API-интерфейс рисования.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 361 Использование прикладного программного интерфейса (API) рисования // stroke object var stroke:GraphicsStroke = new GraphicsStroke(3);

stroke.joints = JointStyle.MITER;

stroke.fill = new GraphicsSolidFill(0x102020);// solid stroke // fill object var fill:GraphicsGradientFill = new GraphicsGradientFill();

fill.colors = [0x0000FF, 0xEEFFEE];

fill.matrix = new Matrix();

fill.matrix.createGradientBox(70,70, Math.PI/2);

// path object var path:GraphicsPath = new GraphicsPath(new Vector.int(), new Vector.Number());

path.commands.push(1,2,2);

path.data.push(125,0, 50,100, 175,0);

// combine objects for complete drawing var drawing:Vector.IGraphicsData = new Vector.IGraphicsData();

drawing.push(stroke, fill, path);

// draw the drawing graphics.drawGraphicsData(drawing);

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

// draw the drawing multiple times // change one value to modify each variation graphics.drawGraphicsData(drawing);

path.data[2] += 200;

graphics.drawGraphicsData(drawing);

path.data[2] -= 150;

graphics.drawGraphicsData(drawing);

path.data[2] += 100;

graphics.drawGraphicsData(drawing);

path.data[2] -= 50;graphicsS.drawGraphicsData(drawing);

Хотя объекты IGraphicsData могут определять стили заливки и обводки, использование этих стилей не является обязательным. Другими словами, методы класса Graphics можно использовать для определения стилей, а объекты IGraphicsData — для рисования сохраненного набора контуров и наоборот.

Примечание. Используйте метод Graphics.clear(), чтобы удалить предыдущий рисунок, прежде чем начинать новый, если вы не планируете дополнить исходный рисунок, как показано в вышеприведенном примере. Изменяя одну часть контура или набора объектов IGraphicsData, перерисовывайте весь рисунок, чтобы увидеть обновленный вариант.

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

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 362 Использование прикладного программного интерфейса (API) рисования Об использовании drawTriangles() В проигрыватель Flash Player 10 и Adobe AIR 1.5 добавлен еще один расширенный метод, Graphics.drawTriangles(), который напоминает метод Graphics.drawPath(). Метод Graphics.drawTriangles() также использует объект Vector.Number, чтобы указывать местоположения точек для создания контура.

Однако в действительности метод Graphics.drawTriangles() предназначен для того, чтобы упростить создание трехмерных эффектов с помощью ActionScript. Дополнительные сведения об использовании метода Graphics.drawTriangles() для создания трехмерных эффектов см. в разделе «Использование треугольников для создания трехмерных эффектов» на странице 545.

Глава 15. Работа с геометрией Пакет flash.

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

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

Пакет flash.geom содержит классы, определяющие геометрические объекты, такие как точки, прямоугольники и матрицы преобразований. Эти классы не обязательно обладают самостоятельной функциональностью, тем не менее, они используются для определения свойств объектов, которые применяются в других классах.

Все геометрические классы базируются на том, что положение объекта на экране представляется в двумерной плоскости. Экран рассматривается как плоская диаграмма с горизонтальной (Х) и вертикальной (Y) осями.

Местоположение любой точки на экране представляется двумя значениями x и y, которые называются координатами местоположения.

Каждый экранный объект, включая рабочую область, имеет свое собственное координатное пространство, то есть свою собственную диаграмму для размещения дочерних экранных объектов, рисунков и т. д. Обычно начало отсчета (точка с координатами 0, 0, в которой пересекаются оси Х и Y) размещается в верхнем левом углу экранного объекта. Это правило всегда справедливо для рабочей области, но не обязательно для любого другого экранного объекта. Так же, как и в стандартной двумерной системе координат, значения x увеличиваются в правую сторону и уменьшаются в левую (для точек, расположенных слева от начала отсчета, значения координаты x отрицательны). Тем не менее, в отличие от стандартной системы координат, в ActionScript значения по оси Y увеличиваются при перемещении в нижнюю часть экрана и уменьшаются при перемещении в верхнюю (значения по оси Y выше начала отсчета отрицательны). Поскольку верхний левый угол рабочей области является началом отсчета ее координатного пространства, любой объект рабочей области будет иметь координату x больше 0 и меньше ширины рабочей области, а координату у — больше 0 и меньше высоты рабочей области.

Для представления отдельных точек в координатном пространстве можно воспользоваться экземплярами класса Point. Для представления прямоугольной области в координатном пространстве можно создать экземпляр класса Rectangle. Опытные пользователи могут использовать экземпляр класса Matrix для применения комплексных преобразований к экранному объекту. Многие преобразования, такие как поворот, изменения положения и масштаба, могут применяться к экранному объекту непосредственно с использованием свойств этого объекта. Для получения дополнительной информации о преобразованиях с использованием свойств экранных объектов см. раздел «Операции с экранными объектами» на странице 310.

–  –  –

• Определение координат точки в различных координатных пространствах

• Перемещение экранного объекта с использованием угла и расстояния

• Работа с прямоугольными экземплярами Rectangle:

• Перемещение экземпляра Rectangle

• Изменение размера экземпляра Rectangle

• Определение комбинированного размера или областей перекрытия экземпляров Rectangle

• Создание объектов Matrix

• Использование объекта Matrix для преобразования экранного объекта Важные понятия и термины Ниже приводится список важных терминов, с которыми вы столкнетесь в этой главе.

• Декартовы координаты: координаты, которые обычно выражаются парой чисел (например, 5, 12 или 17, Указанные два числа являются x-координатой и y-координатой соответственно.

• Координатное пространство: диаграмма координат, содержащаяся в экранном объекте, на которой располагаются его дочерние элементы.

• Начало отсчета: точка в координатном пространстве, в которой пересекаются оси X и Y. Эта точка имеет координаты 0, 0.

• Точка: единичный пункт в координатном пространстве. В двумерной координатной системе, используемой в ActionScript, точка определяется положением относительно осей X и Y (координатами точки).

• Точка регистрации: в экранном объекте — начало отсчета координатного пространства (координаты 0, 0).

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

• Перемещение: изменение координат точек при переходе из одного координатного пространства в другое.

• Преобразование: корректировка визуальных характеристик графики, например: поворот, масштабирование, сдвиг, деформация или изменение цвета объекта.

• Ось X: горизонтальная ось в двумерной системе координат, используемой в ActionScript.

• Ось Y: вертикальная ось в двумерной системе координат, используемой в ActionScript.

Работа с примерами из главы Многие примеры этой главы иллюстрируют расчеты или изменения значений; в большинстве примеров используется обращение к соответствующей функции trace(), что позволяет продемонстрировать результаты кода. Для тестирования этих примеров сделайте следующее.

1 Создайте пустой документ с помощью инструмента разработки Flash.

2 Выберите ключевой кадр на временной шкале.

3 Откройте панель «Действия» и скопируйте код на панель «Сценарий».

4 Запустите программу, выбрав «Управление» «Тестировать ролик».

Результаты действий функций trace() для примеров кода можно увидеть на панели «Вывод».

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 365 Работа с геометрией Некоторые примеры этой главы демонстрируют применение преобразований к экранным объектам. Для этих примеров результаты более наглядны визуально, чем через текстовый вывод. Для тестирования примеров преобразования сделайте следующее.

1 Создайте пустой документ с помощью инструмента разработки Flash.

2 Выберите ключевой кадр на временной шкале.

3 Откройте панель «Действия» и скопируйте код на панель «Сценарий».

4 Создайте экземпляр символа фрагмента ролика в рабочей области. Например, нарисуйте фигуру, выделите ее, выберите команды «Модификация» «Преобразовать в символ» и присвойте символу имя.

5 При выделенном фрагменте ролика в рабочей области присвойте имя экземпляру в инспекторе свойств.

Присвоенное имя должно соответствовать имени экранного объекта в коде примера. Например, если в примере кода применяется преобразование к объекту с именем myDisplayObject, имя экземпляра фрагмента ролика также должно быть myDisplayObject.

6 Запустите программу, выбрав «Управление» «Тестировать ролик».

На экране будут показаны результаты преобразования, примененного к объекту, как определено в примере кода.

Техника тестирования примеров кода описана более детально в разделе «Тестирование примеров кода» на странице 38.

Использование объектов Point Точечный объект Point определяется парой декартовых координат. Он представляет точку в двумерной системе координат, где x является значением по горизонтальной оси, а y — значением по вертикальной оси.

Для определения объекта Point необходимо задать его свойства x и y следующим образом:

import flash.geom.*;

var pt1:Point = new Point(10, 20); // x == 10; y == 20 var pt2:Point = new Point();

pt2.x = 10;

pt2.y = 20;

–  –  –

Перемещение координатных пространств Если два экранных объекта находятся в различных контейнерах, они могут быть в различных координатных пространствах. Для класса DisplayObject можно использовать метод localToGlobal() для перевода координат в единое (глобальное) координатное пространство, применяемое для рабочей области. Например, следующий код позволяет найти расстояние между точками регистрации двух экранных объектов circle1 и

circle2, расположенных в различных контейнерах:

import flash.geom.*;

var pt1:Point = new Point(circle1.x, circle1.y);

pt1 = circle1.localToGlobal(pt1);

var pt2:Point = new Point(circle2.x, circle2.y);

pt2 = circle2.localToGlobal(pt2);

var distance:Number = Point.distance(pt1, pt2);

Аналогичным образом можно найти расстояние от точки регистрации экранного объекта target до заданной точки рабочей области, используя метод localToGlobal() класса DisplayObject:

import flash.geom.*;

var stageCenter:Point = new Point();

stageCenter.x = this.stage.stageWidth / 2;

stageCenter.y = this.stage.stageHeight / 2;

var targetCenter:Point = new Point(target.x, target.y);

targetCenter = target.localToGlobal(targetCenter);

var distance:Number = Point.distance(stageCenter, targetCenter);

Перемещение экранного объекта на заданный угол и расстояние Для перемещения экранного объекта на заданный угол и расстояние можно использовать метод polar() из класса Point.

Например, следующий код позволяет переместить объектmyDisplayObject на 100 пикселов и 60 градусов:

import flash.geom.*;

var distance:Number = 100;

var angle:Number = 2 * Math.PI * (90 / 360);

var translatePoint:Point = Point.polar(distance, angle);

myDisplayObject.x += translatePoint.x;

myDisplayObject.y += translatePoint.y;

–  –  –

Использование объектов Rectangle Объект Rectangle используется для определения прямоугольных областей. Положение объекта Rectangle определяется координатами его верхнего левого угла x и y, а также свойствами ширины width и высоты height. Чтобы задать эти свойства для нового объекта Rectangle, необходимо вызвать функцию конструктора

Rectangle() следующим образом:

import flash.geom.Rectangle;

var rx:Number = 0;

var ry:Number = 0;

var rwidth:Number = 100;

var rheight:Number = 50;

var rect1:Rectangle = new Rectangle(rx, ry, rwidth, rheight);

–  –  –

import flash.geom.Rectangle;

var x1:Number = 0;

var y1:Number = 0;

var width1:Number = 100;

var height1:Number = 50;

var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);

trace(rect1) // (x=0, y=0, w=100, h=50) rect1.x = 20;

rect1.y = 30;

trace(rect1); // (x=20, y=30, w=100, h=50) Как показано в следующем коде, можно изменить свойства левой стороны left и верхнего края top объекта Rectangle; положение меняется также при изменении свойств x и y в соответствии со свойствами left и top.

Тем не менее, положение нижнего левого угла объекта Rectangle остается прежним, хотя размеры его меняются.

import flash.geom.Rectangle;

var x1:Number = 0;

var y1:Number = 0;

var width1:Number = 100;

var height1:Number = 50;

var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);

trace(rect1) // (x=0, y=0, w=100, h=50) rect1.left = 20;

rect1.top = 30;

trace(rect1); // (x=20, y=30, w=80, h=20) Аналогичным образом, как показано в следующем примере, можно изменить свойства нижнего края bottom и правой стороны right объекта Rectangle. Положение верхнего левого угла объекта Rectangle остается прежним, хотя размеры его меняются.

import flash.geom.Rectangle;

var x1:Number = 0;

var y1:Number = 0;

var width1:Number = 100;

var height1:Number = 50;

var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);

trace(rect1) // (x=0, y=0, w=100, h=50) rect1.right = 60;

trect1.bottom = 20;

trace(rect1); // (x=0, y=0, w=60, h=20)

Изменить положение объекта Rectangle можно также с помощью метода offset(), как показано ниже:

import flash.geom.Rectangle;

var x1:Number = 0;

var y1:Number = 0;

var width1:Number = 100;

var height1:Number = 50;

var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);

trace(rect1) // (x=0, y=0, w=100, h=50) rect1.offset(20, 30);

trace(rect1); // (x=20, y=30, w=100, h=50)

–  –  –

Изменить положение объекта Rectangle можно также с помощью метода inflate(), в котором используются два параметра, dx и dy. Параметр dx представляет собой число пикселов, на которое отстоят левая и правая стороны прямоугольника от центра, а параметр dy — число пикселов, на которое отстоят верхний и нижний края прямоугольника от центра.

import flash.geom.Rectangle;

var x1:Number = 0;

var y1:Number = 0;

var width1:Number = 100;

var height1:Number = 50;

var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);

trace(rect1) // (x=0, y=0, w=100, h=50) rect1.inflate(6,4);

trace(rect1); // (x=-6, y=-4, w=112, h=58) Метод inflatePt() работает аналогичным образом, за исключением того, что в нем в качестве параметра используется объект Point вместо значений смещения dx и dy.

Нахождение объединений и пересечений объектов Rectangle Для нахождения прямоугольной области, сформированной границами двух прямоугольников, используется функция объединения union():

import flash.display.*;

import flash.geom.Rectangle;

var rect1:Rectangle = new Rectangle(0, 0, 100, 100);

trace(rect1); // (x=0, y=0, w=100, h=100) var rect2:Rectangle = new Rectangle(120, 60, 100, 100);

trace(rect2); // (x=120, y=60, w=100, h=100) trace(rect1.union(rect2)); // (x=0, y=0, w=220, h=160) Для нахождения прямоугольной области, сформированной перекрытием двух прямоугольников, используется функция пересечения intersection():

import flash.display.*;

import flash.geom.Rectangle;

var rect1:Rectangle = new Rectangle(0, 0, 100, 100);

trace(rect1); // (x=0, y=0, w=100, h=100) var rect2:Rectangle = new Rectangle(80, 60, 100, 100);

trace(rect2); // (x=120, y=60, w=100, h=100) trace(rect1.intersection(rect2)); // (x=80, y=60, w=20, h=40) Метод intersects() используется для определения факта пересечения двух прямоугольников. Метод intersects() используется также для определения факта нахождения определенного экранного объекта на заданном участке рабочей области. Например, в следующем коде предполагается, что координатное пространство контейнера, содержащего экранный объект circle, совпадает с пространством рабочей области.

Пример показывает, как использовать метод intersects() для определения факта пересечения экранным объектом circle определенных участков рабочей области, заданных объектами Rectangle target1 и target2:

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 370 Работа с геометрией import flash.display.*;

import flash.geom.Rectangle;

var circle:Shape = new Shape();

circle.graphics.lineStyle(2, 0xFF0000);

circle.graphics.drawCircle(250, 250, 100);

addChild(circle);

var circleBounds:Rectangle = circle.getBounds(stage);

var target1:Rectangle = new Rectangle(0, 0, 100, 100);

trace(circleBounds.intersects(target1)); // false var target2:Rectangle = new Rectangle(0, 0, 300, 300);

trace(circleBounds.intersects(target2)); // true Аналогичным образом можно использовать метод intersects() для определения факта перекрытия смежных прямоугольников двух экранных объектов. Метод getRect() из класса DisplayObject используется для включения дополнительного пространства, которое обводки экранного объекта могут добавлять к граничной области.

Другое использование объектов Rectangle

Объекты Rectangle можно использовать со следующими функциями и свойствами:

–  –  –

Использование объектов Matrix Класс Matrix представляет матрицу преобразования, определяющую способ сопоставления точек из одного пространства координат с точками в другом пространстве координат. Можно выполнять различные графические преобразования экранного объекта путем задания свойств объекта Matrix, применения этого объекта Matrix к свойству matrix объекта Transform и последующего применения объекта Transform в качестве свойства transform к экранному объекту. Эти функции преобразования включают перемещение (изменение положения осей x и y), поворот, масштабирование и наклон.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 371 Работа с геометрией Определение объектов Matrix Несмотря на то, что матрицу можно определить непосредственно, задав свойства объекта Matrix (a, b, c, d, tx, ty), легче использовать для этого метод createBox(). Этот метод включает параметры, позволяющие непосредственно задавать эффекты масштабирования поворота и перемещения для результирующей матрицы.

Например, следующий код позволяет создать объект Matrix, который будет включать эффекты горизонтального масштабирования с коэффициентом 2,0, вертикального масштабирования с коэффициентом 3,0, поворота на 45 градусов, перемещения на 10 пикселов направо и перемещения на 20 пикселов вниз:

var matrix:Matrix = new Matrix();

var scaleX:Number = 2.0;

var scaleY:Number = 3.0;

var rotation:Number = 2 * Math.PI * (45 / 360);

var tx:Number = 10;

var ty:Number = 20;

matrix.createBox(scaleX, scaleY, rotation, tx, ty);

Используя методы scale(), rotate() и translate(), можно также откорректировать эффекты масштабирования, поворота и перемещения объекта Matrix. Обратите внимание, что в этих методах используется комбинация данных со значениями существующего объекта Matrix.

Например, следующий код задает объект Matrix, который будет включать эффекты масштабирования с коэффициентом 4 и поворота на 60 градусов, поскольку методы scale() и rotate() использованы дважды:

var matrix:Matrix = new Matrix();

var rotation:Number = 2 * Math.PI * (30 / 360); // 30° var scaleFactor:Number = 2;

matrix.scale(scaleFactor, scaleFactor);

matrix.rotate(rotation);

matrix.scale(scaleX, scaleY);

matrix.rotate(rotation);

myDisplayObject.transform.matrix = matrix;

Для применения преобразования наклона к объекту Matrix необходимо задать его свойства b или c. Свойство b задает вертикальный наклон матрицы, свойство c задает горизонтальный наклон.

Следующий код позволяет наклонить матричный объект myMatrix по вертикали с коэффициентом 2:

var skewMatrix:Matrix = new Matrix();

skewMatrix.b = Math.tan(2);

myMatrix.concat(skewMatrix);

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

myDisplayObject:

var matrix:Matrix = myDisplayObject.transform.matrix;

var scaleFactor:Number = 2;

var rotation:Number = 2 * Math.PI * (60 / 360); // 60° matrix.scale(scaleFactor, scaleFactor);

matrix.rotate(rotation);

myDisplayObject.transform.matrix = matrix;

–  –  –

Примечание. Класс ColorTransform также включен в пакет flash.geometry. Этот класс используется для задания свойства colorTransform для объекта Transform. Данный класс не имеет отношения к каким-либо геометрическим преобразованиям, поэтому он не рассматривается в этой главе. Дополнительную информацию см. в справочнике по языку ActionScript 3.0 и компонентам, раздел «Класс ColorTransform».

Пример: применение матричного преобразования к экранному объекту В качестве примера приводится приложение DisplayObjectTransformer, которое демонстрирует ряд функций, используемых в классе Matrix для преобразования экранного объекта.

Среди этих функций следующие:

• Поворот экранного объекта

• Масштабирование экранного объекта

• Перемещение экранного объекта

• Наклон экранного объекта Приложение предоставляет интерфейс для настройки параметров матричного преобразования, как показано ниже.

–  –  –

Исходный экранный объект и экранный объект, повернутый на -45° и уменьшенный на 50 %

Для получения файлов приложения этого примера см.:

www.adobe.com/go/learn_programmingAS3samples_flash_ru. Файлы приложения DisplayObjectTransformer находятся в папке Samples/DisplayObjectTransformer. Приложение состоит из следующих файлов.

–  –  –

Определение класса MatrixTransformer Класс MatrixTransformer включает статические методы, которые применяют геометрические преобразования к объектам Matrix.

Метод transform()

Метод transform() включает параметры для нижеследующего:

• sourceMatrix — входная матрица, которая преобразуется с помощью этого метода

• xScale и yScale — масштабные коэффициенты x и y

• dx и dy — величины перемещения x и y в пикселах

• rotation — угол поворота в градусах

• skew — коэффициент наклона в процентах

• skewType — направление наклона вправо или влево ("right" или "left") Возвращаемое значение — результирующая матрица.

Метод transform() вызывает следующие статические методы этого класса:

• skew()

• scale()

• translate()

• rotate()

–  –  –

Метод skew() Метод skew() вносит в матрицу корректировку наклона, задавая свойства матрицы b и c. Опционный параметр unit задает единицы измерения угла наклона — при необходимости в этом методе возможно конвертирование значения угла angle в радианы.

if (unit == "degrees") { angle = Math.PI * 2 * angle / 360;

} if (unit == "gradients") { angle = Math.PI * 2 * angle / 100;

} Матричный объект skewMatrix создается и корректируется для применения преобразования наклона.

Первоначально это единичная матрица:

var skewMatrix:Matrix = new Matrix();

Параметр skewSide определяет сторону, к которой применяется преобразование наклона.

Если задана правая сторона "right", свойство матрицы b устанавливает следующий код:

skewMatrix.b = Math.tan(angle);

Нижний край наклоняется заданием свойства матрицы c:

skewMatrix.c = Math.tan(angle);

Результирующий наклон применяется к исходной матрице за счет объединения двух матриц, как показано в следующем примере:

sourceMatrix.concat(skewMatrix);

return sourceMatrix;

Метод scale() Как показано в следующем примере, метод scale() сначала задает масштабный коэффициент (если он представлен в процентах), затем метод scale() применяется к матричному объекту:

if (percent) { xScale = xScale / 100;

yScale = yScale / 100;

} sourceMatrix.scale(xScale, yScale);

return sourceMatrix;

Метод translate() Метод translate() просто применяет коэффициенты преобразования dx и dy путем вызова метода

translate() матричного объекта, как показано ниже:

sourceMatrix.translate(dx, dy);

return sourceMatrix;

–  –  –

if (unit == "degrees") { angle = Math.PI * 2 * angle / 360;

} if (unit == "gradients") { angle = Math.PI * 2 * angle / 100;

} sourceMatrix.rotate(angle);

return sourceMatrix;

Вызов метода MatrixTransformer.transform() в приложении Приложение содержит интерфейс, с помощью которого пользователь вводит параметры преобразования.

Затем приложение передает их вместе со свойствами экранного объекта matrix и transform в метод

Matrix.transform(), как показано ниже:

tempMatrix = MatrixTransformer.transform(tempMatrix, xScaleSlider.value, yScaleSlider.value, dxSlider.value, dySlider.value, rotationSlider.value, skewSlider.value, skewSide );

После этого приложение применяет возвращаемое значение к свойству matrix свойства transform экранного объекта, тем самым осуществляя преобразование:

img.content.transform.matrix = tempMatrix;

Глава 16. Фильтрация экранных объектов С исторической точки зрения применение эффектов фильтра к растровым изображениям было прерогативой специализированного программного обеспечения для обработки изображений (как, например, Adobe Photoshop® и Adobe Fireworks®).

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

Основы фильтрации экранных объектов Вводные сведения о фильтрации экранных объектов Один из способов доработки приложений состоит в добавлении простых графических эффектов (например, тени за фотографией, чтобы создать иллюзию трехмерности или свечения вокруг кнопки, чтобы показать, что она активна). ActionScript 3.0 включает девять фильтров, которые можно применить к любому экранному объекту или экземпляру BitmapData. Это не только основные фильтры (такие как фильтры тени и свечения), но и сложные фильтры для создания различных эффектов (такие как фильтр карты смещения и фильтр свертки).

Распространенные задачи фильтрации Ниже перечислены задачи, которые можно выполнить с помощью фильтров в ActionScript.

• Создание фильтра

• Применение фильтра к экранному объекту

• Удаление фильтра из экранного объекта

• Применение фильтра к данным изображения в экземпляре BitmapData

• Удаление фильтров из объекта

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

• Фаска: край, созданный за счет сочетания светлых пикселов с двух сторон и темных пикселов с других двух сторон, что создает эффект трехмерной границы, который обычно используется для «приподнятых» или «сдвинутых» кнопок и тому подобной графики.

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

• Смещение: сдвиг или перемещение пикселов в изображении на новую позицию.

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 377 Фильтрация экранных объектов

• Матрица: сетка с числами, использованная для выполнения определенных математических расчетов путем применения чисел в сетке к различным значениям с последующим сочетанием результатов.

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

Чтобы проверить код, приведенный в этой главе, выполните следующие действия.

1 Создайте пустой документ с помощью инструмента разработки Flash.

2 Выберите ключевой кадр на временной шкале.

3 Откройте панель «Действия» и скопируйте код на панель «Сценарий».

4 Запустите программу, выбрав «Управление» «Тестировать ролик».

Результат выполнения кода можно посмотреть в созданном SWF-файле.

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

Создание и применение фильтров Фильтры позволяют применять ряд эффектов к растровым объектам и экранным объектам (от тени до скосов и размытия). Каждый фильтр определен как класс. Поэтому применение фильтров предполагает создание экземпляров объектов фильтров, что неотличимо от создания любого другого объекта. После создания экземпляра объекта фильтра его можно легко применить к экранному объекту, воспользовавшись свойством filters объекта. В случае объекта BitmapData это делается с помощью метода applyFilter().

Создание нового фильтра Чтобы создать новый объект фильтра, просто вызовите метод конструктора для выбранного класса фильтра.

Например, чтобы создать новый объект DropShadowFilter, воспользуйтесь следующим кодом:

import flash.filters.DropShadowFilter;

var myFilter:DropShadowFilter = new DropShadowFilter();

Хотя здесь это не показано, конструктор DropShadowFilter() (как и конструкторы всех классов фильтра) принимает ряд необязательных параметров, которые можно использовать для настройки внешнего вида эффекта фильтра.

–  –  –

Применение фильтра к экранному объекту Когда эффекты фильтров применяются к экранному объекту, это происходит с помощью свойства filters.

Свойство filters экранного объекта является экземпляром Array, элементы которого являются объектами фильтров, примененными к экранному объекту.

Чтобы применить к экранному объекту один фильтр, создайте экземпляр фильтра, добавьте его к экземпляру Array и присвойте этот объект Array свойству filters экранного объекта:

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.filters.DropShadowFilter;

// Create a bitmapData object and render it to screen var myBitmapData:BitmapData = new BitmapData(100,100,false,0xFFFF3300);

var myDisplayObject:Bitmap = new Bitmap(myBitmapData);

addChild(myDisplayObject);

// Create a DropShadowFilter instance.

var dropShadow:DropShadowFilter = new DropShadowFilter();

// Create the filters array, adding the filter to the array by passing it as // a parameter to the Array() constructor.

var filtersArray:Array = new Array(dropShadow);

// Assign the filters array to the display object to apply the filter.

myDisplayObject.filters = filtersArray;

Если нужно присвоить объекту несколько фильтров, просто добавьте все фильтры к экземпляру Array перед присвоением его свойству filters. К объекту Array можно добавить несколько объектов, передав их конструктору в качестве параметров.

Например, этот код применяет фильтр фаски и фильтр свечения к ранее созданному экранному объекту:

import flash.filters.BevelFilter;

import flash.filters.GlowFilter;

// Create the filters and add them to an array.

var bevel:BevelFilter = new BevelFilter();

var glow:GlowFilter = new GlowFilter();

var filtersArray:Array = new Array(bevel, glow);

// Assign the filters array to the display object to apply the filter.

myDisplayObject.filters = filtersArray;

Для создания массива, содержащего фильтры, можно использовать конструктор new Array() (как показано в предыдущих примерах), либо воспользоваться синтаксисом литерала Array, поместив фильтры в квадратные скобки ([]).

Например, следующая строка кода:

var filters:Array = new Array(dropShadow, blur);

–  –  –

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

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

Например, следующая строка кода применяет фильтр размытия к экранному объекту с именем myDisplayObject:

myDisplayObject.filters = [new BlurFilter()];

Предыдущий код создает экземпляр Array с помощью синтаксиса литерала Array (квадратные скобки), создает новый экземпляр BlurFilter в качестве элемента объекта Array и присваивает этот объект Array свойству filters экранного объекта с именем myDisplayObject.

Удаление фильтров из экранного объекта Удаление всех фильтров из экранного объекта настолько же просто, как и присвоение нулевого значения свойству filters:

myDisplayObject.filters = null;

Если к объекту применены несколько фильтров и требуется удалить только один из фильтров, следует выполнить ряд действий, чтобы изменить массив свойства filters. Дополнительные сведения см. в разделе «Возможные проблемы при работе с фильтрами» на странице 380.

Применение фильтра к объекту BitmapData Применение фильтра к объекту BitmapData требует использования метода applyFilter() для объекта

BitmapData:

var rect:Rectangle = new Rectangle();

var origin:Point = new Point();

myBitmapData.applyFilter(sourceBitmapData, rect, origin, new BlurFilter());

Метод applyFilter() применяет фильтр к исходному объекту BitmapData, в результате чего появляется новое фильтрованное изображение. Этот метод не изменяет исходный оригинал; вместо этого результат применения фильтра к исходному изображению сохраняется в экземпляре BitmapData, по отношению к которому применяется метод applyFilter().

Как работают фильтры Фильтрация экранных объектов выполняется путем кэширования копии исходного объекта в качестве прозрачного растрового изображения.

После применения фильтра к экранному объекту Adobe Flash Player или Adobe® AIR™ кэширует объект в качестве растрового изображения до тех пор, пока объект имеет действительный список фильтров. Исходное растровое изображение затем используется в качестве исходного изображения для всех примененных впоследствии эффектов фильтров.

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

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 380 Фильтрация экранных объектов Возможные проблемы при работе с фильтрами При работе с фильтрами необходимо учитывать ряд потенциальных источников путаницы или проблем. Они описаны в следующих разделах.

Кэширование фильтров и растровых изображений Чтобы применить фильтр к экранному объекту, необходимо включить кэширование растровых изображений для этого объекта. Если фильтр применяется к экранному объекту, свойству cacheAsBitmap которого присвоено значение false, Flash Player или AIR автоматически присваивает свойству cacheAsBitmap объекта значение true. Если позднее все фильтры из экранного объекта удаляются, Flash Player или AIR сбрасывает значение свойства cacheAsBitmap, присваивая ему последнее выбранное значение.

Изменение фильтров во время выполнения Если к экранному объекту уже применен один или несколько фильтров, набор фильтров невозможно изменить путем добавления дополнительных фильтров или удаления фильтров из массива свойства filters.

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

Добавление дополнительного фильтра Процесс добавления дополнительного фильтра к экранному объекту, к которому уже применен один или несколько фильтров, показан в следующем коде. Сначала к экранному объекту с именем myDisplayObject применяется фильтр свечения; затем при нажатии на экранный объект вызывается функция addFilters().

В этой функции к myDisplayObject применяются два дополнительных фильтра:

import flash.events.MouseEvent;

import flash.filters.*;

myDisplayObject.filters = [new GlowFilter()];

function addFilters(event:MouseEvent):void { // Make a copy of the filters array.

var filtersCopy:Array = myDisplayObject.filters;

// Make desired changes to the filters (in this case, adding filters).

filtersCopy.push(new BlurFilter());

filtersCopy.push(new DropShadowFilter());

// Apply the changes by reassigning the array to the filters property.

myDisplayObject.filters = filtersCopy;

}

–  –  –

Удаление фильтра из набора фильтров Если к экранному объекту применено несколько фильтров и требуется удалить один из этих фильтров, продолжая применять остальные фильтры к объекту, фильтры копируются во временный массив, ненужный фильтр удаляется из массива, а затем выполняется повторное назначение временного массива свойству filters экранного объекта. В разделе «Получение значений и удаление элементов массива» на странице 174 указан ряд способов удаления одного или нескольких элементов из массива.

Наиболее прямой способ состоит в удалении самого верхнего фильтра объекта (фильтра, примененного к объекту последним).

Метод pop() класса Array используется для удаления фильтра из массива:

// Example of removing the top-most filter from a display object // named "filteredObject".

var tempFilters:Array = filteredObject.filters;

// Remove the last element from the Array (the top-most filter).

tempFilters.pop();

// Apply the new set of filters to the display object.

filteredObject.filters = tempFilters;

Точно так же, чтобы удалить самый нижний фильтр (первый фильтр, примененный к объекту), используется тот же код, подставляющий метод shift() класса Array вместо метода pop().

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

Например, следующий код удаляет второй фильтр (фильтр с указателем 1) из экранного объекта:

// Example of removing a filter from the middle of a stack of filters // applied to a display object named "filteredObject".

var tempFilters:Array = filteredObject.filters;

// Remove the second filter from the array. It's the item at index 1 // because Array indexes start from 0.

// The first "1" indicates the index of the filter to remove; the // second "1" indicates how many elements to remove.

tempFilters.splice(1, 1);

// Apply the new set of filters to the display object.

filteredObject.filters = tempFilters;

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

Наиболее оптимальный подход состоит в разработке собственного приложения, чтобы удаляемый фильтр всегда находился на одной и той же позиции в наборе фильтров. Например, если у вас имеется единичный экранный объект, к которому применен фильтр свертки и фильтр тени (именно в таком порядке), и требуется удалить фильтр тени, сохранив фильтр свертки, этот фильтр находится в известной позиции (самый верхний фильтр). Благодаря этому вы всегда можете заранее узнать, какой метод Array использовать (в данном случае Array.pop() для удаления фильтра тени).

ПРОГРАММИРОВАНИЕ НА ACTIONSCRIPT 3.0 В FLASH 382 Фильтрация экранных объектов Если фильтр, который требуется удалить, всегда принадлежит определенному типу, но не обязательно занимает одну и ту же позицию в наборе фильтров, вы можете проверить тип данных для каждого фильтра в массиве, чтобы определить, какой из них следует удалить. Например, следующий код определяет, какой фильтр в наборе является фильтром свечения, и удаляет этот фильтр из набора.

// Example of removing a glow filter from a set of filters, where the //filter you want to remove is the only GlowFilter instance applied // to the filtered object.

var tempFilters:Array = filteredObject.filters;

// Loop through the filters to find the index of the GlowFilter instance.

var glowIndex:int;

var numFilters:int = tempFilters.length;

for (var i:int = 0; i numFilters; i++) { if (tempFilters[i] is GlowFilter) { glowIndex = i;

break;

} } // Remove the glow filter from the array.



Pages:     | 1 |   ...   | 5 | 6 || 8 | 9 |   ...   | 13 |
Похожие работы:

«4 МЕТОДИКА КУРСОВОГО ПРОЕКТИРОВАНИЯ ПО ДИСЦИПЛИНЕ "АРХИТЕКТУРА КОМПЬЮТЕРОВ И ВЫЧИСЛИТЕЛЬНЫХ СИСТЕМ" (на примере операции умножения) 4.1 Кодирование чисел 4.1.1 Кодирование знака числа. Кодирование чисел позволяет заменить операцию арифметического вычитания операцией алгебраического сложения в двоичной системе счисления. Для кодирования...»

«ИНФОРМАЦИОННО-ВЫЧИСЛИТЕЛЬНЫЕ СИСТЕМЫ И КОМПЛЕКСЫ УДК 519.6 В.И. Агошков, М.В. Ассовский, С.В. Гиниатулин, Н.Б. Захарова, Г.В. Куимов, И.Е. Пармузин, В.В. Фомин Институт вычислительной математики Российской академии наук, г. Москва И...»

«Федеральное агентство связи Федеральное государственное бюджетное образовательное учреждение высшего образования "Сибирский государственный университет телекоммуникаций и информатики" (СибГУТИ) Кафедра Вычислительных систем Допустить к защите Зав.каф. _Мамойленко С.Н. ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА МАГИСТРА Исследование и...»

«Крылова И.В, Пивоварова Л.М., Савина А.В., Ягунова Е.В. Исследование новостных сегментов российской "снежной революции": вычислительный эксперимент и интуиция лингвистов // Понимание в коммуникации: Человек в информационном пространстве: сб. научных трудов. В 3 тт. – Ярославль – Москва: Изд...»

«Федеральное агентство по образованию Государственное образовательное учреждение высшего профессионального образования Владимирский государственный университет В.Н. ГОРЛОВ, Н.И. ЕРКОВА МЕТОДЫ ВЫЧИСЛИТЕЛЬНОЙ МАТЕМАТИКИ ДЛЯ ПЕРСО...»

«МИНИСТЕРСТВО СЕЛЬСКОГО ХОЗЯЙСТВА РФ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ "РЯЗАНСКИЙ ГОСУДАРСТВЕННЫЙ АГРОТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ ИМЕНИ П.А.КОСТЫЧЕВА" ИНЖЕНЕР...»

«Федеральное государственное бюджетное учреждение науки Инстиryт систем информатики им. А.П. Ершова Сибирского отделения Российской академии наук (иси со рАн) иси со рАн РАБОЧАЯ ПРОГРАММА ДИСЦИПЛИНЫ Системы искусственного интеллекта) Направление подготовки: 09.06.0...»

«Российская академия наук ИНСТИТУТ ВЫЧИСЛИТЕЛЬНОЙ МАТЕМАТИКИ Информационно-вычислительная система вариационной ассимиляции данных измерений ИВС-T2 Агошков В.И., Ботвиновский Е.А., Гусев А.В., Кочуров А.Г., Лебедев С.А., Пармузин Е.И., Шутяев В.П. Москва 2008 Введение Проекты ИВМ РАН по проблемам создания...»

«Оселедец Иван Валерьевич УДК 519.6 Нелинейные аппроксимации матриц 01.01.07 Вычислительная математика ДИССЕРТАЦИЯ На соискание учёной степени кандидата физико-математических наук Научный руководитель чл.-корр. РАН, проф. Тыртышников Е. Е. Москва 2007 Содержание Введение 2 i.1 Нелинейные аппроксимации матриц: зачем и к...»

«ПРАВИТЕЛЬСТВО МОСКВЫ ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ г. МОСКВЫ СЕВЕРО-ЗАПАДНОЕ ОКРУЖНОЕ УПРАВЛЕНИЕ ОБРАЗОВАНИЯ ГОУ СОШ № 1298 125466, г. Москва, ул. Юровская, д. 97, тел./факс: 8-499-501-28-92 (94) www.school1...»

«Информационные процессы, Том 14, № 1, 2014, стр. 87–107. 2014 Лопес-Мартинес, Кобер, Карнаухов. c МАТЕМАТИЧЕСКИЕ МОДЕЛИ, ВЫЧИСЛИТЕЛЬНЫЕ МЕТОДЫ Восстановление изображений с помощью микросканирующей изображ...»

«Министерство образования и науки Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования "Владимирский государственный университет имени Александра Григорьевича и Николая Григорьевича Столетовых" (ВлГУ) Институт прикладной математики и информатики биои...»

«Санкт-Петербургский государственный университет Кафедра математической теории игр и статистических решений Феофанов Василий Алексеевич Выпускная квалификационная работа бакалавра Дискримина...»

«Применение параллельных алгоритмов для решения системы линейных алгебраических уравнений с ленточной матрицей итерационными методами на кластерной системе Демешко И.П., Акимова Е.Н., Коновалов А.В. Представлены результаты применения пар...»

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

«Известия высших учебных заведений. Поволжский регион МАШИНОСТРОЕНИЕ И МАШИНОВЕДЕНИЕ УДК 004.8:621.923. А. А. Игнатьев, А. В. Каракозова АНАЛИЗ ИНФОРМАТИВНОСТИ ВИБРОАКУСТИЧЕСКИХ ПАРАМЕТРОВ ПРИ КОНТРОЛЕ ДИНАМИЧЕСКОГО СОСТОЯНИЯ СТАНКОВ Аннотация. Актуальность и цели. Системе мониторинга технологического процесс...»

«0315654 Новые достижения, новые возможности! Компания АЛС и ТЕК была создана в 1993 году коллективом ведущих разработчиков оборонных предприятий г. Саратова. Работая в постоянном сотрудничестве с Министерством...»

«Встречайте: новый ПЛК110. ОВЕН ПЛК110 NEW.ПРЕДПОСЫЛКИ ПОЯВЛЕНИЯ НОВОГО КОНТРОЛЛЕРА. Почему компания ОВЕН решила делать новый ПЛК110 1. Существовал ряд пожеланий к выпускаемому контроллеру 2. Удовлетворить новые требованиями рынка...»

«Всеволод Несвижский Санкт-Петербург "БХВ-Петербург" УДК 681.3.068 ББК 32.973.26-018.1 Н55 Несвижский В. Н55 Программирование аппаратных средств в Windows. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2008. — 528 с.: ил. + CD-ROM...»

«ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ Е. В. Баранова, профессор кафедры информатики И. К. Елизарова, программист учебно-методического управления ИНФОРМАЦИОННОЕ СОПРОВОЖДЕНИЕ ИНДИВИДУАЛЬНО-ОРИЕНТИРОВАННОГО УЧЕБНОГО ПРОЦЕССА Ин...»

«МИНИСТЕРСТВО СЕЛЬСКОГО ХОЗЯЙСТВА РОССИЙСКОЙ ФЕДЕРАЦИИ Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования КУБАНСКИЙ ГОСУДАРСТВЕННЫЙ АГРАРНЫЙ УНИВЕРСИТЕТ РАБОЧАЯ ПРОГРАММА "РЫНОК ЦЕННЫХ БУМАГ" дисциплины для специальности 08080165 "Прикладная информатика (по област...»

«УДК 620.19 : 622.83 ФИЗИЧЕСКИЕ И МЕТОДОЛОГИЧЕСКИЕ АСПЕКТЫ АКУСТОЭМИССИОННОГО КОНТРОЛЯ НАПРЯЖЕННО-ДЕФОРМИРОВАННОГО СОСТОЯНИЯ МАССИВА ГОРНЫХ ПОРОД Аркадий Васильевич Леонтьев Федеральное государственное бюдж...»

«1 Открытый урок по математике в 5 классе по теме: Деление десятичных дробей на натуральные числа Тема: "Деление десятичных дробей на натуральные числа"Цели: 1. Продолжить работу над формированием умени...»








 
2017 www.lib.knigi-x.ru - «Бесплатная электронная библиотека - электронные матриалы»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.