ImageBar Class

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,
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.

One thought on “ImageBar Class”

  1. Hello,
    really nice AS2 class !!!
    But I need to set it vertically and it’s not possible yet 🙁
    I tried to mod your class but no success.
    Any ideas on how to do this ?

    PS: I’m french, my english is verry bad….

Leave a Reply

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