No stretching.. no hairline

Hello. I’m xezton and yes this is my first post. I’ve been using Flash for a while and I’ve been able to duplicate some things on websites that interest me. There is one thing, though, that I’ve not been able to figure out.

When you dynamically resize some container movie clip to fit the contents (be it a picture or external swf loaded into an empty movie clip, etc) the container is stretched. If you use hairline, however, you don’t noticed a stretch like this.

Well what if you don’t want to use hairline? Check this out:
Notice how his borders are pretty thick. How is he doing this?

I may have just answered my own question but tell me if there is a better way than this:
He has a movie clip that has a white square graphic with curved corners, and then also a movie clip with a gray square with no borders. The inner gray clip scales to the same size as the content to be loaded, and is the same color as the background, so it looks as if the outer borders are thick, when in reality they are just the edges of the container movie clip coming out from underneath.
You think that’s how he did it?

And yes, I’ve seen the post about resizing with 12,000 + replies. It’s very cool… but it uses the hairline idea.
Let me know what you think.


Sorry it took so long to reply:

Ah, but how do the curved corners on the rectangle not distort as they are stretched?

My other idea is that he uses 8 different pieces for the border, 4 corners and 4 sides. All he does is change the width of each side accordingly and leave the 4 corners attached where they need to be.

Xezton is almost correct. 6 pieces : 4 corners (3 are smart), and a shape to handle both width and height.

7 if you count the dynamic shape used to mask the content as the window moves.


Hmm…well I’m going to say it’s all done in actionscript. That’s why that page seems so plain, but how the animation is so smooth.

The file attachment is a custom prototype that’ll allow you to dynamically draw rounded rectangles. The only thing else to do is write an easing script that’ll make the square appear to stretch.

I wish these boards would let me upload *.as files, instead of flat-text…