Tutorial: Criando um sistema de Tickers

[Antoniosp 2]

Atenção: versão mais atual disponível aqui

 

Montando um sistema de tickers com Flash + XML + PHP + MySQL

(isso mesmo! igual o do ig!)

 

Olá amigos e amigas! Esse tutorial abranje duas áreas distintas que se interligam pelo XML. A primeira delas será entre o Flash e o XML, a montagem final dos tickers. Depois explicarei como mudar esse XML dinamicamente através do cadastro em BD.

 

Veja nesse link uma prévia de como ficará o nosso sistema.

 

Segue agora a primeira parte:

 

Relacionando o Flash com XML

 

Esse tutorial é de nível básico-intermediário, pois alguns conceitos de Flash e de programação são exigidos.

 

Vamos ver agora como ler os dados do xml e transformar as informações em aplicações práticas.

 

1. Vamos criar o arquivo xml antes de tudo.

 

<?xml version="1.0" encoding="utf-8"?><tickers>  <ticker>	<titulo>Uma vista</titulo>	<area>Montanhas</area>	<texto>Table Mountain and Cape Town</texto>	<foto>foto1.jpg</foto>	<link>http://www.ponha-o-link-que-quiser.com.br</link>  </ticker>  <ticker>	<titulo>Manobra Radical</titulo>	<area>Esportes</area>	<texto>Inline Skater on Vertical Rise of Ramp</texto>	<foto>foto2.jpg</foto>	<link>http://www.ponha-o-link-que-quiser.com.br</link>  </ticker>  <ticker>	<titulo>Com grande angular</titulo>	<area>Cidade</area>	<texto>View of Ibiza Town</texto>	<foto>foto3.jpg</foto>	<link>http://www.ponha-o-link-que-quiser.com.br</link>  </ticker></tickers>

Providenciei um zip com o xml e as fotos para ficar mais fácil.

 

Reparem na estrutura do arquivo. Ele tem uma tag que cobre todas as outras e tags menores (<ticker>), cada uma com os dados de uma notícia, foto, ou qualquer coisa para que você utilize o sistema.

 

2. Agora nós vamos preparar a interface no flash. Abra um novo documento e adicione:

- Um botão com setinhas para a esquerda chamado "ant_btn".

- Um botão com setinhas para a direita chamado "prox_btn". Pode ser o outro botão espelhado. Arraste uma cópia dele e vá em Modify > Transform > Flip Horizontal. Recomendo isso porque economiza bytes.

- Um mc grandão que ocupará a área das fotos chamado "area_mc".

 

Misture bem até que se tenha uma massa homogênea e reserve. Dá uma olhada:

 

 

2.1. Crie um quadradinho, que servirá de botão para o menu, e transforme-o num mc de nome de instância "menu". Dentro dele crie uma nova layer e coloque um botão invisível (com conteúdo apenas do frame HIT) do tamanho do quadradinho e chame-o de "botao". Numa layer mais acima coloque um Dynamic Text com o nome "numero_txt". Adicione esse mc que você acabou de criar no layout do flash (não importa o lugar).

 

 

2.2. A última coisa a ser criada agora é o mc da legenda. Desenhe um retângulo da largura das fotos (360 px) e transforme-o num mc chamado "fundo_mc". Agora pegue o fundo_mc e crie outro mc chamando-o de "legenda_mc". Dentro dele crie dois Dynamic Texts chamando-os de "titulo_txt" e "texto_txt". Crie uma camada acima e desenhe um quadrado que ocupará a área do fundo_mc, depois coloque o tipo da layer como Mask. Para ficar mais claro dê uma olhada na screen:

 

 

Agora posicione o legenda_mc no palco. O resultado final deverá ser esse:

 

 

Ah! Todos os nomes de instância que eu falei devem ser grafados sem aspas, viu?

 

3. Enquanto o layout fica fermentando, vamos avançar na parte mais temida: a programação! Vou fazer aos poucos pra irmos entendendo a lógica do código.

 

3.1. Captando os dados do xml, importando classes e já ajustando os botões vai e volta. Na timeline principal crie uma layer chamada Actions e adicione:

 

 

 

