Март 2011

I Платформа разработки Flex включает текстовые компоненты, которые могут быть аними-м$ 4 т рованы и стилизованы с помощью множества настраиваемых эффектов. Дополнительную ttft информацию можно получить в описании компонентов mx. controls. Text и mx. controls.

TextArea справочника по платформе разработки Flex 2 корпорации Adobe.

Листинг 24.8. Класс, представляющий перемещающийся текст

package { import flash. text.*;

public class SlidingText extends TextField { private var animator:Animator;

public function SlidingText (toX:Number, toY:Number, duration:Number) { animator = new Animator(this); slideTo(toX, toY, duration);

}

public function slideTo (toX:Number, toY:Number, duration:Number):void { animator. animateTo(toX, toY, duration);

}

}

}

Класс AnimationLibDemo, представленный в листинге 24.9, демонстрирует, как использовать классы Animator и SlidingText. Он создает круг, который перемещается в текущую позицию указателя мыши, когда пользователь щелкает кнопкой мыши в области отображения среды выполнения Flash. Этот класс также перемещает текст «Не11о» в позицию (300; 0) и закрепляет его там.

Листинг 24.9. Демонстрация использования класса Animator

package { import flash. display.*; import flash. events.*; import flash. text.*;

// Демонстрирует использование класса Animator public class AnimationLibDemo extends Sprite { private var circleAnimator:Animator;

public function AnimationLibDemo ( ) { // Создаем сообщение, которое с использованием анимационных // возможностей перемещается в позицию (300. 0) // за одну секунду (1000 мс)

var welcome:SlidingText = new SlidingText(300. 0. 1000); welcome. text = «Welcome!»;

welcome. autoSize = TextFieldAutoSize. LEFT; addChild(welcome);

// Создаем круг для анимации

var circle:Shape = new Shape( );

ci rcle. graphi cs.1i neSty1e(10, 0×666666);

ci rcle. graphi cs. begi nFi11 (0×999999);

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

addChild(circle);

// Создаем объект Animator для анимации объекта circle circleAnimator = new Animator(circle);

// Регистрируем приемник для событий мыши

stage. addEventLi stener(MouseEvent. M0USE_D0WN, mouseDownLi stener);

// Когда пользователь щелкает кнопкой мыши на сцене, перемещаем

// объект circle в точку, где произошел щелчок.

Private function. mouseDownListener (e:MouseEvent):void {

// Преобразуем точку из системы координат экземпляра класса Stage

// в систему координат данного экземпляра класса

var mousePt:Point = globalToLocal (new PointCe. stageX, e. stageY));

circleAnimator. animateTodnousePt. x, mousePt. y, 500);

}

**4

При создании элементов управления пользовательского интерфейса с эффектами анимации рассмотрите возможность расширения класса mx. core. UIComponent платформы Э?.’ разработки Flex вместо разработки собственной библиотеки, реализующей анимационные возможности. В классе UlComponent предусмотрен расширенный набор инструментов для добавления эффектов к собственным элементам управления пользовательского интерфейса.

Анимация, основанная на скорости

В среде Flash невозможно гарантировать определенный временной интервал, через который будет выполняться проверка запланированных обновлений экрана или будут возникать события TimerEvent. TIMER. Событие Event. ENTER_FRAME обычно возникает позднее запланированного времени, которое определяется назначенной скоростью кадров, а события TimerEvent. TIMER — позднее времени, определяемого переменной delay объекта Timer.

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

Листинг 24.10. Вычисление позиции с учетом скорости

