Hi Geral, depois de muito tempo e muitas mudanças na vida estou de volta escrevendo um novo post sobre alguma coisa que eu já deveria ter feito a muito tempo ehehe: uma galeria de imagens decente. Estive pesquisando algumas coisas sobre estrutura de navegação e formas de deixar o codigo As3 mais fácil de trabalhar, fiz bastante mudanças nas minhas classes e uma das primeira que tem esse mesmo conceito é a FullGallery: uma galeria de imagens estilo lightbox feita em Actionscript 3 que permite arquivos carregados externamente ou o próprio arquivo enviarem uma lista de imagens e chamar uma determinada foto usando a estrutura.

Primeira coisa que devemos fazer é baixar o pacote de classes novesfora via Google Code. Coloque a pasta novesfora junto do seu projeto ou na sua pasta de classes, a segunda opção é sempre a melhor. O resultado final será esse: http://blog.des84.com/projects/FullGallery/

Segundo passo é criar um arquivo FLA e setar o seu document class, no exemplo irei usar o nome da classe de ‘DocumentClass()’, ai precisamos definir primeiro o alinhamento da aplicação, se irá ser alinhado ao centro – default do Flash – ou se irá alinhar toda a aplicação à esquerda, vamos colocar alinhado à esquerda.

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

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
 
	public class DocumentClass extends MovieClip
	{		
		public function DocumentClass():void
		{
			// Configurando e setando stage infos
 
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.BEST;
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}
	}
}

Depois disso precisamos usar a classe StageLocation do pacote novesfora para falar para a aplicação, inclusive para a FullGallery – que usa essa classe na sua construção – quem é o Stage, a largura e também a altura do palco.

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

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
 
	import novesfora.utils.StageLocation;
 
	public class DocumentClass extends MovieClip
	{
		public var Box									:MovieClip; // Movieclip no palco
 
		public function DocumentClass():void
		{
			// Configurando e setando stage infos
 
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.BEST;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			StageLocation.setStage = stage;
			StageLocation.setStageWidthFix = 900;
			StageLocation.setStageHeightFix = 500;
		}
	}
}

Agora é criar o objeto FullGallery e adicionar os, necessários, botões de fechar a galeria, anterior, próxima imagem e o movieclip de carregamento. Todos esses movieclips devem ser setados como string, essa que deve ser o mesmo nome da classe desses movieclips na biblioteca.

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
37
38
39
40
41
42
43
44
45
46
47

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import novesfora.photos.FullGallery;
	import novesfora.utils.StageLocation;
 
	public class DocumentClass extends MovieClip
	{
		public var Box									:MovieClip;
 
		private var $Gallery							:FullGallery;
		private var $NewImages							:Array;
 
		public function DocumentClass():void
		{
			// Configurando e setando stage infos
 
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.BEST;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			StageLocation.setStage = stage;
			StageLocation.setStageWidthFix = 900;
			StageLocation.setStageHeightFix = 500;
 
			// Criando a lista de imagens a serem mostradas
 
			$NewImages = new Array("imagens/001g.jpg","imagens/002g.jpg","imagens/003g.jpg");
 
			// Criando o objeto da Galeria e configurando
 
			$Gallery = new FullGallery("LEFT"); // Alinhamento LEFT, default = CENTER
			$Gallery.addImages = $NewImages; // Adicionando imagens a serem mostradas
			$Gallery.addClose = "Closer"; // Adicionando botao para fechar - necessario
			$Gallery.addLoader = "loaderImage"; // Adicionando loader das imagens
			$Gallery.addNext = "nextImage"; // Botao de proxima imagem
			$Gallery.addPrev = "prevImage"; // Botao de anterior
			addChild($Gallery);
		}
	}
}