//Importando as classes para fazer os movimentos dinâmicosimport mx.transitions.*;import mx.transitions.easing.*;//Criando o xml e fazendo ele ignorar espaços em brancovar tickersXML:XML = new XML();tickersXML.ignoreWhite = true;//Quando o xml carregar com sucesso executar as funçõestickersXML.onLoad = function(success:Boolean):Void  {	//(o xml é carregado na última linha do script)	if (success) {		//Número total de tickers		n_tickers = tickersXML.firstChild.childNodes.length;		/*O ticker_atual será o último pois ao executar a função de		proximoTicker() ele passará automaticamente para o 1º resultado*/		ticker_atual = n_tickers;		//Acertando as funções dos botões		prox_btn.onRelease = function():Void {			//Se o fade das fotos tiver terminado			if (fotoIn.position == fotoIn.finish) {				proximoTicker();				//Programando para chamar o próximo daqui e a cada 5 seg				clearInterval(ticker_intervalo);				ticker_intervalo = setInterval(proximoTicker, 5000);			}		};		ant_btn.onRelease = function():Void {			if (fotoIn.position == fotoIn.finish) {				anteriorTicker();				clearInterval(ticker_intervalo);				ticker_intervalo = setInterval(proximoTicker, 5000);			}		};		/*******************************************************			  Códigos do passo 3.2 serão adicionados aqui		*******************************************************/		//Chamando o primeiro ticker		proximoTicker();		//Programando para chamar o próximo a cada 5 seg		ticker_intervalo = setInterval(proximoTicker, 5000);	} else {		//Caso dê errado o carregamento, avise		sobeLegenda();		legenda_mc.titulo_txt.text = "Ocorreu um erro";		legenda_mc.texto_txt.text = "Por favor entre em contato com a administração";	}};/*******************************************************  Códigos do passo 3.3 em diante serão adicionados aqui*******************************************************///Carregando o XML e dando início ao processotickersXML.load("tickers.xml");

Vamos às considerações sobre o AS até agora. Primeiro a gente cria o objeto XML e a função que será executada quando carregar. Nela vem a parte "se tudo der certo" e depois "se acontecer algum erro". Repare que nessa segunda parte existe uma função chamada sobeLegenda() que ainda não criamos, mas já dá pra ter a idéia de o que ela faz, certo?

 

Depois de carregarmos o XML contamos quantos tickers temos. A idéia é:

tickersXML - todo o documento

firstChild - o primeiro nó do xml (<tickers>) que contém todas as informações

childNodes - uma array que contém todos os nós com as informações (<ticker>)

length - o tamanho da array, ou seja, quantos ticker

 

Se ficar alguma dúvida faça testes com o trace(), e sempre! Por exemplo: trace(tickersXML.firstChild) Veja a diferença do resultado do trace quando vai se adicionando as palavras-chave.

 

Vejamos agora a função do prox_btn.onRelease. Ela é inteira dentro de um if, que verifica se o fade das fotos já terminou (para não dar mais de um fade ao mesmo tempo e dar pau). Se tiver terminado (o fade) ele passa para o próximo ticker e programa para que fique passando automaticamente para o próximo de 5 em 5 segundos. A mesma coisa é para o botão ant_btn, porém com a função de voltar um ticker.

 

Depois de programados os botões, o script chama o primeiro ticker e já vai programando a passagem dos outros.

 

3.2. Montando o menu para o internauta ir direto para algum dos tickers. Substitua o comentário do código anterior por:

 

 

 

//Criando o menu duplicando o quadradinho existente//Deixando o quadradinho base invisívelmenu._visible = false;//Criando um laço que gerará os botões do menu. Ele executa uma vez para cada ticker.for (var i:Number = 0; i < n_tickers; i++) {	//Duplicando o movieclip menu	//O depth é i+5 porque até o depth 4 existem mcs ocupando [fotomc1, fotomc2, legenda_mc, area_mc]	var menubtn:MovieClip = menu.duplicateMovieClip("menu" + i, i + 5);	//Movendo o botão duplicado no eixo x. O '+58' é a margem da esquerda	menubtn._x = i * 25 + 58;	//Número do ticker	menubtn.numero = i;	//Texto do botãozinho	menubtn.numero_txt.text = i + 1;	//Quando apertar o botão, mudar para ticker indicado	menubtn.botao.onRelease = function():Void {		//Se o fade tiver terminado		if (fotoIn.position == fotoIn.finish) {			vaiParaTicker(this._parent.numero);			clearInterval(ticker_intervalo);			ticker_intervalo = setInterval(proximoTicker, 5000);		}	};}

