# How is this mask effect created?

**URL:** https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901
**Category:** flash
**Created:** [October 30, 2015, 4:52pm UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901 "2015-10-30T16:52:40Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![putch](https://avatars.discourse-cdn.com/v4/letter/p/96bed5/32.png) [@putch](https://forum.kirupa.com/u/putch)
#### Post date: [October 30, 2015, 4:52pm UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/1 "2015-10-30T16:52:40Z")

</div>

I can create the mouse follow, but how do I make the effect stay like they do in this example?

> **[Elion's christmas greeting](https://www.telia.ee/docs/joulukaart/eng/)**
>
> Sometimes, it only takes a little to change big things. Move your mouse on the picture and you will see that a lot depends on you.

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [October 31, 2015, 2:09pm UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/2 "2015-10-31T14:09:49Z")

</div>

It might use the drawing API to draw in the mask. So as you follow the mouse, drawing in the mask can reveals the image beneath.

You could just have an image on the bottom and draw into an empty clip on top, what you’re drawing being the bitmap of what’s revealed.

This is old, and probably not usable, but checking out the code might give some hints  
[http://senocular.com/flash/source/?entry=748](http://senocular.com/flash/source/?entry=748)

---

<div class="post-metadata">

### Author: ![putch](https://avatars.discourse-cdn.com/v4/letter/p/96bed5/32.png) [@putch](https://forum.kirupa.com/u/putch)
#### Post date: [November 2, 2015, 3:09am UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/3 "2015-11-02T03:09:48Z")

</div>

> [@senocular](#):
>
> You could just have an image on the bottom and draw into an empty clip on top, what you’re drawing being the bitmap of what’s revealed.

Can you give me a quick example of what you are talking about? That sounds like something that would work. I’m just looking for something simple.

Thanks senocular!

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 2, 2015, 10:28pm UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/4 "2015-11-02T22:28:56Z")

</div>

You basically need this:

```javascript
var bmp:BitmapData = new MyLibraryBitmap();

function handleMouseMove (event:MouseEvent):void {
	this.graphics.beginBitmapFill(bmp);
	this.graphics.drawCircle(event.localX, event.localY, 40);
	this.graphics.endFill();
}

this.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);

```

Now this probably won’t work as is because you won’t get mouse events on an empty object if the timeline you’re adding this to it empty. But if you have something in there, it’d likely be covering up the graphics layer so you couldn’t see anything. So what you can do is either add a transparent layer to get mouse events from, or instead of using this.graphics, create an empty movie clip (which you can do with code) and draw into it’s graphics. Alternatively, you could listen for stage mouse events instead of listening to this… basically, it may take some finagling depending on how you have things set up, but thats the basics right there ^: Draw a bitmap into a graphics layer with mouse movement.

---

<div class="post-metadata">

### Author: ![putch](https://avatars.discourse-cdn.com/v4/letter/p/96bed5/32.png) [@putch](https://forum.kirupa.com/u/putch)
#### Post date: [November 4, 2015, 11:33pm UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/5 "2015-11-04T23:33:34Z")

</div>

OK, I’ve got things almost working but need just a bit more help.

I have a file that’s pulling in another swf file. Here is the code pulling it in:

```
stop();

var myLoader:Loader = new Loader();                   
var url:URLRequest = new URLRequest("scene.swf"); 
myLoader.load(url);                                   
addChild(myLoader);                  
 
// (optional)
myLoader.x = 30;       
myLoader.y = 30; 

```

Now I have a button on the first file that I want to reload that loaded swf file when clicked. I can’t seem to get the button code to work and “refresh” it. Any help?

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 4, 2015, 11:49pm UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/6 "2015-11-04T23:49:45Z")

</div>

You basically just run that code again. Only you need to make sure you remove what’s already there.

```auto
stop();

var myLoader:Loader;

function loadScene():void {
    if (myLoader) {
        myLoader.unloadAndStop();
        removeChild(myLoader);
    }
    myLoader = new Loader();                   
    var url:URLRequest = new URLRequest("scene.swf"); 
    myLoader.load(url);                                   
    addChild(myLoader);                  
 
    // (optional)
    myLoader.x = 30;       
    myLoader.y = 30;
}

loadScene(); // call now to start, then call again in button code

```

---

<div class="post-metadata">

### Author: ![putch](https://avatars.discourse-cdn.com/v4/letter/p/96bed5/32.png) [@putch](https://forum.kirupa.com/u/putch)
#### Post date: [November 5, 2015, 1:30am UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/7 "2015-11-05T01:30:42Z")

</div>

Hmm. Added this:

```
stop();

var myLoader:Loader;

function loadScene():void {
    if (myLoader) {
        myLoader.unloadAndStop();
        removeChild(myLoader);
    }
    myLoader = new Loader();                   
    var url:URLRequest = new URLRequest("scene.swf"); 
    myLoader.load(url);                                   
    addChild(myLoader);                  
 
    // (optional)
    myLoader.x = 30;       
    myLoader.y = 30;
}

loadScene(); // call now to start, then call again in button code

//Add event listener for button click
var singleLoader:Loader = new Loader();
backButton.addEventListener(MouseEvent.CLICK, backButtonClick);

//Create a function for the button click

function backButtonClick(ev:MouseEvent):void
{
    var request:URLRequest = new URLRequest("scene.swf");
    singleLoader.unloadAndStop(true);
    singleLoader.load(request);
    addChild(myLoader);
}

```

and I’m getting this as my error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.  
at scene\_fla::MainTimeline/frame1()

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 5, 2015, 5:55pm UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/8 "2015-11-05T17:55:16Z")

</div>

Nothing about that code jumps out at me as something that would cause that error. Debug the movie to see where its happening. My guess is that its not in the above code.

---

<div class="post-metadata">

### Author: ![putch](https://avatars.discourse-cdn.com/v4/letter/p/96bed5/32.png) [@putch](https://forum.kirupa.com/u/putch)
#### Post date: [November 5, 2015, 9:05pm UTC](https://forum.kirupa.com/t/how-is-this-mask-effect-created/633901/9 "2015-11-05T21:05:49Z")

</div>

OK, I no longer get errors but its not working. I’ve attached folder with files in it. Can you take a look?

[http://www.scottberks.com/clientwork/flash/flash.zip](http://www.scottberks.com/clientwork/flash/flash.zip)

I’m using CS6