Até esse momento o que fizemos foi configurar a galeria, falar quem são os botões que serão usados, o alinhamento do palco e adicionamos a galeria no projeto, não chamamos em nenhum momento uma fotografia, ou seja, se compilar o projeto nesse estágio verá que nada acontecerá. Agora irá depender mais de você que da galeria, você irá receber os thumbnails via XML, AMFPHP ou qualquer outra forma que quiser, montar sua grid e esse thumbnail quando for clicado irá executar uma função da FullGallery dizendo qual é a imagem, dentro do Array de imagens já enviado, que precisa ser aberta. Funciona da seguinte forma, ver as funções ShowFirstImage(), ShowSecondImage() e ShowThirdImage():

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import novesfora.photos.FullGallery;
	import novesfora.utils.StageLocation;
 
	public class DocumentClass extends MovieClip
	{
		public var Box									:MovieClip;
 
		private var $Gallery							:FullGallery;
		private var $NewImages							:Array;
 
		public function DocumentClass():void
		{
			// Configurando e setando stage infos
 
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.BEST;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			StageLocation.setStage = stage;
			StageLocation.setStageWidthFix = 900;
			StageLocation.setStageHeightFix = 500;
 
			// Criando a lista de imagens a serem mostradas
 
			$NewImages = new Array("imagens/001g.jpg","imagens/002g.jpg","imagens/003g.jpg");
 
			// Criando o objeto da Galeria e configurando
 
			$Gallery = new FullGallery("LEFT"); // Alinhamento LEFT, default = CENTER
			$Gallery.addImages = $NewImages; // Adicionando imagens a serem mostradas
			$Gallery.addClose = "Closer"; // Adicionando botao para fechar - necessario
			$Gallery.addLoader = "loaderImage"; // Adicionando loader das imagens
			$Gallery.addNext = "nextImage"; // Botao de proxima imagem
			$Gallery.addPrev = "prevImage"; // Botao de anterior
			addChild($Gallery);
 
			// Mouse Events - Fazendo o *** menu funcionar
 
			( Box.Box01 as MovieClip ).buttonMode = true;
			( Box.Box02 as MovieClip ).buttonMode = true;
			( Box.Box03 as MovieClip ).buttonMode = true;
 
			( Box.Box01 as MovieClip ).addEventListener(MouseEvent.CLICK, ShowFirstImage);
			( Box.Box02 as MovieClip ).addEventListener(MouseEvent.CLICK, ShowSecondImage);
			( Box.Box03 as MovieClip ).addEventListener(MouseEvent.CLICK, ShowThirdImage);
 
			stage.addEventListener(Event.RESIZE, ResizeBox);
			stage.dispatchEvent(new Event(Event.RESIZE));
		}
 
		private function ShowFirstImage(e:MouseEvent):void
		{
			$Gallery.initGallery(); // Valor default = 0. Primeira imagem do Array
		}
 
		private function ShowSecondImage(e:MouseEvent):void
		{
			$Gallery.initGallery(1); // Chama por 1, segunda imagem do Array
		}
 
		private function ShowThirdImage(e:MouseEvent):void
		{
			$Gallery.initGallery(2); // Chama por 2, terceira imagem do Array
		}
 
		private function ResizeBox(e:Event):void
		{
			Box.x = ( stage.stageWidth - Box.width ) / 2;
			Box.y = ( stage.stageHeight - Box.height ) / 2;
		}
	}
}

Usando o $Gallery.initGallery(); iremos chamar a class FullGallery e inicializar a galeria enviando o ID da imagem que corresponde ao numero da posição do Array de imagens, bem simples. Como já foi dito, o resultado final será esse: http://blog.des84.com/projects/FullGallery/. Se preferir pode baixar os arquivos diretamente pelo link abaixo, o projeto requer o uso das classes Tweenlite e do pacote novesfora via Google Code.

Download: FullGallery Source Code (395) (Defasada)
Download versão nova: FullGallery Atualizada (177)

Depois de tanto ouvir acabei voltando a escrever no blog em português, mas isso acredito que é o que menos importa até mesmo porque estamos ali meio a meio com os americanos em quantidade de acessos no blog mas com muito mais tempo online para os brasileiros, então ponto pra gente.

Bem vou falar hoje de uma classe personalizada que criei para carregamento de imagem. Quando digo que não irá utilizar a classe Loader(), eu tenho alguns argumentos para isso:
- ao usar a classe loader você precisa colocar o conteúdo dela dentro de um sprite ou movieclip para poder manipular.
- ao deletar o loader precisa remover todos os listeners criados para o carregamento
- precisamos criar listeners adicionais para recuperar no inicio do carregamento o tamanho da imagem
- cache – i hate you – quem nunca teve problemas com atualizar o conteúdo e mesmo depois de horas continuar aparecendo a mesma imagem que o cliente implorou para trocar e você ja trocou, mas vai explicar pra ele o que é cache.

