Web New Media notes and ramblings

Just posted a set of classes that create various different types of progress bars. These classes will work with any class that dispatches the following events:

• Event.OPEN
• Event.COMPLETE
• ProgressEvent.PROGRESS

This includes the Load_Content class. Download the Example files here.

You'll need to download the latest version of the class library. All of the progress bars are packaged in com.webdevils.display.progressbars. Get the class library here.

Here's a sound utility class to make playing sound in Flash a little easier. The example files show some basic features and usage of the class.

http://code.google.com/p/webdevils/downloads/list

The SoundObject Class is basically a wrapper for the Sound and SoundChannel classes. These can be a little tricky or confusing to work with in their raw forms. The SoundObject Class strives to provide all of the expected functionality in an intuitive package.

Usage is simple, make an instance of the Class pass along the URL to an mp3 file. Call the play method to play() the sound, stop() the sound or pause() to pause the sound. Much simpler than using Sound and SoundChannel.

This has a few other methods and could use a few more. This could definitely see an update in the near future.

Here's a class that creates a Scrollbar and TextField, that requires no AS at all. The example inlcudes all of the Classes in a package. The classes include, SimpleScrollBar, SimpleScrollText and ScrollBarEvent.

These classes look for MovieClips with the names up_mc, down_mc, drag_mc, track_mc and scroll_txt. You can leave up_mc and down_mc if you do not want these buttons. Or use only the buttons and leave out drag_mc and track_mc.

Assign the SimpleScrollText or SimpleScrollBar class to the Base Class of the MovieClip that contains the Scrollbar elements.

simplescrolltext

Here are a few examples that illustrate using Tweener with AS3. Tweener is an animation Class that makes it easy to get things moving in Flash. The Tweener class files are included with these examples in the cuarina folder. You can download the latest version and read more about Tweener here.

These examples show some simple animation ideas using Tweener. Each movie is built using the Document Class. The FLA file contains a movie clip that is animated. In the First movie these clips are on the stage. In the second and third examples these clips are in the library and attached to the stage. For this to work the Linkage option must be set to Export For Actionscript.

Basic Tweener

Here's an AS3 version of the ScrollBar Class. This uses the same methods and properties as the AS2 version of this class.

Make a newinstance of ScrollBar with:

 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 function. Think of this as 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;
}

AS3 Scrollbar class

Here’s an example of the scrollbar in action.

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.

This class creates a row of image icons. The icon row can scroll based on mouse position or the scrolling can be tied to a button.

This class is a work in progress and can use some improvement.

To use the ImageBar class make a new instance of the class and pass it an array of Identifiers for symbols in your library that will act as icons on the bar.

Using the ImageBar you will follow this basic process. Create an array of symbols that will become images on the bar. Then make a new instance of ImageBar, passing parameters describing how the ImageBar will be displayed. One of these parameters is the array of Symbols to be displayed on the bar.

For example, the following code defines an array and then makes a new instance of ImageBar.

var icon_array = [ "Symbol 1", "Symbol 2", "Symbol 3", "Symbol 4", "Symbol 5", "Symbol 6", "Symbol 7" ];

var my_ib = new ImageBar( image_mc, // Target MC
1, 		// Depth
200, 		// view width
50,		// view height
icon_array,// icons
50,		// icon width
50,		// icon height
5 );  		// icon space

The code above builds the ImageBar in the movie clip image_mc at depth 1. Sets the width to 200 and the height to 50. Adds images to the bar from the array icon_array. Each image on the bar is defined with a width of 50 and a height of 50 and a spacing of 5 between each.

The Imagebar provides several methods and properties that determine how the icons movie on the bar. The example files show some of the various ways ImageBar can be used.

ImageBar Class

public function ImageBar( host_clip:MovieClip,
depth:Number,
width:Number,
height:Number,
array_of_images:Array,
image_width:Number,
image_height:Number,
image_spacing:Number )

Create an instance of ImageBar with the constructor.

public function set_border( stroke_weight:Number, stroke_color:Number ):Void

Set the border for an instance of ImageBar. Assign a stroke weight and color.

public function scroll_inside_box( onOff:Boolean ):Void

Call this function and pass true to make the ImageBar scroll only when the cursor is within the area of the ImageBar. Or, false to have the ImageBar scroll always, regardless of where the cursor is at.

public function auto_scroll( auto:Boolean ):Void

Call this function and pass true to make the ImageBar scroll automatically. When ImageBar scrolls automatically it scrolls in relation to the cursor position. When this is set to false the ImageBar does not scroll in relation to the cursor. Use a false setting in conjunction with buttons or other elements to trigger scrolling in the ImageBar.

