First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: Paul Price | Website: http://www.chapterzero.org

The Stage setup:

MASKED PIC LAYER

Go back to the main timeline. Name the first layer on the main stage "MASKED PICS LAYER". Now add another layer above it and name it "ACTIONS". Lock the ACTIONS LAYER. Drag an instance of the MASKED PICS MC onto the MASKED PICS LAYER. It doesn't matter where you place it on the stage. Select the MASKED PICS MC and give it an instance name of "spawner". Select the MASKED PICS MC, now right click or control click and select "Actions" from the contextual menu. Once you are in the actions panel hit "Ctrl E" to get into expert mode. Paste the following script:

//The following code will be present on all the duplicated MCs We're giving them brains.
onClipEvent (load) {
//Remember original position of this clip
	x=this._x;
	y=this._y;
//scale and determine rate. Adding randomness makes the effect interesting.
//I chose to get these random numbers the Flash 4.0 way because its makes more sense than the new (which we will use later).
	rate=random(50)+5;
	scale=random(100)+15;
	randomx=random(500);
	randomy=random(300);
//New School way of getting random number I need a decimal number betwwen 0 and 1 for an upcoming test.
	random_number=Math.random();
//Same idea as traveling mask, but subtracting the offset keeps it centered.
	pictures._x-=x-_root.offset_x;
	pictures._y-=y-_root.offset_y;
	
/*Set scaling to small number. This test will change the _xscale about 50% of the time.
The rest of the time the yscale will changed. Since each duplicated mc performs this test,
we will have some variety on th stage.*/
if (random_number<.5){
	_xscale=scale;
}else{
	_yscale=scale;
}

//Grow function
	function scaleme(scaler,rater){
//determine difference of where we want to go verses where we are. Based on Sham Bhangal algorithm.
	difference_x=scaler-_xscale;
	difference_y=scaler-_yscale;
//Same test we performed earlier.	
If (random_number<.5){
_xscale+=(difference_x)/rater+((difference_x)*.09);
}else{
_yscale+=(difference_y)/rater+((difference_y)*.09);
      }
 }
//Movement function
		function moveme(location_x,location_y,rater){
//This is almost identicle to Bhangal's inertia equation. 
//I added a small percent of the difference to speed it up.
_y+=(location_y-_y)/rater+((location_y-_y)*.09);
_x+=(location_x-_x)/rater+((location_x-_x)*.09);
  }


}

onClipEvent (enterFrame) {
//Call scale function. Set scale to scale one of the buttons sets.
	scaleme(_root.scale,rate);
/*This gets our clips moving. If the a button on the stage is pressed (buttons always set scale to 5), 
the move function will  move this clip to is random destination. Otherwise it willmove it back to 
its original position.*/
If (_root.scale==5){
	moveme(randomx,randomy,rate);
}else{
	moveme(x,y,rate);
  }

}
 

The important thing to remember here is that this script will be present on every clip we duplicate. We're basically giving the MASKED PICS MC instructions to apply to itself. Since our instructions also ask it "questions", we can give it some intelligence in its decision making process. Most of the "questions" appear on the Load event.

The Load event happens once everytime the frame containing the MC that has the event is loaded. The Load event is where we get most our information. First we ask the clip what its x and y position is. Then we ask it to come up with random numbers that we'll use later. Most importantly, we tell it where to move its PIC CLIP MC. Keep in mind that each MASKED PICS MC also contains its own PIC CLIP MC.

We have to move the PIC CLIP MC around because Flash won't let us move the mask around. As a result of this limitation, we have to move the PIC CLIP around to create the illusion that mask is moving. This trick comes from the moving mask effect. Basically, we tell the MASKED PICS MC to move its PIC CLIP to the left when MASKED PICS MC is to the right and vice versa. To demonstrate this. Test the movie Ctrl ENTER. Now move the MASKED PICS MC to a different location and test the movie again. You should see that the clip seems "to know" where PIC CLIP should be. We'll talk about why we subtracted the _root.offsets shortly.