Com a classe personalizada, que estende à movieclip, temos uma facilidade muito maior de manuseio porque depois de criado o objeto podemos tratá-lo como um movieclip comum. Para tanto vamos usar eventos personalizados para sabermos quando estiver carregando, carregado, erro ao carregar e dimensões da imagem no inicio do carregamento. Abaixo vou deixar um exemplo mostrando o funcionamento, tudo que é feito nesse exemplo pode ser feito usando a classe nativa Loader() mas de uma forma muito mais fácil.

Então, para começarmos precisamos da classe de carregamento, dos eventos e da unica dependência que é a classe do Anttikupila, JPGSizeExtractor, essa que retira da imagem no carregamento a sua largura e altura – antes do complete. Para fazer download das classes você poder usar o seu programa de SVN e baixar o repositório: http://asdatalibs.googlecode.com/svn/trunk/ ou se preferir acesse o browser de códigos do Google Code clicando aqui.

Agora que temos todas as classes então vamos ao código. Dentro do nosso document class vamos criar a variável e um listener para o botão que temos no palco do Flash, botão esse que será responsável por chamar a imagem que queremos carregar.

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

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	import novesfora.loader.LoadFile;
 
	public class DocumentClass extends MovieClip
	{
		public var downImage:MovieClip;
		public var conteudo:MovieClip;
 
		private var lf:LoadFile;
		private var imageURL:String = "http://blog.des84.com/imageSamples/thinkGeek_largeSize.jpg";
 
		public function DocumentClass():void
		{			
			downImage.buttonMode = true;
			downImage.addEventListener(MouseEvent.CLICK, downloadImage);
		}
	}
}

Até esse ponto o que fizemos foi, criamos uma variável chamada lf do tipo LoadFile, que é a nossa classe personalizada e fizemos com que o movieclip ‘downImage’ fosse tratado agora como um botão, e quando for clicado irá executar a função chamada ‘downloadImage’. Vamos à essa função então:

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

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	import novesfora.events.Events;
	import novesfora.loader.LoadFile;
 
	public class DocumentClass extends MovieClip
	{
		public var downImage:MovieClip;
		public var conteudo:MovieClip;
 
		private var lf:LoadFile;
		private var imageURL:String = "http://blog.des84.com/imageSamples/thinkGeek_largeSize.jpg";
 
		public function DocumentClass():void
		{			
			downImage.buttonMode = true;
			downImage.addEventListener(MouseEvent.CLICK, downloadImage);
		}
 
		private function downloadImage(e:MouseEvent):void
		{
			lf = new LoadFile(imageURL,true);
			lf.addEventListener(Events.COMPLETE, 	showFull);
			lf.addEventListener(Events.IOError, 	showError);
			lf.addEventListener(Events.PROGRESS, 	showProgress);
			lf.addEventListener(Events.START, 		showStart);
		}
	}
}

Aqui temos que o lf foi criado como um novo LoadFile, a sintaxe dessa classe recebe no seu document class dois valores como podemos ver, o primeiro do tipo String vai ser o endereço da imagem a ser carregada, que seria colocada dentro do URLRequest() caso estivéssemos utilizando a forma convencional de carregar um arquivo. O segundo valor do tipo Boolean define se o conteúdo carregado irá ou não receber o smooth para o bitmap, funcionalidade muito interessante quando tratamos de imagens que irão ser esticadas como quando utilizamos imagens para o background do site, por default esse valor é false para economizar processamento.

Abaixo então temos os eventos personalizados, Events(), para isso precisamos importar a classe de eventos como mostra 06 do código. Então temos, na sequência, um evento para o final do carregamento do arquivo, para erro ao carregar, progressão ou loading e para o inicio do carregamento, esse último para recebermos as dimensões do arquivo. Na frente de cada evento o nome da função que cada um irá executar. Então finalizando:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	import novesfora.events.Events;
	import novesfora.loader.LoadFile;
 
	public class DocumentClass extends MovieClip
	{
		public var downImage:MovieClip;
		public var conteudo:MovieClip;
 
		private var lf:LoadFile;
		private var imageURL:String = "http://blog.des84.com/imageSamples/thinkGeek_largeSize.jpg";
 
		public function DocumentClass():void
		{			
			downImage.buttonMode = true;
			downImage.addEventListener(MouseEvent.CLICK, downloadImage);
		}
 
		private function downloadImage(e:MouseEvent):void
		{
			lf = new LoadFile(imageURL,true);
			lf.addEventListener(Events.COMPLETE, 	showFull);
			lf.addEventListener(Events.IOError, 	showError);
			lf.addEventListener(Events.PROGRESS, 	showProgress);
			lf.addEventListener(Events.START, 		showStart);
		}
 
		private function showFull(e:Events):void
		{
			conteudo.addChild(lf);
		}
 
		private function showError(e:Events):void
		{
			trace("Error on load Image");
		}
 
		private function showProgress(e:Events):void
		{
			trace("Total em KB é" + e.obj.TotalBytes + " kb" + " e o percentual carregado é: " + e.obj.PercentLoaded + " %");
		}
 
		private function showStart(e:Events):void
		{
			trace("Largura: " + e.obj.width + " / Altura: " + e.obj.height);
		}
	}
}

No final então temos as funções executadas em cada momento:
A função showFull() irá adicionar o objeto lf do tipo LoadFile, que é a nossa imagem declarada pela variável imageURL, assim nesse momento, irá aparecer a imagem carregada.
A função showError() irá ser executada no momento que o arquivo chamado não for encontrado, ou não existe ou com o endereço da imagem declarado errado.
A terceira função é a showProgress(), essa será executada o tempo todo enquanto o arquivo estiver sendo carregado, nela podemos receber através de um objeto o percentual carregado, total em kb do arquivo requisitado e total carregado. Se observarmos essa função no código acima podemos ver que ao retornar ao evento progress podemos chamar os valores acima citados, como o percentual carregado, da seguinte forma: e.obj.PercentLoaded, sendo que ‘e’ é o Events, obj é nosso Objeto de valores e PercentLoaded é o valor em % carregado.
A última função é executada no inicio do carregamento do arquivo, showStart() e irá retornar a largura e altura da imagem assim como foi feito no Progress, so que o valor agora do objeto é width para largura e height para altura da imagem.

Valeu pelo tempo lendo o post e um grande abraço. Você pode fazer o download do exemplo acima no link abaixo.
Download: Carregando imagens em AS3 sem Loader() (265)

Yes, GreenSock Tweening Platform v11. Beta, really but awesome. The first, and the best, thing to me is Timeline (Lite/Max) that can do really good animation sequence.

On the heels of releasing the huge v10 update that introduced the plugin architecture, I’ve been hard at work on an even bigger release that delivers quite a few exiting improvements to the GreenSock Tweening Platform. Version 11 represents some significant changes to the guts of the code, so before officially releasing it, I wanted to post it in “Beta” form to give everyone a chance to not only test the code but also share their thoughts and suggestions. I’m also thrilled to announce that Grant Skinner (author of gTween) will be collaborating with me on upcoming versions (see separate announcement).

You can now create one TimeLineMax or TimeLineLite and run one or more animations, TweenLite or Max too, and you will use one only import. Great, you can read more about and see the sample on GreenSock WebSite or direct using link bellow:

Link: GreenSock Tweening Platform v11 Beta

From Flashden: “As more and more developers turn to ActionScript 3, more and more AS3 frameworks appear to be popping up to assist the Flash community. Frameworks are basically reliable libraries of code that you can use to rapidly deploy a project while also streamlining common tasks. Think of them as a way to help develop and glue together the different components of a software project.”

Here you will see 15 AS3 Frameworks to inpire you and your next projects, making more rapidly and more efficient the job. Read it.

Link: 15 awesome actionscript 3 frameworks to inspire your next project

Rainbow Live XML Editor makes editing easy and full online with a simple Flash interface, multiple users and so much more. With Rainbow Live you can edit your @attributes, CDATA, upload your imagens and create thumbnails easely from your computer to server in seconds.

Rainbow Live puts the power back into the hands of Flash developers. There’s no more need to rely on a backend developer to build and maintain a database. Rainbow Live saves time and money as the process of setting up XML structures is familiar to many Flash developers and is made even more intuitive with Rainbow Live’s node-based approach. It allows for full control over a developing Flash project; if you’re building a bingo game or even a site navigation GUI, the access to Rainbow Live’s suite of time-saving tools is a priceless investment for people who want to develop and code at speed without relying on third parties to do the leg work.

Today you have two choices, Rainbow XML Editor and Live version, the most complete for only 99$ USD:

Rainbow Live puts the power back into the hands of Flash developers. There’s no more need to rely on a backend developer to build and maintain a database. Rainbow Live saves time and money as the process of setting up XML structures is familiar to many Flash developers and is made even more intuitive with Rainbow Live’s node-based approach.