public function shift_icons( n:Number ):Void

Use this function in conjunction with auto_scroll( false ) to shift the ImageBar from a button or other input. Pass the number of images to shift. For example ImageBar.shift_icons( 3 ) moves the ImageBar three images widths to the right. Negative numbers will shift to the left.

public function shift_left( ):Void

Use this with auto_scroll( false ). Shifts the ImageBar it's width to the left.

public function shift_right( ):Void

Use this with auto_scroll( false ). Shifts the ImageBar it's width to the right.

public function scroll_percent( n:Number ):Void

Use this method with auto_scroll( false ). Moves the ImageBar from 0 to 100% along it's entire length of travel.

public function get_icon_symbol_array():Array

Returns an array of Symbols that have been attached to the ImageBar instance.

public function get_icon_instance_array():Array

Returns an array of all of the images instances attached to the ImageBar instance.

public function set_speed( n:Number ):Void

Pass this function a value that sets the speed the ImageBar scrolls.

Here is a class I created at extends movie clip. It adds properties that allow you to position movie clips in 3d space. The class is pretty simple with just a few properties and methods. If you're looking for a featured 3d class that generates solid objects take a look at Sandy or PaperVision.

The Make_3d class might be good for creating simple animated effects for interface elements. The class is really more of a 2.5D. It allows you to create the illustion of depth by scaling and positioning movie clips on the stage.

Make_3d Class

Make3d provides properties to set the X, Y and Z position of a clip. Make_3d can rotate clips around the origin. Make_3d can also change the brightness of a clip as it moves back in space. This can enhance the illusion of depth. Clips can get brighter or darker and range of the effect can be set. Make_3d also provides a setting to simulate camera angle which can be used to create more less extreme perspective effects.

Using Make_3d

Make_3d Extends the movie clip class. The Make3d Class must be set as the AS 2.0 Class in the Linkage Properties dialog box for any clip will use it. Just right click a symbol in the library and choose Linkage. Then select the Export for Actionscript option and type the name Make_3d into the AS 2.0 Class field.

The Make_3d class adds three new properties, myX, myY, myZ, to movie clips that use this class. The properties set the x y and z positin of an object. To redraw a clip on the stage in 3d space call render point after setting myX, myY or myZ.

Rendering a clip in 3d space sets that clip's _x, _y, _xscale and _yscale, this makes the clip look like it has been moved in 3d space. Do not set these properties yourself (_x, _y, _xscale and _yscale). Rendering a clip in 3d space also uses swapdepths to set the stacking of clips. Do not use swapDepths() on a 3d clip or it will not stack correctly with other 3d clips.

setOrigin( origin_x:Number, origin_y:Number )

Use setOrigin() to set the location of the vanishing point in your scene. This will usually be in the center of the stage. Setting the X and Y values to half the width and half the height of your Flash project will get the best results. If your 3d elements will be nested within another Movie Clip, you can set the origin to 0, 0 and place the host Movie Clip's registration point at the origin.

For example if your Movie had a width of 400 and a height of 300 you would want to set the origin to 200, 150:

mc.setOrigin( 200, 150 )

translate_3d( x:Number, y:Number, z:Number )
This method moves an object in 3d. Pass it x, y and z values of the distance you want to the object to move. The values passed to translate_3d are added to the object's current x, y and z values. For example the following would move an object 100 units in the x, 0 in the y and 400 in the z.
mc.translate_3d( 100, 0, 400 )

position_3d( x:Number, y:Number, z:Number )
This method positions an object at a location in 3d space. Pass position_3d() the x, y and z values and the clip will move to this position. For example to move a clip to the origin you could use the following:
mc.position_3d( 0, 0, 0 )

rotate_3d( x:Number, y:Number, z:Number )
This method rotates an object around the origin. For example to rotate an object 2 degrees around the x axis, 5 degrees around the y axis and 0 degrees around the z axis you could use the following:
mc.rotate_3d( 0, 0, 0 )

renderPoint()
This method renders he clip in 3d by positioning and scaling the object based on it's x, y and z coordinates. You should call renderPoint() after setting the myX, myY or myZ properties. If you set myX, myY and myZ in the same frame you need call renderPoint() only once to update the position of your clip. If you translate_3d(), position_3d() or rotate_3d() you do not need to call renderPoint(). These methods call renderPoint() themselves.

mc.renderPoint( 0, 0, 0 )

These two classes create a wave form made up of one or more sine waves. The waves are all added together and dawn as a single composite wave.