Dentro do laço for são criados cópias do botãozinho e são adicionadas as propriedades deles. Primeiro a gente move o botão para onde queremos. Funciona assim: da primeira vez que o for é executado a variavel i vale 0. Então o primeiro botãozinho será colocado na posição x=(0 * 25 + 58)=58. O segundo será colocado na posição x=(1 * 25 + 58)=83 e assim por diante.

 

Cada mc recebe uma variável (numero) com o numero do ticker que ele tem que chamar. Recebe também o texto que é colocado no DynamicText. O botão invisível funciona de modo parecido com o prox_btn. A diferença é que usa a função que vai direto para um ticker. Obs: o this._parent.numero pega a variável numero do pai do botão invisível, o mc.

 

3.3. As funções de avanço e retrocesso. Agora vamos finalmente criar as funções proximoTicker(), anteriorTicker() e vaiParaTicker(numero_ticker). Substitua o comentário do primeiro código por:

 

 

 

//Função que passa para o próximo tickerfunction proximoTicker():Void {	//Se o ticker atual não for o último, aumenta em 1, se for ele vai para 0	ticker_atual < n_tickers - 1 ? ticker_atual++ : ticker_atual = 0;	//Colocando titulo e texto na legenda	legenda_mc.titulo_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[1].firstChild.nodeValue + " > " + tickersXML.firstChild.childNodes[ticker_atual].childNodes[0].firstChild.nodeValue;	legenda_mc.texto_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[2].firstChild.nodeValue;	//Carregando a foto	carregaFoto(tickersXML.firstChild.childNodes[ticker_atual].childNodes[3].firstChild.nodeValue);	//Definindo o link para quando clicar na foto	area_mc.onRelease = function():Void  {		getURL(tickersXML.firstChild.childNodes[ticker_atual].childNodes[4].firstChild.nodeValue, "_self");	};}//Função que passa para o ticker anteriorfunction anteriorTicker():Void {	//Mesmo esquema da outra função	ticker_atual > 0 ? ticker_atual-- : ticker_atual = n_tickers - 1;	legenda_mc.titulo_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[1].firstChild.nodeValue + " > " + tickersXML.firstChild.childNodes[ticker_atual].childNodes[0].firstChild.nodeValue;	legenda_mc.texto_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[2].firstChild.nodeValue;	carregaFoto(tickersXML.firstChild.childNodes[ticker_atual].childNodes[3].firstChild.nodeValue);	area_mc.onRelease = function():Void  {		getURL(tickersXML.firstChild.childNodes[ticker_atual].childNodes[4].firstChild.nodeValue, "_self");	};}//Função que vai direto para um ticker, é o mesmo esquema das outrasfunction vaiParaTicker(numero_ticker:Number):Void {	ticker_atual = numero_ticker;	legenda_mc.titulo_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[1].firstChild.nodeValue + " > " + tickersXML.firstChild.childNodes[ticker_atual].childNodes[0].firstChild.nodeValue;	legenda_mc.texto_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[2].firstChild.nodeValue;	carregaFoto(tickersXML.firstChild.childNodes[ticker_atual].childNodes[3].firstChild.nodeValue);	area_mc.onRelease = function():Void  {		getURL(tickersXML.firstChild.childNodes[ticker_atual].childNodes[4].firstChild.nodeValue, "_self");	};}

Vamos entender como funciona a primeira linha do próximoTicker(). Ela é na verdade um if(){}else{} reduzido. Veja ele "desenvolvido":

 

 

 

//Desenvolvidoif(ticker_atual < n_tickers - 1) {	ticker_atual++;} else {	ticker_atual = 0;}//Reduzidoticker_atual < n_tickers - 1 ? ticker_atual++ : ticker_atual = 0;

Isso pode ser visto apenas como um capricho, mas acho interessante mostrar essa outra forma para que reconhecam-na caso vejam em outro código. As demais linhas da função seguem colocando os textos na legenda, o link no onRelease da area_mc e chamando a função de carregar a foto, a próxima que veremos. Para ir esclarecendo as dúvidas em relação ao endereçamento das informações no xml, use e abuse do trace(). Coloque só a primeira palavra-chave e depois vá testando adicionando as demais. Assim ficará mais fácil ter clareza de como o ActionScript trabalha.

 

As duas outras funções são bem parecidas com a primeira, exeto pela manipulação da variável ticker_atual.

 

3.4. Carregando as fotos. Essa parte é um pouco complicada, tem que sacar como funciona o esquema de dois movieclips para carregar as fotos e dar os fades. Adicione esse código embaixo do código do passo 3.3.

 

 

 

//Criando os dois movieclips para carregar as fotosthis.createEmptyMovieClip("fotomc1", 2);this.createEmptyMovieClip("fotomc2", 1);//Posicionando os mcs no palcofotomc1._x = fotomc2._x = 20;fotomc1._y = fotomc2._y = 15;//Definindo qual está em cima (por causa dos fades)fotoCima = fotomc1;//Colocando a legenda por cima das fotoslegenda_mc.swapDepths(3);//Função que carrega a foto e cria os fadesfunction carregaFoto(scr:String):Void {	//Parando o fade da foto anterior caso ainda esteja ocorrendo	fotoIn.stop();	//Criando o mcloader	var mclFoto:MovieClipLoader = new MovieClipLoader();	//Carregando a foto	mclFoto.loadClip(scr, fotoCima);	//Quando terminar de carregar a foto	this.onLoadInit = function():Void  {		//Fazer o fadeIn com a foto de cima		fotoIn = new Tween(fotoCima, "_alpha", None.easeNone, 0, 100, 1, true);		//Quando terminar a transição de fotos		fotoIn.onMotionFinished = function():Void  {			//Pegar a foto de cima e jogar para trás			if (fotoCima == fotomc1) {				//Tirando o clip do fotomc2 que irá para frente				mclFoto.unloadClip(fotomc2);				fotomc1.swapDepths(fotomc2);				//Ao ir pra frente estará preparado para receber outra foto				fotoCima = fotomc2;			} else {				//Mesma coisa, caso seja o fotomc2 que estiver em cima				mclFoto.unloadClip(fotomc1);				fotomc2.swapDepths(fotomc1);				fotoCima = fotomc1;			}		};	};	//Adicionando o listener ao mcloader	mclFoto.addListener(this);}

Primeiro criamos os mcs nos níveis 1 e 2, e colocamos a legenda por cima deles, no nível 4. Dentro da função nós criamos uma instância do MovieClipLoader. Dê uma lida nesse tutorial do portal iMasters para saber mais. Após isso mandamos o MCL carregar a foto e definimos que quando o carregamento terminar o fade deve ser executado. O fade é feito através da classe Tween, tem um tutorial do Imasters que explica essa classe bem detalhadamente também.

 

Quando o fade termina nós temos a seguinte situação:

- um movieclip por cima com a foto recém-carregada

- um movieclip por baixo com a foto antiga

 

Dependendo de qual estiver por cima, nós descarregamos a foto do mc que estiver atrás e trocamos os dois de lugar, assim a gente terá um mc vazio pronto para receber outra foto e dar o fade.

 

3.5. Finalizando o código com as funções da legenda. Vamos criar agora as funções de sobeLegenda() e desceLegenda(), além de configurar estados padrão e o aparecimento da legenda.

 

 

 

