Category: Flash

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″ /]

Here are a few examples with notes. These examples all use the Fuse Kit.

Fuse Kit Examples 1

Fuse Kit is a set AS 2.0 Classes that handle animating objects with Actionscript. Fuse can animate any property in Flash.

Fuse also goes beyond animation. It adds new properties that do not exist in the stock Flash. These new properties make the job of making Flash movies much easier. For example the shortcuts include a proeprty for each of the filters. Assigning blur to an object just becomes a matter of setting my_mc.Blur_blur.

I have had a lot of fun playing with the Fuse Kit and would recommend everyone try it out. Here’s a link:

http://mosessupposes.com/Fuse/

Here’s a simple AS 2.0 Class that creates a scrollbar. The ScrollBar class takes two parameters. The name of the movie clip that will act as the scrollbar and the name of a function the scrollbar will call when it is dragged.

new ScrollBar( target_mc, callBack )

The target_mc must have two clips inside named drag_mc and track_mc. The first is the dragger and the second sets the limits for the dragger. You can design these in any way you like as long as they use the instance names

• drag_mc
• track_mc

For best results place the registration points of both clips in the upper left corner and align both clips within their parent.

The callback can be any function name that you have defined. The ScrollBar class will send a value from 0 to 1 to the callback that gives the percentage position of drag_mc from the top of track_mc.

For example if you made a clip with both drag_mc and track_mc you might give that clip the instance name of scroll_mc. To make a new instance of ScrollBar you could use the following:

var a_scrollbar:Scrollbar = new Scrollbar( scroll_mc, test );

When the scrollbar is dragged the function test would be called and passed a value between 0 and 1 representing the position of the dragger. You could use this to scroll some text in a dynamic text field or set the volume of a sound object.

Here is a sample function that would scroll a dynamic text field named scroll_txt:

function test( n ) {
scroll_txt.scroll = Math.round( ( scroll_txt.maxscroll - 1 ) * n ) + 1;
}

Simple Scrollbar Class

Here’s an example of the scrollbar in action.

[kml_flashembed movie=”examples/Scrollbar/Scrollbar.swf” height=”156″ width=”314″ /]

Scrollbar( host_mc:MovieClip, call_back_func:Function )

Creates a new Instance of Scrollbar. The host_mc clip must contain two clips named drag_mc and track_mc. These clips act as the scrollbar. track_mc sets the limits while drag_mc is the interactive clip.

The call back function can be the name of any function you define. It will receive one parameter, a value representing how far the scrollbar is scrolled. The range of the returned value will be from 0.0 to 1.0. With 0.0 being the value returned when the scrollbar is at the top (or left when scrolling horizontally) and 1.0 when the scrollbar is at the bottom (or right). You can use this value to control elements in your movie.

• host_mc: a movie clip containing the drag_mc and track_mc.
• call_back: the name of a function that will be called when the scrollbar is scrolled.

scroll_horizontal( horizontal_scroll:Boolean )

This method determines whether the scrollbar scrolls vertical or horizontal. By default the scrollbar scrolls vertically. Calling scroll_horizontal() and passing true makes the scrollbar scroll horizontally.

getValue():Number

The method returns the current value of the scrollbar.

setValue( n:Number )

The method sets the current position of the scrollbar. Pass a value of 0 to 100.

Property enabled

This property enables and disables the scrollbar.

These example files create a series of images that scroll form left to right. The images cycle around so the system scrolls continuously.

Scrolling Images

[kml_flashembed movie=”examples/scrolling_images/scrolling_images_011.swf” height=”85″ width=”315″ /]