DrawSine Class

The example below shows one SineWave. Clicking the mouse on the example adds another. Notice how the wave changes with each click. The effect is caused by adding waves. This is similar to audio waves or water.

The two classes are SineWave and DrawSine.

The SineWave class defines a sine wave. The class defines properties of a single sine wave. The SineWave class has properties for phase, cycles, radius and increment.

To make a new SineWave use the following syntax:

my_sine = new SineWave( phase:Number, cycles:Number, radius:Number, increment:Number );

Sinwave defines the following properties:

• phase etermines where along the cycle the wave begins.
• cycles: Sets the number complete Sine waves that are drawn within the width.
• radius: Sets the height of the wave in pixels. The wave extends this amount above and below it's center.
• inc: Use this value to increment the phase of a wave.

The second Class is the DrawSine class. This class draws a composite wave form made of any number of SineWaves. The constructor defines the width and height of the wave and the number points used to draw the wave. It also has a draw_waves() method that takes an array of SineWaves as a parameter. DrawSine draws a single wave form made from a composite of all the SineWave objects in the array. DrawSine can draw a filled shape or only a stroke.

Use the following syntax to make a new DrawSine object:

draw_sine = new DrawSine( _mc:MovieClip, width:Number, height:Number, steps:Number )

• _mc: Set the movie clip instance the wave will be drawn in.
• width: Set the width of the drawn wave.
• height: Set the height of the wave.
• steps: Set the number of points used to draw the wave.

The following would create new DrawSine object that will draw it's wave in the movie clip sin_mc. The wave would be 550 pixels wide and have a height of 400. The wave would be drawn using 200 points.

var wave = new DrawSine( sin_mc, 550, 400, 200 );

set_stroke( stroke_weight:Number, stroke_color:Number )

The set_stroke method sets the stroke weight and color that is used to draw the wave. Setting stroke weight to 0 will cause DrawSine to NOT draw the stroke. The following would set the stroke to 3 pixels and give it a color of medium green.

wave.set_stroke( 3, 0x006600 );

The following would turn off the stroke by setting the weight to 0;

wave.set_stroke( 0, 0x006600 );

set_fill( show_fill:Boolean, fill_color:Number, fill_alpha:Number )

The set_fill() method turns the fill on or off and sets the fill color and alpha of the fill. Setting show_fill to true causes the DrawSine object to draw a box to the height set in the constructor. The following line would draw a dark green 100% alpha fill.

wave.set_fill( true, 0x009900, 100 );

Turn the fill off like this:

wave.set_fill( false, 0x009900, 100 );

draw_waves( wave_array:Array )

Use the draw_waves method to draw a composite wave made up of any number of SineWaves. Pass an array of SineWave objects. For example the following defines three new SineWave objects and then draws them.


// Make three sine waves SineWave( phase, cyclse height, inc )
var sin_0 = new SineWave( 0, 3, 20, 0 );
var sin_1 = new SineWave( 0, 1, 20, 0 );
var sin_2 = new SineWave( 0, 6, 20, 0 );

// Draw a composite wave made of the three SineWaves
wave.draw_waves( [ sin_0, sin_1, sin_2 ] );
To animate the waves call draw_waves periodically, with onEnterFrame for example. The following code defines three waves and animates them.


// Make and animate three SinWaves
var sin_array = new Array();
sin_array.push( new SineWave( 0, 3, 20, .1 ) );
sin_array.push( new SineWave( 0, 1, 20, .1 ) );
sin_array.push( new SineWave( 0, 6, 20, .1 ) );

// Animate the waves
this.onEnterFrame = function() {
for ( p in sin_array ) {
sin_array[p].phase += sin_array[p].inc;
}
wave.draw_waves( sin_array );
}
The following example defines 12 waves each with random properties. Then it animates all 12 waves. In this example the wave is drawn with a fill and stroke.

// 6 SineWaves with random properties
var sin_array = new Array();
for ( var i = 0; i < 12; i ++ ) {
sin_array.push( new SineWave( Math.random() * Math.PI * 2, Math.random() * 36, ( Math.random() * 20 ) + 1, Math.random() - .5 ) );
}

// Set stroke weight and fill
wave.set_stroke( 3, 0x006600 );
// Set a fill, fill color ad fill alpha.
wave.set_fill( true, 0x009900, 100 );

// Animate the waves
this.onEnterFrame = function() {
for ( p in sin_array ) {
sin_array[p].phase += sin_array[p].inc;
}
wave.draw_waves( sin_array );
}