Actionscript 3 Designer Toolkit

 
/**
*
* ImageRollover.as 	Last modified:  November 2009 
*
* @author Charles S.Davis
*
* Rollover button with 2 images & on click, go to url
*
* Licensed under the MIT License
* 
* Copyright (c) 2009 Charles S.Davis
* 
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
* 
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
* 
* http://www.opensource.org/licenses/mit-license.php
*    
*/
 
package com.dtk
{
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.net.navigateToURL;
	import flash.filters.ColorMatrixFilter;
	import flash.events.*;
	import com.dtk.DrawRectangle;
	import com.dtk.RadialLoading;
	import caurina.transitions.*;
 
	public class ImageRolloverCT extends Sprite
	{
		public var pathToImage:String;
		public var imageWidth:uint;
		public var imageHeight:uint;
		public var loadColor:uint;
		public var toURL:String;
 
		/**
		 *
		 *	PARAMS:		
		 *				@param			pathToImage						String				path to base color image
		 *				@param			imageWidth, imageHeight			uint				image dimensions
		 *				@param			loadColor						loadColor			color of loading progress indicator
		 *				@param			toURL							String				destination when image clicked
		 *
		 * 	USAGE:
		 *				var newVar:ImageRollover = new ImageRollover( pathToImage, imageWidth, imageHeight, loadColor, toURL );
		 *				newVar.x = x;			
		 *				newVar.y = y;
		 *				addChild( newVar );
		 */
		public function ImageRolloverCT( pathToImage:String, imageWidth:uint, imageHeight:uint, loadColor:uint, toURL:String ):void
		{
			this.pathToImage       =   pathToImage;
			this.imageWidth        =   imageWidth;
			this.imageHeight       =   imageHeight;
			this.loadColor         =   loadColor;
			this.toURL             =   toURL;
 
			loadImage();
		}
 
		/**
		 *	load image & add mouse event listeners
		 *
		 */
		private function loadImage():void
		{
			// create 2 loader objects from url passed
			var ldr1:Loader = new Loader;
			ldr1.load( new URLRequest( pathToImage ));
 
			var ldr2:Loader = new Loader;
			ldr2.load( new URLRequest( pathToImage ));
 
			// progress indicator
			var rpi:RadialLoading = new RadialLoading( 12, 8, 2, loadColor );
		 	rpi.x = Math.round( imageWidth/2 );
		 	rpi.y = Math.round( imageHeight/2 );
		 	addChild(rpi);
 
			// listener for loading completed message
			ldr1.contentLoaderInfo.addEventListener( Event.COMPLETE, onLoadingCompleted );
 
			// position image & add to display list
			ldr1.x = 0;
			ldr1.y = 0;
			ldr1.name = 'ldr1';
 
			// use color matrix filter to desaturate the bottom image
			var matrix:Array = new Array();
			matrix = matrix.concat([0.3, 0.59, 0.11, 0, 0]);  // red
			matrix = matrix.concat([0.3, 0.59, 0.11, 0, 0]);  // green
			matrix = matrix.concat([0.3, 0.59, 0.11, 0, 0]);  // blue
			matrix = matrix.concat([0,   0,    0,    1, 0]);  // alpha
			var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
 
			/*
			 *	Code below has desaturated image visible initially.
			 *	To change to colored image initially visible, change next line to:
			 *	ldr2.filters = [ filter ]; 
			 */
 
			ldr1.filters = [ filter ];
 
			// locate and make top colored image not visible
			ldr2.x = 0;
			ldr2.y = 0;
			ldr2.alpha = 0;
			ldr2.name = 'ldr2';
 
			addChild( ldr1 );
			addChild( ldr2 );
 
			var clk:DrawRectangle = new DrawRectangle( 0, 0, imageWidth, imageHeight, 0xFFFFFF, 0xFFFFFF, 0 );
 
			// add event listeners for mouse over, out & click events
			clk.addEventListener( MouseEvent.MOUSE_OVER, mouseOverHandler );
			clk.addEventListener( MouseEvent.MOUSE_OUT, mouseOutHandler );
			clk.addEventListener( MouseEvent.CLICK, mouseClickHandler );
			clk.buttonMode = true;
			clk.name = 'clk';
			addChild( clk );
		}
 
		/**
		 *	mouse behaviors
		 *
		 */
		private function onLoadingCompleted( e:Event ):void
		{
			// unload loading indicator
			removeChildAt(0);
		}
 
		private function mouseOverHandler( e:Event ):void
		{
			// getChildAt(1).alpha = 1;
			Tweener.addTween( getChildAt(1), { alpha: 1, time: .8, transition: "easeInSine" } );
		}
 
		private function mouseOutHandler( e:Event ):void
		{
			// getChildAt(1).alpha = 0;
			Tweener.addTween( getChildAt(1), { alpha: 0, time: .8, transition: "easeInSine" } );
		}
 
		private function mouseClickHandler( e:Event ):void
		{
			if ( toURL != '' )
			{
				var rq:URLRequest = new URLRequest( toURL );          
            	                navigateToURL( rq );
			}
		}
	}
}