# Animated Mask

**URL:** https://forum.kirupa.com/t/animated-mask/189137
**Category:** flash
**Created:** [May 14, 2006, 4:29am UTC](https://forum.kirupa.com/t/animated-mask/189137 "2006-05-14T04:29:20Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Sonic21](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@Sonic21](https://forum.kirupa.com/u/Sonic21)
#### Post date: [May 14, 2006, 4:29am UTC](https://forum.kirupa.com/t/animated-mask/189137/1 "2006-05-14T04:29:20Z")

</div>

Hello, After I finished the first roll-over-movie-clip-button for my Flash project, I’m now getting starting to work on the animation, and now I have another question…😊

I want to make a very smooth transition from my 1st page(white background color) to a bit map image background.

My problem is, I want to use a vector-graphic as a shape which would mask-out the background image, what I mean is, the bit-map image should be shown inside the vector-graphic… hopefully, you guys understand what I mean… And I want to apply the vector graphic(as a mask) for many many times, and enlarge them in the tween, until all the shapes become sticked together, in order to show the whole background image.

I have seen this effect from some other sites for many times, Can anyone give me so suggestion?

I have downloaded a resource file from a website, the file got the simular effect, please check the attached file.

The only different with my design is, I don’t need the play button, I want it plays automatically. I’ve created all the elements on my own which also named as same as those elements in the resource file, just because I wanna to save some time for writing the script… 😊… of course it doesn’t work, here is the script in my Flash:

var rows = 8; // rows of fading squares  
var cols = 11; // columns of fading squares  
// ^ these are based on your square’s width and the area it has to cover  
var speed = 10; // speed of fade

// Fader: causes a clip to fade based on timeline’s speed  
// once a timeout variable reaches 0  
Fader = function(){  
if (this.timeout-- \<= 0){ // if time to fade  
// fade until 0 alpha then remove  
if ((this.\_alpha -= speed) \<= 0) this.removeMovieClip();  
}  
}

// CreateSquares: creates the squares over an area starting at x, y  
// and based on cols, rows that fade out based on Fader  
CreateSquares = function(x, y, rows, cols){  
// variables; r and c count rows and columns  
var r, c, square;  
var depth = 0;  
var initx = x; // initial x position  
for (r=0; r\<rows; r++){  
for (c=0; c\<cols; c++){  
// create each square for each row and column  
square = this.attachMovie(“whitesquare”, “square”+depth, depth, {\_x:x, \_y:y});  
square.timeout = Math.floor(Math.random()\*100); // random fade timer for Fader  
square.onEnterFrame = Fader; // Fader as onEnterFrame event function  
depth++;  
x += square.\_width; // set next position for next square  
}  
x = initx; // return x back to the left of the square grid  
y += square.\_height; // increase y for next row  
}  
}

// create the squares to begin the effect  
// content is the movieclip holding the image to  
// be revealed in this manner  
CreateSquares(content.\_x, content.\_y, rows, cols);

And here is the error message:

**Error** Scene=Main, layer=Layer 21, frame=15:Line 1: Statement must appear within on/onClipEvent handler  
var rows = 8; // rows of fading squares

**Error** Scene=Main, layer=Layer 21, frame=15:Line 2: Statement must appear within on/onClipEvent handler  
var cols = 11; // columns of fading squares

**Error** Scene=Main, layer=Layer 21, frame=15:Line 4: Statement must appear within on/onClipEvent handler  
var speed = 10; // speed of fade

**Error** Scene=Main, layer=Layer 21, frame=15:Line 8: Statement must appear within on/onClipEvent handler  
Fader = function(){

**Error** Scene=Main, layer=Layer 21, frame=15:Line 17: Statement must appear within on/onClipEvent handler  
CreateSquares = function(x, y, rows, cols){

**Error** Scene=Main, layer=Layer 21, frame=15:Line 39: Statement must appear within on/onClipEvent handler  
CreateSquares(content.\_x, content.\_y, rows, cols);

Total ActionScript Errors: 6 Reported Errors: 6

PLease Help!!!:kir: