We present a retro television effect that can be applied to any display object. Creating an instance of our custom AS3 RetroTV class is easy, and any display object or mixture of display objects, including sprites, shapes, text fields, and video, can be the source for the television image generated by the class. The television image is updated in real time as the source object changes. Click the image to see the effect:
- Download all source files corresponding to this effect: retrotv.zip
Below, we comment on the class RetroTV that is at the heart of the TV effect. Download the zip package linked above for the complete, well-commented, and easy to customize source code.
Using the RetroTV Class
Our custom RetroTV class extends the Sprite class, and thus represents a display object that can be added to the Display List and become interactive. Creating an instance of this class with its constructor is easy:
var TV:RetroTV = new RetroTV(200,150,1);
The first two parameters in the constructor set the size of the source image (not the final television image), and the third optional parameter sets the width of each phosphor (we explain below what a phosphor is). The instance of the RetroTV effect will be a Sprite, which contains a bitmap as a child.
An instance of the RetroTV class has a 'scene' property. 'scene' is a Sprite which will be the image source for the television display. You can add any bitmap-drawable display objects to this scene as children. In the example shown here, the scene contains a MovieClip used for the background, another MovieClip in the shape of a star which moves according to mouse position, a TextField, and a Sprite created at runtime. Note that if the phosphor width is set to 1, then the television effect will be three times wider and higher than the source scene. Generally, the width and the height of the television effect will be, respectively:
As a result, a small source scene can produce a much larger television effect.
Various properties are available for tweaking the display. For example, red, green, and blue offsets can be set so that the color components of the TV image are not entirely aligned, which adds to the realism of the display. The amount of noise in the image can be controlled with the noiseAmount property (which should be set between 0 and 255). Also, some warping of the display can be turned on or off, to simulate poor tuning or failing hardware. Please see the accopanying source files to see how to use these properties.
In order to animate the display and keep it current when the underlying object changes, your code should make repeated calls to the update() method of the RetroTV class. In our example, we call this function once each frame, inside a listener function for the ENTER_FRAME event.
Simulating a Color Television Display
A television creates different colors using red, green, and blue phosphors (or a similar color emitting component for displays not based on cathode ray tubes), which are arranged in various geometries. An older television typically uses the pixel geometry shown below (by pixel we mean a red-green-blue triad of phosphors). Note that the vertical columns of pixels are staggered so that alternating columns are offset vertically by a half-pixel. Also note that there is a little bit of space in between the phosphors.
(Courtesy Pengo (Peter Halasz), Wikimedia Commons)
Recreating this precise geometry on a computer monitor is a little tricky, because we have to decide how to use computer monitor pixels to draw these individual phosphors. Instead of recreating this geometry faithfully, a suitable effect is created by simply arranging the red, green, and blue phosphors without the vertical staggering and without space between them. See below for a close-up of our television effect:
The Ideas behind Drawing the Television Effect in a Nutshell
The source scene is first drawn to a BitmapData instance. Vertical slices of this bitmap, one pixel wide, are drawn to the visible TV bitmap. We first draw a red stripe, then a green stripe, and then a blue stripe. To control which colors are drawn, we make use of the copyChannel() method of the BitmapData class.
Noise is created with a separate bitmap which is laid over the top of the television image. The noise is created using the noise() method of the BitmapData class. The BlendMode of the noise is set to ADD, so that the noise has the effect of lightening the underlying pixels.
The warping distortion is created by using a DisplacementMapFilter, which is applied to the source bitmap before drawing to the TV display. The DisplacementMapFilter uses a bitmap to control distortion (see the Flash documentation for more information about how this filter works). This bitmap is drawn inside the RetroTV class; it is drawn with some randomly placed horizontal lines which create ripples in the image, plus a gradient at the bottom to give the bottom edge extra warping.
Note that a time-varying function (a rather complex sinusoidal function) is used to change the amount of warping, which creates a flickering effect. This function is found in the update() method of the RetroTV class. You can experiment with the code here to keep the distortion fixed or change how it flickers.
An Alternate Approach
While we were preparing this effect, a similar effect was posted by Cadin Batrack at Active Tuts (see it here). Cadin uses a very clever combination of movieclips drawn on the stage, along with ActionScript classes which separate the source image into red, green and blue components, and tween-controlled shifts to these color layers. Our RetroTV class can be used for dynamic images and video, but Cadinís method is an alternative worth exploring for static images.