Hi again, i update my scrollbar AS3 Class, named scrollbase, and today i post it for download, it’s really ease to work and so smaller than past version, only 1.5 kb.

The Features:
• Small file size
• Ease effect (or not) when move content
• Click the scroll background to move
•  Full customizable
• Scroll dragger with dynamic size
• All in one line

To use it you can write only two lines, so easy. The first line is the import and the second line is the scrollbase constructor, you need only put inside the constructor basicaly four movieclips, like show the sequence: content movieclip, mask of the content movieclip, the dragger movieclip and last movieclip is the background of the dragger, where the dragger will slide. Show the sample code bellow:

import com.dLibs.utils.scrollbase;
var sb:scrollbase = new scrollbase(conteudo,mascara,dragger,background,5,30);

This code show that ‘conteudo’ is the content movieclip and will be mask for ‘mascara’. ‘dragger’ is the movieclip that you click and move to see the rest of the content and move this movieclip upper of  ’background’ movieclip. So easy, but there we have some more arguments.

The fiveth argument is the Ease speed, you can change for more or less ease effect, by default the ease uint is 1 (one). The sixth argument is the bottom padding, you can put a number in pixels to show after the content movieclip, so much good for full background scrollbar, by default this padding is 0 (zero).

When you need you can verify if the scrollbase is necessary using the public function verifyHeight(). You can change the content of the moviclip and verify if content movieclip have the height propertie bigger than your mask. Usage:

import com.dLibs.utils.scrollbase;
var sb:scrollbase = new scrollbase(conteudo,mascara,dragger,background,5,30);
sb.verifyHeight();

You can download and change if you need. Try it!

Scrollbase by Scrollbar for AS3 is licensed under a Creative Commons Attribution 3.0 United States License.
Based on a work at code.google.com.

26 July ‘09 /EDIT —————————–

I’m working in a new version of scrollbase and as soon as possible i will post here the classe code and samples, now im working with a temp class named scrollbasic that i made to resolve the problem that @sonia said in comment. You can download the scrollbasic with link bellow and as so simple to use like scrollbase:

import com.dLibs.utils.scrollbasic;
var nsc:scrollbasic = new scrollbasic(DataRecord.getDocumentClass, conteudo, mascara, sdragger, sbground);

Need set the main document class, you can create one static class to set and get it, and set the movieclips as content clip, mask clip, dragger clip and scrollbar background. Probabily i will post the new version of scrollbase 31 July ‘09.

Thanks for all and sorry for the error.
: )

Download: [Download not found]

Well how do i scale my objects proportionally? Hmm this is a problem, but now a problem resolved. Now you can use the scaleObject class, a simple class that make only one thing: scale objects proportionally.

This is great to maximize images into the fullscreen stage or other things when you need create nicelly thumbnails, i used this class into the drag large images with zoom post, when the picture is loaded i put the code to contract the image size into the mask moviclip. Now i will explane some thing about it, look the simple code:

1
2

import com.dLibs.utils.scaleObject;
var so:scaleObject = new scaleObject(movieClip, { width : stage.stageWidth, height : stage.stageHeight });

Really simple? Yeah. You will need only create a scaleObject and into the constructor arguments put the movieclip or bitmap object that you want scale and into the second argument, the object, you put the min width and min height of your object or the stage, width and height receive numbers.

2

var soTwo:scaleObject = new scaleObject(bitmap, { width : 500, height : 400 });

If the bitmap or movieclip have more width than height will show full height and hide the extra width.
You can download the scaleObject class  using Google Code or with the link bellow.

Download: [Download not found]

Hi, today i made a dragger to view large images inside the small mask and here i am to show for you how to use it if you need. Well, the dragger need only create a simple object and set the content movieclip and the mask movieclip instances, the classe do the rest. See the sample bellow.

You can click and drag the image into this box, you can put the box or with the width and height as you want and the same for the loaded image, you can use the size as you want too. But how to do it work fine ? Let’s go to the document class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