//Fazendo com que a legenda suba quando o mouse estiver em cima da fotoarea_mc.onRollOver = sobeLegenda;area_mc.onRollOut = desceLegenda;area_mc._alpha = 0;area_mc.swapDepths(4);//Função que esconde a legenda com Tweensfunction desceLegenda():Void {	var desceTween1:Tween = new Tween(legenda_mc.fundo_mc, "_y", Strong.easeOut, legenda_mc.fundo_mc._y, 36, 1.5, true);	var desceTween2:Tween = new Tween(legenda_mc.titulo_txt, "_y", Strong.easeOut, legenda_mc.titulo_txt._y, 36, 1.5, true);	var desceTween3:Tween = new Tween(legenda_mc.texto_txt, "_y", Strong.easeOut, legenda_mc.texto_txt._y, 54, 1.5, true);}//Função que mostra a legenda com Tweensfunction sobeLegenda():Void {	var sobeTween1:Tween = new Tween(legenda_mc.fundo_mc, "_y", Strong.easeOut, legenda_mc.fundo_mc._y, 0, 1.5, true);	var sobeTween2:Tween = new Tween(legenda_mc.titulo_txt, "_y", Strong.easeOut, legenda_mc.titulo_txt._y, 0, 1.5, true);	var sobeTween3:Tween = new Tween(legenda_mc.texto_txt, "_y", Strong.easeOut, legenda_mc.texto_txt._y, 18, 1.5, true);}//Abaixando a legenda por padrãolegenda_mc.fundo_mc._y = legenda_mc.titulo_txt._y = 36;legenda_mc.texto_txt._y = 54;

Não tem muito segredo aqui. Apenas definimos quando a legenda aparece e como. Estude a classe Tween do Flash que você poderá aperfeiçoar e personalizar tanto o movimento da legenda quanto o aparecimento das fotos. É só trocar os parâmetros na hora de criar o Tween, o resto continua configurado. Prático, não?

 

Salve seu aquivo e dê um Ctrl+Enter para gerar e swf. Certifique-se de que o swf, as fotos e o xml estejam na mesma pasta. Agora está finalizada a parte de Flash! Pode testar que você verá seu lindo sisteminha já funcionando!

 

Uma observação sobre algumas medidas no AS. Na função desceLegenda, por exemplo, eu coloquei para o txt descer até o y:36, mas dependendo do seu layout o número com certeza vai mudar. O mesmo vale para o espaçamento dos botõezinhos do menu, o lugar dos mc fotomc1 e fotomc2, e também para o tempo de um ticker para o outro. Eu coloquei 5 segundos apenas para teste, é bem rapidinho. Pra colocar online mesmo é melhor aumentar esse tempo.

 

Outras observações sobre práticas de organização do AS. Esse pode não ser o exemplo mais (com o perdão da expressão) "webstandard" de Flash. Mas algumas coisas podem ser ressaltadas:

- Colocar sufixos nos nomes de instâncias (_mc, _txt, _btn). Além de facilitar a identificação de o que se trata, o flash lista automaticamente os métodos, eventos e propriedades desse objeto ajudando na hora de escrever seu script.

- Comentar o código. O comentário não serve só pra fazer tutoriais, serve para te orientar caso volte a trabalhar com o projeto e para orientar colegas de trabalho, se você trabalhar em equipes.

- Usar nome coerentes nas funções. Ajudam você a entender o código mais fácilmente (como o sobeLegenda, no começo da explicação do tuto).

- Usar uma variável para o número total no for, exemplo:

 

 

//Adequadon_tickers = tickersXML.firstChild.childNodes.length;for (var i:Number = 0; i < n_tickers; i++) {}//Não adequadofor (var i:Number = 0; i < tickersXML.firstChild.childNodes.length; i++) {}

Isso aumenta o processamento desnecessariamente.

- Usar uma variável para se referir a um mc dinamicamente:

 

//Recomendadovar menubtn:MovieClip = menu.duplicateMovieClip("menu" + i, i + 5);menubtn._x = i * 25 + 58;//Não recomendadomenu.duplicateMovieClip("menu" + i, i + 5);_root["menu"+i]._x = i * 25 + 58;

Pela mesma razão de carregar o processador desnecessariamente.

 

Bom galera, espero que tenham curtido essa primeira parte do tutorial e que o aproveitem para muitas coisas, inclusive para criar uma galeria de fotos! Se quiser é só tirar as partes de chamar a função proximoTicker() automaticamente que você terá uma ótima opção para mostrar seu portifólio!

 

Mas ainda não acabou! Vamos ver agora como gerar o xml por PHP pegando dados do MySQL!

 

Gerando o XML com PHP e MySQL

 

Esse tutorial é de nível básico-intermediário, pois alguns conceitos de PHP e de MySQL são exigidos.

 

Bom galera, vamos começar criando e populando a nossa tabela. Baixe as instruções em SQL para ficar mais fácil.

 

Depois de ter a tabela configurada, vamos criar o arquivo PHP que gerará o xml:

 

 

<?  //conectando ao mysql  $conn = @mysql_connect("localhost", "SEU LOGIN","SUA SENHA");    $db   = @mysql_select_db("SEU BD", $conn);   //Selecionando todos os registros da tabela tickers  $sql = "SELECT * FROM `tickers` ORDER BY `id` ASC";  //Executando a instrução sql  $sql  = @mysql_query($sql);  //Pegando o numero de registros  $rst = mysql_num_rows($sql);  //Se tiver algum registro  if($rst > 0) {		//Abre/cria o arquivo tickers.xml com permissão para escrever	$xml = fopen("tickers.xml", "w");	//Escreve o cabeçalho e o primeiro nó do xml	fwrite($xml, "<?xml version="1.0" encoding="utf-8"?>rn");	fwrite($xml, "<tickers>rn");	//Para cada registro que tiver	for($i=0; $i<$rst; $i++) {	  //Pegamos o valor de cada registro	  $titulo = utf8_encode(mysql_result($sql,$i,"titulo"));	  $area = utf8_encode(mysql_result($sql,$i,"area"));	  $texto = utf8_encode(mysql_result($sql,$i,"texto"));	  $foto = utf8_encode(mysql_result($sql,$i,"foto"));	  $link = utf8_encode(mysql_result($sql,$i,"link"));		 //Guardamos na variavel $conteudo as tags e os valores do xml		 $conteudo = "<ticker>rn";		 $conteudo .= "<titulo>$titulo</titulo>rn";		 $conteudo .= "<area>$area</area>rn";		 $conteudo .= "<texto>$texto</texto>rn";		 $conteudo .= "<foto>$foto</foto>rn";		 $conteudo .= "<link>$link</link>rn";		 $conteudo .= "</ticker>rn";	  //Escrevendo no tickers.xml	  fwrite($xml, $conteudo);	}	//Finalizando com a última tag	fwrite($xml, "</tickers>");		//Fechando o arquivo	fclose($xml);	  }?>

Salve como xml.php e teste. Pronto, só isso. Depois você pode criar algum sistema para dar um update do MySQL e logo após chamar esse aquivo php para gerar novamente o XML. Mas não vou explicar isso aqui pois foge do objetivo do ticker em Flash.

 

Bom pessoal, agora está finalizado o tutorial! :clap:

 

Espero que tenham gostado e que aproveitem bastante.

 

Abraço, até a próxima! :graduated:

[Everton Denis 0]

Sem comentários!!!!!!!Muito bom, mto bem explicado, mtas dicas fundamentais de desempenho...A parte do php eu jah havia criado uma vez, meio q sozinho e com esse tuto eu dei uma "enxutada" nele hehehehhe.Qto ao tickers...segui tdos os passos e não tem erro!!!! É só arrumar as posissões dos sobeLegenda() e desceLegenda(), como você falou, q funciona perfeitamente.Fica aqui o meu parabéns pelo ótimo tutorial.Abraço meu véio!!!

[Antoniosp 2]

Oba! Que bom que alguém conseguiu fazer sem problemas, hehe.

 

Fico muito feliz por saber que consegui passar a informação. :grin:

 

Ah, seu port tá ficando bem legal!

 

Abraço!

[Rafael Barros 0]

Sensacional, testei aqui também.. grande mestre antoniosp

[Antoniosp 2]

Galera! Um erro sobre acentuação! Na montagem do php eu coloquei o cabeçalho errado.

 

//Era:	fwrite($xml, "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\r\n");//Agora é:	fwrite($xml, "<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n");

E também na hora de resgatar os valores do bd. Reparem que agora o php codifica os dados em utf8, assim o flash reconhece sem problemas.

 

Abraço pessoal!

[the_flash 0]

Antoniosp

 

Parabéns!

 

Tá muito legal, funcionou perfeito no IE 6.0, mas no Firefox os botões não funcionaram.

[Antoniosp 2]

Hum... estranho the_flash, até o meu exemplo não está funcionando com você?ps: respondi depois de 12 dias... :nataltongue:

[Ghean 0]

Os menu (quadrados) com os numeros gostaria que ficassem atras do quadraro da area mas não estou conseguindo.

 

Ultilizando swapDepths(0); somente o ultimo fica atras mas os outros não.

 

Como devo proceder.

[Antoniosp 2]

Você pode trocar o area_mc.swapDepths(4); por area_mc.swapDepths(1000); por exemplo, aí os botões sempre ficarão atrás dele.Ah, estou com problemas no servidor e as imagens e os exemplos estão fora do ar. Quando conseguir eu ajeito tudo de novo...Flw galera----Edit-----Ae, está tudo 100% agora.

[kÖe 0]

mew Deeus.. tutorial perfeito... você nao sabe o quanto eu ja procurei por isso...MUITO obrigado

[maiabrasil 0]

Antônio,

 

Fiz aqui e deu tudo certinho. Daí eu fui aumentar um pouquinho o tamanho do palco e acontece o seguinte:

 

Passa a 1ª foto e o texto sobe normalmente.

 

Passa a 3ª foto e o texto sobe normalmente.

 

Ao passar a 3ª foto some os botões e fica com o fundo branco.

 

O que pode estar acontecendo ? você ou alguém pode me ajudar. Abaixo vou deixar um link com o arquivo .fla, dá uma olhada lá pra mim e vê o que eu fiz de errado, rsrsrs

 

Um abraço e fico no aguardo.

 

LINK

[maiabrasil 0]

E outra coisa: Tem como fazer pra que a descrição do texto suba sozinha e permaneça visualizada ? Assim a medida que as fotos fossem aparecendo a notícia apareceria junto. Alguém pode me ajudar nas minhas dúvidas anteriores e nessa aqui ?

[kÖe 0]

uma duvida... tem como acelerar o fade de alguma maneira?, tipo..fazer a transição mais rapida entre uma foto e outra?

[Antoniosp 2]

Olá galera, estou voltando.

 

Bom Maia, testei o seu swf com as mesmas fotos e o xml do tutorial e está tudo certo... não apareceu nenhum bug. Veja se não é o seu xml que está com alguma tag errada.

 

kÖe, dentro da função carregaFoto() tem o seguinte comando:

//Fazer o fadeIn com a foto de cimafotoIn = new Tween(fotoCima, "_alpha", None.easeNone, 0, 100, 1, true);

O número 1, antes do true, é o número em segundos da transição em alpha. Pode colocar 0.5, por exemplo.

 

Abraço :thumbsup:

[kÖe 0]

obrigado antonio

[flash_slave 0]

Antoniosp,muito bom teu tutorial, só que preciso de uma dica diferente: esse teu ticker tá buscando as informações de um banco de dados, certo? Tens idéia de como eu posso fazer ele buscar um ticker de bolsa de valores (como o que tem à direita em cima no www.bovespa.com.br). Esse ticker é atualizado muitas vezes por dia eu teria que fazer ele buscar essas informações atualizadas automaticamente.Abraço!

[Antoniosp 2]

Então, sugiro que dê uma olhada nesse tutorial que se aprofunda mais em como ler dados de um xml:http://www.imasters.com.br/artigo/4929/fla...o_xml_no_flash/Assim que entender como funciona a "captação" dos dados, é só analizar o XML da bovespa e pegar só os dados que lhe interessem para colocar no swf.Abraço

Antoniosp,muito bom teu tutorial, só que preciso de uma dica diferente: esse teu ticker tá buscando as informações de um banco de dados, certo? Tens idéia de como eu posso fazer ele buscar um ticker de bolsa de valores (como o que tem à direita em cima no www.bovespa.com.br). Esse ticker é atualizado muitas vezes por dia eu teria que fazer ele buscar essas informações atualizadas automaticamente.Abraço!

[Gandalf - The White 0]

poxa muito massa!!! valeu mesmo!!!!Tenho uma pergunta tem como fazer um botao de "pause" e "play" nas trasicoes? ou somente proximo? e anterior?[]sRobson

[Antoniosp 2]

Dá sim. Lembre-se que o que comanda o "play" das fotos é o intervalo ticker_intervalo = setInterval(proximoTicker, 5000);. Então é só você usar o clearInterval para dar um "stop" e usar essa linha de novo para dar um "play";Abraço

[Gandalf - The White 0]

valeu fera!! ficou perfeito agora!!!!muito bom mesmo!!![]sRobson