package { import flash. display.*; import flash. events.*; import flash. utils.*;

// Перемещает объект на указанное количество пикселов в секунду, // независимо от скорости кадров public class Animation-extends Sprite { private var distancePerSecond:int = 50; // Количество пикселов,

public function Animation ( ) { // Создаем объект для анимации circle = new Shape( ); circle. graphics. beginFi11(OxOOOOFF, 1); circle. graphics. lineStyle(l): circle. graphics. drawEl1ipse(0, 0, 25, 25); addChild(circle);

// Инициализируем значения времени then = getTimer( ); now = then;

// Регистрируем приемник для получения уведомлений о проверках

//• запланированных обновлений экрана

addEventLi stener(Event. ENTER_FRAME, enterFrameLi stener);

}

// Обрабатываем события Event. ENTER_FRAME

private function enterFrameListener (e:Event):void {

// Вычисляем, сколько времени прошло с момента последнего перемещения

then = now;

now = getTimer( ):

var elapsed:int = now — then;

var numSeconds;Number = elapsed / 1000;

// Определяем количество пикселов, на которое должен переместиться // объект, учитывая промежуток времени, прошедший с момента // последнего перемещения

var moveAmount:Number = distancePerSecond * numSeconds;

// Перемещаем объект. В данном случае объект перемещается // под углом 0 градусов.

Private var circleiShape;

private var now:int; private var then:int;

// на которое должен

// перемещаться объект

// за одну секунду

// Текущее время

// Время последнего обновления

// экрана

// Анимируемый объект

circle. x += moveAmount;

}

}

}

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

Переходим к контурам и заливкам

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

ГЛАВА 25

Рисование с помощью векторов

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

Объекты Shape потребляют меньше памяти, чем объекты Sprite и MovieClip. Таким образом, чтобы уменьшить потребление памяти, векторное содержимое лучше рисовать в объектах Shape, когда нет необходимости в контейнерных и интерактивных возможностях классов Sprite и MovieClip.

_4

Обзор класса Graphics

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

Таблица 25.1. Обзор класса Graphics

Назначение Метод класса Graphics

Рисование линий curveTo(), lineTo()

Рисование фигур beginBitmapFill(), beginFill(), beginGradientFill(), drawCircle(), drawEllipse(), drawRect(), drawRoundRect(), drawRoundRectComplex(), endFill()

Определение стилей линий lineGradientStyle(), lineStyle()

Перемещение чертежного пера moveTo()

Удаление графики clear()

По существу, в языке ActionScript линии и кривые рисуются гипотетическим «чертежным пером». Для всех новых объектов Sprite, MovieClip и Shape перо первоначально устанавливается в положение (0; 0). По мере рисования линий и кривых (с помощью методов 1 ineTo ( ) и curve То ( ) ) перо перемещается по координатному пространству объекта, останавливаясь в конечной точке последней нарисованной линии или кривой. Текущая позиция пера всегда обозначает начальную точку следующей рисуемой линии или кривой. Чтобы установить начальную точку линии или кривой в произвольную позицию, мы используем метод move То ( ), который

«поднимает» чертежное перо и перемещает его в новую позицию, не рисуя линию к указанной точке.

Продолжение:

1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,

41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,

77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,

109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,

135,136,137,138,139,140

Рисование линий

Для рисования прямых линий используется метод lineTo ( ), который рисует линию из текущей позиции чертежного пера в указанную точку (х; у). Например, следующий код создает новый объект Shape и рисует линию из точки (0; 0) в точку (25, 35):

var canvas:Shape = new Shape( ); canvas. graphics. lineTo(25, 35): addChild(canvas);

Однако если вы попытаетесь выполнить этот код таким, как есть, то можете быть удивлены, обнаружив, что на экране не появилось никакой линии! По умолчанию все рисуемые линии и фигуры не имеют контура. Чтобы отобразить контур, мы должны использовать метод lineStyle( ), устанавливающий визуальные характеристики (толщина, цвет и т. д.) для всех линий и фигур, которые будут нарисованы в дальнейшем. Для справки ниже представлена сигнатура метода lineStyle ( ), которая демонстрирует доступные визуальные параметры и их значения по умолчанию. Подробную информацию по каждому параметру можно найти в справочнике по языку ActionScript корпорации Adobe.

1ineStyle(thickness:Number =1.0, color:uint = 0, alpha:Number =1.0, pixelHinting:Boolean = false, scaleMode:String = «normal», caps:String = null, joints:String = null, miterLimit:Number = 3)

Метод lineStyle ( ) должен вызываться явно для каждого нового объекта Sprite, MovieClip и Shape, иначе никакой контур отображен не будет (хотя заполняемые области могут рисоваться без контура).

Рассмотрим несколько примеров, демонстрирующих различные способы изменения стиля линий объекта canvas. Следующий код удаляет стиль линий (нарисованные в дальнейшем линии, кривые и заливки не будут иметь контура):

canvas. graphics. lineStyleC )

Следующий код устанавливает для стиля линий толщину 1 пиксел и сплошной черный цвет:

canvas. graphi cs.1i neStyle(1)

Представленный далее код устанавливает для стиля линий толщину 1 пиксел и сплошной зеленый цвет:

canvas. graphics. 1 ineStyled, OxOOFFOO)

Следующий код устанавливает для стиля линий толщину 2 пиксела и зеленый цвет с прозрачностью 50 %:

canvas. graphics. lineStyled, OxOOFFOO. 50)

Теперь нарисуем линию из точки (0; 0) в точку (25; 35), как раньше, но на этот раз применим контур синего цвета толщиной 3 пиксела, заставив эту линию появиться на экране:

var canvas:Shape = new Shape( ):

canvas. graphics.!ineStyle(3, OxOOOOFF); // Применяем контур синего цвета

canvas. graphics. lineTo(25, 35): addChild(canvas):

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

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

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

// Создаем объект Sprite и помещаем его на экран var container:Sprite = new Sprite( ): addChild(container);

// Создаем объект TextField

var msg:TextField = new TextField( );

msg. text = «Hello»:

msg. border = true;

msg. background = true;

msg. autoSize = TextFieldAutoSize. LEFT;

contai ner. addChi1d(msg);

// Рисуем линию

contai ner. graphi cs.1ineStyle(3, OxOOOOFF); container. graphics. lineTo(25, 35);

На рис. 25.1 показан результат выполнения предыдущего кода.

Hello

Рис. 25.1. Векторное содержимое позади объекта TextField

^ I Содержимое, нарисованное с помощью объекта graphics в объекте Sprite или MovieClip, Л щ всегда отображается позади любых дочерних объектов данного объекта Sprite или tfft* MovieClip (то есть заслоняется).

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

var canvas:Shape = new Shape( ); canvas. graphics. lineStyled, 0×000000); canvas. graphics. lineTodOO, 0); canvas. graphics. lineStyle(5, OxFFOOOO); canvas. graphics. lineTodOO, 100); canvas. graphics. 1 ineStyledO. OxOOFFOO); canvas. graphics. lineTo(0, 100); canvas. graphics. lineStyle(15, OxOOOOFF); canvas. graphics. lineTo(0, 0); addChild(canvas);

На рис. 25.2 показаны результаты выполнения предыдущего кода.

П

Рис. 25.2. Линии с изменяющейся толщиной

Обратите внимание, что на рис. 25.2 конечные точки линий (называемые концами линии) по умолчанию закруглены. Чтобы вместо закругленных концов линий выбрать квадратные, используйте параметр caps метода lineStyle ( ). Например, следующий код создает линию зеленого цвета толщиной 10 пикселов с квадратными концами:

canvas. graphics. lineStyledO, OxOOFFOO, 1, false,

Li neScaleMode. NORMAL. CapsSty1e. SQUARE);

При нулевой толщине контур превращается в визирную линию (ее толщина составляет 1 пиксел и не изменяется даже при увеличении масштаба объекта или области отображения среды выполнения Flash). Другие варианты масштабирования линий можно установить параметром scaleMode метода lineStyle ( ).