Tweening eines gerundeten Rechtecks ​​in Actionscript 3

Question

Ich möchte zwischen einem kurzen abgerundeten Rechteck und einem hohen abgerundeten Rechteck tweenen. (Ich will nur mit der Höhe umgehen - keine anderen Parameter). Ich programmiere mit ActionScript 3. Meine Tweening Engine ist TweenLite.

Ich tweening ein Sprite, das ein abgerundetes Rechteck enthält. Das getweente Sprite erzeugt Verzerrungen. Ich vermute, dass ich das ursprüngliche Bild skaliert habe und nicht die Höhe des abgerundeten Rechtecks?

Hier ist ein einfaches Beispiel für meinen Code:

-

Zeichnen Sie das Rechteck mit abgerundeten Ecken:

RoundRect = new Sprite();
roundRect.graphics.beginFill (0x000000);
roundRect.graphics.drawRoundRect (0,0,50,15,4,4); // Original Höhe: 15
roundRect.graphics.endFill();
addChild (RundRekt);

Dann höre ich für ein Mausklick-Ereignis auf dem abgerundeten Rechteck.

das Mausereignis löst eine Funktion mit dem folgenden Code:

TweenLite.to (this.roundRect, 1, {Höhe: 120}); // Endgültige Höhe: 120

-

würde Ich mag die Höhe des abgerundeten Rechtecks ​​sich Tweens. Ich würde hoffen, dass dies nicht die unerwünschte Verzerrung erzeugen würde. Gibt es einen Weg, dies zu erreichen?

Vielen Dank.

Answer 1

Dies kann mit "9-slice scaling" erreicht werden.

Im Folgenden finden Sie zwei Tutorials zum Einrichten eines Movieclip zur Verwendung der 9-teiligen Hilfslinien, wobei einer über die IDE (unter Verwendung der Richtlinien) und der andere Code ausgeführt wird (indem ein Rechteck mit der Bezeichnung grid definiert wird) Movieclips scale9Grid-Eigenschaft).

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

Sobald die scale9Grid Eigenschaft, die Sie skalieren richtig zugewiesen wurde (und Tween), um den Movieclip wie ohne jede Verzerrung vorgesehen.

Es könnte auch lesenswert sein: http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/, beschreibt verschiedene Szenarien, wenn scale9grid tut und nicht funktioniert. (hauptsächlich mit verschachtelten Kindern und Nicht-Vektor-Grafiken innerhalb des Gitters zu tun).

Hoffe, das hilft.

Answer 2

Als Alternative und da sein nur ein Rechteck mit abgerundeten Ecken, könnte man auch etwas tun:

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}); 
}