Installing and Configuring your Rainbow Live XML Editor + CMS

First step is create a folder with the name as you wish. Now you can upload all files inside this folder. You will receive one SWF file, 3 PHP files for alternative FTP and a read-me.txt.

Well, you can create your custom INDEX file to your ‘Rainbow.swf’ file. Now you can access Rainbow.swf or your custom INDEX file. When you load the page will require Login and Password, the DEFAULT is:

Username: admin
Password: password

When you load the main page will see at first time the Project window, here you will create XML, import your own local file and edit this file so simple. But after uploaded and logged you must go to second step, add your registration code and configure your FTP access.

Go to Preferences tab, will show you Settings items. The first item is Registration. Click on arrow and set ‘domainkey’ your registration code, you can get your own on Rainbow Site.

After that you can change FTP access, it will able you to edit online your XML file. To edit it you may go to Preferences > FTP and change the ‘ftphost’ to your domain ftp, ‘ftpmode’ continue normal, ‘ftpusername’ is your FTP username and last ‘ftppassword’ is your FTP password, close this window and click on SITE option, you may change your ‘rainbowfolder’ example: “httpdocs/rainbowFolder/”, after that close the SITE window and click in SAVE (top-right window).

Rainbow Live XML Editor can create or edit only one XML file, one XML for one project. When you create one file, by Default, it is located on folder DATA/ inside folder that you install Live Rainbow but you have a choice to edit it and change the location of the file.

Editing XML file

It’s so simple, you can create nodes using “+” Plus button or add @attributes and images using right arrow, when you click will appear one window with all options, you can change add one attribute or CDATA text.

Using @attributes you can set one parameter like image and upload direct from your Rainbow Live to your server and add the address to your XML file, this moment you can select option to create thumbnail and add too into XML, great for portfolio and photogalleries. See the upload image bellow:

You can get more information on Rainbow Website or comment here.
Thanks a lot and cya.

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: Scrollbasic - Temporary Scrollbar Class (352)

Hi guys, now we say something about how load and use the XML file as data base inside the Flash project using Actionscript 3.

First we need load the XML file to read these data inside the Flash. To do it create first a variable of URLLoader and other URLRequest. Different that when we load images, here need use the URLLoader() and not the Loader() class. Go to the first step:

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

package
{
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
 
	public class loadXML
	{
		private var xmlLoader:URLLoader;
		private var xmlRequest:URLRequest;
		private var newXML:XML;
 
		public function loadXML():void
		{
			xmlLoader 	= new URLLoader();
			xmlRequest 	= new URLRequest("dataXML.xml");
			xmlLoader.load(xmlRequest);
			xmlLoader.addEventListener(Event.COMPLETE, dataLoaded);
		}
 
		public function dataLoaded(e:Event):void
		{
			newXML = new XML(e.target.data);
			trace(newXML);
		}
	} // End Class
} // End Package

The sample code will load the XML using URLLoader and using the URLRequest, inside the URLRequest you will put the XML file address. After that may create the Listener to say when XML file is loaded or loading or all that happened.

Inside the dataLoaded() function you will see that the newXML:XML() receiving the loaded data and creating your new XML file. Yes, now we can use the data to put inside the project, well lets go to the second step, first see the XML file:

1
2
3
4
5
6

< ?xml version="1.0" encoding="utf-8"?>
<gallery title="Gallery Name" author="Author Name">
	<picture title="title of the first picture">/images/files/001.jpg</picture>
	<picture title="title of the second picture">/images/files/002.jpg</picture>
	<picture title="title of the last picture">/images/files/003.jpg</picture>
</gallery>

This time we have all the xml data inside the newXML() variable, to use these data it’s so simple, first we need to think that the first tag of the XML file is our newXML variable, if we call the newXML.@title will retrieve the title of the gallery tag. The same can do it to retrieve the author parameter value.

Well, if you retrieve the data from the gallery tag the rest is so easy. Let’s now retrieve the picture value, see the sample inside the dataLoaded() function:

24
25
26
27
28
29

public function dataLoaded(e:Event):void
{
	newXML = new XML(e.target.data);
	trace(newXML.picture[0].text()); // result : /images/files/001.jpg
	trace(newXML.picture[0].@ title); // result : title of the first picture
}

Or you can take the picture tag number and make a loop with these data, to get the picture quantity you need only get the array lenght():

