First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing! | Flash Jobs
Search tutorials
Author: (*)Blackzer0

(*)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.



These effects are framerate-dependant. I used 24fps, but you might the effect to look more realistic with a lower framerate.


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

Added: 2002-03-15
Rating: 7.96 Votes: 188
(10 being the highest)
» Author
Location: Beirut, Lebanon
» 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: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.