The last thing this script in the Load event does is to define scale and move functions. A function is a set of instructions that can be called at anytime. If we give the function parameters, then we can customize the instructions on the fly. Here are some examples to help clarify. If I wanted to use the trace action to trace some words in the output window, I could write a simple function that would contain a set of instructions for the trace action: function trace_my_words(){trace("I am cool.")} Now everytime I call (or activate) the function trace_my_words, Flash would execute the instructions between the braces. The problem with writing a function this way all the time is that if I wanted to trace a bunch of different words, I'd have to write a bunch of different functions: one for "I am cool" another for "I am a dork" and so on. To solve this problem, I could write a function that accepts my vein comments as a parameter. Since the parameter can be changed when I call the function, and since it is a part of the instructions, I would be able to specify which words to trace at the time I call the function. The script would read: function trace_my_words(my_words){trace(my_words)} Written this way, I can change the set of instructions when I call the function because the parameter is a part of those instructions. Calling function is easy. Just write the name and location of the function. So, to call my trace function, I would write: trace_my_words("I am cool.") And if I wanted to change it to "I am am a dork" I would simply write: trace_my_words("I am a dork.")

The functions in the MASKED PICS MC alter the scale and position of the MASKED PICS MC. Why are the function calls in a different clipEvent? Good question. If we only called the functions once, the scale and position would only change once. What we want to do is to call the function over and over again, so that the scaling and position continually update/change. The way we do that is through the enterFrame clipEvent. The enterFrame clipEvent executes everytime Flash enters a Frame. So if our movie is set to 12 frames per second, the scripts in the enterFrame clipEvent would execute 12 times per second (provided Flash is actually running that fast). Back to my particular functions: The scale function shrinks or grows MASKED PICS MC based on variable on the main timeline. The buttons on the main timeline shrink the variable and the PIC CLIP inside the MASKED PICS MC makes it big again. We'll get to the script in the PIC CLIP a little later. The same idea applies to the move scripts. This method of setting up variables on the main timeline, then having buttons and MCs change them is very useful because it allows for efficient communication between MCs and other objects on the stage.

DYNAMIC TEXT

Create a dynamic text field with text tool on the main timeline. Middle-align the text with the align tool and name the variable "text". Make sure that the text-field is long enough to accommodate a sentence. Also make sure that the paragraph is centered aligned.



ACTIONS LAYER

Lock the "PIC LAYER" and unlock the ACTIONS LAYER. Double Click the first frame of the ACTIONS LAYER and paste the following script into the Frame Actions window. If you can't paste it, then make sure you're in expert mode.

//make sure cols and rows cover picture area there will be one more, so this really makes 4 rows and cols.
rows=3;
cols=3;
//This the variables the MASKED MC uses. The buttons also change it as well.
scale=100;
//mask mc vars 
frame=1;
grid=0;
back=false;
/*The following code centers the grid. The mcs 1/2 of screen minus 1/2 of mcs totalwidth( width of the grid). 
First we divide the stage width in half. Then we subtract that number by 1/2 the grid width.
Since each mc is has a width of 100 and there are four mcs, the width of the grid is 400. 
We divide this by 2. I could have "hard coded" this, but I think it's more helpful to see what is
going on. 
You can center anything using this formula: 1/2 of viewable area minus 1/2 of item to be 
centered. This number determines the offset (how much space there is on the right 
and left of the centered item).  
*/
offset_x=(550/2)-(400/2);
offset_y=(400/2)-(240/2);

//This code makes a 4x4 grid and sets the masked mc's x and y coords
for (i=0; i<=rows;i++){

	for (j=0;j<=cols;j++){
//Name of duplicated instances
	name="card"+depth;
//Name of mc instance on stage. duplicate an assign new name and depth
	_root.spawner.duplicateMovieClip(name,depth);
	depth++;
/*This code sets the space between the duplicated mcs & their position. The measures are 
based on the mask width and height. The offset was a breakthrough for me. 
It centers the grid on the stage. We will use again when we reposition the masked mc.
The grid is based on the biggest pic in the pic clip. Slightly larger than size of mask.*/
		_root[name]._x=(j*100)+offset_x;
		_root[name]._y=(i*60)+offset_y;
	}
}

