CODEWITHSUNDEEP
actionscript-3flash
user3756463
user3756463

Reputation: 9

flash actionscript 3.0 hide part of an image

I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.

Is there a way to hide just a part of an image?

On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.

image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png

I've tried by just reducing the height of image-2, but it looks awful and distorted.

Is there something in flash that works closely the same as CSS's behavior.

example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.

By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.

Is the mask property applicable in this situation?

I'm quite new to flash so I don't know a lot of things yet.

Upvotes: 0

Views: 404

Answers (2)

user3756463
user3756463

Reputation: 9

I got it working now, many THANKS @VC.One. heres how I did it.

Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.

I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.

Then applied the mask to img2_mc.

/* the code */
img2_mc.mask = mask_mc;

function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob

mask_mc.height = volumeKnob_y;

}

Upvotes: 0

helloflash
helloflash

Reputation: 2457

You can indeed use a mask.

How to programmatically create your mask

Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:

Main Timeline

myImage.mask = myMask;

function mouseMoveHandler(e:MouseEvent):void {
    myMask.height = myImage.y - e.stageY;
}

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

You have just to adapt this code to your animation, in the function where you click your button.

Upvotes: 1

Related Questions