Jump to content
Search Community

Keeping corners round when scaling?

junky test
Moderator Tag

Recommended Posts

Is there a way to have a rectangle shape with rounded corners and have the rounded corners not get distorted when tweened?

var child:Shape = new Shape();
  child.graphics.beginFill(0xcccccc);
  //child.graphics.lineStyle(1, 0x000000, 1, true, LineScaleMode.NONE);
  child.graphics.drawRoundRect(0, 0, 100, 100, 12);
  child.graphics.endFill();
  addChild(child);

  TweenMax.to(child, .5, {width: 200})

 

But the corners get stretched rather than staying the proper shape?

 

I've come across a scale9Grid, but don't know if that's the right direction or can be applied to this.

 

PLEASE. HELP.

Link to comment
Share on other sites

There are a few ways to do this. The first is indeed the scale9 stuff. See Adobe's docs for that.

 

The second option would be to just redraw your rectangle each time the tween refreshes which could be done either in a setter of a custom class or you could use an onUpdate like this:

 

var childWidth:Number = 100;
var child:Shape = new Shape();
addChild(child);
redrawChild();

TweenMax.to(this, .5, {childWidth: 200, onUpdate:redrawChild});

function redrawChild():void {
   child.graphics.clear();
   child.graphics.beginFill(0xcccccc);
   child.graphics.drawRoundRect(0, 0, childWidth, 100, 12);
   child.graphics.endFill();
}

Link to comment
Share on other sites

I suggest you yo use scale9grid, it works perfect for me .

 

 

var mySprite : Sprite = new Sprite();
mySprite.graphics.beginFill(0xff0000);
mySprite.graphics.lineStyle(2, 0x00ff00);
mySprite.graphics.drawRoundRect(0, 0, 200, 200, 50);
mySprite.graphics.endFill();

mySprite.x = 100;
mySprite.y = 100;

this.addChild(mySprite);
mySprite.scale9Grid = new Rectangle(60, 60, 100, 100);

Link to comment
Share on other sites

What di you mean by tweening scale9grid? It is attached to the MovieClip (or sprite ) so you don't think about resizing and can tween it any way.

 

Take a loook at http://burnandbass.com/tScroller.swf , this is an simple multi-purpose scroller I build couple of years ago. It uses scale9grid for handlebar and the track. You may need to resize your screen to view it in action :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...