[Resolvido] Scroll controlado, com XML e FLASH... Como?

Antonelli · Dezembro 14, 2009

Beleza galera ?!

Espero que sim... então, estou criando um site pra mim, e gostaria de colocar um SCROLL DE FOTOS, para divulgar alguns produtos e estatísticas.

Gostei muito desse:

http://www.dmconsultoria.com.br/index.php

Com os números, para clicar, e automático!

Lendo o código de fonte desse site, descobri que ele é em XML, olhem abaixo:

- Código HTML do site onde está inserido:

<div class="mod_vitrine">
	<script language="javascript">
        if (AC_FL_RunContent == 0) {
            alert("This page requires AC_RunActiveContent.js.");
        } else {
            AC_FL_RunContent(
                'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
                'width', '631',
                'height', '260',
                'src', 'flash/vitrine/vitrine_home?urlxml=components/com_vitrine/xml/vitrine.php?id_area=1',
                'quality', 'high',
                'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
                'align', 'middle',
                'play', 'true',
                'loop', 'true',
                'scale', 'showall',
                'wmode', 'transparent',
                'devicefont', 'false',
                'id', 'vitrine',
                'bgcolor', '#ffffff',
                'name', 'vitrine',
                'menu', 'true',
                'allowFullScreen', 'false',
                'allowScriptAccess','sameDomain',
                'movie', 'flash/vitrine/vitrine_home?urlxml=components/com_vitrine/xml/vitrine.php?id_area=1',
                'salign', ''
                ); //end AC code
        }
    </script><embed src="flash/vitrine/vitrine_home.swf?urlxml=components/com_vitrine/xml/vitrine.php?id_area=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" play="true" loop="true" scale="showall" wmode="transparent" devicefont="false" bgcolor="#ffffff" name="vitrine" menu="true" allowfullscreen="false" allowscriptaccess="sameDomain" salign="" type="application/x-shockwave-flash" width="631" align="middle" height="260"> 
    <noscript>
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="631" height="260" id="Untitled-1" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="false" />
            <param name="movie" value="/flash/vitrine/vitrine_home.swf?urlxml=components/com_vitrine/xml/vitrine.php?id_area=1" />
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="bgcolor" value="#ffffff" />
            <embed src="/flash/vitrine/vitrine_home.swf?urlxml=components/com_vitrine/xml/vitrine.php?id_area=1" quality="high" bgcolor="#ffffff" width="631" height="260" name="Untitled-1" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
    </noscript>

</div>

- Abrindo esse site no navegador (components/com_vitrine/xml/vitrine.php?id_area=1):

<RESULT total="4">
−
<vitrine cod="1">
<id_area>1</id_area>
<name>Vitrine Quebra Cabeca</name>
<description>vitrine_quebra_cabeca</description>
<timer>8</timer>
<swf>flash/vitrine/banners_vitrine/1_teste.swf</swf>
<url></url>
<target>_self</target>
</vitrine>
−
<vitrine cod="24">
<id_area>1</id_area>
<name>chat</name>
<description></description>
<timer>1</timer>
<swf>images/vitrinehome/banner3.swf</swf>
<url></url>
<target>_self</target>
</vitrine>
−
<vitrine cod="25">
<id_area>1</id_area>
<name>workflow</name>
<description></description>
<timer>1</timer>
<swf>images/vitrinehome/gear.swf</swf>
<url></url>
<target>_self</target>
</vitrine>
−
<vitrine cod="26">
<id_area>1</id_area>
<name>analise</name>
<description></description>
<timer>1</timer>
<swf>images/vitrinehome/banner2a.swf</swf>
<url></url>
<target>_self</target>
</vitrine>
</RESULT>

Alguem faz ideia de como seja?

Obrigado galera!

Abraços à todos!

Elektra · Dezembro 14, 2009

Oi Antonelli, na paz.

Pode chamar o que você deseja de slideshow ou banner rotativo.

Ainda prefiro o da Livraria Saraiva, que além dos botões para selecionar a oferta em exibição ainda permite clicar sobre o banner e acessar a página com o produto.

Banner Rotativo - Livraria Saraiva

Sei fazer em AS3 via timeline, ainda não tentei com XML.

Tem um exemplo com XML nos artigos e tutoriais publicados pelos dos colegas aqui do fórum, verifique se a versão do action é compatível com a que você usa.

Abraços http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

Antonelli · Dezembro 14, 2009

Oi Antonelli, na paz.

Pode chamar o que você deseja de slideshow ou banner rotativo.

Ainda prefiro o da Livraria Saraiva, que além dos botões para selecionar a oferta em exibição ainda permite clicar sobre o banner e acessar a página com o produto.

Banner Rotativo - Livraria Saraiva

Sei fazer em AS3 via timeline, ainda não tentei com XML.

Tem um exemplo com XML nos artigos e tutoriais publicados pelos dos colegas aqui do fórum, verifique se a versão do action é compatível com a que você usa.

Abraços http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

Bem legal esse também!

Obrigado por ter respondido... rs

Então, o motivo de estar querendo o em XML é que caso eu queira alterar a promoção, basta mudar a foto e alterar o XML que muda!

Com AS3 tem como fazer isso?

Sei como fazer com jQuery, mas fica um pouco estranho! =S

Queria um "personalizavel"!

Desde já agradeço, abraços.

Elektra · Dezembro 14, 2009

Sim, com XML facilita muito a atualização.

Uso XML para outros arquivos, como um mp3 player, galeria com Simple Viever, conteúdo em Scrollbar, etc.

Mas para um banner rotativo, com animação, requer recursos em AS3 que ainda não domino.

Difícil é você encontrar tutorial para isso.

Boa sorte na procura.

Antonelli · Dezembro 15, 2009

Sim, com XML facilita muito a atualização.

Uso XML para outros arquivos, como um mp3 player, galeria com Simple Viever, conteúdo em Scrollbar, etc.

Mas para um banner rotativo, com animação, requer recursos em AS3 que ainda não domino.

Difícil é você encontrar tutorial para isso.

Boa sorte na procura.

Então, acho que achei a "essência", digamos que a "coluna vertebral de um bebê" (pois tem muito o que melhorar, mas o principal tá pronto)! http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

Abaixo vou colocar o XML e depois o AS.

Os créditos são desse site: Banner Rotativo

Só adaptei algumas coisas, que não estavam funcionando, mas ainda estão bugadas.

XML (salvo com o nome "banners.xml"):

<?xml version="1.0" encoding="utf-8"?>
<banners>
	<banner>
		<imagem>1.jpg</imagem>
		<msg>Imagem1</msg>
		<link>http://www.professorburnes.com</link>
	</banner>
	<banner>
		<imagem>2.jpg</imagem>
		<msg>Imagem2</msg>
		<link>http://www.uol.com.br</link>
	</banner>
	<banner>
		<imagem>3.jpg</imagem>
		<msg>Imagem3</msg>
		<link>http://www.terra.com.br</link>
	</banner>
	<banner>
		<imagem>4.jpg</imagem>
		<msg>Imagem4</msg>
		<link>http://www.vagalume.com.br</link>
	</banner>
</banners>

ActionScript (IMPORTANTE: Não funciona no 3.0), abra duas camadas, em uma coloque um MC do tamanho do video, e na outra a ação:

import mx.transitions.*;
import mx.transitions.easing.*;
var xml:XML = new XML();
xml.ignoreWhite=true;
xml.load("banners.xml");

