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:
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 <= _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) > 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) < 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 < _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 < _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 > 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
Introduzindo asDataLibs
September 23rd, 2008
Olá, estou aqui novamente escrevendo um pouco mais sobre Actionscript 3 para iniciantes e intermediários. Antes de mais nada preciso explicar o que é o tal “asDataLibs”, que mesmo com um nome meio estranho, nada mais é que uma biblioteca ou coleção de bibliotecas, classes AS3, em Actionscript 3 que tem a intenção de facilitar para o programador o modo com que ele recebe, trata e disponibiliza os dados usados nas aplicações em Flash (AS3).
Acredito que a forma mais complicada mas a mais completa de se fazer uma transição do AS2 para AS3 é começando entender e criar Classes, essas que uma vez criadas, e bem criadas, resolvem um enorme problema de retrabalhos que se tinha facilmente na versão anterior da linguagem, mesmo que nessa anterior também fosse possivel criação das classes mas não era tão utilizada como agora.
O “asDataLibs” pode ser encontrado no endereço: http://code.google.com/p/asdatalibs
Ainda em fase de criação, as classes no dominio asDataLibs do Google, listado acima, somente seram publicadas no SVN depois de testadas e funcionando corretamente e seram colocados exemplos dentro da pasta samples no proprio SVN e no Wiki do Google Code.
A primeira classe criada e que vamos falar agora é a openFile (com.dLibs) essa que tem a finalidade de carregar arquivos externos para dentro da sua aplicação como imagens e animações em formato SWF. É realmente uma classe bem simples mas muito completa no quisito carregamento porque através dela se pode receber a porcentagem de carregamento diretamente em uma função de Loader que o proprio desenvolvedor criara de acordo com sua necessidade. Para iniciar a utilização da classe precisa-se inicialmente importar o pacote como segue abaixo:
import com.dLibs.openFile;
Depois disso, como se trata de uma classe estatica e por isso não precisa se criar objetos como acontece no Tweener por exemplo, então precisa-se somente chamar a classe a sua função estatica para ser executada como mostrado a seguir:
openFile.addItem(mc:MovieClip, file:String, Loader:Function, Timer:uint, transit:String);
Aparentemente muito complexa mais os campos requeridos para o carregamento são somente os três primeiros que são:
mc : Movie Clip onde será carregado o arquivo externo.
file: Arquivo a ser carregado, endereço relativo ao arquivo swf.
loaderText: que é o nome da função.
Para ver o loader funcionando basta criar uma função dentro do seu pacote de acesso ou dentro do arquivo FLA com o nome colocado quando se chama a classe e ele receberá o valor do percentual carregado abaixo mostrado:
import com.dLibs.openFile;
openFile.addItem(clip_mc, "files/image.jpg",loaderImages);
function loaderImages(porcentagem:uint):void
{
myTextField.text = String(porcentagem);
}
No exemplo acima a classe openFile carrega o arquivo “image.jpg” dentro do diretório “files” e o coloca dentro do movie clip nomeado de “clip_mc”, durante o carregamento desse arquivo o campo de texto nomeado de “myTextField” receberá os valores numerais convertidos para String da porcentagem carregada do arquivo, muito simples.
Assim os outros dois tipos de argumentos da função são responsáveis pela velocidade do fade final do arquivo recebido e do tipo de transição sera feita pelo fade, os dois correspondentes a classe Tweener, que é incluida dentro da classe openFile.
Próximos posts falaram de outras classes existentes e outras que ainda estão em construção para serem disponivilizadaso no SVN: http://asdatalibs.googlecode.com/svn/trunk/
