Como fazer um menu em sanfona no flash

Slide em Flash para deixar o seu site mais funcional. Neste tutorial AS3, vou ensinar a criar um XML Menu Accordion Slide que exibe uma lista de fotografias, pode ser usado como galeria de fotos ou ate mesmo slide de exibição na pagina principal do seu website.

Por Softwares Pular para comentários

Neste tutorial AS3, vou ensinar a criar um XML Menu Accordion Slide que exibe uma lista de fotografias, pode ser usado como galeria de fotos ou ate mesmo slide de exibição na pagina principal do seu website. Se a hospedagem que você utiliza para o seu site tem suporte a XML, este tutorial funcionaria perfeitamente, uma vez que você decidiu mostrar a integração destes códigos em seu site.

Resultado: (link de teste)

http://www.oficinadanet.com.br//imagens/coluna/2859/resultado.jpg



1.Crie um novo arquivo Flash (ActionScript 3.0) e salve-o como accordion.fla.

2.Crie um arquivo XML para armazenar fotos 'datas e salvá-lo como datas.xml.


	1.jpg
	2.jpg
	3.jpg
	4.jpg
	5.jpg



3.Criar uma "ações" da camada. Abra o painel de ações. Nós vamos utilizar o motor TweenLite então primeiro escrever as seguintes declarações, a fim de usá-lo e as suas propriedades de atenuação.

import com.greensock.TweenLite;
import com.greensock.easing.*;



4.Avançar declarar as seguintes variáveis.

var xml:XML;
var folder ="photos/";
var totalPhotos:Number;
var photos:Array = new Array();
var photosLoaded:int = 0;
var current:Number = -1;
var accordion:Sprite
var photoWidth:uint;
var barWidth:Number;



5. Carregar o arquivo XML:

function loadXML( file:String ):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE,parseXML);
}



6. Analizar o XML:

function parseXML(e:Event):void {
	xml = new XML( e.target.data );
	totalPhotos =xml.photo.length();
	loadPhotos();
}



7. Dentro do loadPhotos () função, varremos a datas XML para criar um carregador para cada foto. O onComplete cheques () função de saber se todas as fotos são carregadas. Se assim for, ele chama o createPanels () função.

function loadPhotos():void{
	for(var i:int = 0; i



8. Dentro do createPanels () fun??o, percorrer a matriz fotos para criar o acorde?o pain?is que cont?m as fotos. Posi??o de cada painel de acordo com a largura do palco, dividido pelo n?mero total de fotos.

function createPanels():void{
	accordion = new Sprite();
	addChild(accordion);

	for(var i:int = 0; i < photos.length; i++){

		var panel:Sprite = new Sprite();
		barWidth = Math.ceil( stage.stageWidth / totalPhotos );
		panel.x = i  * barWidth;

		var bm:Bitmap = new Bitmap();
		bm = Bitmap(photos[i].content);
		bm.smoothing = true;
		panel.addChild(bm);
		accordion.addChild(panel);

		if (i==0) photoWidth=panel.width;

		if (i==photos.length-1)
			addListeners();
	}
}


9. Uma vez que todos os painéis são criados, vamos adicionar os nossos ouvintes de eventos:
function addListeners():void{
	for( var i:int = 0; i < accordion.numChildren; i++ ){
		var sp:Sprite = accordion.getChildAt(i) as Sprite;
		sp.addEventListener(MouseEvent.ROLL_OVER, onPanelOver);
	}
	accordion.addEventListener(MouseEvent.ROLL_OUT,closePanels);
}

10. Dentro do onPanelOver () função que definimos cada painel coordenada x de modo que o atual está totalmente visível.
function onPanelOver(e:MouseEvent):void{
	var panel:Sprite = Sprite(e.target);
	current = accordion.getChildIndex(panel);

	barWidth = Math.ceil((stage.stageWidth-photoWidth) / (totalPhotos-1));

	for( var i :int = 0; i 

11. Dentro do closePanels () fun??o, reposicionar cada painel para que a sua parte vis?vel s?o do mesmo tamanho.
function closePanels(e:MouseEvent):void{
	var sp:Sprite;
	barWidth = Math.ceil(stage.stageWidth/totalPhotos);
	for( var i:int = 0; i < accordion.numChildren; i++ ){
		sp = Sprite(accordion.getChildAt(i) );
		TweenLite.to( sp, .5, { x: i * barWidth } );
	}
}

12. Finalmente, não se esqueça de chamar o loadXML () para fazer o trabalho.
Aqui está o código final.
import com.greensock.TweenLite;
import com.greensock.easing.*;

var xml:XML;
var folder ="photos/";
var totalPhotos:Number;
var photos:Array = new Array();
var photosLoaded:int = 0;
var current:Number = -1;
var accordion:Sprite
var photoWidth:uint;
var barWidth:Number;

loadXML( "datas.xml" );

function loadXML( file:String ):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE,parseXML);
}

function parseXML(e:Event):void {
	xml = new XML( e.target.data );
	totalPhotos =xml.photo.length();
	loadPhotos();
}

function loadPhotos():void{
	for(var i:int = 0; i


Resultado: (link de teste)
http://www.oficinadanet.com.br//imagens/coluna/2859/resultado.jpg


Espero que tenham gostado, o arquivo do tutorial esta anexado abaixo.
Arquivo anexo

?

Mais sobre: Slider, Slide, Flash, FlashLite
Compartilhe com seus amigos:
Thauan Almeida
Thauan Almeida É desenvolvedor Flash, Joomla e Programação. E aqui na Oficina da Net mostrará tutoriais sobre a ferramenta da Adobe e os outros citados acima.
FACEBOOK //
Quer conversar com o(a) Thauan, comente:
Carregar comentários
Quantos celulares a Motorola tem em linha?
5(15,06%)
10(57,97%)
15(11,54%)
20(7,49%)
26(7,94%)