26
27

var newXMLQnt:uint = newXML.picture.length();
trace(newXMLQnt); // result : 3

Now you can create your own code using the sample codes, it’s so easy to do it, load and use the XML data inside the Flash using Actionscript 3. Try it and if have some difficulties comment here. Thanks for read and Cya.

Hi for all, today i will explane something about the principiles of Actionscript 3: how to load an image inside the Flash. For totaly beginners, it’s so simple do it.

What the difference when load a picture using Actionscript 2 or 3?
Well, on AS2 you can call the file and imediatly when it loaded will appear inside the moviclip or stage. Using AS3 you can choice when and where the loaded file will appear.

AS3 Loader: your first loader inside Flash CS4
You need the Loader object and too create the listeners that will say for you what’s happen, if is loading, was an error or if the file is completely loaded. These listeners will be necessary always when you call a image or a XML file and others. Well, go to the Loader: see the code bellow:

1
2
3
4
5
6
7
8
9
10
11
12

import flash.display.Loader;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
 
var request:URLRequest = new URLRequest("image.png");
var loader:Loader = new Loader();
     loader.load(request);
     loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadingImage);
     loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadingError);
     loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingComplete);

Here i created some differents listeners for the loader, the first, ProgressEvent.PROGRESS, will call the function loadingImage alway when the image is loading, inside the loadingImage you can create your preloader function using loader, get the bytes loaded and bytes total using the ProgressEvent inside the called function, something like this:

15
16
17
18
19
20
21

var loaditPercent:uint;
 
private function loadingImage(p:ProgressEvent):void
{
	loaditPercent = Math.ceil( ( p.bytesLoaded / p.bytesTotal ) * 100 );
	trace(loaditPercent);
}

The loaditPercent will show us the percent loaded. If you try your code will see that the image is loaded because the trace will show you 100% loaded but the image dont appear, need create the loadingComplete function and inside it we will put the loaded file inside of some movieclip or add it on the stage, you choose:

25
26
27
28
29

function loadingComplete(e:Event):void
{
	// addChild(loader);
	addChild(e.currentTarget);
}

This will add the loader, the picture, on the stage. Change the location using the MovieClip instance befora the addChild function. You can use too the loadingError function for your custom loader error, it’s so easy like others. Try it, for support comment here. Thanks for read.

Hi again, sorry for the delay to write again. Here im Brazil, 1st May was a holly day and i was play with my son. Well here in agency we have some problens today with system memory of a AIR Project, the project play full HD videos and HD images into a 32″ LCD. 

The problem: When i load videos and pictures, so much pictures, inside the project using Loader Class the memory will be always growing and growing and this will close sometime the application.

Solution: Like the post title, Garbage Collector. Well, the Garbage collector is alway actived by Flash Player, when i unload the Loader it will be send to the “trash” of Flash Player, and Garbaga Collector will define when delete the “trash” content, but we can tell to the Garbage Collector that “trash”  is Ok to be deleted.

It’s so simple:

1
2

import flash.system.System;
System.gc();

If you have a custom loader class you can put the System.gc() into your unload public function to say to the Flash Player that the unloaded content it’s ok to be deleted.

1
2
3
4
5
6
7

import flash.system.System;
...
public function unloadcontent():void
{
	_yourCustomLoader.unLoad();
	System.gc();
}

To force the Flash Player delete the content more speedily you can make a loop with 10 times calling the Garbage Collector:

1
2
3
4
5
6
7
8
9
10
11

import flash.system.System;
...
public function unloadcontent():void
{
	_yourCustomLoader.unLoad();
	// Calling System Garbage Collector loop
	for ( var gci:uint = 0; gci < 10; gci++ )
	{
		System.gc();
	}
}

The loop will force the Flash Player delete the content and make your app don’t crash.
It’s really easy, yeah? Try it, comment and if i save your life buy me a beer using the donation block in right side. Thanks for reading again

Hi again guys, im working hard with AIR projects and today i did one thing that i hate: use  always on top for one program, hehe. Well, was necessary because the project is a digital ad platform using one 32″ LCD with touchscreen and the user interact with the content.

Well, about the alway on top is so simple, first you may create one variable for your Native window.

1

var newWindow:NativeWindow = stage.NativeWindow;

After that you need put only the alwaysInFront and set it true like this.

2

newWindo.alwaysInFront = true;

aaaand done, try it.