Como fazer um menu em sanfona no flash

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.

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


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