» Simple gallery class [AS3]: gallLoader | DES 84

Simple gallery class [AS3]: gallLoader

December 17th, 2008

Create one simple gallery can take a time that you havent. Well, a simple solution that i create was gallLoader Class, one simple gallery that load thumbs, position thumbs in lines and load large image. Simple to use:

gallloaderpic

Have two arrows in right and left side of thumb container, these arrow will move container to view all other images using one more class named slideClip. Now you need only import and create these class objects like code bellow:

import com.dLibs.slider.slideClip;
import com.dLibs.photos.gallLoader;
 
var minData:Array = ["galeria/001/001.jpg", ...];
var maxData:Array = ["galeria/001/g001.jpg", ...];
 
var gallPict:gallLoader;
gallPict = new gallLoader(minData,maxData,gClip.bigImage,gClip.gImages,"gallThumb",4,2,gClip.LoadQuadAnim);
 
var galSlider:slideClip;
galSlider = new slideClip(gClip.gImages, gClip.gMask, gClip.gNext, gClip.gPrev);

Well, minData and maxData is an Array with thum and large images location. We import slideClip and gallLoader classes, the first will make slider with container and other classe will create the gallery.

First create gallPict link and gallLoader object, and this new gallLoader object need receive in order: thumb array, large images array, MovieClip instance of large image, container instance, class of the thumb clip in library, padding or distance of thumb clips, number of lines that will separated thumbs and loader instance. Uffa ehehhe so many instances but the result is so many speedly.

Too need create slideClip object and set the clip instances: container clip instance, mask intance ( mask of container ), next and prev clip instance. Using click event will move and show all container clip with your thumbs. See the Flash simple gallery in action here:

Bellow the slideClip and gallLoader classes to view and save.

slideClip.as

package com.dLibs.slider
{
 
	import flash.display.*;
	import flash.events.*;
	import gs.TweenLite;
 
	public class slideClip
	{
 
		private var _contClip:MovieClip;
		private var _maskClip:MovieClip;
		private var _nextClip:MovieClip;
		private var _prevClip:MovieClip;
		private var _maxWidth:Number;
		private var _actWidth:Number;
 
		public function slideClip(contClip:MovieClip, maskClip:MovieClip, nextClip:MovieClip, prevClip:MovieClip)
		{
			/*
				To use this class
				var galSlider:slideClip = new slideClip(clip_Images, clip_Mask, clip_Next, clip_Prev);
				Clips that ll be slided, clip that mask the first, button to Next and to ultimate to Prev
			*/
 
			_contClip = contClip;
			_maskClip = maskClip;
			_nextClip = nextClip;
			_prevClip = prevClip;
 
			_nextClip.buttonMode = true;
			_prevClip.buttonMode = true;
 
			_maxWidth = _maskClip.width;
			_actWidth = _maskClip.x;
 
			slideInit();
		}
 
		private function verifyWidth():void
		{
			if ( _contClip.width &lt;= _maxWidth ) _nextClip.visible = _prevClip.visible = false;
		}
 
		private function slideInit():void
		{
			_nextClip.addEventListener(MouseEvent.CLICK, showNext);
			_prevClip.addEventListener(MouseEvent.CLICK, showPrev);
 
			verifyWidth();
		}
 
		private function showNext(e:MouseEvent):void
		{
			if ( int(_actWidth) &gt; int((_maskClip.x + _maxWidth ) - _contClip.width)  )
			{
				TweenLite.to(_contClip,.9, {x : _actWidth - _maxWidth});
				_actWidth = _actWidth - _maxWidth;
			}
		}
 
		private function showPrev(e:MouseEvent):void
		{
			if ( int(_actWidth) &lt; int(_maskClip.x) )
			{
				TweenLite.to(_contClip,.9, {x : _actWidth + _maxWidth});
				_actWidth = _actWidth + _maxWidth;
			}
		}
	}
}

gallLoader.as

