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 | @oficinadanet Softwares
<p>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&ccedil;&atilde;o na pagina principal do seu website. Se a hospedagem que voc&ecirc; utiliza para o seu site tem suporte a XML, este tutorial funcionaria perfeitamente, uma vez que voc&ecirc; decidiu mostrar a integra&ccedil;&atilde;o destes c&oacute;digos em seu site.<br /> <br /> <strong>Resultado:</strong> (<a href="../tutoriais/2859/accordion.html" target="_blank">link de teste</a>)</p> <blockquote> <div style="text-align: center;"><img src="..//imagens/coluna/2859/resultado.jpg" alt="http://www.oficinadanet.com.br//imagens/coluna/2859/resultado.jpg" /></div> </blockquote> <p><br /> <br /> <strong>1.</strong>Crie um novo arquivo Flash (ActionScript 3.0) e salve-o como accordion.fla.<br /> <br /> <strong>2.</strong>Crie um arquivo XML para armazenar fotos 'datas e salv&aacute;-lo como datas.xml.</p> <pre><code> 1.jpg 2.jpg 3.jpg 4.jpg 5.jpg </code></pre> <p><br /> <br /> 3.Criar uma "a&ccedil;&otilde;es" da camada. Abra o painel de a&ccedil;&otilde;es. N&oacute;s vamos utilizar o motor TweenLite ent&atilde;o primeiro escrever as seguintes declara&ccedil;&otilde;es, a fim de us&aacute;-lo e as suas propriedades de atenua&ccedil;&atilde;o.</p> <pre><code>import com.greensock.TweenLite; import com.greensock.easing.*;</code></pre> <p><br /> <br /> 4.Avan&ccedil;ar declarar as seguintes vari&aacute;veis.</p> <pre><code>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;</code></pre> <p><br /> <br /> 5. Carregar o arquivo XML:</p> <pre><code>function loadXML( file:String ):void{ var xmlLoader:URLLoader = new URLLoader(); xmlLoader.load(new URLRequest(file)); xmlLoader.addEventListener(Event.COMPLETE,parseXML); }</code></pre> <p><br /> <br /> 6. Analizar o XML:</p> <pre><code>function parseXML(e:Event):void { xml = new XML( e.target.data ); totalPhotos =xml.photo.length(); loadPhotos(); }</code></pre> <p><br /> <br /> 7. Dentro do loadPhotos () fun&ccedil;&atilde;o, varremos a datas XML para criar um carregador para cada foto. O onComplete cheques () fun&ccedil;&atilde;o de saber se todas as fotos s&atilde;o carregadas. Se assim for, ele chama o createPanels () fun&ccedil;&atilde;o.</p> <pre><code>function loadPhotos():void{ for(var i:int = 0; i</code></pre> <p><code><br /> <br /> 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.<br /> <pre><code>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(); } }</code></pre> <br /> <br /> 9. Uma vez que todos os pain&eacute;is s&atilde;o criados, vamos adicionar os nossos ouvintes de eventos:<br /> <pre><code>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); }</code></pre> <br /> 10. Dentro do onPanelOver () fun&ccedil;&atilde;o que definimos cada painel coordenada x de modo que o atual est&aacute; totalmente vis&iacute;vel.<br /> <pre><code>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 </code></pre> <code><br /> 11. Dentro do closePanels () função, reposicionar cada painel para que a sua parte visível são do mesmo tamanho.<br /> <pre><code>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 } ); } }</code></pre> <br /> 12. Finalmente, n&atilde;o se esque&ccedil;a de chamar o loadXML () para fazer o trabalho. <br /> Aqui est&aacute; o c&oacute;digo final.<br /> <pre><code>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</code></pre> <code><br /> <br /> <strong>Resultado:</strong> (<a href="../tutoriais/2859/accordion.html" target="_blank">link de teste</a>)<br /> <blockquote> <div style="text-align: center;"><img src="..//imagens/coluna/2859/resultado.jpg" alt="http://www.oficinadanet.com.br//imagens/coluna/2859/resultado.jpg" /></div> </blockquote> <br /> <br /> Espero que tenham gostado, o arquivo do tutorial esta anexado abaixo.<br /> <a href="https://www.oficinadanet.com.br/imagens/coluna/2859/src.zip" target="_blank">Arquivo anexo</a> <p> </p> </code></code></code></p>

Mais sobre: Slider Slide Flash
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo