Code: Detail

ActionScript - (English)

Banner Rotativo XML + FLASH

Criação do Banner rotativo utilizando Flash e XML

Last update: 09/08/2010
ActionScript       
 
8,5
1
1
2
 

Criação do Banner Rotativo!


Primeiramente vamos criar um palco com 637x299 px

 Feito isso, vamos criar a área onde irá rodar o filme

  - Criar um layer (movie) e nesse layer fazer um retângulo vermelho
   - converter para movie clip
   - Alpha 0%
   - Instanciar como o nome de img1

Caso queiramos que o flash tenha uma borda arredondada
 
  - Criar um layer(máscara) nesse layer fazer um retângulo com borda arredondada
e pintar de azul
   - botão direito em cima da layer
   - Mask 
   - Arrastar o layer movie para dentro da camada máscara

Vamos criar os botões do banner

   -  Crie 3 retângulos 1,2 e 3
   -  Jogue cada um deles em um layer separado
   
    - clique no botão 1 
       - f8 
       - button
    - clique no botão 2 
       - f8 
       - button
    - clique no botão 3 
       - f8 
       - button

    Instanciar cada botão
       botão 1 = btn1
       botão 2 = btn2
       botão 3 = btn3

Criar os botões para que eles mudem conforme a mudança do flash
    
   - Crie 3 botão diferentes, para que quando mude a pessoa saiba que aquele
botão se trata daquela animação.
   - Jogue cada um deles em um layer separado

   
    - clique no botão 1 
       - f8 
       - Movie clip
    - clique no botão 2 
       - f8 
       - Movie clip
    - clique no botão 3 
       - f8 
       - Movie clip

    Instanciar cada botão
       botão 1 = btn5
       botão 2 = btn5
       botão 3 = btn7

Crie um layer chamado link, ele servirá para que cada animação tenha uma url,
por exemplo a animação 1 pode levar para um site x, animação 2 para um site y
e a animação 3 para um site z
     - Faça um retângulo
       - clique nesse retângulo
        - f8
        - button
          - Dentro desse button, faça um retângulo azul no hit, e deixe
o Up, Over e Down vazios.
        - Feito isso temos um link invisível
        - Clique nesse link
        
          Instanciar como btn4

E na última Layer no caso action jogar o seguinte código:






//impotar transições
import mx.transitions.*;
import mx.transitions.easing.*;

//criar um novo objeto XML
var xml:XML = new XML();

btn5._visible=0;
btn6._visible=0;
btn7._visible=0;

var interval = setInterval(proximo,3000);

var site = ["link"];

//ignorar os nós em branco
xml.ignoreWhite = true;

//aqui você vai colocar o caminho do arquivo que vc deseja carregar - arquivo que vai fornecer as informações no caso o XML
xml.load("banners.xml");


//função para carregar os dados do arquivo XML - se conseguir carregar
xml.onLoad = function(sucesso){
	if (sucesso){
		//pegar os caminhos dos nós
		_global.tamanho = xml.firstChild.childNodes.length;
		//crias um Array
		banner = new Array();
		//inicializar o contador
		j = 0;
		//enquanto o contador for menor que  o número de nós executar
		
		while (j < _global.tamanho){
			//criar um array associativo
			banner[j] = new Array();
			//inserir o nó, se existirem mais nós, podemos inserir com nomes diferentes
			banner[j] ['imagem'] = xml.firstChild.childNodes[j].childNodes[0].firstChild.nodeValue;
			banner[j] ['link'] = xml.firstChild.childNodes[j].childNodes[2].firstChild.nodeValue;
			//somar mais 1 ao j
			j++
			}
			
			//inicializar o contador
			_global.id = 0;
			//chamar a promeira imagem
			proximo();
			//setar o intervalo que as imagens serão mostradas
			//setInterval(proximo,3000);
	}
};

//função para colocar na imagem e depois mostrar o proximo
function proximo() {
			   
//se o tamanho do id for igual ao tamanho dos nós, reinicializar
	if (_global.id >= _global.tamanho) _global.id = 0;
	//carregar a imagem na instancia indicada
	img1.loadMovie(banner[_global.id]['imagem']);
	site=banner[_global.id]['link'];
	
// O comando abaixo fará com que o menu 1,2,3 rotacione conforme os banners, ou melhor com os respectivos banners
 trace(_global.id);			  
switch (_global.id) {
	case 0:	 
		        btn5._visible=1;
                btn6._visible=0;
                btn7._visible=0;
				
				 break;
	case 1:	
		        btn5._visible=0;
                btn6._visible=1;
                btn7._visible=0;
				
				  break;
	case 2:	
	            btn5._visible=0;
                btn6._visible=0;
                btn7._visible=1;
				
				  break;

	}			   
	
	//criar a transição entre as imagens
	//sintaxe: tween 
	new Tween(img1, "_alpha", Strong.easeOut, 3, 100, 1, true);
	msg = banner[_global.id]['msg'];
	
			   
			   _global.id++;
			   
						
}

	btn.onRelease = function(){
		getURL(banner[_global.id]['link']);	
			   }


btn1.onPress = function() {
    img1.loadMovie(banner[0]['imagem']);
	site=banner[0]['link'];
	btn5._visible=1;
	btn6._visible=0;
	btn7._visible=0;
	clearInterval(interval);
	//setInterval(proximo,500);
    _global.id = 1;
};

btn2.onPress = function() {
    img1.loadMovie(banner[1]['imagem']);
    //site = nome da variavel=banner-[1]=corresponde ao número do xml tag imagem é [0] tal msg [1] e tag link é [2] e o ['link'] nome da tag no xml
	site=banner[1]['link'];
	btn5._visible=0;
	btn6._visible=1;
	btn7._visible=0;
	clearInterval(interval);
	//setInterval(proximo,500);
    _global.id = 2;
};

btn3.onPress = function() {
   img1.loadMovie(banner[2]['imagem']);
   site=banner[2]['link'];
   btn5._visible=0;
	btn6._visible=0;
	btn7._visible=1;
   //setInterval(proximo,500);
   _global.id = 0;
};

btn4.onPress = function() {
    getURL(site);
};



Feito isso vamos criar o XML

- Crie um arquivo no Dreamweaver salvar como xml
  - Jogar o seguinte código:



<?xml version="1.0" encoding="utf-8"?>

<banners>
 <banner>
   <imagem>Tv_flash1.jpg</imagem> 
   <msg>Multimidia Para Internet</msg> 
  <link>http://www.google.com.br</link>
 </banner>
 
 <banner>
   <imagem>Tv_flash2_gsm.jpg</imagem> 
   <msg>Sistemas Para Internet</msg> 
   <link>http://www.bol.com.br</link> 
 </banner>
 
 <banner>
   <imagem>Tv_parceiros.jpg</imagem> 
   <msg>Banner Rotativo</msg> 
   <link>http://www.terra.com.br</link> 
  </banner>

</banners>
 
 

Pronto feito isso temos o banner pronto!

 

     

  

Source:
 
Users who have marked this routine as a favorite
 
 
26/02/2013 12:34:59
Olá Antônio,

Não programo em Flash mas vou tentar ajudar.

Você ja verificou se o caminho das imagens está co
rreto?

no xml está assim:  <imagem>Tv_flash2_gsm.jpg</imagem> 

Não seria o caso de colocar algo assim?

 <im
agem>http://www.qualquercoisa.com.br/Tv_flash2_gsm.jpg</imagem>

26/02/2013 11:05:31
Fernanda deu certo o banner porém não está aparecendo as imagens

ele fica contando certinho, mas não aparecem
 as imagens

o que faço?

 
The site ti4fun is not responsible for the content on sites for which you have external links

Articles, routines, tips, forums, blogs or any other content posted on ti4fun site is not tested and not validated, so you should test and validate any information collected on the ti4fun site before applying it to final use environment, such as example, production. the TI4FUN site is not responsible for quality or for any damages, direct, indirect or consequential, from use of any content posted by the authors in the site.

All content published on the ti4fun site is the responsibility of the author and do not necessarily express the views of the site ti4fun and its employees.