Question

I’m working on an AS3 project whereby an element needs to expand (downward) on hover. The problem is that I can’t figure out how to expand the element without AS3 auto-scaling all of it’s contents.

For example (this is a Sprite):

private function expand(event:Event):void {
  TweenLite.killTweensOf(this);
  TweenLite.to(this, .2, {
    height: _dimensions.tall_height
  });
  return;
}

Will automatically grow all children of this to fill the available space. I’m looking to disable this functionality, leaving the previously visible content in-place, so that I can reveal additional content with the new space. Playing with scaleY in the TweenLite statement doesn’t seem to do anything.

It doesn’t make any sense to me why this is the default behavior, but I come from an HTML (think “box-model”) layout mindset, so I think that’s getting me into trouble.

Perhaps I’ve got the wrong idea entirely – is there a more AS3-appropriate method for “expanding” this to reveal the extra content?

Answer 1

OK, so you can’t “disable” scaling in Flash. If you want to show only part of an object, you’ll have to use what’s called a mask.

Suppose you have an object box (Sprite), and you want to show only the top 200px of this object:

var m:Sprite = new Sprite();

var g:Graphics = m.graphics;
g.beginFill(0);
g.drawRect(0, 0, box.width, 200);
g.endFill();

// Apply mask
box.mask = m;

Now later when you want to reveal the entire object, you can simply redraw the mask:

var m:Sprite = Sprite(box.mask);

// Redraw mask, now 400px
var g:Graphics = m.graphics;
g.beginFill(0);
g.drawRect(0, 0, box.width, 400);
g.endFill();

// Reapply mask
box.mask = m;

And so on.

If you’re working with an AS3 project (not Flex), you can pretty much forget about setting width/height.