package com.dLibs.photos
{
 
	import flash.display.*;
	import flash.events.*;
	import flash.utils.*;
	import flash.net.*;
	import gs.TweenLite;
 
	public class gallLoader
	{
		/* @ Variables	 				____________________________________________________*/
 
		private var _minData		:Array;
		private var _maxData		:Array;
		private var _thmBox		:Array;
		private var _bigPict		:MovieClip;
		private var _smallPict		:MovieClip;
		private var _thmClip		:MovieClip;
		private var _thmMovie		:MovieClip;
		private var _bigMovie		:MovieClip;
		private var _loaderClip		:MovieClip;
		private var _thumbClass		:String;
		private var _loaderThumb	:Loader;
		private var _loaderBig		:Loader;
		private var _i			:uint;
		private var _thumbPadding	:uint;
		private var _thumbLines		:uint;
		private var _thumbLineY		:uint;
		private var _thumbLineX		:uint;
 
		/* @ Constructor 				____________________________________________________*/
 
		public function gallLoader(minData:Array,maxData:Array,bigPicture:MovieClip,smallPictures:MovieClip,thumbClass:String,thumbPadding:uint=0, thumbLines:uint=1,loaderClip:MovieClip=null):void
		{
			_minData 		= minData;
			_maxData 		= maxData;
			_bigPict 		= bigPicture;
			_smallPict 		= smallPictures;
			_thumbClass 	= thumbClass;
			_thumbPadding 	= thumbPadding;
			_thumbLines		= thumbLines;
			_loaderClip		= loaderClip;
 
			_thmBox = new Array();
 
			initGall();
		};
 
		/* @ init Function 				____________________________________________________*/
 
		private function initGall():void
		{
			if ( _loaderClip != null ) _loaderClip.visible = false;
 
			for ( _i = 0; _i &lt; _minData.length; _i++ )
			{
				_loaderThumb 	= new Loader();
				_loaderThumb.x 	= _thumbPadding;
				_loaderThumb.y 	= _thumbPadding;
				_loaderThumb.load(new URLRequest(_minData[_i]));
				trace(_minData[_i] , _i);
 
				_thmClip 	= new ( getDefinitionByName(_thumbClass) as Class )();
				_thmClip.addChild(_loaderThumb);
 
				_thmMovie 		= new MovieClip();
				_thmMovie.x 	= ( _thmClip.width + 5 ) * _thumbLineX;
				_thmMovie.y		= ( _thmClip.height + 5 ) * _thumbLineY;
				_thmMovie.id 	= _i;
				_thmMovie.buttonMode = true;
				_thmMovie.addEventListener(MouseEvent.CLICK, viewPicture);
				_thmBox.push(_thmMovie);
				_thmMovie.addChild(_thmClip);
 
				_smallPict.addChild(_thmMovie);
 
				if ( _thumbLineY + 1 &lt; _thumbLines )
				{
					_thumbLineY++;
				} else {
					_thumbLineY = 0;
					_thumbLineX++;
				}
			};
			_thmBox[0].dispatchEvent(new MouseEvent(MouseEvent.CLICK));
		};
 
		/* @ init Function 				____________________________________________________*/
 
		private function viewPicture(e:MouseEvent):void
		{
			_loaderBig = new Loader();
			_loaderBig.load(new URLRequest(_maxData[e.currentTarget.id]));
			_loaderBig.contentLoaderInfo.addEventListener(Event.COMPLETE, showLoadedBig);
			_loaderBig.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showLoaderBig);
			trace(_maxData[e.currentTarget.id] , e.currentTarget.id);
 
			if ( _bigPict.numChildren &gt; 1 ) _bigPict.removeChildAt(1);
		};
 
		private function showLoaderBig(e:ProgressEvent):void
		{
			if ( _loaderClip != null ) _loaderClip.visible = true;
		};
 
		private function showLoadedBig(e:Event):void
		{
			if ( _loaderClip != null ) _loaderClip.visible = false;
			_bigMovie 		= new MovieClip();
			_bigMovie.alpha = 0;
			_bigMovie.addChild(_loaderBig);
			_bigPict.addChild(_bigMovie);
 
			TweenLite.to(_bigMovie,.4,{ alpha : 1 });
		};
 
		/* @ End		 				____________________________________________________*/
 
	};
};

You can download the classes direct in repository:
http://asdatalibs.googlecode.com/svn/trunk/

Any questions comment it. Thanks.
XD

Escrito por: Pablo Davi e Gravado em: ActionScript 3, Download, Flash, Source, dLibs 7 Comments »

7 Responses to “Simple gallery class [AS3]: gallLoader”

Camila Says:
December 30th, 2008 at 11:51
Oi Pablo,

Vi que vc entende bem de action então se puder, me tire uma dúvida!

Queria aprender action script, mas não sei qua se nada nem do action2, vc acha q eu poderia ir direto aprender o action 3? ou vc ahca que seria melhor aprender o 2 antes?

Vlw!
Pablo Davi Says:
December 31st, 2008 at 15:12
Opa Camila, bem eu trabalho com AS2 a muito tempo e por isso compreender o Actionscript 3 foi uma questão de adequação, o que convenhamos é muito mais fácil que aprender tudo do zero. No seu caso eu acredito que é muito mais simples e rápido correr direto para o AS3, claro que se já entendesse um pouco do 2 seria uma vantagem muito grande mas se não conhece então não não perca tempo, isso pode é fazer você se confundir.

Parta direto para o AS3 que vai ser muito mais rápido e hoje em dia tem muito mais sites falando sobre o AS3 que o 2 então suas fontes de pesquisas serão muito mais vastas. Qualquer dúvida só falar.
rodrigo Says:
April 10th, 2009 at 13:02
Olá Pablo, estou tentando fazer essa galeria de imagens que você colocou aqui no seu blog, mas está dando alguns erros… teria como você colocar todos os arquivos para download para me basear e ver onde está o erro?

Vlw!
Pablo Davi Says:
April 10th, 2009 at 13:51
Olá Rodrigo, bem seria bem melhor se você postasse aqui os seus erros para eu poder te ajudar melhor com a implmentação. Esse fim de semana (10 a 13 de Abril – 2009 ) vou estar fora mas dia 14 eu volto e posto aqui um exemplo para download funcionando para voce poder baixar e customizar à sua necessidade.

Grande abraço
rodrigo Says:
April 10th, 2009 at 15:39
blz pablo… mas acontece vários erros por causa das classes… e não to sabendo lhe dar com elas (classes)…
Marcello Says:
May 26th, 2009 at 17:34
Olé odrigo muito obrigado pela explicação. Gostaria somente te lhe pedir o .fla. Pois estou com muitos erros no meu. Você poderia me mandar por e-mail ou divulgar nest pagina?

Grande abraço
Marcello
Pablo Davi Says:
May 29th, 2009 at 15:08
@marcello: o arquivo FLA você pode baixar diretamente pelo link: http://blog.des84.com/projects/simpleGallery/simpleGallery.fla