Old Grains Effect (Old TV Effect) in Flash

by Dr Diablo | Adobe Flash | Beginner

In this tutorial we are going to emulate a Grain Effect in Flash which is similar to what we see in old televisions. This effect is widely used in movie scenes to indicate a event that have occurred ages ago. We are going to apply the techniques taught in Random Movement in Flash tutorial to create our grain effect, so I suggest you go through it to understand how the script works. Our final results should look similar to this:

Our effect above could be broken down into three main sections:

  1. The small grains appearing randomly on the canvas.
  2. The vertical lines scrolling across the canvas.
  3. The radial flicker effect in the center.

We will show you how we created these each one at a time.

Starting Off

Start off by creating a new flash document that is 640px wide and 480px long. Set the Frame Rate to 32 fps and set the background color to black.

Small Grains Effect

Grab the Pencil Tool from the Tool Panel on the left. Set the color to white, 1px for the Stroke Height and a Solid Stroke Style.

Draw three small curved strokes on your canvas as shown in the screenshot below.

Its time to script the strokes. Click on one of the strokes, and press F8 to Convert To Symbol. The Name of the symbol does not matter, choose Movie Clip for the type and keep the Registration point centered.

While your symbol is now selected on stage, press F9 to open up the actions panel for our new movie clip and paste the following code.

onClipEvent (enterFrame) {
_x = random(640);
_y = random(480);
_rotation = random(360);
_alpha = random(100);
_xscale = nue;
_yscale = nue;
nue = random(65);
}

this code will command the small stroke to move randomly around the whole canvas. You will have to repeat this step for the other two remaining strokes on stage, convert them to movie clip symbols and then assign the same code to them.

Timeline Indicator (Vertical Scrolling Lines)

Using the Line Tool from the Tools Panel while keeping the same settings we used for the pencil. Draw a single vertical line across the canvas. Click on the line and press F8 to convert it to a Movie Clip.

We will also apply actions to this movie clip as well, so press F9 to bring up the actions panel and paste the following code.

onClipEvent (enterFrame) {
_x = random(640);
_alpha = random(15);
}

This code will make the line move vertically in a random manner to give the timeline effect that goes well with the grain.

Radial Flicker Effect

We will create a gradient fill that fades in and out to emulate the flicker effect, go Window>Color Mixer or press Shift+F9 to show the color mixing panel. Set the gradient type to Radial, and create three anchors on the color bar as shown below in the screenshot.



First Anchor: 0% Alpha, Color #010101
Second Anchor: 100% Alpha, Color #FFFFF
Third Anchor: 0% Alpha, Color #FFFFFF

After applying the gradient's properties. Spread a gradient fill across the canvas, using the Rectangle Drawing Tool and convert it to a Movie Clip by pressing F8.

Double click on your newly created movie clip. We are going to create a fade in and a fade out animation, so create copies of your keyframe on keyframe number 1, 15 and 30.

Highlight the keyframes from 1 till 30, right click on the highlighted area and choose Create Motion Tween.



Now we have two portions of tweening. First one is between keyframe 1 and 15, the other is between keyframe 15 and 30. Click anywhere on the first portion of the tween and set the Ease to 100. Set the ease for the other portion to -100.



Go back to your scene and select the movie clip that we were just working on. Press F8 to show the Actions Panel and paste the following code:

onClipEvent (enterFrame) {
_alpha = random(20) + 10
}

If you test your movie now you should see an effect similar to what we have here, we added the Oman3D logo as an illustration to the effect used in practice. Our logo was placed on a layer beneath the one that has our grain elements, it was converted to a Graphic Symbol and its _alpha property was set to 50%.


This concludes our tutorial, I hope that you learnt something new from this tutorial, feel free to email me on diablo@oman3d.com for any comments or questions. Feel free to post in the Oman3D Forum if you need any help.

- End of Tutorial