The following code centers the grid (We'll talk about our grid generation script in a moment). First we divide the stage width (550) in half. This puts us in middle of the stage. Now we subtract that number from 1/2 the grid width (Since each MASKED PICS MC has a width of 100 and there are four clips, the width of the grid is 400). We divide this by 2 to find the grid's center. Once we have the grids center, we subtract it from the stage's center. This puts us at the left border of the object to be centered. This number determines the offset (how much space there is on the right and left of the centered item). You can center anything using this formula: 1/2 of viewable area minus 1/2 of item to be centered.

The embedded for loops create the grid/table. The first loop determines how many rows will be present. The second determines how many columns will be present. It is important to realize that the second loop executes 16 times (four times for each iteration of the loop above it). By adding the offset to the x and y position, we center the grid. The numbers we multiply the "i" and "j" by are slightly smaller than width and height of the rectangular mask which is 65 x 105 because we want the masked to overlap a bit; this will make certain that there are no gaps between the duplicated MASKED PICS MC. You can see this when you click the show grid button. You can see the overlap quite plainly. You can also use this button to track the position of the MASKED PICS MCs as the animation occurs.

BUTTONS

Drag your direction button onto the stage. You only need one because you can flip another instance of the same button horizontally or vertically to get it to point in the opposite direction. On the left direction button place the following the script:

 On(release){ 
_root.scale=5; 
_root.forward=true; }

Place the following script on the right button.

on(release){

_root.scale=5;
_root.forward=false;

}

You don't need to worry about the middle button because it is not apart of the effect. I just included it so you can see how the mask clips scale and move. It's difficult to visualize this without the show grid button.

Here is where our variables structuring pays off. Since the function that controls MASKED PICS MC's scale is based on the variable on the main timeline, we can change that variable and hence the scale of the MASKED PICS MC through the buttons or MCs on the stage. We will even change the root variable from the PIC CLIP (a clip inside the MC whose behavior we are altering!).

MASKED PIC CLIP

I know may seem a bit backward, but go to the main stage. Double clip the MASKED PICS MC to get into its editing environment. Once you are in the editing environment, select the PIC CLIP MC. Right click or option click the MC and select "Actions" from the contexual menu. Get into Expert Mode and paste the following script:

onClipEvent(load){
//Get random scale and rate.
scaling=random(20)+5;
rate=random(10)+25;
//Set a scale to be small
this._xscale=scaling;
this._yscale=scaling;
//Set x position and y position of this masked mc according to root offset minus mask dimensions.
this._x-=_root.offset_x-75;
//_root.offset_x-75;
this._y-=_root.offset_y-105;
;

/*Same as function on the mask clip, but with different parameters. It's not really that noticable because the masked mc scale too.*/
function tweek(scale){

this._xscale=this._xscale+(scale-this._xscale)/(rate)+((scale-this._xscale)*.05);
this._yscale=this._yscale+(scale-this._yscale)/(rate)+((scale-this._yscale)*.05);

 }
}

onClipEvent(enterFrame){
//This test tells the functions on the mcs on the stage to grow back to 100 percent.
If (((_xscale<7)||(_yscale<7))&&(_root.scale==5)){
	_root.scale=100;
//This test goes to the appropriate frame of the pic clip. Changes value of frame on root timeline
	if ((_root.forward==true)&&(_root.frame<_totalFrames)){
_root.frame+=1;
 }else if ((_root.frame>1)&&(_root.forward!=true)){
_root.frame-=1;
  } 

}
/*Notice how everything relates to the root timeline. 
This prevents us from having to loop through the MCs to make changes.*/
tweek(_root.scale);
//Update based on frame from main timeline
this.gotoAndStop(_root.frame);
//Switch on stage to show border of mask. I made this up on the fly so its kinda wacky, but it works.
//this isn't a part of the effect it' just here for teaching purposes.
_parent.gotoAndStop(_root.grid+1);
//Set dynamic text to reflect current frame.
_root.text=_root.frame+" of "+_totalFrames;
}

I saved this script for last because it's easier to understand what it does once you know how the MASKED PICS MC script works. The PICS initial position is x:200 y:100 on the stage. This position is passed to the MASKED PICS MC clip on the stage. This is why you use the biggest picture on the first frame of the PIC CLIP. The most important part of this script is on the enterFrame clipEvent. The script there controls the frame that the PIC CLIP is showing. The frame number is based on a variable on the main timeline. The buttons on the main timeline increment or decrement this variable, as discussed earlier. Since this script on the PIC CLIP constantly checks the variable, it takes the PIC CLIP MC forward or backward accordingly. The conditional tests make sure that we don't go too far back or too far ahead. The last part of this script just updates the dynamic text on the main timeline by creating a string that displays the current frame and the total number of frames (pictures) in the PIC CLIP.

That's all there is to it! This file is bit jumbled, but I think/hope it will give you some worthwhile ideas. BTW, buy my book, The Real Work: Essential Sleight of Hand for Street Operators. It has nothing to do with computers or actionscript, but it's damn entertaining!

» Level Intermediate

Added: 2001-12-17
Rating: 8 Votes: 54
(10 being the highest)
» Author
I am a subversive writer by profession/trade. My first book, The Real Work, is about street cons. I got interested in web design by accident. I just wanted to learn how to make a site to promote my book, but I ended up learning (D)HTML, JavaScript, and Flash 5.0 ActionScript by accident.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.