Flash Script – LED Display

Tweet


type = 'application/x-shockwave-flash'
data = 'http://sitepointstatic.com/flash/led.swf'
width = '400'
height = '400'
bgcolor = 'black'
>

Download the sample files here.

1. Open a new movie, and give it a width of 200, a height of 150. Set the background color to black.

2. Create a new graphic symbol (let’s call it "gr_square") of a square with a height and width of 8 pixels. Choose a color that can be seen against your black background.

3. Create a movieclip symbol (let’s call it "mv_bar"). Drag 6 instances of gr_square into the movieclip. Align them vertically, so that the upper left corner of each square is separated from the one immediately below it by 10 pixels.

The upper left corner of the topmost square should be at the coordinates x=0, y=0.

1175_1

4. Create a new movieclip symbol (let’s call it "mv_LEDbar") with 2 layers. Name the upper layer "LED mask" and the lower layer "LED color". now, drag an instance of mv_bar into the upper layer, and position it at x=0, y=50.

1175_2

5. Add the following movieclip action to the instance of mv_bar.

onClipEvent (enterFrame) { 
indicator = Math.round(Math.random() * 100);
if (indicator > 55 && this._y > 5) {
this._y -= 10;
} else if (indicator < 45 && this._y < 55) {
this._y += 10;
}
}

6. On the bottom layer, draw the following graphic with the dimensions shown here — choose any color you like!

1175_3

7. Align the graphic with the mv_bar instance, like this:

1175_4

8. Set the color of the lowest block to black (making it the same color as the movie background).

1175_5

9. Set the properties of layers, making the upper layer a mask, and the lower layer a masked layer.

1175_6

10. Go back to Scene 1, and rename Layer 1, "LED". Drag several instances of mv_LEDbar on to the stage. Align the instances as shown here.

1175_7

11. Add a layer above the LED layer, and name it "Frame". Draw a rectangle, then delete the fill color so that you can see the LED instances beneath.

1175_8

We’re finished! Test the movie and you’ll see your Flash LED display.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments