Tutorials Home What's New Top Rated Submit myTutes Random!

Old Scratchy Movie Effect
Author: (*)Blackzer0

Page 1
1

(*)Black Zer0's Old Movie Effect

In this tutorial I will show you how to simulate an old "scratchy movie" effect in Flash. The technique is quite simple and only requires basic ActionScripting.



Okay, let's get started.

Drawing The Scratches

First, we'll draw the scratches that will appear on the screen. I chose a little dot, and a vertical line as long as the movie height.

Make both of them movie clips. Now drag an instance of each onto the stage. Call these instances by individual names. I chose "circle" for the dot and "line" for the line (no duh).
Also create a third movie clip, the "actions" clip which will be the activator for our clipevent-trigerred commands. Drag an instance of this onto the stage, outside of the visible area of the movie. (you can usually work just fine without an "actions" clip, but it's better to group as much of the movie's code as possible into one clip.)

ActionScripting

Right then, let's get coding. First we'll move the line.

Shaking The Line

Click on your actions clip and open the Actions panel. Enter the following code:

onClipEvent(enterFrame){
 _root.line._x=random(400);
}

If your movie is not 400 pixels wide, then enter your movie's width instead of 400. Also, if you named your line instance something other than "line", replace "line" in the code with your instance's name.
What this code does is give to the line a random X position between 0 and the movie's width, i.e. between its left and right limits.
Test your movie. You should have the line hopping along the horizontal axis. The desired effect isn't quite obvious yet, is it? Well, let's wait and see.

Plot The Dots

Now, the dots are a wee bit more complicated to animate. Their code comes in two parts, one in the "actions" clip and the other in the "circle" instance itself.
Here's how it works: in the first part, we tell Flash to create three instances of the dot clip, by using a loop. Then, we give a certain behavior to the dot clip, which all three instances will follow.

In the "actions" clip
Right before the last curly bracket, add the following lines:

 for (i=0; i<=2; i++)
 {
 _root.circle.duplicateMovieClip( "circle"+i, i+1);
 }
 if (i=2){
 i=0;
 }

So the code inside the "actions" clip should look like this:

onClipEvent(enterFrame){
 _root.line._x=random(400);
 for (i=0; i<=2; i++)
 {
 _root.circle.duplicateMovieClip( "circle"+i, i+1);
 }
 if (i=2){
 i=0;
 }
}

What did this do? Let me explain the code for you:

on every frame,
 give a random x position to the line;
 create a variable "i" of initial value zero. As long as i is smaller or equal to 2,
 create a new instance of the dot clip, call it "circle" and the value of i, and place it on level i+1;
 now, if i equals 2,
 put i back to zero value.

Why did we use "i"? it's a counter, to make the loop repeat only a certain number of times. In this case, three times. 0,1,2. Okay, but then we're telling it to repeat everything again, by returning i to zero value. Why is that? Well, we did this so the screen won't fill with dots. You see, I mentioned something called "level". Only one instance can exist on a given level. So by returning i to zero value, we're replacing the dots that were created in one loop with others in the following loop.

In the "circle" instance
Enter the following code in the Actions panel, with the circle instance selected:

onClipEvent(load){
 if (this._name<>"circle"){
 this._x=random(400);
 this._y=random(300);
 deedee=random(100);
 this._xscale=deedee;
 this._yscale=deedee;
 }
}

Here we give a behavior to the dot. Every duplicated instance from this clip will behave the same.
Just what did we tell it to do anyway? Skip the "name<>"circle" line for now. Look at the rest of the code. First of all, the clip event is "load". That means this code is activated once, as soon as the instance appears in the movie. Then, we give the instance a random x and y position inside the movie limits, then we scale the movie with a random number of 100% or less. Here the variable "deedee" (first name I could think of) makes sure the scale is uniform on the x and y axii. Then I added the first line inside the statement block: the "name<>"circle" line. This is just to make the programming neater. It tells the original instance, or "seed" instance, to stay put and not apply the behavior of its duplicates.

Your New Movie Is Now Old

Okay, you're all set. Test the movie. The effect is complete. If you don't like what you're seeing, try adding more scratches, lines, spots etc. by drawing different graphics and applying the same rules to them.

Creating a "Heavy Rain" Effect

You can use the same scripting to simulate rain. Just eliminate the line, and replace the graphic of the "circle" with a real circle. You can further enhance the effect by making the circles appear in the bottom half of the screen, and short diagonal lines recreating falling raindrops, in the top half.





Right. I hope this was helpful to you. For any feedback contact me at my email address through FlashKit.
Regards, (*)Blackzer0 ***END OF TUTORIAL***

1

» Level Basic

Added: : 2002-03-15 Rating: 7.54 Votes: 188 Hits: 6161

» Author

Location: Beirut, Lebanon

» Download

Download the files used in this tutorial.

Download (25 kb)

Get conversion and unzipping tools for PC and Mac here!

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1