ImageViewer 2

I’m trying to get caught up in my understanding of AS 2.0. With AS 3.0 here already I thought it would be good if I was only one version behind instead of two.

I got out my copy of Essential Actionscript 2.0 by Colin Moock. And started working on the ImageViewer class. This is a pretty good example with some practical uses.

I used the base ImageViewer and added some extra features of own.

ImageViewer 2 Class example

[kml_flashembed movie=”examples/ImageViewer/ImageViewer_031.swf” height=”300″ width=”400″ /]

I recently updated the ImageViewer2 so it now uses the mx.Tween class to contr it’s animated features. This now allows you to set the type of easing used for the resizing and alpha motion.

The ImageViewer2 Class uses the Following methods:

new ImageViewer2 ( target:MovieClip,
depth:Number,
x:Number,
y:Number,
width:Number,
height:Number,
borderThickness:Number,
borderColor:Number,
background:Boolean )

Use the constructor function to make a new instance of the ImageViewer2. For example the following make a new instance named my_iv with the following parameters:

• Host movie clip image_mc
• Depth of 1
• X position 0
• Y position 0
• Width 200
• Height 120
• Border 6 pixels
• Border color White
• Solid background

var my_iv = new ImageViewer2 ( image_mc, 1, 0, 0, 200, 120, 6, 0xFFFFFF, true );

Setting background true provides a background in the viewer. If background is false the viewer is transparent.

loadImage ( URL:String )

Load an image into the view. Pass the URL to the image file. For example the following line loads the image house.jpg into the vewier my_iv:

my_iv.loadImage( "house.jpg" )

setShowFullImage( showFullImage:Boolean )

The ImageViewer can show show at a fixed size or resize to fit the current image. By default the ImageViewer does not resize. Calling this function and passing true will tell the ImageViewer to resize to fit the currently loaded image. For example:

my_iv.setShowFullImage( true )

When showFullImage is false the imageViewer does not resize as a new image is loaded.

set_center_align( align:Boolean )

The viewer can scale from the upper left or center. By default the ImageViewer resizes from the upper left corner. Calling set_center_align() and passing true tells the viewer to align from the center. For example:

my_iv.set_center_align( true )

setPosition( x:Number, y:Number )
This method sets the position of the image within the viewer. Setting the size of the viewer smaller than the size of the image and moving the images allows you to crop an area of the image. Passing 0 x and 0 y to setPosition aligns the image with the upper left corner of the viewer. For example the following code moves the image 50 pixels to the left and 20 pixels up:

my_iv.setPosition( -50, -20 )

setSize( w:Number, h:Number )
This method sets the visible area of the viewer. For example the following sets the size of the viewer to 100 wide by 200 pixels tall:

my_iv.setSize( 100, 200 )

The setSize() method uses the mx.Tween class to animate the size of th ImageViewer. The default is:

mx.transitions.easing.Elastic.easeOut

This is an elastic ease out. You can set the easing method using the size_ease_type().

scaleViewerToImage()
This function makes the viewer resize to the size of the image that is currently loaded. For example:

my_iv.scaleViewerToImage()

fadeOut()

The fadeOut() method fades the imageViewer to an _alpha of 0. It sues the speed set in the set_alpha_speed() method see below. If the ImageViewer is faded to 0 _alpha you can fade it up to 100 _alpha by calling fadeIn() or by loading an image with loadImage().

fadeIn()

Fades the ImageViewer up to 100 _alpha.

Both the fadeIn() and fadeOut() methods use the mx.Tween class. The default easing is set to:

mx.transitions.easing.None.easeNone

None provides a linear ease. You can set the easing for the alpha fade using the alpha_ease_type( ease ) method.

set_fade_time( seconds )

Pass this methed the length of alpha fade in second. This sets the time for both fadeIn() and fadeOut(), the time it takes for an image to fade in after it’s finished loading. You can pass fractions of a second using a decimal value. For example you can set the time to one and half seconds with:

set_fade_time( 1.5 )

set_size_time( seconds )

Pass this method the number of seconds the resizing animation will take. For example the following would set the resizing animation to 2.25 seconds:

set_size_time( 2.25 )

alpha_ease_type( mx.transitions.easing )

Pass this method any of the mx.transition.easing ease types. For example the following sets the alpha ease to a ease out Bounce:

alpha_ease_type( mx.transitions.easing.Bounce.easeOut )

size_ease_type( mx.transitions.easing )

Pass this method any of the mx.transitions.easing.ease types. For example the following sets the resizing animation to a strong ease out:

size_ease_type( mx.transitions.easing.Strong.easeOut )

destroy()

This method cleans th ImageViewer and deletes it. Note this doesn’t delete the movieclips created by the ImageVeiwer or it’s host clip. Best practice would be to call imageViewer.destroy() then delete the host clip or leave the frame where the host exists.

set_background_color( color )

Sets the color of the background fill. The following would set the background to a dark red:

set_background_color( 0x660000 )

Note the colors are set as a hex value. Replace the # with 0x. For example #FF0000 (red) becomes 0xFF0000.