SinWave Class

SinWave Class

I have been trying to get caught up with AS 2.0, so I have been trying to make up some simple classes to practice with. Nothing too complex just something to get a better handle on using classes.

the SinWave class draws a sin wave on a movie clip. More accurately you pass it the instance name of a movie clip SinWave creates a new empty clip within that clip where it draws the sine wave.

The SinWave includes a phase property and a inc_phase() function to change the phase of the wave. Calling inc_phase() redraws the wave at the new phase. This can be used to animate the wave.

SinWave always draws the wave at _y of 0. So half the wave will above 0 and half will be below it. You’ll need to position the host clip at the vertical center point where the wave should appear. The height of he wave determines how far above and below 0 the wave will be drawn.

SinWave uses lineTo() to draw so the wave is drawn as a series of straight lines. The Steps parameter determines how many line segments are used to draw the whole wave. Setting steps to a low number creates a jagged and irregular wave. Larger numbers will create a smoother wave.

Create a new instance of SinWave with:
SinWave( _mc:MovieClip, steps:Number, width:Number, height:Number, phase:Number, cycles:Number, stroke_weight:Number, stroke_color:Number )

_mc: The instance name of the host clip.
steps: Sets the number of points to be used along the length of the wave.
width: Sets the width of the wave to be drawn.
height: Sets the height the wave above and below 0.
phase: Sets where along the sin cycle the wave begins.
cycles: Sets the number of cycles. 1 would produce a single sine wave peak to peak.

You might use the SinWave like this. Below I have created a new empty movie clip named sin_mc. And then used SinWave to draw a wave in it with a width of 550, height of 50 and 300 steps. 4 Cycles creates 4 waves peak to peak. With a 2 pixel red stroke.

this.createEmptyMovieClip( "sin_mc", 1 );
sin_mc._y = 200;

var my_sin = new SinWave( sin_mc, 300, 550, 50, 0, 4, 2, 0xFF0000 )

SinWave.inc_phase( n:Number )
This method adds n to the phase value of the SinWave. This sets where the wave begins drawing itself. You can use this to animate the wave. For example:

this.onEnterFrame = function() {
	my_sin.inc_phase( .1 );

SinWave.set_height( n:Number )
This method allows the height of the wave to be changed. Remember the wave will be twice this value, appearing n number of pixels above and below 0 in the host clip. For example to change the height of a SinWave to 100 pixels you might use:
SinWave.set_height( 50 )

SinWave.set_fill( onOff:Boolean, color:Number, height:Number, alpha:Number )
This method assigns a fill and fill color to the SinWave. The SinWave class draws the fill to the height set here. The effect is a rectangle with the top edge showing the wave. If the height is negative the rectangle is drawn above with the wave on the bottom edge. Setting onOff to true turns the fill on. Setting onOff to false turns the fill off. The alpha value sets the transparency of the fill. The following example creates adds a 100 pixel tall, red, 50% transparent fill:

SinWave.set_fill( true, 0xFF0000, 100, 50 )

Calling set_fill() once turns on the fill until further notice. To turn off the fill call set_fill with false as the first paramter, for example:
SinWave.set_fill( false, 0xFF0000, 100, 50 )

[kml_flashembed movie=”/examples/SinWave/Draw_Wave_012.swf” height=”200″ width=”350″ /]

7 thoughts on “SinWave Class”

  1. Hi Mitch,

    It looks pretty neat, but I have a suggestion to boost performance. What I would do is convert a wave once its drawn into a bitmap, and then animate that instead. I’m guessing that’d up the performance significantly. Well, it would eventually slow down I suppose if you had too many bitmaps, but I think it’d work nicely.

  2. The sin wave is drawn within the width set in the constructor. So it is redrawn each frame in the animation. I’m not sure that convert to bitmap would help in this case. Since each frame you’d need to convert it to a bitmap again.

    I think the sinwaves in the banner run slower on slower computers because of the alpha. Each wave has an alpha of 50%. I’ve found that having a few too many objects with alpha cause the player to bog down.

    Try making a movie that generates x number of rotating movie clips. Give each and alpha of 50%. Adjust the number of objects. After a certain number the performance starts to drop. Set the alpha 100% and the same number of objects plays just fine.

    I’m thinking of changing the banner. It chugs on old iMac at home. it’s very slow. Though it plays fine on the G5…

  3. What I mean is that if you drew a bitmap of the wave that was two screens wide and just have it move on the x-axis and loop when it reaches the end, you’d just have to draw the wave once instead of every frame. Although the alpha in the bitmaps might actually negate any speed gains. Just a thought.

  4. I figured that’s what you were thinking. The class I made uses the drawing API. The banner animation is a variation of that class.

    I was thinking about adding an option to the SinWave class that closes the shape around the box like in the banner.

  5. how do i use this script.
    I’ve put it on the first frame on the stage but nothing.
    where do i mess up?


  6. Look at the example files. You’ll need to have a movie clip on the stage where SinWave class will draw. Then you will need to make an instance of the SinWave class with parameters describing the sine wave you want to create.

    Take a look at the example files. Send me an email if you have any questions.

Leave a Reply

Your email address will not be published. Required fields are marked *