Tweening Rounded Rectangle в ActionScript 3

Question

Я хотел бы обойти между коротким закругленным прямоугольником и высоким закругленным прямоугольником. (Мне нужно только иметь дело с высотой - никаких других параметров). Я программирую с помощью ActionScript 3. Мой движок TweenLite.

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

Вот простой пример моего кода:

-

Нарисуйте прямоугольник с закругленными углами:

ROUNDRECT = новый Sprite();
roundRect.graphics.beginFill (0x000000);
roundRect.graphics.drawRoundRect (0,0,50,15,4,4); // Оригинальная высота: 15
roundRect.graphics.endFill();
addChild (roundRect);

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

Событие мыши вызывает функцию со следующим кодом:

TweenLite.to (this.roundRect, 1, {высота: 120}); // Заключительный высота: 120

-

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

спасибо.

Answer 1

Этого можно достичь с помощью «масштабирования 9-срезов».

Ниже приведены два руководства по настройке Movieclip для использования 9-срезных направляющих, один из которых выполняется через IDE (с использованием рекомендаций), а другой через код (путем определения прямоугольника, называемого сеткой, и назначения его свойство movieclip9Grid).

http://www.sephiroth.it/tutorials/flashPHP/scale9/

http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html

После свойство scale9Grid правильно назначен вы можете масштабировать (и твин) мувиклип по назначению без каких-либо искажений.

Возможно также стоит прочитать: http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/, который описывает различные сценарии, когда scale9grid работает и не работает. (в основном, чтобы иметь вложенные дети и не векторную графику внутри сетки).

Надеюсь, это поможет.

Answer 2

В качестве альтернативы, и так как его только прямоугольник с закругленными углами, вы также можете сделать что-то вроде этого:

var rectHeight = 15; 
var roundRect = new Sprite(); 
addChild(roundRect); 
updateRect(); 

function updateRect() { 
    roundRect.graphics.clear(); 
    roundRect.graphics.beginFill(0x000000); 
    roundRect.graphics.drawRoundRect(0,0,50,rectHeight,4,4); 
    roundRect.graphics.endFill(); 
} 

roundRect.addEventListener("click", click); 
function click(e) { 
    TweenLite.to(this, 1, {rectHeight:120, onUpdate:updateRect}); 
}