function proximo() {
	if (_global.id >= _global.tamanho) {
		_global.id=0;
	}
	img1.loadMovie(banner[_global.id]['image']);
	var suavizaProximo:Tween = new Tween(img1,"_alpha",Regular.easeOut,3,100,1,true);
	_global.id++;	
}
xml.onLoad = function(sucesso){
	if (sucesso){
		_global.tamanho = xml.firstChild.childNodes.length;
		banner = new Array();
		j = 0;
		while (j < _global.tamanho){
			banner[j] = new Array();
			banner[j]['image'] = xml.firstChild.childNodes[j].childNodes[0].firstChild.nodeValue;
			banner[j]['link'] = xml.firstChild.childNodes[j].childNodes[2].firstChild.nodeValue; //no link do "credito" não tinha essa linha, porém o botão de "link" dava "undefined" em todos
			j++;
		}
		btnLink.onRelease = function (){
			getURL(banner[_global.id]['link']);
		};
		_global.id = 0;
		proximo();
		setInterval(proximo,4000);
	}
};

Funcionou perfeitamente, "consegui" colocar os botões para voltar e avançar, mas bugou... o de avançar foi tranquilo, apenas coloquei para chamar a função "proximo();", no anterior bugou!

E o botão de link, está recebendo o caminho mas a seqüencia errada, por exemplo:

CERTO (no XML):

Imagem1 >> www.google.com.br

Imagem2 >> www.terra.com.br

Imagem3 >> www.uol.com.br

FICA ASSIM (no FLASH):

Imagem1 >> www.terra.com.br

Imagem2 >> www.uol.com.br

Imagem3 >> undefinided

É isso ai, estamos evoluindo... Vamos ajudar galera!

Obrigado, abraços.

Elektra · Dezembro 16, 2009

Em AS2 é mais fácil de encontrar.

Sugiro dê uma olhada no ffiles.com, talvez encontre um template que possa aproveitar o action para os botões.

Abs.

Antonelli · Dezembro 16, 2009

Não .. rs

Sou guerreiro, vou tentar montar alguma coisa aqui! =D

To conseguindo, consegui funcionar o LINK certinho, e o tempo que a imagem fica na tela é definida no XML também! Agora vou tentar fazer assim:

"Um botão para cada NODE", e esse botão exibirá o número do NODE... daí que ao clicar nele vai ser carregado a imagem correspondente. Só que essa é a parte mais difícil pra mim! Pensei em criar um ARRAY pra receber essa info, depois quebrá-lo e colocar uma DYNAMIC TEXT em cada botão, para que apareça... sei lá, alguem tem alguma ideia?!

Abaixo o código do AS, e em seguida o XML!

(script baseado nesse tutorial, Tutorial 01, e nesse outro, Tutorial 01)

- AS:

// SCRIPT ELABORADO POR: Antonelli Santos

// -- configuração padrão, não alterar --
system.useCodepage = true;
import mx.transitions.*;
import mx.transitions.easing.*;
var xmlImportado:XML = new XML();
var i:Number = 0;
// ---------------------------------------

// define o arquivo XML a ser lido e ignora blocos em branco
xmlImportado.load("banners.xml");
xmlImportado.ignoreWhite = true;

// define configurações de nó e dados a serem importados, logo quando carrega
xmlImportado.onLoad = function(sucesso) {
	if (sucesso) {
		_global.nodeTotal = xmlImportado.firstChild.childNodes.length;
		adImage = new Array();
		adNumber = new Array();
		adURL = new Array();
		adTime = new Array();
		i = 0;
		while (i<_global.nodeTotal) {
			adImage[i] = new Array();
			adNumber[i] = new Array();
			adURL[i] = new Array();
			adTime[i] = new Array();
			adImage[i] = xmlImportado.firstChild.childNodes[i].attributes.imagem;
			adNumber[i] = xmlImportado.firstChild.childNodes[i].attributes.numero;
			adURL[i] = xmlImportado.firstChild.childNodes[i].attributes.caminho;
			adTime[i] = xmlImportado.firstChild.childNodes[i].attributes.duracao;
			i++;
		}

		_global.ID = 0;
		proximo();
	} else {
		trace("Erro, a função SUCESSO não pode ser carregado!");
	}

};