package
{
	import com.dLibs.events.Events;
	import com.dLibs.loadit;
	import com.dLibs.utils.dragIt;
 
	import flash.display.MovieClip;
 
	public class DocumentClass extends MovieClip
	{
		private var image:loadit;
		private var theImage:String = "http://farm4.static.flickr.com/3631/3375666390_505733a332_b.jpg";
 
		public function DocumentClass():void
		{
			image = new loadit(theImage,true);
			image.addEventListener(Events.COMPLETE, imgComplete);
			image.addEventListener(Events.PROGRESS, imgProgress);
			content.addChild(image);
		}
 
		private function imgProgress(e:Events):void
		{
			// trace(e.obj.percentLoaded);
		}
 
		private function imgComplete(e:Events):void
		{
			var drag:dragIt = new dragIt();
			drag.drag(content,maskImage);
			addChild(drag);
		}
	}
}

Here i load the Flickr image (Jesus Jones, Me and Joisiney Leandro) and only into the complete event i put the function that make the dragger. First step is create the dragIt object like show the line 29.

The second step is set the Movieclips, the content clip and the maks clip, using the Public Function drag. See the line 30, and add the object to stage aaand done. Test the movie and you can drag your own pictures into the mask, so easy. To make the sample you can download the sample bellow or only classes using the SVN repository: http://asdatalibs.googlecode.com/svn/trunk/

Download the sample project: [Download not found]

Hi for all again and today i will write here something about the File Class, how to create, read and write data into a file and store it in local machine.

Well, yesterday i had the problem to create a file log on an AIR project, for two hours i read some articles and sample chapters about File class and only today (now, 9 April @12:15) i resolve this problem: create a class to create and write data into the File.

The code sample is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import com.dLibs.air.recFile;
 
var nFile:recFile = new recFile();
nFile.setDiretory = "diretoryName";
 
// fileText is a textfield
fileText.text = "";
 
// saveButtom is a movieClip
saveButtom.addEventListener(MouseEvent.CLICK, saveTheFile);
 
function saveTheFile(m:MouseEvent):void
{
	var theDate:Date = new Date();
	var dateNow:String = String(theDate.getHours() + ":" + theDate.getMinutes() + ":" + theDate.getSeconds());
	var textBox:String = String(dateNow + " : " + fileText.text + "\n");
	nFile.writeData = textBox; // result sample: 13:08:32 : content of the textbox
	fileText.text = "";
}

The default format of the file is HTM, but you can change it too using the first argument of the constructor like show bellow:

3

var nFile:recFile = new recFile(“txt”);

Well, to save the data you need call the public set function writeData, see line 17. The string that you send to writeData function will be write at the last line, case document type is HTM or HTML, or after the last character for other document types.

Fine, but where my file? Hmmm, see it. Using the complete constructor arguments you can set the document type, the folder that you want save the file and too the name of the document. No one of these arguments is necessary to create the file, by default the document will be save using type HTM, saved in the Desktop, but you can change to Documents folder for Mac and My Documents for Windows, and the last, name of the file will be the date: dd_mm_yyyy.

Other set function that you can use is the setDiretory. If you chosse to create the file into the Documents folder with extension txt and there you want create other folder with the name of the your AIR project, what you can do to make it ? It’s so simple:

var nFile:recFile = new recFile(“txt”,"documents");
nFile.setDiretory = "projectName"

This today will create a file named 09_Apr_2009.txt into your My Documents / projectName folder automatically, if there have this file you will write the data at the last line of this.

You can download the full source code using the download bellow, or you can download only the classes using the SVN client: http://asdatalibs.googlecode.com/svn/trunk/

Download: [Download not found]

Hi for all, here i post a simple way that i always use to scroll movieclip content into AS3 projects.  I created this classe to scroll content using simple four movieclips: a content movieclip, maskmovieclip, dragger clip and background scroll clip.

First see the working example bellow:

It’s so simple to use this scrollbar, here the document class of this upper example:

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import com.dLibs.utils.scrollbase;
 
	public class main extends MovieClip
	{
		private var scrollMovieclip:scrollbase;
 
		public function main():void
		{
			stage.align = StageAlign.TOP;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			// @ Creating the scrollbas
			scrollMovieclip = new scrollbase(conteudo,contenMask,drag,scrollbar);
		}
	}
}

To use it changing the content data, and for this the content height, you have one public function to verify if is necessary the scroll bar, and if isn’t necessary it will be invisible at you make a new verify. Alway when you change the content of the movieclip you need call the function verifyHeight() with your scrollbase object, like this:

scrollMovieclip.verifyHeight()

This is will hide or show your scroll dragger and background if your content height is bigger or not at movieclip mask, its really so simple.

You can too increase the space of bottom when you scroll down all your dragger, is only you put one more variable in scrollbase object:

scrollMovieclip = new scrollbase(conteudo,contenMask,drag,scrollbar,50);

Download this sample and scrollbase classe clicking here or you can download full classes in my SVN repository: http://asdatalibs.googlecode.com/svn/trunk/

The unique requirement to use this class is: you need have TweenLite class too, you can download it at: http://blog.greensock.com/tweenliteas3/

Thanks for reading and see you soon here at the same channel XD.

Hi again for all, well think you creating a simple video player in max one minute.  ”Yes, We Can”.  Using  the videoPlayer class from asDataLibs. The videoPlayer is a simple way to make your video player or video gallery using less time than the normal process. Bellow some features:

• Support HD (h.264)
• Play and Pause button together;
• Mute button;
• Seek bar and loaded bar;
• Time played and total time of video.

In final of this post you will see the link to download the sample video player and the source code demonstrated in this article. See the sample of video Bellow.

video by Flasher Magazine

Create the video is so simple like show these actionscript line ahead:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import com.dLibs.video.videoPlayer;
 
	public class main extends MovieClip
	{
		private var videoObject:videoPlayer;
		private var videoURL:String = "http://adobe.edgeboss.net/download/adobe/adobetv/flasher_magazine/issue_1/issue1.mp4";
		private var videoWidth:uint = 700;
		private var videoHeight:uint = 400;
		private var videoStart:Boolean = false;
 
		public function main():void
		{
			videoObject = new videoPlayer(videoURL,700,400,false);
			videoObject.addBuffer 		= newBuffer;
			videoObject.addPlayPause 	= playPause;
			videoObject.addMuteSound 	= muteIcon;
			videoObject.addDuration 	= seekControll.theTime;
			videoObject.addSeek 		= {progress:seekControll.seekProgress, loader:seekControll.seekLoader};
			newVideo.addChild(videoObject);
 
			// @ Change status of playPause Button
 
			playPause.addEventListener(MouseEvent.CLICK, changePlayPause);
		}
 
		private function changePlayPause(m:MouseEvent):void
		{
			if ( m.currentTarget.currentFrame == 1 ) 	{ m.currentTarget.nextFrame(); }
			else 										{ m.currentTarget.prevFrame(); }
		}
	}
}

In resume the videoPlayer object receive three variables:
• URL of video, width and height of video.
By default this video will play when buffer is full, but can change it sending ‘false’ withe the fourth variable that is if the video will start or not on load buffer complete. Other optional variable is buffer time. The complete object is:

new videoPlayer(videoURL:String,videoWidth:uint, videoHeight:uint, videoStart:Boolean = true, videoBuffer:uint = 10)

Now you can put the playpause button, mute button and seek too:

19
20
21
22
23

videoObject.addBuffer 		= newBuffer;
videoObject.addPlayPause 	= playPause;
videoObject.addMuteSound 	= muteIcon;
videoObject.addDuration 	= seekControll.theTime;
videoObject.addSeek 		= {progress:seekControll.seekProgress, loader:seekControll.seekLoader};

After that you need add this object in your stage and now see your video into Flash using Actionscript 3 easy.

Download the sample and source here.

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

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/