// função que faz o AD ter efeito
function proximo() {

	if (_global.ID>=_global.nodeTotal) {
		_global.ID = 0;
	}

	adStage.loadMovie(adImage[_global.ID]);
	var suaviza:Tween = new Tween(adStage, "_alpha", Strong.easeOut, 3, 100, 1, true);

	// seta o intervalo de acordo com a "duracao" configurada no XML
	clearInterval(_global.comeca);
	_global.comeca = setInterval(proximo, adTime[_global.ID]*1000);

	// seta a URL do link de acordo com o "caminho" configurado no XML
	var enderecoLink = adURL[_global.ID];
	btnLink.onRelease = function() {
		getURL(enderecoLink);
	};

	_global.ID++;

}

- XML:

<?xml version="1.0" encoding="utf-8"?>
<banners>
	<banner numero="1" imagem="1.jpg" duracao="1" caminho="www.terra.com.br"></banner>
	<banner numero="2" imagem="2.jpg" duracao="10" caminho="www.uol.com.br"></banner>
	<banner numero="3" imagem="3.jpg" duracao="5" caminho="www.globo.com.br"></banner>
	<banner numero="4" imagem="4.jpg" duracao="2" caminho="www.yahoo.com.br"></banner>
</banners>

Para ativar o botão de avançar, criei o mesmo, e coloquei o seguinte na AS:

btnAvancar.onRelease = function(){
	proximo();
}

(resumindo, ele chama a ação normal de passar, apenas sem esperar o intervalo)

Tentei fazer um para voltar, mas como não é o meu foco (pois vou fazer um para cada imagem, como expliquei) achei desnecessário!

Quem puder ajudar, vai ser ótimo! =D

Obrigadão!

(obs.: não manjo muito de AS, então pode ter alguns erros, mas to tentando melhorar!)

Antonelli · Dezembro 29, 2009

É isso ai galera, ralei um pouco aqui, mas consegui!

Pesquisei bastante, e consegui mais do que eu achava que conseguiria... Mas consegui!

Não sei se ficou bom, mas ficou bastante usual!

Vou ensinar a usar:

LEMBRANDO QUE TUDO ESTÁ PROGRAMADO EM XML E AS2!

1º) Crie três camadas na TimeLine principal, nomeie a primeira como "AS", a segunda como "btLink" e a terceira como "btMENU",

2º) Na camada "btMENU", crie um MC que conterá o design do botão (que terá os números de cada nó do XML), instancie-o como "tDEFAULT",

3º) Dentro desse MC, coloque um campo de texto dinâmico e defina a váriavel dele como "myId",

4º) Agora, na camada "btLink", crie outro MC, que cobrirá a parte do ANUNCIO e instancie-o de "btLink" (o design desse MC não importa, ele será invisivel),

5º) Na camada AS, aperte a tecla F9 e cole o código abaixo.

- OBS.: Caso queira, da segunda até a sétima linha do código, estão algumas váriaveis que irão alterar posicionamento no seu arquivo, altere e veja o resultado.

// ------------ PERSONALIZE ------------ //
var arquivoXML = "banners.xml"; // nome do arquivo XML
var XposicaoAD:Number = 0; // posicao horizontal onde sera carregado os anuncios [default:0]
var YposicaoAD:Number = 0; // posicao vertical onde sera carregado os anuncios [default:0]
var XescalaAD:Number = 100; // escala horizontal dos anuncios carregados [default:100]
var YescalaAD:Number = 100; // escala vertical dos anuncios carregados [default:100]
var XposicaoMENU:Number = 50; // posicao horizontal dos botoes (primeiro)
var YposicaoMENU:Number = 80; // posicao vertical dos botoes (todos)
// ------------------------------------- //
//
// ------ ALTERE APENAS SE SOUBER ------ //
system.useCodepage = true;
import mx.transitions.*;
import mx.transitions.easing.*;
var xmlImportado:XML = new XML();
_root.createEmptyMovieClip("stageAD",0);
	stageAD._x = XposicaoAD;
	stageAD._y = YposicaoAD;
	stageAD._xscale = XescalaAD;
	stageAD._yscale = YescalaAD;
_root.onLoad = function(){
	btDEFAULT._visible=false;
	btLink._alpha=0;
}
xmlImportado.load(arquivoXML);
xmlImportado.ignoreWhite = true;
xmlImportado.onLoad = function(sucesso) {
	if (sucesso) {
		_global.nodeTotal = xmlImportado.firstChild.childNodes.length;
		adImage = new Array();
		adURL = new Array();
		adTime = new Array();
		_global.ID = 0;
		for (i=0; i<_global.nodeTotal; i++) {
			adImage[i] = new Array();
			adURL[i] = new Array();
			adTime[i] = new Array();
			adImage[i] = xmlImportado.firstChild.childNodes[i].attributes.imagem;
			adURL[i] = xmlImportado.firstChild.childNodes[i].attributes.caminho;
			adTime[i] = xmlImportado.firstChild.childNodes[i].attributes.duracao;
			duplicateMovieClip("btDEFAULT","bt"+i,i+10);
			setProperty("bt"+i,_x,(i*20)+XposicaoMENU);
			setProperty("bt"+i,_y,YposicaoMENU);
			_root["bt"+i].myId=i;
			_root["bt"+i].onRelease=function(){
				clearInterval(_global.comeca);
				_global.ID=this.myId;
				proximo();
			}
			_root["bt"+i].onRollOver=function(){
				new Tween(this, "_alpha", Strong.easeOut, 100, 50, 1, true);
			}
			_root["bt"+i].onRollOut=function(){
				new Tween(this, "_alpha", Strong.easeOut, 50, 100, 1, true);
			}
        }
		_global.ID = 0;
		proximo();
	} else {
		trace("Erro, a função SUCESSO não pode ser carregado!");
	}
};
function proximo() {
	if (_global.ID >= _global.nodeTotal) {
		_global.ID = 0;
	}
	stageAD.loadMovie(adImage[_global.ID]);
	var suaviza:Tween = new Tween(stageAD, "_alpha", Strong.easeOut, 3, 100, 1, true);
	clearInterval(_global.comeca);
	_global.comeca = setInterval(proximo, (adTime[_global.ID])*1000);
	var enderecoLink = "http://"+adURL[_global.ID];
	btLink.onRelease = function() {
		getURL(enderecoLink);
	};
	_global.ID++;
}
// ------------------------------------- //

PRONTO... A parte do Flash está pronta!

Agora vamos ao XML:

1º) Crie um novo arquivo XML, e cole o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<banners>
	<banner imagem="1.jpg" duracao="3" caminho="www.terra.com.br"></banner>
	<banner imagem="2.jpg" duracao="3" caminho="www.uol.com.br"></banner>
	<banner imagem="3.jpg" duracao="3" caminho="www.globo.com.br"></banner>
	<banner imagem="4.jpg" duracao="3" caminho="www.yahoo.com.br"></banner>
</banners>

-- EXPLICANDO --

Para alterar, basta trocar o que esta entre os aspas.

Ex.: quero indicar que a primeira imagem tem o seguinte nome: "primeiro.jpg", que durará "5 segundos" e abrirá o site "http://www.bancodobrasil.com.br". Então pego esta parte:

<banner imagem="1.jpg" duracao="3" caminho="www.terra.com.br"></banner>

E troco para:

<banner imagem="primeiro.jpg" duracao="5" caminho="www.bancodobrasil.com.br"></banner>

O atributo "imagem" defini o nome do arquivo à ser carregado, o atributo "duracao" define o tempo que ele ficará na tela, em segundos, e o atributo "caminho" indica o site que ele abrirá ao ser clicado (sem o HTTP://).

E PRONTO, "galeria", "banner rotativo", ou sei lá o nome, está funcionando!

Quem queira, pode aprimorar o código, a ideia, enfim... E se possivel poste aqui, para que possamos acompanhar também!

Obrigado à todos que colaboraram.

Espero que seja útil.

Abraços à todos!

Arquivado

[Resolvido] Scroll controlado, com XML e FLASH... Como?

Recommended Posts

Antonelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elektra 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elektra 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elektra 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante